feat: implement useOverlayDismiss hook for consistent modal dismissal behavior

2026-08-10 11:27:16 +03:30
parent 8a18457751
commit 3365a0427e
12 changed files with 227 additions and 36 deletions
@@ -16,6 +16,7 @@ import ConfirmDialog from '../components/ui/ConfirmDialog';
 import Pagination from '../components/ui/Pagination';
 import SearchableSelect from '../components/ui/SearchableSelect';
 import { XMarkIcon } from '@heroicons/react/24/outline';
+import { useOverlayDismiss } from '../hooks/useOverlayDismiss';

 // ── Types ─────────────────────────────────────────────────────────────────

@@ -108,10 +109,12 @@ function ChangeRoleModal({ user, onClose, onSave, loading }: {
  onSave: (role: string) => void; loading: boolean;
 }) {
  const [selected, setSelected] = useState(getPrimaryRole(user.roles));
+  const dismiss = useOverlayDismiss(onClose);
+
  return (
    <Portal>
-    <div className="overlay" onClick={onClose}>
-      <div className="modal" style={{ maxWidth: 400 }} onClick={(e) => e.stopPropagation()}>
+    <div className="overlay" {...dismiss}>
+      <div className="modal" style={{ maxWidth: 400 }}>
        <div className="modal-head">
          <h2 style={{ fontSize: 16 }}>تغییر نقش</h2>
          <button className="mini-btn" onClick={onClose}>