@bioturing/components 0.13.3 → 0.14.0

package/dist/PopupPanel.css

@@ -0,0 +1,116 @@
+.ds-popup-panel {
+  box-shadow: var(--ds-box-shadow-secondary);
+  border-radius: var(--ds-border-radius);
+  background: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text);
+  font-size: var(--ds-font-size);
+  font-family: var(--ds-font-family);
+  transition-property: transform, scale, opacity;
+  transition-duration: .2s;
+  transition-timing-function: var(--ds-motion-ease-out);
+  transform-origin: var(--transform-origin);
+  width: calc(min(var(--size-width), var(--available-width)));
+  max-width: var(--available-width);
+  max-height: var(--available-height);
+  flex-direction: column;
+  height: max-content;
+  list-style: none;
+  display: flex;
+}
+
+.ds-popup-panel[data-ending-style], .ds-popup-panel[data-starting-style] {
+  opacity: 0;
+  transform: scale(.9);
+}
+
+.ds-popup-panel:focus {
+  outline: none;
+}
+
+.ds-popup-panel-header {
+  border-bottom: 1px solid var(--ds-color-split);
+  padding: calc(var(--ds-popup-panel-padding) / 2) var(--ds-popup-panel-padding);
+  flex: 0;
+  margin-bottom: 0;
+}
+
+.ds-popup-panel-header .ds-popup-panel-title-wrapper {
+  font-weight: 500;
+  font-size: var(--ds-font-size);
+  line-height: var(--ds-line-height);
+  color: var(--ds-color-text);
+}
+
+.ds-popup-panel-footer {
+  border-top: 1px solid var(--ds-color-split);
+  padding: calc(var(--ds-popup-panel-padding) / 2) var(--ds-popup-panel-padding);
+  flex: 0;
+  margin-top: 0;
+}
+
+.ds-popup-panel-content {
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+  overflow: auto;
+}
+
+.ds-popup-panel-content .ds-popup-panel-content-inner {
+  padding: var(--ds-popup-panel-padding);
+  flex: 1;
+}
+
+.ds-resize-handle-top {
+  color: #fff;
+  border-top-left-radius: .5rem;
+  border-top-right-radius: .5rem;
+  justify-content: center;
+  width: 100%;
+  height: 4px;
+  padding: .5rem;
+  display: block;
+  position: absolute;
+  top: 0;
+}
+
+.ds-resize-handle-bottom {
+  color: #fff;
+  border-bottom-right-radius: .5rem;
+  border-bottom-left-radius: .5rem;
+  justify-content: center;
+  width: 100%;
+  height: 4px;
+  padding: .5rem;
+  display: block;
+  position: absolute;
+  bottom: 0;
+}
+
+.ds-resize-handle-left {
+  color: #fff;
+  border-top-left-radius: .5rem;
+  border-bottom-left-radius: .5rem;
+  align-items: center;
+  width: 4px;
+  height: 100%;
+  padding: .5rem;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.ds-resize-handle-right {
+  color: #fff;
+  border-top-right-radius: .5rem;
+  border-bottom-right-radius: .5rem;
+  align-items: center;
+  width: 4px;
+  height: 100%;
+  padding: .5rem;
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+

package/dist/PopupPanel.js

@@ -0,0 +1,333 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_antd_es_config_provider_6a57beb3__ from "antd/es/config-provider";
+import * as __WEBPACK_EXTERNAL_MODULE_antd_es_theme_useToken_e8911485__ from "antd/es/theme/useToken";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_popover_cdb87929__ from "@base-ui-components/react/popover";
+import * as __WEBPACK_EXTERNAL_MODULE_antd_es_flex_86593150__ from "antd/es/flex";
+import * as __WEBPACK_EXTERNAL_MODULE_antd__ from "antd";
+import * as __WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__ from "@bioturing/assets";
+import * as __WEBPACK_EXTERNAL_MODULE_react_use_resizable_ad29d4b1__ from "react-use-resizable";
+function cx(...args) {
+    const classes = [];
+    for (const arg of args)if (arg) {
+        if ("string" == typeof arg || "number" == typeof arg) classes.push(String(arg));
+        else if (Array.isArray(arg)) classes.push(...cx(...arg));
+        else if ("object" == typeof arg) {
+            for (const [key, value] of Object.entries(arg))if (value) classes.push(key);
+        }
+    }
+    return classes;
+}
+function clsx(...args) {
+    return cx(...args).join(" ");
+}
+"use client";
+const useAntdCssVarClassname = ()=>{
+    var _token_;
+    const token = (0, __WEBPACK_EXTERNAL_MODULE_antd_es_theme_useToken_e8911485__["default"])();
+    return null == (_token_ = token[4]) ? void 0 : _token_.key;
+};
+const useCls = ()=>{
+    const { getPrefixCls } = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(__WEBPACK_EXTERNAL_MODULE_antd_es_config_provider_6a57beb3__["default"].ConfigContext);
+    return (...args)=>cx(...args).map((cls)=>getPrefixCls(cls)).join(" ");
+};
+function splitCamelCase(text) {
+    const result = [];
+    let currentWord = "";
+    for (const char of text)if (char >= "A" && char <= "Z") {
+        if (currentWord) result.push(currentWord);
+        currentWord = char.toLowerCase();
+    } else currentWord += char;
+    if (currentWord) result.push(currentWord);
+    return result.length > 0 ? result : [
+        text
+    ];
+}
+const parseAntdPlacement = (placement = "bottomLeft")=>{
+    const [position1, position2] = splitCamelCase(placement);
+    let primaryPlacement;
+    let align = "center";
+    if ("top" === position1 || "bottom" === position1) {
+        primaryPlacement = position1;
+        if (position2) switch(position2){
+            case "left":
+                align = "start";
+                break;
+            case "right":
+                align = "end";
+                break;
+        }
+    } else if ("left" === position1 || "right" === position1) {
+        primaryPlacement = position1;
+        if (position2) switch(position2){
+            case "top":
+                align = "start";
+                break;
+            case "bottom":
+                align = "end";
+                break;
+        }
+    } else primaryPlacement = "bottom";
+    return {
+        placement: primaryPlacement,
+        align
+    };
+};
+"use client";
+const IconButtonImpl = (props, ref)=>{
+    const { label, size = "medium", negativeMargin = true, children, className, tooltipProps = {}, as, href, target, rel, download, hrefLang, referrerPolicy, ...rest } = props;
+    const cls = useCls();
+    const antdCssVarClassname = useAntdCssVarClassname();
+    const buttonClasses = [
+        cls("icon-button"),
+        cls(`icon-button-${size}`),
+        cls(negativeMargin ? "icon-button-negative-margin" : ""),
+        antdCssVarClassname,
+        className
+    ].filter(Boolean).join(" ");
+    const Component = as || (href ? "a" : "button");
+    const anchorProps = "a" === Component ? {
+        ...void 0 !== target && {
+            target
+        },
+        ...void 0 !== rel && {
+            rel
+        },
+        ...void 0 !== download && {
+            download
+        },
+        ...void 0 !== hrefLang && {
+            hrefLang
+        },
+        ...void 0 !== referrerPolicy && {
+            referrerPolicy
+        }
+    } : {};
+    const elementProps = {
+        ref,
+        className: buttonClasses,
+        ..."button" === Component && {
+            type: "button"
+        },
+        ...href && {
+            href
+        },
+        ...anchorProps,
+        ...rest
+    };
+    const element = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Component, {
+        ...elementProps,
+        children: children
+    });
+    return label ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Tooltip, {
+        title: label,
+        arrow: false,
+        ...tooltipProps,
+        children: element
+    }) : element;
+};
+const IconButton = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(IconButtonImpl);
+var constants_PopupPanelSize = /*#__PURE__*/ function(PopupPanelSize) {
+    PopupPanelSize["xsmall"] = "320px";
+    PopupPanelSize["small"] = "400px";
+    PopupPanelSize["medium"] = "480px";
+    PopupPanelSize["large"] = "640px";
+    PopupPanelSize["xlarge"] = "840px";
+    return PopupPanelSize;
+}({});
+"use client";
+function useControlledState(value, onChange, defaultValue) {
+    const [internalState, setInternalState] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(defaultValue);
+    const isControlled = void 0 !== value;
+    const setState = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((next)=>{
+        const nextValue = "function" == typeof next ? next(value) : next;
+        if ("function" == typeof onChange) onChange(nextValue);
+        if (!isControlled) setInternalState(next);
+    }, [
+        value,
+        onChange,
+        isControlled
+    ]);
+    const state = isControlled ? value : internalState;
+    return [
+        state,
+        setState
+    ];
+}
+"use client";
+const PopupPanel = ({ children, placement, openOnHover = false, open: outsideOpen, onOpenChange: outsideOnOpenChange, content, title, trigger = "click", className, anchor, beforeCloseButton, afterCloseButton, afterTitle, size = "medium", footer, defaultOpen, resizable = false })=>{
+    const [open, setOpen] = useControlledState(outsideOpen, outsideOnOpenChange, defaultOpen ?? false);
+    const cls = useCls();
+    const antdCssVarClassname = useAntdCssVarClassname();
+    const headlessUIPlacement = parseAntdPlacement(placement);
+    const triggerRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const [popupRef, setPopupRef] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(null);
+    const [width, setWidth] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)();
+    const [height, setHeight] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)();
+    const callbackRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((node)=>{
+        setPopupRef(node);
+    }, []);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (!popupRef) return;
+        const observer = new ResizeObserver((entries)=>{
+            for (const entry of entries){
+                setWidth(entry.contentRect.width);
+                setHeight(entry.contentRect.height);
+            }
+        });
+        observer.observe(popupRef);
+        return ()=>{
+            observer.disconnect();
+        };
+    }, [
+        popupRef
+    ]);
+    const defaultCloseIcon = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__.X, {
+            size: 16
+        }), []);
+    const renderTitle = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+            className: cls("popup-panel-header"),
+            children: [
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_antd_es_flex_86593150__["default"], {
+                    align: "center",
+                    gap: 8,
+                    className: cls("popup-panel-title-wrapper"),
+                    children: [
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_popover_cdb87929__.Popover.Title, {
+                            render: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                className: cls("grow", "truncate"),
+                                children: title
+                            })
+                        }),
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                            className: "flex items-center gap-2",
+                            children: [
+                                beforeCloseButton,
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_popover_cdb87929__.Popover.Close, {
+                                    render: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(IconButton, {
+                                        children: defaultCloseIcon
+                                    })
+                                }),
+                                afterCloseButton
+                            ]
+                        })
+                    ]
+                }),
+                afterTitle ? afterTitle : null
+            ]
+        }), [
+        afterCloseButton,
+        afterTitle,
+        beforeCloseButton,
+        cls,
+        defaultCloseIcon,
+        title
+    ]);
+    const [resizing, setResizing] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const { getRootProps, getHandleProps, rootRef } = (0, __WEBPACK_EXTERNAL_MODULE_react_use_resizable_ad29d4b1__.useResizable)({
+        initialWidth: width,
+        initialHeight: height,
+        onDragStart: ()=>setResizing(true),
+        onDragEnd: ()=>setResizing(false)
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (resizing) document.body.style.userSelect = "none";
+        else document.body.style.userSelect = "";
+    }, [
+        resizing
+    ]);
+    const onReverseHandleChangeVertical = (parent, values)=>{
+        if (!parent.current) return;
+        const { heightDiff } = values;
+        parent.current.style.top = `${parseInt(parent.current.style.top || "0") - heightDiff}px`;
+    };
+    const onReverseHandleChangeHorizontal = (parent, values)=>{
+        if (!parent.current) return;
+        const { widthDiff } = values;
+        parent.current.style.left = `${parseInt(parent.current.style.left || "0") - widthDiff}px`;
+    };
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_popover_cdb87929__.Popover.Root, {
+        openOnHover: "hover" === trigger ? true : openOnHover,
+        open: open,
+        onOpenChange: (newOpen)=>{
+            setOpen(newOpen);
+        },
+        delay: 100,
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_popover_cdb87929__.Popover.Trigger, {
+                render: children,
+                ref: triggerRef
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_popover_cdb87929__.Popover.Portal, {
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_popover_cdb87929__.Popover.Positioner, {
+                    className: cls("popup-panel-root"),
+                    side: headlessUIPlacement.placement,
+                    align: headlessUIPlacement.align,
+                    sideOffset: 4,
+                    anchor: anchor,
+                    style: {
+                        "--size-width": size ? constants_PopupPanelSize[size] : void 0
+                    },
+                    ref: callbackRef,
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_popover_cdb87929__.Popover.Popup, {
+                        className: clsx(cls("popup-panel"), antdCssVarClassname, className),
+                        ...getRootProps(),
+                        ...resizing ? {
+                            "data-resizing": true
+                        } : {},
+                        children: [
+                            title && renderTitle(),
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                className: cls("popup-panel-content"),
+                                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                    className: cls("popup-panel-content-inner"),
+                                    children: content
+                                })
+                            }),
+                            footer && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                className: cls("popup-panel-footer"),
+                                children: "function" == typeof footer ? footer({
+                                    close: ()=>setOpen(false)
+                                }) : footer
+                            }),
+                            resizable && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+                                children: [
+                                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                        className: cls("resize-handle-top"),
+                                        ...getHandleProps({
+                                            reverse: true,
+                                            lockHorizontal: true,
+                                            onResize: (values)=>onReverseHandleChangeVertical(rootRef, values)
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                        className: cls("resize-handle-bottom"),
+                                        ...getHandleProps({
+                                            lockHorizontal: true
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                        className: cls("resize-handle-left"),
+                                        ...getHandleProps({
+                                            reverse: true,
+                                            lockVertical: true,
+                                            onResize: (values)=>onReverseHandleChangeHorizontal(rootRef, values)
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                        className: cls("resize-handle-right"),
+                                        ...getHandleProps({
+                                            lockVertical: true
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+};
+export { PopupPanel };

package/dist/ScrollArea.js

@@ -31,7 +31,10 @@ const ScrollArea = ({ children, className, viewportClassName, thumbClassName, sc
         children: [
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Viewport, {
                 className: clsx(cls("scroll-area-viewport"), viewportClassName),
-                children: children
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Content, {
+                    className: clsx(cls("scroll-area-content")),
+                    children: children
+                })
             }),
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Scrollbar, {
                 className: clsx(cls("scroll-area-scrollbar"), scrollbarClassName),

package/dist/Select.js

@@ -3,18 +3,107 @@ import * as __WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__ from "@biotur
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_select_005d200f__ from "antd/es/select";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_checkbox_80658bc3__ from "antd/es/checkbox";
 import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
-const MainSelectInner = ({ mode, className, popupClassName, ...rest }, ref)=>{
+import * as __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__ from "@floating-ui/react";
+import "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_es_toolkit_82663681__ from "es-toolkit";
+"use client";
+function useControlledState(value, onChange, defaultValue) {
+    const [internalState, setInternalState] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(defaultValue);
+    const isControlled = void 0 !== value;
+    const setState = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((next)=>{
+        const nextValue = "function" == typeof next ? next(value) : next;
+        if ("function" == typeof onChange) onChange(nextValue);
+        if (!isControlled) setInternalState(next);
+    }, [
+        value,
+        onChange,
+        isControlled
+    ]);
+    const state = isControlled ? value : internalState;
+    return [
+        state,
+        setState
+    ];
+}
+function cx(...args) {
+    const classes = [];
+    for (const arg of args)if (arg) {
+        if ("string" == typeof arg || "number" == typeof arg) classes.push(String(arg));
+        else if (Array.isArray(arg)) classes.push(...cx(...arg));
+        else if ("object" == typeof arg) {
+            for (const [key, value] of Object.entries(arg))if (value) classes.push(key);
+        }
+    }
+    return classes;
+}
+function clsx(...args) {
+    return cx(...args).join(" ");
+}
+var constants_PopupPanelSize = /*#__PURE__*/ function(PopupPanelSize) {
+    PopupPanelSize["xsmall"] = "320px";
+    PopupPanelSize["small"] = "400px";
+    PopupPanelSize["medium"] = "480px";
+    PopupPanelSize["large"] = "640px";
+    PopupPanelSize["xlarge"] = "840px";
+    return PopupPanelSize;
+}({});
+const MainSelectInner = ({ mode, className, open: openProp, defaultOpen, onOpenChange, popupClassName, onDropdownVisibleChange, enhancePositioner, getPopupContainer, popupSize, popupRender, classNames, styles = {}, ...rest }, ref)=>{
+    var _classNames_popup;
+    const portalNode = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useFloatingPortalNode)({});
     const isMultiple = "multiple" === mode || "tags" === mode;
+    const [open, setOpen] = useControlledState(openProp, onOpenChange || onDropdownVisibleChange, defaultOpen);
+    const { floatingStyles, refs } = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useFloating)({
+        placement: "bottom-start",
+        transform: false,
+        open: enhancePositioner && open,
+        middleware: [
+            (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.offset)({
+                mainAxis: 4
+            }),
+            (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.autoPlacement)({
+                allowedPlacements: [
+                    "bottom-start",
+                    "bottom-end",
+                    "bottom",
+                    "top-start",
+                    "top-end",
+                    "top"
+                ]
+            }),
+            (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.shift)({
+                padding: 8
+            }),
+            (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.size)({
+                padding: 8,
+                apply ({ availableHeight, availableWidth, elements }) {
+                    elements.floating.style.setProperty("--available-width", availableWidth + "px");
+                    elements.floating.style.setProperty("--available-height", availableHeight + "px");
+                }
+            })
+        ],
+        whileElementsMounted: __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.autoUpdate
+    });
+    const dsPopupClassName = clsx("ds-select-popup", isMultiple && "ds-select-multiple", (null == classNames ? void 0 : null == (_classNames_popup = classNames.popup) ? void 0 : _classNames_popup.root) || popupClassName, enhancePositioner && "ds-select-popup-enhanced");
+    const popupWidth = popupSize && "string" == typeof popupSize && popupSize in constants_PopupPanelSize ? constants_PopupPanelSize[popupSize] : "number" == typeof popupSize ? popupSize + "px" : popupSize || "fit-content";
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_select_005d200f__["default"], {
-        ref: ref,
+        ref: (node)=>{
+            if (ref) if ("function" == typeof ref) ref(node);
+            else ref.current = node;
+            if (!node) return;
+            refs.setReference(null == node ? void 0 : node.nativeElement);
+        },
         suffixIcon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__.CaretDown, {
             weight: "bold"
         }),
-        popupClassName: [
-            "ds-select-popup",
-            isMultiple && "ds-select-multiple",
-            popupClassName
-        ].filter(Boolean).join(" "),
+        open: open,
+        onOpenChange: setOpen,
+        popupClassName: dsPopupClassName,
+        classNames: {
+            popup: {
+                root: dsPopupClassName
+            },
+            ...classNames
+        },
         ...isMultiple ? {
             menuItemSelectedIcon: ({ isSelected })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
                     className: "ant-select-checkbox-indicator",
@@ -26,10 +115,36 @@ const MainSelectInner = ({ mode, className, popupClassName, ...rest }, ref)=>{
                 })
         } : {},
         mode: mode,
-        className: [
-            "ds-select",
-            className
-        ].filter(Boolean).join(" "),
+        className: clsx("ds-select", className),
+        styles: enhancePositioner ? (0, __WEBPACK_EXTERNAL_MODULE_es_toolkit_82663681__.toMerged)(styles, {
+            popup: {
+                root: {
+                    transition: "none",
+                    ...floatingStyles,
+                    "--ds-select-popup-width": popupWidth
+                }
+            }
+        }) : styles,
+        getPopupContainer: getPopupContainer || (enhancePositioner ? ()=>portalNode || document.body : void 0),
+        popupRender: (menu)=>{
+            if (!enhancePositioner) return popupRender ? popupRender(menu) : menu;
+            return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.FloatingOverlay, {
+                        lockScroll: true,
+                        onClick: ()=>setOpen(false)
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        ref: (node)=>{
+                            if (!node) return;
+                            const popupEl = node.closest(".ds-select-dropdown");
+                            refs.setFloating(popupEl);
+                        },
+                        children: popupRender ? popupRender(menu) : menu
+                    })
+                ]
+            });
+        },
         ...rest
     });
 };

package/dist/Table.js

@@ -53,7 +53,7 @@ const Empty = ({ image, size = "medium", className, ...rest })=>{
     });
 };
 const component = Empty;
-const InternalTable = ({ columns, locale, emptyDescription, loading, ...rest })=>{
+const InternalTable = ({ columns, locale, emptyDescription, loading, scroll = {}, ...rest })=>{
     const cls = useCls();
     const modifiedColumns = columns ? columns.map((column)=>({
             sortIcon: ({ sortOrder })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
@@ -107,7 +107,8 @@ const InternalTable = ({ columns, locale, emptyDescription, loading, ...rest })=
         loading: spinProps,
         locale: modifiedLocale,
         scroll: {
-            x: "max-content"
+            x: "fit-content",
+            ...scroll
         },
         ...rest
     });