@ioca/react 1.5.27 → 1.5.29

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, AddRound, 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 { createRoot } from 'react-dom/client';
 import { getScrollbarSize, List as List$2 } from 'react-window';
 import { createPortal, flushSync } from 'react-dom';
@@ -1006,6 +1006,224 @@ const Collapse = (props) => {
 };
 Collapse.Item = Item$5;
 
+const Tag = (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: "i-tag-close i-tag-hover-close", onClick: onClose }))] }));
+};
+
+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, ...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 = !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 })] })] }));
+}
+
 function Empty(props) {
     const { className, ...restProps } = props;
     return (jsx(InboxTwotone, { className: classNames("i-empty", className), ...restProps }));
@@ -1037,16 +1255,8 @@ const sumLengths = (parts) => {
     return `calc(${out.join(" + ")})`;
 };
 const toCssWidth = (w) => typeof w === "number" ? `${w}px` : w;
-const buildGridTemplateColumns = (widths, overrideIndex, overrideWidth) => {
-    let out = "";
-    for (let i = 0; i < widths.length; i++) {
-        const w = i === overrideIndex && overrideWidth != null
-            ? overrideWidth
-            : widths[i];
-        out += (i ? " " : "") + toCssWidth(w);
-    }
-    return out;
-};
+const buildGridTemplateColumns = (widths, overrideIndex, overrideWidth) => buildCssWidths(widths, overrideIndex, overrideWidth).join(" ");
+const hasArrayChanged = (a, b) => a.length !== b.length || a.some((v, i) => v !== b[i]);
 const buildCssWidths = (widths, overrideIndex, overrideWidth) => {
     const out = new Array(widths.length);
     for (let i = 0; i < widths.length; i++) {
@@ -1519,21 +1729,8 @@ const Datagrid = (props) => {
     });
     const previewRef = useRef({ index: -1, width: -1, template: "" });
     useEffect(() => {
-        const next = columns.map((col, i) => {
-            if (col.width != null)
-                return col.width;
-            return state.widths[i] ?? "min-content";
-        });
-        let changed = next.length !== state.widths.length;
-        if (!changed) {
-            for (let i = 0; i < next.length; i++) {
-                if (next[i] !== state.widths[i]) {
-                    changed = true;
-                    break;
-                }
-            }
-        }
-        if (changed)
+        const next = columns.map((col, i) => (col.width != null ? col.width : (state.widths[i] ?? "min-content")));
+        if (hasArrayChanged(next, state.widths))
             state.widths = next;
     }, [columns, state]);
     const styles = useMemo(() => {
@@ -1557,8 +1754,7 @@ const Datagrid = (props) => {
             const el = wrapRef.current;
             if (!el)
                 return;
-            if (previewRef.current.index === i &&
-                previewRef.current.width === w) {
+            if (previewRef.current.index === i && previewRef.current.width === w) {
                 return;
             }
             const template = buildGridTemplateColumns(state.widths, i, w);
@@ -1597,9 +1793,7 @@ const Datagrid = (props) => {
         const { sortBy, sortType } = state;
         if (sortBy && !onSort) {
             const sorter = columns.find((col) => col.id === sortBy)?.sorter;
-            const sortFn = typeof sorter === "function"
-                ? sorter
-                : (a, b) => b[sortBy] - a[sortBy];
+            const sortFn = typeof sorter === "function" ? sorter : (a, b) => b[sortBy] - a[sortBy];
             const sorted = [...data].sort(sortFn);
             return sortType === "desc" ? sorted : sorted.reverse();
         }
@@ -1612,66 +1806,36 @@ const Datagrid = (props) => {
         return !!rowHeight && rowHeight > 0;
     }, [virtual]);
     useEffect(() => {
-        if (!resizable)
-            return;
         if (!container.current)
             return;
-        if (!columns.some((col, i) => col.width == null && typeof state.widths[i] !== "number")) {
+        const hasUnmeasured = columns.some((col, i) => col.width == null && typeof state.widths[i] !== "number");
+        if (!hasUnmeasured)
             return;
-        }
-        let rafId = null;
-        let tries = 0;
-        const run = () => {
-            rafId = null;
-            const div = container.current;
-            if (!div)
-                return;
+        const div = container.current;
+        const rafId = requestAnimationFrame(() => {
             const headerRow = div.querySelector(".i-datagrid-header.i-datagrid-row");
             const bodyRow = div.querySelector(".i-datagrid-row:not(.i-datagrid-header)");
             const headerCells = headerRow ? Array.from(headerRow.children) : [];
             const bodyCells = bodyRow ? Array.from(bodyRow.children) : [];
             const cellCount = Math.max(headerCells.length, bodyCells.length);
-            if (cellCount < 1) {
-                tries++;
-                if (tries < 10)
-                    rafId = requestAnimationFrame(run);
+            if (cellCount < 1)
                 return;
-            }
-            const measured = new Array(cellCount).fill(null);
-            for (let i = 0; i < cellCount; i++) {
-                const hw = headerCells[i]
-                    ?.offsetWidth;
-                const bw = bodyCells[i]
-                    ?.offsetWidth;
-                const w = Math.max(hw ?? 0, bw ?? 0);
-                measured[i] = w > 0 ? w : null;
-            }
             const next = columns.map((col, i) => {
                 if (col.width != null)
                     return col.width;
-                const cur = state.widths[i];
-                if (typeof cur === "number")
-                    return cur;
-                return measured[i] ?? cur ?? "min-content";
+                const prev = state.widths[i];
+                if (typeof prev === "number")
+                    return prev;
+                const hw = headerCells[i]?.offsetWidth ?? 0;
+                const bw = bodyCells[i]?.offsetWidth ?? 0;
+                const w = Math.max(hw, bw);
+                return w > 0 ? w : "min-content";
             });
-            let changed = next.length !== state.widths.length;
-            if (!changed) {
-                for (let i = 0; i < next.length; i++) {
-                    if (next[i] !== state.widths[i]) {
-                        changed = true;
-                        break;
-                    }
-                }
-            }
-            if (changed)
+            if (hasArrayChanged(next, state.widths))
                 state.widths = next;
-        };
-        rafId = requestAnimationFrame(run);
-        return () => {
-            if (rafId != null)
-                cancelAnimationFrame(rafId);
-        };
-    }, [columns, resizable, state, useVirtual]);
+        });
+        return () => cancelAnimationFrame(rafId);
+    }, [columns, state]);
     useEffect(() => {
         if (!loading)
             return;
@@ -1693,16 +1857,14 @@ const Datagrid = (props) => {
     }, [rowKey]);
     return (jsxs("div", { ref: wrapRef, style: {
             maxHeight: height,
-            ...(useVirtual
-                ? { overflowX: "visible", overflowY: "hidden" }
-                : null),
+            ...(useVirtual ? { overflowX: "visible", overflowY: "hidden" } : null),
             ...mergedStyle,
         }, className: classNames("i-datagrid-container", className, {
             "i-datagrid-bordered": border,
             "i-datagrid-striped": striped,
         }), children: [useVirtual && virtual ? (jsx(VirtualDatagrid, { virtual: virtual, columns: columns, rows: rows, header: header, sortBy: state.sortBy, sortType: state.sortType, height: height, loading: loading, resizable: resizable, striped: striped, cellEllipsis: cellEllipsis, empty: empty, wrapRef: wrapRef, containerRef: container, getRowKey: getRowKey, onHeaderClick: handleHeaderClick, onWidthChange: handleWidthChange, onRowClick: onRowClick, onCellClick: onCellClick, onCellDoubleClick: onCellDoubleClick, onScroll: onScroll })) : (jsxs("div", { ref: container, className: classNames("i-datagrid", {
                     "i-datagrid-loading": loading,
-                }), onWheel: onScroll, children: [header && (jsx(Header, { columns: columns, resizable: resizable, sortType: state.sortType, sortBy: state.sortBy, cellEllipsis: cellEllipsis, onWidthChange: handleWidthChange, onHeaderClick: handleHeaderClick })), rows.map((row, i) => (jsx(Row, { row: i + (header ? 1 : 0), data: row, cellEllipsis: cellEllipsis, columns: columns, onCellClick: onCellClick, onRowClick: onRowClick, onCellDoubleClick: onCellDoubleClick }, getRowKey(row, i) ?? i))), rows.length < 1 && empty] })), loading && renderLoading()] }));
+                }), onWheel: onScroll, children: [header && jsx(Header, { columns: columns, resizable: resizable, sortType: state.sortType, sortBy: state.sortBy, cellEllipsis: cellEllipsis, onWidthChange: handleWidthChange, onHeaderClick: handleHeaderClick }), rows.map((row, i) => (jsx(Row, { row: i + (header ? 1 : 0), data: row, cellEllipsis: cellEllipsis, columns: columns, onCellClick: onCellClick, onRowClick: onRowClick, onCellDoubleClick: onCellDoubleClick }, getRowKey(row, i) ?? i))), rows.length < 1 && empty] })), loading && renderLoading()] }));
 };
 
 const Description = (props) => {
@@ -4776,18 +4938,6 @@ const Pagination = (props) => {
             }), end < totalPage - 1 && renderEllipsis(), end < totalPage && (jsx(Page, { page: totalPage, onChange: handlePageChange, children: renderPage(totalPage) })), next && (jsx(Page, { page: page + 1, disabled: page === totalPage, onChange: handlePageChange, children: next }))] }));
 };
 
-const Tag = (props) => {
-    const { dot, dotClass, outline, round, size = "normal", hoverShowClose, 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 }))] }));
-};
-
 const Options = (props) => {
     const { value: val, options, filter, filterPlaceholder, multiple, empty = jsx(Empty, {}), onSelect, onFilter, } = props;
     return (jsxs("div", { className: classNames("i-select-options", {
@@ -4816,7 +4966,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));
@@ -4830,14 +4980,20 @@ const Select = (props) => {
     const [filterValue, setFilterValue] = useState("");
     const [selectedValue, setSelectedValue] = useState(value);
     const [active, setActive] = useState(false);
-    const formattedOptions = useMemo(() => formatOption(options), [options]);
+    const formattedOptions = useMemo(() => {
+        return formatOption(options).map((opt) => {
+            const label = typeof opt.label === "string" ? opt.label : String(opt.value ?? "");
+            return { ...opt, _label: label.toLowerCase(), _value: String(opt.value ?? "").toLowerCase() };
+        });
+    }, [options]);
     const filterOptions = useMemo(() => {
         const fv = filterValue;
         if (!fv || !filter)
             return formattedOptions;
+        const lowerFv = fv.toLowerCase();
         const filterFn = typeof filter === "function"
             ? filter
-            : (opt) => opt.value.includes(fv) || opt.label.includes(fv);
+            : (opt) => opt._value.includes(lowerFv) || opt._label.includes(lowerFv);
         return formattedOptions.filter(filterFn);
     }, [formattedOptions, filter, filterValue]);
     const changeValue = (v) => {
@@ -6346,21 +6502,21 @@ const Tabs = ((props) => {
 Tabs.Item = Item;
 
 const TreeItemHeader = (props) => {
-    const { as: Tag = "a", href, selected, children, ...restProps } = props;
+    const { as: Tag = "a", href, selected, children, attrs, ...restProps } = props;
     const className = classNames("i-tree-item-header", {
         "i-tree-item-selected": selected,
     });
     if (typeof Tag === "string") {
-        return (jsx(Tag, { href: href, className: className, ...restProps, children: children }));
+        return (jsx(Tag, { href: href, className: className, ...attrs, ...restProps, children: children }));
     }
-    return (jsx(Tag, { to: href || "", className: className, ...restProps, children: children }));
+    return (jsx(Tag, { to: href || "", className: className, ...attrs, ...restProps, children: children }));
 };
 function TreeRow(props) {
     const { flatNode, wrapperStyle, virtualMode, selected, checkedSet, partofs = {}, checkable, nodeProps, renderExtra, loadingKeys, onExpand, onItemClick, onItemSelect, onItemCheck, } = props;
     const { node, depth, isExpanded } = flatNode;
-    const { key = "", as, href, icon, title, disabled, type } = node;
+    const { key = "", as, href, icon, title, disabled, type, attrs } = node;
     const children = node[nodeProps.children];
-    const hasChildren = children instanceof Promise || (Array.isArray(children) && children.length > 0);
+    const hasChildren = children instanceof Promise || typeof children === "function" || (Array.isArray(children) && children.length > 0);
     const loading = loadingKeys?.includes(key);
     if (type === "title") {
         return jsx("div", { style: wrapperStyle, className: "i-tree-group-title", children: title });
@@ -6368,7 +6524,7 @@ function TreeRow(props) {
     if (type && type !== "item") {
         return jsx("div", { style: wrapperStyle, className: `i-tree-type-${type}`, children: title });
     }
-    return (jsx("div", { className: !virtualMode ? classNames("i-tree-item", { "i-tree-expand": isExpanded }) : undefined, style: wrapperStyle, children: jsxs(TreeItemHeader, { as: as, href: href, style: { paddingLeft: `${depth * 1.5 + 0.5}em` }, selected: selected === key, onClick: (e) => {
+    return (jsx("div", { className: !virtualMode ? classNames("i-tree-item", { "i-tree-expand": isExpanded }) : undefined, style: wrapperStyle, children: jsxs(TreeItemHeader, { as: as, attrs: attrs, href: href, style: { paddingLeft: `${depth * 1.5 + 0.5}em` }, selected: selected === key, onClick: (e) => {
                 if (disabled) {
                     e.preventDefault();
                     e.stopPropagation();
@@ -6397,7 +6553,7 @@ function TreeList(props) {
 }
 
 function VirtualTree(props) {
-    const { flatNodes, onExpand, selected, checkedSet, partofs = {}, checkable, nodeProps, renderExtra, loadingKeys, height, useVirtual, className, style, onItemClick, onItemSelect, onItemCheck, } = props;
+    const { flatNodes, onExpand, selected, checkedSet, partofs = {}, checkable, nodeProps, renderExtra, loadingKeys, height, virtual, className, style, onItemClick, onItemSelect, onItemCheck, } = props;
     const listRef = useRef(null);
     const wrapRef = useRef(null);
     const ro = useResizeObserver();
@@ -6424,7 +6580,7 @@ function VirtualTree(props) {
             return null;
         return (jsx(TreeRow, { flatNode: flatNode, wrapperStyle: style, virtualMode: true, selected: p.selected, checkedSet: p.checkedSet, partofs: p.partofs, checkable: p.checkable, nodeProps: p.nodeProps, renderExtra: p.renderExtra, loadingKeys: p.loadingKeys, onExpand: p.onExpand, onItemClick: p.onItemClick, onItemSelect: p.onItemSelect, onItemCheck: p.onItemCheck }));
     }, []);
-    return (jsx("div", { ref: wrapRef, className: classNames("i-tree", className), style: { display: "block", width: "100%", height: "100%", ...style }, children: jsx(List$2, { listRef: listRef, rowCount: flatNodes.length, rowHeight: useVirtual.rowHeight, overscanCount: Math.max(3, useVirtual.threshold ?? 8), rowProps: {}, style: {
+    return (jsx("div", { ref: wrapRef, className: classNames("i-tree", className), style: { display: "block", width: "100%", height: "100%", ...style }, children: jsx(List$2, { listRef: listRef, rowCount: flatNodes.length, rowHeight: virtual.rowHeight, overscanCount: Math.max(3, virtual.threshold ?? 8), rowProps: {}, style: {
                 width: "100%",
                 height: listHeight,
                 overflow: "auto",
@@ -6454,7 +6610,7 @@ function flattenTree(nodes, expandedMap, nodeProps, depth = 0, parentItem, async
     return result;
 }
 const Tree = (props) => {
-    const { data = [], ref, selected, checked = [], disabledRelated, nodeProps, height, useVirtual, onItemSelect, onItemCheck, ...restProps } = props;
+    const { data = [], ref, selected, checked = [], disabledRelated, nodeProps, height, virtual, onItemSelect, onItemCheck, ...restProps } = props;
     const [selectedKey, setSelectedKey] = useState(selected);
     const [checkedKeys, setCheckedKeys] = useState(checked);
     const [partofs, setPartofs] = useState({});
@@ -6486,14 +6642,16 @@ const Tree = (props) => {
         if (!item)
             return;
         const rawChildren = item[oNodeProps.children];
-        const isAsync = rawChildren instanceof Promise;
+        const isLazy = typeof rawChildren === "function";
+        const isAsync = rawChildren instanceof Promise || isLazy;
         const isExpanded = !!expandedMap[key];
         if (isAsync && !isExpanded) {
             flushSync(() => {
                 setLoadingMap((prev) => ({ ...prev, [key]: true }));
                 setExpandedMap((prev) => ({ ...prev, [key]: true }));
             });
-            rawChildren
+            const promise = isLazy ? rawChildren() : rawChildren;
+            promise
                 .then((resolved) => {
                 item[oNodeProps.children] = resolved;
                 setAsyncChildrenMap((prev) => ({ ...prev, [key]: resolved }));
@@ -6650,8 +6808,8 @@ const Tree = (props) => {
             },
         };
     });
-    if (useVirtual) {
-        return (jsx(VirtualTree, { flatNodes: flatNodes, onExpand: handleExpand, height: height, useVirtual: useVirtual, selected: selectedKey, checkedSet: checkedSet, partofs: partofs, nodeProps: oNodeProps, loadingKeys: loadingKeys, onItemCheck: handleCheck, onItemSelect: handleSelect, ...restProps }));
+    if (virtual) {
+        return (jsx(VirtualTree, { flatNodes: flatNodes, onExpand: handleExpand, height: height, virtual: virtual, selected: selectedKey, checkedSet: checkedSet, partofs: partofs, nodeProps: oNodeProps, loadingKeys: loadingKeys, onItemCheck: handleCheck, onItemSelect: handleSelect, ...restProps }));
     }
     return (jsx(TreeList, { flatNodes: flatNodes, onExpand: handleExpand, selected: selectedKey, checkedSet: checkedSet, partofs: partofs, nodeProps: oNodeProps, loadingKeys: loadingKeys, onItemCheck: handleCheck, onItemSelect: handleSelect, ...restProps }));
 };
@@ -7024,4 +7182,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, 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, Pill, Popconfirm, Popup, Progress, Radio, Resizable, River, Scroll, Select, Step, Swiper, Tabs, Tag, Text, TimePicker, Tree, Upload, Video, usePreview, useTheme };

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,27 @@
+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>;
+    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/components/tree/type.d.ts

@@ -8,10 +8,11 @@ interface ITreeItem {
     title: string | ReactNode;
     icon?: ReactNode;
     href?: string;
-    children?: ITreeItem[] | Promise<ITreeItem[]>;
+    children?: ITreeItem[] | Promise<ITreeItem[]> | (() => Promise<ITreeItem[]>);
     expanded?: boolean;
     disabled?: boolean;
     checked?: boolean;
+    attrs?: Record<string, any>;
     parent?: ITreeItem;
     [key: string]: any;
 }
@@ -34,7 +35,7 @@ interface ITree {
     disabledRelated?: boolean;
     round?: boolean;
     height?: number | string;
-    useVirtual?: TVirtual;
+    virtual?: TVirtual;
     style?: CSSProperties;
     className?: string;
     renderExtra?: (item: ITreeItem) => ReactNode;

package/lib/types/index.d.ts

@@ -4,6 +4,7 @@ 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 Pill } from './components/pill/pill.js';
 export { default as Datagrid } from './components/datagrid/datagrid.js';
 export { default as Description } from './components/description/description.js';
 export { default as Drawer } from './components/drawer/drawer.js';

package/package.json

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