@redneckz/wildless-cms-uni-blocks 0.14.688 → 0.14.690

package/mobile/src/components/CreditCardForm/{getFirstStepData.tsx → getCardData.tsx}

@@ -1,7 +1,7 @@
 import { type Participant } from '../../api/RetailAPI/updateUserTask';
 import { type FormState } from '../ApplicationLeadForm/getInitialFormState';
 
-export const getFirstStepData = (formData: FormState): Partial<Participant> => {
+export const getCardData = (formData: FormState): Partial<Participant> => {
   const { currency, paymentSystem, cardCategory, codeWord } = formData;
 
   return {

package/mobile/src/components/CreditCardForm/getCreditCardFormTaskData.ts

@@ -1,8 +1,8 @@
 import { type Participant, type UpdateUserTaskBody } from '../../api/RetailAPI/updateUserTask';
 import { locationNavigator } from '../../external/locationNavigator';
 import { type FormState } from '../ApplicationLeadForm/getInitialFormState';
+import { getCardData } from './getCardData';
 import { getFifthStepData } from './getFifthStepData';
-import { getFirstStepData } from './getFirstStepData';
 import { getFourthStepData } from './getFourthStepData';
 import { getSecondStepData } from './getSecondStepData';
 import { getDeliveryData, getOfficeCode, getSixthStepData } from './getSixthStepData';
@@ -46,6 +46,7 @@ export const getCreditCardFormTaskData = ({
           ...getCurrentStepData(step, formData),
         },
       ],
+      ...getCardData(formData),
       ...getDeliveryData(formData),
     },
   };
@@ -54,7 +55,7 @@ export const getCreditCardFormTaskData = ({
 const getCurrentStepData = (step: number, formData: FormState): Partial<Participant> => {
   switch (step) {
     case 0:
-      return getFirstStepData(formData);
+      return {};
     case 1:
       return getSecondStepData(formData);
     case 2:

package/mobile/src/components/CreditForm/calculateInputs.ts

@@ -30,9 +30,6 @@ const checkIsRetiree = (step: number, getValue: GetValue) =>
 const checkBusinessOwner = ({ name }: FieldDef, getValue: GetValue) =>
   name === 'partInBusiness' && getValue('positionOrganization')?.key !== 'BUSINESS_OWNER';
 
-const checkConsentPfrFlg = ({ name }: FieldDef, getValue: GetValue) =>
-  name === 'snils' && isSnilsRequired(getValue);
-
 const checkAddressFillFromESIA = ({ name, filledByEsia }: FieldDef, getValue: GetValue) =>
   name?.startsWith('address') && getValue('esiaAccountTypeCd')?.key && filledByEsia;
 
@@ -47,5 +44,8 @@ export const checkCondition = ({ condition }: FieldDef, getValue: GetValue) =>
     return _ !== ((dataValue as Option)?.key ?? dataValue);
   });
 
+const checkConsentPfrFlg = ({ name }: FieldDef, getValue: GetValue) =>
+  name === 'snils' && isSnilsRequired(getValue);
+
 const isSnilsRequired = (getValue: GetValue) =>
   getValue('confirmationIncome')?.key !== 'PFR_CERTIFICATE';

package/mobile/src/components/CreditForm/creditFormStepsData.tsx

@@ -116,7 +116,7 @@ export const stepsSectionsMap: SectionsProps[][] = [
     },
     {
       inputs: [
-        { fieldType: 'common', name: 'employment' },
+        { fieldType: 'common', name: 'employment', required: true },
         { fieldType: 'common', name: 'organizationName', required: true, dadata: true },
       ],
     },
@@ -129,15 +129,15 @@ export const stepsSectionsMap: SectionsProps[][] = [
     },
     {
       inputs: [
-        { fieldType: 'common', name: 'organization', required: false },
-        { fieldType: 'common', name: 'amountWorkers', required: false },
+        { fieldType: 'common', name: 'organization', required: true },
+        { fieldType: 'common', name: 'amountWorkers', required: true },
       ],
     },
     {
       columns: 2,
       inputs: [
-        { fieldType: 'common', name: 'employerActivities', required: false },
-        { fieldType: 'common', name: 'employerOrganization', required: false },
+        { fieldType: 'common', name: 'employerActivities', required: true },
+        { fieldType: 'common', name: 'employerOrganization', required: true },
         { fieldType: 'common', name: 'generalSeniority', required: true },
         { fieldType: 'common', name: 'lastJobExperience', required: true },
         { fieldType: 'common', name: 'experience5Years', required: true },
@@ -158,7 +158,7 @@ export const stepsSectionsMap: SectionsProps[][] = [
     {
       columns: 2,
       inputs: [
-        { fieldType: 'common', name: 'positionOrganization', required: false },
+        { fieldType: 'common', name: 'positionOrganization', required: true },
         {
           fieldType: 'common',
           name: 'partInBusiness',

package/mobile/src/components/Header/HeaderSecondaryMenu.tsx

@@ -7,8 +7,9 @@ import { getAspectsWithInclude } from '../../hooks/useAspects/aspects/getAspects
 import { useLocation } from '../../hooks/useLocation';
 import { type BlockVersion } from '../../model/BlockVersion';
 import { type IconVersion } from '../../model/IconVersion';
-import { useLocationDialog } from '../../ui-kit/LocationDialog/useLocationDialog';
-import { useSearchDialog } from '../../ui-kit/SearchDialog/useSearchDialog';
+import { useDialog } from '../../ui-kit/DialogManager/useDialog';
+import { LocationDialog } from '../../ui-kit/LocationDialog/LocationDialog';
+import { SearchDialog } from '../../ui-kit/SearchDialog/SearchDialog';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import { style } from '../../utils/style';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
@@ -24,11 +25,11 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
 
     const currentLocation = useLocation(rest?.branches?.default);
 
-    const searchDialog = useSearchDialog(rest);
-    const locationDialog = useLocationDialog(rest);
+    const searchDialog = useDialog(SearchDialog, rest);
+    const locationDialog = useDialog(LocationDialog, rest);
 
-    const openSearchDialog = useCallback(() => searchDialog.open(), [searchDialog]);
-    const openLocationDialog = useCallback(() => locationDialog.open(), [locationDialog]);
+    const openSearchDialog = useCallback(() => searchDialog.open({}), [searchDialog]);
+    const openLocationDialog = useCallback(() => locationDialog.open({}), [locationDialog]);
 
     return (
       <div

package/mobile/src/components/LinkDocs/LinkDocs.tsx

@@ -14,7 +14,7 @@ import {
   type LinkDocsContent,
 } from './LinkDocsContent';
 import { renderDefaultItem } from './renderDefaultItem';
-import { ReportDialogButton } from './RepordDialogButton';
+import { ReportDialogButton } from './ReportDialogButton';
 
 const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {
   double: 'sm:flex-wrap sm:flex-row',

package/mobile/src/components/LinkDocs/{RepordDialogButton.tsx → ReportDialogButton.tsx}

@@ -1,18 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
-import { type ReportDialogProps } from '../../ui-kit/ReportDialog/ReportDialog';
-import { useReportDialog } from '../../ui-kit/ReportDialog/useReportDialog';
+import { useDialog } from '../../ui-kit/DialogManager/useDialog';
+import { ReportDialog, type ReportDialogProps } from '../../ui-kit/ReportDialog/ReportDialog';
 import { Text } from '../../ui-kit/Text/Text';
 import { renderImg } from './renderDefaultItem';
 
 export const ReportDialogButton = JSX<ReportDialogProps>(({ text, href, target, __html, icon }) => {
-  if (!text && !__html) {
-    return null;
-  }
-  const reportDialog = useReportDialog({ __html, href, target });
-  const openReportDialog = useCallback(() => reportDialog.open(), [reportDialog]);
+  const { open } = useDialog(ReportDialog);
+  const openReportDialog = useCallback(
+    () => open({ __html, href, target }),
+    [__html, href, target],
+  );
 
-  return (
+  return text ? (
     <button
       className="flex gap-s text-primary-text no-underline hover:text-primary-main"
       onClick={openReportDialog}
@@ -20,5 +20,5 @@ export const ReportDialogButton = JSX<ReportDialogProps>(({ text, href, target,
       {renderImg(icon)}
       <Text font="font-light">{text}</Text>
     </button>
-  );
+  ) : null;
 });

package/mobile/src/components/StickyBottomMenu/BurgerMenuDialog.tsx

@@ -5,23 +5,22 @@ import { type JSONRefObject } from '../../data/JSONRefObject';
 import { type StickyMenuItem } from '../../data/StickyMobileData';
 import { env } from '../../Env';
 import { useLocation } from '../../hooks/useLocation';
+import { useDialog } from '../../ui-kit/DialogManager/useDialog';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { useLocationDialog } from '../../ui-kit/LocationDialog/useLocationDialog';
+import { LocationDialog } from '../../ui-kit/LocationDialog/LocationDialog';
 import { getBasePath } from '../../utils/getBasePath';
 import { StickyBottomMenuDialog } from './StickyBottomMenuDialog';
 
 export interface BurgerMenuDialogProps {
-  menuRef: {
-    current?: HTMLDivElement | null;
-  };
+  menuRef: { current?: HTMLDivElement | null };
   menuItem?: StickyMenuItem;
   locationDialogProps?: HeaderData & JSONRefObject;
-  closeAll: () => void;
+  onClose?: () => void;
 }
 
 export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>(
-  ({ menuRef, menuItem, locationDialogProps, closeAll }) => {
-    const locationDialog = useLocationDialog(locationDialogProps || {});
+  ({ menuRef, menuItem, locationDialogProps, onClose }) => {
+    const locationDialog = useDialog(LocationDialog, locationDialogProps);
     const { name: location } = useLocation();
     const menuDimensions = menuRef?.current?.getBoundingClientRect();
     const basePath = getBasePath(env.SITE_URL);
@@ -42,10 +41,10 @@ export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>(
     useEffect(() => {
       const onMessage = (e: MessageEvent<any>) => {
         if (e.data.type === 'location') {
-          locationDialog.open();
+          locationDialog.open({});
         }
         if (e.data.type === 'reload') {
-          closeAll();
+          onClose?.();
         }
         if (e.data.type === 'resize') {
           const ifDoc: HTMLIFrameElement = document.getElementsByTagName('iframe')['iframe-dialog'];
@@ -59,16 +58,17 @@ export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>(
       return () => {
         globalThis.removeEventListener('message', onMessage);
       };
-    }, []);
+    }, [onClose]);
 
     return (
       <StickyBottomMenuDialog
-        onClick={(e) => e.stopPropagation()}
         head={
           <div className="flex items-center justify-center px-xl">
             <Heading as="h4" title={menuItem?.title} className="font-medium" />
           </div>
         }
+        onClick={(e) => e.stopPropagation()}
+        onClose={onClose}
       >
         <div className="bg-white pb-20 pt-1 text-l">
           <iframe

package/mobile/src/components/StickyBottomMenu/StickyBottomMenu.tsx

@@ -28,41 +28,39 @@ export const StickyBottomMenu = UniBlock<StickyBottomMenuProps>(({ sticky, ...re
   const [activeIndex, setActiveIndex] = useState(-1);
   const [currentItemPosition, setCurrentItemPosition] = useState<string>('');
 
-  const { open: openDialog, closeAll } = useDialogManager();
+  const { closeAll } = useDialogManager();
 
-  const closeDialog = useCallback(() => {
+  const handleClose = useCallback(() => {
     setActiveIndex(-1);
     setCurrentItemPosition('');
     closeAll();
   }, [closeAll]);
 
-  const dialogRef = useOutsideClick<HTMLDivElement>(closeDialog);
+  const dialogRef = useOutsideClick<HTMLDivElement>(handleClose);
   const menuRef = useRef<HTMLDivElement | null>(null);
 
   const [isBurgerMenuDialogOpen, { toggle }] = useBurgerMenuDialog({
     menuRef,
     centralMenuItem,
-    closeAll,
-    openDialog,
     locationDialogProps: rest.header,
+    onClose: handleClose,
   });
 
-  const [{ openBottomMenuItemDialog }] = useBottomMenuItemDialog({
+  const openBottomMenuItemDialog = useBottomMenuItemDialog({
     menuRef,
     dialogRef,
-    closeDialog,
-    openDialog,
     leftItems,
     rightItems,
+    onClose: handleClose,
   });
 
   const handleMenuBurgerClick = useCallback(
     (e: PreventableEvent) => {
-      closeDialog();
       e.stopPropagation();
+      handleClose();
       toggle();
     },
-    [closeDialog, toggle],
+    [handleClose, toggle],
   );
 
   const handleMenuItemClick = useCallback(

package/mobile/src/components/StickyBottomMenu/StickyBottomMenuDialog.tsx

@@ -1,8 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { type VNode } from '../../model/VNode';
 import { CloseButton } from '../../ui-kit/DialogManager/CloseButton';
-import { useDialogManager } from '../../ui-kit/DialogManager/useDialogManager';
 import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { style } from '../../utils/style';
 
@@ -14,26 +12,17 @@ export interface StickyBottomMenuDialogProps {
 }
 
 export const StickyBottomMenuDialog = JSX<StickyBottomMenuDialogProps>(
-  ({ className, head, children, onClose, onClick }) => {
-    const { close } = useDialogManager();
-
-    const handleClose = useCallback(() => {
-      close();
-      onClose && onClose();
-    }, [onClose]);
-
-    return (
-      <div
-        onClick={onClick}
-        className={style('relative min-h-full bg-white p-0 rounded-xl top-32', className)}
-        role="dialog"
-      >
-        <div className="sticky py-xl top-0 rounded-xl bg-white z-10">
-          <CloseButton className="absolute top-1.5 right-0" onClose={handleClose} />
-          <div className="container">{head}</div>
-        </div>
-        <div className="container pb-6xl">{children}</div>
+  ({ className, head, children, onClose, onClick }) => (
+    <div
+      onClick={onClick}
+      className={style('relative min-h-full bg-white p-0 rounded-xl top-32', className)}
+      role="dialog"
+    >
+      <div className="sticky py-xl top-0 rounded-xl bg-white z-10">
+        <CloseButton className="absolute top-1.5 right-0" onClose={onClose} />
+        <div className="container">{head}</div>
       </div>
-    );
-  },
+      <div className="container pb-6xl">{children}</div>
+    </div>
+  ),
 );

package/mobile/src/components/StickyBottomMenu/useBottomMenuItemDialog.tsx

@@ -1,65 +1,67 @@
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { type StickyMenuItem } from '../../data/StickyMobileData';
-import { type VNode } from '../../model/VNode';
-import { type DialogOptions } from '../../ui-kit/DialogManager/useDialogManager';
+import { useDialogManager } from '../../ui-kit/DialogManager/useDialogManager';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { StickyBottomMenuDialog } from './StickyBottomMenuDialog';
 
 interface BottomMenuItemDialog {
-  menuRef?: {
-    current: HTMLDivElement | null;
-  };
-  dialogRef?: {
-    current: HTMLDivElement | null;
-  };
-  closeDialog: () => void;
-  openDialog: (dialog: VNode, options: DialogOptions) => void;
+  menuRef?: { current: HTMLDivElement | null };
+  dialogRef?: { current: HTMLDivElement | null };
   leftItems: StickyMenuItem[];
   rightItems: StickyMenuItem[];
+  onClose?: () => void;
 }
 
 export const useBottomMenuItemDialog = ({
   menuRef,
   dialogRef,
-  closeDialog,
-  openDialog,
   leftItems,
   rightItems,
+  onClose,
 }: BottomMenuItemDialog) => {
-  const openBottomMenuItemDialog = (index: number, itemsPosition: string) => {
-    const requiredArray = itemsPosition === 'left' ? leftItems : rightItems;
-    const menuDimensions = menuRef?.current?.getBoundingClientRect();
+  const { open, close } = useDialogManager();
 
-    const handleIframeLoad = () => {
-      const ifDoc: HTMLIFrameElement = document.getElementsByTagName('iframe')['iframe-dialog'];
-      ifDoc.style.height = String(ifDoc?.contentWindow?.document.body.offsetHeight) + 'px';
-    };
+  const handleIframeLoad = useCallback(() => {
+    const ifDoc: HTMLIFrameElement = document.getElementsByTagName('iframe')['iframe-dialog'];
+    ifDoc.style.height = `${ifDoc?.contentWindow?.document.body.offsetHeight}px`;
+  }, []);
 
-    openDialog(
-      <StickyBottomMenuDialog
-        onClick={(e) => e.stopPropagation()}
-        onClose={closeDialog}
-        className="mt-[20%] border-t border-current"
-        head={
-          <div className="flex items-center justify-center px-xl">
-            <Heading
-              as="h4"
-              title={requiredArray[index].description || requiredArray[index].title}
-            />
-          </div>
-        }
-      >
-        <div className="bg-white pb-20 pt-1 text-l" ref={dialogRef}>
-          <iframe
-            id="iframe-dialog"
-            onLoad={() => handleIframeLoad()}
-            src={requiredArray[index]?.src}
-            width={menuDimensions?.width || 0}
-          />
-        </div>
-      </StickyBottomMenuDialog>,
-      { id: itemsPosition === 'left' ? leftItems[index].title : rightItems[index].title },
-    );
-  };
+  return useCallback(
+    (index: number, itemsPosition: string) => {
+      const requiredArray = itemsPosition === 'left' ? leftItems : rightItems;
+      const menuDimensions = menuRef?.current?.getBoundingClientRect();
 
-  return [{ openBottomMenuItemDialog }];
+      open({
+        id: itemsPosition === 'left' ? leftItems[index].title : rightItems[index].title,
+        dialog: (
+          <StickyBottomMenuDialog
+            className="mt-[20%] border-t border-current"
+            head={
+              <div className="flex items-center justify-center px-xl">
+                <Heading
+                  as="h4"
+                  title={requiredArray[index].description || requiredArray[index].title}
+                />
+              </div>
+            }
+            onClick={(e) => e.stopPropagation()}
+            onClose={() => {
+              close();
+              onClose?.();
+            }}
+          >
+            <div className="bg-white pb-20 pt-1 text-l" ref={dialogRef}>
+              <iframe
+                id="iframe-dialog"
+                src={requiredArray[index]?.src}
+                width={menuDimensions?.width ?? 0}
+                onLoad={handleIframeLoad}
+              />
+            </div>
+          </StickyBottomMenuDialog>
+        ),
+      });
+    },
+    [handleIframeLoad, leftItems, rightItems, onClose],
+  );
 };

package/mobile/src/components/StickyBottomMenu/useBurgerMenuDialog.tsx

@@ -1,58 +1,40 @@
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { type HeaderData } from '../../data/HeaderData';
 import { type JSONRefObject } from '../../data/JSONRefObject';
 import { type StickyMenuItem } from '../../data/StickyMobileData';
-import { type VNode } from '../../model/VNode';
 import { isDialogOpen } from '../../ui-kit/DialogManager/isDialogOpen';
-import { type DialogOptions } from '../../ui-kit/DialogManager/useDialogManager';
+import { useDialog } from '../../ui-kit/DialogManager/useDialog';
 import { useDialogsList } from '../../ui-kit/DialogManager/useDialogsList';
+import { noop } from '../../utils/noop';
 import { BurgerMenuDialog } from './BurgerMenuDialog';
 
 export const BURGER_MENU_DIALOG_ID = 'burgerMenuDialog';
 
 interface BurgerMenuDialog {
-  menuRef: {
-    current?: HTMLDivElement | null;
-  };
+  menuRef: { current?: HTMLDivElement | null };
   centralMenuItem?: StickyMenuItem;
-  closeAll: () => void;
-  openDialog: (dialog: VNode, options: DialogOptions) => void;
   locationDialogProps?: HeaderData & JSONRefObject;
+  onClose?: () => void;
 }
 
 export const useBurgerMenuDialog = ({
   menuRef,
   centralMenuItem,
-  closeAll,
-  openDialog,
   locationDialogProps,
-}: BurgerMenuDialog): [
-  boolean,
-  {
-    toggle: () => void;
-  },
-] => {
-  const dialogs = useDialogsList();
+  onClose = noop,
+}: BurgerMenuDialog): [boolean, { toggle: () => void }] => {
+  const { open } = useDialog(BurgerMenuDialog);
+  const [dialogs] = useDialogsList(); // TODO Рефакторинг
   const isBurgerMenuOpen = isDialogOpen(BURGER_MENU_DIALOG_ID, dialogs);
 
-  const open = () =>
-    openDialog(
-      <BurgerMenuDialog
-        locationDialogProps={locationDialogProps}
-        menuRef={menuRef}
-        menuItem={centralMenuItem}
-        closeAll={closeAll}
-      />,
-      {
-        id: BURGER_MENU_DIALOG_ID,
-      },
-    );
-  const toggle = () => {
-    if (isBurgerMenuOpen) {
-      closeAll();
-    } else {
-      open();
-    }
-  };
+  const openDialog = useCallback(
+    () =>
+      open(
+        { menuRef, locationDialogProps, menuItem: centralMenuItem, onClose },
+        { id: BURGER_MENU_DIALOG_ID },
+      ),
+    [menuRef, locationDialogProps, centralMenuItem, onClose],
+  );
 
-  return [isBurgerMenuOpen, { toggle }];
+  return [isBurgerMenuOpen, { toggle: isBurgerMenuOpen ? onClose : openDialog }];
 };

package/mobile/src/hooks/useLocalStorage.ts

@@ -1,16 +1,23 @@
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 
-export function useLocalStorage<T>(key: string): [T | null, (value: T) => void] {
+export function useLocalStorage<T>(
+  key: string,
+): [T | null, (value: T | null | ((oldValue: T | null) => T | null)) => void] {
+  const initialValue = globalThis.localStorage?.getItem(key);
   const [storedValue, setStoredValue] = useState<T | null>(
-    JSON.parse(globalThis.localStorage?.getItem(key) || 'null') as T | null,
+    initialValue ? (JSON.parse(initialValue) as T | null) : null,
   );
 
   const setValue = useCallback(
-    (value: T) => {
-      globalThis.localStorage?.setItem(key, JSON.stringify(value));
-      setStoredValue(value);
+    (value: T | null | ((oldValue: T | null) => T | null)) => {
+      setStoredValue((oldValue) => {
+        const newValue = value instanceof Function ? value(oldValue) : value;
+        globalThis.localStorage?.setItem(key, JSON.stringify(newValue));
+
+        return newValue;
+      });
     },
-    [key, globalThis.localStorage],
+    [key],
   );
 
   return [storedValue, setValue];

package/mobile/src/hooks/useMobileMode.ts

@@ -1,21 +1,21 @@
 import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { INITIAL_MOBILE_MODE } from './initialMobileMode';
 
-export const useMobileMode = () => {
-  const mq = `(max-width: 1024px)`;
+const MOBILE_WIDTH = 1024;
+const MOBILE_QUERY = `(max-width: ${MOBILE_WIDTH}px)`;
 
-  const [isMobileMode, setIsMobileMode] = useState(INITIAL_MOBILE_MODE);
+export const useMobileMode = () => {
+  const [isMobileMode, setMobileMode] = useState(INITIAL_MOBILE_MODE);
 
   useEffect(() => {
-    const mqList = globalThis.matchMedia?.(mq);
+    const mqList = globalThis.matchMedia?.(MOBILE_QUERY);
     const mqHandler = () => {
-      setIsMobileMode(Boolean(mqList?.matches));
+      setMobileMode(Boolean(mqList?.matches));
     };
 
     mqList?.addEventListener('change', mqHandler);
-
     if (mqList?.matches) {
-      setIsMobileMode(Boolean(mqList.matches));
+      setMobileMode(true);
     }
 
     return () => {

package/mobile/src/hooks/useOnEscape.ts

@@ -0,0 +1,14 @@
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useEventListener } from '@redneckz/uni-jsx/lib/hooks/useEventListener';
+
+export function useOnEscape(handler: () => any) {
+  const escapeHandler = useCallback(
+    ({ key }: { key: string }) => {
+      if (key === 'Escape') {
+        handler();
+      }
+    },
+    [handler],
+  );
+  useEventListener(globalThis.document, 'keydown', escapeHandler);
+}