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

package/Popper/PopperContainer.js

@@ -21,7 +21,7 @@ const StyledContainer = styled_1.default.div `
   z-index: ${({ theme, $zIndex, $disablePortal }) => typeof $zIndex !== 'undefined' ? $zIndex : $disablePortal ? undefined : theme.zIndex.modal};
 `;
 const PopperContainer = (props, ref) => {
-    const { children, disablePortal, zIndex, positionStrategy = 'absolute' } = props, nativeProps = __rest(props, ["children", "disablePortal", "zIndex", "positionStrategy"]);
+    const { children, disablePortal, zIndex, positionStrategy = 'fixed' } = props, nativeProps = __rest(props, ["children", "disablePortal", "zIndex", "positionStrategy"]);
     return (react_1.default.createElement(StyledContainer, Object.assign({ "$disablePortal": disablePortal, "$zIndex": zIndex, "$positionStrategy": positionStrategy }, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(PopperContainer);

package/Popper/usePopprer.d.ts

@@ -1,8 +1,83 @@
 import React from 'react';
-import { AnchorPos } from './Popper';
 import { 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' | 'bottom-fill' | 'top-fill';
+/**
+ * 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;
 export interface UsePopperProps {
-    readonly anchorElement?: HTMLElement | null;
+    readonly anchorElement: HTMLElement | null;
     readonly anchorPos?: AnchorPos;
     readonly positionStrategy?: PositionStrategy;
     readonly autoFlip?: boolean;
@@ -16,10 +91,20 @@ export interface UsePopperResult {
     readonly popperRef: React.MutableRefObject<HTMLDivElement | null>;
     readonly isVisible: boolean;
     readonly calculatePosition: () => void;
-    readonly getTransformOrigin: (placement: AnchorPos) => string;
+    readonly scrollableAncestor: HTMLElement | Window | null;
     readonly setActualPlacement: React.Dispatch<React.SetStateAction<AnchorPos>>;
     readonly setStyle: React.Dispatch<React.SetStateAction<React.CSSProperties | null>>;
     readonly setIsVisible: React.Dispatch<React.SetStateAction<boolean>>;
 }
+/**
+ * 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
+ */
+export declare const findScrollableAncestor: (element: HTMLElement | null, includeHidden?: boolean) => HTMLElement | Window | null;
 export declare const usePopper: ({ anchorElement, anchorPos, positionStrategy, autoFlip, offset, viewportMargin, isOpen, }: UsePopperProps) => UsePopperResult;
 export default usePopper;

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;