@lobehub/ui 5.62.0 → 5.63.0

package/es/base-ui/Input/style.d.mts

@@ -30,7 +30,7 @@ declare const styles: {
 };
 declare const rootVariants: (props?: ({
   shadow?: boolean | null | undefined;
-  size?: "large" | "middle" | "small" | null | undefined;
+  size?: "small" | "middle" | "large" | null | undefined;
   variant?: "filled" | "outlined" | "borderless" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

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

@@ -8,9 +8,22 @@ import { memo, useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
 import useMergeState from "use-merge-value";
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
 //#region src/base-ui/Pagination/Pagination.tsx
 const XS_QUERY = "(max-width: 575px)";
+/** One-line dots that swap to a double chevron on hover / focus of the jump item. */
+const JumpIcon = ({ direction }) => {
+	const Icon = direction === "prev" ? ChevronsLeft : ChevronsRight;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: styles.ellipsisDots,
+		children: "•••"
+	}), /* @__PURE__ */ jsx(Icon, {
+		"aria-hidden": true,
+		className: styles.ellipsisIcon,
+		size: 14
+	})] });
+};
 const canMatchMedia = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
 const subscribeXs = (onChange) => {
 	if (!canMatchMedia()) return () => {};
@@ -173,10 +186,14 @@ const Pagination = memo(({ align, className, classNames, components, current, de
 					type: "button",
 					onClick: () => goTo(item),
 					children: render(item, "page", item)
-				}, item) : /* @__PURE__ */ jsx("span", {
+				}, item) : /* @__PURE__ */ jsx("button", {
 					className: ellipsisVariants({ size }),
+					"data-pagination-jump": item === "ellipsis-prev" ? "prev" : "next",
+					disabled,
+					type: "button",
 					title: title(item === "ellipsis-prev" ? `Previous ${jumpStep} Pages` : `Next ${jumpStep} Pages`),
-					children: item === "ellipsis-prev" ? render(Math.max(1, displayCurrent - jumpStep), "jump-prev", "···") : render(Math.min(pageCount, displayCurrent + jumpStep), "jump-next", "···")
+					onClick: () => goTo(item === "ellipsis-prev" ? Math.max(1, displayCurrent - jumpStep) : Math.min(pageCount, displayCurrent + jumpStep)),
+					children: item === "ellipsis-prev" ? render(Math.max(1, displayCurrent - jumpStep), "jump-prev", /* @__PURE__ */ jsx(JumpIcon, { direction: "prev" })) : render(Math.min(pageCount, displayCurrent + jumpStep), "jump-next", /* @__PURE__ */ jsx(JumpIcon, { direction: "next" }))
 				}, item)),
 				nextButton
 			] }),

package/es/base-ui/Pagination/Pagination.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.mjs","names":["useControlledState","Input"],"sources":["../../../src/base-ui/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport {\n  type KeyboardEvent,\n  memo,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Input } from '@/base-ui/Input';\nimport Select from '@/base-ui/Select';\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nimport { clampPage, getPageCount, getPaginationItems } from './helpers';\nimport { buttonVariants, ellipsisVariants, styles } from './style';\nimport type { PaginationItemType, PaginationProps } from './type';\n\nconst XS_QUERY = '(max-width: 575px)';\n\nconst canMatchMedia = () =>\n  typeof window !== 'undefined' && typeof window.matchMedia === 'function';\n\nconst subscribeXs = (onChange: () => void) => {\n  if (!canMatchMedia()) return () => {};\n  const query = window.matchMedia(XS_QUERY);\n  query.addEventListener?.('change', onChange);\n  return () => query.removeEventListener?.('change', onChange);\n};\nconst getXs = () => canMatchMedia() && window.matchMedia(XS_QUERY).matches;\nconst getServerXs = () => false;\n\n/** Whether the viewport is antd's `xs` breakpoint; only tracked when `enabled`. */\nconst useIsXs = (enabled: boolean) => {\n  const isXs = useSyncExternalStore(subscribeXs, getXs, getServerXs);\n  return enabled && isXs;\n};\n\nconst Pagination = memo<PaginationProps>(\n  ({\n    align,\n    className,\n    classNames,\n    components,\n    current,\n    defaultCurrent = 1,\n    defaultPageSize = 10,\n    disabled,\n    hideOnSinglePage,\n    itemRender,\n    onChange,\n    onPageSizeChange,\n    pageSize,\n    pageSizeOptions = [10, 20, 50, 100],\n    ref,\n    responsive,\n    showLessItems,\n    showQuickJumper,\n    showSizeChanger,\n    showTitle = true,\n    showTotal,\n    simple,\n    size: sizeProp,\n    style,\n    styles: customStyles,\n    total,\n    totalBoundaryShowSizeChanger = 50,\n    ...rest\n  }) => {\n    const [mergedPageSize, setMergedPageSize] = useControlledState(defaultPageSize, {\n      value: pageSize,\n    });\n    const pageCount = getPageCount(total, mergedPageSize);\n    const [mergedCurrent, setMergedCurrent] = useControlledState(defaultCurrent, {\n      value: current,\n    });\n    const onChangeStable = useEventCallback((nextCurrent: number, nextPageSize: number) => {\n      onChange?.(nextCurrent, nextPageSize);\n    });\n\n    const isXs = useIsXs(!!responsive && !sizeProp);\n    const size = sizeProp ?? (isXs ? 'small' : 'middle');\n\n    const [jumperValue, setJumperValue] = useState('');\n    const [simpleValue, setSimpleValue] = useState<string | null>(null);\n    const pendingNotifyRef = useRef<{ current: number; pageSize: number } | null>(null);\n    const [prevPageCount, setPrevPageCount] = useState(pageCount);\n\n    if (pageCount !== prevPageCount) {\n      setPrevPageCount(pageCount);\n\n      if (mergedCurrent > pageCount && pageCount >= 1) {\n        setMergedCurrent(pageCount);\n        pendingNotifyRef.current = { current: pageCount, pageSize: mergedPageSize };\n      }\n    }\n\n    useEffect(() => {\n      if (!pendingNotifyRef.current) return;\n\n      const { current: nextCurrent, pageSize: nextPageSize } = pendingNotifyRef.current;\n      pendingNotifyRef.current = null;\n      onChangeStable(nextCurrent, nextPageSize);\n    });\n\n    const displayCurrent = clampPage(mergedCurrent, pageCount);\n\n    if (hideOnSinglePage && pageCount <= 1) return null;\n\n    const commitCurrent = (nextCurrent: number, nextPageSize: number) => {\n      setMergedCurrent(nextCurrent);\n      onChange?.(nextCurrent, nextPageSize);\n    };\n\n    const goTo = (page: number) => {\n      commitCurrent(clampPage(page, pageCount), mergedPageSize);\n    };\n\n    const handlePageSizeChange = (value: string) => {\n      const nextSize = Number(value);\n      const nextPageCount = getPageCount(total, nextSize);\n      const nextCurrent = clampPage(displayCurrent, nextPageCount);\n\n      setMergedPageSize(nextSize);\n      commitCurrent(nextCurrent, nextSize);\n      onPageSizeChange?.(nextCurrent, nextSize);\n    };\n\n    // Like rc-pagination: invalid input is ignored, a valid page is clamped, the input is cleared.\n    const jump = () => {\n      const page = Number(jumperValue);\n      setJumperValue('');\n      if (jumperValue.trim() === '' || !Number.isInteger(page)) return;\n      const nextCurrent = clampPage(page, pageCount);\n      if (nextCurrent !== displayCurrent) goTo(nextCurrent);\n    };\n    const goButton = typeof showQuickJumper === 'object' ? showQuickJumper.goButton : undefined;\n    const mergedShowSizeChanger = showSizeChanger ?? total > totalBoundaryShowSizeChanger;\n    const sizeChangerProps = typeof showSizeChanger === 'object' ? showSizeChanger : undefined;\n    const SizeChanger = components?.sizeChanger ?? Select;\n\n    const jumpStep = showLessItems ? 3 : 5;\n    const items = getPaginationItems(displayCurrent, pageCount, showLessItems ? 1 : 2);\n    const render = (page: number, type: PaginationItemType, element: ReactNode) =>\n      itemRender ? itemRender(page, type, element) : element;\n    const title = (text: string) => (showTitle ? text : undefined);\n    const iconSize = size === 'small' ? 14 : 16;\n\n    const prevButton = (\n      <button\n        aria-label=\"Previous page\"\n        className={buttonVariants({ size })}\n        disabled={disabled || displayCurrent <= 1}\n        title={title('Previous Page')}\n        type=\"button\"\n        onClick={() => goTo(displayCurrent - 1)}\n      >\n        {render(Math.max(1, displayCurrent - 1), 'prev', <ChevronLeft size={iconSize} />)}\n      </button>\n    );\n    const nextButton = (\n      <button\n        aria-label=\"Next page\"\n        className={buttonVariants({ size })}\n        disabled={disabled || displayCurrent >= pageCount}\n        title={title('Next Page')}\n        type=\"button\"\n        onClick={() => goTo(displayCurrent + 1)}\n      >\n        {render(Math.min(pageCount, displayCurrent + 1), 'next', <ChevronRight size={iconSize} />)}\n      </button>\n    );\n\n    const simpleConfig = simple ? (typeof simple === 'object' ? simple : {}) : null;\n    const commitSimple = () => {\n      if (simpleValue === null) return;\n      const page = Number(simpleValue);\n      setSimpleValue(null);\n      if (simpleValue.trim() === '' || !Number.isInteger(page)) return;\n      const nextCurrent = clampPage(page, pageCount);\n      if (nextCurrent !== displayCurrent) goTo(nextCurrent);\n    };\n    const rangeStart = total === 0 ? 0 : (displayCurrent - 1) * mergedPageSize + 1;\n    const rangeEnd = Math.min(displayCurrent * mergedPageSize, total);\n\n    return (\n      <nav\n        aria-label=\"Pagination\"\n        ref={ref}\n        role=\"navigation\"\n        style={{ ...customStyles?.root, ...style }}\n        className={cx(\n          styles.root,\n          align && styles.aligned,\n          align && styles[align],\n          classNames?.root,\n          className,\n        )}\n        {...rest}\n      >\n        {showTotal && (\n          <span className={styles.total}>{showTotal(total, [rangeStart, rangeEnd])}</span>\n        )}\n        {simpleConfig ? (\n          <>\n            {prevButton}\n            <span className={styles.simplePager} title={title(`${displayCurrent}/${pageCount}`)}>\n              {simpleConfig.readOnly ? (\n                displayCurrent\n              ) : (\n                <Input\n                  aria-label=\"Current page\"\n                  className={styles.jumperInput}\n                  disabled={disabled}\n                  size={size === 'small' ? 'small' : 'middle'}\n                  value={simpleValue ?? String(displayCurrent)}\n                  onBlur={commitSimple}\n                  onChange={(event) => setSimpleValue(event.currentTarget.value)}\n                  onKeyUp={(event: KeyboardEvent<HTMLInputElement>) => {\n                    if (event.key === 'Enter') commitSimple();\n                  }}\n                />\n              )}\n              <span className={styles.simpleSlash}>/</span>\n              {pageCount}\n            </span>\n            {nextButton}\n          </>\n        ) : (\n          <>\n            {prevButton}\n            {items.map((item) =>\n              typeof item === 'number' ? (\n                <button\n                  aria-current={item === displayCurrent ? 'page' : undefined}\n                  className={cx(buttonVariants({ size }), classNames?.item)}\n                  disabled={disabled}\n                  key={item}\n                  style={customStyles?.item}\n                  title={title(String(item))}\n                  type=\"button\"\n                  onClick={() => goTo(item)}\n                >\n                  {render(item, 'page', item)}\n                </button>\n              ) : (\n                <span\n                  className={ellipsisVariants({ size })}\n                  key={item}\n                  title={title(\n                    item === 'ellipsis-prev'\n                      ? `Previous ${jumpStep} Pages`\n                      : `Next ${jumpStep} Pages`,\n                  )}\n                >\n                  {item === 'ellipsis-prev'\n                    ? render(Math.max(1, displayCurrent - jumpStep), 'jump-prev', '···')\n                    : render(Math.min(pageCount, displayCurrent + jumpStep), 'jump-next', '···')}\n                </span>\n              ),\n            )}\n            {nextButton}\n          </>\n        )}\n        {!simpleConfig && mergedShowSizeChanger && (\n          <SizeChanger\n            disabled={disabled}\n            size={size === 'small' ? 'small' : 'middle'}\n            {...sizeChangerProps}\n            value={String(mergedPageSize)}\n            options={pageSizeOptions.map((option) => ({\n              label: `${option} / page`,\n              value: String(option),\n            }))}\n            style={{\n              flex: 'none',\n              marginInlineStart: 8,\n              width: 'auto',\n              ...sizeChangerProps?.style,\n            }}\n            onChange={(value: string) => {\n              handlePageSizeChange(value);\n              sizeChangerProps?.onChange?.(value);\n            }}\n          />\n        )}\n        {!simpleConfig && showQuickJumper && (\n          <span className={styles.jumper}>\n            Go to\n            <Input\n              aria-label=\"Go to page\"\n              className={styles.jumperInput}\n              disabled={disabled}\n              size={size === 'small' ? 'small' : 'middle'}\n              value={jumperValue}\n              onChange={(event) => setJumperValue(event.currentTarget.value)}\n              onBlur={() => {\n                if (!goButton) jump();\n              }}\n              onKeyUp={(event: KeyboardEvent<HTMLInputElement>) => {\n                if (event.key === 'Enter') jump();\n              }}\n            />\n            {goButton === true || typeof goButton === 'string' ? (\n              <button\n                className={buttonVariants({ size })}\n                disabled={disabled}\n                type=\"button\"\n                onClick={jump}\n              >\n                {goButton === true ? 'Go' : goButton}\n              </button>\n            ) : goButton ? (\n              <span onClick={jump}>{goButton}</span>\n            ) : (\n              'Page'\n            )}\n          </span>\n        )}\n      </nav>\n    );\n  },\n);\n\nPagination.displayName = 'Pagination';\n\nexport default Pagination;\n"],"mappings":"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"}
+{"version":3,"file":"Pagination.mjs","names":["useControlledState","Input"],"sources":["../../../src/base-ui/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';\nimport {\n  type KeyboardEvent,\n  memo,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Input } from '@/base-ui/Input';\nimport Select from '@/base-ui/Select';\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nimport { clampPage, getPageCount, getPaginationItems } from './helpers';\nimport { buttonVariants, ellipsisVariants, styles } from './style';\nimport type { PaginationItemType, PaginationProps } from './type';\n\nconst XS_QUERY = '(max-width: 575px)';\n\n/** One-line dots that swap to a double chevron on hover / focus of the jump item. */\nconst JumpIcon = ({ direction }: { direction: 'next' | 'prev' }) => {\n  const Icon = direction === 'prev' ? ChevronsLeft : ChevronsRight;\n  return (\n    <>\n      <span aria-hidden className={styles.ellipsisDots}>\n        •••\n      </span>\n      <Icon aria-hidden className={styles.ellipsisIcon} size={14} />\n    </>\n  );\n};\n\nconst canMatchMedia = () =>\n  typeof window !== 'undefined' && typeof window.matchMedia === 'function';\n\nconst subscribeXs = (onChange: () => void) => {\n  if (!canMatchMedia()) return () => {};\n  const query = window.matchMedia(XS_QUERY);\n  query.addEventListener?.('change', onChange);\n  return () => query.removeEventListener?.('change', onChange);\n};\nconst getXs = () => canMatchMedia() && window.matchMedia(XS_QUERY).matches;\nconst getServerXs = () => false;\n\n/** Whether the viewport is antd's `xs` breakpoint; only tracked when `enabled`. */\nconst useIsXs = (enabled: boolean) => {\n  const isXs = useSyncExternalStore(subscribeXs, getXs, getServerXs);\n  return enabled && isXs;\n};\n\nconst Pagination = memo<PaginationProps>(\n  ({\n    align,\n    className,\n    classNames,\n    components,\n    current,\n    defaultCurrent = 1,\n    defaultPageSize = 10,\n    disabled,\n    hideOnSinglePage,\n    itemRender,\n    onChange,\n    onPageSizeChange,\n    pageSize,\n    pageSizeOptions = [10, 20, 50, 100],\n    ref,\n    responsive,\n    showLessItems,\n    showQuickJumper,\n    showSizeChanger,\n    showTitle = true,\n    showTotal,\n    simple,\n    size: sizeProp,\n    style,\n    styles: customStyles,\n    total,\n    totalBoundaryShowSizeChanger = 50,\n    ...rest\n  }) => {\n    const [mergedPageSize, setMergedPageSize] = useControlledState(defaultPageSize, {\n      value: pageSize,\n    });\n    const pageCount = getPageCount(total, mergedPageSize);\n    const [mergedCurrent, setMergedCurrent] = useControlledState(defaultCurrent, {\n      value: current,\n    });\n    const onChangeStable = useEventCallback((nextCurrent: number, nextPageSize: number) => {\n      onChange?.(nextCurrent, nextPageSize);\n    });\n\n    const isXs = useIsXs(!!responsive && !sizeProp);\n    const size = sizeProp ?? (isXs ? 'small' : 'middle');\n\n    const [jumperValue, setJumperValue] = useState('');\n    const [simpleValue, setSimpleValue] = useState<string | null>(null);\n    const pendingNotifyRef = useRef<{ current: number; pageSize: number } | null>(null);\n    const [prevPageCount, setPrevPageCount] = useState(pageCount);\n\n    if (pageCount !== prevPageCount) {\n      setPrevPageCount(pageCount);\n\n      if (mergedCurrent > pageCount && pageCount >= 1) {\n        setMergedCurrent(pageCount);\n        pendingNotifyRef.current = { current: pageCount, pageSize: mergedPageSize };\n      }\n    }\n\n    useEffect(() => {\n      if (!pendingNotifyRef.current) return;\n\n      const { current: nextCurrent, pageSize: nextPageSize } = pendingNotifyRef.current;\n      pendingNotifyRef.current = null;\n      onChangeStable(nextCurrent, nextPageSize);\n    });\n\n    const displayCurrent = clampPage(mergedCurrent, pageCount);\n\n    if (hideOnSinglePage && pageCount <= 1) return null;\n\n    const commitCurrent = (nextCurrent: number, nextPageSize: number) => {\n      setMergedCurrent(nextCurrent);\n      onChange?.(nextCurrent, nextPageSize);\n    };\n\n    const goTo = (page: number) => {\n      commitCurrent(clampPage(page, pageCount), mergedPageSize);\n    };\n\n    const handlePageSizeChange = (value: string) => {\n      const nextSize = Number(value);\n      const nextPageCount = getPageCount(total, nextSize);\n      const nextCurrent = clampPage(displayCurrent, nextPageCount);\n\n      setMergedPageSize(nextSize);\n      commitCurrent(nextCurrent, nextSize);\n      onPageSizeChange?.(nextCurrent, nextSize);\n    };\n\n    // Like rc-pagination: invalid input is ignored, a valid page is clamped, the input is cleared.\n    const jump = () => {\n      const page = Number(jumperValue);\n      setJumperValue('');\n      if (jumperValue.trim() === '' || !Number.isInteger(page)) return;\n      const nextCurrent = clampPage(page, pageCount);\n      if (nextCurrent !== displayCurrent) goTo(nextCurrent);\n    };\n    const goButton = typeof showQuickJumper === 'object' ? showQuickJumper.goButton : undefined;\n    const mergedShowSizeChanger = showSizeChanger ?? total > totalBoundaryShowSizeChanger;\n    const sizeChangerProps = typeof showSizeChanger === 'object' ? showSizeChanger : undefined;\n    const SizeChanger = components?.sizeChanger ?? Select;\n\n    const jumpStep = showLessItems ? 3 : 5;\n    const items = getPaginationItems(displayCurrent, pageCount, showLessItems ? 1 : 2);\n    const render = (page: number, type: PaginationItemType, element: ReactNode) =>\n      itemRender ? itemRender(page, type, element) : element;\n    const title = (text: string) => (showTitle ? text : undefined);\n    const iconSize = size === 'small' ? 14 : 16;\n\n    const prevButton = (\n      <button\n        aria-label=\"Previous page\"\n        className={buttonVariants({ size })}\n        disabled={disabled || displayCurrent <= 1}\n        title={title('Previous Page')}\n        type=\"button\"\n        onClick={() => goTo(displayCurrent - 1)}\n      >\n        {render(Math.max(1, displayCurrent - 1), 'prev', <ChevronLeft size={iconSize} />)}\n      </button>\n    );\n    const nextButton = (\n      <button\n        aria-label=\"Next page\"\n        className={buttonVariants({ size })}\n        disabled={disabled || displayCurrent >= pageCount}\n        title={title('Next Page')}\n        type=\"button\"\n        onClick={() => goTo(displayCurrent + 1)}\n      >\n        {render(Math.min(pageCount, displayCurrent + 1), 'next', <ChevronRight size={iconSize} />)}\n      </button>\n    );\n\n    const simpleConfig = simple ? (typeof simple === 'object' ? simple : {}) : null;\n    const commitSimple = () => {\n      if (simpleValue === null) return;\n      const page = Number(simpleValue);\n      setSimpleValue(null);\n      if (simpleValue.trim() === '' || !Number.isInteger(page)) return;\n      const nextCurrent = clampPage(page, pageCount);\n      if (nextCurrent !== displayCurrent) goTo(nextCurrent);\n    };\n    const rangeStart = total === 0 ? 0 : (displayCurrent - 1) * mergedPageSize + 1;\n    const rangeEnd = Math.min(displayCurrent * mergedPageSize, total);\n\n    return (\n      <nav\n        aria-label=\"Pagination\"\n        ref={ref}\n        role=\"navigation\"\n        style={{ ...customStyles?.root, ...style }}\n        className={cx(\n          styles.root,\n          align && styles.aligned,\n          align && styles[align],\n          classNames?.root,\n          className,\n        )}\n        {...rest}\n      >\n        {showTotal && (\n          <span className={styles.total}>{showTotal(total, [rangeStart, rangeEnd])}</span>\n        )}\n        {simpleConfig ? (\n          <>\n            {prevButton}\n            <span className={styles.simplePager} title={title(`${displayCurrent}/${pageCount}`)}>\n              {simpleConfig.readOnly ? (\n                displayCurrent\n              ) : (\n                <Input\n                  aria-label=\"Current page\"\n                  className={styles.jumperInput}\n                  disabled={disabled}\n                  size={size === 'small' ? 'small' : 'middle'}\n                  value={simpleValue ?? String(displayCurrent)}\n                  onBlur={commitSimple}\n                  onChange={(event) => setSimpleValue(event.currentTarget.value)}\n                  onKeyUp={(event: KeyboardEvent<HTMLInputElement>) => {\n                    if (event.key === 'Enter') commitSimple();\n                  }}\n                />\n              )}\n              <span className={styles.simpleSlash}>/</span>\n              {pageCount}\n            </span>\n            {nextButton}\n          </>\n        ) : (\n          <>\n            {prevButton}\n            {items.map((item) =>\n              typeof item === 'number' ? (\n                <button\n                  aria-current={item === displayCurrent ? 'page' : undefined}\n                  className={cx(buttonVariants({ size }), classNames?.item)}\n                  disabled={disabled}\n                  key={item}\n                  style={customStyles?.item}\n                  title={title(String(item))}\n                  type=\"button\"\n                  onClick={() => goTo(item)}\n                >\n                  {render(item, 'page', item)}\n                </button>\n              ) : (\n                <button\n                  className={ellipsisVariants({ size })}\n                  data-pagination-jump={item === 'ellipsis-prev' ? 'prev' : 'next'}\n                  disabled={disabled}\n                  key={item}\n                  type=\"button\"\n                  title={title(\n                    item === 'ellipsis-prev'\n                      ? `Previous ${jumpStep} Pages`\n                      : `Next ${jumpStep} Pages`,\n                  )}\n                  onClick={() =>\n                    goTo(\n                      item === 'ellipsis-prev'\n                        ? Math.max(1, displayCurrent - jumpStep)\n                        : Math.min(pageCount, displayCurrent + jumpStep),\n                    )\n                  }\n                >\n                  {item === 'ellipsis-prev'\n                    ? render(\n                        Math.max(1, displayCurrent - jumpStep),\n                        'jump-prev',\n                        <JumpIcon direction=\"prev\" />,\n                      )\n                    : render(\n                        Math.min(pageCount, displayCurrent + jumpStep),\n                        'jump-next',\n                        <JumpIcon direction=\"next\" />,\n                      )}\n                </button>\n              ),\n            )}\n            {nextButton}\n          </>\n        )}\n        {!simpleConfig && mergedShowSizeChanger && (\n          <SizeChanger\n            disabled={disabled}\n            size={size === 'small' ? 'small' : 'middle'}\n            {...sizeChangerProps}\n            value={String(mergedPageSize)}\n            options={pageSizeOptions.map((option) => ({\n              label: `${option} / page`,\n              value: String(option),\n            }))}\n            style={{\n              flex: 'none',\n              marginInlineStart: 8,\n              width: 'auto',\n              ...sizeChangerProps?.style,\n            }}\n            onChange={(value: string) => {\n              handlePageSizeChange(value);\n              sizeChangerProps?.onChange?.(value);\n            }}\n          />\n        )}\n        {!simpleConfig && showQuickJumper && (\n          <span className={styles.jumper}>\n            Go to\n            <Input\n              aria-label=\"Go to page\"\n              className={styles.jumperInput}\n              disabled={disabled}\n              size={size === 'small' ? 'small' : 'middle'}\n              value={jumperValue}\n              onChange={(event) => setJumperValue(event.currentTarget.value)}\n              onBlur={() => {\n                if (!goButton) jump();\n              }}\n              onKeyUp={(event: KeyboardEvent<HTMLInputElement>) => {\n                if (event.key === 'Enter') jump();\n              }}\n            />\n            {goButton === true || typeof goButton === 'string' ? (\n              <button\n                className={buttonVariants({ size })}\n                disabled={disabled}\n                type=\"button\"\n                onClick={jump}\n              >\n                {goButton === true ? 'Go' : goButton}\n              </button>\n            ) : goButton ? (\n              <span onClick={jump}>{goButton}</span>\n            ) : (\n              'Page'\n            )}\n          </span>\n        )}\n      </nav>\n    );\n  },\n);\n\nPagination.displayName = 'Pagination';\n\nexport default Pagination;\n"],"mappings":"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"}

package/es/base-ui/Pagination/style.mjs

@@ -49,14 +49,57 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     justify-content: center;
   `,
 	ellipsis: css`
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    cursor: pointer;
+
+    display: inline-grid;
+    flex: none;
+    place-items: center;
 
     width: 28px;
+    height: 28px;
+    padding: 0;
+    border: none;
+    border-radius: ${cssVar.borderRadius};
 
+    font: inherit;
+    line-height: 1;
     color: ${cssVar.colorTextQuaternary};
+    white-space: nowrap;
+
+    background: transparent;
+
+    & > * {
+      grid-area: 1 / 1;
+    }
+
+    &:hover:not(:disabled),
+    &:focus-visible {
+      color: ${cssVar.colorText};
+    }
+
+    &:disabled {
+      cursor: default;
+    }
+  `,
+	ellipsisDots: css`
+    font-size: 8px;
+
+    /* Trailing letter-spacing would push the dots off center. */
+    text-indent: 2px;
     letter-spacing: 2px;
+
+    button:hover:not(:disabled) > &,
+    button:focus-visible > & {
+      visibility: hidden;
+    }
+  `,
+	ellipsisIcon: css`
+    visibility: hidden;
+
+    button:hover:not(:disabled) > &,
+    button:focus-visible > & {
+      visibility: visible;
+    }
   `,
 	end: css`
     justify-content: flex-end;
@@ -100,6 +143,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
   `,
 	smallEllipsis: css`
     width: 24px;
+    height: 24px;
   `,
 	start: css`
     justify-content: flex-start;

package/es/base-ui/Pagination/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Pagination/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  aligned: css`\n    display: flex;\n    width: 100%;\n  `,\n  button: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    min-width: 28px;\n    height: 28px;\n    padding-inline: 6px;\n    border: none;\n    border-radius: ${cssVar.borderRadius};\n\n    font-size: 13px;\n    font-weight: 500;\n    font-variant-numeric: tabular-nums;\n    color: ${cssVar.colorTextSecondary};\n\n    background: transparent;\n\n    transition: background-color 0.15s;\n\n    &:hover:not(:disabled) {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:disabled {\n      cursor: default;\n      color: ${cssVar.colorTextQuaternary};\n      background: transparent;\n    }\n\n    &[aria-current='page'] {\n      font-weight: 600;\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n  center: css`\n    justify-content: center;\n  `,\n  ellipsis: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 28px;\n\n    color: ${cssVar.colorTextQuaternary};\n    letter-spacing: 2px;\n  `,\n  end: css`\n    justify-content: flex-end;\n  `,\n  jumper: css`\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n\n    margin-inline-start: 8px;\n\n    font-size: 13px;\n    color: ${cssVar.colorTextSecondary};\n    white-space: nowrap;\n  `,\n  jumperInput: css`\n    width: 50px;\n  `,\n  root: css`\n    display: inline-flex;\n    gap: 4px;\n    align-items: center;\n    font-variant-numeric: tabular-nums;\n  `,\n  simplePager: css`\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n\n    font-size: 13px;\n    color: ${cssVar.colorTextSecondary};\n    white-space: nowrap;\n  `,\n  simpleSlash: css`\n    color: ${cssVar.colorTextQuaternary};\n  `,\n  small: css`\n    min-width: 24px;\n    height: 24px;\n    font-size: 12px;\n  `,\n  smallEllipsis: css`\n    width: 24px;\n  `,\n  start: css`\n    justify-content: flex-start;\n  `,\n  total: css`\n    margin-inline-end: 8px;\n    font-size: 12px;\n    color: ${cssVar.colorTextTertiary};\n    white-space: nowrap;\n  `,\n}));\n\nexport const buttonVariants = cva(styles.button, {\n  defaultVariants: {\n    size: 'middle',\n  },\n  variants: {\n    size: {\n      middle: null,\n      small: styles.small,\n    },\n  },\n});\n\nexport const ellipsisVariants = cva(styles.ellipsis, {\n  defaultVariants: {\n    size: 'middle',\n  },\n  variants: {\n    size: {\n      middle: null,\n      small: styles.smallEllipsis,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,SAAS,GAAG;;;;CAIZ,QAAQ,GAAG;;;;;;;;;;;qBAWQ,OAAO,aAAa;;;;;aAK5B,OAAO,mBAAmB;;;;;;;eAOxB,OAAO,UAAU;oBACZ,OAAO,kBAAkB;;;;;eAK9B,OAAO,oBAAoB;;;;;;eAM3B,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;CAG5C,QAAQ,GAAG;;;CAGX,UAAU,GAAG;;;;;;;aAOF,OAAO,oBAAoB;;;CAGtC,KAAK,GAAG;;;CAGR,QAAQ,GAAG;;;;;;;;aAQA,OAAO,mBAAmB;;;CAGrC,aAAa,GAAG;;;CAGhB,MAAM,GAAG;;;;;;CAMT,aAAa,GAAG;;;;;;aAML,OAAO,mBAAmB;;;CAGrC,aAAa,GAAG;aACL,OAAO,oBAAoB;;CAEtC,OAAO,GAAG;;;;;CAKV,eAAe,GAAG;;;CAGlB,OAAO,GAAG;;;CAGV,OAAO,GAAG;;;aAGC,OAAO,kBAAkB;;;AAGtC,EAAE;AAEF,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB,EACf,MAAM,SACR;CACA,UAAU,EACR,MAAM;EACJ,QAAQ;EACR,OAAO,OAAO;CAChB,EACF;AACF,CAAC;AAED,MAAa,mBAAmB,IAAI,OAAO,UAAU;CACnD,iBAAiB,EACf,MAAM,SACR;CACA,UAAU,EACR,MAAM;EACJ,QAAQ;EACR,OAAO,OAAO;CAChB,EACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Pagination/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  aligned: css`\n    display: flex;\n    width: 100%;\n  `,\n  button: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    min-width: 28px;\n    height: 28px;\n    padding-inline: 6px;\n    border: none;\n    border-radius: ${cssVar.borderRadius};\n\n    font-size: 13px;\n    font-weight: 500;\n    font-variant-numeric: tabular-nums;\n    color: ${cssVar.colorTextSecondary};\n\n    background: transparent;\n\n    transition: background-color 0.15s;\n\n    &:hover:not(:disabled) {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:disabled {\n      cursor: default;\n      color: ${cssVar.colorTextQuaternary};\n      background: transparent;\n    }\n\n    &[aria-current='page'] {\n      font-weight: 600;\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n  center: css`\n    justify-content: center;\n  `,\n  /* Jump item: dots and the double chevron share one grid cell, so the dots never wrap or\n     shrink beside a wide page number and hover swaps them in place. */\n  ellipsis: css`\n    cursor: pointer;\n\n    display: inline-grid;\n    flex: none;\n    place-items: center;\n\n    width: 28px;\n    height: 28px;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadius};\n\n    font: inherit;\n    line-height: 1;\n    color: ${cssVar.colorTextQuaternary};\n    white-space: nowrap;\n\n    background: transparent;\n\n    & > * {\n      grid-area: 1 / 1;\n    }\n\n    &:hover:not(:disabled),\n    &:focus-visible {\n      color: ${cssVar.colorText};\n    }\n\n    &:disabled {\n      cursor: default;\n    }\n  `,\n  ellipsisDots: css`\n    font-size: 8px;\n\n    /* Trailing letter-spacing would push the dots off center. */\n    text-indent: 2px;\n    letter-spacing: 2px;\n\n    button:hover:not(:disabled) > &,\n    button:focus-visible > & {\n      visibility: hidden;\n    }\n  `,\n  ellipsisIcon: css`\n    visibility: hidden;\n\n    button:hover:not(:disabled) > &,\n    button:focus-visible > & {\n      visibility: visible;\n    }\n  `,\n  end: css`\n    justify-content: flex-end;\n  `,\n  jumper: css`\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n\n    margin-inline-start: 8px;\n\n    font-size: 13px;\n    color: ${cssVar.colorTextSecondary};\n    white-space: nowrap;\n  `,\n  jumperInput: css`\n    width: 50px;\n  `,\n  root: css`\n    display: inline-flex;\n    gap: 4px;\n    align-items: center;\n    font-variant-numeric: tabular-nums;\n  `,\n  simplePager: css`\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n\n    font-size: 13px;\n    color: ${cssVar.colorTextSecondary};\n    white-space: nowrap;\n  `,\n  simpleSlash: css`\n    color: ${cssVar.colorTextQuaternary};\n  `,\n  small: css`\n    min-width: 24px;\n    height: 24px;\n    font-size: 12px;\n  `,\n  smallEllipsis: css`\n    width: 24px;\n    height: 24px;\n  `,\n  start: css`\n    justify-content: flex-start;\n  `,\n  total: css`\n    margin-inline-end: 8px;\n    font-size: 12px;\n    color: ${cssVar.colorTextTertiary};\n    white-space: nowrap;\n  `,\n}));\n\nexport const buttonVariants = cva(styles.button, {\n  defaultVariants: {\n    size: 'middle',\n  },\n  variants: {\n    size: {\n      middle: null,\n      small: styles.small,\n    },\n  },\n});\n\nexport const ellipsisVariants = cva(styles.ellipsis, {\n  defaultVariants: {\n    size: 'middle',\n  },\n  variants: {\n    size: {\n      middle: null,\n      small: styles.smallEllipsis,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,SAAS,GAAG;;;;CAIZ,QAAQ,GAAG;;;;;;;;;;;qBAWQ,OAAO,aAAa;;;;;aAK5B,OAAO,mBAAmB;;;;;;;eAOxB,OAAO,UAAU;oBACZ,OAAO,kBAAkB;;;;;eAK9B,OAAO,oBAAoB;;;;;;eAM3B,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;CAG5C,QAAQ,GAAG;;;CAKX,UAAU,GAAG;;;;;;;;;;;qBAWM,OAAO,aAAa;;;;aAI5B,OAAO,oBAAoB;;;;;;;;;;;eAWzB,OAAO,UAAU;;;;;;;CAO9B,cAAc,GAAG;;;;;;;;;;;;CAYjB,cAAc,GAAG;;;;;;;;CAQjB,KAAK,GAAG;;;CAGR,QAAQ,GAAG;;;;;;;;aAQA,OAAO,mBAAmB;;;CAGrC,aAAa,GAAG;;;CAGhB,MAAM,GAAG;;;;;;CAMT,aAAa,GAAG;;;;;;aAML,OAAO,mBAAmB;;;CAGrC,aAAa,GAAG;aACL,OAAO,oBAAoB;;CAEtC,OAAO,GAAG;;;;;CAKV,eAAe,GAAG;;;;CAIlB,OAAO,GAAG;;;CAGV,OAAO,GAAG;;;aAGC,OAAO,kBAAkB;;;AAGtC,EAAE;AAEF,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB,EACf,MAAM,SACR;CACA,UAAU,EACR,MAAM;EACJ,QAAQ;EACR,OAAO,OAAO;CAChB,EACF;AACF,CAAC;AAED,MAAa,mBAAmB,IAAI,OAAO,UAAU;CACnD,iBAAiB,EACf,MAAM,SACR;CACA,UAAU,EACR,MAAM;EACJ,QAAQ;EACR,OAAO,OAAO;CAChB,EACF;AACF,CAAC"}

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

@@ -4,6 +4,7 @@ import InputNumber_default from "../Input/InputNumber.mjs";
 import Select from "../Select/Select.mjs";
 import DatePicker from "../DatePicker/DatePicker.mjs";
 import DateRangePicker from "../DatePicker/DateRangePicker.mjs";
+import { useColumnRequest } from "./useColumnRequest.mjs";
 import { resolveValueEnum, resolveValueType, valueEnumToList } from "./utils.mjs";
 import { jsx } from "react/jsx-runtime";
 import { useThemeMode } from "antd-style";
@@ -22,20 +23,22 @@ const FieldControl = ({ column, form, light, onChange, placeholder, value }) =>
 	const size = light ? "small" : void 0;
 	const { isDarkMode } = useThemeMode();
 	const variant = light ? isDarkMode ? "filled" : "outlined" : void 0;
+	const remote = useColumnRequest(column);
 	if (column.renderFormItem) return column.renderFormItem(column, {
 		form,
 		isQuery: !light,
 		onChange,
 		value
 	}, form);
-	if (valueEnum || SELECT_TYPES.has(valueType)) {
-		const options = fieldProps.options ?? valueEnumToList(valueEnum).map((item) => ({
+	if (remote.enabled || valueEnum || SELECT_TYPES.has(valueType)) {
+		const options = remote.options ?? fieldProps.options ?? valueEnumToList(valueEnum).map((item) => ({
 			disabled: item.disabled,
 			label: item.text,
 			value: item.value
 		}));
 		return /* @__PURE__ */ jsx(Select, {
 			allowClear: true,
+			loading: remote.loading,
 			mode: valueType === "checkbox" ? "multiple" : void 0,
 			options,
 			placeholder: light ? label : placeholder.select,
@@ -44,7 +47,11 @@ const FieldControl = ({ column, form, light, onChange, placeholder, value }) =>
 			value: value ?? (valueType === "checkbox" ? [] : null),
 			variant,
 			...fieldProps,
-			onChange: (next) => onChange(next ?? void 0)
+			onChange: (next) => onChange(next ?? void 0),
+			onSearch: remote.onSearch ? (keyWords) => {
+				remote.onSearch(keyWords);
+				fieldProps.onSearch?.(keyWords);
+			} : fieldProps.onSearch
 		});
 	}
 	switch (valueType) {

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

@@ -1 +1 @@
-{"version":3,"file":"FieldControl.mjs","names":["InputNumber","Input"],"sources":["../../../src/base-ui/ProTable/FieldControl.tsx"],"sourcesContent":["import { useThemeMode } from 'antd-style';\nimport { type ReactNode } from 'react';\n\nimport DatePicker from '@/base-ui/DatePicker/DatePicker';\nimport DateRangePicker from '@/base-ui/DatePicker/DateRangePicker';\nimport Input from '@/base-ui/Input/Input';\nimport InputNumber from '@/base-ui/Input/InputNumber';\nimport Select from '@/base-ui/Select';\nimport Switch from '@/base-ui/Switch';\n\nimport type { ProColumnType, ProTableFormInstance, ProTableValueType } from './type';\nimport { resolveValueEnum, resolveValueType, valueEnumToList } from './utils';\n\nexport interface FieldControlProps {\n  column: ProColumnType<any>;\n  form: ProTableFormInstance;\n  /** Light filter bar: small controls, outlined in light mode and filled in dark mode. */\n  light?: boolean;\n  onChange: (value: any) => void;\n  placeholder: { input: string; select: string };\n  value: any;\n}\n\nconst SELECT_TYPES = new Set<ProTableValueType>(['select', 'radio', 'checkbox']);\n\n/** The search-form control of a column (Pro \"edit\" mode, query flavor). */\nconst FieldControl = ({ column, form, light, onChange, placeholder, value }: FieldControlProps) => {\n  const valueType = resolveValueType(column) ?? 'text';\n  const valueEnum = resolveValueEnum(column);\n  const { fieldProps = {} } = column;\n  const label = typeof column.title === 'string' ? column.title : undefined;\n  const size = light ? 'small' : undefined;\n  const { isDarkMode } = useThemeMode();\n  // Light filter: outlined on light backgrounds, filled in dark mode.\n  const variant = light ? (isDarkMode ? 'filled' : 'outlined') : undefined;\n\n  if (column.renderFormItem) {\n    return column.renderFormItem(\n      column,\n      { form, isQuery: !light, onChange, value },\n      form,\n    ) as ReactNode;\n  }\n\n  if (valueEnum || SELECT_TYPES.has(valueType)) {\n    const options =\n      fieldProps.options ??\n      valueEnumToList(valueEnum).map((item) => ({\n        disabled: item.disabled,\n        label: item.text,\n        value: item.value,\n      }));\n    return (\n      <Select\n        allowClear\n        mode={valueType === 'checkbox' ? 'multiple' : undefined}\n        options={options}\n        placeholder={light ? label : placeholder.select}\n        size={size}\n        style={{ width: '100%' }}\n        value={value ?? (valueType === 'checkbox' ? [] : null)}\n        variant={variant}\n        {...fieldProps}\n        onChange={(next) => onChange(next ?? undefined)}\n      />\n    );\n  }\n\n  switch (valueType) {\n    case 'digit':\n    case 'money':\n    case 'percent':\n    case 'progress': {\n      return (\n        <InputNumber\n          placeholder={light ? label : placeholder.input}\n          size={size}\n          style={{ width: '100%' }}\n          value={value ?? null}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) => onChange(next ?? undefined)}\n        />\n      );\n    }\n    case 'switch': {\n      return <Switch checked={!!value} {...fieldProps} onChange={(next) => onChange(next)} />;\n    }\n    case 'date':\n    case 'dateTime': {\n      return (\n        <DatePicker\n          allowClear\n          placeholder={light ? label : placeholder.select}\n          size={size}\n          style={{ width: '100%' }}\n          value={value ?? null}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) => onChange(next ?? undefined)}\n        />\n      );\n    }\n    case 'dateRange':\n    case 'dateTimeRange': {\n      return (\n        <DateRangePicker\n          allowClear\n          size={size}\n          style={{ width: '100%' }}\n          value={value ?? [null, null]}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) => onChange(next && (next[0] || next[1]) ? next : undefined)}\n        />\n      );\n    }\n    default: {\n      return (\n        <Input\n          allowClear\n          placeholder={light ? label : placeholder.input}\n          size={size}\n          type={valueType === 'password' ? 'password' : undefined}\n          value={value ?? ''}\n          variant={variant}\n          {...fieldProps}\n          onChange={(event) => onChange(event.target.value === '' ? undefined : event.target.value)}\n          onClear={() => {\n            onChange(undefined);\n            fieldProps.onClear?.();\n          }}\n        />\n      );\n    }\n  }\n};\n\nexport default FieldControl;\n"],"mappings":";;;;;;;;;;AAuBA,MAAM,+BAAe,IAAI,IAAuB;CAAC;CAAU;CAAS;AAAU,CAAC;;AAG/E,MAAM,gBAAgB,EAAE,QAAQ,MAAM,OAAO,UAAU,aAAa,YAA+B;CACjG,MAAM,YAAY,iBAAiB,MAAM,KAAK;CAC9C,MAAM,YAAY,iBAAiB,MAAM;CACzC,MAAM,EAAE,aAAa,CAAC,MAAM;CAC5B,MAAM,QAAQ,OAAO,OAAO,UAAU,WAAW,OAAO,QAAQ,KAAA;CAChE,MAAM,OAAO,QAAQ,UAAU,KAAA;CAC/B,MAAM,EAAE,eAAe,aAAa;CAEpC,MAAM,UAAU,QAAS,aAAa,WAAW,aAAc,KAAA;CAE/D,IAAI,OAAO,gBACT,OAAO,OAAO,eACZ,QACA;EAAE;EAAM,SAAS,CAAC;EAAO;EAAU;CAAM,GACzC,IACF;CAGF,IAAI,aAAa,aAAa,IAAI,SAAS,GAAG;EAC5C,MAAM,UACJ,WAAW,WACX,gBAAgB,SAAS,CAAC,CAAC,KAAK,UAAU;GACxC,UAAU,KAAK;GACf,OAAO,KAAK;GACZ,OAAO,KAAK;EACd,EAAE;EACJ,OACE,oBAAC,QAAD;GACE,YAAA;GACA,MAAM,cAAc,aAAa,aAAa,KAAA;GACrC;GACT,aAAa,QAAQ,QAAQ,YAAY;GACnC;GACN,OAAO,EAAE,OAAO,OAAO;GACvB,OAAO,UAAU,cAAc,aAAa,CAAC,IAAI;GACxC;GACT,GAAI;GACJ,WAAW,SAAS,SAAS,QAAQ,KAAA,CAAS;EAC/C,CAAA;CAEL;CAEA,QAAQ,WAAR;EACE,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK,YACH,OACE,oBAACA,qBAAD;GACE,aAAa,QAAQ,QAAQ,YAAY;GACnC;GACN,OAAO,EAAE,OAAO,OAAO;GACvB,OAAO,SAAS;GACP;GACT,GAAI;GACJ,WAAW,SAAS,SAAS,QAAQ,KAAA,CAAS;EAC/C,CAAA;EAGL,KAAK,UACH,OAAO,oBAAC,QAAD;GAAQ,SAAS,CAAC,CAAC;GAAO,GAAI;GAAY,WAAW,SAAS,SAAS,IAAI;EAAI,CAAA;EAExF,KAAK;EACL,KAAK,YACH,OACE,oBAAC,YAAD;GACE,YAAA;GACA,aAAa,QAAQ,QAAQ,YAAY;GACnC;GACN,OAAO,EAAE,OAAO,OAAO;GACvB,OAAO,SAAS;GACP;GACT,GAAI;GACJ,WAAW,SAAS,SAAS,QAAQ,KAAA,CAAS;EAC/C,CAAA;EAGL,KAAK;EACL,KAAK,iBACH,OACE,oBAAC,iBAAD;GACE,YAAA;GACM;GACN,OAAO,EAAE,OAAO,OAAO;GACvB,OAAO,SAAS,CAAC,MAAM,IAAI;GAClB;GACT,GAAI;GACJ,WAAW,SAAS,SAAS,SAAS,KAAK,MAAM,KAAK,MAAM,OAAO,KAAA,CAAS;EAC7E,CAAA;EAGL,SACE,OACE,oBAACC,eAAD;GACE,YAAA;GACA,aAAa,QAAQ,QAAQ,YAAY;GACnC;GACN,MAAM,cAAc,aAAa,aAAa,KAAA;GAC9C,OAAO,SAAS;GACP;GACT,GAAI;GACJ,WAAW,UAAU,SAAS,MAAM,OAAO,UAAU,KAAK,KAAA,IAAY,MAAM,OAAO,KAAK;GACxF,eAAe;IACb,SAAS,KAAA,CAAS;IAClB,WAAW,UAAU;GACvB;EACD,CAAA;CAGP;AACF"}
+{"version":3,"file":"FieldControl.mjs","names":["InputNumber","Input"],"sources":["../../../src/base-ui/ProTable/FieldControl.tsx"],"sourcesContent":["import { useThemeMode } from 'antd-style';\nimport { type ReactNode } from 'react';\n\nimport DatePicker from '@/base-ui/DatePicker/DatePicker';\nimport DateRangePicker from '@/base-ui/DatePicker/DateRangePicker';\nimport Input from '@/base-ui/Input/Input';\nimport InputNumber from '@/base-ui/Input/InputNumber';\nimport Select from '@/base-ui/Select';\nimport Switch from '@/base-ui/Switch';\n\nimport type { ProColumnType, ProTableFormInstance, ProTableValueType } from './type';\nimport { useColumnRequest } from './useColumnRequest';\nimport { resolveValueEnum, resolveValueType, valueEnumToList } from './utils';\n\nexport interface FieldControlProps {\n  column: ProColumnType<any>;\n  form: ProTableFormInstance;\n  /** Light filter bar: small controls, outlined in light mode and filled in dark mode. */\n  light?: boolean;\n  onChange: (value: any) => void;\n  placeholder: { input: string; select: string };\n  value: any;\n}\n\nconst SELECT_TYPES = new Set<ProTableValueType>(['select', 'radio', 'checkbox']);\n\n/** The search-form control of a column (Pro \"edit\" mode, query flavor). */\nconst FieldControl = ({ column, form, light, onChange, placeholder, value }: FieldControlProps) => {\n  const valueType = resolveValueType(column) ?? 'text';\n  const valueEnum = resolveValueEnum(column);\n  const { fieldProps = {} } = column;\n  const label = typeof column.title === 'string' ? column.title : undefined;\n  const size = light ? 'small' : undefined;\n  const { isDarkMode } = useThemeMode();\n  // Light filter: outlined on light backgrounds, filled in dark mode.\n  const variant = light ? (isDarkMode ? 'filled' : 'outlined') : undefined;\n  const remote = useColumnRequest(column);\n\n  if (column.renderFormItem) {\n    return column.renderFormItem(\n      column,\n      { form, isQuery: !light, onChange, value },\n      form,\n    ) as ReactNode;\n  }\n\n  if (remote.enabled || valueEnum || SELECT_TYPES.has(valueType)) {\n    const options =\n      remote.options ??\n      fieldProps.options ??\n      valueEnumToList(valueEnum).map((item) => ({\n        disabled: item.disabled,\n        label: item.text,\n        value: item.value,\n      }));\n    return (\n      <Select\n        allowClear\n        loading={remote.loading}\n        mode={valueType === 'checkbox' ? 'multiple' : undefined}\n        options={options as any}\n        placeholder={light ? label : placeholder.select}\n        size={size}\n        style={{ width: '100%' }}\n        value={value ?? (valueType === 'checkbox' ? [] : null)}\n        variant={variant}\n        {...fieldProps}\n        onChange={(next) => onChange(next ?? undefined)}\n        onSearch={\n          remote.onSearch\n            ? (keyWords: string) => {\n                remote.onSearch!(keyWords);\n                fieldProps.onSearch?.(keyWords);\n              }\n            : fieldProps.onSearch\n        }\n      />\n    );\n  }\n\n  switch (valueType) {\n    case 'digit':\n    case 'money':\n    case 'percent':\n    case 'progress': {\n      return (\n        <InputNumber\n          placeholder={light ? label : placeholder.input}\n          size={size}\n          style={{ width: '100%' }}\n          value={value ?? null}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) => onChange(next ?? undefined)}\n        />\n      );\n    }\n    case 'switch': {\n      return <Switch checked={!!value} {...fieldProps} onChange={(next) => onChange(next)} />;\n    }\n    case 'date':\n    case 'dateTime': {\n      return (\n        <DatePicker\n          allowClear\n          placeholder={light ? label : placeholder.select}\n          size={size}\n          style={{ width: '100%' }}\n          value={value ?? null}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) => onChange(next ?? undefined)}\n        />\n      );\n    }\n    case 'dateRange':\n    case 'dateTimeRange': {\n      return (\n        <DateRangePicker\n          allowClear\n          size={size}\n          style={{ width: '100%' }}\n          value={value ?? [null, null]}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) => onChange(next && (next[0] || next[1]) ? next : undefined)}\n        />\n      );\n    }\n    default: {\n      return (\n        <Input\n          allowClear\n          placeholder={light ? label : placeholder.input}\n          size={size}\n          type={valueType === 'password' ? 'password' : undefined}\n          value={value ?? ''}\n          variant={variant}\n          {...fieldProps}\n          onChange={(event) => onChange(event.target.value === '' ? undefined : event.target.value)}\n          onClear={() => {\n            onChange(undefined);\n            fieldProps.onClear?.();\n          }}\n        />\n      );\n    }\n  }\n};\n\nexport default FieldControl;\n"],"mappings":";;;;;;;;;;;AAwBA,MAAM,+BAAe,IAAI,IAAuB;CAAC;CAAU;CAAS;AAAU,CAAC;;AAG/E,MAAM,gBAAgB,EAAE,QAAQ,MAAM,OAAO,UAAU,aAAa,YAA+B;CACjG,MAAM,YAAY,iBAAiB,MAAM,KAAK;CAC9C,MAAM,YAAY,iBAAiB,MAAM;CACzC,MAAM,EAAE,aAAa,CAAC,MAAM;CAC5B,MAAM,QAAQ,OAAO,OAAO,UAAU,WAAW,OAAO,QAAQ,KAAA;CAChE,MAAM,OAAO,QAAQ,UAAU,KAAA;CAC/B,MAAM,EAAE,eAAe,aAAa;CAEpC,MAAM,UAAU,QAAS,aAAa,WAAW,aAAc,KAAA;CAC/D,MAAM,SAAS,iBAAiB,MAAM;CAEtC,IAAI,OAAO,gBACT,OAAO,OAAO,eACZ,QACA;EAAE;EAAM,SAAS,CAAC;EAAO;EAAU;CAAM,GACzC,IACF;CAGF,IAAI,OAAO,WAAW,aAAa,aAAa,IAAI,SAAS,GAAG;EAC9D,MAAM,UACJ,OAAO,WACP,WAAW,WACX,gBAAgB,SAAS,CAAC,CAAC,KAAK,UAAU;GACxC,UAAU,KAAK;GACf,OAAO,KAAK;GACZ,OAAO,KAAK;EACd,EAAE;EACJ,OACE,oBAAC,QAAD;GACE,YAAA;GACA,SAAS,OAAO;GAChB,MAAM,cAAc,aAAa,aAAa,KAAA;GACrC;GACT,aAAa,QAAQ,QAAQ,YAAY;GACnC;GACN,OAAO,EAAE,OAAO,OAAO;GACvB,OAAO,UAAU,cAAc,aAAa,CAAC,IAAI;GACxC;GACT,GAAI;GACJ,WAAW,SAAS,SAAS,QAAQ,KAAA,CAAS;GAC9C,UACE,OAAO,YACF,aAAqB;IACpB,OAAO,SAAU,QAAQ;IACzB,WAAW,WAAW,QAAQ;GAChC,IACA,WAAW;EAElB,CAAA;CAEL;CAEA,QAAQ,WAAR;EACE,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK,YACH,OACE,oBAACA,qBAAD;GACE,aAAa,QAAQ,QAAQ,YAAY;GACnC;GACN,OAAO,EAAE,OAAO,OAAO;GACvB,OAAO,SAAS;GACP;GACT,GAAI;GACJ,WAAW,SAAS,SAAS,QAAQ,KAAA,CAAS;EAC/C,CAAA;EAGL,KAAK,UACH,OAAO,oBAAC,QAAD;GAAQ,SAAS,CAAC,CAAC;GAAO,GAAI;GAAY,WAAW,SAAS,SAAS,IAAI;EAAI,CAAA;EAExF,KAAK;EACL,KAAK,YACH,OACE,oBAAC,YAAD;GACE,YAAA;GACA,aAAa,QAAQ,QAAQ,YAAY;GACnC;GACN,OAAO,EAAE,OAAO,OAAO;GACvB,OAAO,SAAS;GACP;GACT,GAAI;GACJ,WAAW,SAAS,SAAS,QAAQ,KAAA,CAAS;EAC/C,CAAA;EAGL,KAAK;EACL,KAAK,iBACH,OACE,oBAAC,iBAAD;GACE,YAAA;GACM;GACN,OAAO,EAAE,OAAO,OAAO;GACvB,OAAO,SAAS,CAAC,MAAM,IAAI;GAClB;GACT,GAAI;GACJ,WAAW,SAAS,SAAS,SAAS,KAAK,MAAM,KAAK,MAAM,OAAO,KAAA,CAAS;EAC7E,CAAA;EAGL,SACE,OACE,oBAACC,eAAD;GACE,YAAA;GACA,aAAa,QAAQ,QAAQ,YAAY;GACnC;GACN,MAAM,cAAc,aAAa,aAAa,KAAA;GAC9C,OAAO,SAAS;GACP;GACT,GAAI;GACJ,WAAW,UAAU,SAAS,MAAM,OAAO,UAAU,KAAK,KAAA,IAAY,MAAM,OAAO,KAAK;GACxF,eAAe;IACb,SAAS,KAAA,CAAS;IAClB,WAAW,UAAU;GACvB;EACD,CAAA;CAGP;AACF"}

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

@@ -14,7 +14,7 @@ const TEXT_TYPES = /* @__PURE__ */ new Set([
 * Pro `LightFilter` (`search.filterType: 'light'`): the same base-ui Form instance rendered as
 * bare inline fields in the toolbar; select-like fields query on change, text fields on Enter / clear.
 */
-const LightFilter = ({ fields, form, placeholder }) => /* @__PURE__ */ jsxs(Form, {
+const LightFilter = ({ fields, form, ignoreRules, placeholder }) => /* @__PURE__ */ jsxs(Form, {
 	className: styles.lightFilter,
 	"data-pro-table-light-filter": "",
 	form,
@@ -31,7 +31,7 @@ const LightFilter = ({ fields, form, placeholder }) => /* @__PURE__ */ jsxs(Form
 		width: "auto"
 	},
 	children: [fields.map(({ column, name }) => {
-		const isText = !column.valueEnum && !column.renderFormItem && (!column.valueType || TEXT_TYPES.has(column.valueType));
+		const isText = !column.valueEnum && !column.request && !column.renderFormItem && (!column.valueType || TEXT_TYPES.has(column.valueType));
 		const wrapped = isText ? {
 			...column,
 			fieldProps: {
@@ -39,7 +39,10 @@ const LightFilter = ({ fields, form, placeholder }) => /* @__PURE__ */ jsxs(Form
 				onClear: () => void form.submit()
 			}
 		} : column;
-		const { required, validate } = rulesToFieldProps(column.formItemProps?.rules, column.formItemProps?.required);
+		const { required, validate } = ignoreRules ? {
+			required: void 0,
+			validate: void 0
+		} : rulesToFieldProps(column.formItemProps?.rules, column.formItemProps?.required);
 		return /* @__PURE__ */ jsx("div", {
 			className: styles.lightFilterItem,
 			children: /* @__PURE__ */ jsx(Form.Field, {

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

@@ -1 +1 @@
-{"version":3,"file":"LightFilter.mjs","names":[],"sources":["../../../src/base-ui/ProTable/LightFilter.tsx"],"sourcesContent":["import Form from '@lobehub/ui/base-ui/form';\n\nimport FieldControl from './FieldControl';\nimport { styles } from './style';\nimport type { ProTableFormInstance } from './type';\nimport { rulesToFieldProps, type SearchFieldSchema } from './useSearchForm';\n\nexport interface LightFilterProps {\n  fields: SearchFieldSchema[];\n  form: ProTableFormInstance;\n  placeholder: { input: string; select: string };\n}\n\nconst TEXT_TYPES = new Set(['text', 'textarea', 'password', 'code']);\n\n/**\n * Pro `LightFilter` (`search.filterType: 'light'`): the same base-ui Form instance rendered as\n * bare inline fields in the toolbar; select-like fields query on change, text fields on Enter / clear.\n */\nconst LightFilter = ({ fields, form, placeholder }: LightFilterProps) => (\n  <Form\n    className={styles.lightFilter}\n    data-pro-table-light-filter=\"\"\n    form={form}\n    variant=\"borderless\"\n    layout=\"horizontal\"\n    // The base-ui Form root stacks its children; the light filter is one wrapping row.\n    style={{\n      alignItems: 'center',\n      display: 'flex',\n      flex: '0 1 auto',\n      flexDirection: 'row',\n      flexWrap: 'wrap',\n      gap: 8,\n      minWidth: 0,\n      width: 'auto',\n    }}\n  >\n    {fields.map(({ column, name }) => {\n      const isText =\n        !column.valueEnum &&\n        !column.renderFormItem &&\n        (!column.valueType || TEXT_TYPES.has(column.valueType as string));\n      const wrapped = isText\n        ? {\n            ...column,\n            fieldProps: {\n              ...column.fieldProps,\n              onClear: () => void form.submit(),\n            },\n          }\n        : column;\n      const { required, validate } = rulesToFieldProps(\n        column.formItemProps?.rules,\n        column.formItemProps?.required,\n      );\n      return (\n        <div className={styles.lightFilterItem} key={name}>\n          <Form.Field\n            bare\n            name={name}\n            required={required}\n            validate={validate}\n            render={({ value, onChange }) => (\n              <FieldControl\n                light\n                column={wrapped}\n                form={form}\n                placeholder={placeholder}\n                value={value}\n                onChange={(next) => {\n                  onChange(next);\n                  if (!isText) void form.submit();\n                }}\n              />\n            )}\n          />\n        </div>\n      );\n    })}\n    {/* Text fields query on Enter through the native form submit. */}\n    <button hidden type=\"submit\" />\n  </Form>\n);\n\nexport default LightFilter;\n"],"mappings":";;;;;;AAaA,MAAM,6BAAa,IAAI,IAAI;CAAC;CAAQ;CAAY;CAAY;AAAM,CAAC;;;;;AAMnE,MAAM,eAAe,EAAE,QAAQ,MAAM,kBACnC,qBAAC,MAAD;CACE,WAAW,OAAO;CAClB,+BAA4B;CACtB;CACN,SAAQ;CACR,QAAO;CAEP,OAAO;EACL,YAAY;EACZ,SAAS;EACT,MAAM;EACN,eAAe;EACf,UAAU;EACV,KAAK;EACL,UAAU;EACV,OAAO;CACT;CAhBF,UAAA,CAkBG,OAAO,KAAK,EAAE,QAAQ,WAAW;EAChC,MAAM,SACJ,CAAC,OAAO,aACR,CAAC,OAAO,mBACP,CAAC,OAAO,aAAa,WAAW,IAAI,OAAO,SAAmB;EACjE,MAAM,UAAU,SACZ;GACE,GAAG;GACH,YAAY;IACV,GAAG,OAAO;IACV,eAAe,KAAK,KAAK,OAAO;GAClC;EACF,IACA;EACJ,MAAM,EAAE,UAAU,aAAa,kBAC7B,OAAO,eAAe,OACtB,OAAO,eAAe,QACxB;EACA,OACE,oBAAC,OAAD;GAAK,WAAW,OAAO;GACrB,UAAA,oBAAC,KAAK,OAAN;IACE,MAAA;IACM;IACI;IACA;IACV,SAAS,EAAE,OAAO,eAChB,oBAAC,cAAD;KACE,OAAA;KACA,QAAQ;KACF;KACO;KACN;KACP,WAAW,SAAS;MAClB,SAAS,IAAI;MACb,IAAI,CAAC,QAAQ,KAAU,OAAO;KAChC;IACD,CAAA;GAEJ,CAAA;EACE,GApBwC,IAoBxC;CAET,CAAC,GAED,oBAAC,UAAD;EAAQ,QAAA;EAAO,MAAK;CAAU,CAAA,CAC1B"}
+{"version":3,"file":"LightFilter.mjs","names":[],"sources":["../../../src/base-ui/ProTable/LightFilter.tsx"],"sourcesContent":["import Form from '@lobehub/ui/base-ui/form';\n\nimport FieldControl from './FieldControl';\nimport { styles } from './style';\nimport type { ProTableFormInstance } from './type';\nimport { rulesToFieldProps, type SearchFieldSchema } from './useSearchForm';\n\nexport interface LightFilterProps {\n  fields: SearchFieldSchema[];\n  form: ProTableFormInstance;\n  /** `form.ignoreRules`: render the fields without validation. */\n  ignoreRules?: boolean;\n  placeholder: { input: string; select: string };\n}\n\nconst TEXT_TYPES = new Set(['text', 'textarea', 'password', 'code']);\n\n/**\n * Pro `LightFilter` (`search.filterType: 'light'`): the same base-ui Form instance rendered as\n * bare inline fields in the toolbar; select-like fields query on change, text fields on Enter / clear.\n */\nconst LightFilter = ({ fields, form, ignoreRules, placeholder }: LightFilterProps) => (\n  <Form\n    className={styles.lightFilter}\n    data-pro-table-light-filter=\"\"\n    form={form}\n    variant=\"borderless\"\n    layout=\"horizontal\"\n    // The base-ui Form root stacks its children; the light filter is one wrapping row.\n    style={{\n      alignItems: 'center',\n      display: 'flex',\n      flex: '0 1 auto',\n      flexDirection: 'row',\n      flexWrap: 'wrap',\n      gap: 8,\n      minWidth: 0,\n      width: 'auto',\n    }}\n  >\n    {fields.map(({ column, name }) => {\n      const isText =\n        !column.valueEnum &&\n        !column.request &&\n        !column.renderFormItem &&\n        (!column.valueType || TEXT_TYPES.has(column.valueType as string));\n      const wrapped = isText\n        ? {\n            ...column,\n            fieldProps: {\n              ...column.fieldProps,\n              onClear: () => void form.submit(),\n            },\n          }\n        : column;\n      const { required, validate } = ignoreRules\n        ? { required: undefined, validate: undefined }\n        : rulesToFieldProps(column.formItemProps?.rules, column.formItemProps?.required);\n      return (\n        <div className={styles.lightFilterItem} key={name}>\n          <Form.Field\n            bare\n            name={name}\n            required={required}\n            validate={validate}\n            render={({ value, onChange }) => (\n              <FieldControl\n                light\n                column={wrapped}\n                form={form}\n                placeholder={placeholder}\n                value={value}\n                onChange={(next) => {\n                  onChange(next);\n                  if (!isText) void form.submit();\n                }}\n              />\n            )}\n          />\n        </div>\n      );\n    })}\n    {/* Text fields query on Enter through the native form submit. */}\n    <button hidden type=\"submit\" />\n  </Form>\n);\n\nexport default LightFilter;\n"],"mappings":";;;;;;AAeA,MAAM,6BAAa,IAAI,IAAI;CAAC;CAAQ;CAAY;CAAY;AAAM,CAAC;;;;;AAMnE,MAAM,eAAe,EAAE,QAAQ,MAAM,aAAa,kBAChD,qBAAC,MAAD;CACE,WAAW,OAAO;CAClB,+BAA4B;CACtB;CACN,SAAQ;CACR,QAAO;CAEP,OAAO;EACL,YAAY;EACZ,SAAS;EACT,MAAM;EACN,eAAe;EACf,UAAU;EACV,KAAK;EACL,UAAU;EACV,OAAO;CACT;CAhBF,UAAA,CAkBG,OAAO,KAAK,EAAE,QAAQ,WAAW;EAChC,MAAM,SACJ,CAAC,OAAO,aACR,CAAC,OAAO,WACR,CAAC,OAAO,mBACP,CAAC,OAAO,aAAa,WAAW,IAAI,OAAO,SAAmB;EACjE,MAAM,UAAU,SACZ;GACE,GAAG;GACH,YAAY;IACV,GAAG,OAAO;IACV,eAAe,KAAK,KAAK,OAAO;GAClC;EACF,IACA;EACJ,MAAM,EAAE,UAAU,aAAa,cAC3B;GAAE,UAAU,KAAA;GAAW,UAAU,KAAA;EAAU,IAC3C,kBAAkB,OAAO,eAAe,OAAO,OAAO,eAAe,QAAQ;EACjF,OACE,oBAAC,OAAD;GAAK,WAAW,OAAO;GACrB,UAAA,oBAAC,KAAK,OAAN;IACE,MAAA;IACM;IACI;IACA;IACV,SAAS,EAAE,OAAO,eAChB,oBAAC,cAAD;KACE,OAAA;KACA,QAAQ;KACF;KACO;KACN;KACP,WAAW,SAAS;MAClB,SAAS,IAAI;MACb,IAAI,CAAC,QAAQ,KAAU,OAAO;KAChC;IACD,CAAA;GAEJ,CAAA;EACE,GApBwC,IAoBxC;CAET,CAAC,GAED,oBAAC,UAAD;EAAQ,QAAA;EAAO,MAAK;CAAU,CAAA,CAC1B"}

package/es/base-ui/ProTable/ProTable.d.mts

@@ -1,9 +1,8 @@
-import { ProTableLocale, ProTableProps } from "./type.mjs";
-import { ReactNode } from "react";
+import { ProTableProps } from "./type.mjs";
+import { ProTableLocaleResolved } from "./locale.mjs";
 //#region src/base-ui/ProTable/ProTable.d.ts
-declare const DEFAULT_PRO_TABLE_LOCALE: Required<Omit<ProTableLocale, 'alertSelected'>> & {
-  alertSelected: (count: number) => ReactNode;
-};
+/** English texts; ProTable picks the preset from ConfigProvider `locale` (see `./locale`). */
+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;

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

@@ -1,10 +1,12 @@
 "use client";
+import { useI18n } from "../../ConfigProvider/index.mjs";
 import Button from "../Button/Button.mjs";
 import ActionIcon from "../ActionIcon/ActionIcon.mjs";
 import ActionIconGroup from "../../ActionIconGroup/ActionIconGroup.mjs";
 import Input_default from "../Input/Input.mjs";
 import { useEventCallback } from "../../hooks/useEventCallback.mjs";
 import Table from "../Table/Table.mjs";
+import { PRO_TABLE_LOCALE_EN_US, resolveProTableLocale } from "./locale.mjs";
 import { PRO_PREFIX_CLS, styles } from "./style.mjs";
 import ColumnSetting from "./ColumnSetting.mjs";
 import { getByPath, getProColumnKey, isEmptyValue, readPersistedState, resolveValueEnum, resolveValueType, valueEnumToList, writePersistedState } from "./utils.mjs";
@@ -19,34 +21,8 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
 import { Check, CircleHelp, Fullscreen, Minimize, RotateCw, Rows3, Settings } from "lucide-react";
 //#region src/base-ui/ProTable/ProTable.tsx
-const DEFAULT_PRO_TABLE_LOCALE = {
-	alertClear: "Clear",
-	alertSelected: (count) => `${count} selected`,
-	collapse: "Collapse",
-	columnSetting: "Column settings",
-	columnSettingReset: "Reset",
-	columnSettingTitle: "Columns",
-	copy: "Copy",
-	density: "Density",
-	densityLarge: "Large",
-	densityMedium: "Medium",
-	densitySmall: "Compact",
-	expand: "Expand",
-	fixedEnd: "Pin to end",
-	fixedEndTitle: "Pinned to end",
-	fixedStart: "Pin to start",
-	fixedStartTitle: "Pinned to start",
-	fullScreen: "Full screen",
-	moveDown: "Move down",
-	moveUp: "Move up",
-	noFixed: "Unpin",
-	reload: "Reload",
-	reset: "Reset",
-	search: "Search",
-	searchPlaceholder: "Please enter",
-	selectPlaceholder: "Please select",
-	unfixedTitle: "Not pinned"
-};
+/** English texts; ProTable picks the preset from ConfigProvider `locale` (see `./locale`). */
+const DEFAULT_PRO_TABLE_LOCALE = PRO_TABLE_LOCALE_EN_US;
 const assignRef = (ref, value) => {
 	if (!ref) return;
 	if (typeof ref === "function") ref(value);
@@ -59,13 +35,33 @@ const stableKey = (value) => {
 		return String(Math.random());
 	}
 };
+/** `value`, but switching on only after it stayed on for `delay` ms (off is immediate). */
+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;
+};
 const isGroup = (column) => !!column.children?.length;
 const ProTable = (props) => {
 	const { actionRef, beforeSearchSubmit, cardBordered, className, columnEmptyText = "-", columns: columnsProp = [], columnsState, dataSource, dateFormatter = "string", debounceTime = 10, defaultData, defaultSize, form: formConfig, formRef, ghost: _ghost, headerTitle, loading: loadingProp, locale: localeProp, manualRequest = false, onChange, onDataSourceChange, onLoad, onLoadingChange, onRequestError, onReset, onSizeChange, onSubmit, options, pagination: paginationProp, params, polling, postData, request, rowSelection, search, searchFormRender, size: sizeProp, style, tableAlertOptionRender, tableAlertRender, tableClassName, tableExtraRender, tableRender, tableStyle, toolbar, toolBarRender, tooltip, variant, ...tableProps } = props;
+	const i18n = useI18n();
 	const locale = {
-		...DEFAULT_PRO_TABLE_LOCALE,
+		...resolveProTableLocale(i18n?.locale),
 		...localeProp
 	};
+	/** Table-level texts (emptyText, filter / sort / selection labels) go on to the base-ui Table. */
+	const tableLocale = useMemo(() => {
+		if (!localeProp) return void 0;
+		const entries = Object.entries(localeProp).filter(([key]) => !(key in PRO_TABLE_LOCALE_EN_US));
+		return entries.length > 0 ? Object.fromEntries(entries) : void 0;
+	}, [localeProp]);
 	const rootRef = useRef(null);
 	const actionHolderRef = useRef(void 0);
 	const [innerSize, setInnerSize] = useState(defaultSize ?? "medium");
@@ -193,7 +189,14 @@ const ProTable = (props) => {
 		setPageInfo({ current: 1 });
 	}, [paramsKey, setPageInfo]);
 	const rows = request ? fetcher.data : dataSource ?? defaultData ?? [];
-	const loading = loadingProp ?? fetcher.loading;
+	const loadingConfig = typeof loadingProp === "object" ? loadingProp : void 0;
+	const { delay: loadingDelay, ...loadingSpin } = loadingConfig ?? {};
+	const rawLoading = loadingConfig === void 0 ? loadingProp ?? fetcher.loading : loadingConfig.spinning ?? (request ? fetcher.loading : true);
+	const loading = useDelayedFlag(rawLoading, loadingDelay);
+	const tableLoading = loadingConfig ? {
+		...loadingSpin,
+		spinning: loading
+	} : loading;
 	const selectionEnabled = !!rowSelection;
 	const [innerSelectedKeys, setInnerSelectedKeys] = useState(rowSelection && rowSelection.defaultSelectedRowKeys || []);
 	const selectedRowKeys = rowSelection && rowSelection.selectedRowKeys || innerSelectedKeys;
@@ -477,6 +480,7 @@ const ProTable = (props) => {
 	const lightFilterDom = lightMode && searchFields.length > 0 ? /* @__PURE__ */ jsx(LightFilter, {
 		fields: searchFields,
 		form,
+		ignoreRules: formConfig?.ignoreRules,
 		placeholder: {
 			input: locale.searchPlaceholder,
 			select: locale.selectPlaceholder
@@ -587,7 +591,8 @@ const ProTable = (props) => {
 		className: tableClassName,
 		columns: tableColumns,
 		dataSource: rows,
-		loading,
+		loading: tableLoading,
+		locale: tableLocale,
 		pagination: tablePagination,
 		rowSelection: mergedRowSelection,
 		size,
@@ -618,6 +623,8 @@ const ProTable = (props) => {
 				config: search ?? {},
 				fields: searchFields,
 				form,
+				ignoreRules: formConfig?.ignoreRules,
+				layout: formConfig?.layout,
 				loading: !!loading && !!request,
 				locale: {
 					collapse: locale.collapse,