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

package/Menu/VirtualizedListComponent.js

@@ -0,0 +1,305 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const MeasuredItem_1 = __importDefault(require("./MeasuredItem"));
+const BLOCK_SIZE = 50;
+function updateHeightWithBlocks(index, newHeight, heightsRef, offsetsRef, blockOffsetsRef, bumpVersion) {
+    const heights = heightsRef.current;
+    const offsets = offsetsRef.current;
+    const blocks = blockOffsetsRef.current;
+    const oldHeight = heights[index];
+    if (oldHeight == null || oldHeight === newHeight)
+        return;
+    const diff = newHeight - oldHeight;
+    heights[index] = newHeight;
+    // обновляем offsets начиная с index+1
+    for (let i = index + 1; i < offsets.length; i++) {
+        offsets[i] += diff;
+    }
+    // обновляем блоки, начиная с блока index
+    const blockIndex = Math.floor(index / BLOCK_SIZE);
+    for (let b = blockIndex + 1; b < blocks.length; b++) {
+        blocks[b] += diff;
+    }
+    // форсим пересчёт totalHeight
+    bumpVersion(v => v + 1);
+}
+const VirtualizedListComponent = react_1.default.forwardRef((props, ref) => {
+    const { items, height, renderItem, estimatedItemHeight = 40, itemHeight, overscan = 4, scrollToIndex = null, scrollToAlign = 'auto', onEndReached, } = props;
+    const containerRef = (0, react_1.useRef)(null);
+    const [scrollTop, setScrollTop] = (0, react_1.useState)(0);
+    const [renderVersion, setRenderVersion] = (0, react_1.useState)(0);
+    const heightsRef = (0, react_1.useRef)([]);
+    const offsetsRef = (0, react_1.useRef)([]);
+    const blockOffsetsRef = (0, react_1.useRef)([]);
+    const isFixed = typeof itemHeight === 'number';
+    const onEndReachedRef = react_1.default.useRef(false);
+    const threshold = Math.max(300, height * 1.5);
+    const animateScrollTop = (0, react_1.useCallback)((to, duration = 300) => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const start = container.scrollTop;
+        const change = to - start;
+        const startTime = performance.now();
+        const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
+        const step = (now) => {
+            const elapsed = now - startTime;
+            const progress = Math.min(1, elapsed / duration);
+            const eased = easeOutCubic(progress);
+            container.scrollTop = start + change * eased;
+            if (progress < 1) {
+                requestAnimationFrame(step);
+            }
+        };
+        requestAnimationFrame(step);
+    }, []);
+    const scrollTo = (0, react_1.useCallback)((index, align = 'auto') => {
+        var _a;
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const len = items.length;
+        if (index < 0 || index >= len)
+            return;
+        const offsets = offsetsRef.current;
+        const heights = heightsRef.current;
+        const itemTop = offsets[index];
+        const itemHeightValue = (_a = heights[index]) !== null && _a !== void 0 ? _a : estimatedItemHeight;
+        const viewportHeight = height;
+        const viewportTop = container.scrollTop;
+        const viewportBottom = viewportTop + viewportHeight;
+        let target = itemTop;
+        switch (align) {
+            case 'start':
+                target = itemTop;
+                break;
+            case 'center':
+                target = itemTop - viewportHeight / 2 + itemHeightValue / 2;
+                break;
+            case 'end':
+                target = itemTop - viewportHeight + itemHeightValue;
+                break;
+            case 'auto':
+            default:
+                if (itemTop < viewportTop) {
+                    target = itemTop; // прокрутить вверх
+                }
+                else if (itemTop + itemHeightValue > viewportBottom) {
+                    target = itemTop - viewportHeight + itemHeightValue; // прокрутить вниз
+                }
+                else {
+                    return; // уже видно
+                }
+                break;
+        }
+        animateScrollTop(Math.max(0, target));
+    }, [items.length, estimatedItemHeight, height, animateScrollTop]);
+    // scrollToIndex без rAF
+    (0, react_1.useLayoutEffect)(() => {
+        var _a, _b;
+        if (scrollToIndex == null)
+            return;
+        if (!containerRef.current)
+            return;
+        const idx = Math.max(0, Math.min(items.length - 1, scrollToIndex));
+        const offsets = offsetsRef.current;
+        const itemTop = offsets[idx];
+        const itemBottom = itemTop + ((_b = (_a = heightsRef.current[idx]) !== null && _a !== void 0 ? _a : itemHeight) !== null && _b !== void 0 ? _b : estimatedItemHeight);
+        const viewportTop = containerRef.current.scrollTop;
+        const viewportBottom = viewportTop + height;
+        let nextScrollTop = viewportTop;
+        if (scrollToAlign === 'start') {
+            nextScrollTop = itemTop;
+        }
+        else if (scrollToAlign === 'end') {
+            nextScrollTop = itemBottom - height;
+        }
+        else if (scrollToAlign === 'center') {
+            nextScrollTop = itemTop - height / 2 + (itemBottom - itemTop) / 2;
+        }
+        else {
+            // auto
+            if (itemTop < viewportTop) {
+                nextScrollTop = itemTop;
+            }
+            else if (itemBottom > viewportBottom) {
+                nextScrollTop = itemBottom - height;
+            }
+            else {
+                return;
+            }
+        }
+        containerRef.current.scrollTop = nextScrollTop;
+    }, [scrollToIndex, scrollToAlign, items.length, height, itemHeight, estimatedItemHeight]);
+    react_1.default.useLayoutEffect(() => {
+        const totalHeight = offsetsRef.current[offsetsRef.current.length - 1] +
+            heightsRef.current[heightsRef.current.length - 1];
+        const viewportBottom = scrollTop + height;
+        const isNearEnd = viewportBottom >= totalHeight - threshold;
+        if (isNearEnd && !onEndReachedRef.current) {
+            onEndReachedRef.current = true;
+            onEndReached === null || onEndReached === void 0 ? void 0 : onEndReached();
+        }
+        if (!isNearEnd) {
+            onEndReachedRef.current = false;
+        }
+    }, [scrollTop, height, items.length, threshold, onEndReached]);
+    // ⭐ ИДЕАЛЬНАЯ ИНИЦИАЛИЗАЦИЯ offsets/heights
+    // инициализация кэша высот/offsets
+    // инициализация кэша высот/offsets
+    (0, react_1.useLayoutEffect)(() => {
+        var _a;
+        const len = items.length;
+        const oldLen = heightsRef.current.length;
+        if (isFixed) {
+            // фиксированная высота — всё просто
+            heightsRef.current = new Array(len).fill(itemHeight);
+            offsetsRef.current = new Array(len);
+            for (let i = 0; i < len; i++) {
+                offsetsRef.current[i] = i * itemHeight;
+            }
+            const blockCount = Math.ceil(len / BLOCK_SIZE);
+            blockOffsetsRef.current = new Array(blockCount);
+            for (let b = 0; b < blockCount; b++) {
+                blockOffsetsRef.current[b] = b * BLOCK_SIZE * itemHeight;
+            }
+        }
+        else {
+            // динамическая высота — добавляем только новые элементы
+            const heights = heightsRef.current;
+            const offsets = offsetsRef.current;
+            // список вырос
+            if (len > oldLen) {
+                // добавляем новые элементы
+                for (let i = oldLen; i < len; i++) {
+                    heights[i] = estimatedItemHeight;
+                    offsets[i] = i === 0 ? 0 : offsets[i - 1] + heights[i - 1];
+                }
+                // пересчитываем блоки только для новых блоков
+                const blockCount = Math.ceil(len / BLOCK_SIZE);
+                const oldBlockCount = blockOffsetsRef.current.length;
+                for (let b = oldBlockCount; b < blockCount; b++) {
+                    const start = b * BLOCK_SIZE;
+                    blockOffsetsRef.current[b] = (_a = offsets[start]) !== null && _a !== void 0 ? _a : 0;
+                }
+            }
+        }
+        // форсим ререндер, чтобы использовать новые offsets
+        setRenderVersion(v => v + 1);
+    }, [items.length, isFixed, itemHeight, estimatedItemHeight]);
+    const onScroll = (0, react_1.useCallback)(() => {
+        var _a, _b;
+        const top = (_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0;
+        setScrollTop(top);
+    }, []);
+    // ⭐ Поиск startIndex
+    const findStartIndex = (0, react_1.useCallback)((scrollTopValue) => {
+        const len = items.length;
+        if (len === 0)
+            return 0;
+        const offsets = offsetsRef.current;
+        const blocks = blockOffsetsRef.current;
+        if (isFixed) {
+            const idx = Math.floor(scrollTopValue / (itemHeight || estimatedItemHeight));
+            return Math.max(0, Math.min(len - 1, idx));
+        }
+        // бинарный поиск по блокам
+        let low = 0;
+        let high = blocks.length - 1;
+        while (low < high) {
+            const mid = (low + high) >> 1;
+            if (blocks[mid] < scrollTopValue)
+                low = mid + 1;
+            else
+                high = mid;
+        }
+        const blockIndex = Math.max(0, low - 1);
+        const start = blockIndex * BLOCK_SIZE;
+        const end = Math.min(len - 1, start + BLOCK_SIZE * 2);
+        let i = start;
+        while (i < end && offsets[i] < scrollTopValue)
+            i++;
+        return Math.max(0, Math.min(len - 1, i));
+    }, [items.length, isFixed, itemHeight, estimatedItemHeight, renderVersion]);
+    const startIndex = (0, react_1.useMemo)(() => {
+        const idx = findStartIndex(scrollTop);
+        const _ = renderVersion;
+        return Math.max(0, idx - overscan);
+    }, [scrollTop, findStartIndex, overscan, renderVersion]);
+    // ⭐ Поиск endIndex
+    const endIndex = (0, react_1.useMemo)(() => {
+        const len = items.length;
+        if (len === 0)
+            return -1;
+        const offsets = offsetsRef.current;
+        if (offsets.length !== len)
+            return -1;
+        const totalVisibleBottom = scrollTop + height;
+        let i = startIndex;
+        while (i < len && offsets[i] < totalVisibleBottom)
+            i++;
+        const _ = renderVersion;
+        // renderVersion;
+        return Math.min(len - 1, i + overscan);
+    }, [scrollTop, height, startIndex, items.length, overscan, renderVersion]);
+    const getTopVisibleIndex = (0, react_1.useCallback)(() => startIndex, [startIndex]);
+    react_1.default.useImperativeHandle(ref, () => ({
+        scrollToIndex: (index, align = 'auto') => {
+            scrollTo(index, align);
+        },
+        getTopVisibleIndex: () => getTopVisibleIndex(),
+    }));
+    if (renderVersion === 0) {
+        return (react_1.default.createElement("div", { ref: containerRef, style: {
+                overflowY: 'auto',
+                position: 'relative',
+                height,
+            } }));
+    }
+    const visibleStart = startIndex;
+    const visibleEnd = endIndex;
+    let totalHeight = offsetsRef.current[items.length - 1] + heightsRef.current[items.length - 1];
+    if (isNaN(totalHeight)) {
+        totalHeight = 0;
+    }
+    return (react_1.default.createElement("div", { ref: containerRef, onScroll: onScroll, style: {
+            overflowY: 'auto',
+            position: 'relative',
+            height,
+        } },
+        react_1.default.createElement("div", { style: { height: totalHeight, position: 'relative' } }, Array.from({ length: visibleEnd - visibleStart + 1 }, (_, i) => {
+            const index = visibleStart + i;
+            const item = items[index];
+            const top = offsetsRef.current[index];
+            return (react_1.default.createElement(MeasuredItem_1.default, { key: index, index: index, isFixed: isFixed, top: top, updateHeight: (idx, h) => updateHeightWithBlocks(idx, h, heightsRef, offsetsRef, blockOffsetsRef, setRenderVersion) }, renderItem(item, index)));
+        }))));
+});
+VirtualizedListComponent.displayName = 'VirtualizedListComponent';
+exports.default = VirtualizedListComponent;

package/Menu/index.d.ts

@@ -3,7 +3,9 @@ import { MenuProps, MenuRef } from './MenuContainer';
 import { AnchorPos as PopperAnchorPos } from '../Popper';
 export type AnchorPos = PopperAnchorPos;
 export * from './MenuContainer';
+export * from './MenuItem';
+export * from './MenuList';
 declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: MenuProps<T, Multiple> & {
     ref?: React.Ref<MenuRef> | undefined;
-}) => JSX.Element;
+}) => React.ReactElement;
 export default _default;

package/Menu/index.js

@@ -21,12 +21,9 @@ const react_1 = __importDefault(require("react"));
 const context_1 = require("./context");
 const MenuContainer_1 = __importDefault(require("./MenuContainer"));
 __exportStar(require("./MenuContainer"), exports);
-const Menu = react_1.default.forwardRef((props, ref) => {
-    if (props.anchorPos !== 'static' && typeof props.anchorElement === 'undefined') {
-        throw new Error(`[@via-profit/ui-kit] You set «anchorPos» property as «static». In this case you should use «anchorElement» property`);
-    }
-    return (react_1.default.createElement(context_1.MenuContextProvider, null,
-        react_1.default.createElement(MenuContainer_1.default, Object.assign({}, props, { ref: ref }))));
-});
+__exportStar(require("./MenuItem"), exports);
+__exportStar(require("./MenuList"), exports);
+const Menu = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(context_1.MenuContextProvider, null,
+    react_1.default.createElement(MenuContainer_1.default, Object.assign({}, props, { ref: ref })))));
 Menu.displayName = 'Menu';
 exports.default = Menu;

package/Modal/BaseModal/RenderModal.d.ts

@@ -5,9 +5,9 @@ import { ModalInnerContainerProps } from './ModalInnerContainer';
 interface RenderModalProps {
     readonly children: React.ReactNode | readonly React.ReactNode[];
     readonly overrides: {
-        readonly Overlay?: React.ForwardRefExoticComponent<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
-        readonly Inner?: React.ForwardRefExoticComponent<ModalInnerProps & React.RefAttributes<HTMLDivElement>>;
-        readonly InnerContainer?: React.ForwardRefExoticComponent<ModalInnerContainerProps & React.RefAttributes<HTMLDivElement>>;
+        readonly Overlay?: React.ComponentType<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
+        readonly Inner?: React.ComponentType<ModalInnerProps & React.RefAttributes<HTMLDivElement>>;
+        readonly InnerContainer?: React.ComponentType<ModalInnerContainerProps & React.RefAttributes<HTMLDivElement>>;
     };
 }
 declare const RenderModal: React.FC<RenderModalProps>;

package/Modal/BaseModal/index.d.ts

@@ -45,9 +45,9 @@ export interface BaseModalProps {
     readonly overrides?: BaseModalOverrides;
 }
 export interface BaseModalOverrides {
-    readonly Overlay?: React.ForwardRefExoticComponent<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
-    readonly Inner?: React.ForwardRefExoticComponent<ModalInnerProps & React.RefAttributes<HTMLDivElement>>;
-    readonly InnerContainer?: React.ForwardRefExoticComponent<ModalInnerContainerProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Overlay?: React.ComponentType<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Inner?: React.ComponentType<ModalInnerProps & React.RefAttributes<HTMLDivElement>>;
+    readonly InnerContainer?: React.ComponentType<ModalInnerContainerProps & React.RefAttributes<HTMLDivElement>>;
 }
 declare const BaseModal: React.FC<BaseModalProps>;
 export default BaseModal;

package/Modal/ConfirmBox/index.d.ts

@@ -37,23 +37,23 @@ export interface ConfirmBoxOverrides {
     /**
      * Element container
      */
-    readonly Container?: React.ForwardRefExoticComponent<ConfirmBoxContainerProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Container?: React.ComponentType<ConfirmBoxContainerProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Element ontent
      */
-    readonly Content?: React.ForwardRefExoticComponent<ConfirmBoxContentProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Content?: React.ComponentType<ConfirmBoxContentProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Element footer
      */
-    readonly Footer?: React.ForwardRefExoticComponent<ConfirmBoxFooterProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Footer?: React.ComponentType<ConfirmBoxFooterProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Element header
      */
-    readonly Header?: React.ForwardRefExoticComponent<ConfirmBoxHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Header?: React.ComponentType<ConfirmBoxHeaderProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Overlay element
      */
-    readonly Overlay?: React.ForwardRefExoticComponent<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Overlay?: React.ComponentType<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
 }
 declare const ConfirmBox: React.FC<ConfirmBoxProps>;
 export default ConfirmBox;

package/Modal/Drawer/index.d.ts

@@ -43,23 +43,23 @@ export interface DrawerOverrides {
     /**
      * Element container
      */
-    readonly Container?: React.ForwardRefExoticComponent<DrawerContainerProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Container?: React.ComponentType<DrawerContainerProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Element ontent
      */
-    readonly Content?: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Content?: React.ComponentType<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Element footer
      */
-    readonly Footer?: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Footer?: React.ComponentType<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Element header
      */
-    readonly Header?: React.ForwardRefExoticComponent<DrawerHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Header?: React.ComponentType<DrawerHeaderProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Overlay element
      */
-    readonly Overlay?: React.ForwardRefExoticComponent<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Overlay?: React.ComponentType<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
 }
 declare const Drawer: React.FC<DrawerProps>;
 export default Drawer;

package/Modal/MessageBox/index.d.ts

@@ -28,23 +28,23 @@ export interface MessageBoxOverrides {
     /**
      * Element container
      */
-    readonly Container?: React.ForwardRefExoticComponent<MessageBoxContainerProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Container?: React.ComponentType<MessageBoxContainerProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Element ontent
      */
-    readonly Content?: React.ForwardRefExoticComponent<MessageBoxContentProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Content?: React.ComponentType<MessageBoxContentProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Element footer
      */
-    readonly Footer?: React.ForwardRefExoticComponent<MessageBoxFooterProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Footer?: React.ComponentType<MessageBoxFooterProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Element header
      */
-    readonly Header?: React.ForwardRefExoticComponent<MessageBoxHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Header?: React.ComponentType<MessageBoxHeaderProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Overlay header
      */
-    readonly Overlay?: React.ForwardRefExoticComponent<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Overlay?: React.ComponentType<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
 }
 declare const MessageBox: React.FC<MessageBoxProps>;
 export default MessageBox;

package/Popper/Popper.d.ts

@@ -0,0 +1,148 @@
+import React from 'react';
+import { PopperContainerProps, PositionStrategy } from './PopperContainer';
+import { AnchorPos } from './usePopprer';
+export * from './usePopprer';
+export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Controls the visibility of the popper.
+     * When `true`, the popper is rendered and positioned.
+     *
+     * @required
+     * @example
+     * ```tsx
+     * <Popper isOpen={true}>...</Popper>
+     * ```
+     */
+    readonly isOpen: boolean;
+    /**
+     * The HTML element to which the popper will be attached and positioned relative to.
+     * If `null` or undefined, the popper will not be positioned.
+     *
+     * @default undefined
+     * @example
+     * ```tsx
+     * const [anchor, setAnchor] = useState<HTMLButtonElement | null>(null);
+     * <Popper anchorElement={anchor}>...</Popper>
+     * ```
+     */
+    readonly anchorElement: HTMLElement | null;
+    /**
+     * Determines the preferred placement of the popper relative to the anchor element.
+     * The actual placement may change if `autoFlip` is enabled and there's not enough space.
+     *
+     * @default 'auto'
+     * @example
+     * ```tsx
+     * <Popper anchorPos="top-start">...</Popper>
+     * <Popper anchorPos="bottom-end">...</Popper>
+     * ```
+     */
+    readonly anchorPos?: AnchorPos;
+    readonly onAnchorPosChanged?: (anchorPos: AnchorPos) => void;
+    /**
+     * The z-index value for the popper container.
+     * Used to control the stacking order of the popper relative to other elements.
+     *
+     * @default theme.zIndex.modal
+     * @example
+     * ```tsx
+     * <Popper zIndex={9999}>...</Popper>
+     * ```
+     */
+    readonly zIndex?: number;
+    /**
+     * When enabled, the popper will automatically try to find the best placement
+     * if the preferred placement doesn't fit in the viewport.
+     * The component will iterate through possible placements until it finds one that fits.
+     *
+     * @default true
+     * @example
+     * ```tsx
+     * <Popper autoFlip={true}>...</Popper> // Will flip if needed
+     * <Popper autoFlip={false}>...</Popper> // Will always use preferred placement
+     * ```
+     */
+    readonly autoFlip?: boolean;
+    /**
+     * Additional offset (in pixels) from the anchor element.
+     * Positive values move the popper away from the anchor, negative values move it closer.
+     *
+     * @default 0
+     * @example
+     * ```tsx
+     * <Popper offset={8}>...</Popper> // 8px gap between anchor and popper
+     * <Popper offset={-4}>...</Popper> // Overlap the anchor by 4px
+     * ```
+     */
+    readonly offset?: number;
+    /**
+     * The positioning strategy to use.
+     * - `'fixed'`: Positions relative to the viewport. Works reliably in all cases.
+     * - `'absolute'`: Positions relative to the nearest positioned ancestor.
+     *                 When using 'absolute', make sure a parent element has `position: relative`.
+     *
+     * @default 'fixed'
+     * @example
+     * ```tsx
+     * <Popper positionStrategy="absolute">...</Popper> // Relative to positioned parent
+     * <Popper positionStrategy="fixed">...</Popper> // Relative to viewport  (recommended)
+     * ```
+     */
+    readonly positionStrategy?: PositionStrategy;
+    /**
+     * Minimum distance (in pixels) that the popper must maintain from the viewport edges.
+     * Used to prevent the popper from being positioned too close to the screen boundaries.
+     * The popper will try to flip to another placement if it cannot maintain this margin.
+     *
+     * @default 8
+     * @example
+     * ```tsx
+     * // Larger margin for better visibility
+     * <Popper viewportMargin={16}>...</Popper>
+     *
+     * // No margin (allow touching edges)
+     * <Popper viewportMargin={0}>...</Popper>
+     *
+     * // Different margins for different devices
+     * <Popper viewportMargin={isMobile ? 8 : 16}>...</Popper>
+     * ```
+     */
+    readonly viewportMargin?: number;
+    /**
+     * Overridable components map for customizing the popper's internal structure.
+     * Allows replacing default components with custom implementations while maintaining functionality.
+     *
+     * @default undefined
+     * @example
+     * ```tsx
+     * <Popper
+     *   overrides={{
+     *     Container: CustomContainerComponent,
+     *   }}
+     * >
+     *   ...
+     * </Popper>
+     * ```
+     */
+    readonly overrides?: PopperOverrides;
+}
+export interface PopperOverrides {
+    /**
+     * Custom container component for the popper content.
+     * This component wraps the popper's children and handles positioning styles.
+     *
+     * @default PopperContainer
+     * @example
+     * ```tsx
+     * const CustomContainer = React.forwardRef((props, ref) => (
+     *   <div ref={ref} {...props} className="custom-popper" />
+     * ));
+     *
+     * <Popper overrides={{ Container: CustomContainer }} />
+     * ```
+     */
+    readonly Container?: React.ComponentType<PopperContainerProps & React.RefAttributes<HTMLDivElement>>;
+}
+export declare const PORTAL_ID = "ui-kit-portal";
+declare const _default: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;