@ioca/react 1.5.27 → 1.5.29

package/lib/es/components/pill/pill.js

@@ -0,0 +1,192 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { AddRound } from '@ricons/material';
+import classNames from 'classnames';
+import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import CreateTag from './create.js';
+import TagItem from './item.js';
+
+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 })] })] }));
+}
+
+export { Pill as default };

package/lib/es/components/select/options.js

@@ -34,7 +34,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));

package/lib/es/components/select/select.js

@@ -13,14 +13,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) => {

package/lib/es/components/tag/tag.js

@@ -3,15 +3,13 @@ import classNames from 'classnames';
 import Helpericon from '../utils/helpericon/helpericon.js';
 
 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 }))] }));
 };
 
 export { Tag as default };

package/lib/es/components/tree/item.js

@@ -6,21 +6,21 @@ import Icon from '../icon/icon.js';
 import Loading from '../loading/loading.js';
 
 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 });
@@ -28,7 +28,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();

package/lib/es/components/tree/tree.js

@@ -27,7 +27,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({});
@@ -59,14 +59,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 }));
@@ -223,8 +225,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 }));
 };

package/lib/es/components/tree/virtual.js

@@ -6,7 +6,7 @@ import { useResizeObserver } from '../../js/hooks.js';
 import { TreeRow } from './item.js';
 
 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();
@@ -33,7 +33,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, { 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, { listRef: listRef, rowCount: flatNodes.length, rowHeight: virtual.rowHeight, overscanCount: Math.max(3, virtual.threshold ?? 8), rowProps: {}, style: {
                 width: "100%",
                 height: listHeight,
                 overflow: "auto",

package/lib/es/index.js

@@ -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';