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

package/Popper/usePopprer.js

@@ -0,0 +1,505 @@
+"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 = ({ anchorElement, anchorPos = 'auto', positionStrategy = 'fixed', autoFlip = true, offset = 0, viewportMargin = 10, isOpen = 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) => {
+        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') {
+            return {
+                left: left + window.scrollX,
+                top: top + window.scrollY,
+                width,
+            };
+        }
+        return { left, top, width };
+    }, [offset, positionStrategy]);
+    // const clampPopperToContainer = React.useCallback(
+    //   (style: { left: number; top: number; width?: number }, _popperRect: DOMRect) => style,
+    //   [],
+    // );
+    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;
+    }, []);
+    const getPreferredPlacements = react_1.default.useCallback((preferredPlacement, anchorRect, popperRect) => {
+        // Check the auto placements
+        if (preferredPlacement.startsWith('auto')) {
+            const [, preferredDirection = 'bottom'] = preferredPlacement.split('-');
+            const allPlacements = [
+                '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',
+            ];
+            // Sorting placements
+            const sortedPlacements = [...allPlacements].sort((a, b) => {
+                const aDir = a.split('-')[0];
+                const bDir = b.split('-')[0];
+                if (aDir === preferredDirection && bDir !== preferredDirection)
+                    return -1;
+                if (aDir !== preferredDirection && bDir === preferredDirection)
+                    return 1;
+                return 0;
+            });
+            for (const place of sortedPlacements) {
+                const viewportStyle = getPositionStyle({
+                    place,
+                    anchorRect,
+                    popperRect,
+                    forViewportCheck: true,
+                });
+                const fits = checkIfViewportFits(viewportStyle, popperRect);
+                if (fits) {
+                    const finalStyle = getPositionStyle({
+                        place,
+                        anchorRect,
+                        popperRect,
+                        forViewportCheck: false,
+                    });
+                    return {
+                        found: true,
+                        placement: place,
+                        style: clampPopperToContainer(finalStyle, popperRect),
+                    };
+                }
+            }
+        }
+        if (!autoFlip) {
+            const finalStyle = getPositionStyle({
+                place: preferredPlacement,
+                anchorRect,
+                popperRect,
+                forViewportCheck: false,
+            });
+            return {
+                found: false,
+                placement: preferredPlacement,
+                style: clampPopperToContainer(finalStyle, popperRect),
+            };
+        }
+        /**
+         * bottom-fill, top-fill
+         */
+        if (preferredPlacement.endsWith('fill')) {
+            const [preferredDirection = 'bottom'] = preferredPlacement.split('-');
+            const allPlacements = ['top-fill', 'bottom-fill'];
+            const sortedPlacements = [...allPlacements].sort((a, b) => {
+                const aDir = a.split('-')[0];
+                const bDir = b.split('-')[0];
+                if (aDir === preferredDirection && bDir !== preferredDirection)
+                    return -1;
+                if (aDir !== preferredDirection && bDir === preferredDirection)
+                    return 1;
+                return 0;
+            });
+            for (const place of sortedPlacements) {
+                const viewportStyle = getPositionStyle({
+                    place,
+                    anchorRect,
+                    popperRect,
+                    forViewportCheck: true,
+                });
+                const fits = checkIfViewportFits(viewportStyle, popperRect);
+                if (fits) {
+                    const finalStyle = getPositionStyle({
+                        place,
+                        anchorRect,
+                        popperRect,
+                        forViewportCheck: false,
+                    });
+                    return {
+                        found: true,
+                        placement: place,
+                        style: clampPopperToContainer(finalStyle, popperRect),
+                    };
+                }
+            }
+        }
+        /**
+         * Other
+         */
+        const order = placementsOrder[preferredPlacement] || placementsOrder.bottom;
+        for (const place of order) {
+            const viewportStyle = getPositionStyle({
+                place,
+                anchorRect,
+                popperRect,
+                forViewportCheck: true,
+            });
+            const fits = checkIfViewportFits(viewportStyle, popperRect);
+            if (fits) {
+                const finalStyle = getPositionStyle({
+                    place,
+                    anchorRect,
+                    popperRect,
+                    forViewportCheck: false,
+                });
+                return {
+                    found: true,
+                    placement: place,
+                    style: clampPopperToContainer(finalStyle, popperRect),
+                };
+            }
+        }
+        const finalStyle = getPositionStyle({
+            place: preferredPlacement,
+            anchorRect,
+            popperRect,
+            forViewportCheck: false,
+        });
+        return {
+            found: false,
+            placement: preferredPlacement,
+            style: clampPopperToContainer(finalStyle, popperRect),
+        };
+    }, [autoFlip, getPositionStyle, checkIfViewportFits, clampPopperToContainer, placementsOrder]);
+    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]);
+    // const getTransformOrigin = React.useCallback((placement: AnchorPos): string => {
+    //   if (placement.startsWith('top')) return 'bottom center';
+    //   if (placement.startsWith('bottom')) return 'top center';
+    //   if (placement.startsWith('left')) return 'right center';
+    //   if (placement.startsWith('right')) return 'left center';
+    //
+    //   return 'top center';
+    // }, []);
+    /**
+     * Open / Close popper logic
+     */
+    react_1.default.useEffect(() => {
+        if (!isOpen) {
+            setIsVisible(false);
+            setStyle(null);
+        }
+        else if (anchorElement && isOpen && popperRef.current) {
+            calculatePosition();
+            setIsVisible(true);
+        }
+    }, [actualPlacement, 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.d.ts

@@ -1,11 +1,16 @@
 import * as React from 'react';
 import { ButtonProps } from '../Button';
+import { AnchorPos } from '../Menu';
 export type SelectboxButtonProps = Omit<ButtonProps, 'type'> & {
     readonly fullWidth?: boolean;
     readonly error?: boolean;
+    readonly anchorPos?: AnchorPos;
+    readonly isOpen?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<Omit<ButtonProps, "type"> & {
     readonly fullWidth?: boolean | undefined;
     readonly error?: boolean | undefined;
+    readonly anchorPos?: import("../Popper").AnchorPos | undefined;
+    readonly isOpen?: boolean | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Selectbox/SelectboxButton.js

@@ -41,25 +41,65 @@ const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Button_1 = __importDefault(require("../Button"));
 const ButtonTextWrapper_1 = __importDefault(require("../Button/ButtonTextWrapper"));
+const react_1 = require("@emotion/react");
 const StyledSelectboxButton = (0, styled_1.default)(Button_1.default) `
   flex: 1;
   padding: 1em 1.2em;
   font-size: 1em;
   background: none;
-  border-radius: inherit;
-  margin: 0;
-  border: 0;
   width: 100%;
+  border-width: 1px;
+  border-style: solid;
+  box-shadow: none;
+  &:hover {
+    box-shadow: none;
+  }
+  border-color: ${({ theme }) => theme.isDark
+    ? theme.color.textPrimary.darken(100).toString()
+    : theme.color.textPrimary.lighten(150).toString()};
+  ${props => props.$error &&
+    (0, react_1.css) `
+      border-color: ${props.theme.color.error.toString()};
+      color: ${props.theme.color.error.toString()};
+      &:focus {
+        border-color: ${props.theme.color.error.lighten(0.6).toString()};
+      }
+    `}
+  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 } = props, nativeProps = __rest(props, ["children", "fullWidth", "error"]);
-    return (React.createElement(StyledSelectboxButton, Object.assign({ "$fullWidth": fullWidth, "$error": error }, nativeProps, { overrides: {
-            TextWrapper: React.forwardRef(function SelectboxButtonTextWrapper(p, r) {
-                return React.createElement(StyledButtonTextWrapper, Object.assign({}, p, { ref: r }));
-            }),
+    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: {
+            TextWrapper: StyledButtonTextWrapper,
         }, ref: ref }), children));
 };
 exports.default = React.forwardRef(SelectboxButton);

package/Selectbox/SelectboxButtonWrapper.d.ts

@@ -2,9 +2,11 @@ import * as React from 'react';
 export type SelectboxButtonWrapperProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly fullWidth?: boolean;
     readonly error?: boolean;
+    readonly isOpen: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     readonly fullWidth?: boolean | undefined;
     readonly error?: boolean | undefined;
+    readonly isOpen: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Selectbox/SelectboxButtonWrapper.js

@@ -39,7 +39,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
-const react_1 = require("@emotion/react");
 const Wrapper = styled_1.default.div `
   min-width: 16em;
   font-size: 0.9em;
@@ -48,28 +47,13 @@ const Wrapper = styled_1.default.div `
   display: flex;
   align-items: stretch;
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
-  border: 1px solid transparent;
-
-  border: 1px solid;
   outline: 1px solid transparent;
-
-  border-color: ${({ theme }) => theme.isDark
-    ? theme.color.textPrimary.darken(100).toString()
-    : theme.color.textPrimary.lighten(150).toString()};
   width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
-
   background-color: ${({ theme }) => theme.color.surface.toString()};
   color: ${({ theme }) => theme.color.textPrimary.toString()};
   transition: all 180ms ease-out 0s;
 
-  ${props => props.$error &&
-    (0, react_1.css) `
-      border-color: ${props.theme.color.error.toString()};
-      color: ${props.theme.color.error.toString()};
-      &:focus {
-        border-color: ${props.theme.color.error.lighten(0.6).toString()};
-      }
-    `}
+
 `;
 const SelectboxButtonWrapper = (props, ref) => {
     const { fullWidth, children, error } = props, nativeProps = __rest(props, ["fullWidth", "children", "error"]);

package/Selectbox/SelectboxMenu.d.ts

@@ -0,0 +1,12 @@
+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> & {
+    ref?: React.Ref<MenuRef> | undefined;
+}) => JSX.Element;
+export default _default;