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

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);
+}

package/mobile/src/ui-kit/CaptchaDialog/CaptchaDialog.tsx

@@ -11,66 +11,63 @@ import { Logo } from '../Logo/Logo';
 export interface CaptchaDialogProps {
   phoneNumber: string;
   sendCode?: () => void;
-  close?: () => void;
   onClose?: () => void;
 }
 
-export const CaptchaDialog = JSX<CaptchaDialogProps>(
-  ({ phoneNumber, close, sendCode, onClose }) => {
-    const [captcha, setCaptcha] = useState('');
-    const [code, setCode] = useState('');
-    const [hasError, setHasError] = useState(false);
+export const CaptchaDialog = JSX<CaptchaDialogProps>(({ phoneNumber, sendCode, onClose }) => {
+  const [captcha, setCaptcha] = useState('');
+  const [code, setCode] = useState('');
+  const [hasError, setHasError] = useState(false);
 
-    const handleCheckCaptcha = useCallback(async () => {
-      const isValidCode = await checkCaptcha({ captchaText: code });
+  const handleCheckCaptcha = useCallback(async () => {
+    const isValidCode = await checkCaptcha({ captchaText: code });
 
-      if (isValidCode) {
-        sendCode?.();
-        close?.();
-      } else {
-        setHasError(isValidCode);
-      }
-    }, [code]);
+    if (isValidCode) {
+      sendCode?.();
+      onClose?.();
+    } else {
+      setHasError(isValidCode);
+    }
+  }, [code, sendCode]);
 
-    const handleCreateCaptcha = useCallback(() => {
-      (async () => setCaptcha(URL.createObjectURL(await createCaptcha(phoneNumber))))();
-    }, []);
+  const handleCreateCaptcha = useCallback(() => {
+    (async () => setCaptcha(URL.createObjectURL(await createCaptcha(phoneNumber))))();
+  }, []);
 
-    useEffect(handleCreateCaptcha, []);
+  useEffect(handleCreateCaptcha, []);
 
-    return (
-      <Dialog
-        head={<Logo />}
-        onClose={onClose}
-        className="my-6xl max-w-lg w-full min-h-fit mx-auto rounded-lg"
-      >
-        <div className="flex flex-col gap-lg items-center rounded-md">
-          <div className="flex h-36 w-72">
-            <img className="grow" src={captcha}></img>
-            <div
-              onClick={handleCreateCaptcha}
-              className="flex w-8 items-center justify-center cursor-pointer"
-            >
-              <Icon iconVersion="normal" name="RefreshIcon" />
-            </div>
-          </div>
-          <Input
-            className="w-[300px]"
-            onChange={setCode}
-            value={code}
-            placeholder="Введите код с картинки"
-          />
-          {hasError ? <div className="text-error">Неверный код</div> : null}
-          <div className="flex w-[310px] justify-between">
-            <Button onClick={close} version="secondary">
-              Вернуться
-            </Button>
-            <Button type="submit" disabled={!code} onClick={handleCheckCaptcha} version="secondary">
-              Отправить
-            </Button>
+  return (
+    <Dialog
+      className="my-6xl max-w-lg w-full min-h-fit mx-auto rounded-lg"
+      head={<Logo />}
+      onClose={onClose}
+    >
+      <div className="flex flex-col gap-lg items-center rounded-md">
+        <div className="flex h-36 w-72">
+          <img className="grow" src={captcha}></img>
+          <div
+            onClick={handleCreateCaptcha}
+            className="flex w-8 items-center justify-center cursor-pointer"
+          >
+            <Icon iconVersion="normal" name="RefreshIcon" />
           </div>
         </div>
-      </Dialog>
-    );
-  },
-);
+        <Input
+          className="w-[300px]"
+          onChange={setCode}
+          value={code}
+          placeholder="Введите код с картинки"
+        />
+        {hasError ? <div className="text-error">Неверный код</div> : null}
+        <div className="flex w-[310px] justify-between">
+          <Button onClick={close} version="secondary">
+            Вернуться
+          </Button>
+          <Button type="submit" disabled={!code} onClick={handleCheckCaptcha} version="secondary">
+            Отправить
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  );
+});

package/mobile/src/ui-kit/Checkbox/CheckboxWithDoc.tsx

@@ -1,7 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useMobileMode } from '../../hooks/useMobileMode';
-import { openDocument } from '../DialogManager/openDocument';
-import { useDialogManager } from '../DialogManager/useDialogManager';
+import { useDocumentDialog } from '../DocumentDialog/uaeDocumentDialog';
 import { renderErrorText } from '../Input/renderErrorText';
 import { LinkButton } from '../LinkButton/LinkButton';
 import { Text } from '../Text/Text';
@@ -16,18 +14,14 @@ interface CheckboxWithDocProps extends CheckboxProps {
 
 export const CheckboxWithDoc = JSX<CheckboxWithDocProps>(
   ({ className, error, docId, ...props }) => {
-    const { open, close } = useDialogManager();
-    const isMobile = useMobileMode();
+    const openDocument = useDocumentDialog(docId);
 
     return (
       <div className={className}>
         <div className="flex flex-wrap gap-x-m">
           <Checkbox {...props} />
           {docId ? (
-            <LinkButton
-              className="text-primary-main"
-              onClick={() => openDocument({ open, close, id: docId, convertToPng: isMobile })}
-            >
+            <LinkButton className="text-primary-main" onClick={openDocument}>
               <Text>{OPEN_DOC_BUTTON_TEXT}</Text>
             </LinkButton>
           ) : null}

package/mobile/src/ui-kit/ConsentBkiDialog/ConsentBkiDialog.tsx

@@ -1,17 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useMobileMode } from '../../hooks/useMobileMode';
 import { noop } from '../../utils/noop';
 import { Button } from '../Button/Button';
 import { Dialog } from '../DialogManager/Dialog';
-import { openDocument } from '../DialogManager/openDocument';
-import { useDialogManager } from '../DialogManager/useDialogManager';
+import { useDocumentDialog } from '../DocumentDialog/uaeDocumentDialog';
 import { Heading } from '../Heading/Heading';
 import { Paragraph } from '../Paragraph/Paragraph';
 import { RadioButtonGroup } from '../RadioButtonGroup/RadioButtonGroup';
 
 export interface ConsentBkiDialogProps {
-  handleSubmit?: (confirmStatus: string) => void;
+  onSubmit?: (confirmStatus: string) => void;
   onClose?: () => void;
 }
 
@@ -25,62 +23,59 @@ const refuseConsentText = {
   description: 'Согласие на запрос в Бюро кредитных историй (БКИ) повысит вероятность одобрения',
 };
 
-export const ConsentBkiDialog = JSX<ConsentBkiDialogProps>(function ({
-  handleSubmit = noop,
-  onClose = noop,
-}) {
-  const [confirmStatus, setConfirmStatus] = useState('');
-  const [showRefuceContent, setShowRefuceContent] = useState(false);
-  const { open, close } = useDialogManager();
-  const isMobile = useMobileMode();
-  const handleClose = useCallback(() => {
-    close();
-    handleSubmit(confirmStatus);
-  }, [confirmStatus]);
-
-  const handleConfirmChange = useCallback((value: string) => {
-    setConfirmStatus(value);
-    if (value === 'REFUSE') {
-      setShowRefuceContent(true);
-    }
-  }, []);
-  const consentText = showRefuceContent ? refuseConsentText : defaultConsentText;
-
-  return (
-    <Dialog
-      className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg py-0 px-5xl"
-      onClose={onClose}
-    >
-      <div className="flex flex-col gap-xl items-center">
-        <div
-          role="button"
-          onClick={() => openDocument({ open, close, id: CONSENT_BKI_ID, convertToPng: isMobile })}
-        >
-          <Heading
-            className="text-center text-balance"
-            headingType="h2"
-            title={consentText.title}
-          />
-        </div>
-        <Paragraph align="text-center">{consentText.description}</Paragraph>
-        <RadioButtonGroup
-          className="whitespace-normal"
-          orientation="horizontal"
-          items={ITEMS}
-          value={confirmStatus}
-          onChange={handleConfirmChange}
-        />
-        <Button disabled={!confirmStatus} type="button" onClick={handleClose}>
-          Продолжить
-        </Button>
-      </div>
-    </Dialog>
-  );
-});
-
 const ITEMS = [
   { id: 'SIGNED', text: 'Подписать' },
   { id: 'REFUSE', text: 'Отказаться' },
 ];
 
 const CONSENT_BKI_ID = 2;
+
+export const ConsentBkiDialog = JSX<ConsentBkiDialogProps>(
+  ({ onSubmit = noop, onClose = noop }) => {
+    const [confirmStatus, setConfirmStatus] = useState('');
+    const [showRefuseContent, setShowRefuseContent] = useState(false);
+
+    const openDocument = useDocumentDialog(CONSENT_BKI_ID);
+
+    const handleSubmit = useCallback(() => {
+      onSubmit(confirmStatus);
+      onClose();
+    }, [onSubmit, confirmStatus]);
+
+    const handleConfirmChange = useCallback((value: string) => {
+      setConfirmStatus(value);
+      if (value === 'REFUSE') {
+        setShowRefuseContent(true);
+      }
+    }, []);
+    const consentText = showRefuseContent ? refuseConsentText : defaultConsentText;
+
+    return (
+      <Dialog
+        className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg py-0 px-5xl"
+        onClose={onClose}
+      >
+        <div className="flex flex-col gap-xl items-center">
+          <div role="button" onClick={openDocument}>
+            <Heading
+              className="text-center text-balance"
+              headingType="h2"
+              title={consentText.title}
+            />
+          </div>
+          <Paragraph align="text-center">{consentText.description}</Paragraph>
+          <RadioButtonGroup
+            className="whitespace-normal"
+            orientation="horizontal"
+            items={ITEMS}
+            value={confirmStatus}
+            onChange={handleConfirmChange}
+          />
+          <Button disabled={!confirmStatus} type="button" onClick={handleSubmit}>
+            Продолжить
+          </Button>
+        </div>
+      </Dialog>
+    );
+  },
+);

package/mobile/src/ui-kit/ConsentBkiDialog/useConsentBkiDialog.tsx

@@ -1,12 +1,12 @@
 import { updateUserProfile } from '../../api/RetailAPI/updateUserProfile';
 import { formatPhone } from '../../utils/formatPhone';
-import { useDialogManager } from '../DialogManager/useDialogManager';
-import { useVerifyPhoneDialog } from '../VerifyPhoneDialog/useVerifyPhoneDialog';
+import { useDialog } from '../DialogManager/useDialog';
+import { VerifyPhoneDialog } from '../VerifyPhoneDialog/VerifyPhoneDialog';
 import { ConsentBkiDialog } from './ConsentBkiDialog';
 
 export const useConsentBkiDialog = (onClose: () => void) => {
-  const { open, close } = useDialogManager();
-  const verifyPhoneDialog = useVerifyPhoneDialog();
+  const { open } = useDialog(ConsentBkiDialog);
+  const verifyPhoneDialog = useDialog(VerifyPhoneDialog);
 
   const handleSuccessVerify = (profileId?: number) => async (smsCode?: string) => {
     try {
@@ -28,10 +28,11 @@ export const useConsentBkiDialog = (onClose: () => void) => {
 
   const handleSubmitBkiConstent =
     (phone?: string, profileId?: number) => async (confirmStatus: string) => {
-      close();
-
       if (confirmStatus === 'SIGNED' && phone) {
-        verifyPhoneDialog.open(handleSuccessVerify(profileId), verifyPhoneContent(phone));
+        verifyPhoneDialog.open({
+          ...verifyPhoneContent(phone),
+          onClose: handleSuccessVerify(profileId),
+        });
       } else {
         onClose();
       }
@@ -39,12 +40,7 @@ export const useConsentBkiDialog = (onClose: () => void) => {
 
   return {
     open: (phone?: string, profileId?: number) =>
-      open(
-        <ConsentBkiDialog
-          handleSubmit={handleSubmitBkiConstent(phone, profileId)}
-          onClose={onClose}
-        />,
-      ),
+      open({ onSubmit: handleSubmitBkiConstent(phone, profileId), onClose }),
   };
 };
 

package/mobile/src/ui-kit/DialogManager/Dialog.tsx

@@ -1,10 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { type VNode } from '../../model/VNode';
 import { style } from '../../utils/style';
 import { type PreventableEvent } from '../PreventableEvent';
 import { CloseButton } from './CloseButton';
-import { useDialogManager } from './useDialogManager';
 
 export interface DialogProps {
   className?: string;
@@ -13,25 +11,16 @@ export interface DialogProps {
   onClick?: (e: PreventableEvent) => void;
 }
 
-export const Dialog = JSX<DialogProps>(({ 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 pt-0 p-lg', className)}
-      role="dialog"
-    >
-      <div className="sticky py-xl top-0 bg-white z-10">
-        <CloseButton className="absolute top-0 right-0" onClose={handleClose} />
-        <div className="container">{head}</div>
-      </div>
-      <div className="container pb-6xl">{children}</div>
+export const Dialog = JSX<DialogProps>(({ className, head, children, onClose, onClick }) => (
+  <div
+    className={style('relative min-h-full bg-white pt-0 p-lg', className)}
+    role="dialog"
+    onClick={onClick}
+  >
+    <div className="sticky py-xl top-0 bg-white z-10">
+      <CloseButton className="absolute top-0 right-0" onClose={onClose} />
+      <div className="container">{head}</div>
     </div>
-  );
-});
+    <div className="container pb-6xl">{children}</div>
+  </div>
+));

package/mobile/src/ui-kit/DialogManager/DialogAction.ts

@@ -1,15 +1,13 @@
-import { type VNode } from '../../model/VNode';
+import type { ActionsMap } from '@redneckz/uni-jsx/lib/EventBus/Action';
+import type { VNode } from '../../model/VNode';
 
-export type DialogAction = DialogOpenAction | DialogCloseAction;
-
-export interface DialogOpenAction {
-  type: 'open';
+export interface DialogOptions {
   id?: string; // Singleton
   dialog: VNode;
-  onClose?: () => void;
 }
 
-export interface DialogCloseAction {
-  type: 'close';
-  all?: boolean;
-}
+export type DialogAction = ActionsMap<{
+  open(options: DialogOptions): void;
+  close(): void;
+  closeAll(): void;
+}>;