@tidbcloud/uikit 2.0.0-beta.94 → 2.0.0-beta.96

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @tidbcloud/uikit
 
+## 2.0.0-beta.96
+
+### Patch Changes
+
+- fix(Select): update Select component styles to include check icon and… ([#358](https://github.com/tidbcloud/tidbcloud-uikit/pull/358))
+- fix(Tree): update background color from blue to carbon for indeterminate checkbox for improved theme consistency ([#357](https://github.com/tidbcloud/tidbcloud-uikit/pull/357))
+- fix(PageShell): update PageHeader styles to set height instead of margin ([#356](https://github.com/tidbcloud/tidbcloud-uikit/pull/356))
+- fix(ProTable): resizing cursor missing ([#355](https://github.com/tidbcloud/tidbcloud-uikit/pull/355))
+
+## 2.0.0-beta.95
+
+### Patch Changes
+
+- feat(ProTable): update version
+- fix(ProTable): invalid use hook
+- feat(ProTable): update version
+- feat(ProTable): enable scrollbar
+- fix(ProTable): typo
+- feat(ProTable): update storybook
+- refactor(ProTable): add new pagination
+- feat: add protablepagination
+
 ## 2.0.0-beta.94
 
 ### Patch Changes

package/dist/biz/PageShell/index.cjs

@@ -28,7 +28,7 @@ const PageHeader = ({ sticky, leftSection, rightSection, children, ...restProps
         {
           paddingLeft: 24,
           paddingRight: 24,
-          marginBottom: 12
+          height: 56
         },
         sticky ? (theme) => ({
           position: "sticky",
@@ -116,4 +116,5 @@ const PageShell = ({
   }
   return page;
 };
+PageShell.Header = PageHeader;
 exports.PageShell = PageShell;

package/dist/biz/PageShell/index.d.cts

@@ -79,4 +79,7 @@ export interface PageShellProps {
     };
     children?: ReactNode;
 }
-export declare const PageShell: ({ className, headerClassName, bodyClassName, headerSticky, headerRightSection, headerBack, title, wrapped, wrapperProps, headerProps: { withBack, onBackClick, ...headerProps }, bodyProps, children }: PageShellProps) => import("react/jsx-runtime.js").JSX.Element;
+export declare const PageShell: {
+    ({ className, headerClassName, bodyClassName, headerSticky, headerRightSection, headerBack, title, wrapped, wrapperProps, headerProps: { withBack, onBackClick, ...headerProps }, bodyProps, children }: PageShellProps): import("react/jsx-runtime.js").JSX.Element;
+    Header: ({ sticky, leftSection, rightSection, children, ...restProps }: PageHeaderProps) => import("react/jsx-runtime.js").JSX.Element;
+};

package/dist/biz/PageShell/index.d.ts

@@ -79,4 +79,7 @@ export interface PageShellProps {
     };
     children?: ReactNode;
 }
-export declare const PageShell: ({ className, headerClassName, bodyClassName, headerSticky, headerRightSection, headerBack, title, wrapped, wrapperProps, headerProps: { withBack, onBackClick, ...headerProps }, bodyProps, children }: PageShellProps) => import("react/jsx-runtime.js").JSX.Element;
+export declare const PageShell: {
+    ({ className, headerClassName, bodyClassName, headerSticky, headerRightSection, headerBack, title, wrapped, wrapperProps, headerProps: { withBack, onBackClick, ...headerProps }, bodyProps, children }: PageShellProps): import("react/jsx-runtime.js").JSX.Element;
+    Header: ({ sticky, leftSection, rightSection, children, ...restProps }: PageHeaderProps) => import("react/jsx-runtime.js").JSX.Element;
+};

package/dist/biz/PageShell/index.js

@@ -26,7 +26,7 @@ const PageHeader = ({ sticky, leftSection, rightSection, children, ...restProps
         {
           paddingLeft: 24,
           paddingRight: 24,
-          marginBottom: 12
+          height: 56
         },
         sticky ? (theme) => ({
           position: "sticky",
@@ -114,6 +114,7 @@ const PageShell = ({
   }
   return page;
 };
+PageShell.Header = PageHeader;
 export {
   PageShell
 };

package/dist/biz/Table/ProTable/ProTable.cjs

@@ -12,11 +12,16 @@ const index_esm = require("../../../node_modules/.pnpm/mantine-react-table@2.0.0
 const TablePagination = require("../TablePagination.cjs");
 const helpers = require("./helpers.cjs");
 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");
+const isTableInstanceProp = (props) => props.table !== void 0;
 const ProTable = (props) => {
-  const { wrapperProps, pagination, ...restProps } = "table" in props ? props : helpers.mergeProTableProps(props);
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Box.Box, { ...wrapperProps, children: [
-    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index_esm.MantineReactTable, { ...restProps }),
-    !!pagination && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(TablePagination.TablePagination, { size: "sm", position: "center", mt: 16, ...pagination })
+  const isInstance = isTableInstanceProp(props);
+  let table = helpers.useProTable(isInstance ? { columns: [], data: [] } : props);
+  if (isInstance) {
+    table = props.table;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Box.Box, { ...props.wrapperProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index_esm.MantineReactTable, { table }),
+    table.options.enablePagination && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(TablePagination.ProTablePagination, { table, ...props.pagination })
   ] });
 };
 exports.ProTable = ProTable;

package/dist/biz/Table/ProTable/ProTable.js

@@ -7,14 +7,19 @@ import { MantineReactTable } from "../../../node_modules/.pnpm/mantine-react-tab
 /* empty css                                                                                                                                                                                                  */
 /* empty css                                                                                                                                                                                             */
 /* empty css                                                                                                                                                                                             */
-import { TablePagination } from "../TablePagination.js";
-import { mergeProTableProps } from "./helpers.js";
+import { ProTablePagination } from "../TablePagination.js";
+import { useProTable } from "./helpers.js";
 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";
+const isTableInstanceProp = (props) => props.table !== void 0;
 const ProTable = (props) => {
-  const { wrapperProps, pagination, ...restProps } = "table" in props ? props : mergeProTableProps(props);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { ...wrapperProps, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(MantineReactTable, { ...restProps }),
-    !!pagination && /* @__PURE__ */ jsxRuntimeExports.jsx(TablePagination, { size: "sm", position: "center", mt: 16, ...pagination })
+  const isInstance = isTableInstanceProp(props);
+  let table = useProTable(isInstance ? { columns: [], data: [] } : props);
+  if (isInstance) {
+    table = props.table;
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { ...props.wrapperProps, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(MantineReactTable, { table }),
+    table.options.enablePagination && /* @__PURE__ */ jsxRuntimeExports.jsx(ProTablePagination, { table, ...props.pagination })
   ] });
 };
 export {

package/dist/biz/Table/ProTable/helpers.cjs

@@ -47,11 +47,14 @@ function mergeProTableProps(props) {
     mantineTableFooterRowProps = {},
     mantineTableFooterProps = {},
     mantineLoadingOverlayProps = {},
+    enablePagination = false,
+    enableBottomToolbar,
     layoutMode,
     withBorder = true,
     loading = false,
     enableExpanding = false,
     enableRowVirtualization = false,
+    pagination,
     enableStickyHeader,
     enableStickyFooter,
     emptyMessage,
@@ -67,15 +70,11 @@ function mergeProTableProps(props) {
       shadow: "none",
       withBorder,
       sx: (theme2) => ({
-        backgroundColor: "inherit",
+        backgroundColor: "transparent",
         borderRadius: withBorder ? theme2.defaultRadius : 0,
         borderColor: withBorder ? theme2.colors.carbon[4] : "transparent",
         overflow: "hidden",
-        transition: "none",
-        "& ::-webkit-scrollbar": enableStickyHeader ? {
-          width: 0,
-          height: 0
-        } : void 0
+        transition: "none"
       })
     },
     mantinePaperProps
@@ -154,6 +153,9 @@ function mergeProTableProps(props) {
           borderColor: "transparent",
           minWidth: 20,
           minHeight: 20
+        },
+        ".mrt-table-head-cell-resize-handle": {
+          marginRight: -7
         }
       }
     };
@@ -230,13 +232,17 @@ function mergeProTableProps(props) {
     },
     mantineTableFooterProps
   );
+  const withPagination = !!pagination;
   return {
     enableColumnActions: false,
     enableColumnFilters: false,
     enableTopToolbar: false,
     enableSorting: false,
-    enablePagination: false,
-    enableBottomToolbar: false,
+    enablePagination: withPagination || enablePagination,
+    enableBottomToolbar: withPagination || enableBottomToolbar,
+    renderBottomToolbar: () => {
+      return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, {});
+    },
     enableExpanding,
     enableStickyHeader,
     enableStickyFooter,

package/dist/biz/Table/ProTable/helpers.js

@@ -45,11 +45,14 @@ function mergeProTableProps(props) {
     mantineTableFooterRowProps = {},
     mantineTableFooterProps = {},
     mantineLoadingOverlayProps = {},
+    enablePagination = false,
+    enableBottomToolbar,
     layoutMode,
     withBorder = true,
     loading = false,
     enableExpanding = false,
     enableRowVirtualization = false,
+    pagination,
     enableStickyHeader,
     enableStickyFooter,
     emptyMessage,
@@ -65,15 +68,11 @@ function mergeProTableProps(props) {
       shadow: "none",
       withBorder,
       sx: (theme2) => ({
-        backgroundColor: "inherit",
+        backgroundColor: "transparent",
         borderRadius: withBorder ? theme2.defaultRadius : 0,
         borderColor: withBorder ? theme2.colors.carbon[4] : "transparent",
         overflow: "hidden",
-        transition: "none",
-        "& ::-webkit-scrollbar": enableStickyHeader ? {
-          width: 0,
-          height: 0
-        } : void 0
+        transition: "none"
       })
     },
     mantinePaperProps
@@ -152,6 +151,9 @@ function mergeProTableProps(props) {
           borderColor: "transparent",
           minWidth: 20,
           minHeight: 20
+        },
+        ".mrt-table-head-cell-resize-handle": {
+          marginRight: -7
         }
       }
     };
@@ -228,13 +230,17 @@ function mergeProTableProps(props) {
     },
     mantineTableFooterProps
   );
+  const withPagination = !!pagination;
   return {
     enableColumnActions: false,
     enableColumnFilters: false,
     enableTopToolbar: false,
     enableSorting: false,
-    enablePagination: false,
-    enableBottomToolbar: false,
+    enablePagination: withPagination || enablePagination,
+    enableBottomToolbar: withPagination || enableBottomToolbar,
+    renderBottomToolbar: () => {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
+    },
     enableExpanding,
     enableStickyHeader,
     enableStickyFooter,

package/dist/biz/Table/ProTable/types.d.cts

@@ -9,7 +9,7 @@ type Xor<A, B> = Prettify<A & {
 }> | Prettify<B & {
     [k in keyof A]?: never;
 }>;
-type TableInstanceProp<TData extends MRT_RowData> = {
+export type TableInstanceProp<TData extends MRT_RowData> = {
     table: MRT_TableInstance<TData>;
 };
 export interface ProTableExtraProps {

package/dist/biz/Table/ProTable/types.d.ts

@@ -9,7 +9,7 @@ type Xor<A, B> = Prettify<A & {
 }> | Prettify<B & {
     [k in keyof A]?: never;
 }>;
-type TableInstanceProp<TData extends MRT_RowData> = {
+export type TableInstanceProp<TData extends MRT_RowData> = {
     table: MRT_TableInstance<TData>;
 };
 export interface ProTableExtraProps {

package/dist/biz/Table/TablePagination.cjs

@@ -7,39 +7,104 @@ const jsxRuntime = require("../../node_modules/.pnpm/react@18.3.1/node_modules/r
 ;/* empty css                                                                                                                                                                                                 */
 ;/* empty css                                                                                                                                                                                            */
 ;/* empty css                                                                                                                                                                                            */
+const index = require("../../primitive/Select/index.cjs");
 require("clsx");
 const styles = require("../../utils/styles.cjs");
+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");
+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");
 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");
-const TablePagination = ({ position = "center", ...rest }) => {
-  const justifyContentMaps = {
-    left: "flex-start",
-    right: "flex-end",
-    center: "center",
-    apart: "space-evenly"
+const parseFromValuesOrFunc = (fn, arg) => fn instanceof Function ? fn(arg) : fn;
+const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100].map((x) => ({ value: x.toString(), label: `${x} / page` }));
+const ProTablePagination = ({ table, ...props }) => {
+  const {
+    getPrePaginationRowModel,
+    getState,
+    options: {
+      icons: { IconChevronLeft, IconChevronRight },
+      mantinePaginationProps,
+      rowCount
+    },
+    setPageIndex,
+    setPageSize
+  } = table;
+  const {
+    pagination: { pageIndex = 0, pageSize = 10 }
+  } = getState();
+  const paginationProps = {
+    ...parseFromValuesOrFunc(mantinePaginationProps, {
+      table
+    }),
+    ...props
   };
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-    Pagination.Pagination,
+  const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
+  const numberOfPages = Math.ceil(totalRowCount / pageSize);
+  const showFirstLastPageButtons = numberOfPages > 2;
+  const {
+    rowsPerPageOptions = defaultRowsPerPage,
+    showRowsPerPage = false,
+    showTotal = false,
+    withEdges = showFirstLastPageButtons,
+    localization,
+    ...rest
+  } = paginationProps ?? {};
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+    Flex.Flex,
     {
-      ...rest,
-      styles: styles.mergeStylesList([
-        (theme) => ({
-          root: {
-            display: "flex",
-            justifyContent: justifyContentMaps[position]
-          },
-          control: {
-            border: "none",
-            color: theme.colors.carbon[9],
-            borderRadius: theme.defaultRadius,
-            "&[data-active]": {
-              color: theme.colors.carbon[9],
-              background: theme.colors.carbon[4]
+      align: "center",
+      justify: !showTotal && !showRowsPerPage ? "center" : showTotal ? "space-between" : "flex-end",
+      mt: "xs",
+      ...paginationProps.wrapperProps,
+      children: [
+        paginationProps.showTotal && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Flex.Flex, { align: "center", gap: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Text.Text, { c: "carbon.7", children: [
+            (localization == null ? void 0 : localization.total) || "Total:",
+            " "
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { c: "carbon.8", children: totalRowCount.toLocaleString() })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Flex.Flex, { align: "center", gap: "xs", children: [
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            Pagination.Pagination,
+            {
+              nextIcon: IconChevronRight,
+              onChange: paginationProps.onChange ?? ((newPageIndex) => setPageIndex(newPageIndex - 1)),
+              previousIcon: IconChevronLeft,
+              total: (paginationProps == null ? void 0 : paginationProps.total) ?? numberOfPages,
+              value: paginationProps.value ?? pageIndex + 1,
+              withEdges,
+              styles: styles.mergeStylesList([
+                (theme) => ({
+                  control: {
+                    border: "none",
+                    color: theme.colors.carbon[9],
+                    borderRadius: theme.defaultRadius,
+                    "&[data-active]": {
+                      color: theme.colors.carbon[9],
+                      background: theme.colors.carbon[4]
+                    }
+                  }
+                }),
+                rest.styles
+              ]),
+              ...rest
             }
-          }
-        }),
-        rest.styles
-      ])
+          ),
+          (paginationProps == null ? void 0 : paginationProps.showRowsPerPage) !== false && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            index.Select,
+            {
+              w: 114,
+              size: "sm",
+              allowDeselect: false,
+              "aria-labelledby": "rpp-label",
+              data: (paginationProps == null ? void 0 : paginationProps.rowsPerPageOptions) ?? defaultRowsPerPage,
+              onChange: (value) => setPageSize(+value),
+              value: pageSize.toString()
+            }
+          )
+        ] })
+      ]
     }
   );
 };
-exports.TablePagination = TablePagination;
+exports.ProTablePagination = ProTablePagination;
+exports.parseFromValuesOrFunc = parseFromValuesOrFunc;

package/dist/biz/Table/TablePagination.d.cts

@@ -1,5 +1,30 @@
-import { PaginationProps } from '../../primitive/index.js';
-export interface TablePaginationProps extends PaginationProps {
+import { MRT_RowData, MRT_TableInstance } from 'mantine-react-table';
+import { PaginationProps, ComboboxData, FlexProps } from '../../primitive/index.js';
+export declare const parseFromValuesOrFunc: <T, U>(fn: ((arg: U) => T) | T | undefined, arg: U) => T | undefined;
+interface Localization {
+    total?: string;
+}
+export interface TablePaginationProps extends Partial<PaginationProps> {
+    rowsPerPageOptions?: ComboboxData;
+    showRowsPerPage?: boolean;
+    showTotal?: boolean;
+    wrapperProps?: FlexProps;
+    /***
+     * @deprecated please use wrapper props
+     */
     position?: 'left' | 'right' | 'center' | 'apart';
+    /***
+     * @deprecated please use mantine-react-table -> state.pagination.pageIndex
+     */
+    value?: number;
+    /***
+     * @deprecated please use mantine-react-table -> rowCount
+     */
+    total?: number;
+    localization?: Localization;
+}
+interface ProTablePaginationProps<TData extends MRT_RowData> extends TablePaginationProps {
+    table: MRT_TableInstance<TData>;
 }
-export declare const TablePagination: ({ position, ...rest }: TablePaginationProps) => import("react/jsx-runtime.js").JSX.Element;
+export declare const ProTablePagination: <TData extends MRT_RowData>({ table, ...props }: ProTablePaginationProps<TData>) => import("react/jsx-runtime.js").JSX.Element;
+export {};

package/dist/biz/Table/TablePagination.d.ts

@@ -1,5 +1,30 @@
-import { PaginationProps } from '../../primitive/index.js';
-export interface TablePaginationProps extends PaginationProps {
+import { MRT_RowData, MRT_TableInstance } from 'mantine-react-table';
+import { PaginationProps, ComboboxData, FlexProps } from '../../primitive/index.js';
+export declare const parseFromValuesOrFunc: <T, U>(fn: ((arg: U) => T) | T | undefined, arg: U) => T | undefined;
+interface Localization {
+    total?: string;
+}
+export interface TablePaginationProps extends Partial<PaginationProps> {
+    rowsPerPageOptions?: ComboboxData;
+    showRowsPerPage?: boolean;
+    showTotal?: boolean;
+    wrapperProps?: FlexProps;
+    /***
+     * @deprecated please use wrapper props
+     */
     position?: 'left' | 'right' | 'center' | 'apart';
+    /***
+     * @deprecated please use mantine-react-table -> state.pagination.pageIndex
+     */
+    value?: number;
+    /***
+     * @deprecated please use mantine-react-table -> rowCount
+     */
+    total?: number;
+    localization?: Localization;
+}
+interface ProTablePaginationProps<TData extends MRT_RowData> extends TablePaginationProps {
+    table: MRT_TableInstance<TData>;
 }
-export declare const TablePagination: ({ position, ...rest }: TablePaginationProps) => import("react/jsx-runtime.js").JSX.Element;
+export declare const ProTablePagination: <TData extends MRT_RowData>({ table, ...props }: ProTablePaginationProps<TData>) => import("react/jsx-runtime.js").JSX.Element;
+export {};

package/dist/biz/Table/TablePagination.js

@@ -5,41 +5,106 @@ import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/no
 /* empty css                                                                                                                                                                                               */
 /* empty css                                                                                                                                                                                          */
 /* empty css                                                                                                                                                                                          */
+import { Select } from "../../primitive/Select/index.js";
 import "clsx";
 import { mergeStylesList } from "../../utils/styles.js";
+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";
+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";
 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";
-const TablePagination = ({ position = "center", ...rest }) => {
-  const justifyContentMaps = {
-    left: "flex-start",
-    right: "flex-end",
-    center: "center",
-    apart: "space-evenly"
+const parseFromValuesOrFunc = (fn, arg) => fn instanceof Function ? fn(arg) : fn;
+const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100].map((x) => ({ value: x.toString(), label: `${x} / page` }));
+const ProTablePagination = ({ table, ...props }) => {
+  const {
+    getPrePaginationRowModel,
+    getState,
+    options: {
+      icons: { IconChevronLeft, IconChevronRight },
+      mantinePaginationProps,
+      rowCount
+    },
+    setPageIndex,
+    setPageSize
+  } = table;
+  const {
+    pagination: { pageIndex = 0, pageSize = 10 }
+  } = getState();
+  const paginationProps = {
+    ...parseFromValuesOrFunc(mantinePaginationProps, {
+      table
+    }),
+    ...props
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Pagination,
+  const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
+  const numberOfPages = Math.ceil(totalRowCount / pageSize);
+  const showFirstLastPageButtons = numberOfPages > 2;
+  const {
+    rowsPerPageOptions = defaultRowsPerPage,
+    showRowsPerPage = false,
+    showTotal = false,
+    withEdges = showFirstLastPageButtons,
+    localization,
+    ...rest
+  } = paginationProps ?? {};
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Flex,
     {
-      ...rest,
-      styles: mergeStylesList([
-        (theme) => ({
-          root: {
-            display: "flex",
-            justifyContent: justifyContentMaps[position]
-          },
-          control: {
-            border: "none",
-            color: theme.colors.carbon[9],
-            borderRadius: theme.defaultRadius,
-            "&[data-active]": {
-              color: theme.colors.carbon[9],
-              background: theme.colors.carbon[4]
+      align: "center",
+      justify: !showTotal && !showRowsPerPage ? "center" : showTotal ? "space-between" : "flex-end",
+      mt: "xs",
+      ...paginationProps.wrapperProps,
+      children: [
+        paginationProps.showTotal && /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { align: "center", gap: 2, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { c: "carbon.7", children: [
+            (localization == null ? void 0 : localization.total) || "Total:",
+            " "
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { c: "carbon.8", children: totalRowCount.toLocaleString() })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { align: "center", gap: "xs", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Pagination,
+            {
+              nextIcon: IconChevronRight,
+              onChange: paginationProps.onChange ?? ((newPageIndex) => setPageIndex(newPageIndex - 1)),
+              previousIcon: IconChevronLeft,
+              total: (paginationProps == null ? void 0 : paginationProps.total) ?? numberOfPages,
+              value: paginationProps.value ?? pageIndex + 1,
+              withEdges,
+              styles: mergeStylesList([
+                (theme) => ({
+                  control: {
+                    border: "none",
+                    color: theme.colors.carbon[9],
+                    borderRadius: theme.defaultRadius,
+                    "&[data-active]": {
+                      color: theme.colors.carbon[9],
+                      background: theme.colors.carbon[4]
+                    }
+                  }
+                }),
+                rest.styles
+              ]),
+              ...rest
             }
-          }
-        }),
-        rest.styles
-      ])
+          ),
+          (paginationProps == null ? void 0 : paginationProps.showRowsPerPage) !== false && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Select,
+            {
+              w: 114,
+              size: "sm",
+              allowDeselect: false,
+              "aria-labelledby": "rpp-label",
+              data: (paginationProps == null ? void 0 : paginationProps.rowsPerPageOptions) ?? defaultRowsPerPage,
+              onChange: (value) => setPageSize(+value),
+              value: pageSize.toString()
+            }
+          )
+        ] })
+      ]
     }
   );
 };
 export {
-  TablePagination
+  ProTablePagination,
+  parseFromValuesOrFunc
 };

package/dist/biz/Tree/index.cjs

@@ -174,7 +174,7 @@ const Tree = React.forwardRef((props, ref) => {
             left: "50%",
             width: 8,
             height: 8,
-            backgroundColor: theme.colors.blue[7],
+            backgroundColor: theme.colors.carbon[8],
             border: 0,
             transform: "translate(-50%, -50%) scale(1)",
             opacity: 1,

package/dist/biz/Tree/index.js

@@ -172,7 +172,7 @@ const Tree = React__default.forwardRef((props, ref) => {
             left: "50%",
             width: 8,
             height: 8,
-            backgroundColor: theme.colors.blue[7],
+            backgroundColor: theme.colors.carbon[8],
             border: 0,
             transform: "translate(-50%, -50%) scale(1)",
             opacity: 1,

package/dist/theme/colors.cjs

@@ -2,15 +2,25 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const carbon = [
   "#FFFFFF",
+  // 0
   "#FDFEFF",
+  // 1
   "#F9FAFB",
+  // 2
   "#EDF1F2",
+  // 3
   "#DCE3E5",
+  // 4
   "#C4CDD0",
+  // 5
   "#9FA9AD",
+  // 6
   "#6F787B",
+  // 7
   "#383E40",
+  // 8
   "#1E2426"
+  // 9
 ];
 const peacock = [
   "#FBFDFE",

package/dist/theme/colors.dark.cjs

@@ -2,15 +2,25 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const carbon = [
   "#14181A",
+  // 0
   "#111517",
+  // 1
   "#1F2426",
+  // 2
   "#25292B",
+  // 3
   "#313638",
+  // 4
   "#43494D",
+  // 5
   "#50585C",
+  // 6
   "#79848A",
+  // 7
   "#ACB9BF",
+  // 8
   "#DAE2E5"
+  // 9
 ];
 const peacock = [
   "#11171A",

package/dist/theme/colors.dark.js

@@ -1,14 +1,24 @@
 const carbon = [
   "#14181A",
+  // 0
   "#111517",
+  // 1
   "#1F2426",
+  // 2
   "#25292B",
+  // 3
   "#313638",
+  // 4
   "#43494D",
+  // 5
   "#50585C",
+  // 6
   "#79848A",
+  // 7
   "#ACB9BF",
+  // 8
   "#DAE2E5"
+  // 9
 ];
 const peacock = [
   "#11171A",

package/dist/theme/colors.js

@@ -1,14 +1,24 @@
 const carbon = [
   "#FFFFFF",
+  // 0
   "#FDFEFF",
+  // 1
   "#F9FAFB",
+  // 2
   "#EDF1F2",
+  // 3
   "#DCE3E5",
+  // 4
   "#C4CDD0",
+  // 5
   "#9FA9AD",
+  // 6
   "#6F787B",
+  // 7
   "#383E40",
+  // 8
   "#1E2426"
+  // 9
 ];
 const peacock = [
   "#FBFDFE",

package/dist/theme/theme.cjs

@@ -548,7 +548,8 @@ const theme = createTheme.createTheme({
     Select: {
       defaultProps: {
         size: "md",
-        withCheckIcon: false
+        withCheckIcon: true,
+        checkIconPosition: "right"
       },
       styles: (theme2, props) => {
         return {
@@ -589,6 +590,11 @@ const theme = createTheme.createTheme({
               backgroundColor: "transparent",
               "&:hover": {
                 backgroundColor: themeColor(theme2, "carbon", 3)
+              },
+              // check icon color
+              "& > svg": {
+                color: themeColor(theme2, "carbon", 9),
+                opacity: 1
               }
             }
           },
@@ -596,6 +602,10 @@ const theme = createTheme.createTheme({
             "& > svg": {
               color: `${themeColor(theme2, "carbon", 7)} !important`
             }
+          },
+          dropdown: {
+            "--popover-border-color": themeColor(theme2, "carbon", 3),
+            "--popover-shadow": "0px 8px 32px 0px #00000014"
           }
         };
       }

package/dist/theme/theme.js

@@ -546,7 +546,8 @@ const theme = createTheme({
     Select: {
       defaultProps: {
         size: "md",
-        withCheckIcon: false
+        withCheckIcon: true,
+        checkIconPosition: "right"
       },
       styles: (theme2, props) => {
         return {
@@ -587,6 +588,11 @@ const theme = createTheme({
               backgroundColor: "transparent",
               "&:hover": {
                 backgroundColor: themeColor(theme2, "carbon", 3)
+              },
+              // check icon color
+              "& > svg": {
+                color: themeColor(theme2, "carbon", 9),
+                opacity: 1
               }
             }
           },
@@ -594,6 +600,10 @@ const theme = createTheme({
             "& > svg": {
               color: `${themeColor(theme2, "carbon", 7)} !important`
             }
+          },
+          dropdown: {
+            "--popover-border-color": themeColor(theme2, "carbon", 3),
+            "--popover-shadow": "0px 8px 32px 0px #00000014"
           }
         };
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tidbcloud/uikit",
-  "version": "2.0.0-beta.94",
+  "version": "2.0.0-beta.96",
   "description": "tidbcloud uikit",
   "type": "module",
   "main": "dist/primitive/index.cjs",