@tidbcloud/uikit 2.0.0-beta.93 → 2.0.0-beta.95

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/biz/Table/ProTable/ProTable.cjs +9 -4
  3. package/dist/biz/Table/ProTable/ProTable.js +11 -6
  4. package/dist/biz/Table/ProTable/helpers.cjs +11 -8
  5. package/dist/biz/Table/ProTable/helpers.js +11 -8
  6. package/dist/biz/Table/ProTable/types.d.cts +1 -1
  7. package/dist/biz/Table/ProTable/types.d.ts +1 -1
  8. package/dist/biz/Table/TablePagination.cjs +92 -27
  9. package/dist/biz/Table/TablePagination.d.cts +28 -3
  10. package/dist/biz/Table/TablePagination.d.ts +28 -3
  11. package/dist/biz/Table/TablePagination.js +92 -27
  12. package/dist/biz/TimeRangePicker/index.cjs +1 -1
  13. package/dist/biz/TimeRangePicker/index.js +1 -1
  14. package/dist/primitive/Button/index.cjs +12 -2
  15. package/dist/primitive/Button/index.js +12 -2
  16. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.0.0-beta.95
4
+
5
+ ### Patch Changes
6
+
7
+ - feat(ProTable): update version
8
+ - fix(ProTable): invalid use hook
9
+ - feat(ProTable): update version
10
+ - feat(ProTable): enable scrollbar
11
+ - fix(ProTable): typo
12
+ - feat(ProTable): update storybook
13
+ - refactor(ProTable): add new pagination
14
+ - feat: add protablepagination
15
+
16
+ ## 2.0.0-beta.94
17
+
18
+ ### Patch Changes
19
+
20
+ - fix(Button): fix button component with support of 'data-loading' and … ([#353](https://github.com/tidbcloud/tidbcloud-uikit/pull/353))
21
+ - fix(customChangeset): correct pull request link formatting in changelog generation script ([#352](https://github.com/tidbcloud/tidbcloud-uikit/pull/352))
22
+
3
23
  ## 2.0.0-beta.93
4
24
 
5
25
  ### Patch Changes
package/dist/biz/Table/ProTable/ProTable.cjs CHANGED
@@ -12,11 +12,16 @@ const index_esm = require("../../../node_modules/.pnpm/mantine-react-table@2.0.0
12
12
  const TablePagination = require("../TablePagination.cjs");
13
13
  const helpers = require("./helpers.cjs");
14
14
  const Box = require("../../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/Box/Box.cjs");
15
+ const isTableInstanceProp = (props) => props.table !== void 0;
15
16
  const ProTable = (props) => {
16
- const { wrapperProps, pagination, ...restProps } = "table" in props ? props : helpers.mergeProTableProps(props);
17
- return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Box.Box, { ...wrapperProps, children: [
18
- /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index_esm.MantineReactTable, { ...restProps }),
19
- !!pagination && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(TablePagination.TablePagination, { size: "sm", position: "center", mt: 16, ...pagination })
17
+ const isInstance = isTableInstanceProp(props);
18
+ let table = helpers.useProTable(isInstance ? { columns: [], data: [] } : props);
19
+ if (isInstance) {
20
+ table = props.table;
21
+ }
22
+ return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Box.Box, { ...props.wrapperProps, children: [
23
+ /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index_esm.MantineReactTable, { table }),
24
+ table.options.enablePagination && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(TablePagination.ProTablePagination, { table, ...props.pagination })
20
25
  ] });
21
26
  };
22
27
  exports.ProTable = ProTable;
package/dist/biz/Table/ProTable/ProTable.js CHANGED
@@ -7,14 +7,19 @@ import { MantineReactTable } from "../../../node_modules/.pnpm/mantine-react-tab
7
7
  /* empty css */
8
8
  /* empty css */
9
9
  /* empty css */
10
- import { TablePagination } from "../TablePagination.js";
11
- import { mergeProTableProps } from "./helpers.js";
10
+ import { ProTablePagination } from "../TablePagination.js";
11
+ import { useProTable } from "./helpers.js";
12
12
  import { Box } from "../../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/Box/Box.js";
13
+ const isTableInstanceProp = (props) => props.table !== void 0;
13
14
  const ProTable = (props) => {
14
- const { wrapperProps, pagination, ...restProps } = "table" in props ? props : mergeProTableProps(props);
15
- return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { ...wrapperProps, children: [
16
- /* @__PURE__ */ jsxRuntimeExports.jsx(MantineReactTable, { ...restProps }),
17
- !!pagination && /* @__PURE__ */ jsxRuntimeExports.jsx(TablePagination, { size: "sm", position: "center", mt: 16, ...pagination })
15
+ const isInstance = isTableInstanceProp(props);
16
+ let table = useProTable(isInstance ? { columns: [], data: [] } : props);
17
+ if (isInstance) {
18
+ table = props.table;
19
+ }
20
+ return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { ...props.wrapperProps, children: [
21
+ /* @__PURE__ */ jsxRuntimeExports.jsx(MantineReactTable, { table }),
22
+ table.options.enablePagination && /* @__PURE__ */ jsxRuntimeExports.jsx(ProTablePagination, { table, ...props.pagination })
18
23
  ] });
19
24
  };
20
25
  export {
package/dist/biz/Table/ProTable/helpers.cjs CHANGED
@@ -47,11 +47,14 @@ function mergeProTableProps(props) {
47
47
  mantineTableFooterRowProps = {},
48
48
  mantineTableFooterProps = {},
49
49
  mantineLoadingOverlayProps = {},
50
+ enablePagination = false,
51
+ enableBottomToolbar,
50
52
  layoutMode,
51
53
  withBorder = true,
52
54
  loading = false,
53
55
  enableExpanding = false,
54
56
  enableRowVirtualization = false,
57
+ pagination,
55
58
  enableStickyHeader,
56
59
  enableStickyFooter,
57
60
  emptyMessage,
@@ -67,15 +70,11 @@ function mergeProTableProps(props) {
67
70
  shadow: "none",
68
71
  withBorder,
69
72
  sx: (theme2) => ({
70
- backgroundColor: "inherit",
73
+ backgroundColor: "transparent",
71
74
  borderRadius: withBorder ? theme2.defaultRadius : 0,
72
75
  borderColor: withBorder ? theme2.colors.carbon[4] : "transparent",
73
76
  overflow: "hidden",
74
- transition: "none",
75
- "& ::-webkit-scrollbar": enableStickyHeader ? {
76
- width: 0,
77
- height: 0
78
- } : void 0
77
+ transition: "none"
79
78
  })
80
79
  },
81
80
  mantinePaperProps
@@ -230,13 +229,17 @@ function mergeProTableProps(props) {
230
229
  },
231
230
  mantineTableFooterProps
232
231
  );
232
+ const withPagination = !!pagination;
233
233
  return {
234
234
  enableColumnActions: false,
235
235
  enableColumnFilters: false,
236
236
  enableTopToolbar: false,
237
237
  enableSorting: false,
238
- enablePagination: false,
239
- enableBottomToolbar: false,
238
+ enablePagination: withPagination || enablePagination,
239
+ enableBottomToolbar: withPagination || enableBottomToolbar,
240
+ renderBottomToolbar: () => {
241
+ return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, {});
242
+ },
240
243
  enableExpanding,
241
244
  enableStickyHeader,
242
245
  enableStickyFooter,
package/dist/biz/Table/ProTable/helpers.js CHANGED
@@ -45,11 +45,14 @@ function mergeProTableProps(props) {
45
45
  mantineTableFooterRowProps = {},
46
46
  mantineTableFooterProps = {},
47
47
  mantineLoadingOverlayProps = {},
48
+ enablePagination = false,
49
+ enableBottomToolbar,
48
50
  layoutMode,
49
51
  withBorder = true,
50
52
  loading = false,
51
53
  enableExpanding = false,
52
54
  enableRowVirtualization = false,
55
+ pagination,
53
56
  enableStickyHeader,
54
57
  enableStickyFooter,
55
58
  emptyMessage,
@@ -65,15 +68,11 @@ function mergeProTableProps(props) {
65
68
  shadow: "none",
66
69
  withBorder,
67
70
  sx: (theme2) => ({
68
- backgroundColor: "inherit",
71
+ backgroundColor: "transparent",
69
72
  borderRadius: withBorder ? theme2.defaultRadius : 0,
70
73
  borderColor: withBorder ? theme2.colors.carbon[4] : "transparent",
71
74
  overflow: "hidden",
72
- transition: "none",
73
- "& ::-webkit-scrollbar": enableStickyHeader ? {
74
- width: 0,
75
- height: 0
76
- } : void 0
75
+ transition: "none"
77
76
  })
78
77
  },
79
78
  mantinePaperProps
@@ -228,13 +227,17 @@ function mergeProTableProps(props) {
228
227
  },
229
228
  mantineTableFooterProps
230
229
  );
230
+ const withPagination = !!pagination;
231
231
  return {
232
232
  enableColumnActions: false,
233
233
  enableColumnFilters: false,
234
234
  enableTopToolbar: false,
235
235
  enableSorting: false,
236
- enablePagination: false,
237
- enableBottomToolbar: false,
236
+ enablePagination: withPagination || enablePagination,
237
+ enableBottomToolbar: withPagination || enableBottomToolbar,
238
+ renderBottomToolbar: () => {
239
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
240
+ },
238
241
  enableExpanding,
239
242
  enableStickyHeader,
240
243
  enableStickyFooter,
package/dist/biz/Table/ProTable/types.d.cts CHANGED
@@ -9,7 +9,7 @@ type Xor<A, B> = Prettify<A & {
9
9
  }> | Prettify<B & {
10
10
  [k in keyof A]?: never;
11
11
  }>;
12
- type TableInstanceProp<TData extends MRT_RowData> = {
12
+ export type TableInstanceProp<TData extends MRT_RowData> = {
13
13
  table: MRT_TableInstance<TData>;
14
14
  };
15
15
  export interface ProTableExtraProps {
package/dist/biz/Table/ProTable/types.d.ts CHANGED
@@ -9,7 +9,7 @@ type Xor<A, B> = Prettify<A & {
9
9
  }> | Prettify<B & {
10
10
  [k in keyof A]?: never;
11
11
  }>;
12
- type TableInstanceProp<TData extends MRT_RowData> = {
12
+ export type TableInstanceProp<TData extends MRT_RowData> = {
13
13
  table: MRT_TableInstance<TData>;
14
14
  };
15
15
  export interface ProTableExtraProps {
package/dist/biz/Table/TablePagination.cjs CHANGED
@@ -7,39 +7,104 @@ const jsxRuntime = require("../../node_modules/.pnpm/react@18.3.1/node_modules/r
7
7
  ;/* empty css */
8
8
  ;/* empty css */
9
9
  ;/* empty css */
10
+ const index = require("../../primitive/Select/index.cjs");
10
11
  require("clsx");
11
12
  const styles = require("../../utils/styles.cjs");
13
+ const Flex = require("../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Flex/Flex.cjs");
14
+ const Text = require("../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Text/Text.cjs");
12
15
  const Pagination = require("../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Pagination/Pagination.cjs");
13
- const TablePagination = ({ position = "center", ...rest }) => {
14
- const justifyContentMaps = {
15
- left: "flex-start",
16
- right: "flex-end",
17
- center: "center",
18
- apart: "space-evenly"
16
+ const parseFromValuesOrFunc = (fn, arg) => fn instanceof Function ? fn(arg) : fn;
17
+ const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100].map((x) => ({ value: x.toString(), label: `${x} / page` }));
18
+ const ProTablePagination = ({ table, ...props }) => {
19
+ const {
20
+ getPrePaginationRowModel,
21
+ getState,
22
+ options: {
23
+ icons: { IconChevronLeft, IconChevronRight },
24
+ mantinePaginationProps,
25
+ rowCount
26
+ },
27
+ setPageIndex,
28
+ setPageSize
29
+ } = table;
30
+ const {
31
+ pagination: { pageIndex = 0, pageSize = 10 }
32
+ } = getState();
33
+ const paginationProps = {
34
+ ...parseFromValuesOrFunc(mantinePaginationProps, {
35
+ table
36
+ }),
37
+ ...props
19
38
  };
20
- return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
21
- Pagination.Pagination,
39
+ const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
40
+ const numberOfPages = Math.ceil(totalRowCount / pageSize);
41
+ const showFirstLastPageButtons = numberOfPages > 2;
42
+ const {
43
+ rowsPerPageOptions = defaultRowsPerPage,
44
+ showRowsPerPage = false,
45
+ showTotal = false,
46
+ withEdges = showFirstLastPageButtons,
47
+ localization,
48
+ ...rest
49
+ } = paginationProps ?? {};
50
+ return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
51
+ Flex.Flex,
22
52
  {
23
- ...rest,
24
- styles: styles.mergeStylesList([
25
- (theme) => ({
26
- root: {
27
- display: "flex",
28
- justifyContent: justifyContentMaps[position]
29
- },
30
- control: {
31
- border: "none",
32
- color: theme.colors.carbon[9],
33
- borderRadius: theme.defaultRadius,
34
- "&[data-active]": {
35
- color: theme.colors.carbon[9],
36
- background: theme.colors.carbon[4]
53
+ align: "center",
54
+ justify: !showTotal && !showRowsPerPage ? "center" : showTotal ? "space-between" : "flex-end",
55
+ mt: "xs",
56
+ ...paginationProps.wrapperProps,
57
+ children: [
58
+ paginationProps.showTotal && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Flex.Flex, { align: "center", gap: 2, children: [
59
+ /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Text.Text, { c: "carbon.7", children: [
60
+ (localization == null ? void 0 : localization.total) || "Total:",
61
+ " "
62
+ ] }),
63
+ /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { c: "carbon.8", children: totalRowCount.toLocaleString() })
64
+ ] }),
65
+ /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Flex.Flex, { align: "center", gap: "xs", children: [
66
+ /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
67
+ Pagination.Pagination,
68
+ {
69
+ nextIcon: IconChevronRight,
70
+ onChange: paginationProps.onChange ?? ((newPageIndex) => setPageIndex(newPageIndex - 1)),
71
+ previousIcon: IconChevronLeft,
72
+ total: (paginationProps == null ? void 0 : paginationProps.total) ?? numberOfPages,
73
+ value: paginationProps.value ?? pageIndex + 1,
74
+ withEdges,
75
+ styles: styles.mergeStylesList([
76
+ (theme) => ({
77
+ control: {
78
+ border: "none",
79
+ color: theme.colors.carbon[9],
80
+ borderRadius: theme.defaultRadius,
81
+ "&[data-active]": {
82
+ color: theme.colors.carbon[9],
83
+ background: theme.colors.carbon[4]
84
+ }
85
+ }
86
+ }),
87
+ rest.styles
88
+ ]),
89
+ ...rest
37
90
  }
38
- }
39
- }),
40
- rest.styles
41
- ])
91
+ ),
92
+ (paginationProps == null ? void 0 : paginationProps.showRowsPerPage) !== false && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
93
+ index.Select,
94
+ {
95
+ w: 114,
96
+ size: "sm",
97
+ allowDeselect: false,
98
+ "aria-labelledby": "rpp-label",
99
+ data: (paginationProps == null ? void 0 : paginationProps.rowsPerPageOptions) ?? defaultRowsPerPage,
100
+ onChange: (value) => setPageSize(+value),
101
+ value: pageSize.toString()
102
+ }
103
+ )
104
+ ] })
105
+ ]
42
106
  }
43
107
  );
44
108
  };
45
- exports.TablePagination = TablePagination;
109
+ exports.ProTablePagination = ProTablePagination;
110
+ exports.parseFromValuesOrFunc = parseFromValuesOrFunc;
package/dist/biz/Table/TablePagination.d.cts CHANGED
@@ -1,5 +1,30 @@
1
- import { PaginationProps } from '../../primitive/index.js';
2
- export interface TablePaginationProps extends PaginationProps {
1
+ import { MRT_RowData, MRT_TableInstance } from 'mantine-react-table';
2
+ import { PaginationProps, ComboboxData, FlexProps } from '../../primitive/index.js';
3
+ export declare const parseFromValuesOrFunc: <T, U>(fn: ((arg: U) => T) | T | undefined, arg: U) => T | undefined;
4
+ interface Localization {
5
+ total?: string;
6
+ }
7
+ export interface TablePaginationProps extends Partial<PaginationProps> {
8
+ rowsPerPageOptions?: ComboboxData;
9
+ showRowsPerPage?: boolean;
10
+ showTotal?: boolean;
11
+ wrapperProps?: FlexProps;
12
+ /***
13
+ * @deprecated please use wrapper props
14
+ */
3
15
  position?: 'left' | 'right' | 'center' | 'apart';
16
+ /***
17
+ * @deprecated please use mantine-react-table -> state.pagination.pageIndex
18
+ */
19
+ value?: number;
20
+ /***
21
+ * @deprecated please use mantine-react-table -> rowCount
22
+ */
23
+ total?: number;
24
+ localization?: Localization;
25
+ }
26
+ interface ProTablePaginationProps<TData extends MRT_RowData> extends TablePaginationProps {
27
+ table: MRT_TableInstance<TData>;
4
28
  }
5
- export declare const TablePagination: ({ position, ...rest }: TablePaginationProps) => import("react/jsx-runtime.js").JSX.Element;
29
+ export declare const ProTablePagination: <TData extends MRT_RowData>({ table, ...props }: ProTablePaginationProps<TData>) => import("react/jsx-runtime.js").JSX.Element;
30
+ export {};
package/dist/biz/Table/TablePagination.d.ts CHANGED
@@ -1,5 +1,30 @@
1
- import { PaginationProps } from '../../primitive/index.js';
2
- export interface TablePaginationProps extends PaginationProps {
1
+ import { MRT_RowData, MRT_TableInstance } from 'mantine-react-table';
2
+ import { PaginationProps, ComboboxData, FlexProps } from '../../primitive/index.js';
3
+ export declare const parseFromValuesOrFunc: <T, U>(fn: ((arg: U) => T) | T | undefined, arg: U) => T | undefined;
4
+ interface Localization {
5
+ total?: string;
6
+ }
7
+ export interface TablePaginationProps extends Partial<PaginationProps> {
8
+ rowsPerPageOptions?: ComboboxData;
9
+ showRowsPerPage?: boolean;
10
+ showTotal?: boolean;
11
+ wrapperProps?: FlexProps;
12
+ /***
13
+ * @deprecated please use wrapper props
14
+ */
3
15
  position?: 'left' | 'right' | 'center' | 'apart';
16
+ /***
17
+ * @deprecated please use mantine-react-table -> state.pagination.pageIndex
18
+ */
19
+ value?: number;
20
+ /***
21
+ * @deprecated please use mantine-react-table -> rowCount
22
+ */
23
+ total?: number;
24
+ localization?: Localization;
25
+ }
26
+ interface ProTablePaginationProps<TData extends MRT_RowData> extends TablePaginationProps {
27
+ table: MRT_TableInstance<TData>;
4
28
  }
5
- export declare const TablePagination: ({ position, ...rest }: TablePaginationProps) => import("react/jsx-runtime.js").JSX.Element;
29
+ export declare const ProTablePagination: <TData extends MRT_RowData>({ table, ...props }: ProTablePaginationProps<TData>) => import("react/jsx-runtime.js").JSX.Element;
30
+ export {};
package/dist/biz/Table/TablePagination.js CHANGED
@@ -5,41 +5,106 @@ import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/no
5
5
  /* empty css */
6
6
  /* empty css */
7
7
  /* empty css */
8
+ import { Select } from "../../primitive/Select/index.js";
8
9
  import "clsx";
9
10
  import { mergeStylesList } from "../../utils/styles.js";
11
+ import { Flex } from "../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Flex/Flex.js";
12
+ import { Text } from "../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Text/Text.js";
10
13
  import { Pagination } from "../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Pagination/Pagination.js";
11
- const TablePagination = ({ position = "center", ...rest }) => {
12
- const justifyContentMaps = {
13
- left: "flex-start",
14
- right: "flex-end",
15
- center: "center",
16
- apart: "space-evenly"
14
+ const parseFromValuesOrFunc = (fn, arg) => fn instanceof Function ? fn(arg) : fn;
15
+ const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100].map((x) => ({ value: x.toString(), label: `${x} / page` }));
16
+ const ProTablePagination = ({ table, ...props }) => {
17
+ const {
18
+ getPrePaginationRowModel,
19
+ getState,
20
+ options: {
21
+ icons: { IconChevronLeft, IconChevronRight },
22
+ mantinePaginationProps,
23
+ rowCount
24
+ },
25
+ setPageIndex,
26
+ setPageSize
27
+ } = table;
28
+ const {
29
+ pagination: { pageIndex = 0, pageSize = 10 }
30
+ } = getState();
31
+ const paginationProps = {
32
+ ...parseFromValuesOrFunc(mantinePaginationProps, {
33
+ table
34
+ }),
35
+ ...props
17
36
  };
18
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
19
- Pagination,
37
+ const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
38
+ const numberOfPages = Math.ceil(totalRowCount / pageSize);
39
+ const showFirstLastPageButtons = numberOfPages > 2;
40
+ const {
41
+ rowsPerPageOptions = defaultRowsPerPage,
42
+ showRowsPerPage = false,
43
+ showTotal = false,
44
+ withEdges = showFirstLastPageButtons,
45
+ localization,
46
+ ...rest
47
+ } = paginationProps ?? {};
48
+ return /* @__PURE__ */ jsxRuntimeExports.jsxs(
49
+ Flex,
20
50
  {
21
- ...rest,
22
- styles: mergeStylesList([
23
- (theme) => ({
24
- root: {
25
- display: "flex",
26
- justifyContent: justifyContentMaps[position]
27
- },
28
- control: {
29
- border: "none",
30
- color: theme.colors.carbon[9],
31
- borderRadius: theme.defaultRadius,
32
- "&[data-active]": {
33
- color: theme.colors.carbon[9],
34
- background: theme.colors.carbon[4]
51
+ align: "center",
52
+ justify: !showTotal && !showRowsPerPage ? "center" : showTotal ? "space-between" : "flex-end",
53
+ mt: "xs",
54
+ ...paginationProps.wrapperProps,
55
+ children: [
56
+ paginationProps.showTotal && /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { align: "center", gap: 2, children: [
57
+ /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { c: "carbon.7", children: [
58
+ (localization == null ? void 0 : localization.total) || "Total:",
59
+ " "
60
+ ] }),
61
+ /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { c: "carbon.8", children: totalRowCount.toLocaleString() })
62
+ ] }),
63
+ /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { align: "center", gap: "xs", children: [
64
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
65
+ Pagination,
66
+ {
67
+ nextIcon: IconChevronRight,
68
+ onChange: paginationProps.onChange ?? ((newPageIndex) => setPageIndex(newPageIndex - 1)),
69
+ previousIcon: IconChevronLeft,
70
+ total: (paginationProps == null ? void 0 : paginationProps.total) ?? numberOfPages,
71
+ value: paginationProps.value ?? pageIndex + 1,
72
+ withEdges,
73
+ styles: mergeStylesList([
74
+ (theme) => ({
75
+ control: {
76
+ border: "none",
77
+ color: theme.colors.carbon[9],
78
+ borderRadius: theme.defaultRadius,
79
+ "&[data-active]": {
80
+ color: theme.colors.carbon[9],
81
+ background: theme.colors.carbon[4]
82
+ }
83
+ }
84
+ }),
85
+ rest.styles
86
+ ]),
87
+ ...rest
35
88
  }
36
- }
37
- }),
38
- rest.styles
39
- ])
89
+ ),
90
+ (paginationProps == null ? void 0 : paginationProps.showRowsPerPage) !== false && /* @__PURE__ */ jsxRuntimeExports.jsx(
91
+ Select,
92
+ {
93
+ w: 114,
94
+ size: "sm",
95
+ allowDeselect: false,
96
+ "aria-labelledby": "rpp-label",
97
+ data: (paginationProps == null ? void 0 : paginationProps.rowsPerPageOptions) ?? defaultRowsPerPage,
98
+ onChange: (value) => setPageSize(+value),
99
+ value: pageSize.toString()
100
+ }
101
+ )
102
+ ] })
103
+ ]
40
104
  }
41
105
  );
42
106
  };
43
107
  export {
44
- TablePagination
108
+ ProTablePagination,
109
+ parseFromValuesOrFunc
45
110
  };
package/dist/biz/TimeRangePicker/index.cjs CHANGED
@@ -89,7 +89,7 @@ const TimeRangePicker = ({
89
89
  }),
90
90
  w: disableAbsoluteRanges ? 200 : 280,
91
91
  sx,
92
- ...loading ? { "data-loading": true } : {},
92
+ loading,
93
93
  children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Group.Group, { w: "100%", gap: 0, children: [
94
94
  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { sx: { flex: "none" }, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(DurationBadge, { children: helpers.formatDuration(duration, true) }) }),
95
95
  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
package/dist/biz/TimeRangePicker/index.js CHANGED
@@ -88,7 +88,7 @@ const TimeRangePicker = ({
88
88
  }),
89
89
  w: disableAbsoluteRanges ? 200 : 280,
90
90
  sx,
91
- ...loading ? { "data-loading": true } : {},
91
+ loading,
92
92
  children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { w: "100%", gap: 0, children: [
93
93
  /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { flex: "none" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(DurationBadge, { children: formatDuration(duration, true) }) }),
94
94
  /* @__PURE__ */ jsxRuntimeExports.jsx(
package/dist/primitive/Button/index.cjs CHANGED
@@ -7,9 +7,19 @@ const Loader = require("../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash
7
7
  const Button$1 = require("../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Button/Button.cjs");
8
8
  const _Button = React.forwardRef((props, ref) => {
9
9
  const theme = MantineThemeProvider.useMantineTheme();
10
- const { leftSection, loading, disabled, loaderProps, ...rest } = props;
10
+ const {
11
+ leftSection,
12
+ loading,
13
+ disabled,
14
+ loaderProps,
15
+ ["data-disabled"]: dataDisabled,
16
+ ["data-loading"]: dataLoading,
17
+ ...rest
18
+ } = props;
11
19
  const loader = /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Loader.Loader, { size: 16, color: `${props.color ?? theme.primaryColor}.6`, ...loaderProps });
12
- return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Button$1.Button, { ...rest, ref, leftSection: loading ? loader : leftSection, disabled: disabled || loading });
20
+ const isLoading = loading || dataLoading;
21
+ const isDisabled = disabled || dataDisabled || isLoading;
22
+ return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Button$1.Button, { ...rest, ref, leftSection: isLoading ? loader : leftSection, disabled: isDisabled });
13
23
  });
14
24
  const Button = _Button;
15
25
  Button.Group = Button$1.Button.Group;
package/dist/primitive/Button/index.js CHANGED
@@ -5,9 +5,19 @@ import { Loader } from "../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash
5
5
  import { Button as Button$1 } from "../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Button/Button.js";
6
6
  const _Button = forwardRef((props, ref) => {
7
7
  const theme = useMantineTheme();
8
- const { leftSection, loading, disabled, loaderProps, ...rest } = props;
8
+ const {
9
+ leftSection,
10
+ loading,
11
+ disabled,
12
+ loaderProps,
13
+ ["data-disabled"]: dataDisabled,
14
+ ["data-loading"]: dataLoading,
15
+ ...rest
16
+ } = props;
9
17
  const loader = /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { size: 16, color: `${props.color ?? theme.primaryColor}.6`, ...loaderProps });
10
- return /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { ...rest, ref, leftSection: loading ? loader : leftSection, disabled: disabled || loading });
18
+ const isLoading = loading || dataLoading;
19
+ const isDisabled = disabled || dataDisabled || isLoading;
20
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { ...rest, ref, leftSection: isLoading ? loader : leftSection, disabled: isDisabled });
11
21
  });
12
22
  const Button = _Button;
13
23
  Button.Group = Button$1.Group;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.0.0-beta.93",
3
+ "version": "2.0.0-beta.95",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",