foxit-component 0.0.1-alpha.3 → 0.0.1-alpha.30

package/es/Form/useFormWatch.js

@@ -0,0 +1,37 @@
+import { useRef, useEffect } from 'react';
+
+function useFormWatch(formRef, callback, fieldNames) {
+    var callbackRef = useRef(callback);
+    useEffect(function () {
+        callbackRef.current = callback;
+    }, [callback]);
+    // 处理表单字段监听
+    useEffect(function () {
+        // 如果表单引用不存在，设置轮询检查
+        if (!formRef.current) {
+            var checkInterval_1 = setInterval(function () {
+                if (formRef.current) {
+                    clearInterval(checkInterval_1);
+                    subscribeToFields();
+                }
+            }, 100);
+            // 清理轮询
+            return function () { return clearInterval(checkInterval_1); };
+        }
+        else {
+            // 表单引用存在，直接订阅
+            return subscribeToFields();
+        }
+        function subscribeToFields() {
+            var _a;
+            var unsubscribe = (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.subscribe(fieldNames, function (newValues) {
+                callbackRef.current(newValues);
+            });
+            return function () {
+                unsubscribe === null || unsubscribe === void 0 ? void 0 : unsubscribe();
+            };
+        }
+    }, [formRef, fieldNames.join(',')]);
+}
+
+export { useFormWatch };

package/es/Input/Input.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import './input.css';
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     addonAfter?: React.ReactNode;
+    className?: string;
 }
 declare const Input: React.FC<InputProps>;
 interface SearchInputProps extends InputProps {

package/es/Input/Input.js

@@ -1,21 +1,22 @@
 import { __rest, __assign } from '../node_modules/tslib/tslib.es6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import './input.css.js';
+import classNames from 'classnames';
 import { Icon } from '../Icon/index.js';
 
 var Input = function (_a) {
-    var addonAfter = _a.addonAfter, rest = __rest(_a, ["addonAfter"]);
-    return (jsxs("div", __assign({ className: "foxit-input-wrapper" }, { children: [jsx("input", __assign({}, rest, { className: "foxit-input-element" })), addonAfter && jsx("div", __assign({ className: "foxit-input-addon" }, { children: addonAfter }))] })));
+    var addonAfter = _a.addonAfter, className = _a.className, rest = __rest(_a, ["addonAfter", "className"]);
+    return (jsxs("div", __assign({ className: classNames('foxit-input-wrapper', rest.disabled && 'foxit-input-wrapper-disabled', className) }, { children: [jsx("input", __assign({}, rest, { className: "foxit-input-element" })), addonAfter && jsx("div", __assign({ className: "foxit-input-addon" }, { children: addonAfter }))] })));
 };
 var SearchInput = function (_a) {
     var onSearch = _a.onSearch, rest = __rest(_a, ["onSearch"]);
+    var _b = useState(rest.value || ''), value = _b[0], setValue = _b[1];
     var handleSearch = function () {
         if (onSearch) {
-            onSearch(rest.value);
+            onSearch(value);
         }
     };
-    return (jsx(Input, __assign({}, rest, { addonAfter: jsx("div", __assign({ style: { display: 'flex' }, onClick: handleSearch }, { children: jsx(Icon, { name: "SearchOutlined" }) })) })));
+    return (jsx(Input, __assign({}, rest, { onChange: function (e) { return setValue(e.target.value); }, addonAfter: jsx("div", __assign({ style: { display: 'flex' }, onClick: handleSearch }, { children: jsx(Icon, { name: "SearchOutlined" }) })) })));
 };
 var PasswordInput = function (props) {
     var _a = useState(false), visible = _a[0], setVisible = _a[1];

package/es/Menu/Menu.d.ts

@@ -16,7 +16,8 @@ interface MenuProps {
     defaultSelectedKeys?: string[];
     defaultOpenKeys?: string[];
     style?: React.CSSProperties;
+    inlineCollapsed?: boolean;
 }
 export declare const getItem: (label: ReactNode, key: Key, icon?: ReactNode, children?: MenuItem[], type?: 'group') => MenuItem;
 declare const Menu: React.FC<MenuProps>;
-export default Menu;
+export { Menu };

package/es/Menu/Menu.js

@@ -1,8 +1,7 @@
 import { __assign, __spreadArray } from '../node_modules/tslib/tslib.es6.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
 import { Icon } from '../Icon/index.js';
-import './menu.css.js';
 
 var getItem = function (label, key, icon, children, type) {
     return {
@@ -14,23 +13,26 @@ var getItem = function (label, key, icon, children, type) {
     };
 };
 var Menu = function (_a) {
-    var items = _a.items, onClick = _a.onClick, _b = _a.defaultSelectedKeys, defaultSelectedKeys = _b === void 0 ? [] : _b, _c = _a.defaultOpenKeys, defaultOpenKeys = _c === void 0 ? [] : _c, style = _a.style;
-    var _d = useState(defaultOpenKeys), openKeys = _d[0], setOpenKeys = _d[1];
-    var _e = useState(defaultSelectedKeys), selectedKeys = _e[0], setSelectedKeys = _e[1];
+    var items = _a.items, onClick = _a.onClick, _b = _a.defaultSelectedKeys, defaultSelectedKeys = _b === void 0 ? [] : _b, _c = _a.defaultOpenKeys, defaultOpenKeys = _c === void 0 ? [] : _c, style = _a.style, _d = _a.inlineCollapsed, inlineCollapsed = _d === void 0 ? false : _d;
+    var _e = useState(defaultOpenKeys), openKeys = _e[0], setOpenKeys = _e[1];
+    var _f = useState(defaultSelectedKeys), selectedKeys = _f[0], setSelectedKeys = _f[1];
+    var _g = useState(null), hoveredKey = _g[0], setHoveredKey = _g[1];
+    var _h = useState({ top: 0, left: 0 }), popupPosition = _h[0], setPopupPosition = _h[1];
+    var menuItemRefs = useRef({});
+    var popupRef = useRef(null);
     var handleMenuClick = function (e) {
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
         setSelectedKeys([e.key]);
     };
-    // const handleOpenChange = (keys: string[]) => {
-    //   setOpenKeys(keys);
-    // };
     var isFirstLevel = function (item) {
         return items.some(function (i) { return i.key === item.key; });
     };
+    // 标准展开模式的菜单项渲染
     var renderMenuItem = function (item) {
         var isSelected = selectedKeys.includes(item.key.toString());
         return (jsx("div", __assign({ className: "foxit-menu-item ".concat(isSelected ? 'selected' : '') }, { children: jsxs("div", __assign({ className: "foxit-menu-item-content", onClick: function () { return handleMenuClick({ key: item.key.toString() }); } }, { children: [item.icon && jsx("span", __assign({ style: { marginRight: '8px' } }, { children: item.icon })), jsx("span", __assign({ className: isFirstLevel(item) ? 'foxit-menu-item-label' : '' }, { children: item.label }))] })) }), item.key));
     };
+    // 标准展开模式的子菜单渲染
     var renderSubMenu = function (item) {
         var isOpen = openKeys.includes(item.key.toString());
         return (jsxs("div", { children: [jsxs("div", __assign({ className: "foxit-menu-submenu-title", onClick: function () {
@@ -44,7 +46,118 @@ var Menu = function (_a) {
                         return child.children ? renderSubMenu(child) : renderMenuItem(child);
                     }) })))] }, item.key));
     };
-    return (jsx("div", __assign({ className: "foxit-menu", style: __assign({}, style) }, { children: items.map(function (item) { return (item.children ? renderSubMenu(item) : renderMenuItem(item)); }) })));
+    // 收起模式的菜单项渲染
+    var renderMenuCollapsedItem = function (item) {
+        var isSelected = selectedKeys.includes(item.key.toString());
+        return (jsx("div", __assign({ ref: function (el) { return (menuItemRefs.current[item.key.toString()] = el); }, className: "foxit-menu-item foxit-menu-collapsed-item ".concat(isSelected ? 'selected' : ''), onMouseEnter: function () { return handleMouseEnter(item.key.toString()); }, onMouseLeave: handleMouseLeave }, { children: jsx("div", __assign({ className: "foxit-menu-item-content", onClick: function () { return handleMenuClick({ key: item.key.toString() }); } }, { children: item.icon && (jsx("span", __assign({ className: "foxit-menu-item-icon foxit-menu-item-icon-collapsed" }, { children: item.icon }))) })) }), item.key));
+    };
+    // 收起模式的子菜单渲染
+    var renderSubCollapsedMenu = function (item) {
+        var isSelected = selectedKeys.includes(item.key.toString());
+        return (jsx("div", __assign({ ref: function (el) { return (menuItemRefs.current[item.key.toString()] = el); }, className: "foxit-menu-submenu foxit-menu-collapsed-item ".concat(isSelected ? 'selected' : ''), onMouseEnter: function () { return handleMouseEnter(item.key.toString()); }, onMouseLeave: handleMouseLeave }, { children: jsx("div", __assign({ className: "foxit-menu-submenu-title" }, { children: item.icon && (jsx("span", __assign({ className: "foxit-menu-item-icon foxit-menu-item-icon-collapsed" }, { children: item.icon }))) })) }), item.key));
+    };
+    // 处理鼠标悬浮事件
+    var handleMouseEnter = function (key) {
+        setHoveredKey(key);
+        var itemRef = menuItemRefs.current[key];
+        if (itemRef) {
+            var rect = itemRef.getBoundingClientRect();
+            setPopupPosition({
+                top: rect.top,
+                left: rect.right + 5
+            });
+        }
+    };
+    // 处理鼠标离开事件
+    var handleMouseLeave = function () {
+        // 使用延时，允许鼠标移到弹出菜单上
+        setTimeout(function () {
+            if (!isMouseInPopup() && !isMouseOverAnyMenuItem()) {
+                setHoveredKey(null);
+            }
+        }, 50);
+    };
+    // 检查鼠标是否在弹出菜单中
+    var isMouseInPopup = function () {
+        return popupRef.current && popupRef.current.matches(':hover');
+    };
+    // 检查鼠标是否在任何菜单项上
+    var isMouseOverAnyMenuItem = function () {
+        return Object.values(menuItemRefs.current).some(function (ref) { return ref && ref.matches(':hover'); });
+    };
+    // 弹出子菜单渲染
+    var renderPopupMenu = function () {
+        if (!hoveredKey)
+            return null;
+        var item = findItemByKey(items, hoveredKey);
+        if (!(item === null || item === void 0 ? void 0 : item.children))
+            return null;
+        return (jsx("div", __assign({ ref: popupRef, className: "foxit-menu-popup", style: {
+                position: 'fixed',
+                top: "".concat(popupPosition.top, "px"),
+                left: "".concat(popupPosition.left, "px"),
+                zIndex: 1000
+            }, onMouseEnter: function () { return setHoveredKey(hoveredKey); }, onMouseLeave: function () { return setHoveredKey(null); } }, { children: jsxs("div", __assign({ className: "foxit-menu foxit-menu-popup-content" }, { children: [jsxs("div", __assign({ className: "foxit-menu-popup-title" }, { children: [jsx("span", __assign({ className: "foxit-menu-item-icon" }, { children: item.icon })), jsx("span", { children: item.label })] })), item.children.map(function (child) {
+                        return child.children ? renderPopupSubMenu(child) : renderPopupMenuItem(child);
+                    })] })) })));
+    };
+    // 弹出菜单中的普通菜单项渲染
+    var renderPopupMenuItem = function (item) {
+        var isSelected = selectedKeys.includes(item.key.toString());
+        return (jsx("div", __assign({ className: "foxit-menu-item ".concat(isSelected ? 'selected' : '') }, { children: jsxs("div", __assign({ className: "foxit-menu-item-content", onClick: function () {
+                    handleMenuClick({ key: item.key.toString() });
+                    setHoveredKey(null);
+                } }, { children: [item.icon && jsx("span", __assign({ className: "foxit-menu-item-icon" }, { children: item.icon })), jsx("span", { children: item.label })] })) }), item.key));
+    };
+    // 弹出菜单中的子菜单渲染
+    var renderPopupSubMenu = function (item) {
+        var isOpen = openKeys.includes(item.key.toString());
+        return (jsxs("div", { children: [jsxs("div", __assign({ className: "foxit-menu-submenu-title", onClick: function () {
+                        if (isOpen) {
+                            setOpenKeys(openKeys.filter(function (key) { return key !== item.key.toString(); }));
+                        }
+                        else {
+                            setOpenKeys(__spreadArray(__spreadArray([], openKeys, true), [item.key.toString()], false));
+                        }
+                    } }, { children: [jsxs("div", __assign({ style: { display: 'flex', alignItems: 'center' } }, { children: [item.icon && jsx("span", __assign({ className: "foxit-menu-item-icon" }, { children: item.icon })), jsx("span", { children: item.label })] })), jsx("span", { children: jsx(Icon, { name: "DownOutlined", className: "foxit-menu-icon ".concat(isOpen ? '' : 'foxit-menu-rotated-icon') }) })] })), isOpen && item.children && (jsx("div", __assign({ className: "foxit-menu-submenu-items" }, { children: item.children.map(function (child) {
+                        return child.children ? renderPopupSubMenu(child) : renderPopupMenuItem(child);
+                    }) })))] }, item.key));
+    };
+    // 根据key查找菜单项
+    var findItemByKey = function (items, key) {
+        for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+            var item = items_1[_i];
+            if (item.key.toString() === key) {
+                return item;
+            }
+            if (item.children) {
+                var found = findItemByKey(item.children, key);
+                if (found)
+                    return found;
+            }
+        }
+        return undefined;
+    };
+    // 关闭副作用处理
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (hoveredKey &&
+                popupRef.current &&
+                !popupRef.current.contains(event.target) &&
+                !Object.values(menuItemRefs.current).some(function (ref) { return ref && ref.contains(event.target); })) {
+                setHoveredKey(null);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [hoveredKey]);
+    return (jsxs(Fragment, { children: [jsx("div", __assign({ className: "foxit-menu", style: __assign({}, style) }, { children: inlineCollapsed
+                    ? items.map(function (item) {
+                        return item.children ? renderSubCollapsedMenu(item) : renderMenuCollapsedItem(item);
+                    })
+                    : items.map(function (item) { return (item.children ? renderSubMenu(item) : renderMenuItem(item)); }) })), inlineCollapsed && hoveredKey && renderPopupMenu()] }));
 };
 
-export { Menu as default, getItem };
+export { Menu, getItem };

package/es/Modal/Modal.d.ts

@@ -10,6 +10,8 @@ interface IModalProps {
     maskClosable?: boolean;
     children?: React.ReactNode;
     width?: string;
+    type?: 'success';
+    closable?: boolean;
 }
 interface ModalComponent extends FC<IModalProps> {
     confirm: (props: IModalProps & {

package/es/Modal/Modal.js

@@ -1,39 +1,110 @@
-import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { __assign, __awaiter, __generator } from '../node_modules/tslib/tslib.es6.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
 import { Icon } from '../Icon/index.js';
+import classNames from 'classnames';
 import { createRoot } from 'react-dom/client';
 import { Modal as Modal$1 } from './ModalTemp.js';
 import { Button } from '../Button/Button.js';
-import './modal.css.js';
 
 var ModalContent = function (_a) {
-    var title = _a.title, onCancel = _a.onCancel, _b = _a.onCancelText, onCancelText = _b === void 0 ? undefined : _b, onOk = _a.onOk, _c = _a.onOkText, onOkText = _c === void 0 ? undefined : _c, children = _a.children, _d = _a.width, width = _d === void 0 ? '400px' : _d;
-    return (jsxs("div", __assign({ className: "foxit-modal-content-container", style: {
-            maxWidth: width,
+    var title = _a.title, onCancel = _a.onCancel, _b = _a.onCancelText, onCancelText = _b === void 0 ? undefined : _b, onOk = _a.onOk, _c = _a.onOkText, onOkText = _c === void 0 ? undefined : _c, children = _a.children, _d = _a.width, width = _d === void 0 ? '400px' : _d, type = _a.type, _e = _a.closable, closable = _e === void 0 ? true : _e;
+    var _f = useState(false), loading = _f[0], setLoading = _f[1];
+    var _g = useState(false), cancelLoading = _g[0], setCancelLoading = _g[1];
+    var handleOk = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!onOk) return [3 /*break*/, 4];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, , 3, 4]);
+                    setLoading(true);
+                    return [4 /*yield*/, onOk()];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    setLoading(false);
+                    return [7 /*endfinally*/];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleCancel = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!onCancel) return [3 /*break*/, 4];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, , 3, 4]);
+                    setCancelLoading(true);
+                    return [4 /*yield*/, onCancel()];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    setCancelLoading(false);
+                    return [7 /*endfinally*/];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (jsxs("div", __assign({ className: classNames('foxit-modal-content-container', type === 'success' ? 'foxit-modal-success' : ''), style: {
+            maxWidth: "min(".concat(width, ", calc(100vw - 32px))"),
             width: width
-        } }, { children: [jsxs("div", __assign({ className: "foxit-modal-head" }, { children: [jsx("div", __assign({ className: "foxit-modal-title" }, { children: title })), jsx("div", __assign({ onClick: onCancel, className: "foxit-modal-close-button" }, { children: jsx(Icon, { name: "CloseOutlined" }) }))] })), jsx("div", { children: children }), jsxs("div", __assign({ className: "foxit-modal-footer" }, { children: [onCancelText && (jsx(Button, __assign({ size: "medium", onClick: onCancel }, { children: onCancelText }))), onOkText && (jsx(Button, __assign({ primary: true, size: "medium", onClick: onOk }, { children: onOkText })))] }))] })));
+        } }, { children: [jsxs("div", __assign({ className: "foxit-modal-head" }, { children: [jsx("div", __assign({ className: "foxit-modal-title" }, { children: title })), closable && (jsx("div", __assign({ onClick: onCancel, className: type === 'success' ? 'foxit-modal-success-icon' : 'foxit-modal-close-button' }, { children: type === 'success' ? (jsx(Icon, { name: "FireWorkColoursOutlined" })) : (jsx(Icon, { name: "CloseOutlined" })) })))] })), jsx("div", __assign({ className: "foxit-modal-children" }, { children: children })), jsxs("div", __assign({ className: "foxit-modal-footer" }, { children: [onCancelText && (jsx(Button, __assign({ size: "medium", onClick: handleCancel, loading: cancelLoading }, { children: onCancelText }))), onOkText && (jsx(Button, __assign({ primary: true, size: "medium", onClick: handleOk, loading: loading }, { children: onOkText })))] }))] })));
 };
 var Modal = function (_a) {
-    var title = _a.title, opened = _a.opened, onOk = _a.onOk, onOkText = _a.onOkText, onCancel = _a.onCancel, onCancelText = _a.onCancelText, maskClosable = _a.maskClosable, children = _a.children, width = _a.width;
-    return (jsx(Modal$1, __assign({ opened: opened, onClose: onCancel || (function () { }), maskClosable: maskClosable, position: "top" }, { children: jsx(ModalContent, __assign({ title: title, width: width, onCancel: onCancel, onCancelText: onCancelText, onOk: onOk, onOkText: onOkText }, { children: children })) })));
+    var title = _a.title, opened = _a.opened, onOk = _a.onOk, onOkText = _a.onOkText, onCancel = _a.onCancel, onCancelText = _a.onCancelText, maskClosable = _a.maskClosable, children = _a.children, width = _a.width, type = _a.type, closable = _a.closable;
+    return (jsx(Modal$1, __assign({ opened: opened, onClose: onCancel || (function () { }), maskClosable: maskClosable, position: "top" }, { children: jsx(ModalContent, __assign({ title: title, width: width, onCancel: onCancel, onCancelText: onCancelText, onOk: onOk, onOkText: onOkText, type: type, closable: closable }, { children: children })) })));
 };
 // 语法糖的调用方式
 Modal.confirm = function (_a) {
-    var title = _a.title, onOk = _a.onOk, onCancel = _a.onCancel, onOkText = _a.onOkText, onCancelText = _a.onCancelText, _b = _a.maskClosable, maskClosable = _b === void 0 ? true : _b, content = _a.content, width = _a.width;
+    var title = _a.title, onOk = _a.onOk, onCancel = _a.onCancel, onOkText = _a.onOkText, onCancelText = _a.onCancelText, _b = _a.maskClosable, maskClosable = _b === void 0 ? true : _b, content = _a.content, width = _a.width, closable = _a.closable;
     var modalRoot = document.createElement('div');
     document.body.appendChild(modalRoot);
     var root = createRoot(modalRoot);
     var handleClose = function () {
         root.unmount();
-        document.body.removeChild(modalRoot);
+        if (document.body.contains(modalRoot)) {
+            document.body.removeChild(modalRoot);
+        }
     };
-    root.render(jsx(Modal$1, __assign({ opened: true, onClose: handleClose, maskClosable: maskClosable, position: "top" }, { children: jsx(ModalContent, __assign({ title: title, width: width, onCancel: function () {
-                onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-                handleClose();
-            }, onCancelText: onCancelText, onOk: function () {
-                onOk === null || onOk === void 0 ? void 0 : onOk();
-                handleClose();
-            }, onOkText: onOkText }, { children: content })) })));
+    root.render(jsx(Modal$1, __assign({ opened: true, onClose: handleClose, maskClosable: maskClosable, position: "top" }, { children: jsx(ModalContent, __assign({ title: title, width: width, onCancel: onCancel instanceof Function && onCancel.constructor.name === 'AsyncFunction'
+                ? function () { return __awaiter(void 0, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0: return [4 /*yield*/, onCancel()];
+                            case 1:
+                                _a.sent();
+                                handleClose();
+                                return [2 /*return*/];
+                        }
+                    });
+                }); }
+                : function () {
+                    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+                    handleClose();
+                }, onCancelText: onCancelText, onOk: 
+            // 判断传进来的onOk是否为async函数
+            onOk instanceof Function && onOk.constructor.name === 'AsyncFunction'
+                ? function () { return __awaiter(void 0, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0: return [4 /*yield*/, onOk()];
+                            case 1:
+                                _a.sent();
+                                handleClose();
+                                return [2 /*return*/];
+                        }
+                    });
+                }); }
+                : function () {
+                    onOk === null || onOk === void 0 ? void 0 : onOk();
+                    handleClose();
+                }, onOkText: onOkText, closable: closable }, { children: content })) })));
 };
 
 export { Modal };

package/es/Modal/ModalTemp.js

@@ -4,7 +4,6 @@ import { useState, useEffect, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
-import './modal.css.js';
 
 var contentAnimation = {
     enter: 'foxit-modal-opacity-0 foxit-modal-scale-0',
@@ -24,6 +23,10 @@ var Portal = function (_a) {
     useEffect(function () {
         var _a, _b;
         (_b = (_a = document === null || document === void 0 ? void 0 : document.body) === null || _a === void 0 ? void 0 : _a.appendChild) === null || _b === void 0 ? void 0 : _b.call(_a, container);
+        return function () {
+            var _a, _b;
+            (_b = (_a = document === null || document === void 0 ? void 0 : document.body) === null || _a === void 0 ? void 0 : _a.removeChild) === null || _b === void 0 ? void 0 : _b.call(_a, container);
+        };
     }, [container]);
     return createPortal(children, container);
 };

package/es/Pagination/Pagination.d.ts

@@ -5,6 +5,8 @@ interface PaginationProps {
     pageSize: number;
     onChange?: (page: number) => void;
     defaultCurrent?: number;
+    current?: number;
+    mobile?: boolean;
 }
 declare const Pagination: React.FC<PaginationProps>;
 export default Pagination;

package/es/Pagination/Pagination.js

@@ -1,15 +1,20 @@
 import { __assign } from '../node_modules/tslib/tslib.es6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
-import './pagination.css.js';
+import { Button } from '../Button/Button.js';
 
 var $_MORE = 9999999999;
 var Pagination = function (_a) {
-    var total = _a.total, pageSize = _a.pageSize, onChange = _a.onChange, _b = _a.defaultCurrent, defaultCurrent = _b === void 0 ? 1 : _b;
-    var _c = useState(defaultCurrent), current = _c[0], setCurrent = _c[1];
-    var _d = useState([]), pages = _d[0], setPages = _d[1];
+    var total = _a.total, pageSize = _a.pageSize, onChange = _a.onChange, _b = _a.defaultCurrent, defaultCurrent = _b === void 0 ? 1 : _b, currentProp = _a.current, _c = _a.mobile, mobile = _c === void 0 ? false : _c;
+    var _d = useState(currentProp !== undefined ? currentProp : defaultCurrent), current = _d[0], setCurrent = _d[1];
+    var _e = useState([]), pages = _e[0], setPages = _e[1];
     var maxButtons = 5;
     var totalPages = Math.ceil(total / pageSize);
+    useEffect(function () {
+        if (currentProp !== undefined && currentProp !== current) {
+            setCurrent(currentProp);
+        }
+    }, [currentProp, current]);
     useEffect(function () {
         var generatePages = function () {
             var pageArray = [];
@@ -49,14 +54,16 @@ var Pagination = function (_a) {
     var handleClick = function (page, index) {
         if (page === $_MORE) {
             if (index > 0 && pages[index - 1] !== null && pages[index - 1] !== 1) {
-                setCurrent(pages[index - 1] + 1);
-                onChange === null || onChange === void 0 ? void 0 : onChange(pages[index - 1] + 1);
+                var newPage = pages[index - 1] + 1;
+                setCurrent(newPage);
+                onChange === null || onChange === void 0 ? void 0 : onChange(newPage);
             }
             else if (index < pages.length - 1 &&
                 pages[index + 1] !== null &&
                 pages[index + 1] !== totalPages) {
-                setCurrent(pages[index + 1] - 1);
-                onChange === null || onChange === void 0 ? void 0 : onChange(pages[index + 1] - 1);
+                var newPage = pages[index + 1] - 1;
+                setCurrent(newPage);
+                onChange === null || onChange === void 0 ? void 0 : onChange(newPage);
             }
         }
         else if (page !== current) {
@@ -66,17 +73,23 @@ var Pagination = function (_a) {
     };
     var handlePrev = function () {
         if (current > 1) {
-            setCurrent(current - 1);
-            onChange === null || onChange === void 0 ? void 0 : onChange(current - 1);
+            var newPage = current - 1;
+            setCurrent(newPage);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newPage);
         }
     };
     var handleNext = function () {
         if (current < totalPages) {
-            setCurrent(current + 1);
-            onChange === null || onChange === void 0 ? void 0 : onChange(current + 1);
+            var newPage = current + 1;
+            setCurrent(newPage);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newPage);
         }
     };
-    return (jsxs("div", __assign({ className: "foxit-pagination-container" }, { children: [jsx("button", __assign({ className: "foxit-pagination-prev", onClick: handlePrev, disabled: current === 1 }, { children: '<' })), pages.map(function (page, index) { return (jsx("button", __assign({ className: "foxit-pagination-button", onClick: function () { return handleClick(page, index); }, disabled: page === current }, { children: page === $_MORE ? '...' : page }), index)); }), jsx("button", __assign({ className: "foxit-pagination-next", onClick: handleNext, disabled: current === totalPages }, { children: '>' }))] })));
+    // 新增：移动端只显示“展开更多”按钮
+    if (mobile) {
+        return total > pageSize ? (jsxs("div", __assign({ className: "foxit-pagination-mobile-container" }, { children: [jsx(Button, __assign({ className: "foxit-pagination-mobile-prev", onClick: handlePrev, size: "small", disabled: current === 1 }, { children: '<' })), jsxs("span", __assign({ className: "foxit-pagination-mobile-info" }, { children: [current, " / ", totalPages] })), jsx(Button, __assign({ className: "foxit-pagination-mobile-next", onClick: handleNext, size: "small", disabled: current === totalPages }, { children: '>' }))] }))) : null;
+    }
+    return total > pageSize ? (jsxs("div", __assign({ className: "foxit-pagination-container" }, { children: [jsx("button", __assign({ className: "foxit-pagination-prev", onClick: handlePrev, disabled: current === 1 }, { children: '<' })), pages.map(function (page, index) { return (jsx("button", __assign({ className: "foxit-pagination-button", onClick: function () { return handleClick(page, index); }, disabled: page === current }, { children: page === $_MORE ? '...' : page }), index)); }), jsx("button", __assign({ className: "foxit-pagination-next", onClick: handleNext, disabled: current === totalPages }, { children: '>' }))] }))) : null;
 };
 
 export { Pagination as default };

package/es/Quantity/Quantity.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './quantity.css';
+interface QuantityProps {
+    value?: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+}
+declare const Quantity: React.FC<QuantityProps>;
+export { Quantity };

package/es/Quantity/Quantity.js

@@ -0,0 +1,45 @@
+import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+
+var Quantity = function (_a) {
+    var value = _a.value, onChange = _a.onChange, min = _a.min, max = _a.max;
+    var _b = useState(value || min || 0), internalValue = _b[0], setInternalValue = _b[1];
+    var currentValue = value !== undefined ? value : internalValue;
+    var handleIncrement = function () {
+        var newValue = currentValue + 1;
+        if (max !== undefined && newValue > max)
+            return;
+        if (onChange) {
+            onChange(newValue);
+        }
+        setInternalValue(newValue);
+    };
+    var handleDecrement = function () {
+        var newValue = currentValue - 1;
+        if (min !== undefined && newValue < min)
+            return;
+        if (onChange) {
+            onChange(newValue);
+        }
+        setInternalValue(newValue);
+    };
+    var handleChange = function (e) {
+        var newValue = parseInt(e.target.value, 10) || 0;
+        if (min !== undefined && newValue < min) {
+            newValue = min;
+        }
+        if (max !== undefined && newValue > max) {
+            newValue = max;
+        }
+        if (onChange) {
+            onChange(newValue);
+        }
+        setInternalValue(newValue);
+    };
+    return (jsxs("div", __assign({ className: "foxit-quantity" }, { children: [jsx("button", __assign({ className: "foxit-quantity-button", onClick: handleDecrement, disabled: min !== undefined && currentValue <= min }, { children: jsx("div", { children: "-" }) })), jsx("input", { 
+                // type="number"
+                value: currentValue, onChange: handleChange, min: min, max: max, className: "foxit-quantity-number" }), jsx("button", __assign({ className: "foxit-quantity-button", onClick: handleIncrement, disabled: max !== undefined && currentValue >= max }, { children: jsx("div", { children: "+" }) }))] })));
+};
+
+export { Quantity };

package/es/Radio/Radio.js

@@ -1,7 +1,6 @@
 import { __assign } from '../node_modules/tslib/tslib.es6.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { createContext, useContext, useState } from 'react';
-import './radio.css.js';
 
 var RadioContext = createContext({});
 var Radio = function (_a) {

package/es/Select/Select.d.ts

@@ -12,6 +12,16 @@ export interface SelectProps {
     isMulti?: boolean;
     placeholder?: string;
     preIcon?: React.ReactNode;
+    value?: string | number | CustomOption | null;
+    onChange?: (v: unknown) => void;
+    [key: string]: unknown;
+}
+interface CustomOption {
+    readonly value: string | number;
+    readonly label: string;
+    readonly color?: string;
+    readonly isFixed?: boolean;
+    readonly isDisabled?: boolean;
 }
 declare const Select: React.FC<SelectProps>;
 export default Select;

package/es/Select/Select.js

@@ -5,15 +5,18 @@ import classNames from 'classnames';
 import { Icon } from '../Icon/index.js';
 
 var Select = function (_a) {
-    var options = _a.options, className = _a.className, defaultValue = _a.defaultValue, isDisabled = _a.isDisabled, isClearable = _a.isClearable, isSearchable = _a.isSearchable, isMulti = _a.isMulti, _b = _a.placeholder, placeholder = _b === void 0 ? 'Select...' : _b, preIcon = _a.preIcon, rest = __rest(_a, ["options", "className", "defaultValue", "isDisabled", "isClearable", "isSearchable", "isMulti", "placeholder", "preIcon"]);
+    var options = _a.options, className = _a.className, defaultValue = _a.defaultValue, isDisabled = _a.isDisabled, isClearable = _a.isClearable, isSearchable = _a.isSearchable, isMulti = _a.isMulti, _b = _a.placeholder, placeholder = _b === void 0 ? 'Select...' : _b, preIcon = _a.preIcon, value = _a.value, onChange = _a.onChange, rest = __rest(_a, ["options", "className", "defaultValue", "isDisabled", "isClearable", "isSearchable", "isMulti", "placeholder", "preIcon", "value", "onChange"]);
     var customStyles = {
-        control: function (styles) { return (__assign(__assign({}, styles), { backgroundColor: 'white', 
-            // minWidth: 200,
-            height: 48, borderRadius: 10, fontSize: 14, boxShadow: 'none', border: '1px solid #B3B3B3', ':hover': {
-                border: '1px solid #757575'
-            }, ':focus-within': {
-                border: '1px solid #FF5F00'
-            } })); },
+        control: function (styles, _a) {
+            var isDisabled = _a.isDisabled;
+            return (__assign(__assign({}, styles), { backgroundColor: isDisabled ? '#f8f8f8' : 'white', 
+                // minWidth: 200,
+                height: 48, paddingLeft: 8, borderRadius: 10, fontSize: 14, boxShadow: 'none', border: '1px solid #D9D9D9', ':hover': {
+                    border: '1px solid #757575'
+                }, ':focus-within': {
+                    border: '1px solid #FF5F00'
+                } }));
+        },
         option: function (styles, _a) {
             var isSelected = _a.isSelected, isFocused = _a.isFocused;
             return __assign(__assign({}, styles), { backgroundColor: isFocused ? '#FFF6F0' : 'white', color: isSelected ? '#FF5F00' : '#666', ':hover': {
@@ -26,7 +29,7 @@ var Select = function (_a) {
     };
     var CustomControl = function (props) { return (jsxs(components.Control, __assign({}, props, { children: [preIcon && (jsx("div", __assign({ style: {
                     display: 'flex',
-                    paddingLeft: 16,
+                    paddingLeft: 8,
                     marginRight: -4,
                     color: props.hasValue ? '#525252' : '#B3B3B3'
                 } }, { children: preIcon }))), props.children] }))); };
@@ -36,7 +39,9 @@ var Select = function (_a) {
                 return Array.isArray(defaultValue) &&
                     defaultValue.includes(option.value);
             })
-            : options.find(function (option) { return option.value === defaultValue; }), isDisabled: isDisabled, isClearable: isClearable, isSearchable: isSearchable, isMulti: isMulti, components: { Control: CustomControl, Option: CustomOptionComp } }, rest)));
+            : options.find(function (option) { return option.value === defaultValue; }), isDisabled: isDisabled, isClearable: isClearable, isSearchable: isSearchable, isMulti: isMulti, components: { Control: CustomControl, Option: CustomOptionComp }, onChange: onChange, menuPosition: "fixed" }, rest, { value: isMulti && Array.isArray(value)
+            ? value.map(function (v) { return options.find(function (option) { return option.value === v; }); })
+            : options.find(function (option) { return option.value === value; }) || value })));
 };
 
 export { Select as default };