@ioca/react 1.4.78 → 1.4.80

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

@@ -0,0 +1,136 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+const require_index = require("../icon/index.js");
+const require_index$1 = require("../checkbox/index.js");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+let _ricons_material = require("@ricons/material");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/tree/item.tsx
+function TreeList(props) {
+	const { data = [], depth = 0, round, style, className, parent, nodeProps, ...restProps } = props;
+	const contents = data.map((item, i) => {
+		const { type } = item;
+		const title = item[nodeProps.title];
+		const itemKey = item[nodeProps.key] || (parent?.key !== void 0 ? `${parent.key}-${i}` : `${i}`);
+		item.key = itemKey;
+		item.parent = parent;
+		if (type === "title") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "i-tree-group-title",
+			children: title
+		}, i);
+		if (type && type !== "item") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `i-tree-type-${type}`,
+			children: title
+		}, i);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeItem, {
+			index: i,
+			item,
+			depth,
+			nodeProps,
+			...restProps
+		}, itemKey);
+	});
+	if (depth > 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: contents });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, classnames.default)("i-tree", className, { "i-tree-round": round }),
+		style,
+		children: contents
+	});
+}
+const Header = (props) => {
+	const { as: Tag = "a", href, selected, children, ...restProps } = props;
+	const className = (0, classnames.default)("i-tree-item-header", { "i-tree-item-selected": selected });
+	if (typeof Tag === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+		href,
+		className,
+		...restProps,
+		children
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+		to: href || "",
+		className,
+		...restProps,
+		children
+	});
+};
+const TreeItem = (props) => {
+	const { item, depth = 0, index, selected, checked = [], partofs = {}, checkable, nodeProps, renderExtra, onItemClick, onItemSelect, onItemCheck, ...restProps } = props;
+	const { as, key = "", href, icon, title, expanded, disabled } = item;
+	const children = item[nodeProps.children];
+	const [expand, setExpand] = (0, react.useState)(expanded);
+	const handleExpand = (e, fromToggle) => {
+		if (fromToggle) {
+			e.preventDefault();
+			e.stopPropagation();
+		}
+		if (disabled || !children?.length) return;
+		setExpand((v) => !v);
+	};
+	const handleItemClick = (e) => {
+		if (disabled) {
+			e.preventDefault();
+			e.stopPropagation();
+			return;
+		}
+		handleExpand(e);
+		onItemClick?.(item, e);
+		onItemSelect?.(key, item);
+	};
+	const handleItemCheck = (checked) => onItemCheck?.(item, checked, []);
+	const itemChecked = checked.includes(key);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, classnames.default)("i-tree-item", { "i-tree-expand": expand }),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Header, {
+			as,
+			href,
+			style: { paddingLeft: `${depth * 1.5 + .5}em` },
+			selected: selected === key,
+			onClick: handleItemClick,
+			children: [
+				checkable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default.Item, {
+					value: itemChecked,
+					partof: !itemChecked && partofs[key],
+					className: "i-tree-checkbox",
+					onChange: handleItemCheck,
+					onClick: (e) => e.stopPropagation()
+				}),
+				icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "i-tree-item-icon",
+					children: icon
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "i-tree-item-title",
+					children: title
+				}),
+				renderExtra?.(item),
+				children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.KeyboardArrowDownRound, {}),
+					className: "i-tree-toggle",
+					onClick: (e) => handleExpand(e, true)
+				})
+			]
+		}), children?.length && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "i-tree-item-content",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeList, {
+				data: children,
+				depth: depth + 1,
+				selected,
+				checkable,
+				parent: item,
+				partofs,
+				checked,
+				nodeProps,
+				renderExtra,
+				onItemClick,
+				onItemSelect,
+				onItemCheck,
+				...restProps
+			})
+		})]
+	});
+};
+//#endregion
+exports.TreeList = TreeList;
+
+//# sourceMappingURL=item.js.map

package/lib/cjs/components/tree/item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","names":["Checkbox","Icon","KeyboardArrowDownRound"],"sources":["../../../../packages/components/tree/item.tsx"],"sourcesContent":["import { KeyboardArrowDownRound } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport { MouseEvent, useState } from \"react\";\nimport Checkbox from \"../checkbox\";\nimport Icon from \"../icon\";\nimport { ITree, ITreeHeader, PropsTreeItem } from \"./type\";\n\ninterface ITreeList extends Omit<ITree, \"nodeProps\"> {\n\tnodeProps: {\n\t\tkey: string;\n\t\ttitle: string;\n\t\tchildren: string;\n\t};\n}\n\nexport function TreeList(props: ITreeList) {\n\tconst {\n\t\tdata = [],\n\t\tdepth = 0,\n\t\tround,\n\t\tstyle,\n\t\tclassName,\n\t\tparent,\n\t\tnodeProps,\n\t\t...restProps\n\t} = props;\n\n\tconst contents = data.map((item, i) => {\n\t\tconst { type } = item;\n\t\tconst title = item[nodeProps.title];\n\t\tconst itemKey =\n\t\t\titem[nodeProps.key] ||\n\t\t\t(parent?.key !== undefined ? `${parent.key}-${i}` : `${i}`);\n\n\t\titem.key = itemKey;\n\t\titem.parent = parent;\n\n\t\tif (type === \"title\") {\n\t\t\treturn (\n\t\t\t\t<div key={i} className='i-tree-group-title'>\n\t\t\t\t\t{title}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\tif (type && type !== \"item\") {\n\t\t\treturn (\n\t\t\t\t<div key={i} className={`i-tree-type-${type}`}>\n\t\t\t\t\t{title}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<TreeItem\n\t\t\t\tkey={itemKey}\n\t\t\t\tindex={i}\n\t\t\t\titem={item}\n\t\t\t\tdepth={depth}\n\t\t\t\tnodeProps={nodeProps}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t);\n\t});\n\n\tif (depth > 0) return <>{contents}</>;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\"i-tree\", className, {\n\t\t\t\t\"i-tree-round\": round,\n\t\t\t})}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{contents}\n\t\t</div>\n\t);\n}\n\nconst Header = (props: ITreeHeader) => {\n\tconst { as: Tag = \"a\", href, selected, children, ...restProps } = props;\n\n\tconst className = classNames(\"i-tree-item-header\", {\n\t\t\"i-tree-item-selected\": selected,\n\t});\n\n\tif (typeof Tag === \"string\") {\n\t\treturn (\n\t\t\t<Tag href={href} className={className} {...restProps}>\n\t\t\t\t{children}\n\t\t\t</Tag>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Tag to={href || \"\"} className={className} {...restProps}>\n\t\t\t{children}\n\t\t</Tag>\n\t);\n};\n\nexport const TreeItem = (props: PropsTreeItem) => {\n\tconst {\n\t\titem,\n\t\tdepth = 0,\n\t\tindex,\n\t\tselected,\n\t\tchecked = [],\n\t\tpartofs = {},\n\t\tcheckable,\n\t\tnodeProps,\n\t\trenderExtra,\n\t\tonItemClick,\n\t\tonItemSelect,\n\t\tonItemCheck,\n\t\t...restProps\n\t} = props;\n\n\tconst { as, key = \"\", href, icon, title, expanded, disabled } = item;\n\tconst children = item[nodeProps.children];\n\n\tconst [expand, setExpand] = useState(expanded);\n\n\tconst handleExpand = (e: MouseEvent<HTMLElement>, fromToggle?: boolean) => {\n\t\tif (fromToggle) {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t}\n\n\t\tif (disabled || !children?.length) return;\n\n\t\tsetExpand((v) => !v);\n\t};\n\n\tconst handleItemClick = (e: MouseEvent<HTMLElement>) => {\n\t\tif (disabled) {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t\treturn;\n\t\t}\n\n\t\thandleExpand(e);\n\t\tonItemClick?.(item, e);\n\t\tonItemSelect?.(key, item);\n\t};\n\n\tconst handleItemCheck = (checked) => onItemCheck?.(item, checked, []);\n\tconst itemChecked = checked.includes(key);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\"i-tree-item\", {\n\t\t\t\t\"i-tree-expand\": expand,\n\t\t\t})}\n\t\t>\n\t\t\t<Header\n\t\t\t\tas={as}\n\t\t\t\thref={href}\n\t\t\t\tstyle={{ paddingLeft: `${depth * 1.5 + 0.5}em` }}\n\t\t\t\tselected={selected === key}\n\t\t\t\tonClick={handleItemClick}\n\t\t\t>\n\t\t\t\t{checkable && (\n\t\t\t\t\t<Checkbox.Item\n\t\t\t\t\t\tvalue={itemChecked}\n\t\t\t\t\t\tpartof={!itemChecked && partofs[key]}\n\t\t\t\t\t\tclassName='i-tree-checkbox'\n\t\t\t\t\t\tonChange={handleItemCheck}\n\t\t\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{icon && <span className='i-tree-item-icon'>{icon}</span>}\n\n\t\t\t\t<span className='i-tree-item-title'>{title}</span>\n\n\t\t\t\t{renderExtra?.(item)}\n\n\t\t\t\t{children && (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={<KeyboardArrowDownRound />}\n\t\t\t\t\t\tclassName='i-tree-toggle'\n\t\t\t\t\t\tonClick={(e) => handleExpand(e, true)}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Header>\n\n\t\t\t{children?.length && (\n\t\t\t\t<div className='i-tree-item-content'>\n\t\t\t\t\t<TreeList\n\t\t\t\t\t\tdata={children}\n\t\t\t\t\t\tdepth={depth + 1}\n\t\t\t\t\t\tselected={selected}\n\t\t\t\t\t\tcheckable={checkable}\n\t\t\t\t\t\tparent={item}\n\t\t\t\t\t\tpartofs={partofs}\n\t\t\t\t\t\tchecked={checked}\n\t\t\t\t\t\tnodeProps={nodeProps}\n\t\t\t\t\t\trenderExtra={renderExtra}\n\t\t\t\t\t\tonItemClick={onItemClick}\n\t\t\t\t\t\tonItemSelect={onItemSelect}\n\t\t\t\t\t\tonItemCheck={onItemCheck}\n\t\t\t\t\t\t{...restProps}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"mappings":"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"}

package/lib/cjs/components/tree/tree.js

@@ -0,0 +1,127 @@
+require("../../_virtual/_rolldown/runtime.js");
+const require_item = require("./item.js");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/tree/tree.tsx
+const defaultNodeProps = {
+	key: "key",
+	title: "title",
+	children: "children"
+};
+const Tree = (props) => {
+	const { data = [], ref, selected, checked = [], disabledRelated, nodeProps, onItemSelect, onItemCheck, ...restProps } = props;
+	const [selectedKey, setSelectedKey] = (0, react.useState)(selected);
+	const [checkedKeys, setCheckedKeys] = (0, react.useState)(checked);
+	const [partofs, setPartofs] = (0, react.useState)({});
+	const nodeMapsRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const oNodeProps = Object.assign({}, defaultNodeProps, nodeProps);
+	const isChecked = (key) => checkedKeys.includes(key || "");
+	const checkItem = (item, checked, direction) => {
+		const { key = "", parent, children } = item;
+		const shouldChanged = { [key]: checked };
+		const partofs = { [key]: false };
+		if (disabledRelated) return [shouldChanged];
+		if (checked) {
+			if (parent && direction !== "leaf") {
+				const hasUnchecked = parent.children?.some((o) => o.key !== key && !isChecked(o.key));
+				const [changes, parts] = checkItem(parent, true, "root");
+				if (!hasUnchecked) Object.assign(shouldChanged, changes);
+				Object.assign(partofs, hasUnchecked ? parts : {}, { [parent.key]: true });
+			}
+			if (children?.length && direction !== "root") children.map((o) => {
+				if (isChecked(o.key)) return;
+				const [changes] = checkItem(o, true, "leaf");
+				Object.assign(shouldChanged, changes);
+				partofs[o.key] = false;
+			});
+			return [shouldChanged, partofs];
+		}
+		if (parent && direction !== "leaf") {
+			const [changes, parts] = checkItem(parent, false, "root");
+			Object.assign(shouldChanged, changes);
+			const hasChecked = parent.children?.some((o) => isChecked(o.key) && o.key !== key);
+			Object.assign(partofs, hasChecked ? {} : parts, {
+				[parent.key]: hasChecked,
+				[key]: false
+			});
+		}
+		if (children?.length && direction !== "root") children.map((o) => {
+			const [changes] = checkItem(o, false, "leaf");
+			if (!isChecked(o.key)) return;
+			Object.assign(shouldChanged, changes);
+			partofs[o.key] = false;
+		});
+		return [shouldChanged, partofs];
+	};
+	const handleCheck = (item, checked) => {
+		const [shouldChanged, partofs] = checkItem(item, checked);
+		const changedKeys = Object.keys(shouldChanged);
+		const nextChecked = checked ? Array.from(new Set([...checkedKeys, ...changedKeys])) : checkedKeys.filter((k) => !changedKeys.includes(k));
+		setCheckedKeys(nextChecked);
+		setPartofs((p) => ({
+			...p,
+			...partofs
+		}));
+		onItemCheck?.(item, checked, nextChecked);
+	};
+	const handleSelect = (key, item) => {
+		if (!props.selectable) return;
+		setSelectedKey(key);
+		onItemSelect?.(key, item);
+	};
+	(0, react.useEffect)(() => {
+		if (selected === void 0) return;
+		setSelectedKey(selected);
+	}, [selected]);
+	(0, react.useEffect)(() => {
+		nodeMapsRef.current.clear();
+		const { key, children } = oNodeProps;
+		const recursive = (nodes) => {
+			nodes.map((o) => {
+				nodeMapsRef.current.set(o[key], o);
+				o[children]?.length > 0 && recursive(o[children]);
+			});
+		};
+		recursive(data);
+	}, [data]);
+	(0, react.useImperativeHandle)(ref, () => {
+		return {
+			getChecked: () => {
+				const items = [];
+				checkedKeys.map((k) => {
+					const item = nodeMapsRef.current.get(k);
+					items.push(item);
+				});
+				return [checkedKeys, items];
+			},
+			getSelected: () => {
+				return [selectedKey, nodeMapsRef.current.get(selectedKey)];
+			},
+			getPartofs: () => {
+				const items = [];
+				return [Object.keys(partofs).filter((k) => {
+					const indeterminate = partofs[k];
+					if (indeterminate) {
+						const item = nodeMapsRef.current.get(k);
+						items.push(item);
+					}
+					return indeterminate;
+				}), items];
+			}
+		};
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_item.TreeList, {
+		data,
+		selected: selectedKey,
+		checked: checkedKeys,
+		partofs,
+		nodeProps: oNodeProps,
+		onItemCheck: handleCheck,
+		onItemSelect: handleSelect,
+		...restProps
+	});
+};
+//#endregion
+exports.default = Tree;
+
+//# sourceMappingURL=tree.js.map

package/lib/cjs/components/tree/tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.js","names":[],"sources":["../../../../packages/components/tree/tree.tsx"],"sourcesContent":["import { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport \"./index.css\";\nimport { TreeList } from \"./item\";\nimport { ITree, ITreeItem } from \"./type\";\n\nconst defaultNodeProps = {\n\tkey: \"key\",\n\ttitle: \"title\",\n\tchildren: \"children\",\n};\n\nconst Tree = (props: ITree) => {\n\tconst {\n\t\tdata = [],\n\t\tref,\n\t\tselected,\n\t\tchecked = [],\n\t\tdisabledRelated,\n\t\tnodeProps,\n\t\tonItemSelect,\n\t\tonItemCheck,\n\t\t...restProps\n\t} = props;\n\tconst [selectedKey, setSelectedKey] = useState(selected);\n\tconst [checkedKeys, setCheckedKeys] = useState(checked);\n\tconst [partofs, setPartofs] = useState<Record<string, boolean>>({});\n\tconst nodeMapsRef = useRef<Map<any, any>>(new Map());\n\tconst oNodeProps = Object.assign({}, defaultNodeProps, nodeProps);\n\n\tconst isChecked = (key?: string) => checkedKeys.includes(key || \"\");\n\n\tconst checkItem = (\n\t\titem: ITreeItem,\n\t\tchecked: boolean,\n\t\tdirection?: \"root\" | \"leaf\"\n\t) => {\n\t\tconst { key = \"\", parent, children } = item;\n\t\tconst shouldChanged = { [key]: checked };\n\t\tconst partofs = { [key]: false };\n\n\t\tif (disabledRelated) return [shouldChanged];\n\n\t\tif (checked) {\n\t\t\tif (parent && direction !== \"leaf\") {\n\t\t\t\tconst hasUnchecked = parent.children?.some(\n\t\t\t\t\t(o) => o.key !== key && !isChecked(o.key)\n\t\t\t\t);\n\n\t\t\t\tconst [changes, parts] = checkItem(parent, true, \"root\");\n\n\t\t\t\tif (!hasUnchecked) {\n\t\t\t\t\tObject.assign(shouldChanged, changes);\n\t\t\t\t}\n\n\t\t\t\tObject.assign(partofs, hasUnchecked ? parts : {}, {\n\t\t\t\t\t[parent.key as string]: true,\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tif (children?.length && direction !== \"root\") {\n\t\t\t\tchildren.map((o) => {\n\t\t\t\t\tif (isChecked(o.key)) return;\n\n\t\t\t\t\tconst [changes] = checkItem(o, true, \"leaf\");\n\n\t\t\t\t\tObject.assign(shouldChanged, changes);\n\t\t\t\t\tpartofs[o.key as string] = false;\n\t\t\t\t});\n\t\t\t}\n\n\t\t\treturn [shouldChanged, partofs];\n\t\t}\n\n\t\tif (parent && direction !== \"leaf\") {\n\t\t\tconst [changes, parts] = checkItem(parent, false, \"root\");\n\n\t\t\tObject.assign(shouldChanged, changes);\n\n\t\t\tconst hasChecked = parent.children?.some(\n\t\t\t\t(o) => isChecked(o.key) && o.key !== key\n\t\t\t);\n\n\t\t\tObject.assign(partofs, hasChecked ? {} : parts, {\n\t\t\t\t[parent.key as string]: hasChecked,\n\t\t\t\t[key]: false,\n\t\t\t});\n\t\t}\n\t\tif (children?.length && direction !== \"root\") {\n\t\t\tchildren.map((o) => {\n\t\t\t\tconst [changes] = checkItem(o, false, \"leaf\");\n\n\t\t\t\tif (!isChecked(o.key)) return;\n\n\t\t\t\tObject.assign(shouldChanged, changes);\n\t\t\t\tpartofs[o.key as string] = false;\n\t\t\t});\n\t\t}\n\n\t\treturn [shouldChanged, partofs];\n\t};\n\n\tconst handleCheck = (item: ITreeItem, checked: boolean) => {\n\t\tconst [shouldChanged, partofs] = checkItem(item, checked);\n\t\tconst changedKeys = Object.keys(shouldChanged);\n\n\t\tconst nextChecked = checked\n\t\t\t? Array.from(new Set([...checkedKeys, ...changedKeys]))\n\t\t\t: checkedKeys.filter((k) => !changedKeys.includes(k));\n\n\t\tsetCheckedKeys(nextChecked);\n\t\tsetPartofs((p) => ({ ...p, ...partofs }));\n\t\tonItemCheck?.(item, checked, nextChecked);\n\t};\n\n\tconst handleSelect = (key: string, item: ITreeItem) => {\n\t\tif (!props.selectable) return;\n\n\t\tsetSelectedKey(key);\n\t\tonItemSelect?.(key, item);\n\t};\n\n\tuseEffect(() => {\n\t\tif (selected === undefined) return;\n\n\t\tsetSelectedKey(selected);\n\t}, [selected]);\n\n\tuseEffect(() => {\n\t\tnodeMapsRef.current.clear();\n\n\t\tconst { key, children } = oNodeProps;\n\t\tconst recursive = (nodes) => {\n\t\t\tnodes.map((o) => {\n\t\t\t\tnodeMapsRef.current.set(o[key], o);\n\n\t\t\t\to[children]?.length > 0 && recursive(o[children]);\n\t\t\t});\n\t\t};\n\n\t\trecursive(data);\n\t}, [data]);\n\n\tuseImperativeHandle(ref, () => {\n\t\treturn {\n\t\t\tgetChecked: () => {\n\t\t\t\tconst items: ITreeItem[] = [];\n\t\t\t\tcheckedKeys.map((k) => {\n\t\t\t\t\tconst item = nodeMapsRef.current.get(k);\n\t\t\t\t\titems.push(item);\n\t\t\t\t});\n\t\t\t\treturn [checkedKeys, items];\n\t\t\t},\n\t\t\tgetSelected: () => {\n\t\t\t\tconst item = nodeMapsRef.current.get(selectedKey);\n\t\t\t\treturn [selectedKey, item];\n\t\t\t},\n\t\t\tgetPartofs: () => {\n\t\t\t\tconst items: ITreeItem[] = [];\n\t\t\t\tconst keys = Object.keys(partofs).filter((k) => {\n\t\t\t\t\tconst indeterminate = partofs[k];\n\n\t\t\t\t\tif (indeterminate) {\n\t\t\t\t\t\tconst item = nodeMapsRef.current.get(k);\n\t\t\t\t\t\titems.push(item);\n\t\t\t\t\t}\n\n\t\t\t\t\treturn indeterminate;\n\t\t\t\t});\n\n\t\t\t\treturn [keys, items];\n\t\t\t},\n\t\t};\n\t});\n\n\treturn (\n\t\t<TreeList\n\t\t\tdata={data}\n\t\t\tselected={selectedKey}\n\t\t\tchecked={checkedKeys}\n\t\t\tpartofs={partofs}\n\t\t\tnodeProps={oNodeProps}\n\t\t\tonItemCheck={handleCheck}\n\t\t\tonItemSelect={handleSelect}\n\t\t\t{...restProps}\n\t\t/>\n\t);\n};\n\nexport default Tree;\n"],"mappings":""}

package/lib/cjs/components/upload/index.js

@@ -0,0 +1,6 @@
+//#region packages/components/upload/index.tsx
+var upload_default = require("./upload.js").default;
+//#endregion
+exports.default = upload_default;
+
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/upload/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Upload"],"sources":["../../../../packages/components/upload/index.tsx"],"sourcesContent":["import Upload from \"./upload\";\n\nexport default Upload;\n"],"mappings":";AAEA,IAAA,wCAAeA"}

package/lib/cjs/components/upload/renderFile.js

@@ -0,0 +1,99 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+const require_index = require("../icon/index.js");
+const require_utils = require("../../js/utils.js");
+const require_index$1 = require("../utils/helpericon/index.js");
+const require_type = require("../../js/usePreview/type.js");
+const require_index$2 = require("../image/index.js");
+let _Users_iann_codes_ioca_react_node_modules__pnpm_radash_12_1_1_node_modules_radash_dist_esm_index_mjs = require("/Users/iann/codes/ioca-react/node_modules/.pnpm/radash@12.1.1/node_modules/radash/dist/esm/index.mjs");
+let _ricons_material = require("@ricons/material");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_easy_sort = require("react-easy-sort");
+react_easy_sort = require_runtime.__toESM(react_easy_sort);
+//#region packages/components/upload/renderFile.tsx
+const ListContainer = (props) => {
+	const { sortable, onSortEnd, itemProps, ...restProps } = props;
+	const customProps = {
+		className: "i-upload-list",
+		onClick: (e) => {
+			e.stopPropagation();
+			e.preventDefault();
+		}
+	};
+	if (!sortable) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...customProps,
+		...restProps
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_easy_sort.default, {
+		draggedItemClassName: "i-upload-item-dragged",
+		onSortEnd,
+		...customProps,
+		...restProps
+	});
+};
+const FileListItem = (props) => {
+	const { ref, mode, index, file, renderItem, onRemove, onPreview } = props;
+	if (!file) return "";
+	const { id, name, size, url, src } = file;
+	const type = require_utils.getFileType(name, file.type);
+	if (renderItem) return renderItem(file, index);
+	const CloseBtn = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
+		active: true,
+		className: "i-upload-delete",
+		onClick: (e) => {
+			e.stopPropagation();
+			e.preventDefault();
+			onRemove(index);
+		}
+	});
+	switch (mode) {
+		case "card":
+			let node = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
+			switch (type) {
+				case require_type.TFileType.IMAGE:
+					node = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.default, {
+						lazyload: true,
+						src: url || src,
+						fit: "cover",
+						onMouseDown: (e) => e.preventDefault()
+					});
+					break;
+				case require_type.TFileType.VIDEO:
+					node = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
+						src: url || src,
+						preload: "none"
+					});
+					break;
+				default:
+					node = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, { icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.ListAltRound, {}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "i-upload-file-name",
+						children: (0, _Users_iann_codes_ioca_react_node_modules__pnpm_radash_12_1_1_node_modules_radash_dist_esm_index_mjs.title)(name)
+					})] });
+					break;
+			}
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref,
+				title: name,
+				className: "i-upload-item-card",
+				onClick: () => onPreview?.(index),
+				children: [node, CloseBtn]
+			});
+		default: return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref,
+			className: "i-upload-item",
+			onClick: () => onPreview?.(index),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: name }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
+					className: "i-upload-size",
+					children: require_utils.formatBytes(size ?? 0)
+				}),
+				CloseBtn
+			]
+		}, id);
+	}
+};
+//#endregion
+exports.ListContainer = ListContainer;
+exports.default = FileListItem;
+
+//# sourceMappingURL=renderFile.js.map

package/lib/cjs/components/upload/renderFile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderFile.js","names":["SortableContainer","getFileType","Helpericon","TFileType","Image","Icon","ListAltRound","formatBytes"],"sources":["../../../../packages/components/upload/renderFile.tsx"],"sourcesContent":["import { ListAltRound } from \"@ricons/material\";\nimport { title } from \"radash\";\nimport { RefObject } from \"react\";\nimport SortableContainer from \"react-easy-sort\";\nimport { TFileType } from \"../../js/usePreview/type\";\nimport { formatBytes, getFileType } from \"../../js/utils\";\nimport Icon from \"../icon\";\nimport Image from \"../image\";\nimport Helpericon from \"../utils/helpericon\";\nimport { IUploadItem } from \"./type\";\n\nexport const ListContainer = (props) => {\n\tconst { sortable, onSortEnd, itemProps, ...restProps } = props;\n\tconst customProps = {\n\t\tclassName: \"i-upload-list\",\n\t\tonClick: (e) => {\n\t\t\te.stopPropagation();\n\t\t\te.preventDefault();\n\t\t},\n\t};\n\n\tif (!sortable) {\n\t\treturn <div {...customProps} {...restProps} />;\n\t}\n\treturn (\n\t\t<SortableContainer\n\t\t\tdraggedItemClassName='i-upload-item-dragged'\n\t\t\tonSortEnd={onSortEnd}\n\t\t\t{...customProps}\n\t\t\t{...restProps}\n\t\t/>\n\t);\n};\n\nconst FileListItem = (\n\tprops: IUploadItem & { ref?: RefObject<HTMLDivElement | null> }\n) => {\n\tconst { ref, mode, index, file, renderItem, onRemove, onPreview } = props;\n\n\tif (!file) return \"\";\n\n\tconst { id, name, size, url, src } = file;\n\tconst type = getFileType(name, file.type);\n\n\tif (renderItem) {\n\t\treturn renderItem(file, index);\n\t}\n\n\tconst CloseBtn = (\n\t\t<Helpericon\n\t\t\tactive\n\t\t\tclassName='i-upload-delete'\n\t\t\tonClick={(e) => {\n\t\t\t\te.stopPropagation();\n\t\t\t\te.preventDefault();\n\t\t\t\tonRemove(index);\n\t\t\t}}\n\t\t/>\n\t);\n\n\tswitch (mode) {\n\t\tcase \"card\":\n\t\t\tlet node = <></>;\n\n\t\t\tswitch (type) {\n\t\t\t\tcase TFileType.IMAGE:\n\t\t\t\t\tnode = (\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\tlazyload\n\t\t\t\t\t\t\tsrc={url || src}\n\t\t\t\t\t\t\tfit='cover'\n\t\t\t\t\t\t\tonMouseDown={(e) => e.preventDefault()}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t\tbreak;\n\t\t\t\tcase TFileType.VIDEO:\n\t\t\t\t\tnode = <video src={url || src} preload='none' />;\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tnode = (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Icon icon={<ListAltRound />} />\n\t\t\t\t\t\t\t<span className='i-upload-file-name'>\n\t\t\t\t\t\t\t\t{title(name)}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</>\n\t\t\t\t\t);\n\t\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\ttitle={name}\n\t\t\t\t\tclassName='i-upload-item-card'\n\t\t\t\t\tonClick={() => onPreview?.(index)}\n\t\t\t\t>\n\t\t\t\t\t{node}\n\t\t\t\t\t{CloseBtn}\n\t\t\t\t</div>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\tkey={id}\n\t\t\t\t\tclassName='i-upload-item'\n\t\t\t\t\tonClick={() => onPreview?.(index)}\n\t\t\t\t>\n\t\t\t\t\t<span>{name}</span>\n\n\t\t\t\t\t<i className='i-upload-size'>{formatBytes(size ?? 0)}</i>\n\n\t\t\t\t\t{CloseBtn}\n\t\t\t\t</div>\n\t\t\t);\n\t}\n};\n\nexport default FileListItem;\n"],"mappings":";;;;;;;;;;;;AAWA,MAAa,iBAAiB,UAAU;CACvC,MAAM,EAAE,UAAU,WAAW,WAAW,GAAG,cAAc;CACzD,MAAM,cAAc;EACnB,WAAW;EACX,UAAU,MAAM;AACf,KAAE,iBAAiB;AACnB,KAAE,gBAAgB;;EAEnB;AAED,KAAI,CAAC,SACJ,QAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,GAAI;EAAa,GAAI;EAAa,CAAA;AAE/C,QACC,iBAAA,GAAA,kBAAA,KAACA,gBAAAA,SAAD;EACC,sBAAqB;EACV;EACX,GAAI;EACJ,GAAI;EACH,CAAA;;AAIJ,MAAM,gBACL,UACI;CACJ,MAAM,EAAE,KAAK,MAAM,OAAO,MAAM,YAAY,UAAU,cAAc;AAEpE,KAAI,CAAC,KAAM,QAAO;CAElB,MAAM,EAAE,IAAI,MAAM,MAAM,KAAK,QAAQ;CACrC,MAAM,OAAOC,cAAAA,YAAY,MAAM,KAAK,KAAK;AAEzC,KAAI,WACH,QAAO,WAAW,MAAM,MAAM;CAG/B,MAAM,WACL,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,SAAD;EACC,QAAA;EACA,WAAU;EACV,UAAU,MAAM;AACf,KAAE,iBAAiB;AACnB,KAAE,gBAAgB;AAClB,YAAS,MAAM;;EAEf,CAAA;AAGH,SAAQ,MAAR;EACC,KAAK;GACJ,IAAI,OAAO,iBAAA,GAAA,kBAAA,KAAA,kBAAA,UAAA,EAAK,CAAA;AAEhB,WAAQ,MAAR;IACC,KAAKC,aAAAA,UAAU;AACd,YACC,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,SAAD;MACC,UAAA;MACA,KAAK,OAAO;MACZ,KAAI;MACJ,cAAc,MAAM,EAAE,gBAAgB;MACrC,CAAA;AAEH;IACD,KAAKD,aAAAA,UAAU;AACd,YAAO,iBAAA,GAAA,kBAAA,KAAC,SAAD;MAAO,KAAK,OAAO;MAAK,SAAQ;MAAS,CAAA;AAChD;IACD;AACC,YACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACC,iBAAA,GAAA,kBAAA,KAACE,cAAAA,SAAD,EAAM,MAAM,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,cAAD,EAAgB,CAAA,EAAI,CAAA,EAChC,iBAAA,GAAA,kBAAA,KAAC,QAAD;MAAM,WAAU;gIACR,KAAK;MACN,CAAA,CACL,EAAA,CAAA;AAEJ;;AAGF,UACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;IACM;IACL,OAAO;IACP,WAAU;IACV,eAAe,YAAY,MAAM;cAJlC,CAME,MACA,SACI;;EAER,QACC,QACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACM;GAEL,WAAU;GACV,eAAe,YAAY,MAAM;aAJlC;IAMC,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAO,MAAY,CAAA;IAEnB,iBAAA,GAAA,kBAAA,KAAC,KAAD;KAAG,WAAU;eAAiBC,cAAAA,YAAY,QAAQ,EAAE;KAAK,CAAA;IAExD;IACI;KATA,GASA"}

package/lib/cjs/components/upload/upload.js

@@ -0,0 +1,165 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.js");
+const require_index = require("../button/index.js");
+const require_index$1 = require("../icon/index.js");
+const require_utils = require("../../js/utils.js");
+const require_index$2 = require("../../js/usePreview/index.js");
+const require_container = require("../input/container.js");
+const require_renderFile = require("./renderFile.js");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let _Users_iann_codes_ioca_react_node_modules__pnpm_radash_12_1_1_node_modules_radash_dist_esm_index_mjs = require("/Users/iann/codes/ioca-react/node_modules/.pnpm/radash@12.1.1/node_modules/radash/dist/esm/index.mjs");
+let react = require("react");
+let _ricons_material = require("@ricons/material");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_easy_sort = require("react-easy-sort");
+//#region packages/components/upload/upload.tsx
+const Upload = (props) => {
+	const { ref, label, labelInline, value, files = [], initialFiles, placeholder, status = "normal", message, className, style, children, defaultButtonProps, mode = "default", cardSize = "4em", disabled, sortable, limit = props.multiple ? Infinity : 1, multiple, renderItem, shouldUpload = () => true, uploader, onChange, onFilesChange, onUpload, ...restProps } = props;
+	const [fileList, setFileListState] = (0, react.useState)(files);
+	const [uploadMessage, setUploadMessage] = (0, react.useState)(message);
+	const inputRef = (0, react.useRef)(null);
+	const preview = require_index$2.default();
+	const defBtnProps = Object.assign({ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, { icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.DriveFolderUploadOutlined, {}) }), " 上传"] }) }, defaultButtonProps);
+	const trigger = (0, react.useMemo)(() => {
+		if (children) return children;
+		switch (mode) {
+			case "card": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+				className: "i-upload-card-btn color-5",
+				square: true,
+				flat: true,
+				outline: true,
+				disabled,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, { icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.PlusSharp, {}) })
+			});
+			default: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+				...defBtnProps,
+				className: (0, classnames.default)("i-upload-btn", defBtnProps.className),
+				disabled
+			});
+		}
+	}, [mode, children]);
+	const handleChange = (e) => {
+		const files = Array.from(e.target.files || []);
+		const before = fileList;
+		const changed = [];
+		files.map((f) => {
+			const { id, name, size, type } = f;
+			const same = before.find((pf) => {
+				const { name: n, size: s, type: t } = pf;
+				return n === name && s === size && t === type;
+			});
+			const src = URL.createObjectURL(f);
+			Object.assign(f, {
+				id: id ?? (0, _Users_iann_codes_ioca_react_node_modules__pnpm_radash_12_1_1_node_modules_radash_dist_esm_index_mjs.uid)(7),
+				src: src ?? f.name,
+				url: src ?? f.name
+			});
+			!same && changed.push(f);
+		});
+		const after = [...before, ...changed];
+		const last = after.at(-1);
+		const nextFiles = multiple ? after.slice(0, limit) : last ? [last] : [];
+		setFileListState(nextFiles);
+		setUploadMessage(message);
+		onFilesChange?.(nextFiles, changed, e);
+		onChange?.(nextFiles, e);
+		handleUpload(changed);
+		inputRef.current && (inputRef.current.value = "");
+	};
+	const handleRemove = (i) => {
+		const [ ...files] = fileList;
+		const changed = files.splice(i, 1);
+		URL.revokeObjectURL(changed[0]?.src || "");
+		setFileListState(files);
+		onFilesChange?.(files, changed);
+		onChange?.(files);
+		inputRef.current && (inputRef.current.value = "");
+	};
+	const handleUpload = async (files) => {
+		if (!uploader) return;
+		const shouldUploadFiles = files.filter(shouldUpload);
+		const result = Promise.all(shouldUploadFiles.map(uploader));
+		return onUpload?.(result);
+	};
+	const handlePreview = (i) => {
+		preview({
+			items: fileList,
+			initial: i
+		});
+	};
+	const setFileList = (files) => {
+		if (!files) return;
+		setFileListState(files.map((f) => {
+			const file = f;
+			return {
+				...file,
+				id: file.id ?? (0, _Users_iann_codes_ioca_react_node_modules__pnpm_radash_12_1_1_node_modules_radash_dist_esm_index_mjs.uid)(7)
+			};
+		}));
+	};
+	const handleSortEnd = (before, after) => {
+		const [ ...files] = fileList;
+		const nextFiles = require_utils.arrayMove(files, before, after);
+		setFileListState(nextFiles);
+		onChange?.(nextFiles);
+	};
+	(0, react.useEffect)(() => {
+		setUploadMessage(message);
+	}, [status, message]);
+	(0, react.useEffect)(() => {
+		setFileListState(value?.filter?.((file) => !!file.id) ?? []);
+	}, [value]);
+	(0, react.useEffect)(() => {
+		setFileList(initialFiles);
+	}, []);
+	(0, react.useImperativeHandle)(ref, () => ({
+		getFileList: () => fileList,
+		setFileList
+	}), [fileList]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_container.default, {
+		as: "div",
+		label,
+		labelInline,
+		className: (0, classnames.default)("i-input-label-file", className),
+		style,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, classnames.default)("i-upload-inner", { [`i-upload-${mode}`]: mode !== "default" }),
+			style: { ["--upload-card-size"]: cardSize },
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_renderFile.ListContainer, {
+					sortable,
+					onSortEnd: handleSortEnd,
+					children: fileList.map((file, i) => {
+						const node = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_renderFile.default, {
+							index: i,
+							file,
+							mode,
+							renderItem,
+							onRemove: handleRemove,
+							onPreview: handlePreview
+						}, i);
+						if (!sortable) return node;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_easy_sort.SortableItem, { children: node }, i);
+					})
+				}),
+				uploadMessage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "i-upload-message",
+					children: uploadMessage
+				}),
+				fileList.length < limit && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					...restProps,
+					disabled,
+					ref: inputRef,
+					type: "file",
+					className: "i-input-file-hidden",
+					multiple,
+					onChange: handleChange
+				}), trigger] })
+			]
+		})
+	});
+};
+//#endregion
+exports.default = Upload;
+
+//# sourceMappingURL=upload.js.map

package/lib/cjs/components/upload/upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload.js","names":[],"sources":["../../../../packages/components/upload/upload.tsx"],"sourcesContent":["import { DriveFolderUploadOutlined, PlusSharp } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport { uid } from \"radash\";\nimport {\n\tChangeEvent,\n\tCSSProperties,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport { SortableItem } from \"react-easy-sort\";\nimport usePreview from \"../../js/usePreview\";\nimport { TPreviewItem } from \"../../js/usePreview/type\";\nimport { arrayMove } from \"../../js/utils\";\nimport Button from \"../button\";\nimport Icon from \"../icon\";\nimport InputContainer from \"../input/container\";\nimport \"./index.css\";\nimport FileListItem, { ListContainer } from \"./renderFile\";\nimport { IFile, IUpload } from \"./type\";\n\nconst Upload = (props: IUpload) => {\n\tconst {\n\t\tref,\n\t\tlabel,\n\t\tlabelInline,\n\t\tvalue,\n\t\tfiles = [],\n\t\tinitialFiles,\n\t\tplaceholder,\n\t\tstatus = \"normal\",\n\t\tmessage,\n\t\tclassName,\n\t\tstyle,\n\t\tchildren,\n\t\tdefaultButtonProps,\n\t\tmode = \"default\",\n\t\tcardSize = \"4em\",\n\t\tdisabled,\n\t\tsortable,\n\t\tlimit = props.multiple ? Infinity : 1,\n\t\tmultiple,\n\t\trenderItem,\n\t\tshouldUpload = () => true,\n\t\tuploader,\n\t\tonChange,\n\t\tonFilesChange,\n\t\tonUpload,\n\t\t...restProps\n\t} = props;\n\n\tconst [fileList, setFileListState] = useState(files);\n\tconst [uploadMessage, setUploadMessage] = useState(message);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst preview = usePreview();\n\tconst defBtnProps = Object.assign(\n\t\t{\n\t\t\tchildren: (\n\t\t\t\t<>\n\t\t\t\t\t<Icon icon={<DriveFolderUploadOutlined />} /> 上传\n\t\t\t\t</>\n\t\t\t),\n\t\t},\n\t\tdefaultButtonProps,\n\t);\n\n\tconst trigger = useMemo(() => {\n\t\tif (children) return children;\n\n\t\tswitch (mode) {\n\t\t\tcase \"card\":\n\t\t\t\treturn (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName='i-upload-card-btn color-5'\n\t\t\t\t\t\tsquare\n\t\t\t\t\t\tflat\n\t\t\t\t\t\toutline\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon icon={<PlusSharp />} />\n\t\t\t\t\t</Button>\n\t\t\t\t);\n\t\t\tdefault:\n\t\t\t\treturn (\n\t\t\t\t\t<Button\n\t\t\t\t\t\t{...defBtnProps}\n\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\t\"i-upload-btn\",\n\t\t\t\t\t\t\tdefBtnProps.className,\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t}\n\t}, [mode, children]);\n\n\tconst handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n\t\tconst files = Array.from(e.target.files || []) as IFile[];\n\t\tconst before = fileList;\n\t\tconst changed: IFile[] = [];\n\n\t\tfiles.map((f) => {\n\t\t\tconst { id, name, size, type } = f;\n\t\t\tconst same = before.find((pf) => {\n\t\t\t\tconst { name: n, size: s, type: t } = pf;\n\t\t\t\treturn n === name && s === size && t === type;\n\t\t\t});\n\t\t\tconst src = URL.createObjectURL(f);\n\n\t\t\tObject.assign(f, {\n\t\t\t\tid: id ?? uid(7),\n\t\t\t\tsrc: src ?? f.name,\n\t\t\t\turl: src ?? f.name,\n\t\t\t});\n\t\t\t!same && changed.push(f);\n\t\t});\n\n\t\tconst after = [...before, ...changed];\n\t\tconst last = after.at(-1);\n\t\tconst nextFiles = multiple ? after.slice(0, limit) : last ? [last] : [];\n\n\t\tsetFileListState(nextFiles);\n\t\tsetUploadMessage(message);\n\n\t\tonFilesChange?.(nextFiles, changed, e);\n\t\tonChange?.(nextFiles, e);\n\n\t\thandleUpload(changed);\n\t\tinputRef.current && (inputRef.current.value = \"\");\n\t};\n\n\tconst handleRemove = (i: number) => {\n\t\tconst [...files] = fileList;\n\n\t\tconst changed = files.splice(i, 1);\n\t\tURL.revokeObjectURL(changed[0]?.src || \"\");\n\n\t\tsetFileListState(files);\n\t\tonFilesChange?.(files, changed);\n\t\tonChange?.(files);\n\n\t\tinputRef.current && (inputRef.current.value = \"\");\n\t};\n\n\tconst handleUpload = async (files: IFile[]) => {\n\t\tif (!uploader) return;\n\n\t\tconst shouldUploadFiles = files.filter(shouldUpload);\n\n\t\tconst result = Promise.all(shouldUploadFiles.map(uploader));\n\n\t\treturn onUpload?.(result);\n\t};\n\n\tconst handlePreview = (i: number) => {\n\t\tpreview({ items: fileList as TPreviewItem[], initial: i });\n\t};\n\n\tconst setFileList = (files?: IFile[] | File[]) => {\n\t\tif (!files) return;\n\n\t\tsetFileListState(\n\t\t\tfiles.map((f: IFile | File) => {\n\t\t\t\tconst file = f as IFile;\n\t\t\t\treturn { ...file, id: file.id ?? uid(7) };\n\t\t\t}),\n\t\t);\n\t};\n\n\tconst handleSortEnd = (before: number, after: number) => {\n\t\tconst [...files] = fileList;\n\n\t\tconst nextFiles = arrayMove(files, before, after);\n\t\tsetFileListState(nextFiles);\n\t\tonChange?.(nextFiles);\n\t};\n\n\tuseEffect(() => {\n\t\tsetUploadMessage(message);\n\t}, [status, message]);\n\n\tuseEffect(() => {\n\t\tsetFileListState(value?.filter?.((file: IFile) => !!file.id) ?? []);\n\t}, [value]);\n\n\tuseEffect(() => {\n\t\tsetFileList(initialFiles);\n\t}, []);\n\n\tuseImperativeHandle(\n\t\tref,\n\t\t() => ({\n\t\t\tgetFileList: () => fileList,\n\n\t\t\tsetFileList,\n\t\t}),\n\t\t[fileList],\n\t);\n\n\treturn (\n\t\t<InputContainer\n\t\t\tas='div'\n\t\t\tlabel={label}\n\t\t\tlabelInline={labelInline}\n\t\t\tclassName={classNames(\"i-input-label-file\", className)}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={classNames(\"i-upload-inner\", {\n\t\t\t\t\t[`i-upload-${mode}`]: mode !== \"default\",\n\t\t\t\t})}\n\t\t\t\tstyle={{ [\"--upload-card-size\"]: cardSize } as CSSProperties}\n\t\t\t>\n\t\t\t\t<ListContainer sortable={sortable} onSortEnd={handleSortEnd}>\n\t\t\t\t\t{fileList.map((file: IFile, i: number) => {\n\t\t\t\t\t\tconst node = (\n\t\t\t\t\t\t\t<FileListItem\n\t\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\t\tindex={i}\n\t\t\t\t\t\t\t\tfile={file}\n\t\t\t\t\t\t\t\tmode={mode}\n\t\t\t\t\t\t\t\trenderItem={renderItem}\n\t\t\t\t\t\t\t\tonRemove={handleRemove}\n\t\t\t\t\t\t\t\tonPreview={handlePreview}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tif (!sortable) return node;\n\n\t\t\t\t\t\treturn <SortableItem key={i}>{node}</SortableItem>;\n\t\t\t\t\t})}\n\t\t\t\t</ListContainer>\n\n\t\t\t\t{uploadMessage && (\n\t\t\t\t\t<span className='i-upload-message'>{uploadMessage}</span>\n\t\t\t\t)}\n\n\t\t\t\t{fileList.length < limit && (\n\t\t\t\t\t<label>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t{...restProps}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\tref={inputRef}\n\t\t\t\t\t\t\ttype='file'\n\t\t\t\t\t\t\tclassName='i-input-file-hidden'\n\t\t\t\t\t\t\tmultiple={multiple}\n\t\t\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{trigger}\n\t\t\t\t\t</label>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</InputContainer>\n\t);\n};\n\nexport default Upload;\n"],"mappings":""}

package/lib/cjs/components/utils/empty/index.js

@@ -0,0 +1,17 @@
+const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let _ricons_material = require("@ricons/material");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/utils/empty/index.tsx
+function Empty(props) {
+	const { className, ...restProps } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.InboxTwotone, {
+		className: (0, classnames.default)("i-empty", className),
+		...restProps
+	});
+}
+//#endregion
+exports.default = Empty;
+
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/utils/empty/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../packages/components/utils/empty/index.tsx"],"sourcesContent":["import { InboxTwotone } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport \"./index.css\";\n\nexport default function Empty(props) {\n\tconst { className, ...restProps } = props;\n\n\treturn (\n\t\t<InboxTwotone\n\t\t\tclassName={classNames(\"i-empty\", className)}\n\t\t\t{...restProps}\n\t\t/>\n\t);\n}\n"],"mappings":""}

package/lib/cjs/components/utils/helpericon/helpericon.js

@@ -0,0 +1,24 @@
+const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
+const require_index = require("../../icon/index.js");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let _Users_iann_codes_ioca_react_node_modules__pnpm_radash_12_1_1_node_modules_radash_dist_esm_index_mjs = require("/Users/iann/codes/ioca-react/node_modules/.pnpm/radash@12.1.1/node_modules/radash/dist/esm/index.mjs");
+let react = require("react");
+let _ricons_material = require("@ricons/material");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/components/utils/helpericon/helpericon.tsx
+const Helpericon = (props) => {
+	const { as = "a", active, className, icon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ricons_material.CloseRound, {}), ...restProps } = props;
+	if (!active) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
+	return (0, react.createElement)(as, {
+		className: (0, classnames.default)("i-helpericon", className),
+		...restProps
+	}, [(0, react.createElement)(require_index.default, {
+		key: (0, _Users_iann_codes_ioca_react_node_modules__pnpm_radash_12_1_1_node_modules_radash_dist_esm_index_mjs.uid)(3),
+		icon
+	})]);
+};
+//#endregion
+exports.default = Helpericon;
+
+//# sourceMappingURL=helpericon.js.map

package/lib/cjs/components/utils/helpericon/helpericon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpericon.js","names":[],"sources":["../../../../../packages/components/utils/helpericon/helpericon.tsx"],"sourcesContent":["import { CloseRound } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport { uid } from \"radash\";\nimport { createElement } from \"react\";\nimport Icon from \"../../icon\";\nimport \"./index.css\";\nimport { IHelperIcon } from \"./type\";\n\nconst Helpericon = (props: IHelperIcon) => {\n\tconst {\n\t\tas = \"a\",\n\t\tactive,\n\t\tclassName,\n\t\ticon = <CloseRound />,\n\t\t...restProps\n\t} = props;\n\n\tif (!active) return <></>;\n\n\treturn createElement(\n\t\tas,\n\t\t{\n\t\t\tclassName: classNames(\"i-helpericon\", className),\n\t\t\t...restProps,\n\t\t},\n\t\t[\n\t\t\tcreateElement(Icon, {\n\t\t\t\tkey: uid(3),\n\t\t\t\ticon,\n\t\t\t}),\n\t\t]\n\t);\n};\n\nexport default Helpericon;\n"],"mappings":""}