@_tc/template-core 0.2.12 → 0.3.1

package/fe/packages/common/number/index.js

@@ -0,0 +1,11 @@
+//#region packages/common/number/index.ts
+var clamp = (value, min, max) => {
+	if (min > max) throw new RangeError("min must be less than or equal to max");
+	return Math.min(Math.max(value, min), max);
+};
+var toFiniteNumber = (value, fallback = 0) => {
+	const numberValue = typeof value === "number" ? value : Number(value);
+	return Number.isFinite(numberValue) ? numberValue : fallback;
+};
+//#endregion
+export { clamp, toFiniteNumber };

package/fe/packages/common/object/filterEmpty.js

@@ -24,5 +24,6 @@ var filterEmptyValue = (value) => {
 function filterEmpty(data) {
 	return filterEmptyValue(data);
 }
+var filtereEmpty = filterEmpty;
 //#endregion
-export { filterEmpty };
+export { filterEmpty, filtereEmpty };

package/fe/packages/common/object/filtereEmpty.js

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

package/fe/packages/common/object/index.js

@@ -0,0 +1,20 @@
+import { filterEmpty, filtereEmpty } from "./filterEmpty.js";
+//#region packages/common/object/index.ts
+var pick = (target, keys) => {
+	const result = {};
+	for (const key of keys) if (key in target) result[key] = target[key];
+	return result;
+};
+var omit = (target, keys) => {
+	const result = { ...target };
+	for (const key of keys) delete result[key];
+	return result;
+};
+var mapValues = (target, mapper) => {
+	const result = {};
+	const keys = Object.keys(target);
+	for (const key of keys) result[key] = mapper(target[key], key);
+	return result;
+};
+//#endregion
+export { filterEmpty, filtereEmpty, mapValues, omit, pick };

package/fe/packages/common/ssr/hydration.d.ts

@@ -0,0 +1,23 @@
+export interface SSRHydrationData<Props = Record<string, unknown>, State = Record<string, unknown>> {
+    props: Props;
+    state: State;
+    meta: SSRPageMeta;
+}
+export interface SSRPageMeta {
+    title?: string;
+    description?: string;
+    renderedAt: number;
+    pathname: string;
+}
+export declare const SSR_DATA_KEY = "__SSR_DATA__";
+declare global {
+    interface Window {
+        [SSR_DATA_KEY]?: SSRHydrationData | string;
+    }
+}
+export declare function serializeHydrationDataScriptContent(data: SSRHydrationData): string;
+export declare function serializeHydrationData(data: SSRHydrationData): string;
+export declare function peekHydrationData<Props = Record<string, unknown>, State = Record<string, unknown>>(): SSRHydrationData<Props, State> | null;
+export declare function clearHydrationData(): void;
+export declare function readHydrationData<Props = Record<string, unknown>, State = Record<string, unknown>>(): SSRHydrationData<Props, State> | null;
+export declare function createHydrationData<Props = Record<string, unknown>, State = Record<string, unknown>>(props: Props, meta: Omit<SSRPageMeta, 'renderedAt'>, state?: State): SSRHydrationData<Props, State>;

package/fe/packages/common/ssr/hydration.js

@@ -0,0 +1,88 @@
+//#region packages/common/ssr/hydration.ts
+/**
+* 全局注水数据的 key
+*/
+var SSR_DATA_KEY = "__SSR_DATA__";
+function getBuffer() {
+	return globalThis.Buffer;
+}
+function encodeUtf8ToBase64(value) {
+	const Buffer = getBuffer();
+	if (Buffer) return Buffer.from(value, "utf-8").toString("base64");
+	const bytes = new TextEncoder().encode(value);
+	let binary = "";
+	bytes.forEach((byte) => {
+		binary += String.fromCharCode(byte);
+	});
+	return btoa(binary);
+}
+function decodeBase64ToUtf8(value) {
+	const Buffer = getBuffer();
+	if (Buffer) return Buffer.from(value, "base64").toString("utf-8");
+	const binary = atob(value);
+	const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0));
+	return new TextDecoder().decode(bytes);
+}
+function parseHydrationData(value) {
+	if (typeof value !== "string") return value;
+	return JSON.parse(decodeBase64ToUtf8(value));
+}
+/**
+* 服务端：将注水数据序列化为 inline script 内容。
+* 数据内容以 base64 字符串注入，避免在 HTML 中明文暴露 JSON。
+*/
+function serializeHydrationDataScriptContent(data) {
+	const encoded = encodeUtf8ToBase64(JSON.stringify(data));
+	return `window.${SSR_DATA_KEY}=${JSON.stringify(encoded)}`;
+}
+/**
+* 服务端：将注水数据序列化为 script 标签。
+*/
+function serializeHydrationData(data) {
+	return `<script>${serializeHydrationDataScriptContent(data)}<\/script>`;
+}
+/**
+* 客户端：从 window 查看注水数据
+* 不会清除全局数据，适合入口工厂与组件 hook 在同一次 hydration 中共享。
+*/
+function peekHydrationData() {
+	if (typeof window === "undefined") return null;
+	const rawData = window[SSR_DATA_KEY];
+	if (!rawData) return null;
+	const data = parseHydrationData(rawData);
+	window[SSR_DATA_KEY] = data;
+	return data;
+}
+/**
+* 客户端：清除 window 上的注水数据
+* 推荐在 hydration 首次提交后调用，避免初次渲染期间的读取竞争。
+*/
+function clearHydrationData() {
+	if (typeof window === "undefined") return;
+	delete window[SSR_DATA_KEY];
+}
+/**
+* 客户端：从 window 读取注水数据
+* 保持历史兼容：读取后立即清除。
+*/
+function readHydrationData() {
+	const data = peekHydrationData();
+	if (!data) return null;
+	clearHydrationData();
+	return data;
+}
+/**
+* 服务端：创建注水数据对象
+*/
+function createHydrationData(props, meta, state) {
+	return {
+		props,
+		state: state ?? {},
+		meta: {
+			...meta,
+			renderedAt: Date.now()
+		}
+	};
+}
+//#endregion
+export { SSR_DATA_KEY, clearHydrationData, createHydrationData, peekHydrationData, readHydrationData, serializeHydrationData, serializeHydrationDataScriptContent };

package/fe/packages/common/ssr/index.d.ts

@@ -0,0 +1,8 @@
+export declare const isBrowser: boolean;
+export declare const isServer: boolean;
+export declare function clientOnly<T>(fn: () => T, fallback: T): T;
+export declare function safeWindow(): Window | undefined;
+export declare function safeDocument(): Document | undefined;
+export declare function safeLocalStorage(key: string, fallback?: string): string;
+export declare function safeSetLocalStorage(key: string, value: string): void;
+export * from "./hydration";

package/fe/packages/common/ssr/index.js

@@ -0,0 +1,52 @@
+import { SSR_DATA_KEY, clearHydrationData, createHydrationData, peekHydrationData, readHydrationData, serializeHydrationData, serializeHydrationDataScriptContent } from "./hydration.js";
+//#region packages/common/ssr/index.ts
+/**
+* SSR 环境检测与守卫工具
+*/
+/**
+* 是否在浏览器环境中运行
+*/
+var isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
+/**
+* 是否在服务端环境中运行
+*/
+var isServer = !isBrowser;
+/**
+* 仅在浏览器环境执行回调，服务端返回 fallback
+*/
+function clientOnly(fn, fallback) {
+	if (isServer) return fallback;
+	return fn();
+}
+/**
+* 安全访问 window 对象
+* 服务端返回 undefined
+*/
+function safeWindow() {
+	if (isServer) return void 0;
+	return window;
+}
+/**
+* 安全访问 document 对象
+* 服务端返回 undefined
+*/
+function safeDocument() {
+	if (isServer) return void 0;
+	return document;
+}
+/**
+* 安全读取 localStorage
+*/
+function safeLocalStorage(key, fallback = "") {
+	if (isServer) return fallback;
+	return localStorage.getItem(key) ?? fallback;
+}
+/**
+* 安全写入 localStorage
+*/
+function safeSetLocalStorage(key, value) {
+	if (isServer) return;
+	localStorage.setItem(key, value);
+}
+//#endregion
+export { SSR_DATA_KEY, clearHydrationData, clientOnly, createHydrationData, isBrowser, isServer, peekHydrationData, readHydrationData, safeDocument, safeLocalStorage, safeSetLocalStorage, safeWindow, serializeHydrationData, serializeHydrationDataScriptContent };

package/fe/packages/common/string/index.js

@@ -0,0 +1,32 @@
+//#region packages/common/string/index.ts
+var isBlank = (value) => {
+	return value === null || value === void 0 || value.trim().length === 0;
+};
+var capitalize = (value) => {
+	if (value.length === 0) return value;
+	return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
+};
+var kebabCase = (value) => {
+	return value.trim().replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").replace(/-+/g, "-").toLowerCase();
+};
+/**
+* 拼接字符串片段，自动跳过空值和不满足条件的片段。
+*
+* @example
+* joinStr('btn', isActive && 'active', [disabled, 'disabled'], { separator: ' ' })
+* // => 'btn active disabled'
+*/
+var joinStr = (...strings) => {
+	const lastItem = strings[strings.length - 1];
+	const options = lastItem !== null && typeof lastItem === "object" && !Array.isArray(lastItem) && "separator" in lastItem ? lastItem : void 0;
+	const separator = options?.separator ?? " ";
+	return (options ? strings.slice(0, -1) : strings).flatMap((item) => {
+		if (Array.isArray(item)) {
+			const [condition, value] = item;
+			return condition ? value : void 0;
+		}
+		return item;
+	}).filter((item) => item !== null && item !== void 0 && item !== false && item !== "").join(separator);
+};
+//#endregion
+export { capitalize, isBlank, joinStr, kebabCase };

package/fe/packages/react/hooks/index.d.ts

@@ -5,5 +5,7 @@ export { default as useInit } from "./useInit";
 export * from "./useLanguage";
 export { default as usePagination } from "./usePagination";
 export { default as useRefState } from "./useRefState";
+export * from "./useSSR";
 export { default as useWatch } from "./useWatch";
 export * from "./useWatch";
+export * from "./useHydrationData";

package/fe/packages/react/hooks/index.js

@@ -5,4 +5,6 @@ import useExecuteOnce, { executionPhaseType } from "./useExecuteOnce.js";
 import useRefState from "./useRefState.js";
 import useWatch, { defaultCompare, identityCompare, shallowCompare } from "./useWatch.js";
 import usePagination from "./usePagination.js";
-export { defaultCompare, executionPhaseType, identityCompare, shallowCompare, useBreadcrumb, useExecuteOnce, useInit, useLanguage, usePagination, useRefState, useWatch };
+import { useClientValue, useHydrated, useWindowSize } from "./useSSR.js";
+import { useHydrationData } from "./useHydrationData.js";
+export { defaultCompare, executionPhaseType, identityCompare, shallowCompare, useBreadcrumb, useClientValue, useExecuteOnce, useHydrated, useHydrationData, useInit, useLanguage, usePagination, useRefState, useWatch, useWindowSize };

package/fe/packages/react/hooks/useHydrationData.d.ts

@@ -0,0 +1,2 @@
+import { type SSRHydrationData } from "../../common/index";
+export declare function useHydrationData<Props = Record<string, unknown>, State = Record<string, unknown>>(): SSRHydrationData<Props, State> | null;

package/fe/packages/react/hooks/useHydrationData.js

@@ -0,0 +1,23 @@
+import { peekHydrationData } from "../../common/ssr/hydration.js";
+import { useRef } from "react";
+//#region packages/react/hooks/useHydrationData.ts
+/**
+* 查看 SSR 注水数据的 hook
+* 只在首次渲染时读取，后续返回缓存值
+*
+* @example
+* ```tsx
+* function App() {
+*     const hydration = useHydrationData<{ title: string }>()
+*     const title = hydration?.props.title ?? 'Default'
+*     return <h1>{title}</h1>
+* }
+* ```
+*/
+function useHydrationData() {
+	const ref = useRef(void 0);
+	if (ref.current === void 0) ref.current = peekHydrationData();
+	return ref.current;
+}
+//#endregion
+export { useHydrationData };

package/fe/packages/react/hooks/useSSR.d.ts

@@ -0,0 +1,6 @@
+export declare function useHydrated(): boolean;
+export declare function useClientValue<T>(fn: () => T, fallback: T): T;
+export declare function useWindowSize(): {
+    width: number;
+    height: number;
+};

package/fe/packages/react/hooks/useSSR.js

@@ -0,0 +1,46 @@
+import { useEffect, useState } from "react";
+//#region packages/react/hooks/useSSR.ts
+/**
+* 检测当前是否已完成 hydration
+* - 服务端渲染时返回 false
+* - 客户端 hydration 完成后返回 true
+*/
+function useHydrated() {
+	const [hydrated, setHydrated] = useState(false);
+	useEffect(() => {
+		setHydrated(true);
+	}, []);
+	return hydrated;
+}
+/**
+* 仅在客户端执行的 hook
+* 服务端渲染时返回 fallback 值
+*/
+function useClientValue(fn, fallback) {
+	const [value, setValue] = useState(fallback);
+	useEffect(() => {
+		setValue(fn());
+	}, []);
+	return value;
+}
+/**
+* SSR 安全的 window 尺寸 hook
+*/
+function useWindowSize() {
+	const [size, setSize] = useState({
+		width: 0,
+		height: 0
+	});
+	useEffect(() => {
+		const update = () => setSize({
+			width: window.innerWidth,
+			height: window.innerHeight
+		});
+		update();
+		window.addEventListener("resize", update);
+		return () => window.removeEventListener("resize", update);
+	}, []);
+	return size;
+}
+//#endregion
+export { useClientValue, useHydrated, useWindowSize };

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

@@ -2,7 +2,6 @@ import { useI18n } from "../../i18n/useI18n.js";
 import "../../i18n/index.js";
 import { Checkbox } from "../Checkbox/Checkbox.js";
 import "../Checkbox/index.js";
-import no_result_default from "../../assets/table/no-result.js";
 import { Pagination } from "../Pagination/Pagination.js";
 import "../Pagination/index.js";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table/table.js";
@@ -14,6 +13,7 @@ import { getDataTableColumnStyle, getDataTableColumnWidth, getDataTableFixedOffs
 import { useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/react/ui/components/DataTable/index.tsx
+var noResult = new URL("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3e%3crect%20x='3'%20y='3'%20width='18'%20height='18'%20rx='2'%20ry='2'/%3e%3cline%20x1='3'%20y1='9'%20x2='21'%20y2='9'/%3e%3cline%20x1='9'%20y1='21'%20x2='9'%20y2='9'/%3e%3c/svg%3e", "" + import.meta.url).href;
 var defaultRowKey = "id";
 var rowSelectionColumnWidth = 48;
 var actionColumnWidth = 96;
@@ -135,8 +135,10 @@ function DataTable({ columns, data: pData, loading, rowKey = defaultRowKey, rowS
 	]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "tc-ui-data-table bg-background rounded-[20px] overflow-hidden relative",
-		children: [
-			/* @__PURE__ */ jsxs(Table, {
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: loading ? "hidden" : void 0,
+			"aria-hidden": loading,
+			children: [/* @__PURE__ */ jsxs(Table, {
 				containerClassName: "rounded-b-none overflow-x-auto",
 				children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [rowSelection && /* @__PURE__ */ jsxs(TableHead, {
 					fixed: "left",
@@ -156,7 +158,7 @@ function DataTable({ columns, data: pData, loading, rowKey = defaultRowKey, rowS
 						isAction: column.isAction ?? column.key === "action",
 						fixed,
 						fixedOffset,
-						hideSeparatorWhenFixedActive: fixed === "right",
+						hideSeparatorWhenFixedActive: fixed === "right" || fixed === "left" && fixedOffset === "0px",
 						style: getDataTableColumnStyle(column, defaultColumnWidth, actionColumnWidth),
 						children: column.title
 					}, column.key);
@@ -166,7 +168,7 @@ function DataTable({ columns, data: pData, loading, rowKey = defaultRowKey, rowS
 					children: /* @__PURE__ */ jsxs("div", {
 						className: "flex flex-col items-center w-full gap-2.5",
 						children: [/* @__PURE__ */ jsx("img", {
-							src: no_result_default,
+							src: noResult,
 							alt: t("components.dataTable.noData"),
 							className: " w-24 h-24"
 						}), t("components.dataTable.noData")]
@@ -196,19 +198,18 @@ function DataTable({ columns, data: pData, loading, rowKey = defaultRowKey, rowS
 						}, column.key);
 					})] }, recordKey);
 				}) })]
-			}),
-			loading && /* @__PURE__ */ jsx("div", {
-				className: "absolute inset-0 rounded-[20px] bg-background/70 text-sm text-gray-600 z-[100]",
-				children: /* @__PURE__ */ jsx(Skeleton, {
-					mode: "tableloading",
-					rows: 8
-				})
-			}),
-			showPagination && /* @__PURE__ */ jsx("div", {
+			}), showPagination && /* @__PURE__ */ jsx("div", {
 				className: "px-6 pb-6 mt-6",
 				children: /* @__PURE__ */ jsx(Pagination, { ...pagination })
+			})]
+		}), loading && /* @__PURE__ */ jsx("div", {
+			className: "overflow-hidden rounded-[20px] bg-background/70 text-sm text-gray-600",
+			children: /* @__PURE__ */ jsx(Skeleton, {
+				mode: "tableloading",
+				rows: 8,
+				className: "overflow-hidden"
 			})
-		]
+		})]
 	});
 }
 //#endregion

package/fe/packages/react/ui/components/Form/SchemaForm/data.d.ts

@@ -26,8 +26,9 @@ export type ExtendedFieldType = Extract<keyof SchemaFormNamespace.FieldTypes | k
 export type SchemaFormAllFieldType = SchemaFormFieldType | ExtendedFieldType;
 export type SchemaFormAllPropsMap = SchemaFormComponentPropsMap & SchemaFormNamespace.PropsMap;
 export type SchemaFormComponent = React.ComponentType<any> | React.LazyExoticComponent<React.ComponentType<any>>;
-export declare const componentsMap: Record<SchemaFormAllFieldType, SchemaFormComponent>;
-export type SchemaFormComponentsMap = Partial<Record<ExtendedFieldType, SchemaFormComponent>>;
+export declare const componentsMap: Partial<Record<SchemaFormAllFieldType, SchemaFormComponent>>;
+export type SchemaFormComponentsMap = Partial<Record<string, SchemaFormComponent>>;
+export declare const registerSchemaFormComponents: (map: SchemaFormComponentsMap) => void;
 export type FieldProps = {
     [K in SchemaFormAllFieldType]: {
         type: K;

package/fe/packages/react/ui/components/Form/SchemaForm/data.js

@@ -1,6 +1,4 @@
 import React from "react";
-import consumerComponentsMap from "@tc/scalability/SchemaForm/data";
-import frameComponentsMap from "@tc/scalability/SchemaForm/frameData";
 var componentsMap = {
 	input: React.lazy(async () => ({ default: (await import("../../Input/index.js")).Input })),
 	inputNumber: React.lazy(async () => ({ default: (await import("../../InputNumber/index.js")).InputNumber })),
@@ -8,9 +6,10 @@ var componentsMap = {
 	textarea: React.lazy(async () => ({ default: (await import("../../Textarea/index.js")).Textarea })),
 	switch: React.lazy(async () => ({ default: (await import("../../Switch/index.js")).Switch })),
 	date: React.lazy(async () => ({ default: (await import("../../Date/index.js")).DatePicker })),
-	checkbox: React.lazy(async () => ({ default: (await import("../../Checkbox/index.js")).Checkbox })),
-	...frameComponentsMap,
-	...consumerComponentsMap
+	checkbox: React.lazy(async () => ({ default: (await import("../../Checkbox/index.js")).Checkbox }))
+};
+var registerSchemaFormComponents = (map) => {
+	Object.assign(componentsMap, map);
 };
 //#endregion
-export { componentsMap };
+export { componentsMap, registerSchemaFormComponents };

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

@@ -6,6 +6,7 @@ import { type FormProps } from "..";
 import { type ButtonElementProps } from "../../Button";
 import type { LabelLayout } from "../../Label";
 import { type FieldProps, type SchemaFormAllFieldType } from "./data";
+export { registerSchemaFormComponents } from "./data";
 export type { FieldProps, SchemaFormAllFieldType, SchemaFormAllPropsMap, SchemaFormComponent, SchemaFormComponentsMap, SchemaFormComponentPropsMap, SchemaFormFieldType, SchemaFormNamespace, } from "./data";
 export type FormFieldType = SchemaFormAllFieldType;
 type BaseField<T> = {

package/fe/packages/react/ui/components/Form/SchemaForm/index.js

@@ -8,7 +8,7 @@ import "../../Skeleton/index.js";
 import { Form } from "../Form.js";
 import { FormItem } from "../FormItem.js";
 import { useForm } from "../useForm.js";
-import { componentsMap } from "./data.js";
+import { componentsMap, registerSchemaFormComponents } from "./data.js";
 import "../index.js";
 import { Suspense, useEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -116,4 +116,4 @@ var SchemaForm = ({ form, getForm, schemas, className, onFinish, onFinishFailed,
 };
 SchemaForm.displayName = "SchemaForm";
 //#endregion
-export { SchemaForm, SchemaForm as default };
+export { SchemaForm, SchemaForm as default, registerSchemaFormComponents };

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

@@ -1,5 +1,6 @@
 import { Form } from "./Form.js";
 import { FormItem } from "./FormItem.js";
 import { useForm } from "./useForm.js";
+import { registerSchemaFormComponents } from "./SchemaForm/data.js";
 import { SchemaForm } from "./SchemaForm/index.js";
-export { Form, FormItem, SchemaForm, useForm };
+export { Form, FormItem, SchemaForm, registerSchemaFormComponents, useForm };

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

@@ -21,7 +21,11 @@ var Input = forwardRef(({ className, inputClassName, type, value: controlledValu
 		Promise.resolve().then(() => {
 			if (!isMountedRef.current) return;
 			const input = controllerRef.current;
-			if (input?.getAttribute("type") === "password" && input.hasAttribute("value")) input.removeAttribute("value");
+			if (input?.getAttribute("type") === "password" && input.hasAttribute("value")) {
+				const currentValue = input.value;
+				input.removeAttribute("value");
+				input.value = currentValue;
+			}
 		});
 	}, [controllerRef, isPasswordInput]);
 	useEffect(() => {

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

@@ -1,12 +1,13 @@
 import { cn } from "../../lib/utils.js";
 import { getDefaultDropdownPosition, useDropdownPositioning } from "../hooks/useDropdownPositioning.js";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 //#region packages/react/ui/components/Popup/Popup.tsx
 var DEFAULT_POPUP_CLASSNAME = cn("fixed z-[1000]", "rounded-xl border border-border/60 bg-popover text-popover-foreground", "shadow-[var(--shadow-floating)]", "animate-in fade-in-0 zoom-in-95");
 var canUseDocument = () => typeof document !== "undefined";
 function Popup({ open, anchorRef, children, className, style, placement = "bottom-end", offset = 8, keepMounted = false, closeOnClickOutside = true, closeOnEscape = true, matchAnchorWidth = false, position, positioning, strategy = getDefaultDropdownPosition, contentRef, container, positionMode = "fixed", hoverBridge = 0, hoverBridgePlacement = "auto", onOpenChange }) {
+	const [mounted, setMounted] = useState(false);
 	const internalContentRef = useRef(null);
 	const panelRef = contentRef ?? internalContentRef;
 	const internalPositioning = useDropdownPositioning({
@@ -60,7 +61,11 @@ function Popup({ open, anchorRef, children, className, style, placement = "botto
 		style
 	]);
 	const showBothHorizontalHoverBridges = hoverBridge > 0 && (placement.startsWith("right") || placement.startsWith("left")) && hoverBridgePlacement === "horizontal";
+	useEffect(() => {
+		setMounted(true);
+	}, []);
 	if (!keepMounted && !open) return null;
+	if (!mounted) return null;
 	const portalContainer = container ?? (canUseDocument() ? document.body : void 0);
 	if (!portalContainer) return null;
 	return createPortal(/* @__PURE__ */ jsxs("div", {

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

@@ -40,6 +40,7 @@ import { Label } from "./Label/Label.js";
 import "./Label/index.js";
 import { FormItem } from "./Form/FormItem.js";
 import { useForm } from "./Form/useForm.js";
+import { registerSchemaFormComponents } from "./Form/SchemaForm/data.js";
 import { SchemaForm } from "./Form/SchemaForm/index.js";
 import "./Form/index.js";
 import { ImagePreviewController } from "./ImagePreview/ImagePreview.js";
@@ -78,4 +79,4 @@ import "./TreeSelect/index.js";
 import { FileUpload } from "./Upload/Upload.js";
 import { ImageUpload } from "./Upload/ImageUpload.js";
 import "./Upload/index.js";
-export { ActionBtn, AsynchronousButton, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, Checkbox, CollapseToggle, ConfirmDialog, DataTable, Drawer, Dropdown, FileUpload, Form, FormItem, ImagePreviewController, ImageUpload, Input, InputNumber, Label, Layout, Loading, LoadingIndicator, Menu, MenuItem, Modal, Notification, Overlay, Pagination, Popup, PreviewImage, Radio, RadioGroup, SchemaForm, Search, Select, SimpleBreadcrumb, Skeleton, SubMenu, SubmitButton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSearch, Tabs, Textarea, Tooltip, TreeSelect, canUseDocument, getDefaultDropdownPosition, message, modal, useDropdownPositioning, useForm, useMenuStore, useRadioGroupContext };
+export { ActionBtn, AsynchronousButton, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, Checkbox, CollapseToggle, ConfirmDialog, DataTable, Drawer, Dropdown, FileUpload, Form, FormItem, ImagePreviewController, ImageUpload, Input, InputNumber, Label, Layout, Loading, LoadingIndicator, Menu, MenuItem, Modal, Notification, Overlay, Pagination, Popup, PreviewImage, Radio, RadioGroup, SchemaForm, Search, Select, SimpleBreadcrumb, Skeleton, SubMenu, SubmitButton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSearch, Tabs, Textarea, Tooltip, TreeSelect, canUseDocument, getDefaultDropdownPosition, message, modal, registerSchemaFormComponents, useDropdownPositioning, useForm, useMenuStore, useRadioGroupContext };