@tidbcloud/uikit 2.0.0-beta.71 → 2.0.0-beta.73

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tidbcloud/uikit
 
+## 2.0.0-beta.73
+
+### Patch Changes
+
+- fix protable sticky & rowVirtualization style
+
+## 2.0.0-beta.72
+
+### Patch Changes
+
+- fix ProTable footer style
+
 ## 2.0.0-beta.71
 
 ### Patch Changes

package/dist/biz/CodeBlock/index.cjs

@@ -100,6 +100,7 @@ const CodeBlock = ({
         /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(HoverCard.HoverCard.Target, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
           ActionIcon.ActionIcon,
           {
+            "aria-hidden": true,
             size: "sm",
             variant: "subtle",
             onClick: () => {
@@ -116,6 +117,7 @@ const CodeBlock = ({
         /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(HoverCard.HoverCard.Target, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
           ActionIcon.ActionIcon,
           {
+            "aria-label": "Copy",
             size: "sm",
             variant: "subtle",
             onClick: () => {
@@ -154,6 +156,7 @@ const CopyText = ({ children, value, ...rest }) => {
         /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(CopyButton.CopyButton, { value, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Tooltip.Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, position: "top", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
           ActionIcon.ActionIcon,
           {
+            "aria-label": "Copy",
             variant: "subtle",
             size: "sm",
             ml: 8,

package/dist/biz/CodeBlock/index.js

@@ -98,6 +98,7 @@ const CodeBlock = ({
         /* @__PURE__ */ jsxRuntimeExports.jsx(HoverCard.Target, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           ActionIcon,
           {
+            "aria-hidden": true,
             size: "sm",
             variant: "subtle",
             onClick: () => {
@@ -114,6 +115,7 @@ const CodeBlock = ({
         /* @__PURE__ */ jsxRuntimeExports.jsx(HoverCard.Target, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           ActionIcon,
           {
+            "aria-label": "Copy",
             size: "sm",
             variant: "subtle",
             onClick: () => {
@@ -152,6 +154,7 @@ const CopyText = ({ children, value, ...rest }) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx(CopyButton, { value, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, position: "top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           ActionIcon,
           {
+            "aria-label": "Copy",
             variant: "subtle",
             size: "sm",
             ml: 8,

package/dist/biz/Form/CopyText.cjs

@@ -60,7 +60,7 @@ const FormCopyText = ({
             children: value
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Tooltip.Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, ...tooltipProps, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ActionIcon.ActionIcon, { color: "carbon.8", variant: "transparent", onClick: copy, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Tooltip.Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, ...tooltipProps, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ActionIcon.ActionIcon, { "aria-label": "Copy", color: "carbon.8", variant: "transparent", onClick: copy, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
           index$1.IconCopy01,
           {
             size,

package/dist/biz/Form/CopyText.js

@@ -58,7 +58,7 @@ const FormCopyText = ({
             children: value
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, ...tooltipProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ActionIcon, { color: "carbon.8", variant: "transparent", onClick: copy, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, ...tooltipProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ActionIcon, { "aria-label": "Copy", color: "carbon.8", variant: "transparent", onClick: copy, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           IconCopy01,
           {
             size,

package/dist/biz/Form/TextInput.cjs

@@ -20,10 +20,11 @@ const FormTextInput = ({ name, rules, onChange, ...rest }) => {
       name,
       rules,
       render: ({ field }) => {
-        const { onChange: handleChange, ...restField } = field;
+        const { value = "", onChange: handleChange, ...restField } = field;
         return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
           TextInput.TextInput,
           {
+            value,
             onChange: (e) => {
               handleChange(e);
               onChange == null ? void 0 : onChange(e);

package/dist/biz/Form/TextInput.js

@@ -18,10 +18,11 @@ const FormTextInput = ({ name, rules, onChange, ...rest }) => {
       name,
       rules,
       render: ({ field }) => {
-        const { onChange: handleChange, ...restField } = field;
+        const { value = "", onChange: handleChange, ...restField } = field;
         return /* @__PURE__ */ jsxRuntimeExports.jsx(
           TextInput,
           {
+            value,
             onChange: (e) => {
               handleChange(e);
               onChange == null ? void 0 : onChange(e);

package/dist/biz/PageShell/index.cjs

@@ -63,6 +63,7 @@ const PageShell = ({
   const leftSection = (!!withBack || !!headerBack) && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
     ActionIcon.ActionIcon,
     {
+      "aria-label": "Navigate Back",
       variant: "default",
       onClick: () => {
         if (onBackClick) {

package/dist/biz/PageShell/index.js

@@ -61,6 +61,7 @@ const PageShell = ({
   const leftSection = (!!withBack || !!headerBack) && /* @__PURE__ */ jsxRuntimeExports.jsx(
     ActionIcon,
     {
+      "aria-label": "Navigate Back",
       variant: "default",
       onClick: () => {
         if (onBackClick) {

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

@@ -32,12 +32,20 @@ function mergeProTableProps(props) {
     mantinePaperProps = {},
     mantineSkeletonProps = {},
     mantineTableBodyProps,
+    mantineTableHeadCellProps = {},
     mantineTableBodyCellProps = {},
+    mantineTableBodyRowProps = {},
     mantineBottomToolbarProps = {},
+    mantineTableFooterCellProps = {},
+    mantineTableFooterRowProps = {},
+    mantineTableFooterProps = {},
+    mantineLoadingOverlayProps = {},
     withBorder = true,
     loading = false,
     enableExpanding = false,
+    enableRowVirtualization = false,
     enableStickyHeader,
+    enableStickyFooter,
     emptyMessage,
     errorMessage,
     data,
@@ -117,11 +125,36 @@ function mergeProTableProps(props) {
     }
     return {};
   }, mantineTableBodyProps);
+  const mTableHeaderCellProps = mergeMProps(() => {
+    return {
+      sx: {
+        ".mrt-table-head-sort-button": {
+          height: "auto",
+          width: "auto",
+          backgroundColor: "transparent",
+          borderColor: "transparent",
+          minWidth: 20,
+          minHeight: 20
+        }
+      }
+    };
+  }, mantineTableHeadCellProps);
   const mTableBodyCellProps = mergeMProps(() => {
     return {
       h: 48
     };
   }, mantineTableBodyCellProps);
+  const mTableBodyRowProps = mergeMProps(() => {
+    return {
+      sx: {
+        "&:where([data-with-row-border]):not(:last-of-type)": {
+          td: {
+            borderBottom: enableRowVirtualization ? "none !important" : void 0
+          }
+        }
+      }
+    };
+  }, mantineTableBodyRowProps);
   const mBottomToolbarProps = mergeMProps(
     {
       sx: (theme2) => ({
@@ -133,6 +166,12 @@ function mergeProTableProps(props) {
     },
     mantineBottomToolbarProps
   );
+  const mLoadingOverlayProps = mergeMProps(
+    () => ({
+      visible: false
+    }),
+    mantineLoadingOverlayProps
+  );
   const mTabelSkeletonProps = mergeMProps(
     {
       sx: (theme2) => ({
@@ -143,23 +182,52 @@ function mergeProTableProps(props) {
     },
     mantineSkeletonProps
   );
+  const mTableFooterCellProps = mergeMProps(
+    {
+      p: 8
+    },
+    mantineTableFooterCellProps
+  );
+  const mTableFooterRowProps = mergeMProps(
+    {
+      sx: { borderBottom: "none", outline: enableStickyFooter ? "none" : void 0 }
+    },
+    mantineTableFooterRowProps
+  );
+  const mTableFooterProps = mergeMProps(
+    {
+      sx: { outline: enableStickyFooter ? "none" : void 0 }
+    },
+    mantineTableFooterProps
+  );
   return {
     enableColumnActions: false,
     enableColumnFilters: false,
     enableTopToolbar: false,
     enableSorting: false,
     enablePagination: false,
+    enableBottomToolbar: false,
+    enableExpanding,
+    enableStickyHeader,
+    enableStickyFooter,
+    enableRowVirtualization,
     mantinePaperProps: mPaperProps,
     mantineTableProps: mTableProps,
+    mantineTableHeadCellProps: mTableHeaderCellProps,
     mantineSkeletonProps: mTabelSkeletonProps,
+    mantineLoadingOverlayProps: mLoadingOverlayProps,
     mantineTableBodyProps: mTableBodyProps,
     mantineBottomToolbarProps: mBottomToolbarProps,
+    mantineTableBodyRowProps: mTableBodyRowProps,
     mantineTableBodyCellProps: mTableBodyCellProps,
+    mantineTableFooterCellProps: mTableFooterCellProps,
+    mantineTableFooterRowProps: mTableFooterRowProps,
+    mantineTableFooterProps: mTableFooterProps,
     data,
     icons: {
-      IconArrowsSort: () => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.IconSwitchVertical02, { size: 14 }),
-      IconSortAscending: () => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.IconArrowUp, { size: 14 }),
-      IconSortDescending: () => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.IconArrowDown, { size: 14 })
+      IconArrowsSort: (props2) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.IconSwitchVertical02, { size: 14, ...props2 }),
+      IconSortAscending: (props2) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.IconArrowUp, { size: 14, ...props2 }),
+      IconSortDescending: (props2) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.IconArrowDown, { size: 14, ...props2 })
     },
     localization: {
       noRecordsToDisplay: errorMessage ? errorMessage : emptyMessage ? emptyMessage : void 0,

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

@@ -30,12 +30,20 @@ function mergeProTableProps(props) {
     mantinePaperProps = {},
     mantineSkeletonProps = {},
     mantineTableBodyProps,
+    mantineTableHeadCellProps = {},
     mantineTableBodyCellProps = {},
+    mantineTableBodyRowProps = {},
     mantineBottomToolbarProps = {},
+    mantineTableFooterCellProps = {},
+    mantineTableFooterRowProps = {},
+    mantineTableFooterProps = {},
+    mantineLoadingOverlayProps = {},
     withBorder = true,
     loading = false,
     enableExpanding = false,
+    enableRowVirtualization = false,
     enableStickyHeader,
+    enableStickyFooter,
     emptyMessage,
     errorMessage,
     data,
@@ -115,11 +123,36 @@ function mergeProTableProps(props) {
     }
     return {};
   }, mantineTableBodyProps);
+  const mTableHeaderCellProps = mergeMProps(() => {
+    return {
+      sx: {
+        ".mrt-table-head-sort-button": {
+          height: "auto",
+          width: "auto",
+          backgroundColor: "transparent",
+          borderColor: "transparent",
+          minWidth: 20,
+          minHeight: 20
+        }
+      }
+    };
+  }, mantineTableHeadCellProps);
   const mTableBodyCellProps = mergeMProps(() => {
     return {
       h: 48
     };
   }, mantineTableBodyCellProps);
+  const mTableBodyRowProps = mergeMProps(() => {
+    return {
+      sx: {
+        "&:where([data-with-row-border]):not(:last-of-type)": {
+          td: {
+            borderBottom: enableRowVirtualization ? "none !important" : void 0
+          }
+        }
+      }
+    };
+  }, mantineTableBodyRowProps);
   const mBottomToolbarProps = mergeMProps(
     {
       sx: (theme2) => ({
@@ -131,6 +164,12 @@ function mergeProTableProps(props) {
     },
     mantineBottomToolbarProps
   );
+  const mLoadingOverlayProps = mergeMProps(
+    () => ({
+      visible: false
+    }),
+    mantineLoadingOverlayProps
+  );
   const mTabelSkeletonProps = mergeMProps(
     {
       sx: (theme2) => ({
@@ -141,23 +180,52 @@ function mergeProTableProps(props) {
     },
     mantineSkeletonProps
   );
+  const mTableFooterCellProps = mergeMProps(
+    {
+      p: 8
+    },
+    mantineTableFooterCellProps
+  );
+  const mTableFooterRowProps = mergeMProps(
+    {
+      sx: { borderBottom: "none", outline: enableStickyFooter ? "none" : void 0 }
+    },
+    mantineTableFooterRowProps
+  );
+  const mTableFooterProps = mergeMProps(
+    {
+      sx: { outline: enableStickyFooter ? "none" : void 0 }
+    },
+    mantineTableFooterProps
+  );
   return {
     enableColumnActions: false,
     enableColumnFilters: false,
     enableTopToolbar: false,
     enableSorting: false,
     enablePagination: false,
+    enableBottomToolbar: false,
+    enableExpanding,
+    enableStickyHeader,
+    enableStickyFooter,
+    enableRowVirtualization,
     mantinePaperProps: mPaperProps,
     mantineTableProps: mTableProps,
+    mantineTableHeadCellProps: mTableHeaderCellProps,
     mantineSkeletonProps: mTabelSkeletonProps,
+    mantineLoadingOverlayProps: mLoadingOverlayProps,
     mantineTableBodyProps: mTableBodyProps,
     mantineBottomToolbarProps: mBottomToolbarProps,
+    mantineTableBodyRowProps: mTableBodyRowProps,
     mantineTableBodyCellProps: mTableBodyCellProps,
+    mantineTableFooterCellProps: mTableFooterCellProps,
+    mantineTableFooterRowProps: mTableFooterRowProps,
+    mantineTableFooterProps: mTableFooterProps,
     data,
     icons: {
-      IconArrowsSort: () => /* @__PURE__ */ jsxRuntimeExports.jsx(IconSwitchVertical02, { size: 14 }),
-      IconSortAscending: () => /* @__PURE__ */ jsxRuntimeExports.jsx(IconArrowUp, { size: 14 }),
-      IconSortDescending: () => /* @__PURE__ */ jsxRuntimeExports.jsx(IconArrowDown, { size: 14 })
+      IconArrowsSort: (props2) => /* @__PURE__ */ jsxRuntimeExports.jsx(IconSwitchVertical02, { size: 14, ...props2 }),
+      IconSortAscending: (props2) => /* @__PURE__ */ jsxRuntimeExports.jsx(IconArrowUp, { size: 14, ...props2 }),
+      IconSortDescending: (props2) => /* @__PURE__ */ jsxRuntimeExports.jsx(IconArrowDown, { size: 14, ...props2 })
     },
     localization: {
       noRecordsToDisplay: errorMessage ? errorMessage : emptyMessage ? emptyMessage : void 0,

package/dist/theme/theme.cjs

@@ -496,9 +496,6 @@ const theme = createTheme.createTheme({
     },
     Select: {
       defaultProps: {
-        transition: "fade",
-        transitionDuration: 200,
-        transitionTimingFunction: "ease",
         size: "md",
         withCheckIcon: false
       },
@@ -559,9 +556,6 @@ const theme = createTheme.createTheme({
     MultiSelect: {
       defaultProps: {
         size: "md",
-        transition: "fade",
-        transitionDuration: 200,
-        transitionTimingFunction: "ease",
         withCheckIcon: false
       },
       styles: (theme2, props) => {

package/dist/theme/theme.js

@@ -494,9 +494,6 @@ const theme = createTheme({
     },
     Select: {
       defaultProps: {
-        transition: "fade",
-        transitionDuration: 200,
-        transitionTimingFunction: "ease",
         size: "md",
         withCheckIcon: false
       },
@@ -557,9 +554,6 @@ const theme = createTheme({
     MultiSelect: {
       defaultProps: {
         size: "md",
-        transition: "fade",
-        transitionDuration: 200,
-        transitionTimingFunction: "ease",
         withCheckIcon: false
       },
       styles: (theme2, props) => {

package/package.json

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