@hh.ru/magritte-internal-drop-base 5.0.4

package/DropBase.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement, ForwardedRef } 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 & {
+    ref?: ForwardedRef<HTMLElement> | undefined;
+}) => ReactElement) & {
+    displayName: string;
+};
+export { DropBase };

package/DropBase.js

@@ -0,0 +1,124 @@
+import './index.css';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { CSSTransition } from 'react-transition-group';
+import { useEscapeToClose, useArrowNavigation } 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 { useWhenFontLoaded } from '@hh.ru/magritte-common-use-when-font-loaded';
+import { useIntersectionSubscription } from './intersectionManager.js';
+import { useScrollSubscription } from './scrollManager.js';
+import { useRenderParams } from './useRenderParams.js';
+import '@hh.ru/magritte-common-func-utils';
+import '@hh.ru/magritte-common-metrics';
+import './calculateRect.js';
+
+var styles = {"drop-base":"magritte-drop-base___uJNG4_5-0-4","dropBase":"magritte-drop-base___uJNG4_5-0-4"};
+
+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 preventBubblingProps = EVENTS_TO_PREVENT_BUBBLING.reduce((result, eventName) => {
+    result[eventName] = bubblingCancelHandler;
+    return result;
+}, {});
+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, arrowNavigation = false, ignoreIntersections = false, style = {}, ...props }, ref) => {
+    const dropNodeRef = useRef(null);
+    const dropScrollableContainerRef = useRef(null);
+    const [renderPortal, setRenderPortal] = useState(false);
+    const isVisibleDropDown = !!(renderPortal && visible);
+    const [lockClickOutside, setLockClickOutside] = useState(true);
+    useWhenFontLoaded(() => setRenderPortal(true));
+    const { metrics, position } = useRenderParams({
+        alignment,
+        direction,
+        activatorRef,
+        dropElementRef: dropNodeRef,
+        host,
+        arrowGuardDistance,
+        preferredViewport,
+        visible: isVisibleDropDown,
+        guardDistance,
+        occupyAllAvailableViewportHeight,
+        dropScrollableContainerRef,
+        forcePosition,
+        widthEqualToActivator,
+    });
+    useScrollSubscription(activatorRef, dropNodeRef, isVisibleDropDown);
+    useIntersectionSubscription(activatorRef, isVisibleDropDown, ignoreIntersections, () => {
+        onClose?.();
+    });
+    const escapeToCloseRef = useEscapeToClose(onClose);
+    const arrowNavigationRef = useArrowNavigation({
+        enabled: isVisibleDropDown && arrowNavigation,
+    });
+    const dropNodeRefCallback = useMultipleRefs(ref, dropNodeRef, arrowNavigationRef, escapeToCloseRef);
+    useCloseByClickOutside(dropNodeRef, () => {
+        if (isVisibleDropDown && !lockClickOutside && activatorRef.current !== document.activeElement) {
+            onClose?.();
+        }
+    }, closeByClickOutside);
+    useEffect(() => {
+        if (!isVisibleDropDown) {
+            setLockClickOutside(true);
+        }
+    }, [isVisibleDropDown, setLockClickOutside]);
+    useEffect(() => {
+        if (autoFocusWhenOpened && isVisibleDropDown && !lockClickOutside) {
+            dropNodeRef.current?.focus();
+        }
+    }, [autoFocusWhenOpened, isVisibleDropDown, lockClickOutside]);
+    return (jsx(Fragment, { children: renderPortal &&
+            createPortal(jsx(CSSTransition, { in: visible, onEntered: () => {
+                    setLockClickOutside(false);
+                }, timeout: animationTimeout, classNames: animationClassNames, unmountOnExit: true, nodeRef: dropNodeRef, children: jsx("div", { ...props, ...preventBubblingProps, "data-qa": "drop-base", tabIndex: autoFocusWhenOpened ? 0 : -1, className: styles.dropBase, ref: dropNodeRefCallback, style: {
+                        ...style,
+                        top: `${metrics.top}px`,
+                        left: `${metrics.left}px`,
+                    }, role: role, children: children(position, {
+                        metrics,
+                        dropScrollableContainerRef,
+                    }) }) }), host?.current ?? document.body) }));
+};
+const DropBase = forwardRef(DropBaseComponent);
+DropBase.displayName = 'DropBase';
+
+export { DropBase };
+//# sourceMappingURL=DropBase.js.map

package/DropBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropBase.js","sources":["../src/DropBase.tsx"],"sourcesContent":["import { useEffect, ReactElement, useRef, useState, forwardRef, ForwardedRef, ReactEventHandler } from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { useEscapeToClose, useArrowNavigation } 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\nconst bubblingCancelHandler: ReactEventHandler = (event) => event.stopPropagation();\nconst preventBubblingProps = EVENTS_TO_PREVENT_BUBBLING.reduce((result, eventName) => {\n    result[eventName] = bubblingCancelHandler;\n    return result;\n}, {} as Record<(typeof EVENTS_TO_PREVENT_BUBBLING)[number], ReactEventHandler>);\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        arrowNavigation = false,\n        ignoreIntersections = false,\n        style = {},\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 arrowNavigationRef = useArrowNavigation({\n        enabled: isVisibleDropDown && arrowNavigation,\n    });\n    const dropNodeRefCallback = useMultipleRefs(ref, dropNodeRef, arrowNavigationRef, escapeToCloseRef);\n\n    useCloseByClickOutside(\n        dropNodeRef,\n        () => {\n            if (isVisibleDropDown && !lockClickOutside && activatorRef.current !== document.activeElement) {\n                onClose?.();\n            }\n        },\n        closeByClickOutside\n    );\n\n    useEffect(() => {\n        if (!isVisibleDropDown) {\n            setLockClickOutside(true);\n        }\n    }, [isVisibleDropDown, setLockClickOutside]);\n\n    useEffect(() => {\n        if (autoFocusWhenOpened && isVisibleDropDown && !lockClickOutside) {\n            dropNodeRef.current?.focus();\n        }\n    }, [autoFocusWhenOpened, isVisibleDropDown, lockClickOutside]);\n\n    return (\n        <>\n            {renderPortal &&\n                createPortal(\n                    <CSSTransition\n                        in={visible}\n                        onEntered={() => {\n                            setLockClickOutside(false);\n                        }}\n                        timeout={animationTimeout}\n                        classNames={animationClassNames}\n                        unmountOnExit\n                        nodeRef={dropNodeRef}\n                    >\n                        <div\n                            {...props}\n                            {...preventBubblingProps}\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

@@ -0,0 +1,18 @@
+import { BaseAlignPosition, CalculateRect, CalculateRectType, DropBaseHorizontalPosition, DropBaseVerticalPosition } from './types';
+export declare const VIEWPORT_GUARD_DISTANCE = 16;
+/**
+ * API для расчета метрик дропдауна и viewport | контейнера в котором
+ * хотим рисовать дропдаун. Cчитает метрики в случае - когда direction = VerticalPosition.
+ * Т.е. дропдаун показываем снизу или сверху активатора.
+ * Предоставляем три публичных метода для расположения относительно края активатора:
+ * left - выравнивание по левому краю
+ * right - выравнивание по правому краю
+ * center - выравнивание по центру
+ * */
+export declare const calculateRectForVerticalPosition: {
+    left: CalculateRect<DropBaseVerticalPosition['direction']>;
+    right: CalculateRect<DropBaseVerticalPosition['direction']>;
+    center: CalculateRect<DropBaseVerticalPosition['direction']>;
+    _baseAlign: BaseAlignPosition<DropBaseVerticalPosition['direction']>;
+};
+export declare const calculateRect: CalculateRectType<DropBaseHorizontalPosition> & CalculateRectType<DropBaseVerticalPosition>;

package/calculateRect.js

@@ -0,0 +1,319 @@
+import './index.css';
+const VIEWPORT_GUARD_DISTANCE = 16;
+const getPointToCenterActivator = ({ point, offsetPoint, contentSize, activatorSize, }) => point + offsetPoint - contentSize / 2 + activatorSize / 2;
+/* Позволяет получить метрики drop, позицию относительно viewport
+ * для случая, когда дроп может занять всю доступную высоту viewport
+ * */
+const calculateDropHeightAvailableViewport = {
+    top: ({ leftPositionForDrop, topPositionForViewport, preferredViewportMetrics, topPositionForDrop, dropMetrics, }) => {
+        const top = -(topPositionForViewport - preferredViewportMetrics.pageTop - topPositionForDrop) + VIEWPORT_GUARD_DISTANCE;
+        const _height = topPositionForViewport + dropMetrics.height - preferredViewportMetrics.pageTop - VIEWPORT_GUARD_DISTANCE;
+        const height = _height < dropMetrics.height ? dropMetrics.height : _height;
+        const _topPositionForViewport = topPositionForViewport + dropMetrics.height - height;
+        return {
+            top,
+            height,
+            left: leftPositionForDrop,
+            topPositionForViewport: _topPositionForViewport,
+        };
+    },
+    bottom: ({ leftPositionForDrop, topPositionForViewport, preferredViewportMetrics, topPositionForDrop, dropMetrics, }) => {
+        const _height = preferredViewportMetrics.height +
+            preferredViewportMetrics.pageTop -
+            topPositionForViewport -
+            VIEWPORT_GUARD_DISTANCE;
+        const height = _height < dropMetrics.height ? dropMetrics.height : _height;
+        return {
+            top: topPositionForDrop,
+            left: leftPositionForDrop,
+            height,
+            topPositionForViewport,
+        };
+    },
+};
+/**
+ * Позволяет получить метрику top или left дропдауна и viewport или
+ * контейнера в котором хотим рисовать дропдаун. Считать нужно
+ * для top или left в зависимости от того противоположна ли метрика
+ * к direction. Т.е мы считает метрику top только
+ * для горизонтального направления, a left для вертикального
+ * */
+const getEdgeOppositeDirection = ({ activatorPosition, viewportShift, activatorOffset, shift, isNegativeArrowShift, arrowGuardDistance, activatorSize, }) => {
+    let shiftArrow = 0;
+    if (arrowGuardDistance && activatorSize / 2 < arrowGuardDistance) {
+        shiftArrow = arrowGuardDistance - activatorSize / 2;
+    }
+    if (isNegativeArrowShift) {
+        shiftArrow = -shiftArrow;
+    }
+    const positionForDrop = shift + activatorOffset + shiftArrow;
+    const positionForViewport = shift + activatorPosition + viewportShift + shiftArrow;
+    return [positionForDrop, positionForViewport];
+};
+/**
+ * Позволяет получить метрику top или left дропдауна и viewport
+ * или контейнера в котором хотим рисовать дропдаун. Считать нужно для top
+ * или left в зависимости от того совпдает ли метрика с direction.
+ * Т.е мы считает метрику top только для вертикального направления, a left
+ * для горизонтального направления
+ * */
+const getEageCoincidingWithDirection = ({ activatorPosition, activatorSize, dropSize, viewportShift, isNegativePosition, activatorOffset, guardDistance, }) => {
+    let positionForViewport = 0;
+    let positionForDrop = 0;
+    if (isNegativePosition) {
+        positionForDrop = activatorOffset - guardDistance - dropSize;
+        positionForViewport = activatorPosition + viewportShift - guardDistance - dropSize;
+    }
+    else {
+        positionForDrop = activatorOffset + activatorSize + guardDistance;
+        positionForViewport = activatorPosition + viewportShift + activatorSize + guardDistance;
+    }
+    return [positionForDrop, positionForViewport];
+};
+/**
+ * API для расчета метрик дропдауна и viewport | контейнера в котором
+ * хотим рисовать дропдаун. Cчитает метрики в случае
+ * когда position = Horizontal.
+ * Т.е. дропдаун показываем cлева или справа от активатора.
+ * Предоставляем три публичных метода для расположения относительно края активатора:
+ * top - выравнивание по верхнему краю
+ * bottom - выравнивание по нижнему краю
+ * center - выравнивание по центру
+ * */
+const calculateRectForHorizontalPosition = {
+    top({ activatorMetrics, dropMetrics, viewportMetrics, preferredViewportMetrics, direction, activatorOffset, guardDistance, arrowGuardDistance, occupyAllAvailableViewportHeight, }) {
+        const result = this._baseAlign({
+            activatorMetrics,
+            dropMetrics,
+            viewportMetrics,
+            direction,
+            isNegativeArrowShift: true,
+            activatorOffset,
+            shift: 0,
+            arrowGuardDistance,
+            guardDistance,
+            preferredViewportMetrics,
+        });
+        if (occupyAllAvailableViewportHeight) {
+            const metrics = calculateDropHeightAvailableViewport.bottom({
+                preferredViewportMetrics,
+                topPositionForViewport: result.top,
+                topPositionForDrop: result.dropMetrics.top,
+                leftPositionForDrop: result.dropMetrics.left,
+                dropMetrics,
+            });
+            return {
+                ...result,
+                top: metrics.topPositionForViewport,
+                bottom: metrics.topPositionForViewport + metrics.height,
+                dropMetrics: {
+                    top: metrics.top,
+                    left: metrics.left,
+                    height: metrics.height,
+                },
+            };
+        }
+        return result;
+    },
+    bottom({ activatorMetrics, dropMetrics, viewportMetrics, direction, activatorOffset, guardDistance, arrowGuardDistance, occupyAllAvailableViewportHeight, preferredViewportMetrics, }) {
+        const shift = dropMetrics.height - activatorMetrics.height;
+        const result = this._baseAlign({
+            activatorMetrics,
+            dropMetrics,
+            viewportMetrics,
+            direction,
+            activatorOffset,
+            shift: -shift,
+            arrowGuardDistance,
+            guardDistance,
+            preferredViewportMetrics,
+        });
+        if (occupyAllAvailableViewportHeight) {
+            const metrics = calculateDropHeightAvailableViewport.top({
+                preferredViewportMetrics,
+                topPositionForViewport: result.top,
+                topPositionForDrop: result.dropMetrics.top,
+                leftPositionForDrop: result.dropMetrics.left,
+                dropMetrics,
+            });
+            return {
+                top: metrics.topPositionForViewport,
+                left: result.left,
+                bottom: activatorMetrics.bottom,
+                right: result.right,
+                viewportMetrics,
+                dropMetrics: {
+                    top: metrics.top,
+                    left: metrics.left,
+                    height: metrics.height,
+                },
+            };
+        }
+        return result;
+    },
+    center({ activatorMetrics, dropMetrics, viewportMetrics, direction, activatorOffset, guardDistance, preferredViewportMetrics, }) {
+        const pointToCenterActivator = getPointToCenterActivator({
+            point: 0,
+            offsetPoint: 0,
+            contentSize: dropMetrics.height,
+            activatorSize: activatorMetrics.height,
+        });
+        return this._baseAlign({
+            activatorMetrics,
+            dropMetrics,
+            viewportMetrics,
+            direction,
+            activatorOffset,
+            shift: pointToCenterActivator,
+            guardDistance,
+            preferredViewportMetrics,
+        });
+    },
+    _baseAlign({ activatorMetrics, dropMetrics, viewportMetrics, direction, activatorOffset, shift, arrowGuardDistance, isNegativeArrowShift = false, guardDistance, }) {
+        const [leftPositionForDrop, leftPositionForViewport] = getEageCoincidingWithDirection({
+            activatorPosition: activatorMetrics.left,
+            activatorSize: activatorMetrics.width,
+            dropSize: dropMetrics.width,
+            viewportShift: viewportMetrics.pageLeft,
+            isNegativePosition: direction === 'left',
+            activatorOffset: activatorOffset.offsetLeft,
+            guardDistance,
+        });
+        const [topPositionForDrop, topPositionForViewport] = getEdgeOppositeDirection({
+            activatorPosition: activatorMetrics.top,
+            viewportShift: viewportMetrics.pageTop,
+            activatorOffset: activatorOffset.offsetTop,
+            isNegativeArrowShift,
+            shift,
+            arrowGuardDistance,
+            activatorSize: activatorMetrics.height,
+        });
+        return {
+            top: topPositionForViewport,
+            left: leftPositionForViewport,
+            bottom: topPositionForViewport + dropMetrics.height,
+            right: leftPositionForViewport + dropMetrics.width,
+            dropMetrics: {
+                top: topPositionForDrop,
+                left: leftPositionForDrop,
+                height: 'auto',
+            },
+            viewportMetrics,
+        };
+    },
+};
+/**
+ * API для расчета метрик дропдауна и viewport | контейнера в котором
+ * хотим рисовать дропдаун. Cчитает метрики в случае - когда direction = VerticalPosition.
+ * Т.е. дропдаун показываем снизу или сверху активатора.
+ * Предоставляем три публичных метода для расположения относительно края активатора:
+ * left - выравнивание по левому краю
+ * right - выравнивание по правому краю
+ * center - выравнивание по центру
+ * */
+const calculateRectForVerticalPosition = {
+    left({ activatorMetrics, dropMetrics, viewportMetrics, direction, activatorOffset, guardDistance, arrowGuardDistance, occupyAllAvailableViewportHeight, preferredViewportMetrics, }) {
+        return this._baseAlign({
+            activatorMetrics,
+            dropMetrics,
+            viewportMetrics,
+            direction,
+            activatorOffset,
+            shift: 0,
+            isNegativeArrowShift: true,
+            guardDistance,
+            arrowGuardDistance,
+            occupyAllAvailableViewportHeight,
+            preferredViewportMetrics,
+        });
+    },
+    right({ activatorMetrics, dropMetrics, viewportMetrics, direction, activatorOffset, guardDistance, arrowGuardDistance, occupyAllAvailableViewportHeight, preferredViewportMetrics, }) {
+        return this._baseAlign({
+            activatorMetrics,
+            dropMetrics,
+            viewportMetrics,
+            direction,
+            activatorOffset,
+            shift: -(dropMetrics.width - activatorMetrics.width),
+            arrowGuardDistance,
+            guardDistance,
+            occupyAllAvailableViewportHeight,
+            preferredViewportMetrics,
+        });
+    },
+    center({ activatorMetrics, dropMetrics, viewportMetrics, direction, activatorOffset, guardDistance, occupyAllAvailableViewportHeight, preferredViewportMetrics, }) {
+        const pointToCenterActivator = getPointToCenterActivator({
+            point: 0,
+            offsetPoint: 0,
+            contentSize: dropMetrics.width,
+            activatorSize: activatorMetrics.width,
+        });
+        return this._baseAlign({
+            activatorMetrics,
+            dropMetrics,
+            viewportMetrics,
+            direction,
+            activatorOffset,
+            shift: pointToCenterActivator,
+            guardDistance,
+            occupyAllAvailableViewportHeight,
+            preferredViewportMetrics,
+        });
+    },
+    _baseAlign({ activatorMetrics, dropMetrics, viewportMetrics, direction, activatorOffset, shift, arrowGuardDistance, isNegativeArrowShift = false, guardDistance, occupyAllAvailableViewportHeight, preferredViewportMetrics, }) {
+        const [topPositionForDrop, topPositionForViewport] = getEageCoincidingWithDirection({
+            activatorPosition: activatorMetrics.top,
+            activatorSize: activatorMetrics.height,
+            dropSize: dropMetrics.height,
+            viewportShift: viewportMetrics.pageTop,
+            isNegativePosition: direction !== 'bottom',
+            activatorOffset: activatorOffset.offsetTop,
+            guardDistance,
+        });
+        const [leftPositionForDrop, leftPositionForViewport] = getEdgeOppositeDirection({
+            activatorPosition: activatorMetrics.left,
+            viewportShift: viewportMetrics.pageLeft,
+            activatorOffset: activatorOffset.offsetLeft,
+            shift,
+            isNegativeArrowShift,
+            arrowGuardDistance,
+            activatorSize: activatorMetrics.width,
+        });
+        let metrics = {
+            topPositionForViewport,
+            top: topPositionForDrop,
+            left: leftPositionForDrop,
+            height: 0,
+        };
+        if (occupyAllAvailableViewportHeight) {
+            metrics = calculateDropHeightAvailableViewport[direction]({
+                topPositionForViewport,
+                preferredViewportMetrics,
+                topPositionForDrop,
+                dropMetrics,
+                leftPositionForDrop,
+            });
+        }
+        return {
+            top: metrics.topPositionForViewport,
+            left: leftPositionForViewport,
+            bottom: metrics.topPositionForViewport + (metrics.height !== 0 ? metrics.height : dropMetrics.height),
+            right: leftPositionForViewport + dropMetrics.width,
+            dropMetrics: {
+                top: metrics.top,
+                left: metrics.left,
+                height: metrics.height !== 0 ? metrics.height : 'auto',
+            },
+            viewportMetrics,
+        };
+    },
+};
+const calculateRect = {
+    left: calculateRectForHorizontalPosition,
+    right: calculateRectForHorizontalPosition,
+    top: calculateRectForVerticalPosition,
+    bottom: calculateRectForVerticalPosition,
+};
+
+export { VIEWPORT_GUARD_DISTANCE, calculateRect, calculateRectForVerticalPosition };
+//# sourceMappingURL=calculateRect.js.map

package/calculateRect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calculateRect.js","sources":["../src/calculateRect.ts"],"sourcesContent":["import {\n    BaseAlignPosition,\n    GetEageCoincidingWithDirectionArgs,\n    GetEdgeOppositeDirectionArgs,\n    GetPointToCenterActivator,\n    CalculateRect,\n    CalculateRectType,\n    CalculateDropHeightAvailableViewportArgs,\n    CalculateDropHeightAvailableViewportResult,\n    DropBaseHorizontalPosition,\n    DropBaseVerticalPosition,\n} from '@hh.ru/magritte-internal-drop-base/types';\n\nexport const VIEWPORT_GUARD_DISTANCE = 16;\n\nconst getPointToCenterActivator = ({\n    point,\n    offsetPoint,\n    contentSize,\n    activatorSize,\n}: GetPointToCenterActivator): number => point + offsetPoint - contentSize / 2 + activatorSize / 2;\n\n/* Позволяет получить метрики drop, позицию относительно viewport\n * для случая, когда дроп может занять всю доступную высоту viewport\n * */\nconst calculateDropHeightAvailableViewport: {\n    top: CalculateDropHeightAvailableViewportArgs;\n    bottom: CalculateDropHeightAvailableViewportArgs;\n} = {\n    top: ({\n        leftPositionForDrop,\n        topPositionForViewport,\n        preferredViewportMetrics,\n        topPositionForDrop,\n        dropMetrics,\n    }) => {\n        const top =\n            -(topPositionForViewport - preferredViewportMetrics.pageTop - topPositionForDrop) + VIEWPORT_GUARD_DISTANCE;\n        const _height =\n            topPositionForViewport + dropMetrics.height - preferredViewportMetrics.pageTop - VIEWPORT_GUARD_DISTANCE;\n        const height = _height < dropMetrics.height ? dropMetrics.height : _height;\n        const _topPositionForViewport = topPositionForViewport + dropMetrics.height - height;\n\n        return {\n            top,\n            height,\n            left: leftPositionForDrop,\n            topPositionForViewport: _topPositionForViewport,\n        };\n    },\n\n    bottom: ({\n        leftPositionForDrop,\n        topPositionForViewport,\n        preferredViewportMetrics,\n        topPositionForDrop,\n        dropMetrics,\n    }) => {\n        const _height =\n            preferredViewportMetrics.height +\n            preferredViewportMetrics.pageTop -\n            topPositionForViewport -\n            VIEWPORT_GUARD_DISTANCE;\n        const height = _height < dropMetrics.height ? dropMetrics.height : _height;\n\n        return {\n            top: topPositionForDrop,\n            left: leftPositionForDrop,\n            height,\n            topPositionForViewport,\n        };\n    },\n};\n\n/**\n * Позволяет получить метрику top или left дропдауна и viewport или\n * контейнера в котором хотим рисовать дропдаун. Считать нужно\n * для top или left в зависимости от того противоположна ли метрика\n * к direction. Т.е мы считает метрику top только\n * для горизонтального направления, a left для вертикального\n * */\nconst getEdgeOppositeDirection = ({\n    activatorPosition,\n    viewportShift,\n    activatorOffset,\n    shift,\n    isNegativeArrowShift,\n    arrowGuardDistance,\n    activatorSize,\n}: GetEdgeOppositeDirectionArgs): [number, number] => {\n    let shiftArrow = 0;\n\n    if (arrowGuardDistance && activatorSize / 2 < arrowGuardDistance) {\n        shiftArrow = arrowGuardDistance - activatorSize / 2;\n    }\n\n    if (isNegativeArrowShift) {\n        shiftArrow = -shiftArrow;\n    }\n\n    const positionForDrop = shift + activatorOffset + shiftArrow;\n    const positionForViewport = shift + activatorPosition + viewportShift + shiftArrow;\n\n    return [positionForDrop, positionForViewport];\n};\n\n/**\n * Позволяет получить метрику top или left дропдауна и viewport\n * или контейнера в котором хотим рисовать дропдаун. Считать нужно для top\n * или left в зависимости от того совпдает ли метрика с direction.\n * Т.е мы считает метрику top только для вертикального направления, a left\n * для горизонтального направления\n * */\nconst getEageCoincidingWithDirection = ({\n    activatorPosition,\n    activatorSize,\n    dropSize,\n    viewportShift,\n    isNegativePosition,\n    activatorOffset,\n    guardDistance,\n}: GetEageCoincidingWithDirectionArgs): [number, number] => {\n    let positionForViewport = 0;\n    let positionForDrop = 0;\n\n    if (isNegativePosition) {\n        positionForDrop = activatorOffset - guardDistance - dropSize;\n        positionForViewport = activatorPosition + viewportShift - guardDistance - dropSize;\n    } else {\n        positionForDrop = activatorOffset + activatorSize + guardDistance;\n        positionForViewport = activatorPosition + viewportShift + activatorSize + guardDistance;\n    }\n\n    return [positionForDrop, positionForViewport];\n};\n\n/**\n * API для расчета метрик дропдауна и viewport | контейнера в котором\n * хотим рисовать дропдаун. Cчитает метрики в случае\n * когда position = Horizontal.\n * Т.е. дропдаун показываем cлева или справа от активатора.\n * Предоставляем три публичных метода для расположения относительно края активатора:\n * top - выравнивание по верхнему краю\n * bottom - выравнивание по нижнему краю\n * center - выравнивание по центру\n * */\nconst calculateRectForHorizontalPosition: {\n    top: CalculateRect<DropBaseHorizontalPosition['direction']>;\n    bottom: CalculateRect<DropBaseHorizontalPosition['direction']>;\n    center: CalculateRect<DropBaseHorizontalPosition['direction']>;\n    _baseAlign: BaseAlignPosition<DropBaseHorizontalPosition['direction']>;\n} = {\n    top({\n        activatorMetrics,\n        dropMetrics,\n        viewportMetrics,\n        preferredViewportMetrics,\n        direction,\n        activatorOffset,\n        guardDistance,\n        arrowGuardDistance,\n        occupyAllAvailableViewportHeight,\n    }) {\n        const result = this._baseAlign({\n            activatorMetrics,\n            dropMetrics,\n            viewportMetrics,\n            direction,\n            isNegativeArrowShift: true,\n            activatorOffset,\n            shift: 0,\n            arrowGuardDistance,\n            guardDistance,\n            preferredViewportMetrics,\n        });\n\n        if (occupyAllAvailableViewportHeight) {\n            const metrics = calculateDropHeightAvailableViewport.bottom({\n                preferredViewportMetrics,\n                topPositionForViewport: result.top,\n                topPositionForDrop: result.dropMetrics.top,\n                leftPositionForDrop: result.dropMetrics.left,\n                dropMetrics,\n            });\n\n            return {\n                ...result,\n                top: metrics.topPositionForViewport,\n                bottom: metrics.topPositionForViewport + metrics.height,\n                dropMetrics: {\n                    top: metrics.top,\n                    left: metrics.left,\n                    height: metrics.height,\n                },\n            };\n        }\n\n        return result;\n    },\n    bottom({\n        activatorMetrics,\n        dropMetrics,\n        viewportMetrics,\n        direction,\n        activatorOffset,\n        guardDistance,\n        arrowGuardDistance,\n        occupyAllAvailableViewportHeight,\n        preferredViewportMetrics,\n    }) {\n        const shift = dropMetrics.height - activatorMetrics.height;\n        const result = this._baseAlign({\n            activatorMetrics,\n            dropMetrics,\n            viewportMetrics,\n            direction,\n            activatorOffset,\n            shift: -shift,\n            arrowGuardDistance,\n            guardDistance,\n            preferredViewportMetrics,\n        });\n\n        if (occupyAllAvailableViewportHeight) {\n            const metrics = calculateDropHeightAvailableViewport.top({\n                preferredViewportMetrics,\n                topPositionForViewport: result.top,\n                topPositionForDrop: result.dropMetrics.top,\n                leftPositionForDrop: result.dropMetrics.left,\n                dropMetrics,\n            });\n\n            return {\n                top: metrics.topPositionForViewport,\n                left: result.left,\n                bottom: activatorMetrics.bottom,\n                right: result.right,\n                viewportMetrics,\n                dropMetrics: {\n                    top: metrics.top,\n                    left: metrics.left,\n                    height: metrics.height,\n                },\n            };\n        }\n\n        return result;\n    },\n    center({\n        activatorMetrics,\n        dropMetrics,\n        viewportMetrics,\n        direction,\n        activatorOffset,\n        guardDistance,\n        preferredViewportMetrics,\n    }) {\n        const pointToCenterActivator = getPointToCenterActivator({\n            point: 0,\n            offsetPoint: 0,\n            contentSize: dropMetrics.height,\n            activatorSize: activatorMetrics.height,\n        });\n\n        return this._baseAlign({\n            activatorMetrics,\n            dropMetrics,\n            viewportMetrics,\n            direction,\n            activatorOffset,\n            shift: pointToCenterActivator,\n            guardDistance,\n            preferredViewportMetrics,\n        });\n    },\n    _baseAlign({\n        activatorMetrics,\n        dropMetrics,\n        viewportMetrics,\n        direction,\n        activatorOffset,\n        shift,\n        arrowGuardDistance,\n        isNegativeArrowShift = false,\n        guardDistance,\n    }) {\n        const [leftPositionForDrop, leftPositionForViewport] = getEageCoincidingWithDirection({\n            activatorPosition: activatorMetrics.left,\n            activatorSize: activatorMetrics.width,\n            dropSize: dropMetrics.width,\n            viewportShift: viewportMetrics.pageLeft,\n            isNegativePosition: direction === 'left',\n            activatorOffset: activatorOffset.offsetLeft,\n            guardDistance,\n        });\n\n        const [topPositionForDrop, topPositionForViewport] = getEdgeOppositeDirection({\n            activatorPosition: activatorMetrics.top,\n            viewportShift: viewportMetrics.pageTop,\n            activatorOffset: activatorOffset.offsetTop,\n            isNegativeArrowShift,\n            shift,\n            arrowGuardDistance,\n            activatorSize: activatorMetrics.height,\n        });\n\n        return {\n            top: topPositionForViewport,\n            left: leftPositionForViewport,\n            bottom: topPositionForViewport + dropMetrics.height,\n            right: leftPositionForViewport + dropMetrics.width,\n            dropMetrics: {\n                top: topPositionForDrop,\n                left: leftPositionForDrop,\n                height: 'auto',\n            },\n            viewportMetrics,\n        };\n    },\n};\n\n/**\n * API для расчета метрик дропдауна и viewport | контейнера в котором\n * хотим рисовать дропдаун. Cчитает метрики в случае - когда direction = VerticalPosition.\n * Т.е. дропдаун показываем снизу или сверху активатора.\n * Предоставляем три публичных метода для расположения относительно края активатора:\n * left - выравнивание по левому краю\n * right - выравнивание по правому краю\n * center - выравнивание по центру\n * */\nexport const calculateRectForVerticalPosition: {\n    left: CalculateRect<DropBaseVerticalPosition['direction']>;\n    right: CalculateRect<DropBaseVerticalPosition['direction']>;\n    center: CalculateRect<DropBaseVerticalPosition['direction']>;\n    _baseAlign: BaseAlignPosition<DropBaseVerticalPosition['direction']>;\n} = {\n    left({\n        activatorMetrics,\n        dropMetrics,\n        viewportMetrics,\n        direction,\n        activatorOffset,\n        guardDistance,\n        arrowGuardDistance,\n        occupyAllAvailableViewportHeight,\n        preferredViewportMetrics,\n    }) {\n        return this._baseAlign({\n            activatorMetrics,\n            dropMetrics,\n            viewportMetrics,\n            direction,\n            activatorOffset,\n            shift: 0,\n            isNegativeArrowShift: true,\n            guardDistance,\n            arrowGuardDistance,\n            occupyAllAvailableViewportHeight,\n            preferredViewportMetrics,\n        });\n    },\n    right({\n        activatorMetrics,\n        dropMetrics,\n        viewportMetrics,\n        direction,\n        activatorOffset,\n        guardDistance,\n        arrowGuardDistance,\n        occupyAllAvailableViewportHeight,\n        preferredViewportMetrics,\n    }) {\n        return this._baseAlign({\n            activatorMetrics,\n            dropMetrics,\n            viewportMetrics,\n            direction,\n            activatorOffset,\n            shift: -(dropMetrics.width - activatorMetrics.width),\n            arrowGuardDistance,\n            guardDistance,\n            occupyAllAvailableViewportHeight,\n            preferredViewportMetrics,\n        });\n    },\n    center({\n        activatorMetrics,\n        dropMetrics,\n        viewportMetrics,\n        direction,\n        activatorOffset,\n        guardDistance,\n        occupyAllAvailableViewportHeight,\n        preferredViewportMetrics,\n    }) {\n        const pointToCenterActivator = getPointToCenterActivator({\n            point: 0,\n            offsetPoint: 0,\n            contentSize: dropMetrics.width,\n            activatorSize: activatorMetrics.width,\n        });\n\n        return this._baseAlign({\n            activatorMetrics,\n            dropMetrics,\n            viewportMetrics,\n            direction,\n            activatorOffset,\n            shift: pointToCenterActivator,\n            guardDistance,\n            occupyAllAvailableViewportHeight,\n            preferredViewportMetrics,\n        });\n    },\n    _baseAlign({\n        activatorMetrics,\n        dropMetrics,\n        viewportMetrics,\n        direction,\n        activatorOffset,\n        shift,\n        arrowGuardDistance,\n        isNegativeArrowShift = false,\n        guardDistance,\n        occupyAllAvailableViewportHeight,\n        preferredViewportMetrics,\n    }) {\n        const [topPositionForDrop, topPositionForViewport] = getEageCoincidingWithDirection({\n            activatorPosition: activatorMetrics.top,\n            activatorSize: activatorMetrics.height,\n            dropSize: dropMetrics.height,\n            viewportShift: viewportMetrics.pageTop,\n            isNegativePosition: direction !== 'bottom',\n            activatorOffset: activatorOffset.offsetTop,\n            guardDistance,\n        });\n\n        const [leftPositionForDrop, leftPositionForViewport] = getEdgeOppositeDirection({\n            activatorPosition: activatorMetrics.left,\n            viewportShift: viewportMetrics.pageLeft,\n            activatorOffset: activatorOffset.offsetLeft,\n            shift,\n            isNegativeArrowShift,\n            arrowGuardDistance,\n            activatorSize: activatorMetrics.width,\n        });\n\n        let metrics: CalculateDropHeightAvailableViewportResult = {\n            topPositionForViewport,\n            top: topPositionForDrop,\n            left: leftPositionForDrop,\n            height: 0,\n        };\n\n        if (occupyAllAvailableViewportHeight) {\n            metrics = calculateDropHeightAvailableViewport[direction]({\n                topPositionForViewport,\n                preferredViewportMetrics,\n                topPositionForDrop,\n                dropMetrics,\n                leftPositionForDrop,\n            });\n        }\n\n        return {\n            top: metrics.topPositionForViewport,\n            left: leftPositionForViewport,\n            bottom: metrics.topPositionForViewport + (metrics.height !== 0 ? metrics.height : dropMetrics.height),\n            right: leftPositionForViewport + dropMetrics.width,\n            dropMetrics: {\n                top: metrics.top,\n                left: metrics.left,\n                height: metrics.height !== 0 ? metrics.height : 'auto',\n            },\n            viewportMetrics,\n        };\n    },\n};\n\nexport const calculateRect: CalculateRectType<DropBaseHorizontalPosition> &\n    CalculateRectType<DropBaseVerticalPosition> = {\n    left: calculateRectForHorizontalPosition,\n    right: calculateRectForHorizontalPosition,\n    top: calculateRectForVerticalPosition,\n    bottom: calculateRectForVerticalPosition,\n};\n"],"names":[],"mappings":"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"}

package/index.css

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

package/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DropBase';
+export type { DropBaseProps, ArrowGuardDistance, DropBasePermanentProps, DropBaseHorizontalPosition, DropBaseVerticalPosition, DropBaseHorizontalPositionWithoutCenter, DropBaseVerticalPositionWithoutCenter, } from './types';
+export { INITIAL_HEIGHT_VALUE } from './useRenderParams';

package/index.js

@@ -0,0 +1,17 @@
+import './index.css';
+export { DropBase } from './DropBase.js';
+export { INITIAL_HEIGHT_VALUE } from './useRenderParams.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'react-dom';
+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-when-font-loaded';
+import './intersectionManager.js';
+import './scrollManager.js';
+import '@hh.ru/magritte-common-func-utils';
+import '@hh.ru/magritte-common-metrics';
+import './calculateRect.js';
+//# sourceMappingURL=index.js.map

package/index.js.map

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

package/intersectionManager.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare const useIntersectionSubscription: (activatorRef: RefObject<HTMLElement>, isVisible: boolean, ignore: boolean, callback: VoidFunction) => void;