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

package/intersectionManager.js

@@ -0,0 +1,77 @@
+import './index.css';
+import { useRef, useCallback, useEffect } from 'react';
+
+// теоретически на один активатор может быть завязано несколько дропов (например дроп и тултип)
+// поэтому храним коллекцию коллбеков для каждого активатора
+const intersectionCallbacks = new Map();
+let observer;
+// Т.к. IntersectionObserver при первом вызове observe(element) сразу вызывает коллбек для элемента
+// необходимо игнорировать первый вызов коллбека после вызова observe, т.к. о изменении состояния сигнализирует только
+// второй вызов коллбека. Для этого используем set элементов, для которых был вызван observe, но еще не был вызван коллбек
+const ignoreImmediateCallback = new Set();
+const notifyAndClearSubscriptions = (element) => {
+    if (ignoreImmediateCallback.has(element)) {
+        ignoreImmediateCallback.delete(element);
+        return;
+    }
+    const callbacks = intersectionCallbacks.get(element);
+    if (callbacks) {
+        callbacks.forEach((callback) => callback());
+    }
+    intersectionCallbacks.delete(element);
+    observer.unobserve(element);
+};
+const initialize = () => {
+    if (observer) {
+        return;
+    }
+    observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+            notifyAndClearSubscriptions(entry.target);
+        });
+    });
+};
+const observeIntersectionsOfElement = (element, callback) => {
+    initialize();
+    if (!intersectionCallbacks.has(element)) {
+        intersectionCallbacks.set(element, []);
+        ignoreImmediateCallback.add(element);
+        observer.observe(element);
+    }
+    intersectionCallbacks.get(element)?.push(callback);
+};
+const unobserveIntersectionsOfElement = (element, callback) => {
+    if (!element) {
+        return;
+    }
+    const callbacks = intersectionCallbacks.get(element);
+    if (!callbacks) {
+        return;
+    }
+    const filteredCallbacks = callbacks.filter((cb) => cb !== callback);
+    if (filteredCallbacks.length === 0) {
+        intersectionCallbacks.delete(element);
+        observer.unobserve(element);
+        return;
+    }
+    intersectionCallbacks.set(element, filteredCallbacks);
+};
+const useIntersectionSubscription = (activatorRef, isVisible, ignore, callback) => {
+    const intersectionCallbackRef = useRef(callback);
+    intersectionCallbackRef.current = callback;
+    const intersectionCallback = useCallback(() => intersectionCallbackRef.current(), []);
+    useEffect(() => {
+        if (!activatorRef.current || !isVisible || ignore) {
+            return;
+        }
+        const target = activatorRef.current;
+        observeIntersectionsOfElement(target, intersectionCallback);
+        // eslint-disable-next-line consistent-return
+        return () => {
+            unobserveIntersectionsOfElement(target, intersectionCallback);
+        };
+    }, [isVisible, activatorRef, intersectionCallback, ignore]);
+};
+
+export { useIntersectionSubscription };
+//# sourceMappingURL=intersectionManager.js.map

package/intersectionManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"intersectionManager.js","sources":["../src/intersectionManager.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useRef } from 'react';\n\n// теоретически на один активатор может быть завязано несколько дропов (например дроп и тултип)\n// поэтому храним коллекцию коллбеков для каждого активатора\nconst intersectionCallbacks = new Map<HTMLElement, VoidFunction[]>();\nlet observer: IntersectionObserver;\n// Т.к. IntersectionObserver при первом вызове observe(element) сразу вызывает коллбек для элемента\n// необходимо игнорировать первый вызов коллбека после вызова observe, т.к. о изменении состояния сигнализирует только\n// второй вызов коллбека. Для этого используем set элементов, для которых был вызван observe, но еще не был вызван коллбек\nconst ignoreImmediateCallback = new Set<HTMLElement>();\n\nconst notifyAndClearSubscriptions = (element: HTMLElement) => {\n    if (ignoreImmediateCallback.has(element)) {\n        ignoreImmediateCallback.delete(element);\n        return;\n    }\n    const callbacks = intersectionCallbacks.get(element);\n    if (callbacks) {\n        callbacks.forEach((callback) => callback());\n    }\n    intersectionCallbacks.delete(element);\n    observer.unobserve(element);\n};\n\nconst initialize = () => {\n    if (observer) {\n        return;\n    }\n\n    observer = new IntersectionObserver((entries) => {\n        entries.forEach((entry) => {\n            notifyAndClearSubscriptions(entry.target as HTMLElement);\n        });\n    });\n};\n\nconst observeIntersectionsOfElement = (element: HTMLElement, callback: VoidFunction) => {\n    initialize();\n    if (!intersectionCallbacks.has(element)) {\n        intersectionCallbacks.set(element, []);\n        ignoreImmediateCallback.add(element);\n        observer.observe(element);\n    }\n    intersectionCallbacks.get(element)?.push(callback);\n};\n\nconst unobserveIntersectionsOfElement = (element: HTMLElement | null, callback: VoidFunction) => {\n    if (!element) {\n        return;\n    }\n    const callbacks = intersectionCallbacks.get(element);\n    if (!callbacks) {\n        return;\n    }\n    const filteredCallbacks = callbacks.filter((cb) => cb !== callback);\n    if (filteredCallbacks.length === 0) {\n        intersectionCallbacks.delete(element);\n        observer.unobserve(element);\n        return;\n    }\n\n    intersectionCallbacks.set(element, filteredCallbacks);\n};\n\nexport const useIntersectionSubscription = (\n    activatorRef: RefObject<HTMLElement>,\n    isVisible: boolean,\n    ignore: boolean,\n    callback: VoidFunction\n): void => {\n    const intersectionCallbackRef = useRef(callback);\n    intersectionCallbackRef.current = callback;\n\n    const intersectionCallback = useCallback(() => intersectionCallbackRef.current(), []);\n\n    useEffect(() => {\n        if (!activatorRef.current || !isVisible || ignore) {\n            return;\n        }\n        const target = activatorRef.current;\n        observeIntersectionsOfElement(target, intersectionCallback);\n        // eslint-disable-next-line consistent-return\n        return () => {\n            unobserveIntersectionsOfElement(target, intersectionCallback);\n        };\n    }, [isVisible, activatorRef, intersectionCallback, ignore]);\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@hh.ru/magritte-internal-drop-base",
+  "version": "5.0.4",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "index.css"
+  ],
+  "scripts": {
+    "build": "yarn root:build $(pwd)",
+    "build-test-branch": "yarn root:build-test-branch $(pwd)",
+    "changelog": "yarn root:changelog $(pwd)",
+    "prepack": "yarn root:prepack $(pwd)",
+    "postpublish": "yarn root:postpublish $(pwd)",
+    "stylelint-test": "yarn root:stylelint-test $(pwd)",
+    "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)"
+  },
+  "dependencies": {
+    "@hh.ru/magritte-common-func-utils": "1.3.6",
+    "@hh.ru/magritte-common-keyboard": "3.0.2",
+    "@hh.ru/magritte-common-metrics": "2.0.2",
+    "@hh.ru/magritte-common-mouse": "1.1.8",
+    "@hh.ru/magritte-common-use-multiple-refs": "1.1.2",
+    "@hh.ru/magritte-common-use-when-font-loaded": "1.0.4"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
+    "react-transition-group": ">=4.4.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "b660dd64fca3eaad5ec44ea9a73f92bb0d9694aa"
+}

package/scrollManager.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+interface SubscriptionCallback {
+    (target: HTMLElement, deltaX: number, deltaY: number): void;
+}
+export declare const deleteScrollSubscription: (callback: SubscriptionCallback) => void;
+export declare const useScrollSubscription: (activatorRef: RefObject<HTMLElement>, dropRef: RefObject<HTMLElement>, isVisible: boolean) => void;
+export {};

package/scrollManager.js

@@ -0,0 +1,131 @@
+import './index.css';
+import { useRef, useCallback, useEffect } from 'react';
+import { requestAnimation } from '@hh.ru/magritte-common-func-utils';
+
+let isInitialized = false;
+const scrollSubscriptions = [];
+const canceledScrollSubscriptions = new Map();
+const lastScrollPosition = new Map();
+const scrollHandler = (event) => {
+    const target = event.target;
+    if (!target) {
+        return;
+    }
+    const lastPosition = lastScrollPosition.get(target) || null;
+    if (lastPosition === null) {
+        // если мы не знаем предыдущую позицию для данного скроллящегося контейнера, то мы не сможем посчитать дельту
+        // поэтому просто запоминаем текущую позицию и предотвращаем дальнейший обработку события
+        lastScrollPosition.set(target, { x: target.scrollLeft, y: target.scrollTop });
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+    }
+    // обращения к scrollLeft и scrollTop вызывают рефлоу, поэтому кешируем их значения
+    const scrollValues = { scrollLeft: target.scrollLeft, scrollTop: target.scrollTop };
+    const scrollDelta = {
+        x: scrollValues.scrollLeft - lastPosition.x,
+        y: scrollValues.scrollTop - lastPosition.y,
+    };
+    lastScrollPosition.set(target, { x: scrollValues.scrollLeft, y: scrollValues.scrollTop });
+    if (scrollSubscriptions.length === 0) {
+        return;
+    }
+    const canceledSubscriptions = canceledScrollSubscriptions.get(target);
+    const subscriptions = canceledSubscriptions === undefined
+        ? scrollSubscriptions
+        : scrollSubscriptions.filter((subscription) => !canceledSubscriptions.includes(subscription));
+    subscriptions.forEach((subscription) => subscription(target, scrollDelta.x, scrollDelta.y));
+};
+const initialize = () => {
+    if (isInitialized) {
+        return;
+    }
+    isInitialized = true;
+    document.addEventListener('scroll', scrollHandler, { capture: true, passive: false });
+};
+const suspendSubscription = (callback) => {
+    const index = scrollSubscriptions.indexOf(callback);
+    if (index !== -1) {
+        scrollSubscriptions.splice(index, 1);
+    }
+};
+const reviveSubscription = (callback) => {
+    initialize();
+    scrollSubscriptions.push(callback);
+};
+const deleteScrollSubscription = (callback) => {
+    const index = scrollSubscriptions.indexOf(callback);
+    if (index !== -1) {
+        scrollSubscriptions.splice(index, 1);
+    }
+    for (const [key, callbacks] of canceledScrollSubscriptions.entries()) {
+        const index = callbacks.indexOf(callback);
+        if (index !== -1) {
+            canceledScrollSubscriptions.set(key, callbacks.splice(index, 1));
+        }
+    }
+};
+const unsubscribeFromTarget = (target, callback) => {
+    if (!canceledScrollSubscriptions.has(target)) {
+        canceledScrollSubscriptions.set(target, []);
+    }
+    canceledScrollSubscriptions.get(target)?.push(callback);
+};
+const updateDropTranslation = requestAnimation((_, params) => {
+    const { dropRef, deltaX, deltaY, currentTranslationRef } = params;
+    if (!dropRef.current) {
+        return;
+    }
+    currentTranslationRef.current.x -= deltaX;
+    currentTranslationRef.current.y -= deltaY;
+    dropRef.current.style.transform = `translate3d(${currentTranslationRef.current.x}px, ${currentTranslationRef.current.y}px, 0)`;
+});
+const useScrollSubscription = (activatorRef, dropRef, isVisible) => {
+    /**
+     * список id скроллящихся элементов для которых была выполнена проверка
+     * влияет ли их скролл на взаимное положение активатора и дропа
+     */
+    const processedScrollContainers = useRef(new Set());
+    /**
+     * текущее значение трансформации дропа
+     * при каждом ререндере сбрасывается, т.к. дроп при каждом ререндере пересчитывает свою позицию
+     */
+    const currentTranslationRef = useRef({ x: 0, y: 0 });
+    currentTranslationRef.current = { x: 0, y: 0 };
+    /**
+     * ссылка на последнее значение расстояния между активатором и дропом,
+     * используется для определения изменения взаимного положения активатора и дропа
+     */
+    const visibleRef = useRef(isVisible);
+    visibleRef.current = isVisible;
+    const scrollCallback = useCallback((target, deltaX, deltaY) => {
+        if (!visibleRef.current || !dropRef.current || !activatorRef.current) {
+            return;
+        }
+        // Если это первый скролл данного контейнера, то проверяем содержит ли он активатор и дроп
+        // Если он содержит только что-то одно, значит его скролл будет влиять на взаимное расположение дропа
+        // и активатора, в этом случае помечяем его как обработанный и меняем позицию дропа при его скролле.
+        // Если же он не влияет на взаимное расположение дропа и активатора, то отписываемся от дальнейших
+        // оповещений о его скролле.
+        if (!processedScrollContainers.current.has(target)) {
+            const targetContainsActivator = target.contains(activatorRef.current);
+            const targetContainsDrop = target.contains(dropRef.current);
+            if (targetContainsActivator === targetContainsDrop) {
+                unsubscribeFromTarget(target, scrollCallback);
+                return;
+            }
+            processedScrollContainers.current.add(target);
+        }
+        updateDropTranslation({ deltaX, deltaY, dropRef, currentTranslationRef });
+    }, [activatorRef, dropRef]);
+    useEffect(() => {
+        // eslint-disable-next-line no-unused-expressions
+        isVisible ? reviveSubscription(scrollCallback) : suspendSubscription(scrollCallback);
+    }, [isVisible, scrollCallback]);
+    useEffect(() => {
+        return () => deleteScrollSubscription(scrollCallback);
+    }, [scrollCallback]);
+};
+
+export { deleteScrollSubscription, useScrollSubscription };
+//# sourceMappingURL=scrollManager.js.map

package/scrollManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollManager.js","sources":["../src/scrollManager.ts"],"sourcesContent":["import { MutableRefObject, RefObject, useCallback, useEffect, useRef } from 'react';\n\nimport { requestAnimation } from '@hh.ru/magritte-common-func-utils';\n\nlet isInitialized = false;\n\ninterface SubscriptionCallback {\n    (target: HTMLElement, deltaX: number, deltaY: number): void;\n}\n\nconst scrollSubscriptions: Array<SubscriptionCallback> = [];\nconst canceledScrollSubscriptions: Map<HTMLElement, Array<SubscriptionCallback>> = new Map();\nconst lastScrollPosition: Map<HTMLElement, { x: number; y: number }> = new Map();\n\nconst scrollHandler = (event: Event) => {\n    const target = event.target as HTMLElement;\n    if (!target) {\n        return;\n    }\n\n    const lastPosition = lastScrollPosition.get(target) || null;\n    if (lastPosition === null) {\n        // если мы не знаем предыдущую позицию для данного скроллящегося контейнера, то мы не сможем посчитать дельту\n        // поэтому просто запоминаем текущую позицию и предотвращаем дальнейший обработку события\n        lastScrollPosition.set(target, { x: target.scrollLeft, y: target.scrollTop });\n        event.preventDefault();\n        event.stopPropagation();\n        return;\n    }\n\n    // обращения к scrollLeft и scrollTop вызывают рефлоу, поэтому кешируем их значения\n    const scrollValues = { scrollLeft: target.scrollLeft, scrollTop: target.scrollTop };\n    const scrollDelta = {\n        x: scrollValues.scrollLeft - lastPosition.x,\n        y: scrollValues.scrollTop - lastPosition.y,\n    };\n\n    lastScrollPosition.set(target, { x: scrollValues.scrollLeft, y: scrollValues.scrollTop });\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, scrollDelta.x, scrollDelta.y));\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\nconst updateDropTranslation = requestAnimation(\n    (\n        _,\n        params: {\n            dropRef: RefObject<HTMLElement>;\n            deltaX: number;\n            deltaY: number;\n            currentTranslationRef: MutableRefObject<{ x: number; y: number }>;\n        }\n    ) => {\n        const { dropRef, deltaX, deltaY, currentTranslationRef } = params;\n        if (!dropRef.current) {\n            return;\n        }\n        currentTranslationRef.current.x -= deltaX;\n        currentTranslationRef.current.y -= deltaY;\n        dropRef.current.style.transform = `translate3d(${currentTranslationRef.current.x}px, ${currentTranslationRef.current.y}px, 0)`;\n    }\n);\n\nexport const useScrollSubscription = (\n    activatorRef: RefObject<HTMLElement>,\n    dropRef: RefObject<HTMLElement>,\n    isVisible: boolean\n): void => {\n    /**\n     * список id скроллящихся элементов для которых была выполнена проверка\n     * влияет ли их скролл на взаимное положение активатора и дропа\n     */\n    const processedScrollContainers = useRef<Set<HTMLElement>>(new Set());\n    /**\n     * текущее значение трансформации дропа\n     * при каждом ререндере сбрасывается, т.к. дроп при каждом ререндере пересчитывает свою позицию\n     */\n    const currentTranslationRef = useRef({ x: 0, y: 0 });\n    currentTranslationRef.current = { x: 0, y: 0 };\n    /**\n     * ссылка на последнее значение расстояния между активатором и дропом,\n     * используется для определения изменения взаимного положения активатора и дропа\n     */\n    const visibleRef = useRef(isVisible);\n    visibleRef.current = isVisible;\n\n    const scrollCallback = useCallback(\n        (target: HTMLElement, deltaX: number, deltaY: number) => {\n            if (!visibleRef.current || !dropRef.current || !activatorRef.current) {\n                return;\n            }\n\n            // Если это первый скролл данного контейнера, то проверяем содержит ли он активатор и дроп\n            // Если он содержит только что-то одно, значит его скролл будет влиять на взаимное расположение дропа\n            // и активатора, в этом случае помечяем его как обработанный и меняем позицию дропа при его скролле.\n            // Если же он не влияет на взаимное расположение дропа и активатора, то отписываемся от дальнейших\n            // оповещений о его скролле.\n            if (!processedScrollContainers.current.has(target)) {\n                const targetContainsActivator = target.contains(activatorRef.current);\n                const targetContainsDrop = target.contains(dropRef.current);\n\n                if (targetContainsActivator === targetContainsDrop) {\n                    unsubscribeFromTarget(target, scrollCallback);\n                    return;\n                }\n                processedScrollContainers.current.add(target);\n            }\n\n            updateDropTranslation({ deltaX, deltaY, dropRef, currentTranslationRef });\n        },\n        [activatorRef, dropRef]\n    );\n\n    useEffect(() => {\n        // eslint-disable-next-line no-unused-expressions\n        isVisible ? reviveSubscription(scrollCallback) : suspendSubscription(scrollCallback);\n    }, [isVisible, scrollCallback]);\n\n    useEffect(() => {\n        return () => deleteScrollSubscription(scrollCallback);\n    }, [scrollCallback]);\n};\n"],"names":[],"mappings":"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"}

package/types.d.ts

@@ -0,0 +1,210 @@
+import type { RefObject, ReactNode, CSSProperties } from 'react';
+import type { CSSTransitionClassNames } from 'react-transition-group/CSSTransition';
+export interface DropBasePermanentProps {
+    /** DOM нода хоста в рамках которого нужно рендерить компонент, по дефолту рендер будет в body */
+    host?: RefObject<HTMLElement>;
+    /** Флаг отвечает за показ компонента, `true` — показать, `false` — скрыть */
+    visible?: boolean;
+    /** Элемент активатор, относительно которого показывать всплывающую подсказку */
+    activatorRef: RefObject<HTMLElement>;
+    /** Расстояние от края DropBase до середины стрелки, если стрелки нет — то не указывать*/
+    arrowGuardDistance?: ArrowGuardDistance;
+    /** Задает виртуальный viewport */
+    preferredViewport?: RefObject<HTMLElement>;
+    /** Рендер функция, которая должна вернуть сам Drop, в аргументах передается вычисляемая позиция */
+    children: (props: DropBaseHorizontalPosition | DropBaseVerticalPosition | DropBaseVerticalPositionWithoutCenter | DropBaseHorizontalPositionWithoutCenter, metrics: RenderFuncMetricsArgs) => ReactNode;
+    /**
+     * Колбек вызываемый при необходимости закрыть компонент в результате внешних событий. Например при клике
+     * вовне дропа или при перекрытии активатора другим элементом. Должен устанавливать флаг visible в false.
+     * */
+    onClose?: VoidFunction;
+    /** Флаг — закрывать ли компонент по клику извне */
+    closeByClickOutside?: boolean;
+    /** Флаг — устанавливать ли фокус внутри дропа при открытии */
+    autoFocusWhenOpened?: boolean;
+    /** Маппинг классов для анимации свойство classNames в CSSTransition */
+    animationClassNames: CSSTransitionClassNames;
+    /** Время анимации в ms, свойство timeout в CSSTransition */
+    animationTimeout: number | {
+        appear?: number | undefined;
+        enter?: number | undefined;
+        exit?: number | undefined;
+    };
+    /** Защитное расстояние в px от активатора до DropBase */
+    guardDistance?: number;
+    /** Aria role для задания семантики в screen reader */
+    role?: string;
+    /** Флаг позволяет занять максимально возможную высоту компоненту, по viewport */
+    occupyAllAvailableViewportHeight?: boolean;
+    /**
+     * Флаг, при выставлении которого в true DropBase будет выпадать в указанном направлении даже
+     * если при этом он не умещается во Viewport
+     * */
+    forcePosition?: boolean;
+    /** Флаг включающий автоматическое выставление ширины равной ширине активатора */
+    widthEqualToActivator?: boolean;
+    /** Флаг — включена ли стрелочная навигация среди элементов в выпадающем слое */
+    arrowNavigation?: boolean;
+    /** Флаг отключающий вызов onClose при пересечении активатора с другим элементом на странице */
+    ignoreIntersections?: boolean;
+    style?: CSSProperties;
+}
+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;
+}
+export {};

package/types.js

@@ -0,0 +1,3 @@
+import './index.css';
+
+//# sourceMappingURL=types.js.map

package/types.js.map

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

package/useRenderParams.d.ts

@@ -0,0 +1,53 @@
+import { RefObject } from 'react';
+import type { ActivatorOffset, DropBaseProps, DropMetrics, CustomVisualViewport, ArrowGuardDistance, DOMRectLike, DropBaseHorizontalPosition, DropBaseVerticalPosition, DropBaseHorizontalPositionWithoutCenter, DropBaseVerticalPositionWithoutCenter, Metrics } from './types';
+export declare const allowedAlignmentForVerticalDirection: readonly ["left", "right", "center"];
+export declare const allowedAlignmentForHorizontalDirection: readonly ["top", "bottom", "center"];
+export declare const allowedAlignmentForVerticalDirectionWithoutCenter: readonly ["left", "right"];
+export declare const allowedAlignmentForHorizontalDirectionWithoutCenter: readonly ["top", "bottom"];
+export declare const verticalDirections: readonly ["top", "bottom"];
+export declare const horizontalDirections: readonly ["left", "right"];
+export declare const START_OFFSET = -10000;
+export declare const INITIAL_HEIGHT_VALUE = "force-initial-height";
+interface FindDynamicPositionHor {
+    directions: typeof horizontalDirections;
+    alignments: typeof allowedAlignmentForHorizontalDirection | typeof allowedAlignmentForHorizontalDirectionWithoutCenter;
+}
+interface FindDynamicPositionVert {
+    directions: typeof verticalDirections;
+    alignments: typeof allowedAlignmentForVerticalDirection | typeof allowedAlignmentForVerticalDirectionWithoutCenter;
+}
+interface FindDynamicPositionElementMetrics {
+    activatorMetrics: DOMRect;
+    dropMetrics: DOMRectLike;
+    viewportMetrics: CustomVisualViewport;
+    activatorOffset: ActivatorOffset;
+    forceFitIntoViewport?: boolean;
+    guardDistance: number;
+    arrowGuardDistance?: ArrowGuardDistance;
+    occupyAllAvailableViewportHeight: boolean;
+}
+type ResultPosition = {
+    viewportMetrics: CustomVisualViewport;
+    hasScroll?: boolean;
+    dropMetricsRelativeToViewport: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
+    dropMetrics: DropMetrics;
+} & (DropBaseHorizontalPosition | DropBaseVerticalPosition | DropBaseHorizontalPositionWithoutCenter | DropBaseVerticalPositionWithoutCenter);
+type GetDropMetricsByPositionAndAlignment<T extends DropBaseHorizontalPosition | DropBaseVerticalPosition | DropBaseHorizontalPositionWithoutCenter | DropBaseVerticalPositionWithoutCenter> = FindDynamicPositionElementMetrics & Pick<DropBaseProps<T>, 'direction' | 'alignment'>;
+export declare const getDropMetricsByPositionAndAlignment: <T extends DropBaseHorizontalPosition | DropBaseVerticalPosition | DropBaseVerticalPositionWithoutCenter | DropBaseHorizontalPositionWithoutCenter>({ activatorMetrics, dropMetrics, viewportMetrics, direction, alignment, arrowGuardDistance, activatorOffset, forceFitIntoViewport, guardDistance, occupyAllAvailableViewportHeight, }: GetDropMetricsByPositionAndAlignment<T>) => ResultPosition | null;
+export declare function findDynamicPosition<T extends FindDynamicPositionHor | FindDynamicPositionVert>({ activatorMetrics, arrowGuardDistance, dropMetrics, viewportMetrics, activatorOffset, guardDistance, occupyAllAvailableViewportHeight, }: FindDynamicPositionElementMetrics, { directions, alignments }: T): ResultPosition | null;
+export type RenderParamsProps<T extends DropBaseHorizontalPosition | DropBaseVerticalPosition | DropBaseHorizontalPositionWithoutCenter | DropBaseVerticalPositionWithoutCenter> = Omit<DropBaseProps<T>, 'children' | 'animationClassNames' | 'animationTimeout' | 'guardDistance' | 'role'> & {
+    dropElementRef: RefObject<HTMLElement>;
+    dropScrollableContainerRef: RefObject<HTMLElement>;
+    guardDistance: number;
+    widthEqualToActivator?: boolean;
+};
+export declare const useRenderParams: <T extends DropBaseHorizontalPosition | DropBaseVerticalPosition | DropBaseVerticalPositionWithoutCenter | DropBaseHorizontalPositionWithoutCenter>({ direction, alignment, activatorRef, dropElementRef, host, arrowGuardDistance, preferredViewport, visible, guardDistance, occupyAllAvailableViewportHeight, dropScrollableContainerRef, forcePosition, widthEqualToActivator, }: RenderParamsProps<T>) => {
+    metrics: Metrics;
+    position: DropBaseHorizontalPosition | DropBaseVerticalPosition | DropBaseHorizontalPositionWithoutCenter | DropBaseVerticalPositionWithoutCenter;
+};
+export {};