@snack-uikit/utils 3.9.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/index.d.ts

@@ -7,3 +7,4 @@ export * from './useThemeConfig';
 export * from './useValueControl';
 export * from './useDataPersist';
 export * from './usePopstateSubscription';
+export * from './useModalOpenState';

package/dist/cjs/hooks/index.js

@@ -30,4 +30,5 @@ __exportStar(require("./useSwipeable"), exports);
 __exportStar(require("./useThemeConfig"), exports);
 __exportStar(require("./useValueControl"), exports);
 __exportStar(require("./useDataPersist"), exports);
-__exportStar(require("./usePopstateSubscription"), exports);
+__exportStar(require("./usePopstateSubscription"), exports);
+__exportStar(require("./useModalOpenState"), exports);

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

@@ -0,0 +1,17 @@
+type UseModalOpenStateOptions = {
+    closeOnPopstate?: boolean;
+    closeByCloseWatcher?: boolean;
+    onCloseRequest?: () => boolean;
+};
+/**
+ * Хук для управления состоянием модалки
+ * @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 declare function useModalOpenState(open: boolean, onClose: () => void, { closeOnPopstate, closeByCloseWatcher, onCloseRequest, }: UseModalOpenStateOptions): void;
+export {};

package/dist/cjs/hooks/useModalOpenState.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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,
+    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, onCloseRequestHandler]);
+}

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

@@ -7,3 +7,4 @@ export * from './useThemeConfig';
 export * from './useValueControl';
 export * from './useDataPersist';
 export * from './usePopstateSubscription';
+export * from './useModalOpenState';

package/dist/esm/hooks/index.js

@@ -7,3 +7,4 @@ export * from './useThemeConfig';
 export * from './useValueControl';
 export * from './useDataPersist';
 export * from './usePopstateSubscription';
+export * from './useModalOpenState';

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

@@ -0,0 +1,17 @@
+type UseModalOpenStateOptions = {
+    closeOnPopstate?: boolean;
+    closeByCloseWatcher?: boolean;
+    onCloseRequest?: () => boolean;
+};
+/**
+ * Хук для управления состоянием модалки
+ * @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 declare function useModalOpenState(open: boolean, onClose: () => void, { closeOnPopstate, closeByCloseWatcher, onCloseRequest, }: UseModalOpenStateOptions): void;
+export {};

package/dist/esm/hooks/useModalOpenState.js

@@ -0,0 +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, 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, onCloseRequestHandler]);
+}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Utils",
-  "version": "3.9.0",
+  "version": "3.10.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -39,5 +39,5 @@
     "react-swipeable": "7.0.2",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "9e08a5c61a90e739f44ba128242a95d866452dc0"
+  "gitHead": "60a306ca6f30a3dc7363ecc71b1584acc98dea58"
 }

package/src/hooks/index.ts

@@ -7,3 +7,4 @@ export * from './useThemeConfig';
 export * from './useValueControl';
 export * from './useDataPersist';
 export * from './usePopstateSubscription';
+export * from './useModalOpenState';

package/src/hooks/useModalOpenState.ts

@@ -0,0 +1,47 @@
+import { useEffect } from 'react';
+
+import { useEventHandler } from './useEventHandler';
+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,
+    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, onCloseRequestHandler]);
+}