@via-profit/ui-kit 0.2.1-alpha.1 → 0.2.2

package/Menu/VirtualizedItem.js

@@ -0,0 +1,69 @@
+"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 __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.VirtualizedItem = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const React = __importStar(require("react"));
+const StyledVirtualizedItem = styled_1.default.div `
+  position: absolute;
+  width: 100%;
+`;
+exports.VirtualizedItem = React.forwardRef((props, ref) => {
+    const { children, style, index, setItemHeight, isActiveOnScroll } = props, restProps = __rest(props, ["children", "style", "index", "setItemHeight", "isActiveOnScroll"]);
+    const containerRef = React.useRef(null);
+    React.useEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const observer = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                const { height } = entry.contentRect;
+                if (height) {
+                    setItemHeight(index, height);
+                }
+            }
+        });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [index, setItemHeight]);
+    return (React.createElement(StyledVirtualizedItem, Object.assign({ style: style }, restProps, { ref: ref }),
+        React.createElement("div", { ref: containerRef }, children({ index, isActiveOnScroll }))));
+});
+exports.VirtualizedItem.displayName = 'VirtualizedItem';
+exports.default = exports.VirtualizedItem;

package/Menu/VirtualizedList.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { VirtualizedListRef, VirtualizedRenderItem } from './VirtualizedListComponent';
+export type ScrollAlign = 'start' | 'center' | 'end' | 'auto';
+export * from './VirtualizedListComponent';
+export type VirtualizedListProps<T> = {
+    readonly items: readonly T[];
+    readonly renderItem: VirtualizedRenderItem<T>;
+    readonly estimatedItemHeight?: number;
+    readonly itemHeight?: number;
+    readonly overscan?: number;
+    readonly scrollToIndex?: number | null;
+    readonly scrollToAlign?: ScrollAlign;
+    readonly onEndReached?: () => void;
+};
+declare const _default: <T>(props: VirtualizedListProps<T> & {
+    ref?: React.Ref<VirtualizedListRef> | undefined;
+}) => React.ReactElement;
+export default _default;

package/Menu/VirtualizedList.js

@@ -0,0 +1,28 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const AutoHeightWrapper_1 = __importDefault(require("./AutoHeightWrapper"));
+const VirtualizedListComponent_1 = __importDefault(require("./VirtualizedListComponent"));
+__exportStar(require("./VirtualizedListComponent"), exports);
+const VirtualizedList = react_1.default.forwardRef((props, ref) => {
+    return (react_1.default.createElement(AutoHeightWrapper_1.default, null, height => height > 0 && react_1.default.createElement(VirtualizedListComponent_1.default, Object.assign({}, props, { height: height, ref: ref }))));
+});
+VirtualizedList.displayName = 'VirtualizedList';
+exports.default = VirtualizedList;

package/Menu/VirtualizedListComponent.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export type VirtualizedRenderItem<T> = (item: T, index: number) => React.ReactNode;
+export type VirtualizedListComponentProp<T> = {
+    readonly items: readonly T[];
+    readonly height: number;
+    readonly renderItem: VirtualizedRenderItem<T>;
+    readonly estimatedItemHeight?: number;
+    readonly itemHeight?: number;
+    readonly overscan?: number;
+    readonly scrollToIndex?: number | null;
+    readonly scrollToAlign?: ScrollAlign;
+    readonly onEndReached?: () => void;
+};
+export type ScrollAlign = 'start' | 'center' | 'end' | 'auto';
+export type VirtualizedListRef = {
+    scrollToIndex: (index: number, align?: ScrollAlign) => void;
+    getTopVisibleIndex: () => number;
+};
+declare const VirtualizedListComponent: React.ForwardRefExoticComponent<VirtualizedListComponentProp<unknown> & React.RefAttributes<VirtualizedListRef>>;
+export default VirtualizedListComponent;

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,6 +21,8 @@ const react_1 = __importDefault(require("react"));
 const context_1 = require("./context");
 const MenuContainer_1 = __importDefault(require("./MenuContainer"));
 __exportStar(require("./MenuContainer"), exports);
+__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';

package/Popper/Popper.d.ts

@@ -1,81 +1,7 @@
 import React from 'react';
 import { PopperContainerProps, 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';
-/**
- * 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;
+import { AnchorPos } from './usePopprer';
+export * from './usePopprer';
 export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Controls the visibility of the popper.
@@ -99,7 +25,7 @@ export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
      * <Popper anchorElement={anchor}>...</Popper>
      * ```
      */
-    readonly anchorElement?: HTMLElement | null;
+    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.
@@ -112,6 +38,7 @@ export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
      * ```
      */
     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.
@@ -154,11 +81,11 @@ export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
      * - `'absolute'`: Positions relative to the nearest positioned ancestor.
      *                 When using 'absolute', make sure a parent element has `position: relative`.
      *
-     * @default 'absolute'
+     * @default 'fixed'
      * @example
      * ```tsx
-     * <Popper positionStrategy="absolute">...</Popper> // Relative to positioned parent  (recommended)
-     * <Popper positionStrategy="fixed">...</Popper> // Relative to viewport
+     * <Popper positionStrategy="absolute">...</Popper> // Relative to positioned parent
+     * <Popper positionStrategy="fixed">...</Popper> // Relative to viewport  (recommended)
      * ```
      */
     readonly positionStrategy?: PositionStrategy;

package/Popper/Popper.js

@@ -1,4 +1,18 @@
 "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)
@@ -19,11 +33,12 @@ 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 = 'absolute', viewportMargin = 30, autoFlip = true, offset = 0 } = props, nativeProps = __rest(props, ["isOpen", "children", "anchorElement", "zIndex", "overrides", "anchorPos", "positionStrategy", "viewportMargin", "autoFlip", "offset"]);
+    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, getTransformOrigin } = (0, usePopprer_1.usePopper)({
+    const { actualPlacement, style, popperRef, isVisible } = (0, usePopprer_1.usePopper)({
         anchorElement,
         anchorPos,
         positionStrategy,
@@ -51,20 +66,20 @@ const Popper = (props, ref) => {
         }
         const newNode = window.document.createElement('div');
         newNode.setAttribute('id', exports.PORTAL_ID);
-        // Важно для absolute позиционирования
         if (positionStrategy === 'absolute') {
             newNode.style.position = 'relative';
         }
         window.document.body.appendChild(newNode);
         return newNode;
     }, [positionStrategy]);
-    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, 
-            // transform: isVisible ? 'scale(1)' : 'scale(0.95)',
-            transition: 'opacity 120ms ease-in-out, left 120ms cubic-bezier(0.22, 0.61, 0.36, 1), top 120ms cubic-bezier(0.22, 0.61, 0.36, 1)', 
-            // transformOrigin: getTransformOrigin(actualPlacement),
-            pointerEvents: isVisible ? 'auto' : 'none' }), (positionStrategy === 'fixed' && {
+    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, "data-placement": actualPlacement, "data-popper-strategy": positionStrategy, ref: el => {
+        })), zIndex: zIndex, positionStrategy: positionStrategy, "data-popper-placement": actualPlacement, "data-popper-strategy": positionStrategy, ref: el => {
             popperRef.current = el;
             if (ref) {
                 if (typeof ref === 'function') {
@@ -79,13 +94,13 @@ const Popper = (props, ref) => {
         nativeProps,
         style,
         isVisible,
-        getTransformOrigin,
+        // getTransformOrigin,
         actualPlacement,
         positionStrategy,
         zIndex,
         children,
-        ref,
         popperRef,
+        ref,
     ]);
     if (!isOpen) {
         return null;
@@ -93,7 +108,6 @@ const Popper = (props, ref) => {
     if (positionStrategy === 'fixed') {
         return domLoaded && portalEl ? react_dom_1.default.createPortal(renderNode(), portalEl, exports.PORTAL_ID) : null;
     }
-    // Для absolute стратегии - рендерим рядом с anchor (in-place)
     return renderNode();
 };
 exports.default = react_1.default.forwardRef(Popper);