@via-profit/ui-kit 0.4.0 → 0.6.0

package/esm/Popper/Popper.js

@@ -0,0 +1,97 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Container from './PopperContainer';
+import { usePopper } from './usePopper';
+export * from './usePopper';
+export const PORTAL_ID = 'ui-kit-portal';
+const Popper = (props, ref) => {
+    const { isOpen, children, anchorElement, zIndex, overrides, anchorPos = 'auto', positionStrategy = 'fixed', viewportMargin = 30, autoFlip = false, alternativePlacements, offset = 0, onAnchorPosChanged } = props, nativeProps = __rest(props, ["isOpen", "children", "anchorElement", "zIndex", "overrides", "anchorPos", "positionStrategy", "viewportMargin", "autoFlip", "alternativePlacements", "offset", "onAnchorPosChanged"]);
+    const [domLoaded, setDomLoaded] = React.useState(false);
+    const { actualPlacement, style, popperRef, isVisible } = usePopper({
+        anchorElement,
+        anchorPos,
+        positionStrategy,
+        autoFlip,
+        offset,
+        viewportMargin,
+        alternativePlacements,
+        isOpen,
+    });
+    const overridesMap = React.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
+    }), [overrides]);
+    /**
+     * Client render detection
+     */
+    React.useEffect(() => {
+        setDomLoaded(true);
+    }, []);
+    const portalEl = React.useMemo(() => {
+        if (typeof window === 'undefined') {
+            return undefined;
+        }
+        const node = window.document.body.querySelector(`#${PORTAL_ID}`);
+        if (node) {
+            return node;
+        }
+        const newNode = window.document.createElement('div');
+        newNode.setAttribute('id', PORTAL_ID);
+        window.document.body.appendChild(newNode);
+        return newNode;
+    }, []);
+    const onAnchorPosChangedRef = React.useRef(onAnchorPosChanged);
+    onAnchorPosChangedRef.current = onAnchorPosChanged;
+    const prevPlacementRef = React.useRef(actualPlacement);
+    React.useEffect(() => {
+        var _a;
+        if (prevPlacementRef.current !== actualPlacement) {
+            prevPlacementRef.current = actualPlacement;
+            (_a = onAnchorPosChangedRef.current) === null || _a === void 0 ? void 0 : _a.call(onAnchorPosChangedRef, actualPlacement);
+        }
+    }, [actualPlacement]);
+    const childrenMemo = React.useMemo(() => children, [children]);
+    const renderNode = React.useCallback(() => (React.createElement(overridesMap.Container, Object.assign({}, nativeProps, { style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), nativeProps.style), { opacity: isVisible ? 1 : 0, pointerEvents: isVisible ? 'auto' : 'none' }), (positionStrategy === 'fixed' && {
+            position: 'fixed',
+        })), zIndex: zIndex, positionStrategy: positionStrategy, "data-popper-placement": actualPlacement, "data-popper-strategy": positionStrategy, ref: el => {
+            popperRef.current = el;
+            if (ref) {
+                if (typeof ref === 'function') {
+                    ref(el);
+                }
+                if (typeof ref === 'object') {
+                    ref.current = el;
+                }
+            }
+        } }), childrenMemo)), [
+        overridesMap,
+        nativeProps,
+        style,
+        isVisible,
+        // getTransformOrigin,
+        actualPlacement,
+        positionStrategy,
+        zIndex,
+        childrenMemo,
+        popperRef,
+        ref,
+    ]);
+    if (!isOpen) {
+        return null;
+    }
+    if (positionStrategy === 'fixed') {
+        return domLoaded && portalEl ? ReactDOM.createPortal(renderNode(), portalEl, PORTAL_ID) : null;
+    }
+    return renderNode();
+};
+export default React.forwardRef(Popper);

package/esm/Popper/PopperContainer.js

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledContainer = styled.div `
+  position: ${({ $positionStrategy }) => $positionStrategy};
+  z-index: ${({ theme, $zIndex, $positionStrategy }) => {
+    if (typeof $zIndex !== 'undefined') {
+        return $zIndex;
+    }
+    return $positionStrategy === 'fixed' ? theme.zIndex.modal : undefined;
+}};
+`;
+const PopperContainer = (props, ref) => {
+    const { children, zIndex, positionStrategy = 'fixed' } = props, nativeProps = __rest(props, ["children", "zIndex", "positionStrategy"]);
+    return (React.createElement(StyledContainer, Object.assign({ "$zIndex": zIndex, "$positionStrategy": positionStrategy }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(PopperContainer);

package/esm/Popper/index.js

@@ -0,0 +1,5 @@
+import Popper from './Popper';
+export * from './Popper';
+export * from './PopperContainer';
+export * from './usePopper';
+export default Popper;

package/esm/Popper/usePopper.js

@@ -0,0 +1,514 @@
+import React from 'react';
+/**
+ * Finds the closest scrollable ancestor of an element.
+ * A scrollable element is one that has overflow set to auto, scroll, or overlay
+ * and has content that overflows, allowing scrolling.
+ *
+ * @param element - The element to start searching from
+ * @param includeHidden - Whether to consider elements with overflow: hidden
+ * @returns The closest scrollable ancestor or window if none found
+ */
+export const findScrollableAncestor = (element, includeHidden = false) => {
+    if (!element) {
+        return null;
+    }
+    // Helper to check if an element is scrollable
+    const isScrollable = (el) => {
+        const style = window.getComputedStyle(el);
+        const overflow = style.overflow + style.overflowY + style.overflowX;
+        // Check if element has overflow that enables scrolling
+        const hasOverflow = overflow.includes('auto') ||
+            overflow.includes('scroll') ||
+            (includeHidden && overflow.includes('hidden'));
+        if (!hasOverflow) {
+            return false;
+        }
+        // Check if element actually has scrollable content
+        return el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
+    };
+    // Start from parent (skip the element itself)
+    let parent = element.parentElement;
+    while (parent) {
+        if (isScrollable(parent)) {
+            return parent;
+        }
+        parent = parent.parentElement;
+    }
+    // If no scrollable ancestor found, return window (which is scrollable)
+    return window;
+};
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+export const usePopper = (props) => {
+    const { anchorElement, anchorPos = 'auto', positionStrategy = 'fixed', autoFlip = false, offset = 0, viewportMargin = 10, isOpen = false, alternativePlacements, } = props;
+    const [actualPlacement, setActualPlacement] = React.useState(anchorPos);
+    const [style, setStyle] = React.useState(null);
+    const [isVisible, setIsVisible] = React.useState(false);
+    const popperRef = React.useRef(null);
+    // Finding the nearest scrollable ancestor
+    const scrollableAncestor = React.useMemo(() => {
+        if (!anchorElement || typeof window === 'undefined') {
+            return null;
+        }
+        return findScrollableAncestor(anchorElement);
+    }, [anchorElement]);
+    // Reset actualPlacement only when the preferred placement itself changes.
+    // Comparing with actualPlacement here would immediately revert every flip.
+    const prevAnchorPosRef = React.useRef(anchorPos);
+    React.useEffect(() => {
+        if (prevAnchorPosRef.current !== anchorPos) {
+            prevAnchorPosRef.current = anchorPos;
+            setActualPlacement(anchorPos);
+        }
+    }, [anchorPos]);
+    const getPositionStyle = React.useCallback((props) => {
+        var _a;
+        const { place, anchorRect, popperRect, forViewportCheck = false } = props;
+        const [direction, modifier = ''] = place.split('-');
+        let left = anchorRect.left;
+        let top = anchorRect.top;
+        let width = undefined;
+        // Calculating the position relative to the viewport
+        switch (direction) {
+            case 'top':
+                top = anchorRect.top - popperRect.height - offset;
+                if (modifier === 'fill') {
+                    left = anchorRect.left;
+                    width = anchorRect.width;
+                }
+                else if (modifier === 'left' || modifier === 'start') {
+                    left = anchorRect.left;
+                }
+                else if (modifier === 'right' || modifier === 'end') {
+                    left = anchorRect.right - popperRect.width;
+                }
+                else {
+                    left = anchorRect.left + (anchorRect.width - popperRect.width) / 2;
+                }
+                break;
+            case 'bottom':
+                top = anchorRect.bottom + offset;
+                if (modifier === 'fill') {
+                    left = anchorRect.left;
+                    width = anchorRect.width;
+                }
+                else if (modifier === 'left' || modifier === 'start') {
+                    left = anchorRect.left;
+                }
+                else if (modifier === 'right' || modifier === 'end') {
+                    left = anchorRect.right - popperRect.width;
+                }
+                else {
+                    left = anchorRect.left + (anchorRect.width - popperRect.width) / 2;
+                }
+                break;
+            case 'left':
+                left = anchorRect.left - popperRect.width - offset;
+                if (modifier === 'top' || modifier === 'start') {
+                    top = anchorRect.top;
+                }
+                else if (modifier === 'bottom' || modifier === 'end') {
+                    top = anchorRect.bottom - popperRect.height;
+                }
+                else {
+                    top = anchorRect.top + (anchorRect.height - popperRect.height) / 2;
+                }
+                break;
+            case 'right':
+                left = anchorRect.right + offset;
+                if (modifier === 'top' || modifier === 'start') {
+                    top = anchorRect.top;
+                }
+                else if (modifier === 'bottom' || modifier === 'end') {
+                    top = anchorRect.bottom - popperRect.height;
+                }
+                else {
+                    top = anchorRect.top + (anchorRect.height - popperRect.height) / 2;
+                }
+                break;
+            default:
+                left = anchorRect.left + (anchorRect.width - popperRect.width) / 2;
+                top = anchorRect.bottom + offset;
+        }
+        // Returning the viewport coordinates for verification or the final coordinates
+        if (forViewportCheck) {
+            return { left, top, width };
+        }
+        // For the final positioning, we take into account the strategy
+        if (positionStrategy === 'absolute') {
+            // Для absolute позиционирования нужно учитывать:
+            // 1. Прокрутку страницы (scrollX/scrollY)
+            // 2. Позицию относительно ближайшего positioned ancestor
+            // Получаем offset родителя с позиционированием
+            let offsetParent = ((_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.offsetParent) || null;
+            // Если нет offsetParent или это body, используем document.documentElement
+            if (!offsetParent || offsetParent === document.body) {
+                offsetParent = document.documentElement;
+            }
+            const offsetParentRect = offsetParent.getBoundingClientRect();
+            // Вычисляем позицию относительно offsetParent
+            // left/top уже относительно viewport, вычитаем позицию offsetParent
+            let relativeLeft = left - offsetParentRect.left;
+            let relativeTop = top - offsetParentRect.top;
+            // Добавляем прокрутку offsetParent (если он скроллится)
+            if (offsetParent !== document.documentElement && offsetParent !== document.body) {
+                relativeLeft += offsetParent.scrollLeft || 0;
+                relativeTop += offsetParent.scrollTop || 0;
+            }
+            else {
+                // Для document.documentElement используем window.scroll
+                relativeLeft += window.scrollX;
+                relativeTop += window.scrollY;
+            }
+            return {
+                left: relativeLeft,
+                top: relativeTop,
+                width,
+            };
+        }
+        return { left, top, width };
+    }, [offset, positionStrategy]);
+    const clampPopperToContainer = React.useCallback((style, popperRect) => {
+        if (positionStrategy === 'absolute') {
+            return style;
+        }
+        const viewportMinLeft = viewportMargin;
+        const viewportMaxLeft = window.innerWidth - popperRect.width - viewportMargin;
+        const viewportMinTop = viewportMargin;
+        const viewportMaxTop = window.innerHeight - popperRect.height - viewportMargin;
+        return {
+            left: Math.max(viewportMinLeft, Math.min(style.left, viewportMaxLeft)),
+            top: Math.max(viewportMinTop, Math.min(style.top, viewportMaxTop)),
+            width: style.width,
+        };
+    }, [positionStrategy, viewportMargin]);
+    const checkIfViewportFits = React.useCallback((style, popperRect) => {
+        const left = style.left;
+        const top = style.top;
+        const right = left + popperRect.width;
+        const bottom = top + popperRect.height;
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const isWithinHorizontal = left >= viewportMargin && right <= viewportWidth - viewportMargin;
+        const isWithinVertical = top >= viewportMargin && bottom <= viewportHeight - viewportMargin;
+        return isWithinHorizontal && isWithinVertical;
+    }, [viewportMargin]);
+    const placementsOrder = React.useMemo(() => {
+        const basePlacements = {
+            top: ['top', 'top-left', 'top-right', 'top-start', 'top-end'],
+            bottom: ['bottom', 'bottom-left', 'bottom-right', 'bottom-start', 'bottom-end'],
+            left: ['left', 'left-top', 'left-bottom'],
+            right: ['right', 'right-top', 'right-bottom'],
+        };
+        const allPlacements = [
+            ...basePlacements.top,
+            ...basePlacements.bottom,
+            ...basePlacements.left,
+            ...basePlacements.right,
+        ];
+        const order = {};
+        allPlacements.forEach(placement => {
+            const [direction] = placement.split('-');
+            // Priority: same direction > opposite > the rest
+            const opposite = direction === 'top'
+                ? 'bottom'
+                : direction === 'bottom'
+                    ? 'top'
+                    : direction === 'left'
+                        ? 'right'
+                        : 'left';
+            order[placement] = [
+                placement,
+                ...basePlacements[direction].filter(p => p !== placement),
+                ...(basePlacements[opposite] || []),
+                ...(direction !== 'left' && direction !== 'right' ? basePlacements.left : []),
+                ...(direction !== 'left' && direction !== 'right' ? basePlacements.right : []),
+            ];
+        });
+        // console.log(order);
+        return order;
+    }, []);
+    // #region Get Preferred Placements
+    const getPreferredPlacements = React.useCallback((preferredPlacement, anchorRect, popperRect) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const tryPlacement = (placement) => {
+            const viewportStyle = getPositionStyle({
+                place: placement,
+                anchorRect,
+                popperRect,
+                forViewportCheck: true,
+            });
+            if (!checkIfViewportFits(viewportStyle, popperRect)) {
+                return null;
+            }
+            const finalStyle = getPositionStyle({
+                place: placement,
+                anchorRect,
+                popperRect,
+                forViewportCheck: false,
+            });
+            return {
+                found: true,
+                placement,
+                style: clampPopperToContainer(finalStyle, popperRect),
+            };
+        };
+        const fallback = (placement) => {
+            const finalStyle = getPositionStyle({
+                place: placement,
+                anchorRect,
+                popperRect,
+                forViewportCheck: false,
+            });
+            return {
+                found: false,
+                placement,
+                style: clampPopperToContainer(finalStyle, popperRect),
+            };
+        };
+        const isAuto = preferredPlacement.startsWith('auto');
+        const isFill = preferredPlacement.endsWith('fill');
+        // -------------------------------------------------------
+        // 1. EXPLICIT (top, bottom, left, right, top-left, ...)
+        // -------------------------------------------------------
+        if (!isAuto && !isFill) {
+            if (!autoFlip) {
+                return (_a = tryPlacement(preferredPlacement)) !== null && _a !== void 0 ? _a : fallback(preferredPlacement);
+            }
+            // Формируем порядок без дубликатов
+            const order = Array.from(new Set([
+                preferredPlacement,
+                ...((_b = alternativePlacements === null || alternativePlacements === void 0 ? void 0 : alternativePlacements.filter(p => !p.startsWith('auto') && !p.endsWith('fill'))) !== null && _b !== void 0 ? _b : []),
+                ...((_c = placementsOrder[preferredPlacement]) !== null && _c !== void 0 ? _c : []),
+            ]));
+            for (const p of order) {
+                const r = tryPlacement(p);
+                if (r)
+                    return r;
+            }
+            return fallback(preferredPlacement);
+        }
+        // -------------------------------------------------------
+        // 2. FILL (bottom-fill, top-fill)
+        // -------------------------------------------------------
+        if (isFill) {
+            const [dir] = preferredPlacement.split('-');
+            if (!autoFlip) {
+                return (_d = tryPlacement(preferredPlacement)) !== null && _d !== void 0 ? _d : fallback(preferredPlacement);
+            }
+            const opposite = dir === 'bottom' ? 'top-fill' : 'bottom-fill';
+            // Формируем порядок: fill сначала, потом обычные позиции из альтернатив, потом дефолтные
+            const order = Array.from(new Set([
+                preferredPlacement,
+                opposite,
+                // Обычные позиции из alternativePlacements (не auto и не fill)
+                ...((_e = alternativePlacements === null || alternativePlacements === void 0 ? void 0 : alternativePlacements.filter(p => !p.startsWith('auto') && !p.endsWith('fill'))) !== null && _e !== void 0 ? _e : []),
+                // Обычные позиции из дефолтного порядка (не fill)
+                ...((_g = (_f = placementsOrder[preferredPlacement]) === null || _f === void 0 ? void 0 : _f.filter(p => !p.endsWith('fill'))) !== null && _g !== void 0 ? _g : []),
+            ]));
+            for (const p of order) {
+                const r = tryPlacement(p);
+                if (r)
+                    return r;
+            }
+            return fallback(preferredPlacement);
+        }
+        // -------------------------------------------------------
+        // 3. AUTO
+        // -------------------------------------------------------
+        if (isAuto) {
+            // Если autoFlip выключен - просто используем дефолтное направление
+            if (!autoFlip) {
+                const [, dir = 'bottom'] = preferredPlacement.split('-');
+                const defaultPlacement = dir;
+                return (_h = tryPlacement(defaultPlacement)) !== null && _h !== void 0 ? _h : fallback(defaultPlacement);
+            }
+            const [, dir = 'bottom'] = preferredPlacement.split('-');
+            const base = (alternativePlacements === null || alternativePlacements === void 0 ? void 0 : alternativePlacements.length)
+                ? alternativePlacements
+                : [
+                    'bottom',
+                    'bottom-start',
+                    'bottom-end',
+                    'bottom-left',
+                    'bottom-right',
+                    'top',
+                    'top-left',
+                    'top-right',
+                    'top-start',
+                    'top-end',
+                    'left',
+                    'left-top',
+                    'left-bottom',
+                    'right',
+                    'right-top',
+                    'right-bottom',
+                ];
+            const sorted = [...base].sort((a, b) => {
+                const ad = a.split('-')[0];
+                const bd = b.split('-')[0];
+                if (ad === dir && bd !== dir)
+                    return -1;
+                if (ad !== dir && bd === dir)
+                    return 1;
+                return 0;
+            });
+            for (const p of sorted) {
+                const r = tryPlacement(p);
+                if (r)
+                    return r;
+            }
+            return fallback(dir);
+        }
+        // -------------------------------------------------------
+        // 4. SUPER FALLBACK
+        // -------------------------------------------------------
+        return fallback('bottom');
+    }, [
+        autoFlip,
+        getPositionStyle,
+        checkIfViewportFits,
+        clampPopperToContainer,
+        placementsOrder,
+        alternativePlacements,
+    ]);
+    // #region Calculate Position
+    const calculatePosition = React.useCallback(() => {
+        if (!anchorElement || !popperRef.current) {
+            return;
+        }
+        const anchorRect = anchorElement.getBoundingClientRect();
+        const popperRect = popperRef.current.getBoundingClientRect();
+        const { style, placement } = getPreferredPlacements(anchorPos, anchorRect, popperRect);
+        setActualPlacement(placement);
+        setStyle(style);
+    }, [anchorElement, anchorPos, getPreferredPlacements]);
+    const frameRef = React.useRef(null);
+    const scheduleUpdate = React.useCallback(() => {
+        if (frameRef.current !== null) {
+            return;
+        }
+        frameRef.current = window.requestAnimationFrame(() => {
+            frameRef.current = null;
+            calculatePosition();
+        });
+    }, [calculatePosition]);
+    // Cancel the pending frame on unmount
+    React.useEffect(() => () => {
+        if (frameRef.current !== null) {
+            window.cancelAnimationFrame(frameRef.current);
+            frameRef.current = null;
+        }
+    }, []);
+    /**
+     * Close popper logic
+     */
+    React.useEffect(() => {
+        if (!isOpen) {
+            setIsVisible(false);
+            setStyle(null);
+        }
+    }, [isOpen]);
+    /**
+     * Open popper logic.
+     * Runs after every render because the popper node can appear later than `isOpen`
+     * becomes true (e.g. the portal is rendered only after the client mount)
+     */
+    useIsomorphicLayoutEffect(() => {
+        if (isOpen && !isVisible && anchorElement && popperRef.current) {
+            calculatePosition();
+            setIsVisible(true);
+        }
+    });
+    /**
+     * Recalculate position when the positioning params are changed
+     */
+    React.useEffect(() => {
+        if (isOpen && isVisible) {
+            calculatePosition();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [calculatePosition]);
+    /**
+     * The anchor element changes
+     */
+    React.useEffect(() => {
+        if (!isOpen || !anchorElement) {
+            return;
+        }
+        const observer = new MutationObserver(scheduleUpdate);
+        observer.observe(anchorElement, {
+            attributes: true,
+            childList: true,
+            subtree: true,
+        });
+        // eslint-disable-next-line consistent-return
+        return () => {
+            observer.disconnect();
+        };
+    }, [isOpen, anchorElement, scheduleUpdate]);
+    /**
+     * The size of the anchor or popper changes
+     */
+    React.useEffect(() => {
+        if (!isOpen || !isVisible || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(scheduleUpdate);
+        if (anchorElement) {
+            observer.observe(anchorElement);
+        }
+        if (popperRef.current) {
+            observer.observe(popperRef.current);
+        }
+        // eslint-disable-next-line consistent-return
+        return () => {
+            observer.disconnect();
+        };
+    }, [isOpen, isVisible, anchorElement, scheduleUpdate]);
+    /**
+     * On scroll of any ancestor (captured on window) - recalculate position
+     */
+    React.useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+        const handleScroll = (event) => {
+            var _a;
+            // Scrolling inside the popper does not move it
+            if (event.target instanceof Node && ((_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+                return;
+            }
+            scheduleUpdate();
+        };
+        window.addEventListener('scroll', handleScroll, { passive: true, capture: true });
+        // eslint-disable-next-line consistent-return
+        return () => {
+            window.removeEventListener('scroll', handleScroll, { capture: true });
+        };
+    }, [isOpen, scheduleUpdate]);
+    /**
+     * On window resize - recalculate position
+     */
+    React.useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+        window.addEventListener('resize', scheduleUpdate);
+        // eslint-disable-next-line consistent-return
+        return () => {
+            window.removeEventListener('resize', scheduleUpdate);
+        };
+    }, [scheduleUpdate, isOpen]);
+    return {
+        actualPlacement,
+        style,
+        popperRef,
+        isVisible,
+        scrollableAncestor,
+        calculatePosition,
+        setActualPlacement,
+        setStyle,
+        setIsVisible,
+    };
+};
+export default usePopper;