@tidbcloud/uikit 2.0.0-beta.75 → 2.0.0-beta.77

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @tidbcloud/uikit
 
+## 2.0.0-beta.77
+
+### Minor Changes
+
+- feat(icon): use Box wrapped icon
+  fix(Select): add onDropdownOpen and onDropdownClose callbacks for controlled dropdown behavior
+  feat(RadioGroup): enhance FormRadioGroup with tooltip support and flexible layout options
+
+## 2.0.0-beta.76
+
+### Patch Changes
+
+- fix protable column pinning style
+
 ## 2.0.0-beta.75
 
 ### Patch Changes

package/dist/biz/Form/RadioGroup.cjs

@@ -12,10 +12,19 @@ const reactHookForm = require("react-hook-form");
 ;/* empty css                                                                                                                                                                                            */
 ;/* empty css                                                                                                                                                                                            */
 const Radio = 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/Radio/Radio.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 Tooltip = 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/Tooltip/Tooltip.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 HoverCard = 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/HoverCard/HoverCard.cjs");
-const FormRadioGroup = ({ name, rules, onChange, data, ...rest }) => {
+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 FormRadioGroup = ({
+  name,
+  rules,
+  onChange,
+  data,
+  direction,
+  gap = "md",
+  ...rest
+}) => {
   const { control, formState, getFieldState } = reactHookForm.useFormContext();
   const { error } = getFieldState(name, formState);
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
@@ -36,14 +45,14 @@ const FormRadioGroup = ({ name, rules, onChange, data, ...rest }) => {
             },
             ...restField,
             error: error ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(errorMessage.ErrorMessage, { errors: formState.errors, name }) : void 0,
-            children: data.map((i) => {
+            children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Flex.Flex, { direction, gap, mt: "xs", children: data.map((i) => {
               var _a;
               const radioProps = lodashEs.omit(i, "tooltipProps", "tooltip");
-              return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(React.Fragment, { children: i.tooltip ? ((_a = i.tooltipProps) == null ? void 0 : _a.useTooltip) ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Tooltip.Tooltip, { label: i.tooltip, withArrow: true, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Radio.Radio, { ...radioProps }) }) }) : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(HoverCard.HoverCard, { withArrow: true, shadow: "md", withinPortal: true, ...i.tooltipProps, children: [
+              return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(React.Fragment, { children: i.tooltip ? ((_a = i.tooltipProps) == null ? void 0 : _a.useTooltip) ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Tooltip.Tooltip, { label: i.tooltip, withArrow: true, refProp: "rootRef", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Radio.Radio, { ...radioProps }) }) : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(HoverCard.HoverCard, { withArrow: true, shadow: "md", withinPortal: true, ...i.tooltipProps, children: [
                 /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(HoverCard.HoverCard.Target, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Radio.Radio, { ...radioProps }) }) }),
                 /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(HoverCard.HoverCard.Dropdown, { children: i.tooltip })
               ] }) : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Radio.Radio, { ...radioProps }) }, i.value);
-            })
+            }) })
           }
         );
       }

package/dist/biz/Form/RadioGroup.d.cts

@@ -1,14 +1,22 @@
 import { default as React } from 'react';
 import { RegisterOptions } from 'react-hook-form';
-import { RadioGroupProps, RadioProps, HoverCardProps } from '../../primitive/index.js';
+import { RadioGroupProps, RadioProps, HoverCardProps, FlexProps } from '../../primitive/index.js';
+interface RadioGroupItemData extends RadioProps {
+    tooltip?: React.ReactNode;
+    tooltipProps?: {
+        /**
+         * By default it will use HoverCard component to render tooltips.
+         * Set this to `true` to use Tooltip component instead.
+         */
+        useTooltip?: boolean;
+    } & HoverCardProps;
+}
 export interface FormRadioGroupProps extends Omit<RadioGroupProps, 'children'> {
     name: string;
     rules?: RegisterOptions;
-    data: Array<RadioProps & {
-        tooltip?: React.ReactNode;
-        tooltipProps?: HoverCardProps & {
-            useTooltip?: boolean;
-        };
-    }>;
+    data: RadioGroupItemData[];
+    direction?: FlexProps['direction'];
+    gap?: FlexProps['gap'];
 }
-export declare const FormRadioGroup: React.FC<FormRadioGroupProps>;
+export declare const FormRadioGroup: ({ name, rules, onChange, data, direction, gap, ...rest }: FormRadioGroupProps) => import("react/jsx-runtime.js").JSX.Element;
+export {};

package/dist/biz/Form/RadioGroup.d.ts

@@ -1,14 +1,22 @@
 import { default as React } from 'react';
 import { RegisterOptions } from 'react-hook-form';
-import { RadioGroupProps, RadioProps, HoverCardProps } from '../../primitive/index.js';
+import { RadioGroupProps, RadioProps, HoverCardProps, FlexProps } from '../../primitive/index.js';
+interface RadioGroupItemData extends RadioProps {
+    tooltip?: React.ReactNode;
+    tooltipProps?: {
+        /**
+         * By default it will use HoverCard component to render tooltips.
+         * Set this to `true` to use Tooltip component instead.
+         */
+        useTooltip?: boolean;
+    } & HoverCardProps;
+}
 export interface FormRadioGroupProps extends Omit<RadioGroupProps, 'children'> {
     name: string;
     rules?: RegisterOptions;
-    data: Array<RadioProps & {
-        tooltip?: React.ReactNode;
-        tooltipProps?: HoverCardProps & {
-            useTooltip?: boolean;
-        };
-    }>;
+    data: RadioGroupItemData[];
+    direction?: FlexProps['direction'];
+    gap?: FlexProps['gap'];
 }
-export declare const FormRadioGroup: React.FC<FormRadioGroupProps>;
+export declare const FormRadioGroup: ({ name, rules, onChange, data, direction, gap, ...rest }: FormRadioGroupProps) => import("react/jsx-runtime.js").JSX.Element;
+export {};

package/dist/biz/Form/RadioGroup.js

@@ -10,10 +10,19 @@ import { useFormContext, Controller } from "react-hook-form";
 /* empty css                                                                                                                                                                                          */
 /* empty css                                                                                                                                                                                          */
 import { Radio } 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/Radio/Radio.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 { Tooltip } 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/Tooltip/Tooltip.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";
 import { HoverCard } 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/HoverCard/HoverCard.js";
-const FormRadioGroup = ({ name, rules, onChange, data, ...rest }) => {
+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 FormRadioGroup = ({
+  name,
+  rules,
+  onChange,
+  data,
+  direction,
+  gap = "md",
+  ...rest
+}) => {
   const { control, formState, getFieldState } = useFormContext();
   const { error } = getFieldState(name, formState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -34,14 +43,14 @@ const FormRadioGroup = ({ name, rules, onChange, data, ...rest }) => {
             },
             ...restField,
             error: error ? /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorMessage, { errors: formState.errors, name }) : void 0,
-            children: data.map((i) => {
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Flex, { direction, gap, mt: "xs", children: data.map((i) => {
               var _a;
               const radioProps = omit(i, "tooltipProps", "tooltip");
-              return /* @__PURE__ */ jsxRuntimeExports.jsx(Fragment, { children: i.tooltip ? ((_a = i.tooltipProps) == null ? void 0 : _a.useTooltip) ? /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { label: i.tooltip, withArrow: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Radio, { ...radioProps }) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(HoverCard, { withArrow: true, shadow: "md", withinPortal: true, ...i.tooltipProps, children: [
+              return /* @__PURE__ */ jsxRuntimeExports.jsx(Fragment, { children: i.tooltip ? ((_a = i.tooltipProps) == null ? void 0 : _a.useTooltip) ? /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { label: i.tooltip, withArrow: true, refProp: "rootRef", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Radio, { ...radioProps }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(HoverCard, { withArrow: true, shadow: "md", withinPortal: true, ...i.tooltipProps, children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(HoverCard.Target, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Radio, { ...radioProps }) }) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(HoverCard.Dropdown, { children: i.tooltip })
               ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Radio, { ...radioProps }) }, i.value);
-            })
+            }) })
           }
         );
       }

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

@@ -86,7 +86,10 @@ function mergeProTableProps(props) {
             th: {
               color: theme.colors.carbon[7],
               backgroundColor: theme.colors.carbon[2],
-              fontWeight: 500
+              fontWeight: 500,
+              "&[data-column-pinned]": {
+                backgroundColor: theme.colors.carbon[2]
+              }
             }
           }
         },
@@ -235,8 +238,8 @@ function mergeProTableProps(props) {
     },
     state: {
       isLoading: loading,
-      columnVisibility: { ...enableExpanding ? { "mrt-row-expand": false } : void 0, ...state == null ? void 0 : state.columnVisibility },
-      ...state
+      ...state,
+      columnVisibility: { ...enableExpanding ? { "mrt-row-expand": false } : void 0, ...state == null ? void 0 : state.columnVisibility }
     },
     ...rest
   };

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

@@ -84,7 +84,10 @@ function mergeProTableProps(props) {
             th: {
               color: theme.colors.carbon[7],
               backgroundColor: theme.colors.carbon[2],
-              fontWeight: 500
+              fontWeight: 500,
+              "&[data-column-pinned]": {
+                backgroundColor: theme.colors.carbon[2]
+              }
             }
           }
         },
@@ -233,8 +236,8 @@ function mergeProTableProps(props) {
     },
     state: {
       isLoading: loading,
-      columnVisibility: { ...enableExpanding ? { "mrt-row-expand": false } : void 0, ...state == null ? void 0 : state.columnVisibility },
-      ...state
+      ...state,
+      columnVisibility: { ...enableExpanding ? { "mrt-row-expand": false } : void 0, ...state == null ? void 0 : state.columnVisibility }
     },
     ...rest
   };

package/dist/icons/index.d.cts

@@ -1,7 +1,7 @@
 import { SVGProps } from 'react';
-export interface IconProps extends SVGProps<SVGSVGElement> {
-    size?: number | string;
-    color?: string;
+import { BoxProps } from '@mantine/core';
+export interface IconProps extends Omit<SVGProps<SVGSVGElement>, keyof BoxProps>, BoxProps {
+    size?: number;
 }
 /**
  * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIyIDEySDE4TDE1IDIxTDkgM0w2IDEySDIiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K)

package/dist/icons/index.d.ts

@@ -1,7 +1,7 @@
 import { SVGProps } from 'react';
-export interface IconProps extends SVGProps<SVGSVGElement> {
-    size?: number | string;
-    color?: string;
+import { BoxProps } from '@mantine/core';
+export interface IconProps extends Omit<SVGProps<SVGSVGElement>, keyof BoxProps>, BoxProps {
+    size?: number;
 }
 /**
  * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIyIDEySDE4TDE1IDIxTDkgM0w2IDEySDIiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K)