@pushwoosh/dumb-components 4.6.0 → 4.7.1

package/Calendar/CalendarDropdown/CalendarDropdown.js

@@ -66,7 +66,12 @@ export const CalendarDropdown = props => {
     setIsOpen(true);
   };
   const {
-    refs,
+    refs: {
+      reference,
+      floating,
+      setReference,
+      setFloating
+    },
     floatingStyles
   } = useFloating({
     open: isOpen,
@@ -84,7 +89,7 @@ export const CalendarDropdown = props => {
     isOpen,
     onClose: closePopover
   });
-  useOnClickOutside([refs.reference, refs.floating], () => {
+  useOnClickOutside([reference, floating], () => {
     if (isOpen) closePopover();
   });
   const onChangeHandler = val => {
@@ -106,7 +111,7 @@ export const CalendarDropdown = props => {
   return _jsxs(Horizontal, {
     "$justifyContent": "start",
     children: [_jsx(Button, {
-      boxRef: refs.setReference,
+      boxRef: setReference,
       type: "button",
       view: buttonView,
       size: buttonSize,
@@ -119,7 +124,7 @@ export const CalendarDropdown = props => {
       isOpen: isOpen,
       children: buttonTextCustom ?? buttonText
     }), isOpen && createPortal(_jsx(PopoverContent, {
-      ref: refs.setFloating,
+      ref: setFloating,
       style: {
         ...floatingStyles,
         zIndex

package/Calendar/CalendarSuperForm/components/CalendarRangePicker/CalendarRangePicker.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef } from 'react';
+import { useState } from 'react';
 import { getDisabledRanges } from './getDisabledRanges';
 import { CalendarMonthSlider } from '../../../CalendarMonthSlider/CalendarMonthSlider';
 import { compareStructs } from '../../../helpers';
@@ -18,17 +18,16 @@ export const CalendarRangePicker = ({
   firstDayOfWeek,
   initialVisibleMonth
 }) => {
-  const startMonthRef = useRef(undefined);
-  if (!startMonthRef.current) {
+  const [startMonth] = useState(() => {
     const d = new Date();
-    startMonthRef.current = initialVisibleMonth ?? value[0] ?? {
+    return initialVisibleMonth ?? value[0] ?? {
       year: d.getFullYear(),
       month: d.getMonth() + 1,
       day: d.getDate()
     };
-  }
+  });
   return _jsx(CalendarMonthSlider, {
-    startMonth: startMonthRef.current,
+    startMonth: startMonth,
     visibleCount: visibleCount,
     monthWidth: monthWidth,
     gap: gap,

package/Modal/components/ModalName/ModalName.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { ModalNameProps } from './types';
+/** Asks for an entity name on save, rename or with a suggestion; warnings and errors go under the field. */
+export declare function ModalName({ isOpen, ...props }: ModalNameProps): ReactElement | null;

package/Modal/components/ModalName/ModalName.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+import { Paragraph } from '@pushwoosh/kit-typography';
+import { Banner } from '../../../Banner';
+import { Button } from '../../../Button';
+import { FieldBox } from '../../../FieldBox';
+import { NativeInput } from '../../../native';
+import { useLang } from '../../polyglot';
+import { Modal } from '../Modal';
+import { ModalBody, ModalFooter, ModalHeader } from '../ModalContent';
+import { ModalTitle } from '../ModalTitle';
+function ModalNameDialog(props) {
+  const {
+    title,
+    description,
+    label,
+    placeholder,
+    initialName = '',
+    suggestedName,
+    initialWarning,
+    initialError,
+    maxLength,
+    submitText,
+    cancelText,
+    onSubmit,
+    onClose
+  } = props;
+  const lang = useLang();
+  const inputRef = useRef(null);
+  const [name, setName] = useState(suggestedName ?? initialName);
+  const [isEmptyError, setIsEmptyError] = useState(false);
+  const [error, setError] = useState(initialError);
+  const [warning, setWarning] = useState(initialWarning ? {
+    name: initialName.trim(),
+    content: initialWarning
+  } : undefined);
+  const [isSaving, setIsSaving] = useState(false);
+  const trimmedName = name.trim();
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => inputRef.current?.select());
+    return () => cancelAnimationFrame(frame);
+  }, []);
+  const close = () => {
+    if (!isSaving) {
+      onClose();
+    }
+  };
+  const submit = async event => {
+    event.preventDefault();
+    if (isSaving) {
+      return;
+    }
+    if (!trimmedName) {
+      setIsEmptyError(true);
+      inputRef.current?.focus();
+      return;
+    }
+    if (!warning && !error && trimmedName === initialName.trim()) {
+      onClose();
+      return;
+    }
+    setIsSaving(true);
+    setError(undefined);
+    try {
+      const result = await onSubmit(trimmedName);
+      setWarning(result?.warning ? {
+        name: trimmedName,
+        content: result.warning
+      } : undefined);
+      setError(result?.error);
+    } catch (e) {
+      setWarning(undefined);
+      setError(e?.message || lang({
+        message: 'DUMB.MODAL.UNEXPECTED_ERROR'
+      }));
+    } finally {
+      setIsSaving(false);
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }
+  };
+  return _jsx(Modal, {
+    size: "small",
+    isOpen: true,
+    onClose: close,
+    children: _jsxs("form", {
+      onSubmit: submit,
+      children: [_jsx(ModalHeader, {
+        children: _jsx(ModalTitle, {
+          children: title
+        })
+      }), _jsx(ModalBody, {
+        children: _jsxs(Vertical, {
+          "$gap": 16,
+          children: [description && _jsx(Paragraph, {
+            children: description
+          }), _jsx(FieldBox, {
+            title: label,
+            error: error,
+            children: _jsx(NativeInput, {
+              ref: inputRef,
+              type: "text",
+              value: name,
+              placeholder: placeholder,
+              maxLength: maxLength,
+              disabled: isSaving,
+              "$isErrored": isEmptyError || !!error,
+              "aria-invalid": isEmptyError || !!error,
+              onChange: event => {
+                setName(event.target.value);
+                setIsEmptyError(false);
+              }
+            })
+          }), warning && warning.name === trimmedName && _jsx(Banner, {
+            type: "warning",
+            title: warning.content
+          })]
+        })
+      }), _jsx(ModalFooter, {
+        children: _jsxs(Horizontal, {
+          "$justifyContent": "end",
+          "$gap": 8,
+          children: [_jsx(Button, {
+            color: "secondary",
+            isDisabled: isSaving,
+            onClick: close,
+            children: cancelText ?? lang({
+              message: 'DUMB.MODAL.CANCEL'
+            })
+          }), _jsx(Button, {
+            color: "primary",
+            type: "submit",
+            isLoading: isSaving,
+            children: submitText ?? lang({
+              message: 'DUMB.MODAL.SAVE'
+            })
+          })]
+        })
+      })]
+    })
+  });
+}
+/** Asks for an entity name on save, rename or with a suggestion; warnings and errors go under the field. */
+export function ModalName({
+  isOpen,
+  ...props
+}) {
+  return isOpen ? _jsx(ModalNameDialog, {
+    ...props
+  }) : null;
+}

package/Modal/components/ModalName/index.d.ts

@@ -0,0 +1,2 @@
+export { ModalName } from './ModalName';
+export type { ModalNameProps, ModalNameResult } from './types';

package/Modal/components/ModalName/index.js

@@ -0,0 +1 @@
+export { ModalName } from './ModalName';

package/Modal/components/ModalName/types.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+/** What {@link ModalNameProps.onSubmit} reports back; nothing means the name was saved. */
+export type ModalNameResult = void | {
+    /** Keeps the dialog open with an orange banner under the field, e.g. "name already taken". */
+    warning?: string;
+    /** Keeps the dialog open with the message under the field. */
+    error?: string;
+};
+/** Props of {@link ModalName}. */
+export interface ModalNameProps {
+    /** Whether the dialog is open; every opening starts from `initialName`. */
+    isOpen: boolean;
+    /** Heading, e.g. "Save the segment". */
+    title: string;
+    /** Hint above the field. */
+    description?: ReactNode;
+    /** Caption of the field. */
+    label: string;
+    /** Example name ending with an ellipsis, e.g. "Active buyers in Germany…". */
+    placeholder?: string;
+    /** Value the field opens with, e.g. the current name when renaming; Save without changes just closes. */
+    initialName?: string;
+    /** Name proposed by the screen, e.g. the push title; the field opens with it selected and Save saves it as is. */
+    suggestedName?: string;
+    /** Banner shown on opening while the field still holds `initialName`. */
+    initialWarning?: string;
+    /** Error shown under the field on opening, e.g. the name typed in the header is too long. */
+    initialError?: string;
+    /** Field length limit. */
+    maxLength?: number;
+    /** Save button caption (defaults to localized "Save"). */
+    submitText?: string;
+    /** Cancel button caption (defaults to localized "Cancel"). */
+    cancelText?: string;
+    /** Called with the trimmed non-empty name; a throw is shown as an error. */
+    onSubmit: (name: string) => ModalNameResult | Promise<ModalNameResult>;
+    /** Called on Cancel or Escape. */
+    onClose: () => void;
+}

package/Modal/components/ModalName/types.js

@@ -0,0 +1 @@
+export {};

package/Modal/index.d.ts

@@ -1,4 +1,5 @@
 export { Modal } from './components/Modal';
 export { ModalTitle } from './components/ModalTitle';
+export { ModalName, type ModalNameProps, type ModalNameResult } from './components/ModalName';
 export { ModalConfirm, ModalConfirmProvider, useModalConfirm, } from './components/ModalConfirm';
 export { ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter, } from './components/ModalContent';

package/Modal/index.js

@@ -1,4 +1,5 @@
 export { Modal } from './components/Modal';
 export { ModalTitle } from './components/ModalTitle';
+export { ModalName } from './components/ModalName';
 export { ModalConfirm, ModalConfirmProvider, useModalConfirm } from './components/ModalConfirm';
 export { ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter } from './components/ModalContent';

package/Modal/polyglot/messages_ar.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': 'تأكيد الإجراء',
   'DUMB.MODAL.CONFIRM': 'تأكيد',
   'DUMB.MODAL.CANCEL': 'إلغاء',
+  'DUMB.MODAL.SAVE': 'حفظ',
   'DUMB.MODAL.CLOSE': 'إغلاق'
 };

package/Modal/polyglot/messages_bn.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': 'ক্রিয়াটি নিশ্চিত করুন',
   'DUMB.MODAL.CONFIRM': 'নিশ্চিত করুন',
   'DUMB.MODAL.CANCEL': 'বাতিল করুন',
+  'DUMB.MODAL.SAVE': 'সংরক্ষণ করুন',
   'DUMB.MODAL.CLOSE': 'বন্ধ করুন'
 };

package/Modal/polyglot/messages_de.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': 'Aktion bestätigen',
   'DUMB.MODAL.CONFIRM': 'Bestätigen',
   'DUMB.MODAL.CANCEL': 'Abbrechen',
+  'DUMB.MODAL.SAVE': 'Speichern',
   'DUMB.MODAL.CLOSE': 'Schließen'
 };

package/Modal/polyglot/messages_en.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': 'Confirm action',
   'DUMB.MODAL.CONFIRM': 'Confirm',
   'DUMB.MODAL.CANCEL': 'Cancel',
+  'DUMB.MODAL.SAVE': 'Save',
   'DUMB.MODAL.CLOSE': 'Close'
 };

package/Modal/polyglot/messages_es.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': 'Confirmar acción',
   'DUMB.MODAL.CONFIRM': 'Confirmar',
   'DUMB.MODAL.CANCEL': 'Cancelar',
+  'DUMB.MODAL.SAVE': 'Guardar',
   'DUMB.MODAL.CLOSE': 'Cerrar'
 };

package/Modal/polyglot/messages_fr.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': 'Confirmer l’action',
   'DUMB.MODAL.CONFIRM': 'Confirmer',
   'DUMB.MODAL.CANCEL': 'Annuler',
+  'DUMB.MODAL.SAVE': 'Enregistrer',
   'DUMB.MODAL.CLOSE': 'Fermer'
 };

package/Modal/polyglot/messages_he.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': 'אישור פעולה',
   'DUMB.MODAL.CONFIRM': 'אישור',
   'DUMB.MODAL.CANCEL': 'ביטול',
+  'DUMB.MODAL.SAVE': 'שמירה',
   'DUMB.MODAL.CLOSE': 'סגירה'
 };

package/Modal/polyglot/messages_hi.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': 'कार्रवाई की पुष्टि करें',
   'DUMB.MODAL.CONFIRM': 'पुष्टि करें',
   'DUMB.MODAL.CANCEL': 'रद्द करें',
+  'DUMB.MODAL.SAVE': 'सहेजें',
   'DUMB.MODAL.CLOSE': 'बंद करें'
 };

package/Modal/polyglot/messages_ja.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': '操作の確認',
   'DUMB.MODAL.CONFIRM': '確認',
   'DUMB.MODAL.CANCEL': 'キャンセル',
+  'DUMB.MODAL.SAVE': '保存',
   'DUMB.MODAL.CLOSE': '閉じる'
 };

package/Modal/polyglot/messages_ko.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': '작업 확인',
   'DUMB.MODAL.CONFIRM': '확인',
   'DUMB.MODAL.CANCEL': '취소',
+  'DUMB.MODAL.SAVE': '저장',
   'DUMB.MODAL.CLOSE': '닫기'
 };

package/Modal/polyglot/messages_pt.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': 'Confirmar ação',
   'DUMB.MODAL.CONFIRM': 'Confirmar',
   'DUMB.MODAL.CANCEL': 'Cancelar',
+  'DUMB.MODAL.SAVE': 'Salvar',
   'DUMB.MODAL.CLOSE': 'Fechar'
 };

package/Modal/polyglot/messages_ru.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': 'Подтвердите действие',
   'DUMB.MODAL.CONFIRM': 'Подтвердить',
   'DUMB.MODAL.CANCEL': 'Отмена',
+  'DUMB.MODAL.SAVE': 'Сохранить',
   'DUMB.MODAL.CLOSE': 'Закрыть'
 };

package/Modal/polyglot/messages_th.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': 'ยืนยันการดำเนินการ',
   'DUMB.MODAL.CONFIRM': 'ยืนยัน',
   'DUMB.MODAL.CANCEL': 'ยกเลิก',
+  'DUMB.MODAL.SAVE': 'บันทึก',
   'DUMB.MODAL.CLOSE': 'ปิด'
 };

package/Modal/polyglot/messages_zh.js

@@ -3,5 +3,6 @@ export const messages = {
   'DUMB.MODAL.CONFIRM_TITLE': '确认操作',
   'DUMB.MODAL.CONFIRM': '确认',
   'DUMB.MODAL.CANCEL': '取消',
+  'DUMB.MODAL.SAVE': '保存',
   'DUMB.MODAL.CLOSE': '关闭'
 };

package/Modal/polyglot/types.d.ts

@@ -4,5 +4,6 @@ export type ModalMessages = {
     'DUMB.MODAL.CONFIRM_TITLE': NoParams;
     'DUMB.MODAL.CONFIRM': NoParams;
     'DUMB.MODAL.CANCEL': NoParams;
+    'DUMB.MODAL.SAVE': NoParams;
     'DUMB.MODAL.CLOSE': NoParams;
 };

package/PageHeader/components/Rename/Rename.d.ts

@@ -1,4 +1,4 @@
 import { type ReactElement } from 'react';
 import type { RenameProps } from './types';
-/** Editable name for `PageHeader` `titleExtra`: click to edit in place, Enter or blur commits, Escape reverts. */
+/** Editable name for `PageHeader` `titleExtra`: click to edit, Enter or blur commits, Escape reverts; pairs with `ModalName`. */
 export declare function Rename(props: RenameProps): ReactElement;

package/PageHeader/components/Rename/Rename.js

@@ -6,7 +6,7 @@ import { PAGE_HEADER_RENAME_ATTRIBUTE } from '../../constants';
 const RENAME_MARK = {
   [PAGE_HEADER_RENAME_ATTRIBUTE]: true
 };
-/** Editable name for `PageHeader` `titleExtra`: click to edit in place, Enter or blur commits, Escape reverts. */
+/** Editable name for `PageHeader` `titleExtra`: click to edit, Enter or blur commits, Escape reverts; pairs with `ModalName`. */
 export function Rename(props) {
   const {
     value,

package/hooks/useLayer.js

@@ -100,9 +100,11 @@ export function useLayer({
 }) {
   const id = useId();
   const onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
   const zIndexRef = useRef(zIndex);
-  zIndexRef.current = zIndex;
+  useLayoutEffect(() => {
+    onCloseRef.current = onClose;
+    zIndexRef.current = zIndex;
+  });
   useLayoutEffect(() => {
     if (!isOpen) {
       return undefined;

package/hooks/useThemeName.js

@@ -11,7 +11,7 @@ function readThemeName(element) {
  * @param ref - element inside the theme scope, so a light island wins over the document theme
  * @param isEnabled - pass `false` when the caller already knows the theme and needs no observer */
 export function useThemeName(ref, isEnabled = true) {
-  const [themeName, setThemeName] = useState(() => readThemeName(ref?.current ?? null));
+  const [themeName, setThemeName] = useState(() => readThemeName(null));
   useLayoutEffect(() => {
     if (!isEnabled) {
       return undefined;

package/index.d.ts

@@ -13,7 +13,7 @@ export { GetStartedPage, type GetStartedPageCheckListView, type GetStartedPagePr
 export { EditableField } from './EditableField';
 export { EmojiPicker } from './EmojiPicker';
 export { InputFile } from './InputFile';
-export { Modal, ModalTitle, ModalConfirm, ModalConfirmProvider, useModalConfirm, ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter, } from './Modal';
+export { Modal, ModalTitle, ModalConfirm, ModalConfirmProvider, useModalConfirm, ModalName, type ModalNameProps, type ModalNameResult, ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter, } from './Modal';
 export { Pagination } from './Pagination';
 export { ProgressBar } from './ProgressBar';
 export { Popover } from './Popover';

package/index.js

@@ -13,7 +13,7 @@ export { GetStartedPage } from './GetStartedPage';
 export { EditableField } from './EditableField';
 export { EmojiPicker } from './EmojiPicker';
 export { InputFile } from './InputFile';
-export { Modal, ModalTitle, ModalConfirm, ModalConfirmProvider, useModalConfirm, ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter } from './Modal';
+export { Modal, ModalTitle, ModalConfirm, ModalConfirmProvider, useModalConfirm, ModalName, ModalHeader, ModalBodyGroup, ModalBodyItem, ModalBody, ModalFooter } from './Modal';
 export { Pagination } from './Pagination';
 export { ProgressBar } from './ProgressBar';
 export { Popover } from './Popover';

package/native/Input.js

@@ -6,4 +6,6 @@ export const NativeInput = styled.input.withConfig({
   componentId: "sc-oqkcxd-0"
 })(["height:", ";padding:0 calc(12px - 1px);border:1px solid ", ";border-radius:", ";font-size:", ";line-height:", ";color:", ";-webkit-text-fill-color:", ";background-color:", ";&:focus{outline:none;border-color:", ";}&:disabled{background-color:", ";-webkit-text-fill-color:", ";}&::placeholder{color:", ";-webkit-text-fill-color:", ";}"], UnitSize.FIELD_HEIGHT, ({
   $isErrored
-}) => $isErrored ? Color.DANGER : Color.FORM, ShapeRadius.CONTROL, FontSize.REGULAR, LineHeight.REGULAR, Color.MAIN, Color.MAIN, Color.CLEAR, Color.BRIGHT, Color.FROZEN, Color.LOCKED, Color.PHANTOM, Color.PHANTOM);
+}) => $isErrored ? Color.DANGER : Color.FORM, ShapeRadius.CONTROL, FontSize.REGULAR, LineHeight.REGULAR, Color.MAIN, Color.MAIN, Color.CLEAR, ({
+  $isErrored
+}) => $isErrored ? Color.DANGER : Color.BRIGHT, Color.FROZEN, Color.LOCKED, Color.PHANTOM, Color.PHANTOM);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "4.6.0",
+  "version": "4.7.1",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -37,7 +37,7 @@
     "@floating-ui/react-dom": "^2.1.2",
     "@lezer/highlight": "^1.2.1",
     "@pushwoosh/kit-constants": "^3.0.0",
-    "@pushwoosh/kit-helpers": "^4.16.0",
+    "@pushwoosh/kit-helpers": "^4.16.1",
     "@pushwoosh/kit-icons": "^2.3.15",
     "@pushwoosh/kit-typography": "^2.0.0",
     "@tippyjs/react": "^4.2.6",

package/shared/dropdownField/useAsyncItems.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { DEFAULT_DEBOUNCE_MS } from './constants';
 import { useDebouncedValue } from './useDebouncedValue';
 /**
@@ -20,7 +20,9 @@ export function useAsyncItems({
   });
   const debouncedQuery = useDebouncedValue(query, debounceMs);
   const loadItemsRef = useRef(loadItems);
-  loadItemsRef.current = loadItems;
+  useLayoutEffect(() => {
+    loadItemsRef.current = loadItems;
+  });
   const sessionRef = useRef(0);
   const pageRef = useRef(0);
   const queryRef = useRef('');

package/shared/dropdownField/useFieldOpenEffects.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useEffectEvent, useRef } from 'react';
 /**
  * Side effects tied to a Combobox field's open state: optional autofocus on mount
  * and firing `onClose` when the field closes.
@@ -11,11 +11,10 @@ export function useFieldOpenEffects({
   disabled,
   inputRef
 }) {
-  const onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
+  const onCloseEvent = useEffectEvent(() => onClose?.());
   const wasOpenRef = useRef(isOpen);
   useEffect(() => {
-    if (wasOpenRef.current && !isOpen) onCloseRef.current?.();
+    if (wasOpenRef.current && !isOpen) onCloseEvent();
     wasOpenRef.current = isOpen;
   }, [isOpen]);
   const didAutoFocusRef = useRef(false);