@hh.ru/magritte-internal-drop-base 6.0.1 → 6.0.3

package/DropBase.d.ts

@@ -1,6 +1,6 @@
 import { ForwardedRef, ReactElement } from 'react';
-import type { DropBaseProps, DropBaseHorizontalPosition, DropBaseVerticalPosition, DropBaseHorizontalPositionWithoutCenter, DropBaseVerticalPositionWithoutCenter } from './types';
-declare const DropBase: (<T extends DropBaseHorizontalPosition | DropBaseVerticalPosition | DropBaseVerticalPositionWithoutCenter | DropBaseHorizontalPositionWithoutCenter>(props: import("./types").DropBasePermanentProps & T & {
+import type { DropBaseProps, DropBaseHorizontalPosition, DropBaseVerticalPosition, DropBaseHorizontalPositionWithoutCenter, DropBaseVerticalPositionWithoutCenter } from '@hh.ru/magritte-internal-drop-base/types';
+declare const DropBase: (<T extends DropBaseHorizontalPosition | DropBaseVerticalPosition | DropBaseVerticalPositionWithoutCenter | DropBaseHorizontalPositionWithoutCenter>(props: import("@hh.ru/magritte-internal-drop-base/types").DropBasePermanentProps & T & {
     ref?: ForwardedRef<HTMLElement> | undefined;
 }) => ReactElement) & {
     displayName: string;

package/DropBase.js

@@ -6,6 +6,7 @@ import { CSSTransition } from 'react-transition-group';
 import { useEscapeToClose, useKeyboardNavigation, findNextFocusableElement } from '@hh.ru/magritte-common-keyboard';
 import { useCloseByClickOutside } from '@hh.ru/magritte-common-mouse';
 import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
+import { useNoBubbling } from '@hh.ru/magritte-common-use-no-bubbling';
 import { useWhenFontLoaded } from '@hh.ru/magritte-common-use-when-font-loaded';
 import { useIntersectionSubscription } from './intersectionManager.js';
 import { useScrollSubscription } from './scrollManager.js';
@@ -14,47 +15,8 @@ import '@hh.ru/magritte-common-func-utils';
 import '@hh.ru/magritte-common-metrics';
 import './calculateRect.js';
 
-var styles = {"drop-base":"magritte-drop-base___uJNG4_6-0-1","dropBase":"magritte-drop-base___uJNG4_6-0-1"};
+var styles = {"drop-base":"magritte-drop-base___uJNG4_6-0-3","dropBase":"magritte-drop-base___uJNG4_6-0-3"};
 
-const EVENTS_TO_PREVENT_BUBBLING = [
-    'onClick',
-    'onContextMenu',
-    'onDoubleClick',
-    'onMouseDown',
-    'onMouseEnter',
-    'onMouseLeave',
-    'onMouseMove',
-    'onMouseOver',
-    'onMouseOut',
-    'onMouseUp',
-    'onKeyDown',
-    'onKeyPress',
-    'onKeyUp',
-    'onBlur',
-    'onChange',
-    'onFocus',
-    'onInput',
-    'onInvalid',
-    'onReset',
-    'onSelect',
-    'onSubmit',
-    'onDrag',
-    'onDragEnd',
-    'onDragEnter',
-    'onDragLeave',
-    'onDragOver',
-    'onDragStart',
-    'onDrop',
-    'onCopy',
-    'onCut',
-    'onPaste',
-    'onWheel',
-    'onTouchCancel',
-    'onTouchEnd',
-    'onTouchMove',
-    'onTouchStart',
-];
-const bubblingCancelHandler = (event) => event.stopPropagation();
 const DropBaseComponent = ({ visible, children, arrowGuardDistance, activatorRef, host, alignment, direction, preferredViewport, onClose, autoFocusWhenOpened = false, closeByClickOutside = true, animationTimeout, animationClassNames, guardDistance = 8, role, occupyAllAvailableViewportHeight = false, forcePosition = false, widthEqualToActivator = false, keyboardNavigationMode = null, ignoreIntersections = false, style = {}, onAppear, onBeforeExit, onAfterExit, ...props }, ref) => {
     const dropNodeRef = useRef(null);
     const dropScrollableContainerRef = useRef(null);
@@ -91,16 +53,7 @@ const DropBaseComponent = ({ visible, children, arrowGuardDistance, activatorRef
             onClose?.();
         }
     }, closeByClickOutside);
-    const eventHandlers = EVENTS_TO_PREVENT_BUBBLING.reduce((result, eventName) => {
-        result[eventName] =
-            eventName in props
-                ? (event) => {
-                    props[eventName](event);
-                    bubblingCancelHandler(event);
-                }
-                : bubblingCancelHandler;
-        return result;
-    }, {});
+    const eventHandlers = useNoBubbling(props);
     useEffect(() => {
         if (!isVisibleDropDown) {
             setLockClickOutside(true);

package/DropBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropBase.js","sources":["../src/DropBase.tsx"],"sourcesContent":["import { ForwardedRef, ReactElement, ReactEventHandler, forwardRef, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { findNextFocusableElement, useEscapeToClose, useKeyboardNavigation } from '@hh.ru/magritte-common-keyboard';\nimport { useCloseByClickOutside } from '@hh.ru/magritte-common-mouse';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useWhenFontLoaded } from '@hh.ru/magritte-common-use-when-font-loaded';\nimport { useIntersectionSubscription } from '@hh.ru/magritte-internal-drop-base/intersectionManager';\nimport { useScrollSubscription } from '@hh.ru/magritte-internal-drop-base/scrollManager';\nimport type {\n    DropBaseProps,\n    DropBaseHorizontalPosition,\n    DropBaseVerticalPosition,\n    DropBaseHorizontalPositionWithoutCenter,\n    DropBaseVerticalPositionWithoutCenter,\n} from '@hh.ru/magritte-internal-drop-base/types';\nimport { useRenderParams } from '@hh.ru/magritte-internal-drop-base/useRenderParams';\n\nimport styles from './styles.less';\n\nconst EVENTS_TO_PREVENT_BUBBLING = [\n    'onClick',\n    'onContextMenu',\n    'onDoubleClick',\n    'onMouseDown',\n    'onMouseEnter',\n    'onMouseLeave',\n    'onMouseMove',\n    'onMouseOver',\n    'onMouseOut',\n    'onMouseUp',\n    'onKeyDown',\n    'onKeyPress',\n    'onKeyUp',\n    'onBlur',\n    'onChange',\n    'onFocus',\n    'onInput',\n    'onInvalid',\n    'onReset',\n    'onSelect',\n    'onSubmit',\n    'onDrag',\n    'onDragEnd',\n    'onDragEnter',\n    'onDragLeave',\n    'onDragOver',\n    'onDragStart',\n    'onDrop',\n    'onCopy',\n    'onCut',\n    'onPaste',\n    'onWheel',\n    'onTouchCancel',\n    'onTouchEnd',\n    'onTouchMove',\n    'onTouchStart',\n] as const;\n\ntype EventHandlersMap = Record<(typeof EVENTS_TO_PREVENT_BUBBLING)[number], ReactEventHandler>;\n\nconst bubblingCancelHandler: ReactEventHandler = (event) => event.stopPropagation();\n\nconst DropBaseComponent = <\n    T extends\n        | DropBaseHorizontalPosition\n        | DropBaseVerticalPosition\n        | DropBaseHorizontalPositionWithoutCenter\n        | DropBaseVerticalPositionWithoutCenter\n>(\n    {\n        visible,\n        children,\n        arrowGuardDistance,\n        activatorRef,\n        host,\n        alignment,\n        direction,\n        preferredViewport,\n        onClose,\n        autoFocusWhenOpened = false,\n        closeByClickOutside = true,\n        animationTimeout,\n        animationClassNames,\n        guardDistance = 8,\n        role,\n        occupyAllAvailableViewportHeight = false,\n        forcePosition = false,\n        widthEqualToActivator = false,\n        keyboardNavigationMode = null,\n        ignoreIntersections = false,\n        style = {},\n        onAppear,\n        onBeforeExit,\n        onAfterExit,\n        ...props\n    }: DropBaseProps<T>,\n    ref: ForwardedRef<HTMLElement>\n): ReactElement => {\n    const dropNodeRef = useRef<HTMLDivElement>(null);\n    const dropScrollableContainerRef = useRef(null);\n    const [renderPortal, setRenderPortal] = useState(false);\n    const isVisibleDropDown = !!(renderPortal && visible);\n    const [lockClickOutside, setLockClickOutside] = useState(true);\n\n    useWhenFontLoaded(() => setRenderPortal(true));\n\n    const { metrics, position } = useRenderParams({\n        alignment,\n        direction,\n        activatorRef,\n        dropElementRef: dropNodeRef,\n        host,\n        arrowGuardDistance,\n        preferredViewport,\n        visible: isVisibleDropDown,\n        guardDistance,\n        occupyAllAvailableViewportHeight,\n        dropScrollableContainerRef,\n        forcePosition,\n        widthEqualToActivator,\n    });\n\n    useScrollSubscription(activatorRef, dropNodeRef, isVisibleDropDown);\n    useIntersectionSubscription(activatorRef, isVisibleDropDown, ignoreIntersections, () => {\n        onClose?.();\n    });\n\n    const escapeToCloseRef = useEscapeToClose(onClose);\n    const keyboardNavigationRef = useKeyboardNavigation(\n        keyboardNavigationMode !== null\n            ? { enabled: isVisibleDropDown, mode: keyboardNavigationMode }\n            : { enabled: false }\n    );\n    const dropNodeRefCallback = useMultipleRefs(ref, dropNodeRef, keyboardNavigationRef, escapeToCloseRef);\n\n    useCloseByClickOutside(\n        dropNodeRef,\n        () => {\n            if (isVisibleDropDown && !lockClickOutside && activatorRef.current !== document.activeElement) {\n                onClose?.();\n            }\n        },\n        closeByClickOutside\n    );\n\n    const eventHandlers = EVENTS_TO_PREVENT_BUBBLING.reduce((result, eventName) => {\n        result[eventName] =\n            eventName in props\n                ? (event) => {\n                      (props as unknown as EventHandlersMap)[eventName](event);\n                      bubblingCancelHandler(event);\n                  }\n                : bubblingCancelHandler;\n        return result;\n    }, {} as EventHandlersMap);\n\n    useEffect(() => {\n        if (!isVisibleDropDown) {\n            setLockClickOutside(true);\n        }\n    }, [isVisibleDropDown, setLockClickOutside]);\n\n    useEffect(() => {\n        if (autoFocusWhenOpened && dropNodeRef.current !== null && isVisibleDropDown && !lockClickOutside) {\n            const nextFocusableElement = findNextFocusableElement(dropNodeRef.current, null, 'down', 'list');\n            if (nextFocusableElement !== null) {\n                nextFocusableElement.focus();\n            } else {\n                dropNodeRef.current.focus();\n            }\n        }\n    }, [autoFocusWhenOpened, isVisibleDropDown, lockClickOutside]);\n\n    return (\n        <>\n            {renderPortal &&\n                createPortal(\n                    <CSSTransition\n                        in={visible}\n                        onEntered={() => {\n                            setLockClickOutside(false);\n                            onAppear?.();\n                        }}\n                        onExited={onAfterExit}\n                        onExit={onBeforeExit}\n                        timeout={animationTimeout}\n                        classNames={animationClassNames}\n                        unmountOnExit\n                        nodeRef={dropNodeRef}\n                    >\n                        <div\n                            {...props}\n                            {...eventHandlers}\n                            data-qa=\"drop-base\"\n                            tabIndex={autoFocusWhenOpened ? 0 : -1}\n                            className={styles.dropBase}\n                            ref={dropNodeRefCallback}\n                            style={{\n                                ...style,\n                                top: `${metrics.top}px`,\n                                left: `${metrics.left}px`,\n                            }}\n                            role={role}\n                        >\n                            {children(position, {\n                                metrics,\n                                dropScrollableContainerRef,\n                            })}\n                        </div>\n                    </CSSTransition>,\n                    host?.current ?? document.body\n                )}\n        </>\n    );\n};\n\nconst DropBase = forwardRef(DropBaseComponent) as (<\n    T extends\n        | DropBaseHorizontalPosition\n        | DropBaseVerticalPosition\n        | DropBaseHorizontalPositionWithoutCenter\n        | DropBaseVerticalPositionWithoutCenter\n>(\n    props: DropBaseProps<T> & { ref?: ForwardedRef<HTMLElement> }\n) => ReactElement) & { displayName: string };\n\nDropBase.displayName = 'DropBase';\n\nexport { DropBase };\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,MAAM,0BAA0B,GAAG;IAC/B,SAAS;IACT,eAAe;IACf,eAAe;IACf,aAAa;IACb,cAAc;IACd,cAAc;IACd,aAAa;IACb,aAAa;IACb,YAAY;IACZ,WAAW;IACX,WAAW;IACX,YAAY;IACZ,SAAS;IACT,QAAQ;IACR,UAAU;IACV,SAAS;IACT,SAAS;IACT,WAAW;IACX,SAAS;IACT,UAAU;IACV,UAAU;IACV,QAAQ;IACR,WAAW;IACX,aAAa;IACb,aAAa;IACb,YAAY;IACZ,aAAa;IACb,QAAQ;IACR,QAAQ;IACR,OAAO;IACP,SAAS;IACT,SAAS;IACT,eAAe;IACf,YAAY;IACZ,aAAa;IACb,cAAc;CACR,CAAC;AAIX,MAAM,qBAAqB,GAAsB,CAAC,KAAK,KAAK,KAAK,CAAC,eAAe,EAAE,CAAC;AAEpF,MAAM,iBAAiB,GAAG,CAOtB,EACI,OAAO,EACP,QAAQ,EACR,kBAAkB,EAClB,YAAY,EACZ,IAAI,EACJ,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,OAAO,EACP,mBAAmB,GAAG,KAAK,EAC3B,mBAAmB,GAAG,IAAI,EAC1B,gBAAgB,EAChB,mBAAmB,EACnB,aAAa,GAAG,CAAC,EACjB,IAAI,EACJ,gCAAgC,GAAG,KAAK,EACxC,aAAa,GAAG,KAAK,EACrB,qBAAqB,GAAG,KAAK,EAC7B,sBAAsB,GAAG,IAAI,EAC7B,mBAAmB,GAAG,KAAK,EAC3B,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,GAAG,KAAK,EACO,EACnB,GAA8B,KAChB;AACd,IAAA,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AACjD,IAAA,MAAM,0BAA0B,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,iBAAiB,GAAG,CAAC,EAAE,YAAY,IAAI,OAAO,CAAC,CAAC;IACtD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE/D,iBAAiB,CAAC,MAAM,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC;AAE/C,IAAA,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,eAAe,CAAC;QAC1C,SAAS;QACT,SAAS;QACT,YAAY;AACZ,QAAA,cAAc,EAAE,WAAW;QAC3B,IAAI;QACJ,kBAAkB;QAClB,iBAAiB;AACjB,QAAA,OAAO,EAAE,iBAAiB;QAC1B,aAAa;QACb,gCAAgC;QAChC,0BAA0B;QAC1B,aAAa;QACb,qBAAqB;AACxB,KAAA,CAAC,CAAC;AAEH,IAAA,qBAAqB,CAAC,YAAY,EAAE,WAAW,EAAE,iBAAiB,CAAC,CAAC;IACpE,2BAA2B,CAAC,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAK;QACnF,OAAO,IAAI,CAAC;AAChB,KAAC,CAAC,CAAC;AAEH,IAAA,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;AACnD,IAAA,MAAM,qBAAqB,GAAG,qBAAqB,CAC/C,sBAAsB,KAAK,IAAI;UACzB,EAAE,OAAO,EAAE,iBAAiB,EAAE,IAAI,EAAE,sBAAsB,EAAE;AAC9D,UAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAC3B,CAAC;AACF,IAAA,MAAM,mBAAmB,GAAG,eAAe,CAAC,GAAG,EAAE,WAAW,EAAE,qBAAqB,EAAE,gBAAgB,CAAC,CAAC;AAEvG,IAAA,sBAAsB,CAClB,WAAW,EACX,MAAK;AACD,QAAA,IAAI,iBAAiB,IAAI,CAAC,gBAAgB,IAAI,YAAY,CAAC,OAAO,KAAK,QAAQ,CAAC,aAAa,EAAE;YAC3F,OAAO,IAAI,CAAC;AACf,SAAA;KACJ,EACD,mBAAmB,CACtB,CAAC;IAEF,MAAM,aAAa,GAAG,0BAA0B,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,SAAS,KAAI;QAC1E,MAAM,CAAC,SAAS,CAAC;AACb,YAAA,SAAS,IAAI,KAAK;AACd,kBAAE,CAAC,KAAK,KAAI;AACL,oBAAA,KAAqC,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC;oBACzD,qBAAqB,CAAC,KAAK,CAAC,CAAC;iBAChC;kBACD,qBAAqB,CAAC;AAChC,QAAA,OAAO,MAAM,CAAC;KACjB,EAAE,EAAsB,CAAC,CAAC;IAE3B,SAAS,CAAC,MAAK;QACX,IAAI,CAAC,iBAAiB,EAAE;YACpB,mBAAmB,CAAC,IAAI,CAAC,CAAC;AAC7B,SAAA;AACL,KAAC,EAAE,CAAC,iBAAiB,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAE7C,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,mBAAmB,IAAI,WAAW,CAAC,OAAO,KAAK,IAAI,IAAI,iBAAiB,IAAI,CAAC,gBAAgB,EAAE;AAC/F,YAAA,MAAM,oBAAoB,GAAG,wBAAwB,CAAC,WAAW,CAAC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;YACjG,IAAI,oBAAoB,KAAK,IAAI,EAAE;gBAC/B,oBAAoB,CAAC,KAAK,EAAE,CAAC;AAChC,aAAA;AAAM,iBAAA;AACH,gBAAA,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;AAC/B,aAAA;AACJ,SAAA;KACJ,EAAE,CAAC,mBAAmB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE/D,QACIA,0BACK,YAAY;YACT,YAAY,CACRA,GAAC,CAAA,aAAa,EACV,EAAA,EAAE,EAAE,OAAO,EACX,SAAS,EAAE,MAAK;oBACZ,mBAAmB,CAAC,KAAK,CAAC,CAAC;oBAC3B,QAAQ,IAAI,CAAC;iBAChB,EACD,QAAQ,EAAE,WAAW,EACrB,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,gBAAgB,EACzB,UAAU,EAAE,mBAAmB,EAC/B,aAAa,EAAA,IAAA,EACb,OAAO,EAAE,WAAW,EAAA,QAAA,EAEpBA,GACQ,CAAA,KAAA,EAAA,EAAA,GAAA,KAAK,EACL,GAAA,aAAa,aACT,WAAW,EACnB,QAAQ,EAAE,mBAAmB,GAAG,CAAC,GAAG,CAAC,CAAC,EACtC,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,GAAG,EAAE,mBAAmB,EACxB,KAAK,EAAE;AACH,wBAAA,GAAG,KAAK;AACR,wBAAA,GAAG,EAAE,CAAA,EAAG,OAAO,CAAC,GAAG,CAAI,EAAA,CAAA;AACvB,wBAAA,IAAI,EAAE,CAAA,EAAG,OAAO,CAAC,IAAI,CAAI,EAAA,CAAA;AAC5B,qBAAA,EACD,IAAI,EAAE,IAAI,YAET,QAAQ,CAAC,QAAQ,EAAE;wBAChB,OAAO;wBACP,0BAA0B;AAC7B,qBAAA,CAAC,EACA,CAAA,EAAA,CACM,EAChB,IAAI,EAAE,OAAO,IAAI,QAAQ,CAAC,IAAI,CACjC,EAAA,CACN,EACL;AACN,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,UAAU,CAAC,iBAAiB,EAQA;AAE7C,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"DropBase.js","sources":["../src/DropBase.tsx"],"sourcesContent":["import { ForwardedRef, ReactElement, forwardRef, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { findNextFocusableElement, useEscapeToClose, useKeyboardNavigation } from '@hh.ru/magritte-common-keyboard';\nimport { useCloseByClickOutside } from '@hh.ru/magritte-common-mouse';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useNoBubbling } from '@hh.ru/magritte-common-use-no-bubbling';\nimport { useWhenFontLoaded } from '@hh.ru/magritte-common-use-when-font-loaded';\nimport { useIntersectionSubscription } from '@hh.ru/magritte-internal-drop-base/intersectionManager';\nimport { useScrollSubscription } from '@hh.ru/magritte-internal-drop-base/scrollManager';\nimport type {\n    DropBaseProps,\n    DropBaseHorizontalPosition,\n    DropBaseVerticalPosition,\n    DropBaseHorizontalPositionWithoutCenter,\n    DropBaseVerticalPositionWithoutCenter,\n} from '@hh.ru/magritte-internal-drop-base/types';\nimport { useRenderParams } from '@hh.ru/magritte-internal-drop-base/useRenderParams';\n\nimport styles from './styles.less';\n\nconst DropBaseComponent = <\n    T extends\n        | DropBaseHorizontalPosition\n        | DropBaseVerticalPosition\n        | DropBaseHorizontalPositionWithoutCenter\n        | DropBaseVerticalPositionWithoutCenter\n>(\n    {\n        visible,\n        children,\n        arrowGuardDistance,\n        activatorRef,\n        host,\n        alignment,\n        direction,\n        preferredViewport,\n        onClose,\n        autoFocusWhenOpened = false,\n        closeByClickOutside = true,\n        animationTimeout,\n        animationClassNames,\n        guardDistance = 8,\n        role,\n        occupyAllAvailableViewportHeight = false,\n        forcePosition = false,\n        widthEqualToActivator = false,\n        keyboardNavigationMode = null,\n        ignoreIntersections = false,\n        style = {},\n        onAppear,\n        onBeforeExit,\n        onAfterExit,\n        ...props\n    }: DropBaseProps<T>,\n    ref: ForwardedRef<HTMLElement>\n): ReactElement => {\n    const dropNodeRef = useRef<HTMLDivElement>(null);\n    const dropScrollableContainerRef = useRef(null);\n    const [renderPortal, setRenderPortal] = useState(false);\n    const isVisibleDropDown = !!(renderPortal && visible);\n    const [lockClickOutside, setLockClickOutside] = useState(true);\n\n    useWhenFontLoaded(() => setRenderPortal(true));\n\n    const { metrics, position } = useRenderParams({\n        alignment,\n        direction,\n        activatorRef,\n        dropElementRef: dropNodeRef,\n        host,\n        arrowGuardDistance,\n        preferredViewport,\n        visible: isVisibleDropDown,\n        guardDistance,\n        occupyAllAvailableViewportHeight,\n        dropScrollableContainerRef,\n        forcePosition,\n        widthEqualToActivator,\n    });\n\n    useScrollSubscription(activatorRef, dropNodeRef, isVisibleDropDown);\n    useIntersectionSubscription(activatorRef, isVisibleDropDown, ignoreIntersections, () => {\n        onClose?.();\n    });\n\n    const escapeToCloseRef = useEscapeToClose(onClose);\n    const keyboardNavigationRef = useKeyboardNavigation(\n        keyboardNavigationMode !== null\n            ? { enabled: isVisibleDropDown, mode: keyboardNavigationMode }\n            : { enabled: false }\n    );\n    const dropNodeRefCallback = useMultipleRefs(ref, dropNodeRef, keyboardNavigationRef, escapeToCloseRef);\n\n    useCloseByClickOutside(\n        dropNodeRef,\n        () => {\n            if (isVisibleDropDown && !lockClickOutside && activatorRef.current !== document.activeElement) {\n                onClose?.();\n            }\n        },\n        closeByClickOutside\n    );\n\n    const eventHandlers = useNoBubbling(props);\n\n    useEffect(() => {\n        if (!isVisibleDropDown) {\n            setLockClickOutside(true);\n        }\n    }, [isVisibleDropDown, setLockClickOutside]);\n\n    useEffect(() => {\n        if (autoFocusWhenOpened && dropNodeRef.current !== null && isVisibleDropDown && !lockClickOutside) {\n            const nextFocusableElement = findNextFocusableElement(dropNodeRef.current, null, 'down', 'list');\n            if (nextFocusableElement !== null) {\n                nextFocusableElement.focus();\n            } else {\n                dropNodeRef.current.focus();\n            }\n        }\n    }, [autoFocusWhenOpened, isVisibleDropDown, lockClickOutside]);\n\n    return (\n        <>\n            {renderPortal &&\n                createPortal(\n                    <CSSTransition\n                        in={visible}\n                        onEntered={() => {\n                            setLockClickOutside(false);\n                            onAppear?.();\n                        }}\n                        onExited={onAfterExit}\n                        onExit={onBeforeExit}\n                        timeout={animationTimeout}\n                        classNames={animationClassNames}\n                        unmountOnExit\n                        nodeRef={dropNodeRef}\n                    >\n                        <div\n                            {...props}\n                            {...eventHandlers}\n                            data-qa=\"drop-base\"\n                            tabIndex={autoFocusWhenOpened ? 0 : -1}\n                            className={styles.dropBase}\n                            ref={dropNodeRefCallback}\n                            style={{\n                                ...style,\n                                top: `${metrics.top}px`,\n                                left: `${metrics.left}px`,\n                            }}\n                            role={role}\n                        >\n                            {children(position, {\n                                metrics,\n                                dropScrollableContainerRef,\n                            })}\n                        </div>\n                    </CSSTransition>,\n                    host?.current ?? document.body\n                )}\n        </>\n    );\n};\n\nconst DropBase = forwardRef(DropBaseComponent) as (<\n    T extends\n        | DropBaseHorizontalPosition\n        | DropBaseVerticalPosition\n        | DropBaseHorizontalPositionWithoutCenter\n        | DropBaseVerticalPositionWithoutCenter\n>(\n    props: DropBaseProps<T> & { ref?: ForwardedRef<HTMLElement> }\n) => ReactElement) & { displayName: string };\n\nDropBase.displayName = 'DropBase';\n\nexport { DropBase };\n"],"names":["_jsx"],"mappings":"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"}

package/calculateRect.d.ts

@@ -1,4 +1,4 @@
-import { BaseAlignPosition, CalculateRect, CalculateRectType, DropBaseHorizontalPosition, DropBaseVerticalPosition } from './types';
+import { BaseAlignPosition, CalculateRect, CalculateRectType, DropBaseHorizontalPosition, DropBaseVerticalPosition } from '@hh.ru/magritte-internal-drop-base/types';
 export declare const VIEWPORT_GUARD_DISTANCE = 16;
 /**
  * API для расчета метрик дропдауна и viewport | контейнера в котором

package/index.css

@@ -1,4 +1,4 @@
-.magritte-drop-base___uJNG4_6-0-1{
+.magritte-drop-base___uJNG4_6-0-3{
   position:absolute;
   outline:none;
 }

package/index.d.ts

@@ -1,3 +1,3 @@
-export * from './DropBase';
-export type { DropBaseProps, ArrowGuardDistance, DropBasePermanentProps, DropBaseHorizontalPosition, DropBaseVerticalPosition, DropBaseHorizontalPositionWithoutCenter, DropBaseVerticalPositionWithoutCenter, } from './types';
-export { INITIAL_HEIGHT_VALUE } from './useRenderParams';
+export * from '@hh.ru/magritte-internal-drop-base/DropBase';
+export type { DropBaseProps, ArrowGuardDistance, DropBasePermanentProps, DropBaseHorizontalPosition, DropBaseVerticalPosition, DropBaseHorizontalPositionWithoutCenter, DropBaseVerticalPositionWithoutCenter, } from '@hh.ru/magritte-internal-drop-base/types';
+export { INITIAL_HEIGHT_VALUE } from '@hh.ru/magritte-internal-drop-base/useRenderParams';

package/index.js

@@ -8,6 +8,7 @@ import 'react-transition-group';
 import '@hh.ru/magritte-common-keyboard';
 import '@hh.ru/magritte-common-mouse';
 import '@hh.ru/magritte-common-use-multiple-refs';
+import '@hh.ru/magritte-common-use-no-bubbling';
 import '@hh.ru/magritte-common-use-when-font-loaded';
 import './intersectionManager.js';
 import './scrollManager.js';

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-internal-drop-base",
-  "version": "6.0.1",
+  "version": "6.0.3",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -16,15 +16,17 @@
     "eslint-test": "yarn root:eslint-test $(pwd)",
     "ts-config": "yarn root:ts-config $(pwd)",
     "ts-check": "yarn root:ts-check $(pwd)",
-    "test": "yarn root:test $(pwd)"
+    "test": "yarn root:test $(pwd)",
+    "watch": "yarn root:watch $(pwd)"
   },
   "dependencies": {
-    "@hh.ru/magritte-common-func-utils": "1.3.6",
-    "@hh.ru/magritte-common-keyboard": "4.0.0",
-    "@hh.ru/magritte-common-metrics": "2.0.2",
-    "@hh.ru/magritte-common-mouse": "1.1.9",
-    "@hh.ru/magritte-common-use-multiple-refs": "1.1.2",
-    "@hh.ru/magritte-common-use-when-font-loaded": "1.0.4"
+    "@hh.ru/magritte-common-func-utils": "1.3.7",
+    "@hh.ru/magritte-common-keyboard": "4.0.1",
+    "@hh.ru/magritte-common-metrics": "2.0.3",
+    "@hh.ru/magritte-common-mouse": "1.1.10",
+    "@hh.ru/magritte-common-use-multiple-refs": "1.1.4",
+    "@hh.ru/magritte-common-use-no-bubbling": "1.0.1",
+    "@hh.ru/magritte-common-use-when-font-loaded": "1.0.5"
   },
   "peerDependencies": {
     "react": ">=18.2.0",
@@ -34,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4480faadc19af08673481a84a62f77d081e9be2e"
-}
+  "gitHead": "c97e0bd946a456f07010b6db9fe4b1afca93c44c"
+}

package/useRenderParams.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import type { ActivatorOffset, DropBaseProps, DropMetrics, CustomVisualViewport, ArrowGuardDistance, DOMRectLike, DropBaseHorizontalPosition, DropBaseVerticalPosition, DropBaseHorizontalPositionWithoutCenter, DropBaseVerticalPositionWithoutCenter, Metrics } from './types';
+import type { ActivatorOffset, DropBaseProps, DropMetrics, CustomVisualViewport, ArrowGuardDistance, DOMRectLike, DropBaseHorizontalPosition, DropBaseVerticalPosition, DropBaseHorizontalPositionWithoutCenter, DropBaseVerticalPositionWithoutCenter, Metrics } from '@hh.ru/magritte-internal-drop-base/types';
 export declare const allowedAlignmentForVerticalDirection: readonly ["left", "right", "center"];
 export declare const allowedAlignmentForHorizontalDirection: readonly ["top", "bottom", "center"];
 export declare const allowedAlignmentForVerticalDirectionWithoutCenter: readonly ["left", "right"];