@hh.ru/magritte-internal-drop-base 6.0.4 → 7.0.1

package/positionManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"positionManager.js","sources":["../src/positionManager.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useRef, useLayoutEffect, MutableRefObject } from 'react';\n\nimport { requestAnimation } from '@hh.ru/magritte-common-func-utils';\nimport {\n    findBestFitPlacement,\n    getMetrics,\n    applyPlacementToDrop,\n} from '@hh.ru/magritte-internal-drop-base/findBestFitPlacement';\nimport type {\n    ArrowGuardDistance,\n    ActivatorElementType,\n    Placement,\n    RefCallbackFactory,\n} from '@hh.ru/magritte-internal-drop-base/types';\nimport { useMonitorResize } from '@hh.ru/magritte-internal-drop-base/useMonitorResize';\n\nlet isInitialized = false;\n\ninterface SubscriptionCallback {\n    (target: HTMLElement): void;\n}\n\nconst scrollSubscriptions: Array<SubscriptionCallback> = [];\nconst canceledScrollSubscriptions: Map<HTMLElement, Array<SubscriptionCallback>> = new Map();\n\nconst scrollHandler = (event: Event) => {\n    const target = event.target as HTMLElement;\n    if (!target) {\n        return;\n    }\n\n    if (scrollSubscriptions.length === 0) {\n        return;\n    }\n    const canceledSubscriptions = canceledScrollSubscriptions.get(target);\n\n    const subscriptions =\n        canceledSubscriptions === undefined\n            ? scrollSubscriptions\n            : scrollSubscriptions.filter((subscription) => !canceledSubscriptions.includes(subscription));\n\n    subscriptions.forEach((subscription) => subscription(target));\n};\n\nconst initialize = () => {\n    if (isInitialized) {\n        return;\n    }\n\n    isInitialized = true;\n    document.addEventListener('scroll', scrollHandler, { capture: true, passive: false });\n};\n\nconst suspendSubscription = (callback: SubscriptionCallback): void => {\n    const index = scrollSubscriptions.indexOf(callback);\n    if (index !== -1) {\n        scrollSubscriptions.splice(index, 1);\n    }\n};\n\nconst reviveSubscription = (callback: SubscriptionCallback): void => {\n    initialize();\n    scrollSubscriptions.push(callback);\n};\n\nexport const deleteScrollSubscription = (callback: SubscriptionCallback): void => {\n    const index = scrollSubscriptions.indexOf(callback);\n    if (index !== -1) {\n        scrollSubscriptions.splice(index, 1);\n    }\n    for (const [key, callbacks] of canceledScrollSubscriptions.entries()) {\n        const index = callbacks.indexOf(callback);\n        if (index !== -1) {\n            canceledScrollSubscriptions.set(key, callbacks.splice(index, 1));\n        }\n    }\n};\n\nconst unsubscribeFromTarget = (target: HTMLElement, callback: SubscriptionCallback): void => {\n    if (!canceledScrollSubscriptions.has(target)) {\n        canceledScrollSubscriptions.set(target, []);\n    }\n    canceledScrollSubscriptions.get(target)?.push(callback);\n};\n\nexport const usePositionManager = (\n    activatorRef: RefObject<ActivatorElementType>,\n    dropRef: RefObject<HTMLElement>,\n    isVisible: boolean,\n    placement: Placement | Placement[],\n    customViewport: RefObject<HTMLElement> | undefined,\n    allowShrinkHeightToFitIntoViewport: boolean,\n    widthEqualToActivator: boolean,\n    arrowGuardDistance: ArrowGuardDistance,\n    guardDistanceToActivator: number,\n    guardDistanceToViewport: number,\n    minDropHeight: number,\n    forceDropMetricsUpdate: MutableRefObject<VoidFunction> | undefined\n): {\n    resizeRefCallbackFactory: RefCallbackFactory;\n    bestFitPlacementRect: DOMRect | undefined;\n} => {\n    const bestFitPlacementRef = useRef<DOMRect>();\n    const dropMetricsRef = useRef<DOMRect>();\n\n    const prefferedPlacementRef = useRef<Placement>();\n\n    const updateMetricsSyncRef = useRef<VoidFunction>(() => void 0);\n    const updateMetricsRef = useRef<VoidFunction>(() => void 0);\n\n    const { getResizeObserver, observeResizeRefCallbackFactory, getObservedElementsInfoMap } = useMonitorResize(\n        dropMetricsRef,\n        updateMetricsRef\n    );\n\n    const getDropMetrics = useCallback(() => {\n        if (dropMetricsRef.current) {\n            return dropMetricsRef.current;\n        }\n        if (!dropRef.current) {\n            return new DOMRect();\n        }\n\n        const scrollPositions: { node: HTMLElement; top: number; left: number }[] = [];\n        for (const info of getObservedElementsInfoMap().values()) {\n            if (info.isScrollable && info.node) {\n                scrollPositions.push({\n                    node: info.node,\n                    top: info.node.scrollTop,\n                    left: info.node.scrollLeft,\n                });\n            }\n        }\n\n        dropRef.current.style.width = '';\n        dropRef.current.style.height = '';\n        dropMetricsRef.current = dropRef.current.getBoundingClientRect();\n        if (bestFitPlacementRef.current) {\n            applyPlacementToDrop(dropRef, bestFitPlacementRef.current);\n        }\n        for (const { node, top, left } of scrollPositions) {\n            node.scrollTop = top;\n            node.scrollLeft = left;\n        }\n        return dropMetricsRef.current;\n    }, [dropRef, getObservedElementsInfoMap]);\n\n    // Создаю синхронную функцию для обновления размещения дропа и обновления атрибутов на элементе\n    // и сразу же создаю вресию оберунтую в raf. Синхронная версия нужна при первом показе, т.к. на атрибуты на элементе\n    // может быть завязана анимация, которая должна начаться сразу же после показа. raf версия нужна для реакции на\n    // скролл/ресайз и т.д.\n    updateMetricsSyncRef.current = () => {\n        if (!dropRef.current || !isVisible) {\n            bestFitPlacementRef.current = undefined;\n            return;\n        }\n        const { activatorRect, viewportRect, offsetParentRect } = getMetrics({\n            activatorRef,\n            customViewport,\n            dropRef,\n        });\n        const dropRect = getDropMetrics();\n        const {\n            rect,\n            parsedPlacement: choosenPlacement,\n            placement: prefferedPlacement,\n        } = findBestFitPlacement({\n            placements: Array.isArray(placement) ? placement : [placement],\n            activatorRect,\n            viewportRect,\n            offsetParentRect,\n            dropWidth: dropRect.width,\n            dropHeight: dropRect.height,\n            guardDistanceToActivator,\n            guardDistanceToViewport,\n            minDropHeight,\n            widthEqualToActivator,\n            allowShrinkHeightToFitIntoViewport,\n            arrowGuardDistance,\n            prefferedPlacement: prefferedPlacementRef.current,\n        });\n        prefferedPlacementRef.current = prefferedPlacement;\n        applyPlacementToDrop(dropRef, rect);\n        dropRef.current.dataset.magritteDropBaseDirection = choosenPlacement.direction;\n        dropRef.current.dataset.magritteDropBaseAlignment = choosenPlacement.alignment;\n        bestFitPlacementRef.current = rect;\n    };\n    updateMetricsRef.current = requestAnimation(updateMetricsSyncRef.current);\n\n    if (forceDropMetricsUpdate) {\n        forceDropMetricsUpdate.current = () => {\n            dropMetricsRef.current = undefined;\n            updateMetricsRef.current();\n        };\n    }\n\n    useEffect(() => {\n        if (!isVisible) {\n            prefferedPlacementRef.current = undefined;\n            return () => void 0;\n        }\n        const activatorElement = activatorRef.current;\n        const customViewportElement = customViewport?.current;\n        const resizeHandler = () => updateMetricsRef.current();\n        activatorElement && getResizeObserver().observe(activatorElement);\n        customViewportElement && getResizeObserver().observe(customViewportElement);\n        window.addEventListener('resize', resizeHandler);\n        return () => {\n            activatorElement && getResizeObserver().unobserve(activatorElement);\n            customViewportElement && getResizeObserver().unobserve(customViewportElement);\n            window.removeEventListener('resize', resizeHandler);\n        };\n    }, [activatorRef, getResizeObserver, customViewport, isVisible]);\n\n    useLayoutEffect(() => {\n        isVisible && updateMetricsSyncRef.current();\n    }, [isVisible, placement]);\n\n    /**\n     * список id скроллящихся элементов для которых была выполнена проверка\n     * влияет ли их скролл на взаимное положение активатора и дропа.\n     * Получение сделано с помощью отдельной функции чтобы не создавать сет на каждый ререндер.\n     */\n    const processedScrollContainers = useRef<Set<HTMLElement>>();\n    const getProcessedScrollContainers = (): Set<HTMLElement> => {\n        processedScrollContainers.current = processedScrollContainers.current || new Set();\n        return processedScrollContainers.current;\n    };\n\n    const visibleRef = useRef(isVisible);\n    visibleRef.current = isVisible;\n\n    const scrollHandler = useCallback(\n        (target: HTMLElement) => {\n            if (!visibleRef.current || !dropRef.current || !activatorRef.current) {\n                return;\n            }\n\n            // Если это первый скролл данного контейнера, то проверяем содержит ли он активатор\n            // Если он не содержит активатор, то можно отписаться от дальнейших оповещений о его скролле.\n            if (!getProcessedScrollContainers().has(target)) {\n                if (!target.contains(activatorRef.current)) {\n                    unsubscribeFromTarget(target, scrollHandler);\n                    return;\n                }\n                getProcessedScrollContainers().add(target);\n            }\n\n            updateMetricsRef.current();\n        },\n        [activatorRef, dropRef]\n    );\n\n    useEffect(() => {\n        // eslint-disable-next-line no-unused-expressions\n        isVisible ? reviveSubscription(scrollHandler) : suspendSubscription(scrollHandler);\n    }, [isVisible, scrollHandler]);\n\n    useEffect(() => {\n        return () => deleteScrollSubscription(scrollHandler);\n    }, [scrollHandler]);\n\n    return {\n        resizeRefCallbackFactory: observeResizeRefCallbackFactory,\n        bestFitPlacementRect: bestFitPlacementRef.current,\n    };\n};\n"],"names":[],"mappings":"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"}

package/types.d.ts

@@ -1,10 +1,24 @@
-import type { RefObject, ReactNode, CSSProperties } from 'react';
+import type { RefObject, ReactNode, CSSProperties, RefCallback, HTMLAttributes } from 'react';
 import type { CSSTransitionClassNames } from 'react-transition-group/CSSTransition';
 import { KeyboardNavigationMode } from '@hh.ru/magritte-common-keyboard';
 export type ActivatorElementType = HTMLElement | SVGElement;
-export interface DropBasePermanentProps {
-    /** DOM нода хоста в рамках которого нужно рендерить компонент, по дефолту рендер будет в body */
-    host?: RefObject<HTMLElement>;
+export interface RefCallbackFactory {
+    (id: string, observe?: boolean, isScrollabel?: boolean): RefCallback<HTMLElement>;
+}
+export type VerticalDirection = 'top' | 'bottom';
+export type HorizontalDirection = 'left' | 'right';
+export type AlignmentForVerticalDirection = 'left' | 'right' | 'center';
+export type AlignmentForHorizontalDirection = 'top' | 'bottom' | 'center';
+export interface ParsedPlacement {
+    direction: VerticalDirection | HorizontalDirection;
+    alignment: AlignmentForVerticalDirection | AlignmentForHorizontalDirection;
+}
+export type Placement = `${VerticalDirection}-${AlignmentForVerticalDirection}` | `${HorizontalDirection}-${AlignmentForHorizontalDirection}`;
+export type ArrowGuardDistance = Partial<Record<VerticalDirection, Record<AlignmentForVerticalDirection, number>> & Record<HorizontalDirection, Record<AlignmentForHorizontalDirection, number>>>;
+type ReactHandlerProps = {
+    [K in keyof HTMLAttributes<HTMLDivElement> as K extends `on${string}` ? K : never]: HTMLAttributes<HTMLDivElement>[K];
+};
+export type DropBasePermanentProps = {
     /** Флаг отвечает за показ компонента, `true` — показать, `false` — скрыть */
     visible?: boolean;
     /** Элемент активатор, относительно которого показывать всплывающую подсказку */
@@ -14,7 +28,7 @@ export interface DropBasePermanentProps {
     /** Задает виртуальный viewport */
     preferredViewport?: RefObject<HTMLElement>;
     /** Рендер функция, которая должна вернуть сам Drop, в аргументах передается вычисляемая позиция */
-    children: (props: DropBaseHorizontalPosition | DropBaseVerticalPosition | DropBaseVerticalPositionWithoutCenter | DropBaseHorizontalPositionWithoutCenter, metrics: RenderFuncMetricsArgs) => ReactNode;
+    children: (ref: RefCallbackFactory) => ReactNode;
     /**
      * Колбек вызываемый при необходимости закрыть компонент в результате внешних событий. Например при клике
      * вовне дропа или при перекрытии активатора другим элементом. Должен устанавливать флаг visible в false.
@@ -33,16 +47,9 @@ export interface DropBasePermanentProps {
         exit?: number | undefined;
     };
     /** Защитное расстояние в px от активатора до DropBase */
-    guardDistance?: number;
+    guardDistanceToActivator?: number;
     /** Aria role для задания семантики в screen reader */
     role?: string;
-    /** Флаг позволяет занять максимально возможную высоту компоненту, по viewport */
-    occupyAllAvailableViewportHeight?: boolean;
-    /**
-     * Флаг, при выставлении которого в true DropBase будет выпадать в указанном направлении даже
-     * если при этом он не умещается во Viewport
-     * */
-    forcePosition?: boolean;
     /** Флаг включающий автоматическое выставление ширины равной ширине активатора */
     widthEqualToActivator?: boolean;
     /**
@@ -60,163 +67,18 @@ export interface DropBasePermanentProps {
     onBeforeExit?: VoidFunction;
     /** Колбек, который будет вызван после анимации закрытия */
     onAfterExit?: VoidFunction;
-}
-export type BaseArrowGuardDistance<K extends DropBaseHorizontalPosition | DropBaseVerticalPosition> = {
-    [D in DropBaseProps<K>['direction']]: {
-        [A in DropBaseProps<K>['alignment']]: number;
-    };
-};
-export type ArrowGuardDistance = BaseArrowGuardDistance<DropBaseHorizontalPosition> & BaseArrowGuardDistance<DropBaseVerticalPosition>;
-export interface RenderFuncMetricsArgs {
-    metrics: {
-        top: number;
-        left: number;
-        height?: number | string;
-    };
-    dropScrollableContainerRef?: RefObject<HTMLDivElement>;
-}
-export interface ActivatorOffset {
-    offsetLeft: number;
-    offsetTop: number;
-}
-export interface DropBaseVerticalPosition {
-    direction: 'top' | 'bottom';
-    alignment: 'left' | 'right' | 'center';
-}
-export interface DropBaseHorizontalPosition {
-    direction: 'left' | 'right';
-    alignment: 'top' | 'bottom' | 'center';
-}
-export interface DropBaseVerticalPositionWithoutCenter {
-    direction: 'top' | 'bottom';
-    alignment: 'left' | 'right';
-}
-export interface DropBaseHorizontalPositionWithoutCenter {
-    direction: 'left' | 'right';
-    alignment: 'top' | 'bottom';
-}
-export type DropBaseProps<T extends DropBaseHorizontalPosition | DropBaseVerticalPosition | DropBaseVerticalPositionWithoutCenter | DropBaseHorizontalPositionWithoutCenter> = DropBasePermanentProps & T;
-export interface DropMetrics {
-    left: number;
-    top: number;
-    height: number | string;
-}
-export interface RectPosition {
-    top: number;
-    left: number;
-    right: number;
-    bottom: number;
-    dropMetrics: DropMetrics;
-    viewportMetrics: CustomVisualViewport;
-}
-export interface DOMRectLike {
-    top: number;
-    bottom: number;
-    left: number;
-    right: number;
-    height: number;
-    width: number;
-}
-export interface CalculateRect<T> {
-    (props: {
-        activatorMetrics: DOMRect;
-        dropMetrics: DOMRectLike;
-        viewportMetrics: VisualViewport;
-        preferredViewportMetrics: CustomVisualViewport;
-        direction: T;
-        activatorOffset: ActivatorOffset;
-        guardDistance: number;
-        arrowGuardDistance?: number;
-        occupyAllAvailableViewportHeight?: boolean;
-    }): RectPosition;
-}
-export type CalculateRectType<K extends DropBaseVerticalPosition | DropBaseHorizontalPosition> = {
-    [D in DropBaseProps<K>['direction']]: {
-        [A in DropBaseProps<K>['alignment']]: CalculateRect<D>;
-    };
-};
-export interface CustomVisualViewport {
-    pageTop: number;
-    pageLeft: number;
-    width: number;
-    height: number;
-}
-interface BaseAlignPositionArgs<T> {
-    activatorMetrics: DOMRect;
-    dropMetrics: DOMRectLike;
-    viewportMetrics: VisualViewport;
-    direction: T;
-    activatorOffset: ActivatorOffset;
-    shift: number;
-    isNegativeArrowShift?: boolean;
-    arrowGuardDistance?: number;
-    guardDistance: number;
-    occupyAllAvailableViewportHeight?: boolean;
-    preferredViewportMetrics: CustomVisualViewport;
-}
-export interface BaseAlignPosition<T> {
-    (args: BaseAlignPositionArgs<T>): RectPosition;
-}
-export interface GetEdgeOppositeDirectionArgs {
-    activatorPosition: number;
-    viewportShift: number;
-    activatorOffset: number;
-    shift: number;
-    isNegativeArrowShift: boolean;
-    activatorSize: number;
-    arrowGuardDistance?: number;
-}
-export interface GetEageCoincidingWithDirectionArgs {
-    activatorPosition: number;
-    dropSize: number;
-    viewportShift: number;
-    isNegativePosition: boolean;
-    activatorOffset: number;
-    activatorSize: number;
-    guardDistance: number;
-}
-export interface GetPointToCenterActivator {
-    point: number;
-    offsetPoint: number;
-    contentSize: number;
-    activatorSize: number;
-}
-export interface CalculateDropHeightAvailableViewportResult {
-    /** Top позиция дроп компонента относительно host */
-    top: number;
-    /** Max высота, которую может занимать DropBase */
-    height: number;
-    /** Left позиция дроп компонента относительно host */
-    left: number;
-    /** Позиция дроп компонента относительно viewport */
-    topPositionForViewport: number;
-}
-export interface CalculateDropHeightAvailableViewportArgs {
-    (props: {
-        /** Top позиция drop компонента относительно host */
-        topPositionForDrop: number;
-        /** Left позиция drop компонента относительно host */
-        leftPositionForDrop: number;
-        /**
-         * Позиция дроп компонента относительно viewport,
-         * когда host отличный от body, метрика top drop-base не совпадет с этой точкой
-         * */
-        topPositionForViewport: number;
-        /**
-         * Метрики viewport в рамках которого будет распологаться компонент
-         * */
-        preferredViewportMetrics: CustomVisualViewport;
-        /**
-         * Метрики выпадающего блока (top, left). Height содержит
-         * число в случае если включена опция occupyAllAvailableViewportHeight,
-         * иначе там 'auto'
-         */
-        dropMetrics: DOMRectLike;
-    }): CalculateDropHeightAvailableViewportResult;
-}
-export interface Metrics {
-    top: number;
-    left: number;
-    height?: number | string;
-}
+    /** Название размещения или список размещений куда допускается выпадание дропа */
+    placement: Placement | Placement[];
+    /** Флаг, включающий изменение высоты дропа для размещения во вьюпорте */
+    allowShrinkHeightToFitIntoViewport?: boolean;
+    /**
+     * Минимальный отступ от границ вьюпорта по вертикали, применяется только при установке
+     * флага allowShrinkHeightToFitIntoViewport
+     */
+    guardDistanceToViewport?: number;
+    /** Минимальный размер дропа, применяется только при установке флага allowShrinkHeightToFitIntoViewport */
+    minHeight?: number;
+    /** ref на элемент в котором будет отрендерен дроп */
+    host?: RefObject<HTMLElement>;
+} & ReactHandlerProps;
 export {};

package/useMonitorResize.d.ts

@@ -0,0 +1,25 @@
+import { RefCallback, MutableRefObject } from 'react';
+import { RefCallbackFactory } from '@hh.ru/magritte-internal-drop-base/types';
+interface ObservedElementInfo {
+    node: HTMLElement | null;
+    isScrollable: boolean;
+    refCallback: RefCallback<HTMLElement>;
+}
+/**
+ * При изменении размера содержимого дропа необходимо перезапускать пересчет позиции.
+ * Для отслеживания изменения размер используется ResizeObserver вызывающий код обновления позиции и размера дропа.
+ * Проблема в том, что нельзя просто подписаться на изменение размера самой внешней обертки дропа, т.к. для нее
+ * размер жестко задается кодом отвечающим за позиционирование. Т.е. даже при изменении размера содержимого внешняя
+ * обертка не поменяет свой размер. Кроме того в дропе может быть несколько независимых частей размер которых
+ * может измениться. Этот хук возвращает фабрику refcallback'ов. При вызове фабрики создается refcallback который
+ * подписывает ResizeObserver на изменение размера элемента. При передаче в аргументе для фабрики одного и того же
+ * id, будет возвращен тот же самый refcallback, т.е. проблемы с изменением ссылки передаваемой в проп не возникает.
+ * Далее эта фабрика передается в рендер функцию Drop/Tooltip и используется для подписки на изменение размера
+ * различных частей.
+ */
+export declare const useMonitorResize: (dropMetricsRef: MutableRefObject<DOMRect | undefined>, updateMetricsRef: MutableRefObject<VoidFunction>) => {
+    observeResizeRefCallbackFactory: RefCallbackFactory;
+    getResizeObserver: () => ResizeObserver;
+    getObservedElementsInfoMap: () => Map<string, ObservedElementInfo>;
+};
+export {};

package/useMonitorResize.js

@@ -0,0 +1,61 @@
+import './index.css';
+import { useRef, useCallback } from 'react';
+
+/**
+ * При изменении размера содержимого дропа необходимо перезапускать пересчет позиции.
+ * Для отслеживания изменения размер используется ResizeObserver вызывающий код обновления позиции и размера дропа.
+ * Проблема в том, что нельзя просто подписаться на изменение размера самой внешней обертки дропа, т.к. для нее
+ * размер жестко задается кодом отвечающим за позиционирование. Т.е. даже при изменении размера содержимого внешняя
+ * обертка не поменяет свой размер. Кроме того в дропе может быть несколько независимых частей размер которых
+ * может измениться. Этот хук возвращает фабрику refcallback'ов. При вызове фабрики создается refcallback который
+ * подписывает ResizeObserver на изменение размера элемента. При передаче в аргументе для фабрики одного и того же
+ * id, будет возвращен тот же самый refcallback, т.е. проблемы с изменением ссылки передаваемой в проп не возникает.
+ * Далее эта фабрика передается в рендер функцию Drop/Tooltip и используется для подписки на изменение размера
+ * различных частей.
+ */
+const useMonitorResize = (dropMetricsRef, updateMetricsRef) => {
+    const resizeObserverRef = useRef();
+    const getResizeObserver = useCallback(() => {
+        if (!resizeObserverRef.current) {
+            resizeObserverRef.current = new ResizeObserver(() => {
+                dropMetricsRef.current = undefined;
+                updateMetricsRef.current();
+            });
+        }
+        return resizeObserverRef.current;
+    }, [dropMetricsRef, updateMetricsRef]);
+    const observedElementsInfoMapRef = useRef();
+    const getObservedElementsInfoMap = useCallback(() => {
+        observedElementsInfoMapRef.current = observedElementsInfoMapRef.current || new Map();
+        return observedElementsInfoMapRef.current;
+    }, []);
+    const observeResizeRefCallbackFactory = (id, observe = true, isScrollable = false) => {
+        if (getObservedElementsInfoMap().has(id)) {
+            return getObservedElementsInfoMap().get(id)?.refCallback;
+        }
+        const refCallback = (node) => {
+            const info = getObservedElementsInfoMap().get(id);
+            const currentNode = info.node;
+            if (currentNode === node) {
+                return;
+            }
+            currentNode && observe && getResizeObserver().unobserve(currentNode);
+            info.node = node;
+            node && observe && getResizeObserver().observe(node);
+        };
+        getObservedElementsInfoMap().set(id, {
+            node: null,
+            refCallback,
+            isScrollable,
+        });
+        return refCallback;
+    };
+    return {
+        observeResizeRefCallbackFactory,
+        getResizeObserver,
+        getObservedElementsInfoMap,
+    };
+};
+
+export { useMonitorResize };
+//# sourceMappingURL=useMonitorResize.js.map

package/useMonitorResize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMonitorResize.js","sources":["../src/useMonitorResize.ts"],"sourcesContent":["import { useCallback, useRef, RefCallback, MutableRefObject } from 'react';\n\nimport { RefCallbackFactory } from '@hh.ru/magritte-internal-drop-base/types';\n\ninterface ObservedElementInfo {\n    node: HTMLElement | null;\n    isScrollable: boolean;\n    refCallback: RefCallback<HTMLElement>;\n}\n\n/**\n * При изменении размера содержимого дропа необходимо перезапускать пересчет позиции.\n * Для отслеживания изменения размер используется ResizeObserver вызывающий код обновления позиции и размера дропа.\n * Проблема в том, что нельзя просто подписаться на изменение размера самой внешней обертки дропа, т.к. для нее\n * размер жестко задается кодом отвечающим за позиционирование. Т.е. даже при изменении размера содержимого внешняя\n * обертка не поменяет свой размер. Кроме того в дропе может быть несколько независимых частей размер которых\n * может измениться. Этот хук возвращает фабрику refcallback'ов. При вызове фабрики создается refcallback который\n * подписывает ResizeObserver на изменение размера элемента. При передаче в аргументе для фабрики одного и того же\n * id, будет возвращен тот же самый refcallback, т.е. проблемы с изменением ссылки передаваемой в проп не возникает.\n * Далее эта фабрика передается в рендер функцию Drop/Tooltip и используется для подписки на изменение размера\n * различных частей.\n */\nexport const useMonitorResize = (\n    dropMetricsRef: MutableRefObject<DOMRect | undefined>,\n    updateMetricsRef: MutableRefObject<VoidFunction>\n): {\n    observeResizeRefCallbackFactory: RefCallbackFactory;\n    getResizeObserver: () => ResizeObserver;\n    getObservedElementsInfoMap: () => Map<string, ObservedElementInfo>;\n} => {\n    const resizeObserverRef = useRef<ResizeObserver>();\n    const getResizeObserver = useCallback(() => {\n        if (!resizeObserverRef.current) {\n            resizeObserverRef.current = new ResizeObserver(() => {\n                dropMetricsRef.current = undefined;\n                updateMetricsRef.current();\n            });\n        }\n        return resizeObserverRef.current;\n    }, [dropMetricsRef, updateMetricsRef]);\n\n    const observedElementsInfoMapRef = useRef<Map<string, ObservedElementInfo>>();\n    const getObservedElementsInfoMap = useCallback(() => {\n        observedElementsInfoMapRef.current = observedElementsInfoMapRef.current || new Map();\n        return observedElementsInfoMapRef.current;\n    }, []);\n\n    const observeResizeRefCallbackFactory: RefCallbackFactory = (id, observe = true, isScrollable = false) => {\n        if (getObservedElementsInfoMap().has(id)) {\n            return getObservedElementsInfoMap().get(id)?.refCallback as RefCallback<HTMLElement>;\n        }\n\n        const refCallback = (node: HTMLElement | null) => {\n            const info = getObservedElementsInfoMap().get(id) as ObservedElementInfo;\n            const currentNode = info.node;\n            if (currentNode === node) {\n                return;\n            }\n            currentNode && observe && getResizeObserver().unobserve(currentNode);\n            info.node = node;\n            node && observe && getResizeObserver().observe(node);\n        };\n\n        getObservedElementsInfoMap().set(id, {\n            node: null,\n            refCallback,\n            isScrollable,\n        });\n        return refCallback;\n    };\n\n    return {\n        observeResizeRefCallbackFactory,\n        getResizeObserver,\n        getObservedElementsInfoMap,\n    };\n};\n"],"names":[],"mappings":";;AAUA;;;;;;;;;;;AAWG;MACU,gBAAgB,GAAG,CAC5B,cAAqD,EACrD,gBAAgD,KAKhD;AACA,IAAA,MAAM,iBAAiB,GAAG,MAAM,EAAkB,CAAC;AACnD,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAK;AACvC,QAAA,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE;AAC5B,YAAA,iBAAiB,CAAC,OAAO,GAAG,IAAI,cAAc,CAAC,MAAK;AAChD,gBAAA,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC;gBACnC,gBAAgB,CAAC,OAAO,EAAE,CAAC;AAC/B,aAAC,CAAC,CAAC;AACN,SAAA;QACD,OAAO,iBAAiB,CAAC,OAAO,CAAC;AACrC,KAAC,EAAE,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC,CAAC;AAEvC,IAAA,MAAM,0BAA0B,GAAG,MAAM,EAAoC,CAAC;AAC9E,IAAA,MAAM,0BAA0B,GAAG,WAAW,CAAC,MAAK;QAChD,0BAA0B,CAAC,OAAO,GAAG,0BAA0B,CAAC,OAAO,IAAI,IAAI,GAAG,EAAE,CAAC;QACrF,OAAO,0BAA0B,CAAC,OAAO,CAAC;KAC7C,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,MAAM,+BAA+B,GAAuB,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,EAAE,YAAY,GAAG,KAAK,KAAI;AACrG,QAAA,IAAI,0BAA0B,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;YACtC,OAAO,0BAA0B,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,WAAuC,CAAC;AACxF,SAAA;AAED,QAAA,MAAM,WAAW,GAAG,CAAC,IAAwB,KAAI;YAC7C,MAAM,IAAI,GAAG,0BAA0B,EAAE,CAAC,GAAG,CAAC,EAAE,CAAwB,CAAC;AACzE,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;YAC9B,IAAI,WAAW,KAAK,IAAI,EAAE;gBACtB,OAAO;AACV,aAAA;YACD,WAAW,IAAI,OAAO,IAAI,iBAAiB,EAAE,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;AACrE,YAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,IAAI,IAAI,OAAO,IAAI,iBAAiB,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;AACzD,SAAC,CAAC;AAEF,QAAA,0BAA0B,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE;AACjC,YAAA,IAAI,EAAE,IAAI;YACV,WAAW;YACX,YAAY;AACf,SAAA,CAAC,CAAC;AACH,QAAA,OAAO,WAAW,CAAC;AACvB,KAAC,CAAC;IAEF,OAAO;QACH,+BAA+B;QAC/B,iBAAiB;QACjB,0BAA0B;KAC7B,CAAC;AACN;;;;"}

package/calculateRect.d.ts

@@ -1,18 +0,0 @@
-import { BaseAlignPosition, CalculateRect, CalculateRectType, DropBaseHorizontalPosition, DropBaseVerticalPosition } from '@hh.ru/magritte-internal-drop-base/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>;