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

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @tidbcloud/uikit
 
+## 2.0.0-beta.97
+
+### Patch Changes
+
+- feat: make default key exported and add some desc, this is still a PR for the release
+- Feat/search area bug fix ([#364](https://github.com/tidbcloud/tidbcloud-uikit/pull/364))
+- feat: Commit the generated changeset file
+- Feat/search area fix ([#363](https://github.com/tidbcloud/tidbcloud-uikit/pull/363))
+- fix(theme): enhance ActionIcon styles with size and hover effects ([#362](https://github.com/tidbcloud/tidbcloud-uikit/pull/362))
+- fix(theme): add border bottom to Modal header for improved styling consistency ([#361](https://github.com/tidbcloud/tidbcloud-uikit/pull/361))
+
 ## 2.0.0-beta.96
 
 ### Patch Changes

package/dist/biz/SearchArea/index.cjs

@@ -132,11 +132,11 @@ function FormItemRender(props) {
       return null;
   }
 }
-const FORM_STATE_KEY = "__fs__";
+const DEFAULT_FORM_STATE_KEY = "__fs__";
 function SearchArea(props) {
   const { data, onSubmit, recoverFromURLEnabled, defaultValues, formStateQueryKey, ...rest } = props;
   const [resetSeed, setResetSeed] = React.useState(0);
-  const [formState, setFormState] = useURLQueryState.useURLQueryState(formStateQueryKey ?? FORM_STATE_KEY, defaultValues);
+  const [formState, setFormState] = useURLQueryState.useURLQueryState(formStateQueryKey ?? DEFAULT_FORM_STATE_KEY, defaultValues);
   const state = recoverFromURLEnabled ? formState : defaultValues;
   const form = reactHookForm.useForm({ defaultValues: state });
   const handleSubmit = () => {
@@ -149,6 +149,11 @@ function SearchArea(props) {
     form.reset(defaultValues);
     recoverFromURLEnabled && setFormState(defaultValues);
   };
+  React.useEffect(() => {
+    if (recoverFromURLEnabled) {
+      handleSubmit();
+    }
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Form.Form, { onSubmit, ...rest, form, errorMessageProps: { mx: 16 }, withActions: false, children: [
     /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Box.Box, { sx: { display: "flex", gap: 16, flexWrap: "wrap" }, children: [
       data.map((x) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
@@ -162,11 +167,11 @@ function SearchArea(props) {
         x.name
       )),
       /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Box.Box, { sx: SX_Y_MID, children: [
-        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(index.Button, { variant: "subtle", color: "carbon.8", onClick: handleReset, children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(index.Button, { variant: "subtle", onClick: handleReset, children: [
           /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index$1.IconEraser, { size: 16, style: { marginRight: 4 } }),
           "Clear Filters"
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.Button, { variant: "subtle", color: "carbon.8", onClick: handleSubmit, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index$1.IconRefreshCw01, { size: 16 }) }) })
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.Button, { variant: "subtle", onClick: handleSubmit, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index$1.IconRefreshCw01, { size: 16 }) }) })
       ] })
     ] }) }),
     props.debugEnabled && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Box.Box, { sx: { height: 320 }, children: [
@@ -174,8 +179,9 @@ function SearchArea(props) {
         "result = ",
         JSON.stringify(form.getValues(), null, 4)
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.Button, { onClick: () => window.location.reload(), children: "Refresh Page" })
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.Button, { variant: "light", onClick: () => window.location.reload(), children: "Refresh Page" })
     ] })
   ] }) });
 }
+exports.DEFAULT_FORM_STATE_KEY = DEFAULT_FORM_STATE_KEY;
 exports.SearchArea = SearchArea;

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

@@ -43,5 +43,9 @@ export interface SearchAreaProps<T extends FieldValues> extends FormProps<T> {
      */
     formStateQueryKey?: string;
 }
+/**
+ * Please use `formStateQueryKey` instead if you have multiple <SearchArea /> components in the same page
+ */
+export declare const DEFAULT_FORM_STATE_KEY = "__fs__";
 export declare function SearchArea<T extends object>(props: SearchAreaProps<T>): import("react/jsx-runtime.js").JSX.Element;
 export {};

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

@@ -43,5 +43,9 @@ export interface SearchAreaProps<T extends FieldValues> extends FormProps<T> {
      */
     formStateQueryKey?: string;
 }
+/**
+ * Please use `formStateQueryKey` instead if you have multiple <SearchArea /> components in the same page
+ */
+export declare const DEFAULT_FORM_STATE_KEY = "__fs__";
 export declare function SearchArea<T extends object>(props: SearchAreaProps<T>): import("react/jsx-runtime.js").JSX.Element;
 export {};

package/dist/biz/SearchArea/index.js

@@ -130,11 +130,11 @@ function FormItemRender(props) {
       return null;
   }
 }
-const FORM_STATE_KEY = "__fs__";
+const DEFAULT_FORM_STATE_KEY = "__fs__";
 function SearchArea(props) {
   const { data, onSubmit, recoverFromURLEnabled, defaultValues, formStateQueryKey, ...rest } = props;
   const [resetSeed, setResetSeed] = useState(0);
-  const [formState, setFormState] = useURLQueryState(formStateQueryKey ?? FORM_STATE_KEY, defaultValues);
+  const [formState, setFormState] = useURLQueryState(formStateQueryKey ?? DEFAULT_FORM_STATE_KEY, defaultValues);
   const state = recoverFromURLEnabled ? formState : defaultValues;
   const form = useForm({ defaultValues: state });
   const handleSubmit = () => {
@@ -147,6 +147,11 @@ function SearchArea(props) {
     form.reset(defaultValues);
     recoverFromURLEnabled && setFormState(defaultValues);
   };
+  useEffect(() => {
+    if (recoverFromURLEnabled) {
+      handleSubmit();
+    }
+  }, []);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Form, { onSubmit, ...rest, form, errorMessageProps: { mx: 16 }, withActions: false, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", gap: 16, flexWrap: "wrap" }, children: [
       data.map((x) => /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -160,11 +165,11 @@ function SearchArea(props) {
         x.name
       )),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: SX_Y_MID, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "subtle", color: "carbon.8", onClick: handleReset, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "subtle", onClick: handleReset, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(IconEraser, { size: 16, style: { marginRight: 4 } }),
           "Clear Filters"
         ] }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "subtle", color: "carbon.8", onClick: handleSubmit, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconRefreshCw01, { size: 16 }) }) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "subtle", onClick: handleSubmit, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconRefreshCw01, { size: 16 }) }) })
       ] })
     ] }) }),
     props.debugEnabled && /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { height: 320 }, children: [
@@ -172,10 +177,11 @@ function SearchArea(props) {
         "result = ",
         JSON.stringify(form.getValues(), null, 4)
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: () => window.location.reload(), children: "Refresh Page" })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "light", onClick: () => window.location.reload(), children: "Refresh Page" })
     ] })
   ] }) });
 }
 export {
+  DEFAULT_FORM_STATE_KEY,
   SearchArea
 };

package/dist/biz/index.cjs

@@ -41,6 +41,7 @@ exports.CodeBlock = index$1.CodeBlock;
 exports.CopyText = index$1.CopyText;
 exports.PhoneInput = index$2.PhoneInput;
 exports.DotBadge = index$3.DotBadge;
+exports.DEFAULT_FORM_STATE_KEY = index$4.DEFAULT_FORM_STATE_KEY;
 exports.SearchArea = index$4.SearchArea;
 exports.LabelTooltip = index$5.LabelTooltip;
 exports.Tree = index$7.Tree;

package/dist/biz/index.js

@@ -2,7 +2,7 @@ import { Dot } from "./Dot/index.js";
 import { CodeBlock, CopyText } from "./CodeBlock/index.js";
 import { PhoneInput } from "./PhoneInput/index.js";
 import { DotBadge } from "./DotBadge/index.js";
-import { SearchArea } from "./SearchArea/index.js";
+import { DEFAULT_FORM_STATE_KEY, SearchArea } from "./SearchArea/index.js";
 import { LabelTooltip } from "./LabelTooltip/index.js";
 import { Tree } from "./Tree/index.js";
 import { TransferTree } from "./TransferTree/index.js";
@@ -37,6 +37,7 @@ import { DEFAULT_QUICK_RANGES, DEFAULT_TIME_FORMAT, DEFAULT_TIME_FORMAT_WITH_TIM
 export {
   CodeBlock,
   CopyText,
+  DEFAULT_FORM_STATE_KEY,
   DEFAULT_QUICK_RANGES,
   DEFAULT_TIME_FORMAT,
   DEFAULT_TIME_FORMAT_WITH_TIMEZONE,

package/dist/theme/theme.cjs

@@ -813,7 +813,8 @@ const theme = createTheme.createTheme({
           borderTopRightRadius: theme2.defaultRadius,
           padding: "16px 16px 16px 24px",
           margin: 0,
-          backgroundColor: themeColor(theme2, "carbon", 1)
+          backgroundColor: themeColor(theme2, "carbon", 1),
+          borderBottom: `1px solid ${themeColor(theme2, "carbon", 4)}`
         },
         title: {
           fontWeight: 700,
@@ -989,7 +990,8 @@ const theme = createTheme.createTheme({
     ActionIcon: {
       defaultProps: {
         variant: "subtle",
-        color: "carbon"
+        color: "carbon",
+        size: "md"
       },
       styles(theme2, props) {
         const color = props.color ?? theme2.primaryColor;
@@ -1017,14 +1019,18 @@ const theme = createTheme.createTheme({
           },
           transparent: {
             backgroundColor: "transparent",
-            color: themeColor(theme2, color, shade)
+            color: themeColor(theme2, color, shade),
+            "&:hover": {
+              color: themeColor(theme2, color, shade)
+            }
           },
           subtle: {
             backgroundColor: "transparent",
             color: themeColor(theme2, color, 8),
             borderColor: "transparent",
             "&:hover": {
-              backgroundColor: themeColor(theme2, color, 3)
+              backgroundColor: themeColor(theme2, color, 3),
+              color: themeColor(theme2, color, 8)
             },
             "&:active": {
               backgroundColor: themeColor(theme2, color, 4)
@@ -1041,18 +1047,23 @@ const theme = createTheme.createTheme({
             color: themeColor(theme2, color, shade),
             border: `1px solid ${themeColor(theme2, color, 4)}`,
             "&:hover": {
-              backgroundColor: themeColor(theme2, color, 2)
+              backgroundColor: themeColor(theme2, color, 2),
+              color: themeColor(theme2, color, shade)
             }
           },
           filled: {
             backgroundColor: themeColor(theme2, color, color.includes("carbon") ? 9 : 7),
-            color: theme2.white
+            color: theme2.white,
+            "&:hover": {
+              color: theme2.white
+            }
           },
           light: {
             backgroundColor: themeColor(theme2, color, 3),
             color: themeColor(theme2, color, 8),
             "&:hover": {
-              backgroundColor: themeColor(theme2, color, 4)
+              backgroundColor: themeColor(theme2, color, 4),
+              color: themeColor(theme2, color, 8)
             },
             "&:active": {
               backgroundColor: themeColor(theme2, color, 5)
@@ -1071,10 +1082,7 @@ const theme = createTheme.createTheme({
         return {
           root: {
             ...variantStyle,
-            width: size,
-            height: size,
-            minWidth: size,
-            minHeight: size
+            "--ai-size": size
           }
         };
       }

package/dist/theme/theme.js

@@ -811,7 +811,8 @@ const theme = createTheme({
           borderTopRightRadius: theme2.defaultRadius,
           padding: "16px 16px 16px 24px",
           margin: 0,
-          backgroundColor: themeColor(theme2, "carbon", 1)
+          backgroundColor: themeColor(theme2, "carbon", 1),
+          borderBottom: `1px solid ${themeColor(theme2, "carbon", 4)}`
         },
         title: {
           fontWeight: 700,
@@ -987,7 +988,8 @@ const theme = createTheme({
     ActionIcon: {
       defaultProps: {
         variant: "subtle",
-        color: "carbon"
+        color: "carbon",
+        size: "md"
       },
       styles(theme2, props) {
         const color = props.color ?? theme2.primaryColor;
@@ -1015,14 +1017,18 @@ const theme = createTheme({
           },
           transparent: {
             backgroundColor: "transparent",
-            color: themeColor(theme2, color, shade)
+            color: themeColor(theme2, color, shade),
+            "&:hover": {
+              color: themeColor(theme2, color, shade)
+            }
           },
           subtle: {
             backgroundColor: "transparent",
             color: themeColor(theme2, color, 8),
             borderColor: "transparent",
             "&:hover": {
-              backgroundColor: themeColor(theme2, color, 3)
+              backgroundColor: themeColor(theme2, color, 3),
+              color: themeColor(theme2, color, 8)
             },
             "&:active": {
               backgroundColor: themeColor(theme2, color, 4)
@@ -1039,18 +1045,23 @@ const theme = createTheme({
             color: themeColor(theme2, color, shade),
             border: `1px solid ${themeColor(theme2, color, 4)}`,
             "&:hover": {
-              backgroundColor: themeColor(theme2, color, 2)
+              backgroundColor: themeColor(theme2, color, 2),
+              color: themeColor(theme2, color, shade)
             }
           },
           filled: {
             backgroundColor: themeColor(theme2, color, color.includes("carbon") ? 9 : 7),
-            color: theme2.white
+            color: theme2.white,
+            "&:hover": {
+              color: theme2.white
+            }
           },
           light: {
             backgroundColor: themeColor(theme2, color, 3),
             color: themeColor(theme2, color, 8),
             "&:hover": {
-              backgroundColor: themeColor(theme2, color, 4)
+              backgroundColor: themeColor(theme2, color, 4),
+              color: themeColor(theme2, color, 8)
             },
             "&:active": {
               backgroundColor: themeColor(theme2, color, 5)
@@ -1069,10 +1080,7 @@ const theme = createTheme({
         return {
           root: {
             ...variantStyle,
-            width: size,
-            height: size,
-            minWidth: size,
-            minHeight: size
+            "--ai-size": size
           }
         };
       }

package/package.json

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