@snack-uikit/utils 3.9.1-preview-09106514.0 → 3.10.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 3.10.0 (2025-07-15)
+
+
+### Features
+
+* **PDS-2594:** add CloseWatcher using in modals and drawers ([7699e55](https://github.com/cloud-ru-tech/snack-uikit/commit/7699e55dc172f6082369b6fb83815c12d28b3f7a))
+
+
+
+
+
 # 3.9.0 (2025-07-07)
 
 

package/README.md

@@ -78,6 +78,11 @@
 | options | `FilterStateOptions<TFilter>` | - |  |
 | parser | `(jsonFilter: string) => TFilter` | - |  |
 | serializer | `(filter: TFilter) => string` | - |  |
+## useModalOpenState
+Хук для управления состоянием модалки
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
 ## ThemeProvider
 Провайдер, предназначенный для работы с темами
 ### Props

package/dist/cjs/hooks/useModalOpenState.d.ts

@@ -1,6 +1,7 @@
 type UseModalOpenStateOptions = {
     closeOnPopstate?: boolean;
     closeByCloseWatcher?: boolean;
+    onCloseRequest?: () => boolean;
 };
 /**
  * Хук для управления состоянием модалки
@@ -8,8 +9,9 @@ type UseModalOpenStateOptions = {
  * @param onClose колбек закрытия
  * @param options.closeOnPopstate закрывать модалку при переходе по истории браузера (по умолчанию false)
  * @param options.closeByCloseWatcher закрывать модалку через CloseWatcher (по умолчанию true)
+ * @param options.onCloseRequest колбек запроса закрытия модалки (если возвращает true, то модалка закроется, если false, то не закроется)
  * @returns [open, onClose]
  * @see https://developer.mozilla.org/en-US/docs/Web/API/CloseWatcher
  */
-export declare function useModalOpenState(open: boolean, onClose: () => void, { closeOnPopstate, closeByCloseWatcher }: UseModalOpenStateOptions): void;
+export declare function useModalOpenState(open: boolean, onClose: () => void, { closeOnPopstate, closeByCloseWatcher, onCloseRequest, }: UseModalOpenStateOptions): void;
 export {};

package/dist/cjs/hooks/useModalOpenState.js

@@ -7,27 +7,32 @@ exports.useModalOpenState = useModalOpenState;
 const react_1 = require("react");
 const useEventHandler_1 = require("./useEventHandler");
 const usePopstateSubscription_1 = require("./usePopstateSubscription");
+const defaultOnCloseRequest = () => true;
 /**
  * Хук для управления состоянием модалки
  * @param open состояние модалки
  * @param onClose колбек закрытия
  * @param options.closeOnPopstate закрывать модалку при переходе по истории браузера (по умолчанию false)
  * @param options.closeByCloseWatcher закрывать модалку через CloseWatcher (по умолчанию true)
+ * @param options.onCloseRequest колбек запроса закрытия модалки (если возвращает true, то модалка закроется, если false, то не закроется)
  * @returns [open, onClose]
  * @see https://developer.mozilla.org/en-US/docs/Web/API/CloseWatcher
  */
 function useModalOpenState(open, onClose, _ref) {
   let {
     closeOnPopstate = false,
-    closeByCloseWatcher = true
+    closeByCloseWatcher = true,
+    onCloseRequest = defaultOnCloseRequest
   } = _ref;
   const closeHandler = (0, useEventHandler_1.useEventHandler)(onClose);
+  const onCloseRequestHandler = (0, useEventHandler_1.useEventHandler)(onCloseRequest);
   (0, usePopstateSubscription_1.usePopstateSubscription)(() => open && closeHandler(), closeOnPopstate);
   (0, react_1.useEffect)(() => {
     if (open && 'CloseWatcher' in window && closeByCloseWatcher) {
       const watcher = new CloseWatcher();
+      watcher.oncancel = e => !onCloseRequestHandler() && e.preventDefault();
       watcher.onclose = () => closeHandler();
       return () => watcher.destroy();
     }
-  }, [open, closeHandler, closeByCloseWatcher]);
+  }, [open, closeHandler, closeByCloseWatcher, onCloseRequestHandler]);
 }

package/dist/esm/hooks/useModalOpenState.d.ts

@@ -1,6 +1,7 @@
 type UseModalOpenStateOptions = {
     closeOnPopstate?: boolean;
     closeByCloseWatcher?: boolean;
+    onCloseRequest?: () => boolean;
 };
 /**
  * Хук для управления состоянием модалки
@@ -8,8 +9,9 @@ type UseModalOpenStateOptions = {
  * @param onClose колбек закрытия
  * @param options.closeOnPopstate закрывать модалку при переходе по истории браузера (по умолчанию false)
  * @param options.closeByCloseWatcher закрывать модалку через CloseWatcher (по умолчанию true)
+ * @param options.onCloseRequest колбек запроса закрытия модалки (если возвращает true, то модалка закроется, если false, то не закроется)
  * @returns [open, onClose]
  * @see https://developer.mozilla.org/en-US/docs/Web/API/CloseWatcher
  */
-export declare function useModalOpenState(open: boolean, onClose: () => void, { closeOnPopstate, closeByCloseWatcher }: UseModalOpenStateOptions): void;
+export declare function useModalOpenState(open: boolean, onClose: () => void, { closeOnPopstate, closeByCloseWatcher, onCloseRequest, }: UseModalOpenStateOptions): void;
 export {};

package/dist/esm/hooks/useModalOpenState.js

@@ -1,23 +1,27 @@
 import { useEffect } from 'react';
 import { useEventHandler } from './useEventHandler';
 import { usePopstateSubscription } from './usePopstateSubscription';
+const defaultOnCloseRequest = () => true;
 /**
  * Хук для управления состоянием модалки
  * @param open состояние модалки
  * @param onClose колбек закрытия
  * @param options.closeOnPopstate закрывать модалку при переходе по истории браузера (по умолчанию false)
  * @param options.closeByCloseWatcher закрывать модалку через CloseWatcher (по умолчанию true)
+ * @param options.onCloseRequest колбек запроса закрытия модалки (если возвращает true, то модалка закроется, если false, то не закроется)
  * @returns [open, onClose]
  * @see https://developer.mozilla.org/en-US/docs/Web/API/CloseWatcher
  */
-export function useModalOpenState(open, onClose, { closeOnPopstate = false, closeByCloseWatcher = true }) {
+export function useModalOpenState(open, onClose, { closeOnPopstate = false, closeByCloseWatcher = true, onCloseRequest = defaultOnCloseRequest, }) {
     const closeHandler = useEventHandler(onClose);
+    const onCloseRequestHandler = useEventHandler(onCloseRequest);
     usePopstateSubscription(() => open && closeHandler(), closeOnPopstate);
     useEffect(() => {
         if (open && 'CloseWatcher' in window && closeByCloseWatcher) {
             const watcher = new CloseWatcher();
+            watcher.oncancel = e => !onCloseRequestHandler() && e.preventDefault();
             watcher.onclose = () => closeHandler();
             return () => watcher.destroy();
         }
-    }, [open, closeHandler, closeByCloseWatcher]);
+    }, [open, closeHandler, closeByCloseWatcher, onCloseRequestHandler]);
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Utils",
-  "version": "3.9.1-preview-09106514.0",
+  "version": "3.10.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -39,5 +39,5 @@
     "react-swipeable": "7.0.2",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "46d1e0103764bd1f5a509559a0c3f169d66151f7"
+  "gitHead": "60a306ca6f30a3dc7363ecc71b1584acc98dea58"
 }

package/src/hooks/useModalOpenState.ts

@@ -6,31 +6,42 @@ import { usePopstateSubscription } from './usePopstateSubscription';
 type UseModalOpenStateOptions = {
   closeOnPopstate?: boolean;
   closeByCloseWatcher?: boolean;
+  onCloseRequest?: () => boolean;
 };
 
+const defaultOnCloseRequest = () => true;
+
 /**
  * Хук для управления состоянием модалки
  * @param open состояние модалки
  * @param onClose колбек закрытия
  * @param options.closeOnPopstate закрывать модалку при переходе по истории браузера (по умолчанию false)
  * @param options.closeByCloseWatcher закрывать модалку через CloseWatcher (по умолчанию true)
+ * @param options.onCloseRequest колбек запроса закрытия модалки (если возвращает true, то модалка закроется, если false, то не закроется)
  * @returns [open, onClose]
  * @see https://developer.mozilla.org/en-US/docs/Web/API/CloseWatcher
  */
 export function useModalOpenState(
   open: boolean,
   onClose: () => void,
-  { closeOnPopstate = false, closeByCloseWatcher = true }: UseModalOpenStateOptions,
+  {
+    closeOnPopstate = false,
+    closeByCloseWatcher = true,
+    onCloseRequest = defaultOnCloseRequest,
+  }: UseModalOpenStateOptions,
 ) {
   const closeHandler = useEventHandler(onClose);
+  const onCloseRequestHandler = useEventHandler(onCloseRequest);
 
   usePopstateSubscription(() => open && closeHandler(), closeOnPopstate);
 
   useEffect(() => {
     if (open && 'CloseWatcher' in window && closeByCloseWatcher) {
       const watcher = new CloseWatcher();
+      watcher.oncancel = e => !onCloseRequestHandler() && e.preventDefault();
       watcher.onclose = () => closeHandler();
+
       return () => watcher.destroy();
     }
-  }, [open, closeHandler, closeByCloseWatcher]);
+  }, [open, closeHandler, closeByCloseWatcher, onCloseRequestHandler]);
 }