@tidbcloud/uikit 2.0.3 → 2.0.5

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.0.5
4
+
5
+ ### Patch Changes
6
+
7
+ - fix(uikit): enforce input placeholder color with !important ([#449](https://github.com/tidbcloud/tidbcloud-uikit/pull/449))
8
+
9
+ ## 2.0.4
10
+
11
+ ### Patch Changes
12
+
13
+ - feat(uikit): fix SearchArea components bugs
14
+ - Feat/search area fix ([#448](https://github.com/tidbcloud/tidbcloud-uikit/pull/448))
15
+ - chore: add type checking for UIKit in CI/CD pipeline ([#447](https://github.com/tidbcloud/tidbcloud-uikit/pull/447))
16
+ - feat(story): add RadioCard story demonstrating card-style radio selection ([#446](https://github.com/tidbcloud/tidbcloud-uikit/pull/446))
17
+
3
18
  ## 2.0.3
4
19
 
5
20
  ### Patch Changes
@@ -17,6 +17,7 @@ export interface FormProps<T extends FieldValues = object> extends BoxProps, Omi
17
17
  stopPropagation?: boolean;
18
18
  preventDefault?: boolean;
19
19
  onSubmit: SubmitHandler<T>;
20
+ onRefresh?: () => void;
20
21
  onError?: () => any;
21
22
  onCancel?: () => void;
22
23
  onFormUnMount?: () => void;
@@ -17,6 +17,7 @@ export interface FormProps<T extends FieldValues = object> extends BoxProps, Omi
17
17
  stopPropagation?: boolean;
18
18
  preventDefault?: boolean;
19
19
  onSubmit: SubmitHandler<T>;
20
+ onRefresh?: () => void;
20
21
  onError?: () => any;
21
22
  onCancel?: () => void;
22
23
  onFormUnMount?: () => void;
@@ -124,6 +124,7 @@ function FormItemRender(props) {
124
124
  {
125
125
  name,
126
126
  value: keyword,
127
+ clearable: true,
127
128
  onChange: (val) => {
128
129
  setKeyword(val);
129
130
  triggerSubmit();
@@ -137,7 +138,7 @@ function FormItemRender(props) {
137
138
  }
138
139
  const DEFAULT_FORM_STATE_KEY = "__fs";
139
140
  function SearchArea(props) {
140
- const { data, onSubmit, recoverFromURLEnabled, defaultValues, formStateQueryKey, ...rest } = props;
141
+ const { data, onSubmit, onRefresh, recoverFromURLEnabled, defaultValues, formStateQueryKey, ...rest } = props;
141
142
  const [resetSeed, setResetSeed] = React.useState(0);
142
143
  const [formState, setFormState] = useURLQueryState.useURLQueryState(formStateQueryKey ?? DEFAULT_FORM_STATE_KEY, defaultValues);
143
144
  const state = recoverFromURLEnabled ? formState : defaultValues;
@@ -150,8 +151,12 @@ function SearchArea(props) {
150
151
  const handleReset = () => {
151
152
  setResetSeed(resetSeed + 1);
152
153
  form.reset(defaultValues);
154
+ onSubmit(form.getValues());
153
155
  recoverFromURLEnabled && setFormState(defaultValues);
154
156
  };
157
+ const handleRefresh = () => {
158
+ onRefresh && onRefresh();
159
+ };
155
160
  React.useEffect(() => {
156
161
  if (recoverFromURLEnabled) {
157
162
  handleSubmit();
@@ -175,7 +180,7 @@ function SearchArea(props) {
175
180
  /* @__PURE__ */ jsxRuntime.jsx(index$1.IconEraser, { size: 16, style: { marginRight: 4 } }),
176
181
  "Clear Filters"
177
182
  ] }) }),
178
- /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsx(index.Button, { variant: "subtle", onClick: handleSubmit, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.IconRefreshCw01, { size: 16 }) }) })
183
+ onRefresh && /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsx(index.Button, { variant: "subtle", onClick: handleRefresh, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.IconRefreshCw01, { size: 16 }) }) })
179
184
  ] })
180
185
  ] }) }),
181
186
  props.debugEnabled && /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { sx: { height: 320 }, children: [
@@ -122,6 +122,7 @@ function FormItemRender(props) {
122
122
  {
123
123
  name,
124
124
  value: keyword,
125
+ clearable: true,
125
126
  onChange: (val) => {
126
127
  setKeyword(val);
127
128
  triggerSubmit();
@@ -135,7 +136,7 @@ function FormItemRender(props) {
135
136
  }
136
137
  const DEFAULT_FORM_STATE_KEY = "__fs";
137
138
  function SearchArea(props) {
138
- const { data, onSubmit, recoverFromURLEnabled, defaultValues, formStateQueryKey, ...rest } = props;
139
+ const { data, onSubmit, onRefresh, recoverFromURLEnabled, defaultValues, formStateQueryKey, ...rest } = props;
139
140
  const [resetSeed, setResetSeed] = useState(0);
140
141
  const [formState, setFormState] = useURLQueryState(formStateQueryKey ?? DEFAULT_FORM_STATE_KEY, defaultValues);
141
142
  const state = recoverFromURLEnabled ? formState : defaultValues;
@@ -148,8 +149,12 @@ function SearchArea(props) {
148
149
  const handleReset = () => {
149
150
  setResetSeed(resetSeed + 1);
150
151
  form.reset(defaultValues);
152
+ onSubmit(form.getValues());
151
153
  recoverFromURLEnabled && setFormState(defaultValues);
152
154
  };
155
+ const handleRefresh = () => {
156
+ onRefresh && onRefresh();
157
+ };
153
158
  useEffect(() => {
154
159
  if (recoverFromURLEnabled) {
155
160
  handleSubmit();
@@ -173,7 +178,7 @@ function SearchArea(props) {
173
178
  /* @__PURE__ */ jsx(IconEraser, { size: 16, style: { marginRight: 4 } }),
174
179
  "Clear Filters"
175
180
  ] }) }),
176
- /* @__PURE__ */ jsx(Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsx(Button, { variant: "subtle", onClick: handleSubmit, children: /* @__PURE__ */ jsx(IconRefreshCw01, { size: 16 }) }) })
181
+ onRefresh && /* @__PURE__ */ jsx(Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsx(Button, { variant: "subtle", onClick: handleRefresh, children: /* @__PURE__ */ jsx(IconRefreshCw01, { size: 16 }) }) })
177
182
  ] })
178
183
  ] }) }),
179
184
  props.debugEnabled && /* @__PURE__ */ jsxs(Box, { sx: { height: 320 }, children: [
@@ -54,7 +54,7 @@ function getInputStyles(theme2, props) {
54
54
  ...passwordInnerInputSize
55
55
  },
56
56
  "&::placeholder": {
57
- color: themeColor(theme2, "carbon", 6)
57
+ color: `${themeColor(theme2, "carbon", 6)} !important`
58
58
  }
59
59
  }
60
60
  };
@@ -71,7 +71,7 @@ function getInputStyles(theme2, props) {
71
71
  ...passwordInnerInputSize
72
72
  },
73
73
  "&::placeholder": {
74
- color: themeColor(theme2, "carbon", 6)
74
+ color: `${themeColor(theme2, "carbon", 6)} !important`
75
75
  }
76
76
  }
77
77
  };
@@ -107,12 +107,12 @@ function getInputStyles(theme2, props) {
107
107
  opacity: 1
108
108
  },
109
109
  "&::placeholder": {
110
- color: themeColor(theme2, "carbon", 6)
110
+ color: `${themeColor(theme2, "carbon", 6)} !important`
111
111
  },
112
112
  "& .mantine-PasswordInput-innerInput": {
113
113
  ...passwordInnerInputSize,
114
114
  "&::placeholder": {
115
- color: themeColor(theme2, "carbon", 6)
115
+ color: `${themeColor(theme2, "carbon", 6)} !important`
116
116
  }
117
117
  }
118
118
  },
@@ -134,7 +134,7 @@ function getInputStyles(theme2, props) {
134
134
  borderColor: themeColor(theme2, "red", 4)
135
135
  },
136
136
  "&::placeholder": {
137
- color: themeColor(theme2, "carbon", 2)
137
+ color: `${themeColor(theme2, "carbon", 6)} !important`
138
138
  }
139
139
  }
140
140
  }
@@ -624,7 +624,7 @@ const theme = createTheme.createTheme({
624
624
  },
625
625
  inputField: {
626
626
  "&::placeholder": {
627
- color: themeColor(theme2, "carbon", 6)
627
+ color: `${themeColor(theme2, "carbon", 6)} !important`
628
628
  }
629
629
  },
630
630
  pill: {
@@ -52,7 +52,7 @@ function getInputStyles(theme2, props) {
52
52
  ...passwordInnerInputSize
53
53
  },
54
54
  "&::placeholder": {
55
- color: themeColor(theme2, "carbon", 6)
55
+ color: `${themeColor(theme2, "carbon", 6)} !important`
56
56
  }
57
57
  }
58
58
  };
@@ -69,7 +69,7 @@ function getInputStyles(theme2, props) {
69
69
  ...passwordInnerInputSize
70
70
  },
71
71
  "&::placeholder": {
72
- color: themeColor(theme2, "carbon", 6)
72
+ color: `${themeColor(theme2, "carbon", 6)} !important`
73
73
  }
74
74
  }
75
75
  };
@@ -105,12 +105,12 @@ function getInputStyles(theme2, props) {
105
105
  opacity: 1
106
106
  },
107
107
  "&::placeholder": {
108
- color: themeColor(theme2, "carbon", 6)
108
+ color: `${themeColor(theme2, "carbon", 6)} !important`
109
109
  },
110
110
  "& .mantine-PasswordInput-innerInput": {
111
111
  ...passwordInnerInputSize,
112
112
  "&::placeholder": {
113
- color: themeColor(theme2, "carbon", 6)
113
+ color: `${themeColor(theme2, "carbon", 6)} !important`
114
114
  }
115
115
  }
116
116
  },
@@ -132,7 +132,7 @@ function getInputStyles(theme2, props) {
132
132
  borderColor: themeColor(theme2, "red", 4)
133
133
  },
134
134
  "&::placeholder": {
135
- color: themeColor(theme2, "carbon", 2)
135
+ color: `${themeColor(theme2, "carbon", 6)} !important`
136
136
  }
137
137
  }
138
138
  }
@@ -622,7 +622,7 @@ const theme = createTheme({
622
622
  },
623
623
  inputField: {
624
624
  "&::placeholder": {
625
- color: themeColor(theme2, "carbon", 6)
625
+ color: `${themeColor(theme2, "carbon", 6)} !important`
626
626
  }
627
627
  },
628
628
  pill: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.0.3",
3
+ "version": "2.0.5",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",
@@ -136,6 +136,7 @@
136
136
  "test": "test",
137
137
  "copy:raw-icon": "mkdir -p ./dist/icons/raw && cpy 'src/icons/raw/*.svg' ./dist/icons/raw/",
138
138
  "build:icon": "tsx ./scripts/icon.ts",
139
- "build": "vite build && pnpm run copy:raw-icon"
139
+ "build": "vite build && pnpm run copy:raw-icon",
140
+ "type-check": "tsc --noEmit"
140
141
  }
141
142
  }