@lobehub/ui 5.61.1 → 5.62.0

package/es/base-ui/ProTable/ProTable.mjs

@@ -0,0 +1,651 @@
+"use client";
+import Button from "../Button/Button.mjs";
+import ActionIcon from "../ActionIcon/ActionIcon.mjs";
+import ActionIconGroup from "../../ActionIconGroup/ActionIconGroup.mjs";
+import Input_default from "../Input/Input.mjs";
+import { useEventCallback } from "../../hooks/useEventCallback.mjs";
+import Table from "../Table/Table.mjs";
+import { PRO_PREFIX_CLS, styles } from "./style.mjs";
+import ColumnSetting from "./ColumnSetting.mjs";
+import { getByPath, getProColumnKey, isEmptyValue, readPersistedState, resolveValueEnum, resolveValueType, valueEnumToList, writePersistedState } from "./utils.mjs";
+import { getSearchFields, useSearchForm } from "./useSearchForm.mjs";
+import LightFilter from "./LightFilter.mjs";
+import OptionPopover from "./OptionPopover.mjs";
+import { CopyableText, renderValue } from "./renderValue.mjs";
+import SearchForm from "./SearchForm.mjs";
+import { useFetchData } from "./useFetchData.mjs";
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { Check, CircleHelp, Fullscreen, Minimize, RotateCw, Rows3, Settings } from "lucide-react";
+//#region src/base-ui/ProTable/ProTable.tsx
+const DEFAULT_PRO_TABLE_LOCALE = {
+	alertClear: "Clear",
+	alertSelected: (count) => `${count} selected`,
+	collapse: "Collapse",
+	columnSetting: "Column settings",
+	columnSettingReset: "Reset",
+	columnSettingTitle: "Columns",
+	copy: "Copy",
+	density: "Density",
+	densityLarge: "Large",
+	densityMedium: "Medium",
+	densitySmall: "Compact",
+	expand: "Expand",
+	fixedEnd: "Pin to end",
+	fixedEndTitle: "Pinned to end",
+	fixedStart: "Pin to start",
+	fixedStartTitle: "Pinned to start",
+	fullScreen: "Full screen",
+	moveDown: "Move down",
+	moveUp: "Move up",
+	noFixed: "Unpin",
+	reload: "Reload",
+	reset: "Reset",
+	search: "Search",
+	searchPlaceholder: "Please enter",
+	selectPlaceholder: "Please select",
+	unfixedTitle: "Not pinned"
+};
+const assignRef = (ref, value) => {
+	if (!ref) return;
+	if (typeof ref === "function") ref(value);
+	else ref.current = value;
+};
+const stableKey = (value) => {
+	try {
+		return JSON.stringify(value, (_key, item) => item instanceof Date ? item.toISOString() : item);
+	} catch {
+		return String(Math.random());
+	}
+};
+const isGroup = (column) => !!column.children?.length;
+const ProTable = (props) => {
+	const { actionRef, beforeSearchSubmit, cardBordered, className, columnEmptyText = "-", columns: columnsProp = [], columnsState, dataSource, dateFormatter = "string", debounceTime = 10, defaultData, defaultSize, form: formConfig, formRef, ghost: _ghost, headerTitle, loading: loadingProp, locale: localeProp, manualRequest = false, onChange, onDataSourceChange, onLoad, onLoadingChange, onRequestError, onReset, onSizeChange, onSubmit, options, pagination: paginationProp, params, polling, postData, request, rowSelection, search, searchFormRender, size: sizeProp, style, tableAlertOptionRender, tableAlertRender, tableClassName, tableExtraRender, tableRender, tableStyle, toolbar, toolBarRender, tooltip, variant, ...tableProps } = props;
+	const locale = {
+		...DEFAULT_PRO_TABLE_LOCALE,
+		...localeProp
+	};
+	const rootRef = useRef(null);
+	const actionHolderRef = useRef(void 0);
+	const [innerSize, setInnerSize] = useState(defaultSize ?? "medium");
+	const size = sizeProp ?? innerSize;
+	const setSize = (next) => {
+		setInnerSize(next);
+		onSizeChange?.(next);
+	};
+	const [fullscreen, setFullscreen] = useState(false);
+	useEffect(() => {
+		if (typeof document === "undefined") return;
+		const sync = () => setFullscreen(document.fullscreenElement === rootRef.current);
+		document.addEventListener("fullscreenchange", sync);
+		return () => document.removeEventListener("fullscreenchange", sync);
+	}, []);
+	const toggleFullScreen = useEventCallback(() => {
+		const node = rootRef.current;
+		if (!node || typeof document === "undefined") return;
+		if (document.fullscreenElement) document.exitFullscreen?.();
+		else node.requestFullscreen?.();
+	});
+	const persistKey = columnsState?.persistenceKey;
+	const persistType = columnsState?.persistenceType;
+	const defaultColumnsState = useMemo(() => {
+		const map = {};
+		columnsProp.forEach((column, index) => {
+			const key = getProColumnKey(column, index);
+			if (column.fixed) map[key] = { fixed: column.fixed };
+		});
+		return {
+			...map,
+			...columnsState?.defaultValue
+		};
+	}, []);
+	const [innerColumnsState, setInnerColumnsState] = useState(() => readPersistedState(persistKey, persistType) ?? defaultColumnsState);
+	const columnsStateMap = columnsState?.value ?? innerColumnsState;
+	const setColumnsStateMap = (next) => {
+		setInnerColumnsState(next);
+		writePersistedState(persistKey, persistType, next);
+		columnsState?.onChange?.(next);
+	};
+	const resetColumnsState = () => {
+		writePersistedState(persistKey, persistType, void 0);
+		setInnerColumnsState(defaultColumnsState);
+		columnsState?.onChange?.(defaultColumnsState);
+	};
+	const paginationConfig = paginationProp === false ? false : paginationProp ?? {};
+	const [pageInfo, setPageInfoState] = useState(() => ({
+		current: paginationConfig && (paginationConfig.current ?? paginationConfig.defaultCurrent) || 1,
+		pageSize: paginationConfig && (paginationConfig.pageSize ?? paginationConfig.defaultPageSize) || 10,
+		total: 0
+	}));
+	const mergedPageInfo = {
+		...pageInfo,
+		...paginationConfig && paginationConfig.current !== void 0 && { current: paginationConfig.current },
+		...paginationConfig && paginationConfig.pageSize !== void 0 && { pageSize: paginationConfig.pageSize }
+	};
+	const setPageInfo = useEventCallback((next) => setPageInfoState((prev) => ({
+		...prev,
+		...next
+	})));
+	const [sort, setSort] = useState({});
+	const [filter, setFilter] = useState({});
+	const searchFields = useMemo(() => getSearchFields(columnsProp), [columnsProp]);
+	const [formParams, setFormParams] = useState({});
+	const [keyword, setKeyword] = useState(void 0);
+	const formReadyRef = useRef(false);
+	const handleSubmit = useEventCallback((formatted) => {
+		const next = beforeSearchSubmit ? beforeSearchSubmit(formatted) : formatted;
+		formReadyRef.current = true;
+		setFormParams(next);
+		setPageInfo({ current: 1 });
+		onSubmit?.(next);
+		fetcher.reload();
+	});
+	const { form } = useSearchForm({
+		dateFormatter,
+		fields: searchFields,
+		initialValues: formConfig?.initialValues,
+		onSubmit: handleSubmit,
+		onValuesChange: formConfig?.onValuesChange,
+		validateOn: formConfig?.validateOn
+	});
+	const initialFormParams = useMemo(() => form.getFieldsFormatValue(), [form]);
+	const effectiveFormParams = formReadyRef.current ? formParams : initialFormParams;
+	useImperativeHandle(formRef, () => form, [form]);
+	const keywordName = options && typeof options.search === "object" ? options.search.name ?? "keyword" : "keyword";
+	const getParams = () => ({
+		...effectiveFormParams,
+		...params,
+		...keyword !== void 0 && keyword !== "" && { [keywordName]: keyword }
+	});
+	const fetcher = useFetchData({
+		debounceTime,
+		defaultData,
+		depsKey: stableKey([
+			effectiveFormParams,
+			params,
+			keyword,
+			sort,
+			filter
+		]),
+		filter,
+		getParams,
+		manual: manualRequest,
+		onDataSourceChange,
+		onLoad,
+		onLoadingChange,
+		onRequestError,
+		pageInfo: mergedPageInfo,
+		paginated: paginationConfig !== false,
+		polling,
+		postData,
+		request,
+		setTotal: (total) => setPageInfo({ total }),
+		sort
+	});
+	const paramsKey = stableKey(params);
+	const firstParamsRef = useRef(true);
+	useEffect(() => {
+		if (firstParamsRef.current) {
+			firstParamsRef.current = false;
+			return;
+		}
+		setPageInfo({ current: 1 });
+	}, [paramsKey, setPageInfo]);
+	const rows = request ? fetcher.data : dataSource ?? defaultData ?? [];
+	const loading = loadingProp ?? fetcher.loading;
+	const selectionEnabled = !!rowSelection;
+	const [innerSelectedKeys, setInnerSelectedKeys] = useState(rowSelection && rowSelection.defaultSelectedRowKeys || []);
+	const selectedRowKeys = rowSelection && rowSelection.selectedRowKeys || innerSelectedKeys;
+	const selectedRowsCacheRef = useRef(/* @__PURE__ */ new Map());
+	const rowKeyProp = tableProps.rowKey ?? "key";
+	const getRowKey = useCallback((record, index) => typeof rowKeyProp === "function" ? rowKeyProp(record, index) : record[rowKeyProp], [rowKeyProp]);
+	rows.forEach((record, index) => selectedRowsCacheRef.current.set(getRowKey(record, index), record));
+	const selectedRows = selectedRowKeys.map((key) => selectedRowsCacheRef.current.get(key)).filter((row) => row !== void 0);
+	const clearSelected = useEventCallback(() => {
+		setInnerSelectedKeys([]);
+		if (rowSelection) rowSelection.onChange?.([], [], { type: "none" });
+	});
+	const reload = useEventCallback(async (resetPageIndex) => {
+		if (resetPageIndex) setPageInfo({ current: 1 });
+		await fetcher.reload();
+	});
+	actionHolderRef.current = {
+		clearSelected,
+		fullScreen: toggleFullScreen,
+		getSortFilter: () => ({
+			filter,
+			sort
+		}),
+		nativeElement: rootRef.current,
+		pageInfo: mergedPageInfo,
+		reload,
+		reloadAndRest: async () => {
+			clearSelected();
+			await reload(true);
+		},
+		reset: () => {
+			form.resetFields();
+			const formatted = form.getFieldsFormatValue();
+			formReadyRef.current = true;
+			setFormParams(beforeSearchSubmit ? beforeSearchSubmit(formatted) : formatted);
+			setPageInfo({ current: 1 });
+			fetcher.reload();
+		},
+		setPageInfo
+	};
+	useEffect(() => {
+		assignRef(actionRef, actionHolderRef.current);
+	});
+	const handleReset = useEventCallback(() => {
+		form.resetFields();
+		const formatted = form.getFieldsFormatValue();
+		formReadyRef.current = true;
+		const next = beforeSearchSubmit ? beforeSearchSubmit(formatted) : formatted;
+		setFormParams(next);
+		setPageInfo({ current: 1 });
+		onReset?.();
+		fetcher.reload();
+	});
+	const settingColumns = [];
+	const tableColumns = useMemo(() => {
+		const offset = (mergedPageInfo.current - 1) * mergedPageInfo.pageSize;
+		const convert = (column, index, top) => {
+			const key = getProColumnKey(column, index);
+			const state = top ? columnsStateMap[key] : void 0;
+			if (column.hideInTable || state?.show === false) return null;
+			const { children, colSize: _colSize, copyable, disable: _disable, fieldProps, filters, formItemProps: _formItemProps, hideInForm: _hideInForm, hideInSearch: _hideInSearch, hideInSetting: _hideInSetting, hideInTable: _hideInTable, initialValue: _initialValue, onFilter, order: _order, render, renderFormItem: _renderFormItem, renderText, search: _search, sorter, title, tooltip: columnTooltip, valueEnum: _valueEnum, valueType: _valueType, ...rest } = column;
+			const titleNode = columnTooltip ? /* @__PURE__ */ jsxs("span", {
+				className: styles.titleTooltip,
+				children: [title, /* @__PURE__ */ jsx(ActionIcon, {
+					icon: CircleHelp,
+					size: "small",
+					title: columnTooltip
+				})]
+			}) : title;
+			if (children?.length) {
+				const childColumns = children.map((child, childIndex) => convert(child, childIndex, false)).filter((child) => child !== null);
+				return {
+					...rest,
+					children: childColumns,
+					key,
+					title: titleNode
+				};
+			}
+			const valueType = resolveValueType(column);
+			const staticEnum = typeof column.valueEnum === "function" ? void 0 : column.valueEnum;
+			const resolvedFilters = filters === true ? valueEnumToList(staticEnum).map((item) => ({
+				text: item.text,
+				value: item.value
+			})) : filters || void 0;
+			const resolvedOnFilter = onFilter === true ? (value, record) => String(getByPath(record, column.dataIndex)) === String(value) : onFilter || void 0;
+			const fixed = state?.fixed ?? rest.fixed;
+			return {
+				...rest,
+				...valueType === "option" && rest.align === void 0 && { align: "end" },
+				...(valueType === "index" || valueType === "indexBorder") && rest.width === void 0 && { width: 56 },
+				filters: resolvedFilters,
+				fixed: fixed === "left" ? "start" : fixed === "right" ? "end" : fixed,
+				key,
+				onFilter: resolvedOnFilter,
+				sorter: typeof sorter === "string" ? true : sorter,
+				title: titleNode,
+				render: (value, record, rowIndex) => {
+					const current = actionHolderRef.current;
+					const text = renderText ? renderText(value, record, rowIndex, current) : value;
+					let dom = renderValue(text, {
+						emptyText: columnEmptyText === false ? null : columnEmptyText,
+						fieldProps,
+						rowIndex: offset + rowIndex,
+						valueEnum: resolveValueEnum(column, record),
+						valueType: resolveValueType(column, record)
+					});
+					if (copyable && !isEmptyValue(text)) dom = /* @__PURE__ */ jsx(CopyableText, {
+						label: locale.copy,
+						text: String(text),
+						children: dom
+					});
+					if (!render) return dom;
+					const result = render(dom, record, rowIndex, current, column);
+					if (valueType === "option" && Array.isArray(result)) return /* @__PURE__ */ jsx("div", {
+						className: styles.optionCell,
+						children: result
+					});
+					return result;
+				}
+			};
+		};
+		const indexed = columnsProp.map((column, index) => ({
+			column,
+			index,
+			key: getProColumnKey(column, index)
+		}));
+		indexed.sort((a, b) => {
+			return (columnsStateMap[a.key]?.order ?? a.index) - (columnsStateMap[b.key]?.order ?? b.index);
+		});
+		return indexed.map(({ column, index }) => convert(column, index, true)).filter((column) => column !== null);
+	}, [
+		columnsProp,
+		columnsStateMap,
+		columnEmptyText,
+		mergedPageInfo.current,
+		mergedPageInfo.pageSize
+	]);
+	[...columnsProp].map((column, index) => ({
+		column,
+		index,
+		key: getProColumnKey(column, index)
+	})).sort((a, b) => (columnsStateMap[a.key]?.order ?? a.index) - (columnsStateMap[b.key]?.order ?? b.index)).forEach(({ column, key }) => {
+		if (column.hideInTable || column.hideInSetting) return;
+		const disable = columnsStateMap[key]?.disable ?? (typeof column.disable === "object" ? column.disable.checkbox : column.disable);
+		settingColumns.push({
+			disabled: !!disable,
+			key,
+			title: column.title ?? key
+		});
+	});
+	const sortFieldOf = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		const walk = (list) => list.forEach((column, index) => {
+			if (isGroup(column)) walk(column.children);
+			const key = getProColumnKey(column, index);
+			if (typeof column.sorter === "string") map.set(key, column.sorter);
+			else if (Array.isArray(column.dataIndex)) map.set(key, column.dataIndex.join("."));
+			else if (column.dataIndex !== void 0) map.set(key, String(column.dataIndex));
+		});
+		walk(columnsProp);
+		return map;
+	}, [columnsProp]);
+	const handleTableChange = useEventCallback((pagination, filters, sorter, extra) => {
+		if (extra.action === "sort") {
+			const list = Array.isArray(sorter) ? sorter : [sorter];
+			const next = {};
+			list.forEach((item) => {
+				if (!item.order || item.columnKey === void 0) return;
+				const columnKey = String(item.columnKey);
+				next[sortFieldOf.get(columnKey) ?? columnKey] = item.order;
+			});
+			setSort(next);
+		}
+		if (extra.action === "filter") {
+			const next = {};
+			Object.entries(filters).forEach(([columnKey, value]) => {
+				next[sortFieldOf.get(columnKey) ?? columnKey] = value;
+			});
+			setFilter(next);
+		}
+		onChange?.(pagination, filters, sorter, extra);
+	});
+	const optionConfig = options === false ? false : {
+		density: true,
+		fullScreen: false,
+		reload: true,
+		setting: true,
+		...options
+	};
+	const reloadOption = optionConfig && optionConfig.reload;
+	const fullScreenOption = optionConfig && optionConfig.fullScreen;
+	const settingOption = optionConfig && optionConfig.setting;
+	const searchOption = optionConfig && optionConfig.search;
+	const [openOption, setOpenOption] = useState(null);
+	const toggleOption = (key, event) => {
+		const anchor = event?.currentTarget ?? null;
+		setOpenOption((prev) => prev?.key === key || !anchor ? null : {
+			anchor,
+			key
+		});
+	};
+	const closeOption = () => setOpenOption(null);
+	const optionItems = [];
+	if (optionConfig) {
+		if (reloadOption) optionItems.push({
+			icon: RotateCw,
+			key: "reload",
+			label: locale.reload,
+			loading: !!loading && !!request,
+			onClick: () => typeof reloadOption === "function" ? reloadOption() : void reload()
+		});
+		if (optionConfig.density) optionItems.push({
+			icon: Rows3,
+			key: "density",
+			label: locale.density,
+			onClick: ((event) => toggleOption("density", event))
+		});
+		if (fullScreenOption) optionItems.push({
+			icon: fullscreen ? Minimize : Fullscreen,
+			key: "fullScreen",
+			label: locale.fullScreen,
+			onClick: () => typeof fullScreenOption === "function" ? fullScreenOption() : toggleFullScreen()
+		});
+		if (settingOption) optionItems.push({
+			icon: Settings,
+			key: "setting",
+			label: locale.columnSetting,
+			onClick: ((event) => toggleOption("setting", event))
+		});
+	}
+	const settingProps = settingOption && typeof settingOption === "object" ? settingOption : {};
+	const optionNodes = optionItems.length > 0 ? [
+		/* @__PURE__ */ jsx(ActionIconGroup, {
+			className: `${PRO_PREFIX_CLS}-options`,
+			items: optionItems,
+			size: "small",
+			variant: "outlined"
+		}, "options"),
+		/* @__PURE__ */ jsx(OptionPopover, {
+			anchor: openOption?.key === "density" ? openOption.anchor : null,
+			open: openOption?.key === "density",
+			onOpenChange: (next) => !next && closeOption(),
+			children: /* @__PURE__ */ jsx("div", {
+				className: styles.density,
+				"data-pro-table-density": "",
+				role: "menu",
+				children: [
+					"large",
+					"medium",
+					"small"
+				].map((item) => /* @__PURE__ */ jsxs("button", {
+					"aria-checked": size === item,
+					className: styles.densityItem,
+					role: "menuitemradio",
+					type: "button",
+					onClick: () => {
+						setSize(item);
+						closeOption();
+					},
+					children: [/* @__PURE__ */ jsx("span", { children: item === "large" ? locale.densityLarge : item === "medium" ? locale.densityMedium : locale.densitySmall }), size === item && /* @__PURE__ */ jsx(Check, { size: 14 })]
+				}, item))
+			})
+		}, "density-popover"),
+		/* @__PURE__ */ jsx(OptionPopover, {
+			anchor: openOption?.key === "setting" ? openOption.anchor : null,
+			open: openOption?.key === "setting",
+			onOpenChange: (next) => !next && closeOption(),
+			children: /* @__PURE__ */ jsx(ColumnSetting, {
+				checkable: settingProps.checkable,
+				columns: settingColumns,
+				draggable: settingProps.draggable,
+				locale,
+				showListItemOption: settingProps.showListItemOption,
+				state: columnsStateMap,
+				onChange: setColumnsStateMap,
+				onReset: resetColumnsState
+			})
+		}, "setting-popover")
+	] : [];
+	const lightMode = search !== false && search?.filterType === "light";
+	const lightFilterDom = lightMode && searchFields.length > 0 ? /* @__PURE__ */ jsx(LightFilter, {
+		fields: searchFields,
+		form,
+		placeholder: {
+			input: locale.searchPlaceholder,
+			select: locale.selectPlaceholder
+		}
+	}) : null;
+	const keywordDom = searchOption ? /* @__PURE__ */ jsx(Input_default, {
+		allowClear: true,
+		style: { width: 200 },
+		placeholder: typeof searchOption === "object" && searchOption.placeholder || locale.searchPlaceholder,
+		onClear: () => {
+			setKeyword(void 0);
+			setPageInfo({ current: 1 });
+		},
+		onPressEnter: (event) => {
+			const value = event.target.value;
+			if (typeof searchOption === "object" && searchOption.onSearch?.(value) === false) return;
+			setKeyword(value);
+			setPageInfo({ current: 1 });
+		}
+	}, "keyword") : null;
+	const actionNodes = toolBarRender === false ? [] : [...toolbar?.actions ?? [], ...toolBarRender?.(actionHolderRef.current, {
+		selectedRowKeys,
+		selectedRows
+	}) ?? []];
+	const titleNode = headerTitle ?? toolbar?.title;
+	const titleTooltip = tooltip ?? toolbar?.tooltip;
+	const settingsNodes = toolbar?.settings ?? optionNodes;
+	const toolbarDom = toolBarRender !== false && (titleNode !== void 0 || actionNodes.length > 0 || settingsNodes.length > 0 || !!lightFilterDom || !!keywordDom) ? /* @__PURE__ */ jsxs("div", {
+		className: cx(styles.toolbar, `${PRO_PREFIX_CLS}-toolbar`),
+		children: [(titleNode !== void 0 || toolbar?.subTitle) && /* @__PURE__ */ jsxs("div", {
+			className: styles.title,
+			children: [
+				titleNode,
+				titleTooltip && /* @__PURE__ */ jsx(ActionIcon, {
+					icon: CircleHelp,
+					size: "small",
+					title: titleTooltip
+				}),
+				toolbar?.subTitle && /* @__PURE__ */ jsx("span", {
+					className: styles.titleSub,
+					children: toolbar.subTitle
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: styles.toolbarActions,
+			children: [
+				lightFilterDom,
+				keywordDom,
+				actionNodes,
+				settingsNodes.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: styles.toolbarOptions,
+					children: settingsNodes
+				})
+			]
+		})]
+	}) : null;
+	const alwaysShowAlert = rowSelection ? rowSelection.alwaysShowAlert : false;
+	const alertProps = {
+		onCleanSelected: clearSelected,
+		selectedRowKeys,
+		selectedRows
+	};
+	const alertInfo = tableAlertRender === false ? false : tableAlertRender ? tableAlertRender(alertProps) : locale.alertSelected(selectedRowKeys.length);
+	const alertOption = tableAlertOptionRender === false ? null : tableAlertOptionRender ? tableAlertOptionRender(alertProps) : /* @__PURE__ */ jsx(Button, {
+		size: "small",
+		type: "link",
+		onClick: clearSelected,
+		children: locale.alertClear
+	});
+	const alertDom = selectionEnabled && alertInfo !== false && (selectedRowKeys.length > 0 || alwaysShowAlert) ? /* @__PURE__ */ jsxs("div", {
+		className: cx(styles.alert, `${PRO_PREFIX_CLS}-alert`),
+		role: "status",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: styles.alertInfo,
+			children: alertInfo
+		}), alertOption && /* @__PURE__ */ jsx("div", {
+			className: styles.alertOption,
+			children: alertOption
+		})]
+	}) : null;
+	const mergedRowSelection = rowSelection ? (() => {
+		const { alwaysShowAlert: _always, ...restSelection } = rowSelection;
+		return {
+			...restSelection,
+			onChange: (keys, selected, info) => {
+				setInnerSelectedKeys(keys);
+				restSelection.onChange?.(keys, selected, info);
+			},
+			preserveSelectedRowKeys: restSelection.preserveSelectedRowKeys ?? !!request,
+			selectedRowKeys
+		};
+	})() : void 0;
+	const tablePagination = paginationConfig === false ? false : {
+		...paginationConfig,
+		current: mergedPageInfo.current,
+		onChange: (page, pageSize) => {
+			setPageInfo({
+				current: page,
+				pageSize
+			});
+			paginationConfig.onChange?.(page, pageSize);
+		},
+		pageSize: mergedPageInfo.pageSize,
+		...request && { total: mergedPageInfo.total }
+	};
+	const tableDom = /* @__PURE__ */ jsx(Table, {
+		...tableProps,
+		className: tableClassName,
+		columns: tableColumns,
+		dataSource: rows,
+		loading,
+		pagination: tablePagination,
+		rowSelection: mergedRowSelection,
+		size,
+		style: tableStyle,
+		variant,
+		onChange: handleTableChange
+	});
+	const cardBorder = (part) => typeof cardBordered === "object" ? !!cardBordered[part] : !!cardBordered;
+	const cardClass = (part) => cx(styles.part, cardBorder(part) && styles.partBordered, `${PRO_PREFIX_CLS}-${part}`);
+	const tableBody = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		toolbarDom,
+		alertDom,
+		tableDom
+	] });
+	const tableCard = /* @__PURE__ */ jsx("div", {
+		className: cardClass("table"),
+		children: tableRender ? tableRender(props, tableBody, {
+			alert: alertDom,
+			table: tableDom,
+			toolbar: toolbarDom
+		}) : tableBody
+	});
+	let searchDom = null;
+	if (search !== false && !lightMode && searchFields.length > 0) {
+		const formDom = /* @__PURE__ */ jsx("div", {
+			className: cardClass("search"),
+			children: /* @__PURE__ */ jsx(SearchForm, {
+				config: search ?? {},
+				fields: searchFields,
+				form,
+				loading: !!loading && !!request,
+				locale: {
+					collapse: locale.collapse,
+					expand: locale.expand,
+					inputPlaceholder: locale.searchPlaceholder,
+					reset: locale.reset,
+					search: locale.search,
+					selectPlaceholder: locale.selectPlaceholder
+				},
+				onReset: handleReset
+			})
+		});
+		searchDom = searchFormRender ? searchFormRender(props, formDom) : formDom;
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(styles.root, PRO_PREFIX_CLS, className),
+		"data-fullscreen": fullscreen || void 0,
+		ref: rootRef,
+		style,
+		children: [
+			searchDom,
+			tableExtraRender?.(props, rows),
+			tableCard
+		]
+	});
+};
+ProTable.displayName = "ProTable";
+//#endregion
+export { DEFAULT_PRO_TABLE_LOCALE, ProTable as default };
+
+//# sourceMappingURL=ProTable.mjs.map