@ioca/react 1.5.28 → 1.5.30

package/lib/index.js

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import { debounce, uid, crush, throttle } from 'radash';
 import { useState, useRef, useEffect, useCallback, useMemo, Children, cloneElement, createElement, isValidElement, memo, Fragment as Fragment$1, useTransition, forwardRef, useLayoutEffect, useContext, createContext, useImperativeHandle } from 'react';
-import { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, UndoRound, RedoRound, FormatBoldRound, FormatItalicRound, FormatUnderlinedRound, StrikethroughSRound, ClearAllRound, PlayArrowRound, PauseRound, StopRound, VolumeDownRound, VolumeOffRound, FullscreenRound, FullscreenExitRound, FeedOutlined, AspectRatioRound, OpenInNewRound, FileDownloadOutlined, RotateRightRound, RotateLeftRound, KeyboardArrowLeftRound, KeyboardArrowRightRound, KeyboardDoubleArrowUpRound, SyncAltRound, VisibilityRound, VisibilityOffRound, MoreHorizRound, SearchRound, CheckRound, UnfoldMoreRound, CalendarMonthTwotone, AccessTimeRound, KeyboardArrowDownRound, MoveToInboxTwotone, OutboxTwotone, FilePresentOutlined, DriveFolderUploadOutlined } from '@ricons/material';
+import { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, UndoRound, RedoRound, FormatBoldRound, FormatItalicRound, FormatUnderlinedRound, StrikethroughSRound, ClearAllRound, PlayArrowRound, PauseRound, StopRound, VolumeDownRound, VolumeOffRound, FullscreenRound, FullscreenExitRound, FeedOutlined, AspectRatioRound, OpenInNewRound, FileDownloadOutlined, RotateRightRound, RotateLeftRound, KeyboardArrowLeftRound, KeyboardArrowRightRound, KeyboardDoubleArrowUpRound, SyncAltRound, VisibilityRound, VisibilityOffRound, MoreHorizRound, SearchRound, CheckRound, UnfoldMoreRound, CalendarMonthTwotone, AccessTimeRound, AddRound, KeyboardArrowDownRound, MoveToInboxTwotone, OutboxTwotone, FilePresentOutlined, DriveFolderUploadOutlined } from '@ricons/material';
 import { createRoot } from 'react-dom/client';
 import { getScrollbarSize, List as List$2 } from 'react-window';
 import { createPortal, flushSync } from 'react-dom';
@@ -575,14 +575,6 @@ const Badge = (props) => {
                 }), style: { fontSize: dotSize }, children: content })] }));
 };
 
-const Card = (props) => {
-    const { hideShadow, border, className, children, header, footer, ...restProps } = props;
-    return (jsxs("div", { className: classNames("i-card", className, {
-            shadow: !hideShadow,
-            "i-card-bordered": border,
-        }), ...restProps, children: [header && jsx("div", { className: 'i-card-header', children: header }), children && jsx("div", { className: 'i-card-content', children: children }), footer && jsx("div", { className: 'i-card-footer', children: footer })] }));
-};
-
 function getPosition($source, $popup, options = {}) {
     const { refWindow, gap = 0, offset = 0, position = "top", align } = options;
     if (!$source || !$popup)
@@ -917,7 +909,7 @@ function Checkbox(props) {
             "i-input-inline": labelInline,
         }, className), ...restProps, children: [label && (jsxs("span", { className: "i-input-label-text", children: [required && jsx("span", { className: "error", children: "*" }), label, message && jsx("p", { className: "i-checkbox-message", children: message })] })), jsx("div", { className: classNames("i-checkbox-options", {
                     "i-options-block": !optionInline,
-                    "i-checkbox-options-button": type === "button",
+                    [`i-checkbox-options-${type}`]: true,
                 }), children: formattedOptions.map((option) => {
                     return (jsx(CheckboxItem, { name: name, value: selectedValues.includes(option.value), optionValue: option.value, type: type, disabled: disabled || option.disabled, onChange: (checked, e) => handleChange(checked, option, e), children: renderItem ?? option.label }, option.value));
                 }) })] }));
@@ -3084,8 +3076,7 @@ class IFormInstance {
                 for (let i = 1; i < parts.length; i++) {
                     const ancestor = parts.slice(0, i).join(".");
                     if (ancestor in this.data) {
-                        console.warn(`[ioca-form] Field "${field}" conflicts with "${ancestor}". ` +
-                            "Nested representation in form.get() may be inconsistent.");
+                        console.warn(`[ioca-form] Field "${field}" conflicts with "${ancestor}". ` + "Nested representation in form.get() may be inconsistent.");
                     }
                 }
                 setDeep(this.data, field, value);
@@ -3137,7 +3128,7 @@ class IFormInstance {
             if (!field && o === undefined)
                 return;
             const rule = {
-                validator: (v) => Array.isArray(v) ? v.length > 0 : ![undefined, null, ""].includes(v),
+                validator: (v) => (Array.isArray(v) ? v.length > 0 : ![undefined, null, ""].includes(v)),
             };
             if (typeof o === "function")
                 rule.validator = o;
@@ -3162,7 +3153,7 @@ class IFormInstance {
                 });
             }
         });
-        return field ? isAllValid : isAllValid ? data : false;
+        return isAllValid ? data : false;
     }
 }
 function useForm(form) {
@@ -3429,25 +3420,33 @@ function Modal(props) {
         if (!toggable.current)
             return;
         toggable.current = false;
-        if (!closable) {
-            setBounced(true);
+        const canClose = typeof closable === 'function' ? closable() : closable;
+        const exec = (result) => {
+            if (!result) {
+                setBounced(true);
+                const timer = setTimeout(() => {
+                    setBounced(false);
+                    toggable.current = true;
+                }, 400);
+                return () => clearTimeout(timer);
+            }
+            setActive(false);
+            updateVisible(mid, false);
             const timer = setTimeout(() => {
-                setBounced(false);
+                if (!keepDOM)
+                    setShow(false);
                 toggable.current = true;
-            }, 400);
+                onVisibleChange?.(false);
+                onClose?.();
+            }, 240);
             return () => clearTimeout(timer);
+        };
+        if (canClose instanceof Promise) {
+            canClose.then(exec);
+            return;
         }
-        setActive(false);
-        updateVisible(mid, false);
-        const timer = setTimeout(() => {
-            if (!keepDOM)
-                setShow(false);
-            toggable.current = true;
-            onVisibleChange?.(false);
-            onClose?.();
-        }, 240);
-        return () => clearTimeout(timer);
-    }, [closable, keepDOM, onClose, onVisibleChange]);
+        return exec(canClose);
+    }, [closable, keepDOM, mid, onClose, onVisibleChange]);
     const handleBackdropClick = () => {
         backdropClosable && handleHide();
     };
@@ -3507,7 +3506,7 @@ function Modal(props) {
                 e.stopPropagation();
                 handleClick();
                 onClick?.(e);
-            }, role: "dialog", "aria-modal": top, "data-mid": mid, ...restProps, children: jsxs(ModalContext.Provider, { value: true, children: [customized && children, !customized && (jsx(Content$2, { title: title, hideCloseButton: hideCloseButton, footer: footer, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, children: children, footerLeft: footerLeft, onOk: onOk, onClose: handleHide }))] }) }) }), getContainer());
+            }, role: "dialog", "aria-modal": top, "data-mid": mid, ...restProps, children: jsxs(ModalContext.Provider, { value: true, children: [customized && children, !customized && jsx(Content$2, { title: title, hideCloseButton: hideCloseButton, footer: footer, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, children: children, footerLeft: footerLeft, onOk: onOk, onClose: handleHide })] }) }) }), getContainer());
 }
 Modal.useModal = useModal;
 
@@ -3521,7 +3520,17 @@ const HookModal = (props) => {
         },
         close: () => {
             state.visible = false;
-            if (mergedProps.closable ?? true)
+            const canClose = typeof mergedProps.closable === 'function'
+                ? mergedProps.closable()
+                : (mergedProps.closable ?? true);
+            if (canClose instanceof Promise) {
+                canClose.then((result) => {
+                    if (!result)
+                        state.visible = true;
+                });
+                return;
+            }
+            if (canClose)
                 return;
             Promise.resolve().then(() => {
                 state.visible = true;
@@ -4167,7 +4176,7 @@ function InputContainer(props) {
 }
 
 const Number$1 = (props) => {
-    const { ref, label, name, value = "", labelInline, step = 1, min = -Infinity, max = Infinity, thousand, precision, type, className, width, status = "normal", append, border, underline, prepend, disabled, message, tip, hideControl, showMax, style, onChange, onEnter, onInput, onBlur, ...restProps } = props;
+    const { ref, label, name, value = "", labelInline, step = 1, min = -Infinity, max = Infinity, thousand, precision, type, className, width, status = "normal", append, border = true, underline, prepend, disabled, message, tip, hideControl, showMax, style, onChange, onEnter, onInput, onBlur, ...restProps } = props;
     const [inputValue, setInputValue] = useState(value === undefined || value === null ? "" : String(value));
     const formatOut = (num) => {
         const v = clamp(num, min, max);
@@ -4180,9 +4189,7 @@ const Number$1 = (props) => {
         const body = negative ? s.slice(1) : s;
         const [integer, decimal] = body.split(".");
         const withThousand = integer.replace(/\B(?=(\d{3})+(?!\d))/g, thousand);
-        return decimal
-            ? `${negative ? "-" : ""}${withThousand}.${decimal}`
-            : `${negative ? "-" : ""}${withThousand}`;
+        return decimal ? `${negative ? "-" : ""}${withThousand}.${decimal}` : `${negative ? "-" : ""}${withThousand}`;
     };
     const sanitizeNumberInput = (raw) => {
         const hasMinus = raw.startsWith("-");
@@ -4263,11 +4270,11 @@ const Number$1 = (props) => {
                 [`i-input-${status}`]: status !== "normal",
                 "i-input-borderless": !border,
                 "i-input-underline": underline,
-            }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), !hideControl && !disabled && (jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: () => handleOperate(-step) })), jsx("input", { ...inputProps }), !hideControl && !disabled && (jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: () => handleOperate(step) })), showMax && max && !disabled && (jsx(Helpericon, { active: true, icon: jsx(KeyboardDoubleArrowUpRound, {}), onClick: handleMax })), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
+            }), children: [prepend && jsx("div", { className: "i-input-prepend", children: prepend }), !hideControl && !disabled && jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: () => handleOperate(-step) }), jsx("input", { ...inputProps }), !hideControl && !disabled && jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: () => handleOperate(step) }), showMax && max && !disabled && jsx(Helpericon, { active: true, icon: jsx(KeyboardDoubleArrowUpRound, {}), onClick: handleMax }), append && jsx("div", { className: "i-input-append", children: append })] }) }));
 };
 
 const Range = (props) => {
-    const { label, name, value, labelInline, min = -Infinity, max = Infinity, type, className, status = "normal", message, tip, append, prepend, step = 1, width, thousand, precision, hideControl, placeholder, border, underline, autoSwitch, onChange, onBlur, style, ...restProps } = props;
+    const { label, name, value, labelInline, min = -Infinity, max = Infinity, type, className, status = "normal", message, tip, append, prepend, step = 1, width, thousand, precision, hideControl, placeholder, border = true, underline, autoSwitch, onChange, onBlur, style, ...restProps } = props;
     const [rangeValue, setRangeValue] = useState(value);
     const getRangeNumber = (v) => clamp(v, min, max);
     const getFormatNumber = (v) => formatNumber(v, { precision, thousand });
@@ -4327,11 +4334,11 @@ const Range = (props) => {
                 [`i-input-${status}`]: status !== "normal",
                 "i-input-borderless": !border,
                 "i-input-underline": underline,
-            }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: (e) => handleOperate(e, -step, 0) })), jsx("input", { value: rangeValue?.[0] || "", placeholder: placeholder?.[0], ...inputProps, onBlur: handleBlur, onChange: (e) => handleChange(e, 0) }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: (e) => handleOperate(e, step, 0) })), jsx(Helpericon, { active: true, icon: jsx(SyncAltRound, {}), style: { margin: 0 }, onClick: handleSwitch }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: (e) => handleOperate(e, -step, 1) })), jsx("input", { value: rangeValue?.[1] || "", placeholder: placeholder?.[1], ...inputProps, onBlur: handleBlur, onChange: (e) => handleChange(e, 1) }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: (e) => handleOperate(e, step, 1) })), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
+            }), children: [prepend && jsx("div", { className: "i-input-prepend", children: prepend }), !hideControl && jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: (e) => handleOperate(e, -step, 0) }), jsx("input", { value: rangeValue?.[0] || "", placeholder: placeholder?.[0], ...inputProps, onBlur: handleBlur, onChange: (e) => handleChange(e, 0) }), !hideControl && jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: (e) => handleOperate(e, step, 0) }), jsx(Helpericon, { active: true, icon: jsx(SyncAltRound, {}), style: { margin: 0 }, onClick: handleSwitch }), !hideControl && jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: (e) => handleOperate(e, -step, 1) }), jsx("input", { value: rangeValue?.[1] || "", placeholder: placeholder?.[1], ...inputProps, onBlur: handleBlur, onChange: (e) => handleChange(e, 1) }), !hideControl && jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: (e) => handleOperate(e, step, 1) }), append && jsx("div", { className: "i-input-append", children: append })] }) }));
 };
 
 const Textarea = (props) => {
-    const { ref, label, name, value = "", labelInline, className, status = "normal", message, tip, autoSize, border, width, style, resize, onChange, onEnter, ...restProps } = props;
+    const { ref, label, name, value = "", labelInline, className, status = "normal", message, tip, autoSize, border = true, width, style, resize, onChange, onEnter, ...restProps } = props;
     const [textareaValue, setTextareaValue] = useState(value);
     const refTextarea = useRef(null);
     const syncTextareaHeight = () => {
@@ -4380,7 +4387,7 @@ const Textarea = (props) => {
 };
 
 const Input = ((props) => {
-    const { ref, type = "text", label, name, value = "", prepend, append, labelInline, className, status = "normal", message, tip, clear, width, hideVisible, border, underline, required, maxLength, onChange, onEnter, onClear, style, ...restProps } = props;
+    const { ref, type = "text", label, name, value = "", prepend, append, labelInline, className, status = "normal", message, tip, clear, width, hideVisible, border = true, underline, required, maxLength, onChange, onEnter, onClear, style, ...restProps } = props;
     const [inputValue, setInputValue] = useState(value);
     const [inputType, setInputType] = useState(type);
     const [visible, setVisible] = useState(false);
@@ -4438,7 +4445,7 @@ const Input = ((props) => {
                 [`i-input-${status}`]: status !== "normal",
                 "i-input-borderless": !border,
                 "i-input-underline": underline,
-            }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), jsx("input", { ...inputProps }), maxLength && inputValue?.length > 0 && (jsxs("span", { className: 'color-8 pr-4 font-sm', children: [inputValue.length, " / ", maxLength] })), jsx(Helpericon, { active: !!clearable || showHelper, icon: HelperIcon, className: classNames({ "i-helpericon-clear": isClearBtn }), onClick: handleHelperClick }), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
+            }), children: [prepend && jsx("div", { className: "i-input-prepend", children: prepend }), jsx("input", { ...inputProps }), maxLength && inputValue?.length > 0 && (jsxs("span", { className: "color-8 pr-4 font-sm", children: [inputValue.length, " / ", maxLength] })), jsx(Helpericon, { active: !!clearable || showHelper, icon: HelperIcon, className: classNames({ "i-helpericon-clear": isClearBtn }), onClick: handleHelperClick }), append && jsx("div", { className: "i-input-append", children: append })] }) }));
 });
 Input.Textarea = Textarea;
 Input.Number = Number$1;
@@ -4721,31 +4728,27 @@ const Pagination = (props) => {
 };
 
 const Tag = (props) => {
-    const { dot, dotClass, outline, round, size = "normal", hoverShowClose, className, children, onClose, onClick, ...restProps } = props;
+    const { dot, dotClass, outline, round, size = "normal", className, children, onClose, onClick, ...restProps } = props;
     return (jsxs("span", { className: classNames("i-tag", {
             "i-tag-outline": outline,
             "i-tag-clickable": onClick,
             [`i-tag-${size}`]: size !== "normal",
             round,
-        }, className), onClick: onClick, ...restProps, children: [dot && jsx("span", { className: classNames("i-tag-dot", dotClass) }), children, onClose && (jsx(Helpericon, { active: true, className: classNames("i-tag-close", {
-                    "i-tag-hover-close": hoverShowClose,
-                }), onClick: onClose }))] }));
+        }, className), onClick: onClick, ...restProps, children: [dot && jsx("span", { className: classNames("i-tag-dot", dotClass) }), children, onClose && (jsx(Helpericon, { active: true, className: "i-tag-close i-tag-hover-close", onClick: onClose }))] }));
 };
 
 const Options = (props) => {
-    const { value: val, options, filter, filterPlaceholder, multiple, empty = jsx(Empty, {}), onSelect, onFilter, } = props;
+    const { value: val, options, filter, filterPlaceholder, multiple, empty = jsx(Empty, {}), onSelect, onFilter } = props;
     return (jsxs("div", { className: classNames("i-select-options", {
             "i-select-options-multiple": multiple,
-        }), children: [filter && multiple && (jsxs("div", { className: 'i-select-filter', children: [jsx(Icon, { icon: jsx(SearchRound, {}), className: 'color-8 ml-8 my-auto', size: '1.2em' }), jsx("input", { type: 'text', className: 'i-input', placeholder: filterPlaceholder, onChange: onFilter })] })), options.length === 0 && empty, options.map((option, i) => {
+        }), children: [filter && multiple && (jsxs("div", { className: "i-select-filter", children: [jsx(Icon, { icon: jsx(SearchRound, {}), className: "color-8 ml-8 my-auto", size: "1.2em" }), jsx("input", { type: "text", className: "i-input", placeholder: filterPlaceholder, onChange: onFilter })] })), options.length === 0 && empty, options.map((option, i) => {
                 const { label, value, disabled } = option;
-                const isActive = multiple
-                    ? val?.includes(value)
-                    : val === value;
-                return (jsxs(List$1.Item, { active: isActive, type: 'option', onClick: () => onSelect?.(value, option), disabled: disabled, children: [multiple && (jsx(Icon, { icon: jsx(CheckRound, {}), className: 'i-select-option-check', size: '1em' })), label] }, value || i));
+                const isActive = multiple ? val?.includes(value) : val === value;
+                return (jsxs(List$1.Item, { active: isActive, type: "option", onClick: () => onSelect?.(value, option), disabled: disabled, children: [multiple && jsx(Icon, { icon: jsx(CheckRound, {}), className: "i-select-option-check", size: "1em" }), label] }, value || i));
             })] }));
 };
 const activeOptions = (options = [], value = [], max = 3) => {
-    const total = options.flatMap((opt) => value.includes(opt.value) ? [opt] : []);
+    const total = options.flatMap((opt) => (value.includes(opt.value) ? [opt] : []));
     if (max >= total.length)
         return total;
     const rest = total.length - max;
@@ -4760,7 +4763,7 @@ const displayValue = (config) => {
             if (typeof opt === "number")
                 return jsxs(Tag, { children: ["+", opt] }, i);
             const { label, value } = opt;
-            return (jsx(Tag, { hoverShowClose: true, onClose: (e) => {
+            return (jsx(Tag, { onClose: (e) => {
                     e?.stopPropagation();
                     onSelect?.(value, opt);
                 }, children: label }, value));
@@ -4770,7 +4773,7 @@ const displayValue = (config) => {
 };
 
 const Select = (props) => {
-    const { ref, type = "text", name, label, value = "", placeholder, required, options = [], multiple, prepend, append, labelInline, style, className, message, status = "normal", hideClear, hideArrow, maxDisplay, border, filter, tip, filterPlaceholder = "...", popupProps, onSelect, onChange, ...restProps } = props;
+    const { ref, type = "text", name, label, value = "", placeholder, required, options = [], multiple, prepend, append, labelInline, style, className, message, status = "normal", hideClear, hideArrow, maxDisplay, border = true, filter, tip, filterPlaceholder = "...", popupProps, onSelect, onChange, ...restProps } = props;
     const [filterValue, setFilterValue] = useState("");
     const [selectedValue, setSelectedValue] = useState(value);
     const [active, setActive] = useState(false);
@@ -4785,9 +4788,7 @@ const Select = (props) => {
         if (!fv || !filter)
             return formattedOptions;
         const lowerFv = fv.toLowerCase();
-        const filterFn = typeof filter === "function"
-            ? filter
-            : (opt) => opt._value.includes(lowerFv) || opt._label.includes(lowerFv);
+        const filterFn = typeof filter === "function" ? filter : (opt) => opt._value.includes(lowerFv) || opt._label.includes(lowerFv);
         return formattedOptions.filter(filterFn);
     }, [formattedOptions, filter, filterValue]);
     const changeValue = (v) => {
@@ -4836,9 +4837,7 @@ const Select = (props) => {
     useEffect(() => {
         setSelectedValue(value);
     }, [value]);
-    const hasValue = multiple
-        ? selectedValue.length > 0
-        : !!selectedValue;
+    const hasValue = multiple ? selectedValue.length > 0 : !!selectedValue;
     const clearable = !hideClear && active && hasValue;
     const text = message ?? tip;
     return (jsxs("label", { className: classNames("i-input-label", className, {
@@ -4855,7 +4854,7 @@ const Select = (props) => {
                                 multiple,
                                 maxDisplay,
                                 onSelect: handleSelect,
-                            }) })) : (jsx("input", { className: "i-input i-select", placeholder: placeholder, readOnly: true }))) : null, !multiple && (jsx("input", { value: active ? filterValue : displayLabel, className: "i-input i-select", placeholder: displayLabel || placeholder, onChange: handleInputChange, readOnly: !filter })), jsx(Helpericon, { active: !hideArrow, icon: clearable ? undefined : jsx(UnfoldMoreRound, {}), onClick: handleHelperClick }), append] }) }), text && jsx("span", { className: "i-input-message", children: text })] }));
+                            }) })) : (jsx("input", { className: "i-input i-select", placeholder: placeholder, readOnly: true }))) : null, !multiple && jsx("input", { value: active ? filterValue : displayLabel, className: "i-input i-select", placeholder: displayLabel || placeholder, onChange: handleInputChange, readOnly: !filter }), jsx(Helpericon, { active: !hideArrow, icon: clearable ? undefined : jsx(UnfoldMoreRound, {}), onClick: handleHelperClick }), append] }) }), text && jsx("span", { className: "i-input-message", children: text })] }));
 };
 
 const ColorMethods = {
@@ -5325,6 +5324,214 @@ const DateRange = (props) => {
     return (jsx(Popup, { visible: active, trigger: 'click', position: 'bottom', arrow: false, align: 'start', onVisibleChange: handleVisibleChange, content: jsx(DoublePanel, { value: dayJsValue, weeks: weeks, unitYear: unitYear, unitMonth: unitMonth, renderDate: renderDate, renderMonth: renderMonth, renderYear: renderYear, disabledDate: disabledDate, onSelected: handleSelected }), children: jsx(Input, { value: inputValue, placeholder: placeholder, readOnly: true, clear: clear, onClear: handleClear, append: jsx(Icon, { icon: jsx(CalendarMonthTwotone, {}), className: 'i-datepicker-icon', size: '1em' }), className: classNames("i-datepicker-label", className), ...restProps }) }));
 };
 
+const CreateTag = memo(function CreateTag(props) {
+    const { isEditing, isLoading, createTagProps, tagProps, onBlur, onKeyDown, onStartCreate } = props;
+    if (isEditing) {
+        return (jsx(Tag, { ...createTagProps, className: classNames("i-pill", tagProps?.className, "i-pill-editing"), contentEditable: true, suppressContentEditableWarning: true, onBlur: () => onBlur(-1), onKeyDown: (e) => onKeyDown(e, -1), children: isLoading && jsx(Loading, { size: ".86em", className: "ml-4" }) }, "pill-editing"));
+    }
+    return (jsx(Tag, { ...createTagProps, className: classNames("i-pill", tagProps?.className, "i-pill-create"), onClick: onStartCreate, children: jsx("b", { children: "\uFF0B" }) }, "pill-create"));
+});
+
+const TagItem = memo(function TagItem(props) {
+    const { item, index, isEditing, isLoading, tagProps, editable, readonly, renderItem, onClose, onClick, onBlur, onKeyDown } = props;
+    const isClickable = !isEditing && editable && !readonly;
+    if (renderItem) {
+        return renderItem({
+            value: item,
+            index,
+            editing: isEditing,
+            loading: isLoading,
+            readonly: !!readonly,
+            remove: () => onClose(index),
+        });
+    }
+    return (jsxs(Tag, { ...tagProps, className: classNames("i-pill", tagProps?.className, { "i-pill-editing": isEditing }), contentEditable: isEditing, suppressContentEditableWarning: true, onClose: !isEditing && !isLoading && !readonly ? () => onClose(index) : undefined, onClick: isClickable ? (e) => onClick(e, index) : undefined, onBlur: isEditing ? () => onBlur(index) : undefined, onKeyDown: isEditing ? (e) => onKeyDown(e, index) : undefined, children: [item, isLoading && jsx(Loading, { size: ".86em", className: "ml-4" })] }));
+});
+
+function Pill(props) {
+    const { value = [], tagProps, max, icon = jsx(AddRound, {}), className, label, labelInline, readonly, editable, onChange, onUpdate, validator, format, renderItem, hideCreate, ...restProps } = props;
+    const [editingIndex, setEditingIndex] = useState(null);
+    const [loadingSet, setLoadingSet] = useState(new Set());
+    const instRef = useRef({
+        props,
+        editingIndex,
+        loadingSet,
+        setEditingIndex,
+        setLoadingSet,
+    });
+    instRef.current.props = props;
+    instRef.current.editingIndex = editingIndex;
+    instRef.current.loadingSet = loadingSet;
+    instRef.current.setEditingIndex = setEditingIndex;
+    instRef.current.setLoadingSet = setLoadingSet;
+    useEffect(() => {
+        if (editingIndex !== null) {
+            const el = document.querySelector(".i-pill-editing");
+            el?.focus();
+        }
+    }, [editingIndex]);
+    const cleanTagProps = useMemo(() => {
+        if (!tagProps)
+            return {};
+        const { onClose, dot, dotClass, ...rest } = tagProps;
+        return rest;
+    }, [tagProps]);
+    const handleClose = useCallback((index) => {
+        const inst = instRef.current;
+        if (inst.props.readonly)
+            return;
+        const hasAsync = !!inst.props.onUpdate;
+        if (hasAsync)
+            inst.setLoadingSet((prev) => new Set(prev).add(index));
+        setTimeout(async () => {
+            try {
+                const { props } = instRef.current;
+                const values = props.value ?? [];
+                const item = values[index];
+                if (item === undefined)
+                    return;
+                const result = props.onUpdate?.(undefined, item, "delete");
+                if (result instanceof Promise) {
+                    const ok = await result;
+                    if (ok === false)
+                        return;
+                }
+                const next = [...values];
+                next.splice(index, 1);
+                props.onChange?.(next);
+            }
+            finally {
+                if (hasAsync) {
+                    instRef.current.setLoadingSet((prev) => {
+                        const s = new Set(prev);
+                        s.delete(index);
+                        return s;
+                    });
+                }
+            }
+        }, 0);
+    }, []);
+    const handleItemClick = useCallback((e, index) => {
+        if (e.target.closest(".i-helpericon"))
+            return;
+        const inst = instRef.current;
+        if (inst.props.readonly)
+            return;
+        if (index === -1 && inst.props.max !== undefined && (inst.props.value?.length ?? 0) >= inst.props.max)
+            return;
+        inst.setEditingIndex(index);
+    }, []);
+    const commitEdit = useCallback((index, text) => {
+        const inst = instRef.current;
+        const formatted = inst.props.format ? inst.props.format(text) : text;
+        const hasAsync = !!(inst.props.validator || inst.props.onUpdate);
+        if (hasAsync)
+            inst.setLoadingSet((prev) => new Set(prev).add(index));
+        setTimeout(async () => {
+            try {
+                const { props } = instRef.current;
+                if (props.validator) {
+                    const valid = await Promise.resolve(props.validator(formatted));
+                    if (!valid)
+                        return;
+                }
+                const values = props.value ?? [];
+                if (index === -1) {
+                    if (values.includes(formatted))
+                        return;
+                    const result = props.onUpdate?.(formatted, undefined, "create");
+                    if (result instanceof Promise) {
+                        const ok = await result;
+                        if (ok === false)
+                            return;
+                    }
+                    props.onChange?.([...values, formatted]);
+                }
+                else {
+                    const oldValue = values[index];
+                    if (oldValue === formatted)
+                        return;
+                    const result = props.onUpdate?.(formatted, oldValue, "update");
+                    if (result instanceof Promise) {
+                        const ok = await result;
+                        if (ok === false)
+                            return;
+                    }
+                    const next = [...values];
+                    next[index] = formatted;
+                    props.onChange?.(next);
+                }
+            }
+            finally {
+                if (hasAsync) {
+                    instRef.current.setLoadingSet((prev) => {
+                        const s = new Set(prev);
+                        s.delete(index);
+                        return s;
+                    });
+                }
+                instRef.current.setEditingIndex(null);
+            }
+        }, 0);
+    }, []);
+    const handleBlur = useCallback((index) => {
+        const inst = instRef.current;
+        if (inst.loadingSet.has(index))
+            return;
+        const el = document.querySelector(".i-pill-editing");
+        const text = el?.textContent?.trim();
+        if (!text) {
+            if (index !== -1) {
+                handleClose(index);
+            }
+            else {
+                inst.setEditingIndex(null);
+            }
+            return;
+        }
+        commitEdit(index, text);
+    }, []);
+    const handleKeyDown = useCallback((e, index) => {
+        const inst = instRef.current;
+        if (inst.loadingSet.has(index))
+            return;
+        if (e.key === "Enter") {
+            e.preventDefault();
+            const text = e.currentTarget.textContent?.trim();
+            if (!text) {
+                if (index !== -1) {
+                    handleClose(index);
+                }
+                else {
+                    inst.setEditingIndex(null);
+                }
+                return;
+            }
+            commitEdit(index, text);
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            if (index !== -1) {
+                const original = inst.props.value?.[index];
+                if (original !== undefined) {
+                    e.currentTarget.textContent = original;
+                }
+            }
+            inst.setEditingIndex(null);
+        }
+    }, []);
+    const handleStartCreate = useCallback(() => {
+        const inst = instRef.current;
+        if (inst.props.readonly)
+            return;
+        if (inst.props.max !== undefined && (inst.props.value?.length ?? 0) >= inst.props.max)
+            return;
+        inst.setEditingIndex(-1);
+    }, []);
+    const canCreate = !hideCreate && !readonly && (max === undefined || value.length < max);
+    return (jsxs("div", { className: classNames("i-pills i-input-label", { "i-input-inline": labelInline }, className), ...restProps, children: [label && jsx("span", { className: "i-input-label-text", children: label }), jsxs("div", { className: "i-pill-list", children: [value.map((item, i) => (jsx(TagItem, { item: item, index: i, isEditing: editingIndex === i, isLoading: loadingSet.has(i), tagProps: tagProps, editable: editable, readonly: readonly, renderItem: renderItem, onClose: handleClose, onClick: handleItemClick, onBlur: handleBlur, onKeyDown: handleKeyDown }, i))), canCreate && jsx(CreateTag, { isEditing: editingIndex === -1, isLoading: loadingSet.has(-1), createTagProps: cleanTagProps, tagProps: tagProps, onBlur: handleBlur, onKeyDown: handleKeyDown, onStartCreate: handleStartCreate })] })] }));
+}
+
 const defaultOk = {
     children: "确定",
 };
@@ -6976,4 +7183,4 @@ const useTheme = (props) => {
     };
 };
 
-export { Affix, Badge, Button, Card, Checkbox, Collapse, ColorPicker, Datagrid, Datepicker as DatePicker, DateRange, Description, Drawer, Dropdown, Editor, Flex, Form, Icon, MemoImage as Image, Input, List$1 as List, Loading, Message, Modal, Pagination, Popconfirm, Popup, Progress, Radio, Resizable, River, Scroll, Select, Step, Swiper, Tabs, Tag, Text, TimePicker, Tree, Upload, Video, usePreview, useTheme };
+export { Affix, Badge, Button, Checkbox, Collapse, ColorPicker, Datagrid, Datepicker as DatePicker, DateRange, Description, Drawer, Dropdown, Editor, Flex, Form, Icon, MemoImage as Image, Input, List$1 as List, Loading, Message, Modal, Pagination, Pill, Popconfirm, Popup, Progress, Radio, Resizable, River, Scroll, Select, Step, Swiper, Tabs, Tag, Text, TimePicker, Tree, Upload, Video, usePreview, useTheme };

package/lib/types/components/form/useForm.d.ts

@@ -10,7 +10,7 @@ declare class IFormInstance {
     set(field: any, value?: any): void;
     delete(field: string): void;
     clear(): void;
-    validate(field?: string): Promise<boolean | Record<string, any>>;
+    validate(field?: string): Promise<false | Record<string, any>>;
 }
 declare function useForm(form?: IFormInstance): IFormInstance;
 

package/lib/types/components/modal/type.d.ts

@@ -6,7 +6,7 @@ interface IModal extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     visible?: boolean;
     title?: ReactNode;
     footer?: ReactNode;
-    closable?: boolean;
+    closable?: boolean | (() => boolean | Promise<boolean>);
     hideCloseButton?: boolean;
     hideBackdrop?: boolean;
     backdropClosable?: boolean;

package/lib/types/components/pill/index.d.ts

@@ -0,0 +1,5 @@
+import Pill from './pill.js';
+
+
+
+export { Pill as default };

package/lib/types/components/pill/pill.d.ts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { IPill } from './type.js';
+
+declare function Pill(props: IPill): react_jsx_runtime.JSX.Element;
+
+export { Pill as default };

package/lib/types/components/pill/type.d.ts

@@ -0,0 +1,28 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { ITag } from '../tag/type.js';
+
+interface IPill extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "value"> {
+    value?: any[];
+    onChange?: (value: any[]) => void;
+    tagProps?: Partial<ITag>;
+    max?: number;
+    icon?: ReactNode;
+    editable?: boolean;
+    readonly?: boolean;
+    label?: ReactNode;
+    labelInline?: boolean;
+    validator?: (value: any) => boolean | Promise<boolean>;
+    format?: (value: any) => any;
+    onUpdate?: (newValue: any, oldValue: any, type: "delete" | "create" | "update") => void | Promise<boolean>;
+    hideCreate?: boolean;
+    renderItem?: (context: {
+        value: any;
+        index: number;
+        editing: boolean;
+        loading: boolean;
+        readonly: boolean;
+        remove: () => void;
+    }) => ReactNode;
+}
+
+export type { IPill };

package/lib/types/components/tag/type.d.ts

@@ -6,7 +6,6 @@ interface ITag extends HTMLAttributes<HTMLSpanElement> {
     outline?: boolean;
     round?: boolean;
     size?: "small" | "normal" | "large" | "extreme";
-    hoverShowClose?: boolean;
     onClick?: (e: MouseEvent) => void;
     onClose?: (e: MouseEvent) => void;
 }

package/lib/types/index.d.ts

@@ -1,7 +1,6 @@
 export { default as Affix } from './components/affix/affix.js';
 export { default as Badge } from './components/badge/badge.js';
 export { default as Button } from './components/button/button.js';
-export { default as Card } from './components/card/card.js';
 export { default as Checkbox } from './components/checkbox/checkbox.js';
 export { default as Collapse } from './components/collapse/collapse.js';
 export { default as Datagrid } from './components/datagrid/datagrid.js';
@@ -23,6 +22,7 @@ export { default as ColorPicker } from './components/picker/colors/index.js';
 export { default as TimePicker } from './components/picker/time/index.js';
 export { default as DateRange } from './components/picker/daterange/daterange.js';
 export { default as DatePicker } from './components/picker/dates/index.js';
+export { default as Pill } from './components/pill/pill.js';
 export { default as Popconfirm } from './components/popconfirm/popconfirm.js';
 export { default as Popup } from './components/popup/popup.js';
 export { default as Progress } from './components/progress/progress.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ioca/react",
-    "version": "1.5.28",
+    "version": "1.5.30",
     "type": "module",
     "scripts": {
         "dev": "vite",

package/lib/es/components/card/card.js

@@ -1,12 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import classNames from 'classnames';
-
-const Card = (props) => {
-    const { hideShadow, border, className, children, header, footer, ...restProps } = props;
-    return (jsxs("div", { className: classNames("i-card", className, {
-            shadow: !hideShadow,
-            "i-card-bordered": border,
-        }), ...restProps, children: [header && jsx("div", { className: 'i-card-header', children: header }), children && jsx("div", { className: 'i-card-content', children: children }), footer && jsx("div", { className: 'i-card-footer', children: footer })] }));
-};
-
-export { Card as default };

package/lib/es/components/card/index.js

@@ -1,5 +0,0 @@
-import Card from './card.js';
-
-
-
-export { Card as default };

package/lib/types/components/card/card.d.ts

@@ -1,6 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ICard } from './type.js';
-
-declare const Card: (props: ICard) => react_jsx_runtime.JSX.Element;
-
-export { Card as default };