@tidbcloud/uikit 2.1.3 → 2.1.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/biz/DateTimePicker/index.cjs +129 -113
  3. package/dist/biz/DateTimePicker/index.mjs +129 -113
  4. package/dist/theme/theme.cjs +3 -3
  5. package/dist/theme/theme.mjs +3 -3
  6. package/package.json +4 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.1.5
4
+
5
+ ### Patch Changes
6
+
7
+ - fix(DateTimePicker): improve popover and input interaction ([#479](https://github.com/tidbcloud/tidbcloud-uikit/pull/479))
8
+
9
+ ## 2.1.4
10
+
11
+ ### Patch Changes
12
+
13
+ - fix(uikit/theme): adjust Menu component hover and active background colors ([#477](https://github.com/tidbcloud/tidbcloud-uikit/pull/477))
14
+ - chore(uikit): move react-hook-form to peer dependencies ([#476](https://github.com/tidbcloud/tidbcloud-uikit/pull/476))
15
+
3
16
  ## 2.1.3
4
17
 
5
18
  ### Patch Changes
package/dist/biz/DateTimePicker/index.cjs CHANGED
@@ -91,123 +91,139 @@ const DateTimePicker = ({
91
91
  next = next.utcOffset(utcOffset).hour(h).minute(m).second(s);
92
92
  updateCurrentValue(next, "timeScroller");
93
93
  });
94
- return /* @__PURE__ */ jsxRuntime.jsxs(Popover.Popover, { position: "bottom-end", opened, withinPortal, shadow: "md", children: [
95
- /* @__PURE__ */ jsxRuntime.jsx(Popover.Popover.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(
96
- TextInput.TextInput,
97
- {
98
- readOnly: true,
99
- disabled: disable,
100
- placeholder,
101
- value: inputStr,
102
- rightSection: loading ? /* @__PURE__ */ jsxRuntime.jsx(Loader.Loader, { size: "xs" }) : /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { component: index.IconClock, size: 18, c: "carbon.6" }),
103
- sx,
104
- size,
105
- onFocus: open,
106
- onBlur: close
107
- }
108
- ) }),
109
- /* @__PURE__ */ jsxRuntime.jsx(Popover.Popover.Dropdown, { children: /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { children: [
110
- /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { align: "flex-start", children: [
111
- /* @__PURE__ */ jsxRuntime.jsx(
112
- DatePicker.DatePicker,
94
+ return /* @__PURE__ */ jsxRuntime.jsxs(
95
+ Popover.Popover,
96
+ {
97
+ position: "bottom-end",
98
+ opened,
99
+ withinPortal,
100
+ shadow: "md",
101
+ closeOnClickOutside: true,
102
+ onChange: (opened2) => {
103
+ if (opened2) {
104
+ open();
105
+ } else {
106
+ close();
107
+ }
108
+ },
109
+ children: [
110
+ /* @__PURE__ */ jsxRuntime.jsx(Popover.Popover.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(
111
+ TextInput.TextInput,
113
112
  {
114
- minDate: startDate,
115
- maxDate: endDate,
116
- value: currentValue.toDate(),
117
- onChange: calendarChange,
118
- withCellSpacing: false,
119
- size: "md"
113
+ readOnly: true,
114
+ disabled: disable,
115
+ placeholder,
116
+ value: inputStr,
117
+ rightSection: loading ? /* @__PURE__ */ jsxRuntime.jsx(Loader.Loader, { size: "xs" }) : /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { component: index.IconClock, size: 18, c: "carbon.6" }),
118
+ sx,
119
+ size,
120
+ onClick: open
120
121
  }
121
- ),
122
- /* @__PURE__ */ jsxRuntime.jsx(Divider.Divider, { orientation: "vertical", mt: -12, mb: -16 }),
123
- /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { justify: "flex-start", children: [
124
- /* @__PURE__ */ jsxRuntime.jsx(
125
- TimeInput.TimeInput,
126
- {
127
- withSeconds: true,
128
- value: currentValue.format("HH:mm:ss"),
129
- onChange: timeInputChange,
130
- size: "sm",
131
- w: 112,
132
- styles: {
133
- input: {
134
- height: 30
135
- }
122
+ ) }),
123
+ /* @__PURE__ */ jsxRuntime.jsx(Popover.Popover.Dropdown, { children: /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { children: [
124
+ /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { align: "flex-start", children: [
125
+ /* @__PURE__ */ jsxRuntime.jsx(
126
+ DatePicker.DatePicker,
127
+ {
128
+ minDate: startDate,
129
+ maxDate: endDate,
130
+ value: currentValue.toDate(),
131
+ onChange: calendarChange,
132
+ withCellSpacing: false,
133
+ size: "md"
136
134
  }
137
- }
138
- ),
139
- /* @__PURE__ */ jsxRuntime.jsxs(
140
- Box.Box,
141
- {
142
- pos: "relative",
143
- fz: 14,
144
- fw: 400,
145
- h: 224,
146
- sx: (theme) => ({ color: theme.colors.carbon[8], overflow: "hidden", zIndex: 9999 }),
147
- children: [
148
- /* @__PURE__ */ jsxRuntime.jsxs(Flex.Flex, { mah: "100%", gap: 8, children: [
149
- /* @__PURE__ */ jsxRuntime.jsx(
150
- Box.Box,
151
- {
152
- bg: "carbon.3",
153
- pos: "absolute",
154
- top: 0,
155
- left: 0,
156
- h: 32,
157
- w: 32,
158
- sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
159
- }
160
- ),
161
- /* @__PURE__ */ jsxRuntime.jsx(
162
- Box.Box,
163
- {
164
- bg: "carbon.3",
165
- pos: "absolute",
166
- top: 0,
167
- left: 40,
168
- h: 32,
169
- w: 32,
170
- sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
171
- }
172
- ),
173
- /* @__PURE__ */ jsxRuntime.jsx(
174
- Box.Box,
175
- {
176
- bg: "carbon.3",
177
- pos: "absolute",
178
- top: 0,
179
- left: 80,
180
- h: 32,
181
- w: 32,
182
- sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
135
+ ),
136
+ /* @__PURE__ */ jsxRuntime.jsx(Divider.Divider, { orientation: "vertical", mt: -12, mb: -16 }),
137
+ /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { justify: "flex-start", children: [
138
+ /* @__PURE__ */ jsxRuntime.jsx(
139
+ TimeInput.TimeInput,
140
+ {
141
+ withSeconds: true,
142
+ value: currentValue.format("HH:mm:ss"),
143
+ onChange: timeInputChange,
144
+ size: "sm",
145
+ w: 112,
146
+ styles: {
147
+ input: {
148
+ height: 30
183
149
  }
184
- )
185
- ] }),
186
- /* @__PURE__ */ jsxRuntime.jsx(
187
- TimeScollerPicker.TimeScollerPicker,
188
- {
189
- currentValue,
190
- currentValueChangedBy,
191
- onChange: timeScrollPickerChange,
192
- start: startDate,
193
- end: endDate,
194
- utcOffset
195
150
  }
196
- )
197
- ]
198
- }
199
- )
200
- ] })
201
- ] }),
202
- /* @__PURE__ */ jsxRuntime.jsx(Divider.Divider, { mx: -16 }),
203
- /* @__PURE__ */ jsxRuntime.jsx(Group.Group, { children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Typography, { size: "sm", children: [
204
- "Use",
205
- " ",
206
- /* @__PURE__ */ jsxRuntime.jsx(index$1.Typography, { fw: 600, component: "span", children: utcStr }),
207
- " ",
208
- "from your local time zone"
209
- ] }) })
210
- ] }) })
211
- ] });
151
+ }
152
+ ),
153
+ /* @__PURE__ */ jsxRuntime.jsxs(
154
+ Box.Box,
155
+ {
156
+ pos: "relative",
157
+ fz: 14,
158
+ fw: 400,
159
+ h: 224,
160
+ sx: (theme) => ({ color: theme.colors.carbon[8], overflow: "hidden", zIndex: 9999 }),
161
+ children: [
162
+ /* @__PURE__ */ jsxRuntime.jsxs(Flex.Flex, { mah: "100%", gap: 8, children: [
163
+ /* @__PURE__ */ jsxRuntime.jsx(
164
+ Box.Box,
165
+ {
166
+ bg: "carbon.3",
167
+ pos: "absolute",
168
+ top: 0,
169
+ left: 0,
170
+ h: 32,
171
+ w: 32,
172
+ sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
173
+ }
174
+ ),
175
+ /* @__PURE__ */ jsxRuntime.jsx(
176
+ Box.Box,
177
+ {
178
+ bg: "carbon.3",
179
+ pos: "absolute",
180
+ top: 0,
181
+ left: 40,
182
+ h: 32,
183
+ w: 32,
184
+ sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
185
+ }
186
+ ),
187
+ /* @__PURE__ */ jsxRuntime.jsx(
188
+ Box.Box,
189
+ {
190
+ bg: "carbon.3",
191
+ pos: "absolute",
192
+ top: 0,
193
+ left: 80,
194
+ h: 32,
195
+ w: 32,
196
+ sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
197
+ }
198
+ )
199
+ ] }),
200
+ /* @__PURE__ */ jsxRuntime.jsx(
201
+ TimeScollerPicker.TimeScollerPicker,
202
+ {
203
+ currentValue,
204
+ currentValueChangedBy,
205
+ onChange: timeScrollPickerChange,
206
+ start: startDate,
207
+ end: endDate,
208
+ utcOffset
209
+ }
210
+ )
211
+ ]
212
+ }
213
+ )
214
+ ] })
215
+ ] }),
216
+ /* @__PURE__ */ jsxRuntime.jsx(Divider.Divider, { mx: -16 }),
217
+ /* @__PURE__ */ jsxRuntime.jsx(Group.Group, { children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Typography, { size: "sm", children: [
218
+ "Use",
219
+ " ",
220
+ /* @__PURE__ */ jsxRuntime.jsx(index$1.Typography, { fw: 600, component: "span", children: utcStr }),
221
+ " ",
222
+ "from your local time zone"
223
+ ] }) })
224
+ ] }) })
225
+ ]
226
+ }
227
+ );
212
228
  };
213
229
  exports.DateTimePicker = DateTimePicker;
package/dist/biz/DateTimePicker/index.mjs CHANGED
@@ -89,124 +89,140 @@ const DateTimePicker = ({
89
89
  next = next.utcOffset(utcOffset).hour(h).minute(m).second(s);
90
90
  updateCurrentValue(next, "timeScroller");
91
91
  });
92
- return /* @__PURE__ */ jsxs(Popover, { position: "bottom-end", opened, withinPortal, shadow: "md", children: [
93
- /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(
94
- TextInput,
95
- {
96
- readOnly: true,
97
- disabled: disable,
98
- placeholder,
99
- value: inputStr,
100
- rightSection: loading ? /* @__PURE__ */ jsx(Loader, { size: "xs" }) : /* @__PURE__ */ jsx(Box, { component: IconClock, size: 18, c: "carbon.6" }),
101
- sx,
102
- size,
103
- onFocus: open,
104
- onBlur: close
105
- }
106
- ) }),
107
- /* @__PURE__ */ jsx(Popover.Dropdown, { children: /* @__PURE__ */ jsxs(Stack, { children: [
108
- /* @__PURE__ */ jsxs(Group, { align: "flex-start", children: [
109
- /* @__PURE__ */ jsx(
110
- DatePicker,
92
+ return /* @__PURE__ */ jsxs(
93
+ Popover,
94
+ {
95
+ position: "bottom-end",
96
+ opened,
97
+ withinPortal,
98
+ shadow: "md",
99
+ closeOnClickOutside: true,
100
+ onChange: (opened2) => {
101
+ if (opened2) {
102
+ open();
103
+ } else {
104
+ close();
105
+ }
106
+ },
107
+ children: [
108
+ /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(
109
+ TextInput,
111
110
  {
112
- minDate: startDate,
113
- maxDate: endDate,
114
- value: currentValue.toDate(),
115
- onChange: calendarChange,
116
- withCellSpacing: false,
117
- size: "md"
111
+ readOnly: true,
112
+ disabled: disable,
113
+ placeholder,
114
+ value: inputStr,
115
+ rightSection: loading ? /* @__PURE__ */ jsx(Loader, { size: "xs" }) : /* @__PURE__ */ jsx(Box, { component: IconClock, size: 18, c: "carbon.6" }),
116
+ sx,
117
+ size,
118
+ onClick: open
118
119
  }
119
- ),
120
- /* @__PURE__ */ jsx(Divider, { orientation: "vertical", mt: -12, mb: -16 }),
121
- /* @__PURE__ */ jsxs(Stack, { justify: "flex-start", children: [
122
- /* @__PURE__ */ jsx(
123
- TimeInput,
124
- {
125
- withSeconds: true,
126
- value: currentValue.format("HH:mm:ss"),
127
- onChange: timeInputChange,
128
- size: "sm",
129
- w: 112,
130
- styles: {
131
- input: {
132
- height: 30
133
- }
120
+ ) }),
121
+ /* @__PURE__ */ jsx(Popover.Dropdown, { children: /* @__PURE__ */ jsxs(Stack, { children: [
122
+ /* @__PURE__ */ jsxs(Group, { align: "flex-start", children: [
123
+ /* @__PURE__ */ jsx(
124
+ DatePicker,
125
+ {
126
+ minDate: startDate,
127
+ maxDate: endDate,
128
+ value: currentValue.toDate(),
129
+ onChange: calendarChange,
130
+ withCellSpacing: false,
131
+ size: "md"
134
132
  }
135
- }
136
- ),
137
- /* @__PURE__ */ jsxs(
138
- Box,
139
- {
140
- pos: "relative",
141
- fz: 14,
142
- fw: 400,
143
- h: 224,
144
- sx: (theme) => ({ color: theme.colors.carbon[8], overflow: "hidden", zIndex: 9999 }),
145
- children: [
146
- /* @__PURE__ */ jsxs(Flex, { mah: "100%", gap: 8, children: [
147
- /* @__PURE__ */ jsx(
148
- Box,
149
- {
150
- bg: "carbon.3",
151
- pos: "absolute",
152
- top: 0,
153
- left: 0,
154
- h: 32,
155
- w: 32,
156
- sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
157
- }
158
- ),
159
- /* @__PURE__ */ jsx(
160
- Box,
161
- {
162
- bg: "carbon.3",
163
- pos: "absolute",
164
- top: 0,
165
- left: 40,
166
- h: 32,
167
- w: 32,
168
- sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
169
- }
170
- ),
171
- /* @__PURE__ */ jsx(
172
- Box,
173
- {
174
- bg: "carbon.3",
175
- pos: "absolute",
176
- top: 0,
177
- left: 80,
178
- h: 32,
179
- w: 32,
180
- sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
133
+ ),
134
+ /* @__PURE__ */ jsx(Divider, { orientation: "vertical", mt: -12, mb: -16 }),
135
+ /* @__PURE__ */ jsxs(Stack, { justify: "flex-start", children: [
136
+ /* @__PURE__ */ jsx(
137
+ TimeInput,
138
+ {
139
+ withSeconds: true,
140
+ value: currentValue.format("HH:mm:ss"),
141
+ onChange: timeInputChange,
142
+ size: "sm",
143
+ w: 112,
144
+ styles: {
145
+ input: {
146
+ height: 30
181
147
  }
182
- )
183
- ] }),
184
- /* @__PURE__ */ jsx(
185
- TimeScollerPicker,
186
- {
187
- currentValue,
188
- currentValueChangedBy,
189
- onChange: timeScrollPickerChange,
190
- start: startDate,
191
- end: endDate,
192
- utcOffset
193
148
  }
194
- )
195
- ]
196
- }
197
- )
198
- ] })
199
- ] }),
200
- /* @__PURE__ */ jsx(Divider, { mx: -16 }),
201
- /* @__PURE__ */ jsx(Group, { children: /* @__PURE__ */ jsxs(Typography, { size: "sm", children: [
202
- "Use",
203
- " ",
204
- /* @__PURE__ */ jsx(Typography, { fw: 600, component: "span", children: utcStr }),
205
- " ",
206
- "from your local time zone"
207
- ] }) })
208
- ] }) })
209
- ] });
149
+ }
150
+ ),
151
+ /* @__PURE__ */ jsxs(
152
+ Box,
153
+ {
154
+ pos: "relative",
155
+ fz: 14,
156
+ fw: 400,
157
+ h: 224,
158
+ sx: (theme) => ({ color: theme.colors.carbon[8], overflow: "hidden", zIndex: 9999 }),
159
+ children: [
160
+ /* @__PURE__ */ jsxs(Flex, { mah: "100%", gap: 8, children: [
161
+ /* @__PURE__ */ jsx(
162
+ Box,
163
+ {
164
+ bg: "carbon.3",
165
+ pos: "absolute",
166
+ top: 0,
167
+ left: 0,
168
+ h: 32,
169
+ w: 32,
170
+ sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
171
+ }
172
+ ),
173
+ /* @__PURE__ */ jsx(
174
+ Box,
175
+ {
176
+ bg: "carbon.3",
177
+ pos: "absolute",
178
+ top: 0,
179
+ left: 40,
180
+ h: 32,
181
+ w: 32,
182
+ sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
183
+ }
184
+ ),
185
+ /* @__PURE__ */ jsx(
186
+ Box,
187
+ {
188
+ bg: "carbon.3",
189
+ pos: "absolute",
190
+ top: 0,
191
+ left: 80,
192
+ h: 32,
193
+ w: 32,
194
+ sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
195
+ }
196
+ )
197
+ ] }),
198
+ /* @__PURE__ */ jsx(
199
+ TimeScollerPicker,
200
+ {
201
+ currentValue,
202
+ currentValueChangedBy,
203
+ onChange: timeScrollPickerChange,
204
+ start: startDate,
205
+ end: endDate,
206
+ utcOffset
207
+ }
208
+ )
209
+ ]
210
+ }
211
+ )
212
+ ] })
213
+ ] }),
214
+ /* @__PURE__ */ jsx(Divider, { mx: -16 }),
215
+ /* @__PURE__ */ jsx(Group, { children: /* @__PURE__ */ jsxs(Typography, { size: "sm", children: [
216
+ "Use",
217
+ " ",
218
+ /* @__PURE__ */ jsx(Typography, { fw: 600, component: "span", children: utcStr }),
219
+ " ",
220
+ "from your local time zone"
221
+ ] }) })
222
+ ] }) })
223
+ ]
224
+ }
225
+ );
210
226
  };
211
227
  export {
212
228
  DateTimePicker
package/dist/theme/theme.cjs CHANGED
@@ -393,10 +393,10 @@ const theme = createTheme.createTheme({
393
393
  }
394
394
  },
395
395
  Menu: {
396
- styles: (theme2, props) => {
396
+ styles: (theme2) => {
397
397
  const textColor = themeColor(theme2, "carbon", 8);
398
- const bgHoverColor = themeColor(theme2, "carbon", 2);
399
- const bgActiveColor = themeColor(theme2, "carbon", 3);
398
+ const bgHoverColor = themeColor(theme2, "carbon", 3);
399
+ const bgActiveColor = themeColor(theme2, "carbon", 4);
400
400
  const disabledColor = themeColor(theme2, "carbon", 6);
401
401
  return {
402
402
  dropdown: {
package/dist/theme/theme.mjs CHANGED
@@ -391,10 +391,10 @@ const theme = createTheme({
391
391
  }
392
392
  },
393
393
  Menu: {
394
- styles: (theme2, props) => {
394
+ styles: (theme2) => {
395
395
  const textColor = themeColor(theme2, "carbon", 8);
396
- const bgHoverColor = themeColor(theme2, "carbon", 2);
397
- const bgActiveColor = themeColor(theme2, "carbon", 3);
396
+ const bgHoverColor = themeColor(theme2, "carbon", 3);
397
+ const bgActiveColor = themeColor(theme2, "carbon", 4);
398
398
  const disabledColor = themeColor(theme2, "carbon", 6);
399
399
  return {
400
400
  dropdown: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.1.3",
3
+ "version": "2.1.5",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",
@@ -79,7 +79,6 @@
79
79
  "pretty-ms": "^9.1.0",
80
80
  "prism-react-renderer": "^1.2.1",
81
81
  "rc-tree": "^5.8.2",
82
- "react-hook-form": "^7.51.5",
83
82
  "react-phone-input-2": "^2.15.1",
84
83
  "react-table": "^7.8.0",
85
84
  "react-table-sticky": "^1.1.3",
@@ -88,7 +87,8 @@
88
87
  },
89
88
  "peerDependencies": {
90
89
  "react": "^18.x || ^19.x",
91
- "react-dom": "^18.x || ^19.x"
90
+ "react-dom": "^18.x || ^19.x",
91
+ "react-hook-form": "^7.x"
92
92
  },
93
93
  "devDependencies": {
94
94
  "@svgr/babel-plugin-add-jsx-attribute": "^8.0.0",
@@ -103,6 +103,7 @@
103
103
  "@vitejs/plugin-react": "^4.3.3",
104
104
  "cpy-cli": "^5.0.0",
105
105
  "ora": "8.1.0",
106
+ "react-hook-form": "^7.51.5",
106
107
  "typescript": "^5.4.2",
107
108
  "vite": "^5.4.10",
108
109
  "vite-plugin-dts": "^4.3.0"