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

package/Popper/usePopprer.js

@@ -3,14 +3,60 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePopper = void 0;
+exports.usePopper = exports.findScrollableAncestor = void 0;
 const react_1 = __importDefault(require("react"));
-const usePopper = ({ anchorElement, anchorPos = 'auto', positionStrategy = 'absolute', autoFlip = true, offset = 0, viewportMargin = 30, isOpen = false, }) => {
+/**
+ * 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);
-    // Синхронизация actualPlacement с anchorPos
+    // 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);
@@ -21,11 +67,16 @@ const usePopper = ({ anchorElement, anchorPos = 'auto', positionStrategy = 'abso
         const [direction, modifier = ''] = place.split('-');
         let left = anchorRect.left;
         let top = anchorRect.top;
-        // Вычисляем позицию относительно viewport
+        let width = undefined;
+        // Calculating the position relative to the viewport
         switch (direction) {
             case 'top':
                 top = anchorRect.top - popperRect.height - offset;
-                if (modifier === 'left' || modifier === 'start') {
+                if (modifier === 'fill') {
+                    left = anchorRect.left;
+                    width = anchorRect.width;
+                }
+                else if (modifier === 'left' || modifier === 'start') {
                     left = anchorRect.left;
                 }
                 else if (modifier === 'right' || modifier === 'end') {
@@ -37,7 +88,11 @@ const usePopper = ({ anchorElement, anchorPos = 'auto', positionStrategy = 'abso
                 break;
             case 'bottom':
                 top = anchorRect.bottom + offset;
-                if (modifier === 'left' || modifier === 'start') {
+                if (modifier === 'fill') {
+                    left = anchorRect.left;
+                    width = anchorRect.width;
+                }
+                else if (modifier === 'left' || modifier === 'start') {
                     left = anchorRect.left;
                 }
                 else if (modifier === 'right' || modifier === 'end') {
@@ -75,31 +130,82 @@ const usePopper = ({ anchorElement, anchorPos = 'auto', positionStrategy = 'abso
                 left = anchorRect.left + (anchorRect.width - popperRect.width) / 2;
                 top = anchorRect.bottom + offset;
         }
-        // Возвращаем viewport координаты для проверки или финальные координаты
+        // Returning the viewport coordinates for verification or the final coordinates
         if (forViewportCheck) {
-            return { left, top };
+            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 };
+        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]);
+    }, [viewportMargin, scrollableAncestor, positionStrategy]);
     const placementsOrder = react_1.default.useMemo(() => {
         const basePlacements = {
             top: ['top', 'top-left', 'top-right', 'top-start', 'top-end'],
@@ -116,7 +222,7 @@ const usePopper = ({ anchorElement, anchorPos = 'auto', positionStrategy = 'abso
         const order = {};
         allPlacements.forEach(placement => {
             const [direction] = placement.split('-');
-            // Приоритет: то же направление > противоположное > остальные
+            // Priority: same direction > opposite > the rest
             const opposite = direction === 'top'
                 ? 'bottom'
                 : direction === 'bottom'
@@ -132,10 +238,11 @@ const usePopper = ({ anchorElement, anchorPos = 'auto', positionStrategy = 'abso
                 ...(direction !== 'left' && direction !== 'right' ? basePlacements.right : []),
             ];
         });
+        // console.log(order);
         return order;
     }, []);
     const getPreferredPlacements = react_1.default.useCallback((preferredPlacement, anchorRect, popperRect) => {
-        // Обработка auto placement
+        // Check the auto placements
         if (preferredPlacement.startsWith('auto')) {
             const [, preferredDirection = 'bottom'] = preferredPlacement.split('-');
             const allPlacements = [
@@ -156,7 +263,7 @@ const usePopper = ({ anchorElement, anchorPos = 'auto', positionStrategy = 'abso
                 'right-top',
                 'right-bottom',
             ];
-            // Сортируем: сначала указанное направление
+            // Sorting placements
             const sortedPlacements = [...allPlacements].sort((a, b) => {
                 const aDir = a.split('-')[0];
                 const bDir = b.split('-')[0];
@@ -184,7 +291,7 @@ const usePopper = ({ anchorElement, anchorPos = 'auto', positionStrategy = 'abso
                     return {
                         found: true,
                         placement: place,
-                        style: finalStyle,
+                        style: clampPopperToContainer(finalStyle, popperRect),
                     };
                 }
             }
@@ -199,9 +306,50 @@ const usePopper = ({ anchorElement, anchorPos = 'auto', positionStrategy = 'abso
             return {
                 found: false,
                 placement: preferredPlacement,
-                style: finalStyle,
+                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({
@@ -221,7 +369,7 @@ const usePopper = ({ anchorElement, anchorPos = 'auto', positionStrategy = 'abso
                 return {
                     found: true,
                     placement: place,
-                    style: finalStyle,
+                    style: clampPopperToContainer(finalStyle, popperRect),
                 };
             }
         }
@@ -234,73 +382,52 @@ const usePopper = ({ anchorElement, anchorPos = 'auto', positionStrategy = 'abso
         return {
             found: false,
             placement: preferredPlacement,
-            style: finalStyle,
+            style: clampPopperToContainer(finalStyle, popperRect),
         };
-    }, [autoFlip, getPositionStyle, checkIfViewportFits, placementsOrder]);
+    }, [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 placements = getPreferredPlacements(actualPlacement, anchorRect, popperRect);
-        if (placements.found) {
-            setActualPlacement(placements.placement);
-            setStyle(placements.style);
+        const { style, placement, found } = getPreferredPlacements(anchorPos, anchorRect, popperRect);
+        if (found) {
+            setActualPlacement(placement);
         }
-        else {
-            setStyle(placements.style);
-        }
-    }, [actualPlacement, anchorElement, getPreferredPlacements]);
-    const getTransformOrigin = react_1.default.useCallback((placement) => {
-        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';
-    }, []);
-    // Очистка при закрытии
+        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) {
-            const anchorRect = anchorElement.getBoundingClientRect();
-            const popperRect = popperRef.current.getBoundingClientRect();
-            const placements = getPreferredPlacements(actualPlacement, anchorRect, popperRect);
-            if (placements.found) {
-                setActualPlacement(placements.placement);
-                setStyle(placements.style);
-            }
-            else {
-                setStyle(placements.style);
-            }
+            calculatePosition();
             setIsVisible(true);
         }
-    }, [actualPlacement, anchorElement, getPreferredPlacements, isOpen]);
-    // Отслеживание скролла
+    }, [actualPlacement, anchorElement, getPreferredPlacements, isOpen, calculatePosition]);
+    /**
+     * The anchor element changes
+     */
     react_1.default.useEffect(() => {
-        const handleEvent = () => {
-            if (isOpen) {
-                calculatePosition();
-            }
-        };
-        window.addEventListener('scroll', handleEvent);
-        return () => {
-            window.removeEventListener('scroll', handleEvent);
-        };
-    }, [calculatePosition, isOpen]);
-    // Отслеживание мутаций anchor элемента
-    react_1.default.useEffect(() => {
-        if (!isOpen || !anchorElement)
+        if (!isOpen || !anchorElement) {
             return;
+        }
         const observer = new MutationObserver(() => {
             window.requestAnimationFrame(() => {
+                // console.log('The anchor element was change');
                 calculatePosition();
             });
         });
@@ -314,13 +441,61 @@ const usePopper = ({ anchorElement, anchorPos = 'auto', positionStrategy = 'abso
             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,
-        getTransformOrigin,
         setActualPlacement,
         setStyle,
         setIsVisible,

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;

package/Selectbox/SelectboxMenu.js

@@ -0,0 +1,50 @@
+"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 = __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 handleSelectItem = React.useCallback((item) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(item);
+    }, [onChange]);
+    const handleRequestClose = React.useCallback(evt => {
+        if ((evt === null || evt === void 0 ? void 0 : evt.target) !== anchorElement) {
+            if (onRequestClose) {
+                onRequestClose(evt);
+            }
+            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)));
+});
+SelectboxMenu.displayName = 'SelectboxMenu';
+exports.default = React.memo(SelectboxMenu);