@lobehub/ui 6.0.0-beta.1 → 6.0.0-beta.11

package/es/Popover/atoms.mjs

@@ -1,5 +1,6 @@
 "use client";
 import { useNativeButton } from "../hooks/useNativeButton.mjs";
+import { mergeRefs, useMergeRefs } from "../utils/mergeRefs.mjs";
 import { FloatingLayerProvider } from "../hooks/useFloatingLayer.mjs";
 import { getFloatingCollisionPadding } from "../internal/floating/collisionPadding.mjs";
 import { placementMap } from "../utils/placement.mjs";
@@ -9,10 +10,9 @@ 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 { mergeRefs, useMergeRefs } from "react-merge-refs";
 import { Popover } from "@base-ui/react/popover";
 //#region src/Popover/atoms.tsx
 const PopoverRoot = Popover.Root;
@@ -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';\nimport { mergeRefs, useMergeRefs } from 'react-merge-refs';\n\nimport { FloatingLayerProvider } from '@/hooks/useFloatingLayer';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\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/Popover/style.mjs

@@ -61,7 +61,7 @@ const styles = {
 		"--lobe-popover-animation-scale": "lb191ky9q",
 		"--lobe-popover-animation-translate": "lb10lwwj9",
 		"--lobe-popover-layout-duration": "lbpmwb57 lbvabi",
-		"--lobe-popover-layout-ease": "lb18d1rk7",
+		"--lobe-popover-layout-ease": "lb1yl6ih0",
 		"--lobe-popover-translate-x": "lbdtzx1f lb1u18tlr lb8cr33m",
 		"--lobe-popover-translate-y": "lb70ox3w lb132x4ng lb19ms9b6 lb1jpw2w9",
 		kfzvcC: "lb1tblq73",

package/es/Popover/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Popover/style.ts"],"sourcesContent":["import './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst layoutAnimation = ':is([data-layout-animation])';\nconst instantOrRepop = ':is([data-instant], [data-repop])';\nconst instant = ':is([data-instant])';\nconst popupLayoutTiming =\n  ':is([data-layout-animation]):not([data-repop], [data-ending-style], [data-instant])';\nconst popupLayoutProperty = ':is([data-layout-animation]):not([data-repop], [data-instant])';\nconst popupRepopTiming = ':is([data-repop]):not([data-ending-style], [data-instant])';\nconst popupEndingTiming = ':is([data-ending-style]):not([data-instant])';\nconst positionerLayout = ':is([data-layout-animation]):not([data-instant], [data-repop])';\nconst startingOrEnding = ':is([data-starting-style], [data-ending-style])';\nconst anchorHidden = \":is([data-anchor-hidden], [data-zero-origin='true'])\";\nconst placementTop =\n  \":is([data-placement='top'], [data-placement='topLeft'], [data-placement='topRight'])\";\nconst placementLeft =\n  \":is([data-placement='left'], [data-placement='leftTop'], [data-placement='leftBottom'])\";\nconst placementRight =\n  \":is([data-placement='right'], [data-placement='rightTop'], [data-placement='rightBottom'])\";\n\nconst springGlide =\n  'linear(0, 0.041, 0.14, 0.268, 0.407, 0.541, 0.661, 0.765, 0.849, 0.915, 0.964, 0.998, 1.02, 1.032, 1.038, 1.039, 1.036, 1.032, 1.027, 1.022, 1.016, 1.012, 1.008, 1.005, 1.003)';\n\nexport const styles = stylex.create({\n  arrow: {\n    '--lobe-popover-arrow-offset-block': '5px',\n    '--lobe-popover-arrow-offset-inline': '8px',\n    'transition':\n      'inset-inline-start var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease), inset-block-start var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease)',\n    'display': 'flex',\n    'insetBlockEnd': {\n      'default': null,\n      \":is([data-side='top'])\": 'calc(var(--lobe-popover-arrow-offset-block) * -1)',\n    },\n    'insetBlockStart': {\n      'default': null,\n      \":is([data-side='bottom'])\": 'calc(var(--lobe-popover-arrow-offset-block) * -1)',\n    },\n    'insetInlineEnd': {\n      'default': null,\n      \":is([data-side='left'])\": 'calc(var(--lobe-popover-arrow-offset-inline) * -1)',\n    },\n    'insetInlineStart': {\n      'default': null,\n      \":is([data-side='right'])\": 'calc(var(--lobe-popover-arrow-offset-inline) * -1)',\n    },\n    'pointerEvents': 'none',\n    'position': 'absolute',\n    'transform': {\n      'default': null,\n      \":is([data-side='left'])\": 'rotate(90deg)',\n      \":is([data-side='right'])\": 'rotate(-90deg)',\n      \":is([data-side='top'])\": 'rotate(180deg)',\n    },\n    'transformOrigin': 'center',\n    'height': 6,\n    'width': 12,\n  },\n  arrowFill: {\n    fill: cssVar.colorBgElevated,\n  },\n  arrowStroke: {\n    fill: 'none',\n    stroke: cssVar.colorBorder,\n    strokeWidth: '1px',\n  },\n  arrowSvg: {\n    display: 'block',\n    height: '100%',\n    width: '100%',\n  },\n\n  popup: {\n    borderRadius: cssVar.borderRadius,\n    outline: 'none',\n    backgroundColor: cssVar.colorBgElevated,\n    boxShadow: `${cssVar.boxShadowSecondary}, var(--lobe-ring)`,\n    boxSizing: 'border-box',\n    color: cssVar.colorText,\n    opacity: { default: null, [startingOrEnding]: 0 },\n    position: 'relative',\n    transform: {\n      default: null,\n      [startingOrEnding]:\n        'translate3d(var(--lobe-popover-translate-x), var(--lobe-popover-translate-y), 0) scale(var(--lobe-popover-animation-scale))',\n    },\n    transformOrigin: 'var(--transform-origin)',\n    transitionDuration: {\n      default: 'var(--lobe-popover-animation-duration)',\n      [instant]: '0s',\n      [popupEndingTiming]: 'var(--lobe-popover-animation-duration-exit)',\n      [popupLayoutTiming]:\n        'var(--lobe-popover-animation-duration), var(--lobe-popover-animation-duration), var(--lobe-popover-layout-duration), var(--lobe-popover-layout-duration)',\n      [popupRepopTiming]: '0s',\n    },\n    transitionProperty: {\n      default: 'opacity, transform',\n      [instantOrRepop]: 'none',\n      [popupLayoutProperty]: 'opacity, transform, width, height',\n    },\n    transitionTimingFunction: {\n      default: 'var(--lobe-popover-animation-ease-out)',\n      [instant]: 'ease',\n      [popupEndingTiming]: 'var(--lobe-popover-animation-ease-in)',\n      [popupLayoutTiming]:\n        'var(--lobe-popover-animation-ease-out), var(--lobe-popover-animation-ease-out), var(--lobe-popover-layout-ease), var(--lobe-popover-layout-ease)',\n      [popupRepopTiming]: 'ease',\n    },\n    height: { default: null, [layoutAnimation]: 'var(--popup-height, auto)' },\n    maxWidth: 'var(--available-width)',\n    minWidth: 120,\n    width: { default: null, [layoutAnimation]: 'var(--popup-width, auto)' },\n  },\n\n  positioner: {\n    '--lobe-popover-animation-duration': '150ms',\n    '--lobe-popover-animation-duration-exit': '75ms',\n    '--lobe-popover-animation-ease-in': 'ease-in',\n    '--lobe-popover-animation-ease-out': cssVar.motionEaseOut,\n    '--lobe-popover-animation-scale': '0.96',\n    '--lobe-popover-animation-translate': '6px',\n    '--lobe-popover-layout-duration': { default: '380ms', [reducedMotion]: '0s' },\n    '--lobe-popover-layout-ease': springGlide,\n    '--lobe-popover-translate-x': {\n      default: '0',\n      [placementLeft]: 'var(--lobe-popover-animation-translate)',\n      [placementRight]: 'calc(var(--lobe-popover-animation-translate) * -1)',\n    },\n    '--lobe-popover-translate-y': {\n      default: 'calc(var(--lobe-popover-animation-translate) * -1)',\n      [placementLeft]: '0',\n      [placementRight]: '0',\n      [placementTop]: 'var(--lobe-popover-animation-translate)',\n    },\n    'pointerEvents': { [anchorHidden]: 'none', default: null },\n    'transitionDuration': {\n      default: 'var(--lobe-popover-animation-duration)',\n      [instantOrRepop]: '0s',\n      [positionerLayout]: 'var(--lobe-popover-layout-duration)',\n    },\n    'transitionProperty': {\n      default: 'none',\n      [positionerLayout]:\n        'inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform',\n    },\n    'transitionTimingFunction': {\n      default: 'var(--lobe-popover-animation-ease-out)',\n      [instantOrRepop]: 'ease',\n      [positionerLayout]: 'var(--lobe-popover-layout-ease)',\n    },\n    'visibility': { [anchorHidden]: 'hidden', default: null },\n    'zIndex': 1100,\n    'height': 'var(--positioner-height)',\n    'width': 'min(var(--positioner-width), var(--available-width))',\n  },\n\n  viewport: {\n    '--lobe-popover-content-blur': '4px',\n    '--lobe-popover-content-shift': '8px',\n    '--lobe-popover-viewport-inline-padding': '12px',\n    'overflow': 'clip',\n    'paddingBlock': 12,\n    'paddingInline': 'var(--lobe-popover-viewport-inline-padding)',\n    'position': 'relative',\n  },\n});\n"],"mappings":";AAmBA,MAAa,SAAS;CACpB,OAAO;EACL,qCAAqC;EACrC,sCAAsC;EACtC,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,qCAAqC;EACrC,0CAA0C;EAC1C,oCAAoC;EACpC,qCAAqC;EACrC,kCAAkC;EAClC,sCAAsC;EACtC,kCAAkC;EAClC,8BAA8B;EAC9B,8BAA8B;EAC9B,8BAA8B;EAC9B,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,+BAA+B;EAC/B,gCAAgC;EAChC,0CAA0C;EAC1C,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Popover/style.ts"],"sourcesContent":["import './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst layoutAnimation = ':is([data-layout-animation])';\nconst instantOrRepop = ':is([data-instant], [data-repop])';\nconst instant = ':is([data-instant])';\nconst popupLayoutTiming =\n  ':is([data-layout-animation]):not([data-repop], [data-ending-style], [data-instant])';\nconst popupLayoutProperty = ':is([data-layout-animation]):not([data-repop], [data-instant])';\nconst popupRepopTiming = ':is([data-repop]):not([data-ending-style], [data-instant])';\nconst popupEndingTiming = ':is([data-ending-style]):not([data-instant])';\nconst positionerLayout = ':is([data-layout-animation]):not([data-instant], [data-repop])';\nconst startingOrEnding = ':is([data-starting-style], [data-ending-style])';\nconst anchorHidden = \":is([data-anchor-hidden], [data-zero-origin='true'])\";\nconst placementTop =\n  \":is([data-placement='top'], [data-placement='topLeft'], [data-placement='topRight'])\";\nconst placementLeft =\n  \":is([data-placement='left'], [data-placement='leftTop'], [data-placement='leftBottom'])\";\nconst placementRight =\n  \":is([data-placement='right'], [data-placement='rightTop'], [data-placement='rightBottom'])\";\n\nexport const styles = stylex.create({\n  arrow: {\n    '--lobe-popover-arrow-offset-block': '5px',\n    '--lobe-popover-arrow-offset-inline': '8px',\n    'transition':\n      'inset-inline-start var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease), inset-block-start var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease)',\n    'display': 'flex',\n    'insetBlockEnd': {\n      'default': null,\n      \":is([data-side='top'])\": 'calc(var(--lobe-popover-arrow-offset-block) * -1)',\n    },\n    'insetBlockStart': {\n      'default': null,\n      \":is([data-side='bottom'])\": 'calc(var(--lobe-popover-arrow-offset-block) * -1)',\n    },\n    'insetInlineEnd': {\n      'default': null,\n      \":is([data-side='left'])\": 'calc(var(--lobe-popover-arrow-offset-inline) * -1)',\n    },\n    'insetInlineStart': {\n      'default': null,\n      \":is([data-side='right'])\": 'calc(var(--lobe-popover-arrow-offset-inline) * -1)',\n    },\n    'pointerEvents': 'none',\n    'position': 'absolute',\n    'transform': {\n      'default': null,\n      \":is([data-side='left'])\": 'rotate(90deg)',\n      \":is([data-side='right'])\": 'rotate(-90deg)',\n      \":is([data-side='top'])\": 'rotate(180deg)',\n    },\n    'transformOrigin': 'center',\n    'height': 6,\n    'width': 12,\n  },\n  arrowFill: {\n    fill: cssVar.colorBgElevated,\n  },\n  arrowStroke: {\n    fill: 'none',\n    stroke: cssVar.colorBorder,\n    strokeWidth: '1px',\n  },\n  arrowSvg: {\n    display: 'block',\n    height: '100%',\n    width: '100%',\n  },\n\n  popup: {\n    borderRadius: cssVar.borderRadius,\n    outline: 'none',\n    backgroundColor: cssVar.colorBgElevated,\n    boxShadow: `${cssVar.boxShadowSecondary}, var(--lobe-ring)`,\n    boxSizing: 'border-box',\n    color: cssVar.colorText,\n    opacity: { default: null, [startingOrEnding]: 0 },\n    position: 'relative',\n    transform: {\n      default: null,\n      [startingOrEnding]:\n        'translate3d(var(--lobe-popover-translate-x), var(--lobe-popover-translate-y), 0) scale(var(--lobe-popover-animation-scale))',\n    },\n    transformOrigin: 'var(--transform-origin)',\n    transitionDuration: {\n      default: 'var(--lobe-popover-animation-duration)',\n      [instant]: '0s',\n      [popupEndingTiming]: 'var(--lobe-popover-animation-duration-exit)',\n      [popupLayoutTiming]:\n        'var(--lobe-popover-animation-duration), var(--lobe-popover-animation-duration), var(--lobe-popover-layout-duration), var(--lobe-popover-layout-duration)',\n      [popupRepopTiming]: '0s',\n    },\n    transitionProperty: {\n      default: 'opacity, transform',\n      [instantOrRepop]: 'none',\n      [popupLayoutProperty]: 'opacity, transform, width, height',\n    },\n    transitionTimingFunction: {\n      default: 'var(--lobe-popover-animation-ease-out)',\n      [instant]: 'ease',\n      [popupEndingTiming]: 'var(--lobe-popover-animation-ease-in)',\n      [popupLayoutTiming]:\n        'var(--lobe-popover-animation-ease-out), var(--lobe-popover-animation-ease-out), var(--lobe-popover-layout-ease), var(--lobe-popover-layout-ease)',\n      [popupRepopTiming]: 'ease',\n    },\n    height: { default: null, [layoutAnimation]: 'var(--popup-height, auto)' },\n    maxWidth: 'var(--available-width)',\n    minWidth: 120,\n    width: { default: null, [layoutAnimation]: 'var(--popup-width, auto)' },\n  },\n\n  positioner: {\n    '--lobe-popover-animation-duration': '150ms',\n    '--lobe-popover-animation-duration-exit': '75ms',\n    '--lobe-popover-animation-ease-in': 'ease-in',\n    '--lobe-popover-animation-ease-out': cssVar.motionEaseOut,\n    '--lobe-popover-animation-scale': '0.96',\n    '--lobe-popover-animation-translate': '6px',\n    '--lobe-popover-layout-duration': { default: '380ms', [reducedMotion]: '0s' },\n    '--lobe-popover-layout-ease': cssVar.motionSpringBouncy,\n    '--lobe-popover-translate-x': {\n      default: '0',\n      [placementLeft]: 'var(--lobe-popover-animation-translate)',\n      [placementRight]: 'calc(var(--lobe-popover-animation-translate) * -1)',\n    },\n    '--lobe-popover-translate-y': {\n      default: 'calc(var(--lobe-popover-animation-translate) * -1)',\n      [placementLeft]: '0',\n      [placementRight]: '0',\n      [placementTop]: 'var(--lobe-popover-animation-translate)',\n    },\n    'pointerEvents': { [anchorHidden]: 'none', default: null },\n    'transitionDuration': {\n      default: 'var(--lobe-popover-animation-duration)',\n      [instantOrRepop]: '0s',\n      [positionerLayout]: 'var(--lobe-popover-layout-duration)',\n    },\n    'transitionProperty': {\n      default: 'none',\n      [positionerLayout]:\n        'inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform',\n    },\n    'transitionTimingFunction': {\n      default: 'var(--lobe-popover-animation-ease-out)',\n      [instantOrRepop]: 'ease',\n      [positionerLayout]: 'var(--lobe-popover-layout-ease)',\n    },\n    'visibility': { [anchorHidden]: 'hidden', default: null },\n    'zIndex': 1100,\n    'height': 'var(--positioner-height)',\n    'width': 'min(var(--positioner-width), var(--available-width))',\n  },\n\n  viewport: {\n    '--lobe-popover-content-blur': '4px',\n    '--lobe-popover-content-shift': '8px',\n    '--lobe-popover-viewport-inline-padding': '12px',\n    'overflow': 'clip',\n    'paddingBlock': 12,\n    'paddingInline': 'var(--lobe-popover-viewport-inline-padding)',\n    'position': 'relative',\n  },\n});\n"],"mappings":";AAkBA,MAAa,SAAS;CACpB,OAAO;EACL,qCAAqC;EACrC,sCAAsC;EACtC,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,qCAAqC;EACrC,0CAA0C;EAC1C,oCAAoC;EACpC,qCAAqC;EACrC,kCAAkC;EAClC,sCAAsC;EACtC,kCAAkC;EAClC,8BAA8B;EAC9B,8BAA8B;EAC9B,8BAA8B;EAC9B,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,+BAA+B;EAC/B,gCAAgC;EAChC,0CAA0C;EAC1C,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

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