@astral/ui 4.65.1 → 4.67.0

package/node/components/useClickAwayEffect/useClickAwayEffect.js

@@ -2,29 +2,39 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useClickAwayEffect = void 0;
 const react_1 = require("react");
+const resolveNode = (item) => {
+    if (!item) {
+        return null;
+    }
+    return item instanceof Node ? item : item.current;
+};
 /**
  * хук позволяющий подписаться на клик вне указанного рефа,
  * подойдет для использования в кастомных попперах
  */
-const useClickAwayEffect = ({ ref, onClickAway, preventBubbling, isActive, }) => {
+const useClickAwayEffect = ({ ref, onClickAway, preventBubbling, isActive, excludeNodes, }) => {
     (0, react_1.useEffect)(() => {
         const node = ref?.current;
         if (!isActive || !node) {
             return;
         }
-        const onClick = (e) => {
-            if (!node.contains(e.target)) {
-                if (preventBubbling) {
-                    e.stopPropagation();
-                    e.stopImmediatePropagation();
-                }
-                onClickAway(e, 'clickAway');
+        const onClick = (event) => {
+            const target = event.target;
+            const isClickInside = node.contains(target);
+            const isClickOnExcluded = excludeNodes?.some((item) => resolveNode(item)?.contains(target));
+            const isClickAway = !isClickInside && !isClickOnExcluded;
+            if (preventBubbling) {
+                event.stopPropagation();
+                event.stopImmediatePropagation();
+            }
+            if (isClickAway) {
+                onClickAway(event, 'clickAway');
             }
         };
         window.addEventListener('pointerdown', onClick);
         return () => {
             window.removeEventListener('pointerdown', onClick);
         };
-    }, [isActive, ref]);
+    }, [isActive, ref, excludeNodes, onClickAway, preventBubbling]);
 };
 exports.useClickAwayEffect = useClickAwayEffect;

package/node/components/useFocusTrapEffect/index.d.ts

@@ -0,0 +1 @@
+export * from './useFocusTrapEffect';

package/node/components/useFocusTrapEffect/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useFocusTrapEffect"), exports);

package/node/components/useFocusTrapEffect/useFocusTrapEffect.d.ts

@@ -0,0 +1,17 @@
+import { type Options } from 'focus-trap';
+import { type RefObject } from 'react';
+export type UseFocusTrapEffectOptions = {
+    /**
+     * Реф на DOM-ноду контейнера ловушки фокуса
+     */
+    ref: RefObject<HTMLElement | null>;
+    /**
+     * Флаг активности ловушки
+     */
+    isActive: boolean;
+} & Pick<Options, 'initialFocus' | 'fallbackFocus' | 'escapeDeactivates' | 'clickOutsideDeactivates' | 'returnFocusOnDeactivate' | 'allowOutsideClick' | 'preventScroll' | 'delayInitialFocus'>;
+/**
+ * Хук для удержания фокуса внутри указанного контейнера.
+ * Опции соответствуют конфигурации focus-trap.
+ */
+export declare const useFocusTrapEffect: ({ ref, isActive, ...options }: UseFocusTrapEffectOptions) => void;

package/node/components/useFocusTrapEffect/useFocusTrapEffect.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusTrapEffect = void 0;
+const focus_trap_1 = require("focus-trap");
+const react_1 = require("react");
+/**
+ * Хук для удержания фокуса внутри указанного контейнера.
+ * Опции соответствуют конфигурации focus-trap.
+ */
+const useFocusTrapEffect = ({ ref, isActive, ...options }) => {
+    const trapRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const node = ref.current;
+        if (!isActive || !node) {
+            trapRef.current?.deactivate();
+            trapRef.current = null;
+            return;
+        }
+        const trap = (0, focus_trap_1.createFocusTrap)(node, options);
+        trapRef.current = trap;
+        trap.activate();
+        return () => {
+            trap.deactivate();
+            trapRef.current = null;
+        };
+    }, [isActive, ref]);
+};
+exports.useFocusTrapEffect = useFocusTrapEffect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.65.1",
+  "version": "4.67.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {
@@ -23,7 +23,8 @@
     "react-virtuoso": "4.18.1",
     "remeda": "^1.61.0",
     "react-pdf": "9.2.1",
-    "react-hook-form": "^7.66.1"
+    "react-hook-form": "^7.66.1",
+    "focus-trap": "^7.8.0"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",