@_tc/template-core 0.0.1-bate.46 → 0.0.1-bate.48

package/fe/packages/react/ui/components/TreeSelect/TreeSelect.js

@@ -0,0 +1,190 @@
+import { cn } from "../../lib/utils.js";
+import { Button } from "../Button/Button.js";
+import "../Button/index.js";
+import { Checkbox } from "../Checkbox/Checkbox.js";
+import "../Checkbox/index.js";
+import { useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronRight } from "lucide-react";
+//#region packages/react/ui/components/TreeSelect/TreeSelect.tsx
+function TreeSelect({ data, value = [], onChange, labelField = "name", checkable = true, className }) {
+	const [expandedKeys, setExpandedKeys] = useState(/* @__PURE__ */ new Set());
+	const { nodeMap, parentMap } = useMemo(() => {
+		const nodeM = /* @__PURE__ */ new Map();
+		const parentM = /* @__PURE__ */ new Map();
+		const traverse = (nodes, parentId) => {
+			nodes.forEach((node) => {
+				nodeM.set(node.id, node);
+				parentM.set(node.id, parentId);
+				if (node.children && node.children.length > 0) traverse(node.children, node.id);
+			});
+		};
+		traverse(data, null);
+		return {
+			nodeMap: nodeM,
+			parentMap: parentM
+		};
+	}, [data]);
+	const getDescendantIds = useCallback((node) => {
+		const ids = [];
+		const traverse = (n) => {
+			if (n.children && n.children.length > 0) n.children.forEach((child) => {
+				ids.push(child.id);
+				traverse(child);
+			});
+		};
+		traverse(node);
+		return ids;
+	}, []);
+	const updateParentSelection = useCallback((checkedSet) => {
+		const traverseUp = (nodeId) => {
+			const parentId = parentMap.get(nodeId);
+			if (parentId === void 0 || parentId === null) return;
+			const parentNode = nodeMap.get(parentId);
+			if (!parentNode || !parentNode.children) return;
+			const childIds = parentNode.children.map((child) => child.id);
+			if (childIds.filter((id) => checkedSet.has(id)).length === childIds.length) checkedSet.add(parentId);
+			else checkedSet.delete(parentId);
+			traverseUp(parentId);
+		};
+		checkedSet.forEach((id) => traverseUp(id));
+	}, [nodeMap, parentMap]);
+	const toggleExpand = useCallback((nodeId) => {
+		setExpandedKeys((prev) => {
+			const newSet = new Set(prev);
+			if (newSet.has(nodeId)) newSet.delete(nodeId);
+			else newSet.add(nodeId);
+			return newSet;
+		});
+	}, []);
+	const getIndeterminateKeys = useCallback((checkedSet) => {
+		const indeterminateKeys = [];
+		const getDescendantCount = (node) => {
+			if (!node.children || node.children.length === 0) return {
+				total: 1,
+				checked: checkedSet.has(node.id) ? 1 : 0
+			};
+			return node.children.reduce((acc, child) => {
+				const childResult = getDescendantCount(child);
+				return {
+					total: acc.total + childResult.total,
+					checked: acc.checked + childResult.checked
+				};
+			}, {
+				total: 0,
+				checked: 0
+			});
+		};
+		const traverse = (nodes) => {
+			nodes.forEach((node) => {
+				if (node.children && node.children.length > 0) {
+					const { total, checked } = getDescendantCount(node);
+					if (checked > 0 && checked < total) indeterminateKeys.push(node.id);
+					traverse(node.children);
+				}
+			});
+		};
+		traverse(data);
+		return indeterminateKeys;
+	}, [data]);
+	const toggleCheck = useCallback((node) => {
+		if (!checkable || !onChange) return;
+		const isChecked = value.includes(node.id);
+		const nextChecked = new Set(value);
+		const descendantIds = getDescendantIds(node);
+		if (isChecked) {
+			nextChecked.delete(node.id);
+			descendantIds.forEach((id) => nextChecked.delete(id));
+		} else {
+			nextChecked.add(node.id);
+			descendantIds.forEach((id) => nextChecked.add(id));
+		}
+		updateParentSelection(nextChecked);
+		const indeterminateKeys = getIndeterminateKeys(nextChecked);
+		onChange({
+			checked: Array.from(nextChecked),
+			indeterminate: indeterminateKeys
+		});
+	}, [
+		value,
+		onChange,
+		checkable,
+		getDescendantIds,
+		updateParentSelection,
+		getIndeterminateKeys
+	]);
+	const isNodeChecked = useCallback((nodeId) => {
+		return value.includes(nodeId);
+	}, [value]);
+	const isNodeIndeterminate = useCallback((node) => {
+		if (!node.children || node.children.length === 0) return false;
+		const getDescendantCount = (n) => {
+			if (!n.children || n.children.length === 0) return {
+				total: 1,
+				checked: value.includes(n.id) ? 1 : 0
+			};
+			return n.children.reduce((acc, child) => {
+				const childResult = getDescendantCount(child);
+				return {
+					total: acc.total + childResult.total,
+					checked: acc.checked + childResult.checked
+				};
+			}, {
+				total: 0,
+				checked: 0
+			});
+		};
+		const { total, checked } = getDescendantCount(node);
+		return checked > 0 && checked < total;
+	}, [value]);
+	function renderTreeNode(node, level = 0) {
+		const hasChildren = node.children && node.children.length > 0;
+		const isExpanded = expandedKeys.has(node.id);
+		const isChecked = isNodeChecked(node.id);
+		const isIndeterminate = isNodeIndeterminate(node);
+		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-center gap-2 py-2 px-2 hover:bg-muted/50 rounded-md cursor-pointer transition-colors", "group"),
+			style: { paddingLeft: `${level * 20 + 8}px` },
+			children: [
+				hasChildren ? /* @__PURE__ */ jsx(Button, {
+					variant: "text",
+					type: "button",
+					onClick: (e) => {
+						e.stopPropagation();
+						toggleExpand(node.id);
+					},
+					className: "flex-shrink-0 p-0.5 hover:bg-muted rounded",
+					children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+				}) : /* @__PURE__ */ jsx("span", { className: "w-5" }),
+				checkable && /* @__PURE__ */ jsx(Checkbox, {
+					className: "flex-shrink-0",
+					checked: isChecked,
+					indeterminate: isIndeterminate,
+					"aria-label": `Select ${node.name}`,
+					onChange: (_, e) => {
+						e.stopPropagation();
+						toggleCheck(node);
+					}
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "flex-1 text-sm select-none",
+					onClick: () => {
+						if (hasChildren) toggleExpand(node.id);
+						else toggleCheck(node);
+					},
+					children: labelField === "desctext" ? node.desctext || node.name : node.name
+				})
+			]
+		}), hasChildren && isExpanded && /* @__PURE__ */ jsx("div", { children: node.children.map((child) => renderTreeNode(child, level + 1)) })] }, node.id);
+	}
+	if (!data || data.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: cn("tc-ui-tree-select p-8 text-center text-sm text-muted-foreground", className),
+		children: "No data"
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("tc-ui-tree-select border border-border rounded-lg p-2 max-h-[400px] overflow-y-auto", className),
+		children: data.map((node) => renderTreeNode(node))
+	});
+}
+//#endregion
+export { TreeSelect };

package/fe/packages/react/ui/components/TreeSelect/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./TreeSelect";
+//# sourceMappingURL=index.d.ts.map

package/fe/packages/react/ui/components/TreeSelect/index.js

@@ -0,0 +1,2 @@
+import { TreeSelect } from "./TreeSelect.js";
+export { TreeSelect };

package/fe/packages/react/ui/components/Upload/ImageUpload.js

@@ -0,0 +1,101 @@
+import { useI18n } from "../../i18n/useI18n.js";
+import "../../i18n/index.js";
+import { Button } from "../Button/Button.js";
+import "../Button/index.js";
+import { FileUpload } from "./Upload.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Camera, X } from "lucide-react";
+//#region packages/react/ui/components/Upload/ImageUpload.tsx
+function ImageUpload({ accept = ".jpg,.png", maxCount = 1, value, onChange, beforeChange }) {
+	const t = useI18n();
+	const inputRef = useRef(null);
+	const [internalUrls, setInternalUrls] = useState([]);
+	const internalUrlsRef = useRef([]);
+	const urls = value ?? internalUrls;
+	const setUrls = onChange ?? setInternalUrls;
+	const mAccept = useMemo(() => {
+		return accept.split(",").map((item) => item.trim().replace(/\./g, "")).filter(Boolean).map((a) => `image/${a}`).join(", ");
+	}, [accept]);
+	const handleFileChange = (e) => {
+		const files = e.target.files;
+		if (!files || files.length === 0) return;
+		const newUrls = [];
+		const fileArray = Array.from(files);
+		const remainingCount = maxCount - urls.length;
+		fileArray.forEach((file) => {
+			if (newUrls.length < remainingCount) {
+				if (beforeChange) {
+					if (beforeChange(file) === false) return;
+				}
+				const url = URL.createObjectURL(file);
+				newUrls.push(url);
+			}
+		});
+		if (maxCount > 1) setUrls([...urls, ...newUrls]);
+		else {
+			urls.forEach((url) => URL.revokeObjectURL(url));
+			setUrls(newUrls.slice(0, 1));
+		}
+		if (inputRef.current) inputRef.current.value = "";
+	};
+	const handleRemove = (index) => {
+		const urlToRemove = urls[index];
+		URL.revokeObjectURL(urlToRemove);
+		setUrls(urls.filter((_, i) => i !== index));
+	};
+	useEffect(() => {
+		if (onChange) {
+			internalUrlsRef.current = [];
+			return;
+		}
+		internalUrlsRef.current.filter((url) => !internalUrls.includes(url)).forEach((url) => URL.revokeObjectURL(url));
+		internalUrlsRef.current = internalUrls;
+	}, [onChange, internalUrls]);
+	useEffect(() => {
+		return () => {
+			internalUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));
+			internalUrlsRef.current = [];
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "tc-ui-image-upload flex flex-wrap gap-3",
+		children: [urls.map((url, index) => /* @__PURE__ */ jsxs("div", {
+			className: "relative h-24 w-24 overflow-hidden rounded-lg border border-border/60 bg-card group cursor-pointer shadow-[inset_0_1px_0_hsl(var(--foreground)/0.04)] transition-colors duration-200 hover:border-border/80 active:border-theme/60",
+			children: [/* @__PURE__ */ jsx("img", {
+				src: url,
+				alt: "",
+				className: "w-full h-full object-cover"
+			}), /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 flex items-center justify-center bg-background/0 transition-colors duration-200 group-hover:bg-background/55",
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "text",
+					type: "button",
+					onClick: (e) => {
+						e.stopPropagation();
+						handleRemove(index);
+					},
+					className: "rounded-full bg-destructive p-1.5 text-destructive-foreground opacity-0 shadow-[var(--shadow-accent)] transition-[background-color,opacity] duration-200 hover:bg-destructive/90 active:bg-destructive/80 focus-visible:ring-destructive group-hover:opacity-100",
+					"aria-label": t("components.upload.deleteImage"),
+					title: t("components.upload.deleteImage"),
+					children: /* @__PURE__ */ jsx(X, { size: 16 })
+				})
+			})]
+		}, index)), urls.length < maxCount && /* @__PURE__ */ jsx(FileUpload, {
+			inputRef,
+			accept: mAccept,
+			multiple: maxCount > 1,
+			onChange: handleFileChange,
+			labelClassName: "h-24 w-24 cursor-pointer rounded-lg border-0 p-0 focus-within:ring-2 focus-within:ring-theme/25",
+			selectLabel: /* @__PURE__ */ jsxs("div", {
+				className: "flex h-full w-full flex-col items-center justify-center gap-1 rounded-lg border border-dashed border-border/60 bg-card text-muted-foreground transition-colors duration-200 hover:border-border/80 hover:bg-muted/50 hover:text-foreground active:bg-muted/70",
+				children: [/* @__PURE__ */ jsx(Camera, { size: 24 }), /* @__PURE__ */ jsx("span", {
+					className: "text-xs",
+					children: t("components.upload.upload")
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { ImageUpload };

package/fe/packages/{ui/react → react/ui}/components/Upload/Upload.d.ts

@@ -1,4 +1,4 @@
-import type { ChangeEvent, ReactNode, RefObject } from 'react';
+import type { ChangeEvent, ReactNode, RefObject } from "react";
 export interface FileUploadProps {
     /**
      * 文件 input 的 ref，用于父组件重置 value 等

package/fe/packages/react/ui/components/Upload/Upload.js

@@ -0,0 +1,29 @@
+import { Button } from "../Button/Button.js";
+import "../Button/index.js";
+import { Input } from "../Input/Input.js";
+import "../Input/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/Upload/Upload.tsx
+function FileUpload({ inputRef, accept = "*", multiple, onChange, selectLabel, labelClassName, showClear, onClear, clearLabel }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "tc-ui-file-upload flex items-center gap-3",
+		children: [/* @__PURE__ */ jsxs("label", {
+			className: labelClassName ?? "flex h-10 items-center gap-2 rounded-lg border border-border/60 bg-card px-4 py-2 text-sm text-card-foreground cursor-pointer transition-colors duration-200 hover:border-border/80 hover:bg-muted/50 active:bg-muted/70 focus-within:border-theme focus-within:ring-2 focus-within:ring-theme/25",
+			children: [/* @__PURE__ */ jsx(Input, {
+				ref: inputRef,
+				type: "file",
+				accept,
+				multiple,
+				className: "hidden",
+				onChange: (_, e) => onChange?.(e)
+			}), selectLabel]
+		}), showClear && onClear && /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "link",
+			onClick: onClear,
+			children: clearLabel
+		})]
+	});
+}
+//#endregion
+export { FileUpload };

package/fe/packages/react/ui/components/Upload/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ImageUpload";
+export * from "./Upload";
+//# sourceMappingURL=index.d.ts.map

package/fe/packages/react/ui/components/Upload/index.js

@@ -0,0 +1,3 @@
+import { FileUpload } from "./Upload.js";
+import { ImageUpload } from "./ImageUpload.js";
+export { FileUpload, ImageUpload };

package/fe/packages/react/ui/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,155 @@
+import { useI18n } from "../../i18n/useI18n.js";
+import "../../i18n/index.js";
+import { useBreadcrumb } from "../../../hooks/useBreadcrumb.js";
+import { useLanguage } from "../../../hooks/useLanguage.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../Button/Button.js";
+import "../Button/index.js";
+import { forwardRef } from "react";
+import { useNavigate } from "react-router-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+//#region packages/react/ui/components/breadcrumb/breadcrumb.tsx
+var Breadcrumb = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("nav", {
+	ref,
+	"aria-label": "breadcrumb",
+	className: cn("tc-ui-breadcrumb", className),
+	...props
+}));
+Breadcrumb.displayName = "Breadcrumb";
+var BreadcrumbList = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("ol", {
+	ref,
+	className: cn("tc-ui-breadcrumb-list flex items-center gap-3 flex-wrap", className),
+	...props
+}));
+BreadcrumbList.displayName = "BreadcrumbList";
+var BreadcrumbItem = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", {
+	ref,
+	className: cn("tc-ui-breadcrumb-item inline-flex items-center", className),
+	...props
+}));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+var BreadcrumbLink = forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("a", {
+		ref,
+		className: cn("tc-ui-breadcrumb-link transition-colors hover:text-foreground", className),
+		...props
+	});
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+var BreadcrumbPage = forwardRef(({ className, active, onClose, closable = true, children, ...props }, ref) => {
+	const t = useI18n();
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		role: "link",
+		"aria-disabled": "true",
+		"aria-current": "page",
+		className: cn("tc-ui-breadcrumb-page inline-flex items-center gap-2 px-4 py-2 rounded-lg border transition-all duration-200 text-sm", active ? "bg-breadcrumb-active-bg text-breadcrumb-active-text border-breadcrumb-active-bg shadow-sm" : "bg-background text-breadcrumb-text border-breadcrumb-border hover:border-gray-400", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "font-normal",
+			children
+		}), onClose && closable && /* @__PURE__ */ jsx(Button, {
+			variant: "text",
+			type: "button",
+			onClick: (e) => {
+				e.stopPropagation();
+				onClose();
+			},
+			className: "inline-flex items-center justify-center hover:opacity-70 transition-opacity",
+			"aria-label": t("components.breadcrumb.close"),
+			children: /* @__PURE__ */ jsxs("svg", {
+				width: "16",
+				height: "16",
+				viewBox: "0 0 16 16",
+				fill: "none",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: [/* @__PURE__ */ jsxs("g", {
+					clipPath: "url(#clip0_228_519)",
+					children: [/* @__PURE__ */ jsx("circle", {
+						cx: "8",
+						cy: "8",
+						r: "6.66667",
+						stroke: "currentColor",
+						strokeWidth: "1"
+					}), /* @__PURE__ */ jsx("path", {
+						d: "M9.66669 6.33302L6.33337 9.66634M6.33336 6.33301L9.66668 9.66633",
+						stroke: "currentColor",
+						strokeWidth: "1",
+						strokeLinecap: "round"
+					})]
+				}), /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {
+					id: "clip0_228_519",
+					children: /* @__PURE__ */ jsx("rect", {
+						width: "16",
+						height: "16",
+						fill: "white"
+					})
+				}) })]
+			})
+		})]
+	});
+});
+BreadcrumbPage.displayName = "BreadcrumbPage";
+var BreadcrumbSeparator = ({ children, className, ...props }) => /* @__PURE__ */ jsx("li", {
+	role: "presentation",
+	"aria-hidden": "true",
+	className: cn("tc-ui-breadcrumb-separator [&>svg]:size-3.5", className),
+	...props,
+	children: children ?? /* @__PURE__ */ jsx(ChevronRight, {})
+});
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+var BreadcrumbEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs("span", {
+	role: "presentation",
+	"aria-hidden": "true",
+	"aria-label": "More",
+	className: cn("tc-ui-breadcrumb-ellipsis flex h-9 w-9 items-center justify-center", className),
+	...props,
+	children: [/* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: "More"
+	})]
+});
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+function SimpleBreadcrumb({ className }) {
+	const { language } = useLanguage();
+	const navigate = useNavigate();
+	const { items, setActiveItem, removeItem } = useBreadcrumb();
+	const handleBreadcrumbClick = (id) => {
+		const item = items.find((item) => item.id === id);
+		if (item?.path) {
+			navigate(item.path);
+			setActiveItem(id);
+		}
+	};
+	const handleBreadcrumbClose = (id) => {
+		const isActive = items.find((item) => item.id === id)?.active;
+		const remainingItems = items.filter((item) => item.id !== id);
+		removeItem(id);
+		if (isActive) if (remainingItems.length > 0) {
+			const targetItem = remainingItems.at(-1);
+			const targetPath = targetItem.path;
+			if (targetPath) setTimeout(() => {
+				navigate(targetPath);
+				setActiveItem(targetItem.id);
+			}, 0);
+		} else setTimeout(() => {}, 0);
+	};
+	const getItemLabel = (item) => {
+		return language === "zh-CN" ? item.label : item.desctext || item.label;
+	};
+	return /* @__PURE__ */ jsx(Breadcrumb, {
+		className,
+		children: /* @__PURE__ */ jsx(BreadcrumbList, { children: items.map((item) => /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, {
+			active: item.active,
+			closable: item.closable !== false,
+			onClose: () => handleBreadcrumbClose(item.id),
+			onClick: () => handleBreadcrumbClick(item.id),
+			className: "cursor-pointer",
+			"data-active": item.active ? "true" : void 0,
+			children: getItemLabel(item)
+		}) }, item.id)) })
+	});
+}
+//#endregion
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, SimpleBreadcrumb };

package/fe/packages/react/ui/components/breadcrumb/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./breadcrumb";
+//# sourceMappingURL=index.d.ts.map

package/fe/packages/react/ui/components/breadcrumb/index.js

@@ -0,0 +1,2 @@
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, SimpleBreadcrumb } from "./breadcrumb.js";
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, SimpleBreadcrumb };

package/fe/packages/react/ui/components/hooks/useDropdownPositioning.js

@@ -0,0 +1,121 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+//#region packages/react/ui/components/hooks/useDropdownPositioning.ts
+var HIDDEN_POSITION = {
+	top: -100,
+	left: -100
+};
+var EMPTY_DEPS = [];
+/**
+* 计算弹窗该放在哪。
+*
+* right/left：跟触发元素顶部对齐，往右或往左弹。
+* bottom/top：放在触发元素下方或上方，再按 start/end 对齐。
+*/
+var getDefaultDropdownPosition = ({ anchorRect, contentRect, containerRect, viewportWidth, placement, offset, matchAnchorWidth }) => {
+	const isRight = placement.startsWith("right");
+	const isLeft = placement.startsWith("left");
+	const isTop = placement.startsWith("top");
+	const containerTop = containerRect?.top ?? 0;
+	const containerLeft = containerRect?.left ?? 0;
+	const containerRight = containerRect?.right ?? viewportWidth;
+	const nextPosition = {
+		top: (isRight || isLeft ? anchorRect.top : isTop ? anchorRect.top - (contentRect?.height ?? 0) - offset : anchorRect.bottom + offset) - containerTop,
+		width: matchAnchorWidth ? anchorRect.width : void 0
+	};
+	if (isRight) nextPosition.left = anchorRect.right + offset - containerLeft;
+	else if (isLeft) nextPosition.left = anchorRect.left - (contentRect?.width ?? 0) - offset - containerLeft;
+	else if (placement.endsWith("start")) nextPosition.left = anchorRect.left - containerLeft;
+	else nextPosition.right = containerRight - anchorRect.right;
+	return nextPosition;
+};
+function useDropdownPositioning({ open, anchorRef, contentRef, placement = "bottom-end", offset = 8, matchAnchorWidth = false, strategy = getDefaultDropdownPosition, estimateSize, watchDeps = EMPTY_DEPS, containerRef, positionMode = "fixed" }) {
+	const [position, setPosition] = useState(HIDDEN_POSITION);
+	const [ready, setReady] = useState(false);
+	const getContentRect = useCallback(() => {
+		const measuredRect = contentRef.current?.getBoundingClientRect();
+		if (measuredRect && measuredRect.height > 0) return measuredRect;
+		const estimatedSize = estimateSize?.();
+		if (!estimatedSize) return measuredRect;
+		return new DOMRect(0, 0, estimatedSize.width ?? 0, estimatedSize.height ?? 0);
+	}, [contentRef, estimateSize]);
+	const updatePosition = useCallback(() => {
+		if (!anchorRef.current) return;
+		const anchorRect = anchorRef.current.getBoundingClientRect();
+		const contentRect = getContentRect();
+		const containerRect = positionMode === "absolute" ? containerRef?.current?.getBoundingClientRect() : void 0;
+		const newData = strategy({
+			anchorRect,
+			contentRect: contentRect ?? void 0,
+			containerRect,
+			viewportWidth: window.innerWidth,
+			viewportHeight: window.innerHeight,
+			placement,
+			offset,
+			matchAnchorWidth
+		});
+		setPosition(returnData.current.position = newData);
+		setReady(returnData.current.ready = Boolean(contentRef.current && contentRef.current.getBoundingClientRect().height > 0));
+	}, [
+		anchorRef,
+		contentRef,
+		containerRef,
+		getContentRect,
+		matchAnchorWidth,
+		offset,
+		placement,
+		positionMode,
+		strategy
+	]);
+	useEffect(() => {
+		if (!open) {
+			setPosition(returnData.current.position = HIDDEN_POSITION);
+			setReady(returnData.current.ready = false);
+			return;
+		}
+		const rafId = requestAnimationFrame(() => requestAnimationFrame(updatePosition));
+		return () => cancelAnimationFrame(rafId);
+	}, [open, updatePosition]);
+	useEffect(() => {
+		if (!open) return;
+		const handleUpdate = () => updatePosition();
+		window.addEventListener("scroll", handleUpdate, true);
+		window.addEventListener("resize", handleUpdate);
+		return () => {
+			window.removeEventListener("scroll", handleUpdate, true);
+			window.removeEventListener("resize", handleUpdate);
+		};
+	}, [open, updatePosition]);
+	useEffect(() => {
+		if (!open) return;
+		updatePosition();
+	}, [
+		useMemo(() => watchDeps, [watchDeps]),
+		open,
+		updatePosition
+	]);
+	useEffect(() => {
+		if (!open || !contentRef.current) return;
+		let rafId = 0;
+		const observer = new ResizeObserver(() => {
+			rafId = requestAnimationFrame(() => requestAnimationFrame(updatePosition));
+		});
+		observer.observe(contentRef.current);
+		return () => {
+			observer.disconnect();
+			cancelAnimationFrame(rafId);
+		};
+	}, [
+		contentRef,
+		open,
+		updatePosition
+	]);
+	const returnData = useRef({
+		position,
+		ready,
+		updatePosition
+	});
+	returnData.current.updatePosition = updatePosition;
+	return returnData.current;
+}
+//#endregion
+export { getDefaultDropdownPosition, useDropdownPositioning };

package/fe/packages/react/ui/components/hooks/useInputController.js

@@ -0,0 +1,39 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+//#region packages/react/ui/components/hooks/useInputController.ts
+/**
+* 处理ref & 判断是否受控 & 使用的value & value.length
+*/
+var useInputController = (params) => {
+	const { defaultValue, ref, controlledValue } = params;
+	const [isFocused, setIsFocused] = useState(false);
+	const [internalValue, setInternalValue] = useState(defaultValue || "");
+	const controllerRef = useRef(null);
+	const setRefs = useCallback((node) => {
+		controllerRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const isControlledRef = useRef(false);
+	const isControlled = useMemo(() => {
+		const r = controlledValue !== void 0;
+		isControlledRef.current = r;
+		return r;
+	}, [controlledValue]);
+	const value = isControlled ? controlledValue : internalValue;
+	const hasValue = Boolean(value && String(value).length > 0);
+	return {
+		setRefs,
+		setIsFocused,
+		setInternalValue,
+		controllerRef,
+		isControlledRef,
+		isControlled,
+		isFocused,
+		currentLength: value ? String(value).length : 0,
+		hasValue,
+		internalValue,
+		value
+	};
+};
+//#endregion
+export { useInputController };