@astral/ui 4.66.0 → 4.67.0

package/components/NewPopover/NewPopover.d.ts

@@ -0,0 +1,2 @@
+import { type NewPopoverProps } from './types';
+export declare const NewPopover: ({ children, onClose, isOpen, title, className, style, placement, anchorEl, disablePortal, disableAutoFocus, }: NewPopoverProps) => import("react/jsx-runtime").JSX.Element;

package/components/NewPopover/NewPopover.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BottomDrawer } from '../BottomDrawer';
+import { classNames } from '../utils/classNames';
+import { cva } from '../utils/cva';
+import { popoverClassnames } from './constants';
+import { AnimatedWrapper, InnerContainer, StyledMuiPopper } from './styles';
+import { useLogic } from './useLogic';
+const animatedWrapperCva = cva(popoverClassnames.animatedWrapper, {
+    variants: {
+        isOpen: {
+            true: popoverClassnames.animatedWrapperOpen,
+        },
+    },
+});
+export const NewPopover = ({ children, onClose, isOpen, title, className, style, placement = 'bottom', anchorEl, disablePortal, disableAutoFocus, }) => {
+    const { isMobile, isOpened, shouldRender, handleAnimationEnd, handleClose, setContainerRef, } = useLogic({ isOpen, anchorEl, onClose, disableAutoFocus });
+    if (isMobile) {
+        return (_jsx(BottomDrawer, { title: title, onClose: handleClose, open: isOpened, className: className, style: style, ModalProps: {
+                disableAutoFocus,
+            }, children: children }));
+    }
+    return (_jsx(StyledMuiPopper, { className: popoverClassnames.root, open: shouldRender, placement: placement, anchorEl: anchorEl, disablePortal: disablePortal, children: _jsx(AnimatedWrapper, { className: classNames(className, animatedWrapperCva({ isOpen: isOpened })), style: style, onAnimationEnd: handleAnimationEnd, children: _jsx(InnerContainer, { ref: setContainerRef, tabIndex: -1, className: popoverClassnames.innerContainer, children: children }) }) }));
+};

package/components/NewPopover/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const popoverClassnames: {
+    root: string;
+    innerContainer: string;
+    animatedWrapper: string;
+    animatedWrapperOpen: string;
+};

package/components/NewPopover/constants.js

@@ -0,0 +1,7 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const popoverClassnames = {
+    root: createUIKitClassname('popover'),
+    innerContainer: createUIKitClassname('popover__inner-container'),
+    animatedWrapper: createUIKitClassname('popover__animated-wrapper'),
+    animatedWrapperOpen: createUIKitClassname('popover__animated-wrapper_is-open'),
+};

package/components/NewPopover/index.d.ts

@@ -0,0 +1,2 @@
+export { NewPopover } from './NewPopover';
+export type { NewPopoverProps } from './types';

package/components/NewPopover/index.js

@@ -0,0 +1 @@
+export { NewPopover } from './NewPopover';

package/components/NewPopover/public.d.ts

@@ -0,0 +1,2 @@
+export { NewPopover } from './NewPopover';
+export type { NewPopoverProps } from './types';

package/components/NewPopover/public.js

@@ -0,0 +1 @@
+export { NewPopover } from './NewPopover';

package/components/NewPopover/styles.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const StyledMuiPopper: import("../styled").StyledComponent<import("@mui/material/Popper").PopperProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const AnimatedWrapper: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const InnerContainer: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/NewPopover/styles.js

@@ -0,0 +1,80 @@
+import MuiPopper from '@mui/material/Popper';
+import { styled } from '../styled';
+import { popoverClassnames } from './constants';
+export const StyledMuiPopper = styled(MuiPopper) `
+  &.${popoverClassnames.root} {
+    z-index: ${({ theme }) => theme.zIndex.tooltip};
+  }
+
+  &&[data-popper-placement*='top'] .${popoverClassnames.animatedWrapper} {
+    transform-origin: bottom center;
+
+    margin-bottom: ${({ theme }) => theme.spacing(2)};
+  }
+
+  &&[data-popper-placement*='bottom'] .${popoverClassnames.animatedWrapper} {
+    transform-origin: top center;
+
+    margin-top: ${({ theme }) => theme.spacing(2)};
+  }
+
+  &&[data-popper-placement*='left'] .${popoverClassnames.animatedWrapper} {
+    transform-origin: right center;
+
+    margin-right: ${({ theme }) => theme.spacing(2)};
+  }
+
+  &&[data-popper-placement*='right'] .${popoverClassnames.animatedWrapper} {
+    transform-origin: left center;
+
+    margin-left: ${({ theme }) => theme.spacing(2)};
+  }
+`;
+export const AnimatedWrapper = styled.div `
+  animation: popover-grow-out
+    ${({ theme }) => theme.transitions.duration.enteringScreen}ms
+    ${({ theme }) => theme.transitions.easing.easeInOut} forwards;
+
+  &.${popoverClassnames.animatedWrapperOpen} {
+    animation: popover-grow-in
+      ${({ theme }) => theme.transitions.duration.enteringScreen}ms
+      ${({ theme }) => theme.transitions.easing.easeInOut} forwards;
+  }
+
+  @keyframes popover-grow-in {
+    from {
+      transform: scale(0.75, 0.5625);
+
+      opacity: 0;
+    }
+
+    to {
+      transform: none;
+
+      opacity: 1;
+    }
+  }
+
+  @keyframes popover-grow-out {
+    from {
+      transform: none;
+
+      opacity: 1;
+    }
+
+    to {
+      transform: scale(0.75, 0.5625);
+
+      opacity: 0;
+    }
+  }
+`;
+export const InnerContainer = styled.div `
+  &.${popoverClassnames.innerContainer} {
+    overflow: hidden;
+
+    background: ${({ theme }) => theme.palette.background.paper};
+    border-radius: ${({ theme }) => theme.shape.medium};
+    box-shadow: ${({ theme }) => theme.elevation[200]};
+  }
+`;

package/components/NewPopover/types.d.ts

@@ -0,0 +1,53 @@
+import type { CSSProperties, ReactNode, SyntheticEvent } from 'react';
+export type NewPopoverOnClose = (event: Event | SyntheticEvent) => void;
+export type NewPopoverPlacement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+type NewPopoverVirtualElement = {
+    getBoundingClientRect: () => DOMRect;
+};
+export type NewPopoverAnchorEl = null | NewPopoverVirtualElement | HTMLElement | (() => HTMLElement) | (() => NewPopoverVirtualElement);
+export type NewPopoverProps = {
+    /**
+     * Якорь позиционирования
+     */
+    anchorEl?: NewPopoverAnchorEl;
+    /**
+     * Показывать popover. Если не передан — видимость определяется наличием anchorEl.
+     */
+    isOpen?: boolean;
+    /**
+     * Позиция относительно anchor
+     * @default 'bottom'
+     */
+    placement?: NewPopoverPlacement;
+    /**
+     * Контент popover
+     */
+    children?: ReactNode;
+    /**
+     * className корневого popper
+     */
+    className?: string;
+    /**
+     * style корневого popper
+     */
+    style?: CSSProperties;
+    /**
+     * Заголовок для отображения в мобильной версии
+     */
+    title?: string;
+    /**
+     * Обработчик закрытия компонента
+     */
+    onClose?: NewPopoverOnClose;
+    /**
+     * Рендерить popper внутри родителя, без portal
+     * @default false
+     */
+    disablePortal?: boolean;
+    /**
+     * Отключить автофокус при открытии popover (десктоп)
+     * @default false
+     */
+    disableAutoFocus?: boolean;
+};
+export {};

package/components/NewPopover/types.js

@@ -0,0 +1 @@
+export {};

package/components/NewPopover/useLogic/index.d.ts

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

package/components/NewPopover/useLogic/index.js

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

package/components/NewPopover/useLogic/useLogic.d.ts

@@ -0,0 +1,11 @@
+import { type NewPopoverProps } from '../types';
+type UseLogicParams = Pick<NewPopoverProps, 'isOpen' | 'anchorEl' | 'onClose' | 'disableAutoFocus'>;
+export declare const useLogic: ({ isOpen, anchorEl, onClose, disableAutoFocus, }: UseLogicParams) => {
+    isMobile: boolean;
+    isOpened: boolean;
+    shouldRender: boolean;
+    handleAnimationEnd: () => void;
+    handleClose: (event: Event) => void;
+    setContainerRef: (node: HTMLDivElement | null) => void;
+};
+export {};

package/components/NewPopover/useLogic/useLogic.js

@@ -0,0 +1,54 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { useClickAwayEffect } from '../../useClickAwayEffect';
+import { useEscapeClickEffect } from '../../useEscapeClickEffect';
+import { useFocusTrapEffect } from '../../useFocusTrapEffect';
+import { usePopoverAnimation } from '../../usePopoverAnimation';
+import { useViewportType } from '../../useViewportType';
+import { resolveAnchorNode } from '../utils';
+export const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, }) => {
+    const containerRef = useRef(null);
+    const [isContainerMounted, setIsContainerMounted] = useState(false);
+    const setContainerRef = useCallback((node) => {
+        containerRef.current = node;
+        setIsContainerMounted(Boolean(node));
+    }, []);
+    const isOpened = isOpen ?? Boolean(anchorEl);
+    const isControlled = isOpen !== undefined;
+    const { isMobile } = useViewportType();
+    const { shouldRender, handleAnimationEnd } = usePopoverAnimation(isOpened);
+    const isEffectActive = !isMobile && isOpened && isContainerMounted;
+    const anchorNode = useMemo(() => resolveAnchorNode(anchorEl), [anchorEl]);
+    const excludeNodes = useMemo(() => [anchorNode], [anchorNode]);
+    const handleClose = (event) => {
+        onClose?.(event);
+    };
+    useClickAwayEffect({
+        ref: containerRef,
+        onClickAway: handleClose,
+        isActive: isEffectActive && !isControlled,
+        preventBubbling: true,
+        excludeNodes,
+    });
+    useEscapeClickEffect({
+        onEscape: handleClose,
+        isActive: isEffectActive,
+        preventBubbling: true,
+    });
+    useFocusTrapEffect({
+        ref: containerRef,
+        isActive: isEffectActive && !disableAutoFocus,
+        returnFocusOnDeactivate: true,
+        escapeDeactivates: false,
+        clickOutsideDeactivates: false,
+        allowOutsideClick: true,
+        fallbackFocus: () => containerRef.current || document.body,
+    });
+    return {
+        isMobile,
+        isOpened,
+        shouldRender,
+        handleAnimationEnd,
+        handleClose,
+        setContainerRef,
+    };
+};

package/components/NewPopover/utils/index.d.ts

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

package/components/NewPopover/utils/index.js

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

package/components/NewPopover/utils/resolveAnchorNode.d.ts

@@ -0,0 +1,6 @@
+import { type NewPopoverAnchorEl } from '../types';
+/**
+ * Резолвит anchorEl в DOM-ноду, если это возможно.
+ * Для virtual-элементов вернёт null.
+ */
+export declare const resolveAnchorNode: (anchorEl: NewPopoverAnchorEl | undefined) => Node | null;

package/components/NewPopover/utils/resolveAnchorNode.js

@@ -0,0 +1,8 @@
+/**
+ * Резолвит anchorEl в DOM-ноду, если это возможно.
+ * Для virtual-элементов вернёт null.
+ */
+export const resolveAnchorNode = (anchorEl) => {
+    const value = typeof anchorEl === 'function' ? anchorEl() : anchorEl;
+    return value instanceof Node ? value : null;
+};

package/components/Popover/Popover.d.ts

@@ -1,9 +1,5 @@
-import type { PopoverProps as MuiPopoverProps } from '@mui/material/Popover';
-import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
-export type PopoverProps = WithoutEmotionSpecific<MuiPopoverProps> & {
-    /**
-     * Заголовок для отображения в мобильной версии
-     */
-    title?: string;
-};
+import type { PopoverProps } from './types';
+/**
+ * @deprecated Причина отказа от поддержки: MUI Popover использует backdrop, который перехватывает первый внешний клик и создает UX-эффект "двойного клика". Используйте компонент `NewPopover`.
+ */
 export declare const Popover: ({ children, onClose, open, title, className, ...restProps }: PopoverProps) => import("react/jsx-runtime").JSX.Element;

package/components/Popover/Popover.js

@@ -2,6 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { BottomDrawer } from '../BottomDrawer';
 import { useViewportType } from '../useViewportType';
 import { StyledMuiPopover } from './styles';
+/**
+ * @deprecated Причина отказа от поддержки: MUI Popover использует backdrop, который перехватывает первый внешний клик и создает UX-эффект "двойного клика". Используйте компонент `NewPopover`.
+ */
 export const Popover = ({ children, onClose, open, title, className, ...restProps }) => {
     const { isMobile } = useViewportType();
     if (isMobile) {

package/components/Popover/index.d.ts

@@ -1 +1,2 @@
 export * from './Popover';
+export * from './types';

package/components/Popover/index.js

@@ -1 +1,2 @@
 export * from './Popover';
+export * from './types';

package/components/Popover/public.d.ts

@@ -1 +1,2 @@
-export * from './Popover';
+export { Popover } from './Popover';
+export type { PopoverProps } from './types';

package/components/Popover/public.js

@@ -1 +1 @@
-export * from './Popover';
+export { Popover } from './Popover';

package/components/Popover/types.d.ts

@@ -0,0 +1,8 @@
+import type { PopoverProps as MuiPopoverProps } from '@mui/material/Popover';
+import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
+export type PopoverProps = WithoutEmotionSpecific<MuiPopoverProps> & {
+    /**
+     * Заголовок для отображения в мобильной версии
+     */
+    title?: string;
+};

package/components/Popover/types.js

@@ -0,0 +1 @@
+export {};

package/components/index.d.ts

@@ -20,7 +20,6 @@ export * from './Checkbox';
 export * from './CheckboxField';
 export * from './Chevron';
 export * from './ClickAwayListener';
-export * from './ClickAwayListener';
 export { CodeField, type CodeFieldProps } from './CodeField';
 export * from './CollapsableAlert';
 export * from './Collapse';

package/components/index.js

@@ -20,7 +20,6 @@ export * from './Checkbox';
 export * from './CheckboxField';
 export * from './Chevron';
 export * from './ClickAwayListener';
-export * from './ClickAwayListener';
 export { CodeField } from './CodeField';
 export * from './CollapsableAlert';
 export * from './Collapse';

package/components/useClickAwayEffect/useClickAwayEffect.d.ts

@@ -1,5 +1,6 @@
 import { type RefObject } from 'react';
 import { type CloseEventReason } from '../types/CloseEventReason';
+export type ExcludedNode = Node | RefObject<Node | null> | null | undefined;
 export type UseClickAwayListenerOptions = {
     /**
      * реф на дом ноду, клик вне которой надо отслеживать
@@ -17,9 +18,13 @@ export type UseClickAwayListenerOptions = {
      * флаг необходимости предотвращать всплытие, подойдет когда используется внутри модалки
      */
     preventBubbling?: boolean;
+    /**
+     * Ноды (или рефы), клик по которым не приводит к срабатыванию onClickAway
+     */
+    excludeNodes?: ExcludedNode[];
 };
 /**
  * хук позволяющий подписаться на клик вне указанного рефа,
  * подойдет для использования в кастомных попперах
  */
-export declare const useClickAwayEffect: ({ ref, onClickAway, preventBubbling, isActive, }: UseClickAwayListenerOptions) => void;
+export declare const useClickAwayEffect: ({ ref, onClickAway, preventBubbling, isActive, excludeNodes, }: UseClickAwayListenerOptions) => void;

package/components/useClickAwayEffect/useClickAwayEffect.js

@@ -1,26 +1,36 @@
 import { useEffect } from 'react';
+const resolveNode = (item) => {
+    if (!item) {
+        return null;
+    }
+    return item instanceof Node ? item : item.current;
+};
 /**
  * хук позволяющий подписаться на клик вне указанного рефа,
  * подойдет для использования в кастомных попперах
  */
-export const useClickAwayEffect = ({ ref, onClickAway, preventBubbling, isActive, }) => {
+export const useClickAwayEffect = ({ ref, onClickAway, preventBubbling, isActive, excludeNodes, }) => {
     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]);
 };

package/components/useFocusTrapEffect/index.d.ts

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

package/components/useFocusTrapEffect/index.js

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

package/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/components/useFocusTrapEffect/useFocusTrapEffect.js

@@ -0,0 +1,24 @@
+import { createFocusTrap } from 'focus-trap';
+import { useEffect, useRef } from 'react';
+/**
+ * Хук для удержания фокуса внутри указанного контейнера.
+ * Опции соответствуют конфигурации focus-trap.
+ */
+export const useFocusTrapEffect = ({ ref, isActive, ...options }) => {
+    const trapRef = useRef(null);
+    useEffect(() => {
+        const node = ref.current;
+        if (!isActive || !node) {
+            trapRef.current?.deactivate();
+            trapRef.current = null;
+            return;
+        }
+        const trap = createFocusTrap(node, options);
+        trapRef.current = trap;
+        trap.activate();
+        return () => {
+            trap.deactivate();
+            trapRef.current = null;
+        };
+    }, [isActive, ref]);
+};

package/node/components/NewPopover/NewPopover.d.ts

@@ -0,0 +1,2 @@
+import { type NewPopoverProps } from './types';
+export declare const NewPopover: ({ children, onClose, isOpen, title, className, style, placement, anchorEl, disablePortal, disableAutoFocus, }: NewPopoverProps) => import("react/jsx-runtime").JSX.Element;

package/node/components/NewPopover/NewPopover.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewPopover = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const BottomDrawer_1 = require("../BottomDrawer");
+const classNames_1 = require("../utils/classNames");
+const cva_1 = require("../utils/cva");
+const constants_1 = require("./constants");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+const animatedWrapperCva = (0, cva_1.cva)(constants_1.popoverClassnames.animatedWrapper, {
+    variants: {
+        isOpen: {
+            true: constants_1.popoverClassnames.animatedWrapperOpen,
+        },
+    },
+});
+const NewPopover = ({ children, onClose, isOpen, title, className, style, placement = 'bottom', anchorEl, disablePortal, disableAutoFocus, }) => {
+    const { isMobile, isOpened, shouldRender, handleAnimationEnd, handleClose, setContainerRef, } = (0, useLogic_1.useLogic)({ isOpen, anchorEl, onClose, disableAutoFocus });
+    if (isMobile) {
+        return ((0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { title: title, onClose: handleClose, open: isOpened, className: className, style: style, ModalProps: {
+                disableAutoFocus,
+            }, children: children }));
+    }
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledMuiPopper, { className: constants_1.popoverClassnames.root, open: shouldRender, placement: placement, anchorEl: anchorEl, disablePortal: disablePortal, children: (0, jsx_runtime_1.jsx)(styles_1.AnimatedWrapper, { className: (0, classNames_1.classNames)(className, animatedWrapperCva({ isOpen: isOpened })), style: style, onAnimationEnd: handleAnimationEnd, children: (0, jsx_runtime_1.jsx)(styles_1.InnerContainer, { ref: setContainerRef, tabIndex: -1, className: constants_1.popoverClassnames.innerContainer, children: children }) }) }));
+};
+exports.NewPopover = NewPopover;

package/node/components/NewPopover/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const popoverClassnames: {
+    root: string;
+    innerContainer: string;
+    animatedWrapper: string;
+    animatedWrapperOpen: string;
+};

package/node/components/NewPopover/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.popoverClassnames = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.popoverClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('popover'),
+    innerContainer: (0, createUIKitClassname_1.createUIKitClassname)('popover__inner-container'),
+    animatedWrapper: (0, createUIKitClassname_1.createUIKitClassname)('popover__animated-wrapper'),
+    animatedWrapperOpen: (0, createUIKitClassname_1.createUIKitClassname)('popover__animated-wrapper_is-open'),
+};

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

@@ -0,0 +1,2 @@
+export { NewPopover } from './NewPopover';
+export type { NewPopoverProps } from './types';

package/node/components/NewPopover/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewPopover = void 0;
+var NewPopover_1 = require("./NewPopover");
+Object.defineProperty(exports, "NewPopover", { enumerable: true, get: function () { return NewPopover_1.NewPopover; } });

package/node/components/NewPopover/public.d.ts

@@ -0,0 +1,2 @@
+export { NewPopover } from './NewPopover';
+export type { NewPopoverProps } from './types';

package/node/components/NewPopover/public.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewPopover = void 0;
+var NewPopover_1 = require("./NewPopover");
+Object.defineProperty(exports, "NewPopover", { enumerable: true, get: function () { return NewPopover_1.NewPopover; } });

package/node/components/NewPopover/styles.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const StyledMuiPopper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("@mui/material/Popper").PopperProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const AnimatedWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const InnerContainer: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/NewPopover/styles.js

@@ -0,0 +1,86 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InnerContainer = exports.AnimatedWrapper = exports.StyledMuiPopper = void 0;
+const Popper_1 = __importDefault(require("@mui/material/Popper"));
+const styled_1 = require("../styled");
+const constants_1 = require("./constants");
+exports.StyledMuiPopper = (0, styled_1.styled)(Popper_1.default) `
+  &.${constants_1.popoverClassnames.root} {
+    z-index: ${({ theme }) => theme.zIndex.tooltip};
+  }
+
+  &&[data-popper-placement*='top'] .${constants_1.popoverClassnames.animatedWrapper} {
+    transform-origin: bottom center;
+
+    margin-bottom: ${({ theme }) => theme.spacing(2)};
+  }
+
+  &&[data-popper-placement*='bottom'] .${constants_1.popoverClassnames.animatedWrapper} {
+    transform-origin: top center;
+
+    margin-top: ${({ theme }) => theme.spacing(2)};
+  }
+
+  &&[data-popper-placement*='left'] .${constants_1.popoverClassnames.animatedWrapper} {
+    transform-origin: right center;
+
+    margin-right: ${({ theme }) => theme.spacing(2)};
+  }
+
+  &&[data-popper-placement*='right'] .${constants_1.popoverClassnames.animatedWrapper} {
+    transform-origin: left center;
+
+    margin-left: ${({ theme }) => theme.spacing(2)};
+  }
+`;
+exports.AnimatedWrapper = styled_1.styled.div `
+  animation: popover-grow-out
+    ${({ theme }) => theme.transitions.duration.enteringScreen}ms
+    ${({ theme }) => theme.transitions.easing.easeInOut} forwards;
+
+  &.${constants_1.popoverClassnames.animatedWrapperOpen} {
+    animation: popover-grow-in
+      ${({ theme }) => theme.transitions.duration.enteringScreen}ms
+      ${({ theme }) => theme.transitions.easing.easeInOut} forwards;
+  }
+
+  @keyframes popover-grow-in {
+    from {
+      transform: scale(0.75, 0.5625);
+
+      opacity: 0;
+    }
+
+    to {
+      transform: none;
+
+      opacity: 1;
+    }
+  }
+
+  @keyframes popover-grow-out {
+    from {
+      transform: none;
+
+      opacity: 1;
+    }
+
+    to {
+      transform: scale(0.75, 0.5625);
+
+      opacity: 0;
+    }
+  }
+`;
+exports.InnerContainer = styled_1.styled.div `
+  &.${constants_1.popoverClassnames.innerContainer} {
+    overflow: hidden;
+
+    background: ${({ theme }) => theme.palette.background.paper};
+    border-radius: ${({ theme }) => theme.shape.medium};
+    box-shadow: ${({ theme }) => theme.elevation[200]};
+  }
+`;

package/node/components/NewPopover/types.d.ts

@@ -0,0 +1,53 @@
+import type { CSSProperties, ReactNode, SyntheticEvent } from 'react';
+export type NewPopoverOnClose = (event: Event | SyntheticEvent) => void;
+export type NewPopoverPlacement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+type NewPopoverVirtualElement = {
+    getBoundingClientRect: () => DOMRect;
+};
+export type NewPopoverAnchorEl = null | NewPopoverVirtualElement | HTMLElement | (() => HTMLElement) | (() => NewPopoverVirtualElement);
+export type NewPopoverProps = {
+    /**
+     * Якорь позиционирования
+     */
+    anchorEl?: NewPopoverAnchorEl;
+    /**
+     * Показывать popover. Если не передан — видимость определяется наличием anchorEl.
+     */
+    isOpen?: boolean;
+    /**
+     * Позиция относительно anchor
+     * @default 'bottom'
+     */
+    placement?: NewPopoverPlacement;
+    /**
+     * Контент popover
+     */
+    children?: ReactNode;
+    /**
+     * className корневого popper
+     */
+    className?: string;
+    /**
+     * style корневого popper
+     */
+    style?: CSSProperties;
+    /**
+     * Заголовок для отображения в мобильной версии
+     */
+    title?: string;
+    /**
+     * Обработчик закрытия компонента
+     */
+    onClose?: NewPopoverOnClose;
+    /**
+     * Рендерить popper внутри родителя, без portal
+     * @default false
+     */
+    disablePortal?: boolean;
+    /**
+     * Отключить автофокус при открытии popover (десктоп)
+     * @default false
+     */
+    disableAutoFocus?: boolean;
+};
+export {};

package/node/components/NewPopover/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/components/NewPopover/useLogic/index.d.ts

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

package/node/components/NewPopover/useLogic/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("./useLogic"), exports);

package/node/components/NewPopover/useLogic/useLogic.d.ts

@@ -0,0 +1,11 @@
+import { type NewPopoverProps } from '../types';
+type UseLogicParams = Pick<NewPopoverProps, 'isOpen' | 'anchorEl' | 'onClose' | 'disableAutoFocus'>;
+export declare const useLogic: ({ isOpen, anchorEl, onClose, disableAutoFocus, }: UseLogicParams) => {
+    isMobile: boolean;
+    isOpened: boolean;
+    shouldRender: boolean;
+    handleAnimationEnd: () => void;
+    handleClose: (event: Event) => void;
+    setContainerRef: (node: HTMLDivElement | null) => void;
+};
+export {};

package/node/components/NewPopover/useLogic/useLogic.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const useClickAwayEffect_1 = require("../../useClickAwayEffect");
+const useEscapeClickEffect_1 = require("../../useEscapeClickEffect");
+const useFocusTrapEffect_1 = require("../../useFocusTrapEffect");
+const usePopoverAnimation_1 = require("../../usePopoverAnimation");
+const useViewportType_1 = require("../../useViewportType");
+const utils_1 = require("../utils");
+const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, }) => {
+    const containerRef = (0, react_1.useRef)(null);
+    const [isContainerMounted, setIsContainerMounted] = (0, react_1.useState)(false);
+    const setContainerRef = (0, react_1.useCallback)((node) => {
+        containerRef.current = node;
+        setIsContainerMounted(Boolean(node));
+    }, []);
+    const isOpened = isOpen ?? Boolean(anchorEl);
+    const isControlled = isOpen !== undefined;
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
+    const { shouldRender, handleAnimationEnd } = (0, usePopoverAnimation_1.usePopoverAnimation)(isOpened);
+    const isEffectActive = !isMobile && isOpened && isContainerMounted;
+    const anchorNode = (0, react_1.useMemo)(() => (0, utils_1.resolveAnchorNode)(anchorEl), [anchorEl]);
+    const excludeNodes = (0, react_1.useMemo)(() => [anchorNode], [anchorNode]);
+    const handleClose = (event) => {
+        onClose?.(event);
+    };
+    (0, useClickAwayEffect_1.useClickAwayEffect)({
+        ref: containerRef,
+        onClickAway: handleClose,
+        isActive: isEffectActive && !isControlled,
+        preventBubbling: true,
+        excludeNodes,
+    });
+    (0, useEscapeClickEffect_1.useEscapeClickEffect)({
+        onEscape: handleClose,
+        isActive: isEffectActive,
+        preventBubbling: true,
+    });
+    (0, useFocusTrapEffect_1.useFocusTrapEffect)({
+        ref: containerRef,
+        isActive: isEffectActive && !disableAutoFocus,
+        returnFocusOnDeactivate: true,
+        escapeDeactivates: false,
+        clickOutsideDeactivates: false,
+        allowOutsideClick: true,
+        fallbackFocus: () => containerRef.current || document.body,
+    });
+    return {
+        isMobile,
+        isOpened,
+        shouldRender,
+        handleAnimationEnd,
+        handleClose,
+        setContainerRef,
+    };
+};
+exports.useLogic = useLogic;

package/node/components/NewPopover/utils/index.d.ts

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

package/node/components/NewPopover/utils/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("./resolveAnchorNode"), exports);

package/node/components/NewPopover/utils/resolveAnchorNode.d.ts

@@ -0,0 +1,6 @@
+import { type NewPopoverAnchorEl } from '../types';
+/**
+ * Резолвит anchorEl в DOM-ноду, если это возможно.
+ * Для virtual-элементов вернёт null.
+ */
+export declare const resolveAnchorNode: (anchorEl: NewPopoverAnchorEl | undefined) => Node | null;

package/node/components/NewPopover/utils/resolveAnchorNode.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveAnchorNode = void 0;
+/**
+ * Резолвит anchorEl в DOM-ноду, если это возможно.
+ * Для virtual-элементов вернёт null.
+ */
+const resolveAnchorNode = (anchorEl) => {
+    const value = typeof anchorEl === 'function' ? anchorEl() : anchorEl;
+    return value instanceof Node ? value : null;
+};
+exports.resolveAnchorNode = resolveAnchorNode;

package/node/components/Popover/Popover.d.ts

@@ -1,9 +1,5 @@
-import type { PopoverProps as MuiPopoverProps } from '@mui/material/Popover';
-import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
-export type PopoverProps = WithoutEmotionSpecific<MuiPopoverProps> & {
-    /**
-     * Заголовок для отображения в мобильной версии
-     */
-    title?: string;
-};
+import type { PopoverProps } from './types';
+/**
+ * @deprecated Причина отказа от поддержки: MUI Popover использует backdrop, который перехватывает первый внешний клик и создает UX-эффект "двойного клика". Используйте компонент `NewPopover`.
+ */
 export declare const Popover: ({ children, onClose, open, title, className, ...restProps }: PopoverProps) => import("react/jsx-runtime").JSX.Element;

package/node/components/Popover/Popover.js

@@ -5,6 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const BottomDrawer_1 = require("../BottomDrawer");
 const useViewportType_1 = require("../useViewportType");
 const styles_1 = require("./styles");
+/**
+ * @deprecated Причина отказа от поддержки: MUI Popover использует backdrop, который перехватывает первый внешний клик и создает UX-эффект "двойного клика". Используйте компонент `NewPopover`.
+ */
 const Popover = ({ children, onClose, open, title, className, ...restProps }) => {
     const { isMobile } = (0, useViewportType_1.useViewportType)();
     if (isMobile) {

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

@@ -1 +1,2 @@
 export * from './Popover';
+export * from './types';

package/node/components/Popover/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Popover"), exports);
+__exportStar(require("./types"), exports);

package/node/components/Popover/public.d.ts

@@ -1 +1,2 @@
-export * from './Popover';
+export { Popover } from './Popover';
+export type { PopoverProps } from './types';

package/node/components/Popover/public.js

@@ -1,17 +1,5 @@
 "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("./Popover"), exports);
+exports.Popover = void 0;
+var Popover_1 = require("./Popover");
+Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return Popover_1.Popover; } });

package/node/components/Popover/types.d.ts

@@ -0,0 +1,8 @@
+import type { PopoverProps as MuiPopoverProps } from '@mui/material/Popover';
+import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
+export type PopoverProps = WithoutEmotionSpecific<MuiPopoverProps> & {
+    /**
+     * Заголовок для отображения в мобильной версии
+     */
+    title?: string;
+};

package/node/components/Popover/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/components/index.d.ts

@@ -20,7 +20,6 @@ export * from './Checkbox';
 export * from './CheckboxField';
 export * from './Chevron';
 export * from './ClickAwayListener';
-export * from './ClickAwayListener';
 export { CodeField, type CodeFieldProps } from './CodeField';
 export * from './CollapsableAlert';
 export * from './Collapse';

package/node/components/index.js

@@ -53,7 +53,6 @@ __exportStar(require("./Checkbox"), exports);
 __exportStar(require("./CheckboxField"), exports);
 __exportStar(require("./Chevron"), exports);
 __exportStar(require("./ClickAwayListener"), exports);
-__exportStar(require("./ClickAwayListener"), exports);
 var CodeField_1 = require("./CodeField");
 Object.defineProperty(exports, "CodeField", { enumerable: true, get: function () { return CodeField_1.CodeField; } });
 __exportStar(require("./CollapsableAlert"), exports);

package/node/components/useClickAwayEffect/useClickAwayEffect.d.ts

@@ -1,5 +1,6 @@
 import { type RefObject } from 'react';
 import { type CloseEventReason } from '../types/CloseEventReason';
+export type ExcludedNode = Node | RefObject<Node | null> | null | undefined;
 export type UseClickAwayListenerOptions = {
     /**
      * реф на дом ноду, клик вне которой надо отслеживать
@@ -17,9 +18,13 @@ export type UseClickAwayListenerOptions = {
      * флаг необходимости предотвращать всплытие, подойдет когда используется внутри модалки
      */
     preventBubbling?: boolean;
+    /**
+     * Ноды (или рефы), клик по которым не приводит к срабатыванию onClickAway
+     */
+    excludeNodes?: ExcludedNode[];
 };
 /**
  * хук позволяющий подписаться на клик вне указанного рефа,
  * подойдет для использования в кастомных попперах
  */
-export declare const useClickAwayEffect: ({ ref, onClickAway, preventBubbling, isActive, }: UseClickAwayListenerOptions) => void;
+export declare const useClickAwayEffect: ({ ref, onClickAway, preventBubbling, isActive, excludeNodes, }: UseClickAwayListenerOptions) => void;

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.66.0",
+  "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",