From ed5afe4b2194aeaaa3904e88c3f45cb3eb5ae215 Mon Sep 17 00:00:00 2001
From: Nora <nora_rocks@agentmail.to>
Date: Fri, 26 Jun 2026 05:53:17 -0600
Subject: [PATCH] =?UTF-8?q?fix:=20react-doctor=20exhaustive-deps=203?=
 =?UTF-8?q?=E2=86=920,=20prefer-use-effect-event=203=E2=86=920=20(useEffec?=
 =?UTF-8?q?tEvent=20for=20modal=20cancel=20handlers),=20role-supports-aria?=
 =?UTF-8?q?-props=203=E2=86=920=20(aria-pressed/aria-current=20on=20button?=
 =?UTF-8?q?s)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/admin/AbandonedCartDashboard.tsx    | 10 +++++++---
 src/components/admin/BrandSelector.tsx             |  4 ++--
 src/components/admin/CommandPalette.tsx            |  2 +-
 src/components/admin/ProductFormModal.tsx          | 10 +++++++---
 src/components/admin/ProductsClient.tsx            | 10 +++++++---
 src/components/route-trace/StickerPreviewModal.tsx | 10 +++++++---
 src/components/wholesale/DepositModal.tsx          | 10 +++++++---
 src/components/wholesale/OrderDetailsModal.tsx     | 10 +++++++---
 8 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/src/components/admin/AbandonedCartDashboard.tsx b/src/components/admin/AbandonedCartDashboard.tsx
index ef07496..83251dd 100644
--- a/src/components/admin/AbandonedCartDashboard.tsx
+++ b/src/components/admin/AbandonedCartDashboard.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useCallback, useEffect, useRef } from "react";
+import { useState, useCallback, useEffect, useRef, useEffectEvent } from "react";
 import { getAbandonedCarts, manuallyCloseAbandonedCart, resendAbandonedCartEmail, type AbandonedCart } from "@/actions/email-automation/abandoned-cart";
 
 type Props = { brandId: string };
@@ -197,6 +197,10 @@ export default function AbandonedCartDashboard({ brandId }: Props) {
 
 function CartDetailModal({ cart, onClose }: { cart: AbandonedCart | null; onClose: () => void }) {
   const dialogRef = useRef<HTMLDialogElement>(null);
+  const onCloseEvent = useEffectEvent(() => {
+    onClose();
+  });
+
   useEffect(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
@@ -204,13 +208,13 @@ function CartDetailModal({ cart, onClose }: { cart: AbandonedCart | null; onClos
     if (!cart && dialog.open) dialog.close();
     const onCancel = (e: Event) => {
       e.preventDefault();
-      onClose();
+      onCloseEvent();
     };
     dialog.addEventListener("cancel", onCancel);
     return () => {
       dialog.removeEventListener("cancel", onCancel);
     };
-  }, [cart, onClose]);
+  }, [cart]);
 
   if (!cart) return null;
 
diff --git a/src/components/admin/BrandSelector.tsx b/src/components/admin/BrandSelector.tsx
index 660f472..93c82cd 100644
--- a/src/components/admin/BrandSelector.tsx
+++ b/src/components/admin/BrandSelector.tsx
@@ -152,7 +152,7 @@ export default function BrandSelector({
             <li>
               <button
                 type="button"
-                aria-selected={!activeBrand}
+                aria-pressed={!activeBrand}
                 onClick={() => selectBrand(null)}
                 className="w-full flex items-center gap-2 px-3 py-2 text-xs text-left transition-colors hover:bg-white/5"
                 style={{
@@ -185,7 +185,7 @@ export default function BrandSelector({
               <li key={b.id}>
                 <button
                   type="button"
-                  aria-selected={isActive}
+                  aria-pressed={isActive}
                   onClick={() => selectBrand(b.id)}
                   className="w-full flex items-center gap-2 px-3 py-2 text-xs text-left transition-colors hover:bg-white/5"
                   style={{
diff --git a/src/components/admin/CommandPalette.tsx b/src/components/admin/CommandPalette.tsx
index 4c4e721..af303ef 100644
--- a/src/components/admin/CommandPalette.tsx
+++ b/src/components/admin/CommandPalette.tsx
@@ -370,7 +370,7 @@ function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
                 <li key={entry.id} className="list-none">
                   <button
                     type="button"
-                    aria-selected={isSelected}
+                    aria-current={isSelected ? "true" : undefined}
                     onClick={() => navigate(entry.href)}
                     onMouseEnter={() => setSelected(i)}
                     style={{
diff --git a/src/components/admin/ProductFormModal.tsx b/src/components/admin/ProductFormModal.tsx
index 47ace92..de540dc 100644
--- a/src/components/admin/ProductFormModal.tsx
+++ b/src/components/admin/ProductFormModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore, useEffectEvent } from "react";
 import Image from "next/image";
 import { createPortal } from "react-dom";
 
@@ -140,19 +140,23 @@ export default function ProductFormModal({
   // parent's React state stays in sync with the native close behavior.
   const dialogRef = useRef<HTMLDialogElement>(null);
 
+  const onCloseEvent = useEffectEvent(() => {
+    onClose();
+  });
+
   useEffect(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
     if (!dialog.open) dialog.showModal();
     const onCancel = (e: Event) => {
       e.preventDefault();
-      onClose();
+      onCloseEvent();
     };
     dialog.addEventListener("cancel", onCancel);
     return () => {
       dialog.removeEventListener("cancel", onCancel);
     };
-  }, [open, onClose]);
+  }, [open]);
 
   const handleFile = useCallback(
     async (file: File) => {
diff --git a/src/components/admin/ProductsClient.tsx b/src/components/admin/ProductsClient.tsx
index 6f9a6e2..99de814 100644
--- a/src/components/admin/ProductsClient.tsx
+++ b/src/components/admin/ProductsClient.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useCallback, useTransition, useEffect, useRef } from "react";
+import { useState, useCallback, useTransition, useEffect, useRef, useEffectEvent } from "react";
 import { createPortal } from "react-dom";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
@@ -390,6 +390,10 @@ function TableView({
     init();
   }, []);
 
+  const onDeleteCancelEvent = useEffectEvent(() => {
+    onDeleteCancel();
+  });
+
   useEffect(() => {
     if (!deleteConfirm) return;
     const dialog = popupDialogRef.current;
@@ -397,13 +401,13 @@ function TableView({
     if (!dialog.open) dialog.showModal();
     const onCancel = (e: Event) => {
       e.preventDefault();
-      onDeleteCancel();
+      onDeleteCancelEvent();
     };
     dialog.addEventListener("cancel", onCancel);
     return () => {
       dialog.removeEventListener("cancel", onCancel);
     };
-  }, [deleteConfirm, onDeleteCancel]);
+  }, [deleteConfirm]);
 
   // Track the previous deleteConfirm value so we can adjust menuPos
   // inline during render when the prop changes — avoids a stale frame
diff --git a/src/components/route-trace/StickerPreviewModal.tsx b/src/components/route-trace/StickerPreviewModal.tsx
index 2b2a6df..3fced5c 100644
--- a/src/components/route-trace/StickerPreviewModal.tsx
+++ b/src/components/route-trace/StickerPreviewModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useEffectEvent } from "react";
 import Image from "next/image";
 import { LotDetail } from "@/actions/route-trace/lots";
 
@@ -91,16 +91,20 @@ export default function StickerPreviewModal({ lot, onClose }: { lot: LotDetail;
     };
   }, []);
 
+  const onCloseEvent = useEffectEvent(() => {
+    onClose();
+  });
+
   useEffect(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
     const handleCancel = (e: Event) => {
       e.preventDefault();
-      onClose();
+      onCloseEvent();
     };
     dialog.addEventListener("cancel", handleCancel);
     return () => dialog.removeEventListener("cancel", handleCancel);
-  }, [onClose]);
+  }, []);
 
   const handleBackdropClick = (e: React.MouseEvent) => {
     const dialog = dialogRef.current;
diff --git a/src/components/wholesale/DepositModal.tsx b/src/components/wholesale/DepositModal.tsx
index b57b2c0..0f21bea 100644
--- a/src/components/wholesale/DepositModal.tsx
+++ b/src/components/wholesale/DepositModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useEffectEvent } from "react";
 import { type WholesaleOrder, recordWholesaleDeposit } from "@/actions/wholesale";
 
 type Props = {
@@ -26,16 +26,20 @@ export default function DepositModal({ order, onClose, onFulfilled }: Props) {
     };
   }, []);
 
+  const onCloseEvent = useEffectEvent(() => {
+    onClose();
+  });
+
   useEffect(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
     const handleCancel = (e: Event) => {
       e.preventDefault();
-      onClose();
+      onCloseEvent();
     };
     dialog.addEventListener("cancel", handleCancel);
     return () => dialog.removeEventListener("cancel", handleCancel);
-  }, [onClose]);
+  }, []);
 
   const handleBackdropClick = (e: React.MouseEvent) => {
     const dialog = dialogRef.current;
diff --git a/src/components/wholesale/OrderDetailsModal.tsx b/src/components/wholesale/OrderDetailsModal.tsx
index 830786b..b451060 100644
--- a/src/components/wholesale/OrderDetailsModal.tsx
+++ b/src/components/wholesale/OrderDetailsModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useEffectEvent } from "react";
 import { type WholesaleOrder } from "@/actions/wholesale";
 
 type Props = {
@@ -38,16 +38,20 @@ export default function OrderDetailsModal({ order, onClose, onFulfill, onRecordD
     };
   }, []);
 
+  const onCloseEvent = useEffectEvent(() => {
+    onClose();
+  });
+
   useEffect(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
     const handleCancel = (e: Event) => {
       e.preventDefault();
-      onClose();
+      onCloseEvent();
     };
     dialog.addEventListener("cancel", handleCancel);
     return () => dialog.removeEventListener("cancel", handleCancel);
-  }, [onClose]);
+  }, []);
 
   const handleBackdropClick = (e: React.MouseEvent) => {
     const dialog = dialogRef.current;