@via-profit/ui-kit 0.1.8 → 0.2.1-alpha.3

package/Popper/Popper.js

@@ -0,0 +1,113 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PORTAL_ID = void 0;
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const PopperContainer_1 = __importDefault(require("./PopperContainer"));
+const usePopprer_1 = require("./usePopprer");
+__exportStar(require("./usePopprer"), exports);
+exports.PORTAL_ID = 'ui-kit-portal';
+const Popper = (props, ref) => {
+    const { isOpen, children, anchorElement, zIndex, overrides, anchorPos = 'auto', positionStrategy = 'fixed', viewportMargin = 30, autoFlip = true, offset = 0, onAnchorPosChanged } = props, nativeProps = __rest(props, ["isOpen", "children", "anchorElement", "zIndex", "overrides", "anchorPos", "positionStrategy", "viewportMargin", "autoFlip", "offset", "onAnchorPosChanged"]);
+    const [domLoaded, setDomLoaded] = react_1.default.useState(false);
+    const { actualPlacement, style, popperRef, isVisible } = (0, usePopprer_1.usePopper)({
+        anchorElement,
+        anchorPos,
+        positionStrategy,
+        autoFlip,
+        offset,
+        viewportMargin,
+        isOpen,
+    });
+    const overridesMap = react_1.default.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || PopperContainer_1.default,
+    }), [overrides]);
+    /**
+     * Client render detection
+     */
+    react_1.default.useEffect(() => {
+        setDomLoaded(true);
+    }, []);
+    const portalEl = react_1.default.useMemo(() => {
+        if (typeof window === 'undefined') {
+            return undefined;
+        }
+        const node = window.document.body.querySelector(`#${exports.PORTAL_ID}`);
+        if (node) {
+            return node;
+        }
+        const newNode = window.document.createElement('div');
+        newNode.setAttribute('id', exports.PORTAL_ID);
+        if (positionStrategy === 'absolute') {
+            newNode.style.position = 'relative';
+        }
+        window.document.body.appendChild(newNode);
+        return newNode;
+    }, [positionStrategy]);
+    react_1.default.useEffect(() => {
+        if (anchorPos !== actualPlacement && typeof onAnchorPosChanged === 'function') {
+            onAnchorPosChanged(actualPlacement);
+        }
+    }, [anchorPos, actualPlacement, onAnchorPosChanged]);
+    const renderNode = react_1.default.useCallback(() => (react_1.default.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' && {
+            zIndex: zIndex,
+        })), 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;
+                }
+            }
+        } }), children)), [
+        overridesMap,
+        nativeProps,
+        style,
+        isVisible,
+        // getTransformOrigin,
+        actualPlacement,
+        positionStrategy,
+        zIndex,
+        children,
+        popperRef,
+        ref,
+    ]);
+    if (!isOpen) {
+        return null;
+    }
+    if (positionStrategy === 'fixed') {
+        return domLoaded && portalEl ? react_dom_1.default.createPortal(renderNode(), portalEl, exports.PORTAL_ID) : null;
+    }
+    return renderNode();
+};
+exports.default = react_1.default.forwardRef(Popper);

package/Popper/PopperContainer.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
+export type PositionStrategy = 'absolute' | 'fixed';
 export interface PopperContainerProps extends React.HTMLAttributes<HTMLDivElement> {
     readonly zIndex?: number;
     readonly disablePortal?: boolean;
+    readonly positionStrategy?: PositionStrategy;
 }
 declare const _default: React.ForwardRefExoticComponent<PopperContainerProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Popper/PopperContainer.js

@@ -17,14 +17,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const StyledContainer = styled_1.default.div `
+  position: ${({ $positionStrategy }) => $positionStrategy};
   z-index: ${({ theme, $zIndex, $disablePortal }) => typeof $zIndex !== 'undefined' ? $zIndex : $disablePortal ? undefined : theme.zIndex.modal};
-  pointer-events: none;
-  & > * {
-    pointer-events: all;
-  }
 `;
 const PopperContainer = (props, ref) => {
-    const { children, disablePortal, zIndex } = props, nativeProps = __rest(props, ["children", "disablePortal", "zIndex"]);
-    return (react_1.default.createElement(StyledContainer, Object.assign({ "$disablePortal": disablePortal, "$zIndex": zIndex }, nativeProps, { ref: ref }), children));
+    const { children, disablePortal, zIndex, positionStrategy = 'fixed' } = props, nativeProps = __rest(props, ["children", "disablePortal", "zIndex", "positionStrategy"]);
+    return (react_1.default.createElement(StyledContainer, Object.assign({ "$disablePortal": disablePortal, "$zIndex": zIndex, "$positionStrategy": positionStrategy }, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(PopperContainer);

package/Popper/index.d.ts

@@ -1,22 +1,5 @@
-import React from 'react';
-import { PopperContainerProps } from './PopperContainer';
-export type AnchorPos = 'auto' | 'auto-start-end' | 'top-start' | 'top-end' | 'top' | 'bottom' | 'top-start-end' | 'bottom-start-end' | 'bottom-start' | 'bottom-end' | 'static';
-export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
-    readonly isOpen: boolean;
-    readonly anchorElement?: HTMLElement | null;
-    readonly anchorPos?: AnchorPos;
-    readonly zindex?: number;
-    /**
-     * Overridable components map
-     */
-    readonly overrides?: PopperOverrides;
-}
-export interface PopperOverrides {
-    /**
-     * Popper Container
-     */
-    readonly Container?: React.ForwardRefExoticComponent<PopperContainerProps & React.RefAttributes<HTMLDivElement>>;
-}
-export declare const PORTAL_ID = "ui-kit-portal";
-declare const _default: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+import Popper from './Popper';
+export * from './Popper';
+export * from './PopperContainer';
+export * from './usePopprer';
+export default Popper;

package/Popper/index.js

@@ -1,270 +1,24 @@
 "use strict";
-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;
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PORTAL_ID = void 0;
-const react_1 = __importDefault(require("react"));
-const react_dom_1 = __importDefault(require("react-dom"));
-const PopperContainer_1 = __importDefault(require("./PopperContainer"));
-exports.PORTAL_ID = 'ui-kit-portal';
-const Popper = (props, ref) => {
-    const { isOpen, children, anchorElement, zindex, overrides, anchorPos = 'auto' } = props, nativeProps = __rest(props, ["isOpen", "children", "anchorElement", "zindex", "overrides", "anchorPos"]);
-    const [style, setStyle] = react_1.default.useState(null);
-    const [domLoaded, setDomLoaded] = react_1.default.useState(false);
-    const disablePortal = react_1.default.useMemo(() => anchorPos === 'static', [anchorPos]);
-    if (anchorPos !== 'static' && typeof anchorElement === 'undefined') {
-        throw new Error('[@via-profit/ui-kit] When the «anchorPos» is «satic» then «anchorElement» most be an element or null, but got undefined');
-    }
-    // if (anchorPos === 'static' && !disablePortal) {
-    //   throw new Error(
-    //     '[@via-profit/ui-kit] When the «anchorPos» is «satic» then «disablePortal» most be false',
-    //   );
-    // }
-    const overridesMap = react_1.default.useMemo(() => ({
-        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || PopperContainer_1.default,
-    }), [overrides]);
-    /**
-     * Client render detection
-     */
-    react_1.default.useEffect(() => {
-        if (!disablePortal) {
-            setDomLoaded(true);
-        }
-    }, [disablePortal]);
-    const portalEl = react_1.default.useMemo(() => {
-        if (typeof window === 'undefined') {
-            return undefined;
-        }
-        const node = window.document.body.querySelector(`#${exports.PORTAL_ID}`);
-        if (node) {
-            return node;
-        }
-        const newNode = window.document.createElement('div');
-        newNode.setAttribute('id', exports.PORTAL_ID);
-        window.document.body.appendChild(newNode);
-        return newNode;
-    }, []);
-    const calculateStyles = react_1.default.useCallback(() => {
-        // For a static placement
-        if (anchorPos === 'static') {
-            setStyle({
-                // backgroundColor: 'rgba(123, 255, 0, 0.5)',
-                position: 'static',
-            });
-            return;
-        }
-        // For a dinamic position
-        if (anchorElement) {
-            const anchorRect = anchorElement.getBoundingClientRect();
-            switch (anchorPos) {
-                case 'bottom-start':
-                    setStyle({
-                        position: 'absolute',
-                        left: Math.floor(anchorRect.left + window.scrollX),
-                        top: Math.floor(anchorRect.top + window.scrollY + anchorRect.height),
-                        height: Math.floor(window.innerHeight - anchorRect.top - anchorRect.height - 5),
-                        width: Math.floor(window.innerWidth - anchorRect.left - 15),
-                        // backgroundColor: 'rgba(255, 0, 0, .5)',
-                        display: 'flex',
-                        alignItems: 'flex-start',
-                        justifyContent: 'flex-start',
-                    });
-                    break;
-                case 'top-start':
-                    setStyle({
-                        position: 'absolute',
-                        left: Math.floor(anchorRect.left + window.scrollX),
-                        top: window.scrollY,
-                        height: anchorRect.top,
-                        width: Math.floor(window.innerWidth - anchorRect.left - 15),
-                        display: 'flex',
-                        alignItems: 'flex-end',
-                        justifyContent: 'flex-start',
-                        // backgroundColor: 'rgba(0, 102, 255, 0.5)',
-                    });
-                    break;
-                case 'top':
-                    setStyle({
-                        position: 'absolute',
-                        left: Math.floor(anchorRect.left + window.scrollX),
-                        top: window.scrollY,
-                        height: anchorRect.top,
-                        width: anchorRect.width,
-                        // backgroundColor: 'rgba(208, 255, 0, 0.5)',
-                        display: 'flex',
-                        alignItems: 'center',
-                        flexDirection: 'column',
-                        justifyContent: 'flex-end',
-                    });
-                    break;
-                case 'bottom':
-                    setStyle({
-                        position: 'absolute',
-                        left: Math.floor(anchorRect.left + window.scrollX),
-                        top: Math.floor(anchorRect.top + window.scrollY + anchorRect.height),
-                        height: Math.floor(window.innerHeight - anchorRect.top - anchorRect.height - 5),
-                        width: anchorRect.width,
-                        // backgroundColor: 'rgba(0, 247, 255, 0.5)',
-                        display: 'flex',
-                        alignItems: 'center',
-                        flexDirection: 'column',
-                        justifyContent: 'flex-start',
-                    });
-                    break;
-                case 'top-end':
-                    setStyle({
-                        position: 'absolute',
-                        left: 0,
-                        width: Math.floor(anchorRect.left + window.scrollX + anchorRect.width),
-                        top: window.scrollY,
-                        height: anchorRect.top,
-                        display: 'flex',
-                        alignItems: 'flex-end',
-                        justifyContent: 'flex-end',
-                        // backgroundColor: 'rgba(174, 0, 255, 0.5)',
-                    });
-                    break;
-                case 'bottom-end':
-                    setStyle({
-                        position: 'absolute',
-                        left: 0,
-                        width: Math.floor(anchorRect.left + window.scrollX + anchorRect.width),
-                        top: Math.floor(anchorRect.top + window.scrollY + anchorRect.height),
-                        height: Math.floor(window.innerHeight - anchorRect.top - anchorRect.height - 5),
-                        display: 'flex',
-                        alignItems: 'flex-start',
-                        justifyContent: 'flex-end',
-                        // backgroundColor: 'rgba(174, 0, 255, 0.5)',
-                    });
-                    break;
-                case 'top-start-end':
-                    setStyle({
-                        position: 'absolute',
-                        left: Math.floor(anchorRect.left + window.scrollX),
-                        top: window.scrollY,
-                        height: anchorRect.top,
-                        width: anchorRect.width,
-                        // backgroundColor: 'rgba(0, 102, 255, 0.5)',
-                        display: 'flex',
-                        alignItems: 'stretch',
-                        flexDirection: 'column',
-                        justifyContent: 'flex-end',
-                    });
-                    break;
-                case 'bottom-start-end':
-                    setStyle({
-                        position: 'absolute',
-                        left: Math.floor(anchorRect.left + window.scrollX),
-                        top: Math.floor(anchorRect.top + window.scrollY + anchorRect.height),
-                        height: Math.floor(window.innerHeight - anchorRect.top - anchorRect.height - 5),
-                        width: anchorRect.width,
-                        // backgroundColor: 'rgba(255, 81, 0, 0.5)',
-                        display: 'flex',
-                        alignItems: 'stretch',
-                        flexDirection: 'column',
-                        justifyContent: 'flex-start',
-                    });
-                    break;
-                case 'auto-start-end':
-                    {
-                        if (anchorRect.top >
-                            Math.floor(window.innerHeight - anchorRect.top - anchorRect.height - 5)) {
-                            setStyle({
-                                position: 'absolute',
-                                left: Math.floor(anchorRect.left + window.scrollX),
-                                top: window.scrollY,
-                                height: anchorRect.top,
-                                width: anchorRect.width,
-                                display: 'flex',
-                                alignItems: 'stretch',
-                                flexDirection: 'column',
-                                justifyContent: 'flex-end',
-                                // backgroundColor: 'rgba(0, 102, 255, 0.5)',
-                            });
-                        }
-                        else {
-                            setStyle({
-                                position: 'absolute',
-                                left: Math.floor(anchorRect.left + window.scrollX),
-                                top: Math.floor(anchorRect.top + window.scrollY + anchorRect.height),
-                                height: Math.floor(window.innerHeight - anchorRect.top - anchorRect.height - 5),
-                                width: anchorRect.width,
-                                display: 'flex',
-                                alignItems: 'stretch',
-                                flexDirection: 'column',
-                                justifyContent: 'flex-start',
-                                // backgroundColor: 'rgba(255, 187, 0, 0.5)',
-                            });
-                        }
-                    }
-                    break;
-                case 'auto':
-                default:
-                    {
-                        if (anchorRect.top >
-                            Math.floor(window.innerHeight - anchorRect.top - anchorRect.height - 5)) {
-                            setStyle({
-                                position: 'absolute',
-                                left: Math.floor(anchorRect.left + window.scrollX),
-                                top: window.scrollY,
-                                height: anchorRect.top,
-                                width: Math.floor(window.innerWidth - anchorRect.left - 15),
-                                display: 'flex',
-                                alignItems: 'flex-end',
-                                // backgroundColor: 'rgba(0, 102, 255, 0.5)',
-                            });
-                        }
-                        else {
-                            setStyle({
-                                position: 'absolute',
-                                left: Math.floor(anchorRect.left + window.scrollX),
-                                top: Math.floor(anchorRect.top + window.scrollY + anchorRect.height),
-                                height: Math.floor(window.innerHeight - anchorRect.top - anchorRect.height - 5),
-                                width: Math.floor(window.innerWidth - anchorRect.left - 15),
-                                // backgroundColor: 'rgba(255, 0, 0, .5)',
-                                display: 'flex',
-                                alignItems: 'flex-start',
-                            });
-                        }
-                    }
-                    break;
-            }
-            return;
-        }
-        setStyle(null);
-    }, [anchorElement, anchorPos]);
-    react_1.default.useEffect(() => {
-        window.addEventListener('resize', calculateStyles);
-        window.addEventListener('scroll', calculateStyles);
-        return () => {
-            window.removeEventListener('resize', calculateStyles);
-            window.removeEventListener('scroll', calculateStyles);
-        };
-    }, [calculateStyles]);
-    react_1.default.useEffect(() => {
-        if (isOpen && (anchorElement || anchorPos === 'static')) {
-            calculateStyles();
-        }
-    }, [isOpen, anchorElement, anchorPos, calculateStyles]);
-    const renderNode = react_1.default.useCallback(() => (react_1.default.createElement(overridesMap.Container, Object.assign({}, nativeProps, { style: Object.assign(Object.assign({}, style), nativeProps.style), zIndex: zindex, disablePortal: disablePortal, ref: ref }), style && children)), [children, disablePortal, nativeProps, overridesMap, ref, style, zindex]);
-    if (!isOpen || !style) {
-        return null;
-    }
-    if (disablePortal) {
-        return renderNode();
-    }
-    return domLoaded && portalEl ? react_dom_1.default.createPortal(renderNode(), portalEl, exports.PORTAL_ID) : null;
-};
-exports.default = react_1.default.forwardRef(Popper);
+const Popper_1 = __importDefault(require("./Popper"));
+__exportStar(require("./Popper"), exports);
+__exportStar(require("./PopperContainer"), exports);
+__exportStar(require("./usePopprer"), exports);
+exports.default = Popper_1.default;

package/Popper/usePopprer.d.ts

@@ -0,0 +1,110 @@
+import React from 'react';
+import { PositionStrategy } from './PopperContainer';
+/**
+ * Base directions for popper positioning.
+ * These are the primary axes around which the popper can be placed.
+ *
+ * @default 'bottom' (when used as anchorPos)
+ * @example
+ * ```tsx
+ * type Direction = 'top' | 'bottom' | 'left' | 'right';
+ * ```
+ */
+export type Direction = 'top' | 'left' | 'right' | 'bottom';
+/**
+ * Auto placement modifiers that enable intelligent positioning.
+ * The popper will automatically choose the best placement that fits in the viewport.
+ * - `auto`: Dynamically selects the optimal direction
+ * - `auto-top`, `auto-bottom`, `auto-left`, `auto-right`: Auto placement with priority given to the specified direction
+ *
+ * @example
+ * ```tsx
+ * // Will try to place on top first, but will flip if needed
+ * <Popper anchorPos="auto-top">...</Popper>
+ *
+ * // Will try all directions equally
+ * <Popper anchorPos="auto">...</Popper>
+ * ```
+ */
+export type AutoModifier = 'auto' | 'auto-top' | 'auto-bottom' | 'auto-left' | 'auto-right';
+/**
+ * Precise placement modifiers for fine-tuned positioning.
+ * These combine a base direction with specific alignment options:
+ * - `start`/`end`: Aligns to the beginning or end of the anchor (useful for RTL layouts)
+ * - `left`/`right`: Horizontal alignment for vertical placements
+ * - `top`/`bottom`: Vertical alignment for horizontal placements
+ *
+ * @example
+ * ```tsx
+ * // Corner placements
+ * <Popper anchorPos="top-left">Aligns to top-left corner</Popper>
+ *
+ * // Logical placements (RTL-friendly)
+ * <Popper anchorPos="bottom-start">Aligns to bottom edge, start side</Popper>
+ *
+ * // Side alignments
+ * <Popper anchorPos="left-top">Aligns to left side, top edge</Popper>
+ * ```
+ */
+export type Modifier = 'top-start' | 'top-end' | 'top-left' | 'top-right' | 'bottom-end' | 'bottom-start' | 'bottom-right' | 'bottom-left' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom' | 'bottom-fill' | 'top-fill';
+/**
+ * Available placement options for the popper.
+ * Combines basic directions, precise modifiers, and auto-placement options
+ * to provide full control over popper positioning.
+ *
+ * Categories:
+ * - **Basic directions**: `top`, `bottom`, `left`, `right` - Centered placement
+ * - **Corner placements**: `top-left`, `top-right`, `bottom-left`, `bottom-right` - Aligned to corners
+ * - **Logical placements**: `top-start`, `top-end`, `bottom-start`, `bottom-end` - RTL-aware alignment
+ * - **Side alignments**: `left-top`, `left-bottom`, `right-top`, `right-bottom` - Edge-aligned
+ * - **Auto placements**: `auto`, `auto-top`, `auto-bottom`, `auto-left`, `auto-right` - Intelligent positioning
+ *
+ * @default 'bottom'
+ * @example
+ * ```tsx
+ * // Basic centered placement
+ * <Popper anchorPos="bottom">Centered below anchor</Popper>
+ *
+ * // Corner placement
+ * <Popper anchorPos="top-right">Attached to top-right corner</Popper>
+ *
+ * // Auto placement with priority
+ * <Popper anchorPos="auto-left">Try left first, then find best fit</Popper>
+ *
+ * // RTL-aware placement
+ * <Popper anchorPos="top-start">Respects text direction</Popper>
+ * ```
+ */
+export type AnchorPos = Direction | Modifier | AutoModifier;
+export interface UsePopperProps {
+    readonly anchorElement: HTMLElement | null;
+    readonly anchorPos?: AnchorPos;
+    readonly positionStrategy?: PositionStrategy;
+    readonly autoFlip?: boolean;
+    readonly offset?: number;
+    readonly viewportMargin?: number;
+    readonly isOpen?: boolean;
+}
+export interface UsePopperResult {
+    readonly actualPlacement: AnchorPos;
+    readonly style: React.CSSProperties | null;
+    readonly popperRef: React.MutableRefObject<HTMLDivElement | null>;
+    readonly isVisible: boolean;
+    readonly calculatePosition: () => void;
+    readonly scrollableAncestor: HTMLElement | Window | null;
+    readonly setActualPlacement: React.Dispatch<React.SetStateAction<AnchorPos>>;
+    readonly setStyle: React.Dispatch<React.SetStateAction<React.CSSProperties | null>>;
+    readonly setIsVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}
+/**
+ * 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 declare const findScrollableAncestor: (element: HTMLElement | null, includeHidden?: boolean) => HTMLElement | Window | null;
+export declare const usePopper: ({ anchorElement, anchorPos, positionStrategy, autoFlip, offset, viewportMargin, isOpen, }: UsePopperProps) => UsePopperResult;
+export default usePopper;