@via-profit/ui-kit 0.2.2 → 0.2.3

package/Popper/usePopper.js

@@ -0,0 +1,522 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePopper = exports.findScrollableAncestor = void 0;
+const react_1 = __importDefault(require("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
+ */
+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;
+};
+exports.findScrollableAncestor = findScrollableAncestor;
+const usePopper = (props) => {
+    const { anchorElement, anchorPos = 'auto', positionStrategy = 'fixed', autoFlip = false, offset = 0, viewportMargin = 10, isOpen = false, alternativePlacements, } = props;
+    const isMountedRef = react_1.default.useRef(false);
+    const isPositioningRef = react_1.default.useRef(false);
+    const [actualPlacement, setActualPlacement] = react_1.default.useState(anchorPos);
+    const [style, setStyle] = react_1.default.useState(null);
+    const [isVisible, setIsVisible] = react_1.default.useState(false);
+    const popperRef = react_1.default.useRef(null);
+    // Finding the nearest scrollable ancestor
+    const scrollableAncestor = react_1.default.useMemo(() => {
+        if (!anchorElement || typeof window === 'undefined') {
+            return null;
+        }
+        return (0, exports.findScrollableAncestor)(anchorElement);
+    }, [anchorElement]);
+    // Synchronizing actualPlacement with anchorPos
+    react_1.default.useEffect(() => {
+        if (actualPlacement !== anchorPos) {
+            setActualPlacement(anchorPos);
+        }
+    }, [actualPlacement, anchorPos]);
+    const getPositionStyle = react_1.default.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_1.default.useCallback((style, popperRect) => {
+        // Если нет scrollableAncestor, используем document.documentElement как fallback
+        const container = scrollableAncestor instanceof HTMLElement ? scrollableAncestor : document.documentElement;
+        const containerRect = container.getBoundingClientRect();
+        // Базовые границы контейнера с учетом отступа
+        let minLeft = containerRect.left + viewportMargin;
+        let maxLeft = containerRect.right - popperRect.width - viewportMargin;
+        let minTop = containerRect.top + viewportMargin;
+        let maxTop = containerRect.bottom - popperRect.height - viewportMargin;
+        // Для fixed позиционирования добавляем ограничения viewport
+        if (positionStrategy === 'fixed') {
+            // Границы viewport с учетом отступа
+            const viewportMinLeft = viewportMargin;
+            const viewportMaxLeft = window.innerWidth - popperRect.width - viewportMargin;
+            const viewportMinTop = viewportMargin;
+            const viewportMaxTop = window.innerHeight - popperRect.height - viewportMargin;
+            // Берем пересечение границ контейнера и viewport
+            minLeft = Math.max(minLeft, viewportMinLeft);
+            maxLeft = Math.min(maxLeft, viewportMaxLeft);
+            minTop = Math.max(minTop, viewportMinTop);
+            maxTop = Math.min(maxTop, viewportMaxTop);
+        }
+        // Убеждаемся, что границы валидны (min не больше max)
+        const validMinLeft = Math.min(minLeft, maxLeft);
+        const validMaxLeft = Math.max(minLeft, maxLeft);
+        const validMinTop = Math.min(minTop, maxTop);
+        const validMaxTop = Math.max(minTop, maxTop);
+        // Ограничиваем позицию
+        const clampedLeft = Math.max(validMinLeft, Math.min(style.left, validMaxLeft));
+        const clampedTop = Math.max(validMinTop, Math.min(style.top, validMaxTop));
+        return {
+            left: clampedLeft,
+            top: clampedTop,
+            width: style.width,
+        };
+    }, [positionStrategy, scrollableAncestor, viewportMargin]);
+    const checkIfViewportFits = react_1.default.useCallback((style, popperRect) => {
+        const left = style.left;
+        const top = style.top;
+        const right = left + popperRect.width;
+        const bottom = top + popperRect.height;
+        if (positionStrategy === 'absolute' && scrollableAncestor instanceof HTMLElement) {
+            const containerRect = scrollableAncestor.getBoundingClientRect();
+            const relativeLeft = left - containerRect.left;
+            const relativeTop = top - containerRect.top;
+            const relativeRight = relativeLeft + popperRect.width;
+            const relativeBottom = relativeTop + popperRect.height;
+            const isWithinHorizontal = relativeLeft >= viewportMargin && relativeRight <= containerRect.width - viewportMargin;
+            const isWithinVertical = relativeTop >= viewportMargin && relativeBottom <= containerRect.height - viewportMargin;
+            return isWithinHorizontal && isWithinVertical;
+        }
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const isWithinHorizontal = left >= viewportMargin && right <= viewportWidth - viewportMargin;
+        const isWithinVertical = top >= viewportMargin && bottom <= viewportHeight - viewportMargin;
+        const hasValidPosition = left >= 0 && top >= 0;
+        return hasValidPosition && isWithinHorizontal && isWithinVertical;
+    }, [viewportMargin, scrollableAncestor, positionStrategy]);
+    const placementsOrder = react_1.default.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_1.default.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_1.default.useCallback(() => {
+        if (!anchorElement || !popperRef.current) {
+            return;
+        }
+        const anchorRect = anchorElement.getBoundingClientRect();
+        const popperRect = popperRef.current.getBoundingClientRect();
+        const { style, placement, found } = getPreferredPlacements(anchorPos, anchorRect, popperRect);
+        if (found) {
+            setActualPlacement(placement);
+        }
+        setStyle(style);
+    }, [anchorElement, anchorPos, getPreferredPlacements]);
+    /**
+     * Open / Close popper logic
+     */
+    react_1.default.useEffect(() => {
+        if (!isOpen) {
+            setIsVisible(false);
+            setStyle(null);
+        }
+        else if (anchorElement && isOpen && popperRef.current) {
+            calculatePosition();
+            setIsVisible(true);
+        }
+    }, [anchorElement, getPreferredPlacements, isOpen, calculatePosition]);
+    /**
+     * The anchor element changes
+     */
+    react_1.default.useEffect(() => {
+        if (!isOpen || !anchorElement) {
+            return;
+        }
+        const observer = new MutationObserver(() => {
+            window.requestAnimationFrame(() => {
+                // console.log('The anchor element was change');
+                calculatePosition();
+            });
+        });
+        observer.observe(anchorElement, {
+            attributes: true,
+            childList: true,
+            subtree: true,
+        });
+        // eslint-disable-next-line consistent-return
+        return () => {
+            observer.disconnect();
+        };
+    }, [isOpen, anchorElement, calculatePosition]);
+    /**
+     * On scroll - recalculate position
+     */
+    react_1.default.useEffect(() => {
+        if (!isOpen || !scrollableAncestor) {
+            return;
+        }
+        const handleScroll = () => {
+            window.requestAnimationFrame(() => {
+                calculatePosition();
+            });
+        };
+        // parent scroll listener
+        if (scrollableAncestor instanceof HTMLElement) {
+            scrollableAncestor.addEventListener('scroll', handleScroll, { passive: true });
+        }
+        else if (scrollableAncestor === window) {
+            window.addEventListener('scroll', handleScroll, { passive: true });
+        }
+        // eslint-disable-next-line consistent-return
+        return () => {
+            if (scrollableAncestor instanceof HTMLElement) {
+                scrollableAncestor.removeEventListener('scroll', handleScroll);
+            }
+            else if (scrollableAncestor === window) {
+                window.removeEventListener('scroll', handleScroll);
+            }
+        };
+    }, [isOpen, scrollableAncestor, calculatePosition]);
+    /**
+     * On window resize - recalculate position
+     */
+    react_1.default.useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+        const handleResize = () => {
+            window.requestAnimationFrame(() => {
+                calculatePosition();
+            });
+        };
+        // parent scroll listener
+        window.addEventListener('resize', handleResize);
+        // eslint-disable-next-line consistent-return
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [calculatePosition, isOpen]);
+    return {
+        actualPlacement,
+        style,
+        popperRef,
+        isVisible,
+        scrollableAncestor,
+        calculatePosition,
+        setActualPlacement,
+        setStyle,
+        setIsVisible,
+    };
+};
+exports.usePopper = usePopper;
+exports.default = exports.usePopper;

package/Selectbox/SelectboxButton.js

@@ -66,39 +66,14 @@ const StyledSelectboxButton = (0, styled_1.default)(Button_1.default) `
       }
     `}
   transition: none;
-  ${({ theme, $isOpen, $anchorPos }) => $isOpen &&
-    $anchorPos &&
-    ['bottom-fill', 'top-fill'].includes($anchorPos) &&
-    (0, react_1.css) `
-      border-width: 1px;
-      border-style: solid;
-      border-color: ${theme.isDark
-        ? theme.color.textPrimary.darken(100).toString()
-        : theme.color.textPrimary.lighten(150).toString()};
-    `};
-
-  ${({ $anchorPos, $isOpen }) => $isOpen &&
-    $anchorPos === 'bottom-fill' &&
-    (0, react_1.css) `
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-      border-bottom: 0;
-    `};
-
-  ${({ $anchorPos, $isOpen }) => $isOpen &&
-    $anchorPos === 'top-fill' &&
-    (0, react_1.css) `
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      border-top: 0;
-    `};
+  
 `;
 const StyledButtonTextWrapper = (0, styled_1.default)(ButtonTextWrapper_1.default) `
   flex: 1;
 `;
 const SelectboxButton = (props, ref) => {
     const { children, fullWidth, error, anchorPos, isOpen } = props, nativeProps = __rest(props, ["children", "fullWidth", "error", "anchorPos", "isOpen"]);
-    return (React.createElement(StyledSelectboxButton, Object.assign({ "$fullWidth": fullWidth, "$error": error }, nativeProps, { "$isOpen": isOpen, "$anchorPos": anchorPos, overrides: {
+    return (React.createElement(StyledSelectboxButton, Object.assign({ "$fullWidth": fullWidth, "$error": error }, nativeProps, { "$isOpen": isOpen, overrides: {
             TextWrapper: StyledButtonTextWrapper,
         }, ref: ref }), children));
 };

package/Selectbox/SelectboxMenu.d.ts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import { MenuProps, MenuRef } from '../Menu';
-import { AnchorPos } from '../Popper';
 import { OnChange } from 'Selectbox';
 export interface SelectbosMenuProps<T, Multiple extends boolean | undefined = undefined> extends MenuProps<T, Multiple> {
-    readonly actualPlacement: AnchorPos;
     readonly onChange?: OnChange<T, Multiple>;
 }
 declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: SelectbosMenuProps<T, Multiple> & {

package/Selectbox/SelectboxMenu.js

@@ -22,15 +22,25 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 });
 const React = __importStar(require("react"));
 const Menu_1 = __importDefault(require("../Menu"));
-const OverrideMenuList_1 = __importDefault(require("../Autocomplete/OverrideMenuList"));
 const SelectboxMenu = React.forwardRef((props, ref) => {
-    const { actualPlacement, multiple, items, value, isOpen, anchorElement, getOptionSelected, onChange, onRequestClose, children, onAnchorPosChanged, } = props;
+    const { multiple, items, value, isOpen, anchorPos, anchorElement, getOptionSelected, onChange, onRequestClose, children } = props, restMenuProps = __rest(props, ["multiple", "items", "value", "isOpen", "anchorPos", "anchorElement", "getOptionSelected", "onChange", "onRequestClose", "children"]);
     const handleSelectItem = React.useCallback((item) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(item);
     }, [onChange]);
@@ -42,9 +52,7 @@ const SelectboxMenu = React.forwardRef((props, ref) => {
             anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.focus();
         }
     }, [onRequestClose, anchorElement]);
-    return (React.createElement(Menu_1.default, { ref: ref, offset: 0, anchorPos: actualPlacement, onAnchorPosChanged: onAnchorPosChanged, multiple: multiple, items: items, value: value, isOpen: isOpen && items.length > 0, autofocus: true, anchorElement: anchorElement, closeOutsideClick: false, getOptionSelected: getOptionSelected, onSelectItem: handleSelectItem, overrides: {
-            List: OverrideMenuList_1.default,
-        }, closeOnSelect: !multiple, onRequestClose: handleRequestClose }, ({ index, item }, itemProps) => children({ index, item: item }, itemProps)));
+    return (React.createElement(Menu_1.default, Object.assign({ ref: ref, offset: 0, anchorPos: anchorPos, multiple: multiple, items: items, value: value, isOpen: isOpen && items.length > 0, autofocus: true, anchorElement: anchorElement, closeOutsideClick: false, getOptionSelected: getOptionSelected, onSelectItem: handleSelectItem, closeOnSelect: !multiple, onRequestClose: handleRequestClose }, restMenuProps), ({ index, item }, itemProps) => children({ index, item: item }, itemProps)));
 });
 SelectboxMenu.displayName = 'SelectboxMenu';
 exports.default = React.memo(SelectboxMenu);

package/Selectbox/index.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { GetOptionSelected, OnRequestClose, Value } from '../Menu';
-import type { MenuItemCommonProps } from '../Menu/MenuItem';
+import type { MenuItemProps } from '../Menu/MenuItem';
 import SelectboxItem from '../Menu/MenuItem';
 import { SelectboxButtonProps } from './SelectboxButton';
 import { SelectboxChevronIconProps } from './SelectboxChevronIcon';
-import { AnchorPos } from '../Popper';
+import { AnchorPos, PositionStrategy } from '../Popper';
 import { TextFieldLabelProps } from '../TextField/TextFieldLabel';
 import { TextFieldLabelAsteriskProps } from '../TextField/TextFieldLabelAsterisk';
 import { TextFieldErrorTextProps } from '../TextField/TextFieldErrorText';
@@ -36,6 +36,8 @@ export interface SelectboxProps<T, Multiple extends boolean | undefined = undefi
      * Default: `bottom`
      */
     readonly anchorPos?: AnchorPos;
+    readonly positionStrategy?: PositionStrategy;
+    readonly autoFlip?: boolean;
     /**
      * Text field loading state\
      * If `true` then text field has been contained the loading indicator, otherwise - nop
@@ -154,7 +156,7 @@ export interface SelectboxOverrides {
 export type Children<T> = (data: {
     item: T;
     index: number;
-}, itemProps: MenuItemCommonProps) => React.ReactNode;
+}, itemProps: MenuItemProps) => React.ReactNode;
 export type ItemToString<T, Multiple extends boolean | undefined = undefined> = (item: Multiple extends undefined ? T : readonly T[]) => string;
 export type OnChange<T, Multiple extends boolean | undefined = undefined> = (item: Value<T, Multiple>) => void;
 declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: SelectboxProps<T, Multiple> & {