@_tc/template-core 0.0.1-bate.5 → 0.0.1-bate.50

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/react/ui/components/Upload/Upload.d.ts

@@ -0,0 +1,13 @@
+import type { ChangeEvent, ReactNode, RefObject } from "react";
+export interface FileUploadProps {
+    inputRef?: RefObject<HTMLInputElement | null>;
+    accept?: string;
+    multiple?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    selectLabel: ReactNode;
+    labelClassName?: string;
+    showClear?: boolean;
+    onClear?: () => void;
+    clearLabel?: ReactNode;
+}
+export declare function FileUpload({ inputRef, accept, multiple, onChange, selectLabel, labelClassName, showClear, onClear, clearLabel, }: FileUploadProps): import("react/jsx-runtime").JSX.Element;

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,2 @@
+export * from "./ImageUpload";
+export * from "./Upload";

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.d.ts

@@ -0,0 +1,34 @@
+declare const Breadcrumb: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    separator?: React.ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;
+declare const BreadcrumbList: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & import("react").RefAttributes<HTMLOListElement>>;
+declare const BreadcrumbItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+declare const BreadcrumbLink: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    asChild?: boolean;
+} & import("react").RefAttributes<HTMLAnchorElement>>;
+declare const BreadcrumbPage: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    active?: boolean;
+    onClose?: () => void;
+    closable?: boolean;
+} & import("react").RefAttributes<HTMLSpanElement>>;
+declare const BreadcrumbSeparator: {
+    ({ children, className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const BreadcrumbEllipsis: {
+    ({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, };
+export interface BreadcrumbItemData {
+    label: string;
+    desctext?: string;
+    id: string | number;
+    path?: string;
+    active?: boolean;
+    closable?: boolean;
+}
+export interface SimpleBreadcrumbProps {
+    className?: string;
+}
+export declare function SimpleBreadcrumb({ className }: SimpleBreadcrumbProps): import("react/jsx-runtime").JSX.Element;

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 @@
+export * from "./breadcrumb";

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.d.ts

@@ -0,0 +1,42 @@
+import type { RefObject } from "react";
+export type DropdownPlacement = "bottom-end" | "bottom-start" | "left-start" | "top-end" | "top-start" | "right-start" | "right-end";
+export type DropdownPosition = {
+    top: number;
+    left?: number;
+    right?: number;
+    width?: number;
+};
+export type DropdownPositioningContext = {
+    anchorRect: DOMRect;
+    contentRect?: DOMRect;
+    containerRect?: DOMRect;
+    viewportWidth: number;
+    viewportHeight: number;
+    placement: DropdownPlacement;
+    offset: number;
+    matchAnchorWidth: boolean;
+};
+export type DropdownPositioningStrategy = (context: DropdownPositioningContext) => DropdownPosition;
+export type UseDropdownPositioningOptions = {
+    open: boolean;
+    anchorRef: RefObject<HTMLElement | null>;
+    contentRef: RefObject<HTMLElement | null>;
+    placement?: DropdownPlacement;
+    offset?: number;
+    matchAnchorWidth?: boolean;
+    strategy?: DropdownPositioningStrategy;
+    estimateSize?: () => {
+        width?: number;
+        height?: number;
+    };
+    watchDeps?: readonly unknown[];
+    containerRef?: RefObject<HTMLElement | null>;
+    positionMode?: "fixed" | "absolute";
+};
+export type UseDropdownPositioningResult = {
+    position: DropdownPosition;
+    ready: boolean;
+    updatePosition: () => void;
+};
+export declare const getDefaultDropdownPosition: DropdownPositioningStrategy;
+export declare function useDropdownPositioning({ open, anchorRef, contentRef, placement, offset, matchAnchorWidth, strategy, estimateSize, watchDeps, containerRef, positionMode, }: UseDropdownPositioningOptions): UseDropdownPositioningResult;

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.d.ts

@@ -0,0 +1,20 @@
+interface IParams<T> {
+    ref: React.ForwardedRef<T>;
+    defaultValue?: string;
+    controlledValue?: string;
+    disabled?: boolean;
+}
+export declare const useInputController: <T>(params: IParams<T>) => {
+    setRefs: (node: T | null) => void;
+    setIsFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    setInternalValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+    controllerRef: import("react").RefObject<T | null>;
+    isControlledRef: import("react").RefObject<boolean>;
+    isControlled: boolean;
+    isFocused: boolean;
+    currentLength: number;
+    hasValue: boolean;
+    internalValue: string;
+    value: string | undefined;
+};
+export {};

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 };

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

@@ -0,0 +1,35 @@
+export * from "./breadcrumb";
+export * from "./Button";
+export * from "./Card";
+export * from "./Checkbox";
+export * from "./ConfirmDialog";
+export * from "./DataTable";
+export * from "./Drawer";
+export * from "./Dropdown";
+export * from "./Popup";
+export * from "./Form";
+export * from "./hooks/useDropdownPositioning";
+export * from "./ImagePreview";
+export * from "./Input";
+export * from "./InputNumber";
+export * from "./Label";
+export * from "./Layout";
+export * from "./Loading";
+export * from "./Menu";
+export * from "./Message";
+export * from "./Modal";
+export * from "./Notification";
+export * from "./Overlay";
+export * from "./Pagination";
+export * from "./Radio";
+export * from "./Search";
+export * from "./Select";
+export * from "./Skeleton";
+export * from "./Switch";
+export * from "./table";
+export * from "./TableSearch";
+export * from "./Tabs";
+export * from "./Textarea";
+export * from "./Tooltip";
+export * from "./TreeSelect";
+export * from "./Upload";