foxit-component 0.0.1 → 1.0.0-alpha.29

package/es/Form/FormProvider.js

@@ -0,0 +1,260 @@
+import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState, useEffect, useCallback, useImperativeHandle } from 'react';
+import { FormContext } from './FormContext.js';
+
+var FormProvider = function (_a, ref) {
+    var children = _a.children, _b = _a.initialValues, initialValues = _b === void 0 ? {} : _b;
+    var formFieldsRef = useRef({});
+    var _c = useState({}), forceUpdate = _c[1]; // Used to force re-render when ref changes
+    var formInstanceRef = useRef({});
+    var subscribersRef = useRef([]);
+    // 初始值的设置
+    useEffect(function () {
+        if (Object.keys(initialValues).length > 0) {
+            formFieldsRef.current = __assign({}, formFieldsRef.current); // Create a new object
+            for (var key in initialValues) {
+                if (!formFieldsRef.current[key]) {
+                    formFieldsRef.current[key] = { value: initialValues[key], rules: [] };
+                }
+                else {
+                    formFieldsRef.current[key] = __assign(__assign({}, formFieldsRef.current[key]), { value: initialValues[key] });
+                }
+            }
+            forceUpdate({}); // Trigger re-render
+        }
+    }, [initialValues]);
+    // 订阅方法
+    var subscribe = useCallback(function (fieldNames, callback) {
+        var subscriber = { fieldNames: fieldNames, callback: callback };
+        subscribersRef.current.push(subscriber);
+        // 立即触发一次回调，提供当前值
+        var currentValues = fieldNames.reduce(function (acc, fieldName) {
+            var _a;
+            acc[fieldName] = (_a = formFieldsRef.current[fieldName]) === null || _a === void 0 ? void 0 : _a.value;
+            return acc;
+        }, {});
+        callback(currentValues);
+        // 返回取消订阅函数
+        return function () {
+            subscribersRef.current = subscribersRef.current.filter(function (s) { return s !== subscriber; });
+        };
+    }, []);
+    // 注册字段
+    var registerField = useCallback(function (name, rules) {
+        formFieldsRef.current = __assign({}, formFieldsRef.current); // Create a new object
+        formFieldsRef.current[name] = __assign(__assign({}, formFieldsRef.current[name]), { rules: rules || [] });
+        forceUpdate({}); // Trigger re-render
+    }, []);
+    // 销毁字段
+    var unregisterField = useCallback(function (name) {
+        formFieldsRef.current = __assign({}, formFieldsRef.current); // Create a new object
+        delete formFieldsRef.current[name];
+        forceUpdate({}); // Trigger re-render
+    }, []);
+    // 验证字段
+    var validateField = useCallback(function (name, value, rules) {
+        for (var _i = 0, rules_1 = rules; _i < rules_1.length; _i++) {
+            var rule = rules_1[_i];
+            if (rule.required &&
+                (value === undefined ||
+                    value === '' ||
+                    value === null ||
+                    (Array.isArray(value) && value.length === 0) ||
+                    (typeof value === 'object' && Object.keys(value).length === 0))) {
+                return { type: 'error', message: rule.message || 'This field is required' };
+            }
+            if (rule.type === 'email' && value && !/\S+@\S+\.\S+/.test(value)) {
+                return { type: 'error', message: rule.message || 'The input is not valid E-mail' };
+            }
+            if (rule.type === 'number' && value && isNaN(Number(value))) {
+                return { type: 'error', message: rule.message || 'The input is not a number' };
+            }
+            if (rule.type === 'string' && typeof value !== 'string') {
+                return { type: 'error', message: rule.message || 'The input is not a string' };
+            }
+            if (rule.min !== undefined &&
+                typeof value === 'string' &&
+                new Blob([value]).size < rule.min) {
+                return {
+                    type: 'error',
+                    message: rule.message || "The input is less than ".concat(rule.min, " characters")
+                };
+            }
+            if (rule.max !== undefined &&
+                typeof value === 'string' &&
+                new Blob([value]).size > rule.max) {
+                return {
+                    type: 'error',
+                    message: rule.message || "The input is more than ".concat(rule.max, " characters")
+                };
+            }
+        }
+        return undefined;
+    }, []);
+    // 设置字段值
+    var setFieldsValue = useCallback(function (values) {
+        var _a, _b;
+        var changedFields = [];
+        formFieldsRef.current = __assign({}, formFieldsRef.current); // Create a new object
+        for (var key in values) {
+            if (Object.prototype.hasOwnProperty.call(values, key)) {
+                var newValue = values[key];
+                var oldValue = (_a = formFieldsRef.current[key]) === null || _a === void 0 ? void 0 : _a.value;
+                if (JSON.stringify(oldValue) !== JSON.stringify(newValue)) {
+                    changedFields.push(key);
+                }
+                formFieldsRef.current[key] = __assign(__assign({}, formFieldsRef.current[key]), { value: newValue });
+                // 验证字段
+                var validation = validateField(key, newValue, ((_b = formFieldsRef.current[key]) === null || _b === void 0 ? void 0 : _b.rules) || []);
+                if (validation) {
+                    if (validation.type === 'error') {
+                        formFieldsRef.current[key] = __assign(__assign({}, formFieldsRef.current[key]), { error: validation.message, warning: undefined // Clear any previous warnings
+                         });
+                    }
+                    else if (validation.type === 'warning') {
+                        formFieldsRef.current[key] = __assign(__assign({}, formFieldsRef.current[key]), { warning: validation.message, error: undefined // Clear any previous errors
+                         });
+                    }
+                }
+                else {
+                    formFieldsRef.current[key] = __assign(__assign({}, formFieldsRef.current[key]), { error: undefined, warning: undefined });
+                }
+            }
+        }
+        // 通知订阅者
+        if (changedFields.length > 0 && subscribersRef.current.length > 0) {
+            subscribersRef.current.forEach(function (subscriber) {
+                // 检查是否有该订阅者关心的字段发生变化
+                var relevantFields = subscriber.fieldNames.filter(function (name) {
+                    return changedFields.includes(name);
+                });
+                if (relevantFields.length > 0) {
+                    // 提取订阅者关心的所有字段当前值
+                    var watchValues = subscriber.fieldNames.reduce(function (acc, fieldName) {
+                        var _a;
+                        acc[fieldName] = (_a = formFieldsRef.current[fieldName]) === null || _a === void 0 ? void 0 : _a.value;
+                        return acc;
+                    }, {});
+                    subscriber.callback(watchValues);
+                }
+            });
+        }
+        forceUpdate({}); // Trigger re-render
+    }, [validateField]);
+    // 获取字段值
+    var getFieldsValue = useCallback(function (names) {
+        if (!names) {
+            return Object.keys(formFieldsRef.current).reduce(function (acc, key) {
+                acc[key] = formFieldsRef.current[key].value;
+                return acc;
+            }, {});
+        }
+        return names.reduce(function (acc, key) {
+            var _a;
+            acc[key] = (_a = formFieldsRef.current[key]) === null || _a === void 0 ? void 0 : _a.value;
+            return acc;
+        }, {});
+    }, []);
+    // 重置字段
+    var resetFields = useCallback(function (names) {
+        formFieldsRef.current = __assign({}, formFieldsRef.current); // Create a new object
+        if (names) {
+            names.forEach(function (name) {
+                if (formFieldsRef.current[name]) {
+                    formFieldsRef.current[name].value = initialValues[name] || '';
+                    formFieldsRef.current[name].error = undefined;
+                    formFieldsRef.current[name].warning = undefined;
+                }
+            });
+        }
+        else {
+            Object.keys(formFieldsRef.current).forEach(function (key) {
+                formFieldsRef.current[key].value = initialValues[key] || '';
+                formFieldsRef.current[key].error = undefined;
+                formFieldsRef.current[key].warning = undefined;
+            });
+        }
+        forceUpdate({}); // Trigger re-render
+    }, [initialValues]);
+    var validateFields = useCallback(function (names) {
+        return new Promise(function (resolve, reject) {
+            var fieldsToValidate = names || Object.keys(formFieldsRef.current);
+            var values = getFieldsValue(fieldsToValidate);
+            var errors = {};
+            for (var _i = 0, fieldsToValidate_1 = fieldsToValidate; _i < fieldsToValidate_1.length; _i++) {
+                var key = fieldsToValidate_1[_i];
+                var field = formFieldsRef.current[key];
+                if (!field)
+                    continue; // Skip if field is not registered
+                var validation = validateField(key, values[key], field.rules || []);
+                if (validation || field.error || field.warning) {
+                    if ((validation === null || validation === void 0 ? void 0 : validation.type) === 'error' || field.error) {
+                        errors[key] = (validation === null || validation === void 0 ? void 0 : validation.message) || field.error || '';
+                    }
+                    else if ((validation === null || validation === void 0 ? void 0 : validation.type) === 'warning' || field.warning) {
+                        (validation === null || validation === void 0 ? void 0 : validation.message) || field.warning || '';
+                    }
+                }
+            }
+            if (Object.keys(errors).length > 0) {
+                formFieldsRef.current = __assign({}, formFieldsRef.current); // Create a new object
+                for (var key in errors) {
+                    formFieldsRef.current[key] = __assign(__assign({}, formFieldsRef.current[key]), { error: errors[key] });
+                }
+                forceUpdate({}); // Trigger re-render
+                reject(errors);
+            }
+            else {
+                resolve(values);
+            }
+        });
+    }, [getFieldsValue, validateField]);
+    var setFieldsStatus = useCallback(function (status) {
+        formFieldsRef.current = __assign({}, formFieldsRef.current); // Create a new object
+        status.forEach(function (_a) {
+            var type = _a.type, name = _a.name, message = _a.message;
+            if (Array.isArray(name)) {
+                name.forEach(function (n) {
+                    if (formFieldsRef.current[n]) {
+                        // Only update if field exists
+                        if (type === 'error') {
+                            formFieldsRef.current[n] = __assign(__assign({}, formFieldsRef.current[n]), { error: message });
+                        }
+                        else if (type === 'warning') {
+                            formFieldsRef.current[n] = __assign(__assign({}, formFieldsRef.current[n]), { warning: message });
+                        }
+                    }
+                });
+            }
+            else {
+                if (formFieldsRef.current[name]) {
+                    // Only update if field exists
+                    if (type === 'error') {
+                        formFieldsRef.current[name] = __assign(__assign({}, formFieldsRef.current[name]), { error: message });
+                    }
+                    else if (type === 'warning') {
+                        formFieldsRef.current[name] = __assign(__assign({}, formFieldsRef.current[name]), { warning: message });
+                    }
+                }
+            }
+        });
+        forceUpdate({}); // Trigger re-render
+    }, []);
+    formInstanceRef.current = {
+        setFieldsValue: setFieldsValue,
+        getFieldsValue: getFieldsValue,
+        resetFields: resetFields,
+        validateFields: validateFields,
+        setFieldsStatus: setFieldsStatus,
+        registerField: registerField,
+        unregisterField: unregisterField,
+        subscribe: subscribe
+    };
+    // 暴露给外部的方法
+    useImperativeHandle(ref, function () { return (__assign({}, formInstanceRef.current)); });
+    return (jsx(FormContext.Provider, __assign({ value: { form: formInstanceRef.current, formFields: formFieldsRef.current } }, { children: children })));
+};
+var FormProvider$1 = forwardRef(FormProvider);
+
+export { FormProvider$1 as default };

package/es/Form/useFormWatch.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { FormRefInstance } from './Form.types';
+export declare function useFormWatch(formRef: React.RefObject<FormRefInstance>, callback: (values: Record<string, unknown>) => void, fieldNames: string[]): void;

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/Icon/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { AppIconsType } from '../constants/icons';
+export interface IconProps {
+    name: AppIconsType;
+    className?: string;
+}
+export declare const Icon: React.FC<IconProps>;

package/es/Icon/index.js

@@ -0,0 +1,9 @@
+import { ICONS } from '../constants/icons.js';
+
+var Icon = function (_a) {
+    var _b;
+    var name = _a.name, className = _a.className;
+    return (_b = ICONS[name]) === null || _b === void 0 ? void 0 : _b.call(ICONS, className);
+};
+
+export { Icon };

package/es/Input/Input.d.ts

@@ -0,0 +1,14 @@
+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 {
+    onSearch?: (value: string) => void;
+}
+declare const SearchInput: React.FC<SearchInputProps>;
+declare const PasswordInput: React.FC<InputProps>;
+export default Input;
+export { SearchInput, PasswordInput };

package/es/Input/Input.js

@@ -0,0 +1,29 @@
+import { __rest, __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import classNames from 'classnames';
+import { Icon } from '../Icon/index.js';
+
+var Input = function (_a) {
+    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(value);
+        }
+    };
+    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];
+    var toggleVisibility = function () {
+        setVisible(!visible);
+    };
+    return (jsx(Input, __assign({}, props, { type: visible ? 'text' : 'password', addonAfter: jsx("div", __assign({ style: { display: 'flex' }, onClick: toggleVisibility }, { children: jsx(Icon, { name: visible ? 'EyeOutlined' : 'EyeInvisibleOutlined' }) })) })));
+};
+
+export { PasswordInput, SearchInput, Input as default };

package/es/Menu/Menu.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { ReactNode, Key } from 'react';
+import './menu.css';
+export interface MenuItem {
+    key: Key;
+    icon?: ReactNode;
+    children?: MenuItem[];
+    label: ReactNode;
+    type?: 'group';
+}
+interface MenuProps {
+    items: MenuItem[];
+    onClick?: (e: {
+        key: string;
+    }) => void;
+    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 { Menu };

package/es/Menu/Menu.js

@@ -0,0 +1,163 @@
+import { __assign, __spreadArray } from '../node_modules/tslib/tslib.es6.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { Icon } from '../Icon/index.js';
+
+var getItem = function (label, key, icon, children, type) {
+    return {
+        key: key,
+        icon: icon,
+        children: children,
+        label: label,
+        type: 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, _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]);
+    };
+    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 () {
+                        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({ style: { marginRight: '8px' } }, { children: item.icon })), jsx("span", __assign({ className: isFirstLevel(item) ? 'foxit-menu-item-label' : '' }, { 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 ? renderSubMenu(child) : renderMenuItem(child);
+                    }) })))] }, item.key));
+    };
+    // 收起模式的菜单项渲染
+    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, getItem };

package/es/Modal/Modal.d.ts

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+import './modal.css';
+interface IModalProps {
+    title: string | React.ReactNode;
+    opened?: boolean;
+    onOk?: () => void;
+    onOkText?: string | React.ReactNode;
+    onCancel?: () => void;
+    onCancelText?: string | React.ReactNode;
+    maskClosable?: boolean;
+    children?: React.ReactNode;
+    width?: string;
+    type?: 'success';
+    closable?: boolean;
+}
+interface ModalComponent extends FC<IModalProps> {
+    confirm: (props: IModalProps & {
+        content: React.ReactNode;
+    }) => void;
+}
+export declare const Modal: ModalComponent;
+export {};