@lobehub/ui 6.0.0-beta.7 → 6.0.0-beta.8

package/es/Popover/atoms.mjs

@@ -10,7 +10,7 @@ import { PopoverArrowIcon } from "./ArrowIcon.mjs";
 import { usePopoverPortalContainer } from "./PopoverPortal.mjs";
 import { cloneElement, isValidElement, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { Popover } from "@base-ui/react/popover";
@@ -36,7 +36,7 @@ const PopoverTriggerElement = ({ children, className, nativeButton, ref: refProp
 			const extraClassName = typeof className === "function" ? className(state) : className;
 			return cloneElement(children, {
 				...mergedProps,
-				className: clsx(baseClassName, extraClassName),
+				className: clsx$1(baseClassName, extraClassName),
 				ref: mergeRefs([
 					children.ref,
 					props.ref,
@@ -87,7 +87,7 @@ const PopoverPositioner = ({ children, className, collisionPadding, hoverTrigger
 		side: side ?? placementConfig?.side ?? "bottom",
 		sideOffset: sideOffset ?? 6,
 		style: resolvedStyle,
-		className: (state) => clsx(stylex.props(styles.positioner).className, typeof className === "function" ? className(state) : className),
+		className: (state) => clsx$1(stylex.props(styles.positioner).className, typeof className === "function" ? className(state) : className),
 		...rest,
 		children: /* @__PURE__ */ jsx(FloatingLayerProvider, {
 			value: positionerNode,
@@ -98,14 +98,14 @@ const PopoverPositioner = ({ children, className, collisionPadding, hoverTrigger
 PopoverPositioner.displayName = "PopoverPositioner";
 const PopoverPopup = ({ className, xstyle, ...rest }) => {
 	return /* @__PURE__ */ jsx(Popover.Popup, {
-		className: (state) => clsx(stylex.props(styles.popup, xstyle).className, typeof className === "function" ? className(state) : className),
+		className: (state) => clsx$1(stylex.props(styles.popup, xstyle).className, typeof className === "function" ? className(state) : className),
 		...rest
 	});
 };
 PopoverPopup.displayName = "PopoverPopup";
 const PopoverArrow = ({ className, children, ...rest }) => {
 	return /* @__PURE__ */ jsx(Popover.Arrow, {
-		className: (state) => clsx(stylex.props(styles.arrow).className, typeof className === "function" ? className(state) : className),
+		className: (state) => clsx$1(stylex.props(styles.arrow).className, typeof className === "function" ? className(state) : className),
 		...rest,
 		children: children ?? PopoverArrowIcon
 	});
@@ -113,7 +113,7 @@ const PopoverArrow = ({ className, children, ...rest }) => {
 PopoverArrow.displayName = "PopoverArrow";
 const PopoverViewport = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx(Popover.Viewport, {
-		className: (state) => clsx(stylex.props(styles.viewport).className, "lobe-popover-viewport", typeof className === "function" ? className(state) : className),
+		className: (state) => clsx$1(stylex.props(styles.viewport).className, "lobe-popover-viewport", typeof className === "function" ? className(state) : className),
 		...rest
 	});
 };

package/es/Popover/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["BasePopover"],"sources":["../../src/Popover/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport {\n  cloneElement,\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  isValidElement,\n  useState,\n} from 'react';\n\nimport { FloatingLayerProvider } from '@/hooks/useFloatingLayer';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport { mergeRefs, useMergeRefs } from '@/utils/mergeRefs';\nimport { placementMap } from '@/utils/placement';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { PopoverArrowIcon } from './ArrowIcon';\nimport { usePopoverPortalContainer } from './PopoverPortal';\nimport { styles } from './style';\nimport { type PopoverPlacement } from './type';\n\nexport const PopoverRoot = BasePopover.Root;\nexport const PopoverBackdrop = BasePopover.Backdrop;\n\nexport type PopoverTriggerElementProps = Omit<\n  ComponentPropsWithRef<typeof BasePopover.Trigger>,\n  'children' | 'render'\n> & {\n  children: ComponentProps<typeof BasePopover.Trigger>['children'];\n};\n\nexport const PopoverTriggerElement = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: PopoverTriggerElementProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  if (isValidElement(children)) {\n    return (\n      <BasePopover.Trigger\n        {...rest}\n        nativeButton={resolvedNativeButton}\n        render={(props, state) => {\n          // Base UI's trigger props include `type=\"button\"` by default.\n          // If we render into a non-<button> element, that prop is invalid and can warn.\n          const resolvedProps = (() => {\n            if (isNativeButtonTriggerElement) return props as any;\n            // eslint-disable-next-line unused-imports/no-unused-vars\n            const { type, ref: triggerRef, ...restProps } = props as any;\n            return restProps;\n          })();\n\n          const mergedProps = mergeProps((children as any).props, resolvedProps);\n          const baseClassName =\n            typeof (mergedProps as any).className === 'function'\n              ? (mergedProps as any).className(state)\n              : (mergedProps as any).className;\n          const extraClassName =\n            typeof (className as any) === 'function' ? (className as any)(state) : className;\n\n          return cloneElement(children as any, {\n            ...mergedProps,\n            className: clsx(baseClassName, extraClassName),\n            ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n          });\n        }}\n      />\n    );\n  }\n\n  return (\n    <BasePopover.Trigger\n      {...rest}\n      className={className}\n      nativeButton={resolvedNativeButton}\n      ref={refProp}\n    >\n      {children}\n    </BasePopover.Trigger>\n  );\n};\n\nPopoverTriggerElement.displayName = 'PopoverTriggerElement';\n\nexport type PopoverPortalAtomProps = Omit<\n  ComponentProps<typeof BasePopover.Portal>,\n  'container'\n> & {\n  /**\n   * Portal container. When not provided, it uses the shared container created by `usePopoverPortalContainer`.\n   */\n  container?: HTMLElement | null;\n  /**\n   * Root element used by `usePopoverPortalContainer` to create the default container.\n   */\n  root?: HTMLElement | ShadowRoot | null;\n};\n\nexport const PopoverPortal = ({ container, root, children, ...rest }: PopoverPortalAtomProps) => {\n  const defaultContainer = usePopoverPortalContainer(root);\n  const resolvedContainer = container ?? defaultContainer;\n\n  if (!resolvedContainer) return null;\n\n  return (\n    <BasePopover.Portal container={resolvedContainer} {...rest}>\n      {children}\n    </BasePopover.Portal>\n  );\n};\n\nPopoverPortal.displayName = 'PopoverPortal';\n\nexport type PopoverPositionerAtomProps = ComponentProps<typeof BasePopover.Positioner> & {\n  hoverTrigger?: boolean;\n  placement?: PopoverPlacement;\n};\n\nexport const PopoverPositioner = ({\n  children,\n  className,\n  collisionPadding,\n  hoverTrigger,\n  placement,\n  align,\n  side,\n  sideOffset,\n  style,\n  ...rest\n}: PopoverPositionerAtomProps) => {\n  const placementConfig = placement ? placementMap[placement] : undefined;\n  const [positionerNode, setPositionerNode] = useState<HTMLDivElement | null>(null);\n  const explicitZIndex =\n    typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n      ? style.zIndex\n      : undefined;\n  const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n  const composedRef = useMergeRefs([setPositionerNode, zRef]);\n\n  const resolvedStyle =\n    typeof style === 'function'\n      ? (state: any) => ({ zIndex, ...style(state) })\n      : { zIndex, ...style };\n\n  return (\n    <BasePopover.Positioner\n      align={align ?? placementConfig?.align ?? 'center'}\n      collisionPadding={collisionPadding ?? getFloatingCollisionPadding()}\n      data-hover-trigger={hoverTrigger || undefined}\n      data-placement={placement}\n      ref={composedRef as any}\n      side={side ?? placementConfig?.side ?? 'bottom'}\n      sideOffset={sideOffset ?? 6}\n      style={resolvedStyle}\n      className={(state) =>\n        clsx(\n          stylex.props(styles.positioner).className,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      {...rest}\n    >\n      <FloatingLayerProvider value={positionerNode}>{children}</FloatingLayerProvider>\n    </BasePopover.Positioner>\n  );\n};\n\nPopoverPositioner.displayName = 'PopoverPositioner';\n\nexport type PopoverPopupAtomProps = ComponentProps<typeof BasePopover.Popup> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport const PopoverPopup = ({ className, xstyle, ...rest }: PopoverPopupAtomProps) => {\n  return (\n    <BasePopover.Popup\n      className={(state) =>\n        clsx(\n          stylex.props(styles.popup, xstyle).className,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      {...rest}\n    />\n  );\n};\n\nPopoverPopup.displayName = 'PopoverPopup';\n\nexport type PopoverArrowAtomProps = ComponentProps<typeof BasePopover.Arrow>;\n\nexport const PopoverArrow = ({ className, children, ...rest }: PopoverArrowAtomProps) => {\n  return (\n    <BasePopover.Arrow\n      className={(state) =>\n        clsx(\n          stylex.props(styles.arrow).className,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      {...rest}\n    >\n      {children ?? PopoverArrowIcon}\n    </BasePopover.Arrow>\n  );\n};\n\nPopoverArrow.displayName = 'PopoverArrow';\n\nexport type PopoverViewportAtomProps = ComponentProps<typeof BasePopover.Viewport>;\n\nexport const PopoverViewport = ({ className, ...rest }: PopoverViewportAtomProps) => {\n  return (\n    <BasePopover.Viewport\n      className={(state) =>\n        clsx(\n          stylex.props(styles.viewport).className,\n          'lobe-popover-viewport',\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      {...rest}\n    />\n  );\n};\n\nPopoverViewport.displayName = 'PopoverViewport';\n"],"mappings":"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"}
+{"version":3,"file":"atoms.mjs","names":["BasePopover","clsx"],"sources":["../../src/Popover/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport {\n  cloneElement,\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  isValidElement,\n  useState,\n} from 'react';\n\nimport { FloatingLayerProvider } from '@/hooks/useFloatingLayer';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport { mergeRefs, useMergeRefs } from '@/utils/mergeRefs';\nimport { placementMap } from '@/utils/placement';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { PopoverArrowIcon } from './ArrowIcon';\nimport { usePopoverPortalContainer } from './PopoverPortal';\nimport { styles } from './style';\nimport { type PopoverPlacement } from './type';\n\nexport const PopoverRoot = BasePopover.Root;\nexport const PopoverBackdrop = BasePopover.Backdrop;\n\nexport type PopoverTriggerElementProps = Omit<\n  ComponentPropsWithRef<typeof BasePopover.Trigger>,\n  'children' | 'render'\n> & {\n  children: ComponentProps<typeof BasePopover.Trigger>['children'];\n};\n\nexport const PopoverTriggerElement = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: PopoverTriggerElementProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  if (isValidElement(children)) {\n    return (\n      <BasePopover.Trigger\n        {...rest}\n        nativeButton={resolvedNativeButton}\n        render={(props, state) => {\n          // Base UI's trigger props include `type=\"button\"` by default.\n          // If we render into a non-<button> element, that prop is invalid and can warn.\n          const resolvedProps = (() => {\n            if (isNativeButtonTriggerElement) return props as any;\n            // eslint-disable-next-line unused-imports/no-unused-vars\n            const { type, ref: triggerRef, ...restProps } = props as any;\n            return restProps;\n          })();\n\n          const mergedProps = mergeProps((children as any).props, resolvedProps);\n          const baseClassName =\n            typeof (mergedProps as any).className === 'function'\n              ? (mergedProps as any).className(state)\n              : (mergedProps as any).className;\n          const extraClassName =\n            typeof (className as any) === 'function' ? (className as any)(state) : className;\n\n          return cloneElement(children as any, {\n            ...mergedProps,\n            className: clsx(baseClassName, extraClassName),\n            ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n          });\n        }}\n      />\n    );\n  }\n\n  return (\n    <BasePopover.Trigger\n      {...rest}\n      className={className}\n      nativeButton={resolvedNativeButton}\n      ref={refProp}\n    >\n      {children}\n    </BasePopover.Trigger>\n  );\n};\n\nPopoverTriggerElement.displayName = 'PopoverTriggerElement';\n\nexport type PopoverPortalAtomProps = Omit<\n  ComponentProps<typeof BasePopover.Portal>,\n  'container'\n> & {\n  /**\n   * Portal container. When not provided, it uses the shared container created by `usePopoverPortalContainer`.\n   */\n  container?: HTMLElement | null;\n  /**\n   * Root element used by `usePopoverPortalContainer` to create the default container.\n   */\n  root?: HTMLElement | ShadowRoot | null;\n};\n\nexport const PopoverPortal = ({ container, root, children, ...rest }: PopoverPortalAtomProps) => {\n  const defaultContainer = usePopoverPortalContainer(root);\n  const resolvedContainer = container ?? defaultContainer;\n\n  if (!resolvedContainer) return null;\n\n  return (\n    <BasePopover.Portal container={resolvedContainer} {...rest}>\n      {children}\n    </BasePopover.Portal>\n  );\n};\n\nPopoverPortal.displayName = 'PopoverPortal';\n\nexport type PopoverPositionerAtomProps = ComponentProps<typeof BasePopover.Positioner> & {\n  hoverTrigger?: boolean;\n  placement?: PopoverPlacement;\n};\n\nexport const PopoverPositioner = ({\n  children,\n  className,\n  collisionPadding,\n  hoverTrigger,\n  placement,\n  align,\n  side,\n  sideOffset,\n  style,\n  ...rest\n}: PopoverPositionerAtomProps) => {\n  const placementConfig = placement ? placementMap[placement] : undefined;\n  const [positionerNode, setPositionerNode] = useState<HTMLDivElement | null>(null);\n  const explicitZIndex =\n    typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n      ? style.zIndex\n      : undefined;\n  const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n  const composedRef = useMergeRefs([setPositionerNode, zRef]);\n\n  const resolvedStyle =\n    typeof style === 'function'\n      ? (state: any) => ({ zIndex, ...style(state) })\n      : { zIndex, ...style };\n\n  return (\n    <BasePopover.Positioner\n      align={align ?? placementConfig?.align ?? 'center'}\n      collisionPadding={collisionPadding ?? getFloatingCollisionPadding()}\n      data-hover-trigger={hoverTrigger || undefined}\n      data-placement={placement}\n      ref={composedRef as any}\n      side={side ?? placementConfig?.side ?? 'bottom'}\n      sideOffset={sideOffset ?? 6}\n      style={resolvedStyle}\n      className={(state) =>\n        clsx(\n          stylex.props(styles.positioner).className,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      {...rest}\n    >\n      <FloatingLayerProvider value={positionerNode}>{children}</FloatingLayerProvider>\n    </BasePopover.Positioner>\n  );\n};\n\nPopoverPositioner.displayName = 'PopoverPositioner';\n\nexport type PopoverPopupAtomProps = ComponentProps<typeof BasePopover.Popup> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport const PopoverPopup = ({ className, xstyle, ...rest }: PopoverPopupAtomProps) => {\n  return (\n    <BasePopover.Popup\n      className={(state) =>\n        clsx(\n          stylex.props(styles.popup, xstyle).className,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      {...rest}\n    />\n  );\n};\n\nPopoverPopup.displayName = 'PopoverPopup';\n\nexport type PopoverArrowAtomProps = ComponentProps<typeof BasePopover.Arrow>;\n\nexport const PopoverArrow = ({ className, children, ...rest }: PopoverArrowAtomProps) => {\n  return (\n    <BasePopover.Arrow\n      className={(state) =>\n        clsx(\n          stylex.props(styles.arrow).className,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      {...rest}\n    >\n      {children ?? PopoverArrowIcon}\n    </BasePopover.Arrow>\n  );\n};\n\nPopoverArrow.displayName = 'PopoverArrow';\n\nexport type PopoverViewportAtomProps = ComponentProps<typeof BasePopover.Viewport>;\n\nexport const PopoverViewport = ({ className, ...rest }: PopoverViewportAtomProps) => {\n  return (\n    <BasePopover.Viewport\n      className={(state) =>\n        clsx(\n          stylex.props(styles.viewport).className,\n          'lobe-popover-viewport',\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      {...rest}\n    />\n  );\n};\n\nPopoverViewport.displayName = 'PopoverViewport';\n"],"mappings":"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"}

package/es/ProTable/ProTable.d.mts

@@ -0,0 +1,11 @@
+import { ProTableProps } from "./type.mjs";
+import { ProTableLocaleResolved } from "./locale.mjs";
+//#region src/ProTable/ProTable.d.ts
+export declare const DEFAULT_PRO_TABLE_LOCALE: ProTableLocaleResolved;
+declare const ProTable: {
+  <T extends Record<string, any> = any, Params extends Record<string, any> = Record<string, any>>(props: ProTableProps<T, Params>): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { ProTable as default };
+//# sourceMappingURL=ProTable.d.mts.map

package/es/ProTable/ProTable.mjs

@@ -0,0 +1,208 @@
+"use client";
+import { useEventCallback } from "../hooks/useEventCallback.mjs";
+import Table from "../Table/Table.mjs";
+import { PRO_TABLE_LOCALE_EN_US } from "./locale.mjs";
+import { toTableProps } from "./utils.mjs";
+import { useColumnsState } from "./hooks/useColumnsState.mjs";
+import { useDensity } from "./hooks/useDensity.mjs";
+import { useFullscreen } from "./hooks/useFullscreen.mjs";
+import { usePageInfo } from "./hooks/usePageInfo.mjs";
+import { PRO_PREFIX_CLS, partClass, styles } from "./style.mjs";
+import { useProColumns } from "./hooks/useProColumns.mjs";
+import { useProLoading } from "./hooks/useProLoading.mjs";
+import { useProLocale } from "./hooks/useProLocale.mjs";
+import { useProRequest } from "./hooks/useProRequest.mjs";
+import { useRowCache } from "./hooks/useRowCache.mjs";
+import { useTableBindings } from "./hooks/useTableBindings.mjs";
+import KeywordInput from "./parts/KeywordInput.mjs";
+import LightFilter from "./parts/LightFilter.mjs";
+import SearchSection from "./parts/SearchSection.mjs";
+import TableAlert from "./parts/TableAlert.mjs";
+import Toolbar from "./parts/Toolbar.mjs";
+import ToolbarOptions from "./parts/ToolbarOptions.mjs";
+import { useEffect, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+//#region src/ProTable/ProTable.tsx
+const DEFAULT_PRO_TABLE_LOCALE = PRO_TABLE_LOCALE_EN_US;
+const DEFAULT_OPTIONS = {
+	density: true,
+	fullScreen: false,
+	reload: true,
+	setting: true
+};
+const assignRef = (ref, value) => {
+	if (!ref) return;
+	if (typeof ref === "function") ref(value);
+	else ref.current = value;
+};
+const ProTable = (props) => {
+	const { actionRef, cardBordered, className, columnEmptyText = "-", columns: columnsProp, columnsState, dataSource, defaultData, defaultSize, form: formConfig, headerTitle, loading: loadingProp, locale: localeProp, onSizeChange, options, pagination: paginationProp, request, rowSelection, search, size: sizeProp, style, tableAlertOptionRender, tableAlertRender, tableClassName, tableExtraRender, tableRender, tableStyle, toolbar, toolBarRender, tooltip, variant } = props;
+	const tableProps = toTableProps(props);
+	const columns = useMemo(() => columnsProp ?? [], [columnsProp]);
+	const InternalTable = Table;
+	const { locale, tableLocale } = useProLocale(localeProp);
+	const rootRef = useRef(null);
+	const handleRef = useRef(null);
+	const actionHolderRef = useRef(void 0);
+	const [size, setSize] = useDensity(sizeProp, defaultSize, onSizeChange);
+	const [fullscreen, toggleFullScreen] = useFullscreen(rootRef);
+	const columnsStateApi = useColumnsState(columns, columnsState);
+	const { config: paginationConfig, pageInfo, setPageInfo } = usePageInfo(paginationProp);
+	const { settingColumns, sortFieldOf, tableColumns } = useProColumns({
+		actionRef: actionHolderRef,
+		columnEmptyText,
+		columns,
+		copyLabel: locale.copy,
+		current: pageInfo.current,
+		pageSize: pageInfo.pageSize,
+		state: columnsStateApi.state
+	});
+	const requestApi = useProRequest({
+		pageInfo,
+		paginated: paginationConfig !== false,
+		props,
+		setPageInfo,
+		sortFieldOf
+	});
+	const { fetcher, form, searchFields } = requestApi;
+	const hasRequest = !!request;
+	const rows = request ? fetcher.data : dataSource ?? defaultData ?? [];
+	const { loading, tableLoading } = useProLoading(loadingProp, fetcher.loading, hasRequest);
+	const getRow = useRowCache(rows, tableProps.rowKey ?? "key");
+	const clearSelected = useEventCallback(() => handleRef.current?.clearSelection());
+	actionHolderRef.current = {
+		clearSelected,
+		fullScreen: toggleFullScreen,
+		getSortFilter: requestApi.getSortFilter,
+		nativeElement: rootRef.current,
+		pageInfo,
+		reload: requestApi.reload,
+		reloadAndRest: async () => {
+			clearSelected();
+			await requestApi.reload(true);
+		},
+		reset: requestApi.reset,
+		setPageInfo
+	};
+	useEffect(() => {
+		assignRef(actionRef, actionHolderRef.current);
+	});
+	const bindings = useTableBindings({
+		hasRequest,
+		pageInfo,
+		paginationConfig,
+		rowSelection,
+		setPageInfo
+	});
+	const optionConfig = options === false ? false : {
+		...DEFAULT_OPTIONS,
+		...options
+	};
+	const searchOption = optionConfig && optionConfig.search;
+	const lightMode = search !== false && search?.filterType === "light";
+	const reloading = !!loading && !!request;
+	const keywordDom = searchOption ? /* @__PURE__ */ jsx(KeywordInput, {
+		config: searchOption,
+		placeholder: locale.searchPlaceholder,
+		onSearch: requestApi.searchKeyword
+	}) : null;
+	const filterDom = lightMode && searchFields.length > 0 ? /* @__PURE__ */ jsx(LightFilter, {
+		fields: searchFields,
+		form,
+		ignoreRules: formConfig?.ignoreRules,
+		placeholder: {
+			input: locale.searchPlaceholder,
+			select: locale.selectPlaceholder
+		}
+	}) : null;
+	const hasOptions = optionConfig && Boolean(optionConfig.reload || optionConfig.density || optionConfig.fullScreen || optionConfig.setting);
+	const settingsDom = toolbar?.settings?.length ? toolbar.settings : toolbar?.settings === void 0 && hasOptions ? /* @__PURE__ */ jsx(ToolbarOptions, {
+		columnsState: columnsStateApi.state,
+		config: optionConfig,
+		fullscreen,
+		locale,
+		reloading,
+		settingColumns,
+		size,
+		onColumnsStateChange: columnsStateApi.setState,
+		onColumnsStateReset: columnsStateApi.resetState,
+		onReload: () => void requestApi.reload(),
+		onSizeChange: setSize,
+		onToggleFullScreen: toggleFullScreen
+	}) : null;
+	const title = headerTitle ?? toolbar?.title;
+	const toolbarDom = toolBarRender === false ? null : /* @__PURE__ */ jsx(Toolbar, {
+		actionRef: actionHolderRef,
+		actions: toolbar?.actions,
+		filter: filterDom,
+		getRow,
+		handleRef,
+		keyword: keywordDom,
+		settings: settingsDom,
+		subTitle: toolbar?.subTitle,
+		title,
+		toolBarRender: toolBarRender || void 0,
+		tooltip: tooltip ?? toolbar?.tooltip
+	});
+	const alertDom = rowSelection ? /* @__PURE__ */ jsx(TableAlert, {
+		alwaysShow: rowSelection.alwaysShowAlert,
+		getRow,
+		handleRef,
+		locale,
+		optionRender: tableAlertOptionRender,
+		render: tableAlertRender,
+		onClear: clearSelected
+	}) : null;
+	const tableDom = /* @__PURE__ */ jsx(InternalTable, {
+		...tableProps,
+		className: tableClassName,
+		columns: tableColumns,
+		dataSource: rows,
+		internalRef: handleRef,
+		loading: tableLoading,
+		locale: tableLocale,
+		pagination: bindings.pagination,
+		rowSelection: bindings.rowSelection,
+		size,
+		style: tableStyle,
+		variant,
+		onChange: requestApi.handleTableChange
+	});
+	const tableBody = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		toolbarDom,
+		alertDom,
+		tableDom
+	] });
+	const searchDom = search !== false && !lightMode && searchFields.length > 0 ? /* @__PURE__ */ jsx(SearchSection, {
+		fields: searchFields,
+		form,
+		loading: reloading,
+		locale,
+		props,
+		onReset: requestApi.handleReset
+	}) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx$1(styles.root, PRO_PREFIX_CLS, className),
+		"data-fullscreen": fullscreen || void 0,
+		ref: rootRef,
+		style,
+		children: [
+			searchDom,
+			tableExtraRender?.(props, rows),
+			/* @__PURE__ */ jsx("div", {
+				className: partClass(cardBordered, "table"),
+				children: tableRender ? tableRender(props, tableBody, {
+					alert: alertDom,
+					table: tableDom,
+					toolbar: toolbarDom
+				}) : tableBody
+			})
+		]
+	});
+};
+ProTable.displayName = "ProTable";
+//#endregion
+export { DEFAULT_PRO_TABLE_LOCALE, ProTable as default };
+
+//# sourceMappingURL=ProTable.mjs.map

package/es/ProTable/ProTable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProTable.mjs","names":["clsx"],"sources":["../../src/ProTable/ProTable.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ComponentType, type ReactNode, type Ref, useEffect, useMemo, useRef } from 'react';\n\nimport { useEventCallback } from '@/hooks/useEventCallback';\nimport Table from '@/Table';\nimport type { TableInternalHandle, TableInternalProps } from '@/Table/internal';\n\nimport { useColumnsState } from './hooks/useColumnsState';\nimport { useDensity } from './hooks/useDensity';\nimport { useFullscreen } from './hooks/useFullscreen';\nimport { usePageInfo } from './hooks/usePageInfo';\nimport { useProColumns } from './hooks/useProColumns';\nimport { useProLoading } from './hooks/useProLoading';\nimport { useProLocale } from './hooks/useProLocale';\nimport { useProRequest } from './hooks/useProRequest';\nimport { useRowCache } from './hooks/useRowCache';\nimport { useTableBindings } from './hooks/useTableBindings';\nimport { PRO_TABLE_LOCALE_EN_US } from './locale';\nimport KeywordInput from './parts/KeywordInput';\nimport LightFilter from './parts/LightFilter';\nimport SearchSection from './parts/SearchSection';\nimport TableAlert from './parts/TableAlert';\nimport Toolbar from './parts/Toolbar';\nimport ToolbarOptions from './parts/ToolbarOptions';\nimport { partClass, PRO_PREFIX_CLS, styles } from './style';\nimport type { ProTableActionType, ProTableProps } from './type';\nimport { toTableProps } from './utils';\n\nexport const DEFAULT_PRO_TABLE_LOCALE = PRO_TABLE_LOCALE_EN_US;\n\nconst DEFAULT_OPTIONS = { density: true, fullScreen: false, reload: true, setting: true };\n\nconst assignRef = <V,>(ref: Ref<V> | undefined, value: V) => {\n  if (!ref) return;\n  if (typeof ref === 'function') ref(value);\n  else (ref as { current: V }).current = value;\n};\n\nconst ProTable = <\n  T extends Record<string, any> = any,\n  Params extends Record<string, any> = Record<string, any>,\n>(\n  props: ProTableProps<T, Params>,\n) => {\n  const {\n    actionRef,\n    cardBordered,\n    className,\n    columnEmptyText = '-',\n    columns: columnsProp,\n    columnsState,\n    dataSource,\n    defaultData,\n    defaultSize,\n    form: formConfig,\n    headerTitle,\n    loading: loadingProp,\n    locale: localeProp,\n    onSizeChange,\n    options,\n    pagination: paginationProp,\n    request,\n    rowSelection,\n    search,\n    size: sizeProp,\n    style,\n    tableAlertOptionRender,\n    tableAlertRender,\n    tableClassName,\n    tableExtraRender,\n    tableRender,\n    tableStyle,\n    toolbar,\n    toolBarRender,\n    tooltip,\n    variant,\n  } = props;\n  const tableProps = toTableProps(props);\n  const columns = useMemo(() => columnsProp ?? [], [columnsProp]);\n  const InternalTable = Table as ComponentType<TableInternalProps<T>>;\n\n  const { locale, tableLocale } = useProLocale(localeProp);\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const handleRef = useRef<TableInternalHandle>(null);\n  const actionHolderRef = useRef<ProTableActionType | undefined>(undefined);\n  const [size, setSize] = useDensity(sizeProp, defaultSize, onSizeChange);\n  const [fullscreen, toggleFullScreen] = useFullscreen(rootRef);\n  const columnsStateApi = useColumnsState(columns, columnsState);\n  const { config: paginationConfig, pageInfo, setPageInfo } = usePageInfo(paginationProp);\n\n  const { settingColumns, sortFieldOf, tableColumns } = useProColumns<T>({\n    actionRef: actionHolderRef,\n    columnEmptyText,\n    columns,\n    copyLabel: locale.copy,\n    current: pageInfo.current,\n    pageSize: pageInfo.pageSize,\n    state: columnsStateApi.state,\n  });\n\n  const requestApi = useProRequest<T>({\n    pageInfo,\n    paginated: paginationConfig !== false,\n    props: props as ProTableProps<T, any>,\n    setPageInfo,\n    sortFieldOf,\n  });\n  const { fetcher, form, searchFields } = requestApi;\n\n  const hasRequest = !!request;\n  const rows: T[] = request ? fetcher.data : (dataSource ?? defaultData ?? []);\n  const { loading, tableLoading } = useProLoading(loadingProp, fetcher.loading, hasRequest);\n\n  const getRow = useRowCache(rows, (tableProps.rowKey ?? 'key') as string);\n  const clearSelected = useEventCallback(() => handleRef.current?.clearSelection());\n\n  const action: ProTableActionType = {\n    clearSelected,\n    fullScreen: toggleFullScreen,\n    getSortFilter: requestApi.getSortFilter,\n    nativeElement: rootRef.current,\n    pageInfo,\n    reload: requestApi.reload,\n    reloadAndRest: async () => {\n      clearSelected();\n      await requestApi.reload(true);\n    },\n    reset: requestApi.reset,\n    setPageInfo,\n  };\n  actionHolderRef.current = action;\n  useEffect(() => {\n    assignRef(actionRef as Ref<ProTableActionType>, actionHolderRef.current as ProTableActionType);\n  });\n\n  const bindings = useTableBindings<T>({\n    hasRequest,\n    pageInfo,\n    paginationConfig,\n    rowSelection,\n    setPageInfo,\n  });\n\n  const optionConfig = options === false ? false : { ...DEFAULT_OPTIONS, ...options };\n  const searchOption = optionConfig && optionConfig.search;\n  const lightMode = search !== false && search?.filterType === 'light';\n  const reloading = !!loading && !!request;\n\n  const keywordDom = searchOption ? (\n    <KeywordInput\n      config={searchOption}\n      placeholder={locale.searchPlaceholder}\n      onSearch={requestApi.searchKeyword}\n    />\n  ) : null;\n  const filterDom =\n    lightMode && searchFields.length > 0 ? (\n      <LightFilter\n        fields={searchFields}\n        form={form}\n        ignoreRules={formConfig?.ignoreRules}\n        placeholder={{ input: locale.searchPlaceholder, select: locale.selectPlaceholder }}\n      />\n    ) : null;\n  const hasOptions =\n    optionConfig &&\n    Boolean(\n      optionConfig.reload ||\n      optionConfig.density ||\n      optionConfig.fullScreen ||\n      optionConfig.setting,\n    );\n  const settingsDom: ReactNode = toolbar?.settings?.length ? (\n    toolbar.settings\n  ) : toolbar?.settings === undefined && hasOptions ? (\n    <ToolbarOptions\n      columnsState={columnsStateApi.state}\n      config={optionConfig}\n      fullscreen={fullscreen}\n      locale={locale}\n      reloading={reloading}\n      settingColumns={settingColumns}\n      size={size}\n      onColumnsStateChange={columnsStateApi.setState}\n      onColumnsStateReset={columnsStateApi.resetState}\n      onReload={() => void requestApi.reload()}\n      onSizeChange={setSize}\n      onToggleFullScreen={toggleFullScreen}\n    />\n  ) : null;\n\n  const title = headerTitle ?? toolbar?.title;\n  const toolbarDom =\n    toolBarRender === false ? null : (\n      <Toolbar<T>\n        actionRef={actionHolderRef}\n        actions={toolbar?.actions}\n        filter={filterDom}\n        getRow={getRow}\n        handleRef={handleRef}\n        keyword={keywordDom}\n        settings={settingsDom}\n        subTitle={toolbar?.subTitle}\n        title={title}\n        toolBarRender={toolBarRender || undefined}\n        tooltip={tooltip ?? toolbar?.tooltip}\n      />\n    );\n\n  const alertDom = rowSelection ? (\n    <TableAlert<T>\n      alwaysShow={rowSelection.alwaysShowAlert}\n      getRow={getRow}\n      handleRef={handleRef}\n      locale={locale}\n      optionRender={tableAlertOptionRender}\n      render={tableAlertRender}\n      onClear={clearSelected}\n    />\n  ) : null;\n\n  const tableDom = (\n    <InternalTable\n      {...tableProps}\n      className={tableClassName}\n      columns={tableColumns}\n      dataSource={rows}\n      internalRef={handleRef}\n      loading={tableLoading}\n      locale={tableLocale}\n      pagination={bindings.pagination}\n      rowSelection={bindings.rowSelection}\n      size={size}\n      style={tableStyle}\n      variant={variant}\n      onChange={requestApi.handleTableChange}\n    />\n  );\n\n  const tableBody = (\n    <>\n      {toolbarDom}\n      {alertDom}\n      {tableDom}\n    </>\n  );\n\n  const searchDom =\n    search !== false && !lightMode && searchFields.length > 0 ? (\n      <SearchSection<T>\n        fields={searchFields}\n        form={form}\n        loading={reloading}\n        locale={locale}\n        props={props}\n        onReset={requestApi.handleReset}\n      />\n    ) : null;\n\n  return (\n    <div\n      className={clsx(styles.root, PRO_PREFIX_CLS, className)}\n      data-fullscreen={fullscreen || undefined}\n      ref={rootRef}\n      style={style}\n    >\n      {searchDom}\n      {tableExtraRender?.(props, rows)}\n      <div className={partClass(cardBordered, 'table')}>\n        {tableRender\n          ? tableRender(props, tableBody, { alert: alertDom, table: tableDom, toolbar: toolbarDom })\n          : tableBody}\n      </div>\n    </div>\n  );\n};\n\nProTable.displayName = 'ProTable';\n\nexport default ProTable;\n"],"mappings":"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"}

package/es/ProTable/hooks/useColumnRequest.mjs

@@ -0,0 +1,55 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+//#region src/ProTable/hooks/useColumnRequest.ts
+const stable = (value) => {
+	try {
+		return JSON.stringify(value) ?? "";
+	} catch {
+		return "";
+	}
+};
+const useColumnRequest = (column) => {
+	const { debounceTime = 10, params, request } = column;
+	const [options, setOptions] = useState(void 0);
+	const [loading, setLoading] = useState(false);
+	const [keyWords, setKeyWords] = useState(void 0);
+	const requestRef = useRef(request);
+	requestRef.current = request;
+	const idRef = useRef(0);
+	const paramsKey = useMemo(() => stable(params), [params]);
+	const enabled = !!request;
+	useEffect(() => {
+		if (!enabled) return;
+		const id = ++idRef.current;
+		const timer = setTimeout(() => {
+			const run = requestRef.current;
+			if (!run) return;
+			setLoading(true);
+			Promise.resolve(run({
+				...params,
+				keyWords
+			})).then((list) => {
+				if (id === idRef.current) setOptions(Array.isArray(list) ? list : []);
+			}).catch(() => {
+				if (id === idRef.current) setOptions([]);
+			}).finally(() => {
+				if (id === idRef.current) setLoading(false);
+			});
+		}, Math.max(0, debounceTime));
+		return () => clearTimeout(timer);
+	}, [
+		enabled,
+		paramsKey,
+		keyWords,
+		debounceTime
+	]);
+	return {
+		enabled,
+		loading,
+		onSearch: enabled && !!column.fieldProps?.showSearch && column.fieldProps?.filterOption === false ? (value) => setKeyWords(value || void 0) : void 0,
+		options
+	};
+};
+//#endregion
+export { useColumnRequest };
+
+//# sourceMappingURL=useColumnRequest.mjs.map

package/es/ProTable/hooks/useColumnRequest.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnRequest.mjs","names":[],"sources":["../../../src/ProTable/hooks/useColumnRequest.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\n\nimport type { ProColumnType, ProTableRequestOption } from '../type';\n\nconst stable = (value: unknown) => {\n  try {\n    return JSON.stringify(value) ?? '';\n  } catch {\n    return '';\n  }\n};\n\nexport const useColumnRequest = (column: ProColumnType<any>) => {\n  const { debounceTime = 10, params, request } = column;\n  const [options, setOptions] = useState<ProTableRequestOption[] | undefined>(undefined);\n  const [loading, setLoading] = useState(false);\n  const [keyWords, setKeyWords] = useState<string | undefined>(undefined);\n  const requestRef = useRef(request);\n  requestRef.current = request;\n  const idRef = useRef(0);\n  const paramsKey = useMemo(() => stable(params), [params]);\n  const enabled = !!request;\n\n  useEffect(() => {\n    if (!enabled) return;\n    const id = ++idRef.current;\n    const timer = setTimeout(\n      () => {\n        const run = requestRef.current;\n        if (!run) return;\n        setLoading(true);\n        Promise.resolve(run({ ...params, keyWords }))\n          .then((list) => {\n            if (id === idRef.current) setOptions(Array.isArray(list) ? list : []);\n          })\n          .catch(() => {\n            if (id === idRef.current) setOptions([]);\n          })\n          .finally(() => {\n            if (id === idRef.current) setLoading(false);\n          });\n      },\n      // The first load is not debounced beyond the configured time; typing reuses it.\n      Math.max(0, debounceTime),\n    );\n    return () => clearTimeout(timer);\n  }, [enabled, paramsKey, keyWords, debounceTime]);\n\n  const remoteSearch =\n    enabled && !!column.fieldProps?.showSearch && column.fieldProps?.filterOption === false;\n\n  return {\n    enabled,\n    loading,\n    onSearch: remoteSearch ? (value: string) => setKeyWords(value || undefined) : undefined,\n    options,\n  };\n};\n"],"mappings":";;AAIA,MAAM,UAAU,UAAmB;CACjC,IAAI;EACF,OAAO,KAAK,UAAU,KAAK,KAAK;CAClC,QAAQ;EACN,OAAO;CACT;AACF;AAEA,MAAa,oBAAoB,WAA+B;CAC9D,MAAM,EAAE,eAAe,IAAI,QAAQ,YAAY;CAC/C,MAAM,CAAC,SAAS,cAAc,SAA8C,KAAA,CAAS;CACrF,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,UAAU,eAAe,SAA6B,KAAA,CAAS;CACtE,MAAM,aAAa,OAAO,OAAO;CACjC,WAAW,UAAU;CACrB,MAAM,QAAQ,OAAO,CAAC;CACtB,MAAM,YAAY,cAAc,OAAO,MAAM,GAAG,CAAC,MAAM,CAAC;CACxD,MAAM,UAAU,CAAC,CAAC;CAElB,gBAAgB;EACd,IAAI,CAAC,SAAS;EACd,MAAM,KAAK,EAAE,MAAM;EACnB,MAAM,QAAQ,iBACN;GACJ,MAAM,MAAM,WAAW;GACvB,IAAI,CAAC,KAAK;GACV,WAAW,IAAI;GACf,QAAQ,QAAQ,IAAI;IAAE,GAAG;IAAQ;GAAS,CAAC,CAAC,CAAC,CAC1C,MAAM,SAAS;IACd,IAAI,OAAO,MAAM,SAAS,WAAW,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,CAAC;GACtE,CAAC,CAAC,CACD,YAAY;IACX,IAAI,OAAO,MAAM,SAAS,WAAW,CAAC,CAAC;GACzC,CAAC,CAAC,CACD,cAAc;IACb,IAAI,OAAO,MAAM,SAAS,WAAW,KAAK;GAC5C,CAAC;EACL,GAEA,KAAK,IAAI,GAAG,YAAY,CAC1B;EACA,aAAa,aAAa,KAAK;CACjC,GAAG;EAAC;EAAS;EAAW;EAAU;CAAY,CAAC;CAK/C,OAAO;EACL;EACA;EACA,UALA,WAAW,CAAC,CAAC,OAAO,YAAY,cAAc,OAAO,YAAY,iBAAiB,SAKxD,UAAkB,YAAY,SAAS,KAAA,CAAS,IAAI,KAAA;EAC9E;CACF;AACF"}

package/es/ProTable/hooks/useColumnsState.mjs

@@ -0,0 +1,37 @@
+import { useEventCallback } from "../../hooks/useEventCallback.mjs";
+import { getProColumnKey, readPersistedState, writePersistedState } from "../utils.mjs";
+import { useState } from "react";
+//#region src/ProTable/hooks/useColumnsState.ts
+const useColumnsState = (columns, columnsState) => {
+	const persistKey = columnsState?.persistenceKey;
+	const persistType = columnsState?.persistenceType;
+	const [defaultState] = useState(() => {
+		const map = {};
+		columns.forEach((column, index) => {
+			if (column.fixed) map[getProColumnKey(column, index)] = { fixed: column.fixed };
+		});
+		return {
+			...map,
+			...columnsState?.defaultValue
+		};
+	});
+	const [innerState, setInnerState] = useState(() => readPersistedState(persistKey, persistType) ?? defaultState);
+	const setState = useEventCallback((next) => {
+		setInnerState(next);
+		writePersistedState(persistKey, persistType, next);
+		columnsState?.onChange?.(next);
+	});
+	return {
+		resetState: useEventCallback(() => {
+			writePersistedState(persistKey, persistType, void 0);
+			setInnerState(defaultState);
+			columnsState?.onChange?.(defaultState);
+		}),
+		setState,
+		state: columnsState?.value ?? innerState
+	};
+};
+//#endregion
+export { useColumnsState };
+
+//# sourceMappingURL=useColumnsState.mjs.map

package/es/ProTable/hooks/useColumnsState.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnsState.mjs","names":[],"sources":["../../../src/ProTable/hooks/useColumnsState.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nimport type { ProColumns, ProTableColumnsState, ProTableColumnsStateMap } from '../type';\nimport { getProColumnKey, readPersistedState, writePersistedState } from '../utils';\n\nexport const useColumnsState = (\n  columns: ProColumns<any>[],\n  columnsState: ProTableColumnsState | undefined,\n) => {\n  const persistKey = columnsState?.persistenceKey;\n  const persistType = columnsState?.persistenceType;\n  const [defaultState] = useState(() => {\n    const map: ProTableColumnsStateMap = {};\n    columns.forEach((column, index) => {\n      if (column.fixed) map[getProColumnKey(column, index)] = { fixed: column.fixed };\n    });\n    return { ...map, ...columnsState?.defaultValue };\n  });\n  const [innerState, setInnerState] = useState<ProTableColumnsStateMap>(\n    () => readPersistedState(persistKey, persistType) ?? defaultState,\n  );\n\n  const setState = useEventCallback((next: ProTableColumnsStateMap) => {\n    setInnerState(next);\n    writePersistedState(persistKey, persistType, next);\n    columnsState?.onChange?.(next);\n  });\n  const resetState = useEventCallback(() => {\n    writePersistedState(persistKey, persistType, undefined);\n    setInnerState(defaultState);\n    columnsState?.onChange?.(defaultState);\n  });\n\n  return { resetState, setState, state: columnsState?.value ?? innerState };\n};\n"],"mappings":";;;;AAOA,MAAa,mBACX,SACA,iBACG;CACH,MAAM,aAAa,cAAc;CACjC,MAAM,cAAc,cAAc;CAClC,MAAM,CAAC,gBAAgB,eAAe;EACpC,MAAM,MAA+B,CAAC;EACtC,QAAQ,SAAS,QAAQ,UAAU;GACjC,IAAI,OAAO,OAAO,IAAI,gBAAgB,QAAQ,KAAK,KAAK,EAAE,OAAO,OAAO,MAAM;EAChF,CAAC;EACD,OAAO;GAAE,GAAG;GAAK,GAAG,cAAc;EAAa;CACjD,CAAC;CACD,MAAM,CAAC,YAAY,iBAAiB,eAC5B,mBAAmB,YAAY,WAAW,KAAK,YACvD;CAEA,MAAM,WAAW,kBAAkB,SAAkC;EACnE,cAAc,IAAI;EAClB,oBAAoB,YAAY,aAAa,IAAI;EACjD,cAAc,WAAW,IAAI;CAC/B,CAAC;CAOD,OAAO;EAAE,YANU,uBAAuB;GACxC,oBAAoB,YAAY,aAAa,KAAA,CAAS;GACtD,cAAc,YAAY;GAC1B,cAAc,WAAW,YAAY;EACvC,CAEkB;EAAG;EAAU,OAAO,cAAc,SAAS;CAAW;AAC1E"}

package/es/ProTable/hooks/useDelayedFlag.mjs

@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+//#region src/ProTable/hooks/useDelayedFlag.ts
+const useDelayedFlag = (value, delay) => {
+	const [delayed, setDelayed] = useState(value && !delay);
+	useEffect(() => {
+		if (!value || !delay) {
+			setDelayed(value);
+			return;
+		}
+		const timer = setTimeout(() => setDelayed(true), delay);
+		return () => clearTimeout(timer);
+	}, [value, delay]);
+	return delay ? value && delayed : value;
+};
+//#endregion
+export { useDelayedFlag };
+
+//# sourceMappingURL=useDelayedFlag.mjs.map

package/es/ProTable/hooks/useDelayedFlag.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDelayedFlag.mjs","names":[],"sources":["../../../src/ProTable/hooks/useDelayedFlag.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport const useDelayedFlag = (value: boolean, delay: number | undefined) => {\n  const [delayed, setDelayed] = useState(value && !delay);\n  useEffect(() => {\n    if (!value || !delay) {\n      setDelayed(value);\n      return;\n    }\n    const timer = setTimeout(() => setDelayed(true), delay);\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n  return delay ? value && delayed : value;\n};\n"],"mappings":";;AAEA,MAAa,kBAAkB,OAAgB,UAA8B;CAC3E,MAAM,CAAC,SAAS,cAAc,SAAS,SAAS,CAAC,KAAK;CACtD,gBAAgB;EACd,IAAI,CAAC,SAAS,CAAC,OAAO;GACpB,WAAW,KAAK;GAChB;EACF;EACA,MAAM,QAAQ,iBAAiB,WAAW,IAAI,GAAG,KAAK;EACtD,aAAa,aAAa,KAAK;CACjC,GAAG,CAAC,OAAO,KAAK,CAAC;CACjB,OAAO,QAAQ,SAAS,UAAU;AACpC"}

package/es/ProTable/hooks/useDensity.mjs

@@ -0,0 +1,15 @@
+import { useEventCallback } from "../../hooks/useEventCallback.mjs";
+import { useState } from "react";
+//#region src/ProTable/hooks/useDensity.ts
+const useDensity = (size, defaultSize, onSizeChange) => {
+	const [innerSize, setInnerSize] = useState(defaultSize ?? "middle");
+	const setSize = useEventCallback((next) => {
+		setInnerSize(next);
+		onSizeChange?.(next);
+	});
+	return [size ?? innerSize, setSize];
+};
+//#endregion
+export { useDensity };
+
+//# sourceMappingURL=useDensity.mjs.map

package/es/ProTable/hooks/useDensity.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDensity.mjs","names":[],"sources":["../../../src/ProTable/hooks/useDensity.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nimport type { ProTableDensity } from '../type';\n\nexport const useDensity = (\n  size: ProTableDensity | undefined,\n  defaultSize: ProTableDensity | undefined,\n  onSizeChange: ((size: ProTableDensity) => void) | undefined,\n) => {\n  const [innerSize, setInnerSize] = useState<ProTableDensity>(defaultSize ?? 'middle');\n  const setSize = useEventCallback((next: ProTableDensity) => {\n    setInnerSize(next);\n    onSizeChange?.(next);\n  });\n  return [size ?? innerSize, setSize] as const;\n};\n"],"mappings":";;;AAMA,MAAa,cACX,MACA,aACA,iBACG;CACH,MAAM,CAAC,WAAW,gBAAgB,SAA0B,eAAe,QAAQ;CACnF,MAAM,UAAU,kBAAkB,SAA0B;EAC1D,aAAa,IAAI;EACjB,eAAe,IAAI;CACrB,CAAC;CACD,OAAO,CAAC,QAAQ,WAAW,OAAO;AACpC"}

package/es/ProTable/hooks/useFetchData.mjs

@@ -0,0 +1,97 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/ProTable/hooks/useFetchData.ts
+const useFetchData = (options) => {
+	const [data, setData] = useState(options.defaultData ?? []);
+	const [loading, setLoading] = useState(false);
+	const latest = useRef(options);
+	latest.current = options;
+	const requestId = useRef(0);
+	const [enabled, setEnabled] = useState(!options.manual);
+	const [token, setToken] = useState(0);
+	const pending = useRef([]);
+	const updateLoading = (next) => {
+		setLoading(next);
+		latest.current.onLoadingChange?.(next);
+	};
+	const run = useCallback(async () => {
+		const opts = latest.current;
+		if (!opts.request) return;
+		const id = ++requestId.current;
+		updateLoading(true);
+		try {
+			const params = { ...opts.getParams() };
+			if (opts.paginated) {
+				params.current = opts.pageInfo.current;
+				params.pageSize = opts.pageInfo.pageSize;
+			}
+			const response = await opts.request(params, opts.sort, opts.filter);
+			if (id !== requestId.current) return;
+			if (response.success === false) return;
+			const raw = response.data ?? [];
+			const next = opts.postData ? opts.postData(raw) : raw;
+			setData(next);
+			opts.setTotal(response.total ?? next.length);
+			opts.onLoad?.(next);
+			opts.onDataSourceChange?.(next);
+		} catch (error) {
+			if (id !== requestId.current) return;
+			if (opts.onRequestError) opts.onRequestError(error);
+			else console.error(error);
+		} finally {
+			if (id === requestId.current) updateLoading(false);
+			const resolvers = pending.current;
+			pending.current = [];
+			resolvers.forEach((resolve) => resolve());
+		}
+	}, []);
+	const { current, pageSize } = options.pageInfo;
+	useEffect(() => {
+		if (!enabled || !latest.current.request) return;
+		const delay = latest.current.debounceTime;
+		if (delay <= 0) {
+			run();
+			return;
+		}
+		const timer = setTimeout(() => void run(), delay);
+		return () => clearTimeout(timer);
+	}, [
+		enabled,
+		token,
+		options.depsKey,
+		current,
+		pageSize,
+		run
+	]);
+	useEffect(() => {
+		const { polling } = latest.current;
+		if (!polling || loading || !enabled) return;
+		const interval = typeof polling === "function" ? polling(data) : polling;
+		if (!interval) return;
+		const timer = setTimeout(() => void run(), Math.max(interval, 2e3));
+		return () => clearTimeout(timer);
+	}, [
+		data,
+		loading,
+		enabled,
+		options.polling,
+		run
+	]);
+	return {
+		data,
+		loading,
+		reload: useCallback(() => new Promise((resolve) => {
+			if (!latest.current.request) {
+				resolve();
+				return;
+			}
+			pending.current.push(resolve);
+			setEnabled(true);
+			setToken((value) => value + 1);
+		}), []),
+		setData
+	};
+};
+//#endregion
+export { useFetchData };
+
+//# sourceMappingURL=useFetchData.mjs.map

package/es/ProTable/hooks/useFetchData.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetchData.mjs","names":[],"sources":["../../../src/ProTable/hooks/useFetchData.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { SortOrder } from '@/Table/type';\n\nimport type { ProTablePageInfo, ProTableRequest, ProTableRequestFilter } from '../type';\n\ntype Filter = Record<string, (string | number | boolean)[] | null>;\n\nexport interface UseFetchDataOptions<T> {\n  debounceTime: number;\n  defaultData?: T[];\n  depsKey: string;\n  filter: Filter;\n  getParams: () => Record<string, any>;\n  manual: boolean;\n  onDataSourceChange?: (data: T[]) => void;\n  onLoad?: (data: T[]) => void;\n  onLoadingChange?: (loading: boolean) => void;\n  onRequestError?: (error: Error) => void;\n  pageInfo: ProTablePageInfo;\n  paginated: boolean;\n  polling?: number | ((data: T[]) => number);\n  postData?: (data: T[]) => T[];\n  request?: ProTableRequest<T, any>;\n  setTotal: (total: number) => void;\n  sort: Record<string, SortOrder>;\n}\n\nexport const useFetchData = <T>(options: UseFetchDataOptions<T>) => {\n  const [data, setData] = useState<T[]>(options.defaultData ?? []);\n  const [loading, setLoading] = useState(false);\n  const latest = useRef(options);\n  latest.current = options;\n  const requestId = useRef(0);\n  const [enabled, setEnabled] = useState(!options.manual);\n  const [token, setToken] = useState(0);\n  const pending = useRef<(() => void)[]>([]);\n\n  const updateLoading = (next: boolean) => {\n    setLoading(next);\n    latest.current.onLoadingChange?.(next);\n  };\n\n  const run = useCallback(async () => {\n    const opts = latest.current;\n    if (!opts.request) return;\n    const id = ++requestId.current;\n    updateLoading(true);\n    try {\n      const params: Record<string, any> = { ...opts.getParams() };\n      if (opts.paginated) {\n        params.current = opts.pageInfo.current;\n        params.pageSize = opts.pageInfo.pageSize;\n      }\n      const response = await opts.request(\n        params as any,\n        opts.sort,\n        opts.filter as ProTableRequestFilter,\n      );\n      if (id !== requestId.current) return;\n      if (response.success === false) {\n        // Pro keeps the previous data when the request reports failure.\n        return;\n      }\n      const raw = response.data ?? [];\n      const next = opts.postData ? opts.postData(raw) : raw;\n      setData(next);\n      opts.setTotal(response.total ?? next.length);\n      opts.onLoad?.(next);\n      opts.onDataSourceChange?.(next);\n    } catch (error) {\n      if (id !== requestId.current) return;\n      if (opts.onRequestError) opts.onRequestError(error as Error);\n      else console.error(error);\n    } finally {\n      if (id === requestId.current) updateLoading(false);\n      const resolvers = pending.current;\n      pending.current = [];\n      resolvers.forEach((resolve) => resolve());\n    }\n  }, []);\n\n  const { current, pageSize } = options.pageInfo;\n  useEffect(() => {\n    if (!enabled || !latest.current.request) return;\n    const delay = latest.current.debounceTime;\n    if (delay <= 0) {\n      void run();\n      return;\n    }\n    const timer = setTimeout(() => void run(), delay);\n    return () => clearTimeout(timer);\n  }, [enabled, token, options.depsKey, current, pageSize, run]);\n\n  useEffect(() => {\n    const { polling } = latest.current;\n    if (!polling || loading || !enabled) return;\n    const interval = typeof polling === 'function' ? polling(data) : polling;\n    if (!interval) return;\n    const timer = setTimeout(() => void run(), Math.max(interval, 2000));\n    return () => clearTimeout(timer);\n  }, [data, loading, enabled, options.polling, run]);\n\n  const reload = useCallback(\n    () =>\n      new Promise<void>((resolve) => {\n        if (!latest.current.request) {\n          resolve();\n          return;\n        }\n        pending.current.push(resolve);\n        setEnabled(true);\n        setToken((value) => value + 1);\n      }),\n    [],\n  );\n\n  return { data, loading, reload, setData };\n};\n"],"mappings":";;AA4BA,MAAa,gBAAmB,YAAoC;CAClE,MAAM,CAAC,MAAM,WAAW,SAAc,QAAQ,eAAe,CAAC,CAAC;CAC/D,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,SAAS,OAAO,OAAO;CAC7B,OAAO,UAAU;CACjB,MAAM,YAAY,OAAO,CAAC;CAC1B,MAAM,CAAC,SAAS,cAAc,SAAS,CAAC,QAAQ,MAAM;CACtD,MAAM,CAAC,OAAO,YAAY,SAAS,CAAC;CACpC,MAAM,UAAU,OAAuB,CAAC,CAAC;CAEzC,MAAM,iBAAiB,SAAkB;EACvC,WAAW,IAAI;EACf,OAAO,QAAQ,kBAAkB,IAAI;CACvC;CAEA,MAAM,MAAM,YAAY,YAAY;EAClC,MAAM,OAAO,OAAO;EACpB,IAAI,CAAC,KAAK,SAAS;EACnB,MAAM,KAAK,EAAE,UAAU;EACvB,cAAc,IAAI;EAClB,IAAI;GACF,MAAM,SAA8B,EAAE,GAAG,KAAK,UAAU,EAAE;GAC1D,IAAI,KAAK,WAAW;IAClB,OAAO,UAAU,KAAK,SAAS;IAC/B,OAAO,WAAW,KAAK,SAAS;GAClC;GACA,MAAM,WAAW,MAAM,KAAK,QAC1B,QACA,KAAK,MACL,KAAK,MACP;GACA,IAAI,OAAO,UAAU,SAAS;GAC9B,IAAI,SAAS,YAAY,OAEvB;GAEF,MAAM,MAAM,SAAS,QAAQ,CAAC;GAC9B,MAAM,OAAO,KAAK,WAAW,KAAK,SAAS,GAAG,IAAI;GAClD,QAAQ,IAAI;GACZ,KAAK,SAAS,SAAS,SAAS,KAAK,MAAM;GAC3C,KAAK,SAAS,IAAI;GAClB,KAAK,qBAAqB,IAAI;EAChC,SAAS,OAAO;GACd,IAAI,OAAO,UAAU,SAAS;GAC9B,IAAI,KAAK,gBAAgB,KAAK,eAAe,KAAc;QACtD,QAAQ,MAAM,KAAK;EAC1B,UAAU;GACR,IAAI,OAAO,UAAU,SAAS,cAAc,KAAK;GACjD,MAAM,YAAY,QAAQ;GAC1B,QAAQ,UAAU,CAAC;GACnB,UAAU,SAAS,YAAY,QAAQ,CAAC;EAC1C;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,EAAE,SAAS,aAAa,QAAQ;CACtC,gBAAgB;EACd,IAAI,CAAC,WAAW,CAAC,OAAO,QAAQ,SAAS;EACzC,MAAM,QAAQ,OAAO,QAAQ;EAC7B,IAAI,SAAS,GAAG;GACd,IAAS;GACT;EACF;EACA,MAAM,QAAQ,iBAAiB,KAAK,IAAI,GAAG,KAAK;EAChD,aAAa,aAAa,KAAK;CACjC,GAAG;EAAC;EAAS;EAAO,QAAQ;EAAS;EAAS;EAAU;CAAG,CAAC;CAE5D,gBAAgB;EACd,MAAM,EAAE,YAAY,OAAO;EAC3B,IAAI,CAAC,WAAW,WAAW,CAAC,SAAS;EACrC,MAAM,WAAW,OAAO,YAAY,aAAa,QAAQ,IAAI,IAAI;EACjE,IAAI,CAAC,UAAU;EACf,MAAM,QAAQ,iBAAiB,KAAK,IAAI,GAAG,KAAK,IAAI,UAAU,GAAI,CAAC;EACnE,aAAa,aAAa,KAAK;CACjC,GAAG;EAAC;EAAM;EAAS;EAAS,QAAQ;EAAS;CAAG,CAAC;CAgBjD,OAAO;EAAE;EAAM;EAAS,QAdT,kBAEX,IAAI,SAAe,YAAY;GAC7B,IAAI,CAAC,OAAO,QAAQ,SAAS;IAC3B,QAAQ;IACR;GACF;GACA,QAAQ,QAAQ,KAAK,OAAO;GAC5B,WAAW,IAAI;GACf,UAAU,UAAU,QAAQ,CAAC;EAC/B,CAAC,GACH,CAAC,CAG0B;EAAG;CAAQ;AAC1C"}

package/es/ProTable/hooks/useFullscreen.mjs

@@ -0,0 +1,22 @@
+import { useEventCallback } from "../../hooks/useEventCallback.mjs";
+import { useEffect, useState } from "react";
+//#region src/ProTable/hooks/useFullscreen.ts
+const useFullscreen = (rootRef) => {
+	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);
+	}, [rootRef]);
+	return [fullscreen, useEventCallback(() => {
+		const node = rootRef.current;
+		if (!node || typeof document === "undefined") return;
+		if (document.fullscreenElement) document.exitFullscreen?.();
+		else node.requestFullscreen?.();
+	})];
+};
+//#endregion
+export { useFullscreen };
+
+//# sourceMappingURL=useFullscreen.mjs.map

package/es/ProTable/hooks/useFullscreen.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFullscreen.mjs","names":[],"sources":["../../../src/ProTable/hooks/useFullscreen.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from 'react';\n\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nexport const useFullscreen = (rootRef: RefObject<HTMLDivElement | null>) => {\n  const [fullscreen, setFullscreen] = useState(false);\n  useEffect(() => {\n    if (typeof document === 'undefined') return;\n    const sync = () => setFullscreen(document.fullscreenElement === rootRef.current);\n    document.addEventListener('fullscreenchange', sync);\n    return () => document.removeEventListener('fullscreenchange', sync);\n  }, [rootRef]);\n  const toggle = useEventCallback(() => {\n    const node = rootRef.current;\n    if (!node || typeof document === 'undefined') return;\n    if (document.fullscreenElement) void document.exitFullscreen?.();\n    else void node.requestFullscreen?.();\n  });\n  return [fullscreen, toggle] as const;\n};\n"],"mappings":";;;AAIA,MAAa,iBAAiB,YAA8C;CAC1E,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,gBAAgB;EACd,IAAI,OAAO,aAAa,aAAa;EACrC,MAAM,aAAa,cAAc,SAAS,sBAAsB,QAAQ,OAAO;EAC/E,SAAS,iBAAiB,oBAAoB,IAAI;EAClD,aAAa,SAAS,oBAAoB,oBAAoB,IAAI;CACpE,GAAG,CAAC,OAAO,CAAC;CAOZ,OAAO,CAAC,YANO,uBAAuB;EACpC,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,QAAQ,OAAO,aAAa,aAAa;EAC9C,IAAI,SAAS,mBAAmB,SAAc,iBAAiB;OAC1D,KAAU,oBAAoB;CACrC,CACyB,CAAC;AAC5B"}