@tidbcloud/uikit 2.0.0-beta.46 → 2.0.0-beta.48

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 (8) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/biz/DateTimePicker/usePickerScroll.cjs +4 -3
  3. package/dist/biz/DateTimePicker/usePickerScroll.js +4 -3
  4. package/dist/biz/TimeRangePicker/AbsoluteTimeRangePicker.cjs +3 -15
  5. package/dist/biz/TimeRangePicker/AbsoluteTimeRangePicker.js +3 -15
  6. package/dist/theme/theme.cjs +54 -10
  7. package/dist/theme/theme.js +54 -10
  8. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.0.0-beta.48
4
+
5
+ ### Patch Changes
6
+
7
+ - update timerangepicker style
8
+
9
+ ## 2.0.0-beta.47
10
+
11
+ ### Patch Changes
12
+
13
+ - Fix scroll position adjust when controlled value change
14
+
3
15
  ## 2.0.0-beta.46
4
16
 
5
17
  ### Minor Changes
package/dist/biz/DateTimePicker/usePickerScroll.cjs CHANGED
@@ -182,14 +182,15 @@ const usePickerScrollColumn = ({ min, max, curr, open, render }) => {
182
182
  );
183
183
  }, [numbers, handleClickCell, onScroll, curr, render, classes]);
184
184
  const adjustScrollTop = ahooks.useMemoizedFn(() => {
185
+ var _a;
185
186
  const i = numbers.findIndex((i2) => i2 === val);
186
- if (i !== -1 && open && ref.current) {
187
+ if (i !== -1 && open) {
187
188
  const s = i * constant.CellHeight;
188
- ref.current.scrollTo({ top: s, behavior: "auto" });
189
+ (_a = ref.current) == null ? void 0 : _a.scrollTo({ top: s, behavior: "auto" });
189
190
  }
190
191
  });
191
192
  React.useEffect(() => {
192
- requestAnimationFrame(() => {
193
+ requestIdleCallback(() => {
193
194
  adjustScrollTop();
194
195
  });
195
196
  }, [open, val, adjustScrollTop]);
package/dist/biz/DateTimePicker/usePickerScroll.js CHANGED
@@ -180,14 +180,15 @@ const usePickerScrollColumn = ({ min, max, curr, open, render }) => {
180
180
  );
181
181
  }, [numbers, handleClickCell, onScroll, curr, render, classes]);
182
182
  const adjustScrollTop = useMemoizedFn(() => {
183
+ var _a;
183
184
  const i = numbers.findIndex((i2) => i2 === val);
184
- if (i !== -1 && open && ref.current) {
185
+ if (i !== -1 && open) {
185
186
  const s = i * CellHeight;
186
- ref.current.scrollTo({ top: s, behavior: "auto" });
187
+ (_a = ref.current) == null ? void 0 : _a.scrollTo({ top: s, behavior: "auto" });
187
188
  }
188
189
  });
189
190
  useEffect(() => {
190
- requestAnimationFrame(() => {
191
+ requestIdleCallback(() => {
191
192
  adjustScrollTop();
192
193
  });
193
194
  }, [open, val, adjustScrollTop]);
package/dist/biz/TimeRangePicker/AbsoluteTimeRangePicker.cjs CHANGED
@@ -12,7 +12,6 @@ const RangeCalendar = require("../../node_modules/.pnpm/@mantine_dates@5.10.4_@m
12
12
  const Alert = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Alert/Alert.cjs");
13
13
  const Text = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Text/Text.cjs");
14
14
  const Button = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Button/Button.cjs");
15
- const MantineProvider = require("../../node_modules/.pnpm/@mantine_styles@5.10.4_patch_hash_gj5o633amdkv7b52vinsxkrrr4_@emotion_react@11.13.0_react-dom@18.3.1_react@18.3.1/node_modules/@mantine/styles/esm/theme/MantineProvider.cjs");
16
15
  const Box = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Box/Box.cjs");
17
16
  const Group = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Group/Group.cjs");
18
17
  const AbsoluteTimeRangePicker = ({
@@ -24,8 +23,6 @@ const AbsoluteTimeRangePicker = ({
24
23
  onCancel,
25
24
  onReturnClick
26
25
  }) => {
27
- const theme = MantineProvider.useMantineTheme();
28
- const dayStyle = (_date, modifiers) => modifiers.weekend && !modifiers.disabled && !modifiers.selected && !modifiers.outside && !modifiers.selectedInRange ? { color: theme.colors.carbon[8] } : null;
29
26
  const [start, setStart] = React.useState(() => new Date(value[0] * 1e3));
30
27
  const [end, setEnd] = React.useState(() => new Date(value[1] * 1e3));
31
28
  const startAfterEnd = React.useMemo(() => {
@@ -93,7 +90,7 @@ const AbsoluteTimeRangePicker = ({
93
90
  {
94
91
  format: "24",
95
92
  w: 90,
96
- styles: { input: { paddingLeft: 4, paddingRight: 4 } },
93
+ styles: { input: { paddingLeft: 4, paddingRight: 4 }, controls: { height: 30 } },
97
94
  withSeconds: true,
98
95
  value: start,
99
96
  onChange: (d) => updateTime(d, setStart),
@@ -122,7 +119,7 @@ const AbsoluteTimeRangePicker = ({
122
119
  {
123
120
  format: "24",
124
121
  w: 90,
125
- styles: { input: { paddingLeft: 4, paddingRight: 4 } },
122
+ styles: { input: { paddingLeft: 4, paddingRight: 4 }, controls: { height: 30 } },
126
123
  withSeconds: true,
127
124
  value: end,
128
125
  onChange: (d) => updateTime(d, setEnd),
@@ -131,16 +128,7 @@ const AbsoluteTimeRangePicker = ({
131
128
  )
132
129
  ] })
133
130
  ] }),
134
- /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Flex.Flex, { justify: "center", pt: 8, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
135
- RangeCalendar.RangeCalendar,
136
- {
137
- value: [start, end],
138
- onChange: updateDate,
139
- maxDate: maxDateTime,
140
- minDate: minDateTime,
141
- dayStyle
142
- }
143
- ) }),
131
+ /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Flex.Flex, { justify: "center", pt: 8, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(RangeCalendar.RangeCalendar, { value: [start, end], onChange: updateDate, maxDate: maxDateTime, minDate: minDateTime }) }),
144
132
  (startAfterEnd || beyondMin || beyondMax || beyondDuration) && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Alert.Alert, { icon: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.IconAlertCircle, { size: 16 }), color: "red", pt: 8, children: [
145
133
  startAfterEnd && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { color: "red", children: "Please select an end time after the start time." }),
146
134
  beyondMin && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Text.Text, { color: "red", children: [
package/dist/biz/TimeRangePicker/AbsoluteTimeRangePicker.js CHANGED
@@ -11,7 +11,6 @@ import { RangeCalendar } from "../../node_modules/.pnpm/@mantine_dates@5.10.4_@m
11
11
  import { Alert } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Alert/Alert.js";
12
12
  import { Text } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Text/Text.js";
13
13
  import { Button } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Button/Button.js";
14
- import { useMantineTheme } from "../../node_modules/.pnpm/@mantine_styles@5.10.4_patch_hash_gj5o633amdkv7b52vinsxkrrr4_@emotion_react@11.13.0_react-dom@18.3.1_react@18.3.1/node_modules/@mantine/styles/esm/theme/MantineProvider.js";
15
14
  import { Box } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Box/Box.js";
16
15
  import { Group } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Group/Group.js";
17
16
  const AbsoluteTimeRangePicker = ({
@@ -23,8 +22,6 @@ const AbsoluteTimeRangePicker = ({
23
22
  onCancel,
24
23
  onReturnClick
25
24
  }) => {
26
- const theme = useMantineTheme();
27
- const dayStyle = (_date, modifiers) => modifiers.weekend && !modifiers.disabled && !modifiers.selected && !modifiers.outside && !modifiers.selectedInRange ? { color: theme.colors.carbon[8] } : null;
28
25
  const [start, setStart] = useState(() => new Date(value[0] * 1e3));
29
26
  const [end, setEnd] = useState(() => new Date(value[1] * 1e3));
30
27
  const startAfterEnd = useMemo(() => {
@@ -92,7 +89,7 @@ const AbsoluteTimeRangePicker = ({
92
89
  {
93
90
  format: "24",
94
91
  w: 90,
95
- styles: { input: { paddingLeft: 4, paddingRight: 4 } },
92
+ styles: { input: { paddingLeft: 4, paddingRight: 4 }, controls: { height: 30 } },
96
93
  withSeconds: true,
97
94
  value: start,
98
95
  onChange: (d) => updateTime(d, setStart),
@@ -121,7 +118,7 @@ const AbsoluteTimeRangePicker = ({
121
118
  {
122
119
  format: "24",
123
120
  w: 90,
124
- styles: { input: { paddingLeft: 4, paddingRight: 4 } },
121
+ styles: { input: { paddingLeft: 4, paddingRight: 4 }, controls: { height: 30 } },
125
122
  withSeconds: true,
126
123
  value: end,
127
124
  onChange: (d) => updateTime(d, setEnd),
@@ -130,16 +127,7 @@ const AbsoluteTimeRangePicker = ({
130
127
  )
131
128
  ] })
132
129
  ] }),
133
- /* @__PURE__ */ jsxRuntimeExports.jsx(Flex, { justify: "center", pt: 8, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
134
- RangeCalendar,
135
- {
136
- value: [start, end],
137
- onChange: updateDate,
138
- maxDate: maxDateTime,
139
- minDate: minDateTime,
140
- dayStyle
141
- }
142
- ) }),
130
+ /* @__PURE__ */ jsxRuntimeExports.jsx(Flex, { justify: "center", pt: 8, children: /* @__PURE__ */ jsxRuntimeExports.jsx(RangeCalendar, { value: [start, end], onChange: updateDate, maxDate: maxDateTime, minDate: minDateTime }) }),
143
131
  (startAfterEnd || beyondMin || beyondMax || beyondDuration) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Alert, { icon: /* @__PURE__ */ jsxRuntimeExports.jsx(IconAlertCircle, { size: 16 }), color: "red", pt: 8, children: [
144
132
  startAfterEnd && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { color: "red", children: "Please select an end time after the start time." }),
145
133
  beyondMin && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { color: "red", children: [
package/dist/theme/theme.cjs CHANGED
@@ -1010,18 +1010,62 @@ const theme = {
1010
1010
  }
1011
1011
  },
1012
1012
  RangeCalendar: {
1013
- styles: (theme2) => ({
1014
- day: {
1015
- "&[data-first-in-range]": {
1016
- borderTopLeftRadius: theme2.defaultRadius,
1017
- borderBottomLeftRadius: theme2.defaultRadius
1013
+ styles: (theme2) => {
1014
+ const color = theme2.primaryColor;
1015
+ return {
1016
+ calendarHeaderLevel: {
1017
+ color: theme2.fn.themeColor(color, 7)
1018
1018
  },
1019
- "&[data-last-in-range]": {
1020
- borderTopRightRadius: theme2.defaultRadius,
1021
- borderBottomRightRadius: theme2.defaultRadius
1019
+ calendarHeaderLevelIcon: {
1020
+ color: `${theme2.fn.themeColor(color, 7)} !important`
1021
+ },
1022
+ calendarHeaderControl: {
1023
+ color: `${theme2.fn.themeColor(color, 7)} !important`
1024
+ },
1025
+ yearPickerControlActive: {
1026
+ backgroundColor: theme2.fn.themeColor(color, 9)
1027
+ },
1028
+ monthPickerControlActive: {
1029
+ backgroundColor: theme2.fn.themeColor(color, 9)
1030
+ },
1031
+ weekday: {
1032
+ color: theme2.fn.themeColor(color, 7)
1033
+ },
1034
+ day: {
1035
+ color: theme2.fn.themeColor(color, 8),
1036
+ "&[data-in-range]": {
1037
+ backgroundColor: theme2.fn.themeColor(color, 3)
1038
+ },
1039
+ "&[data-first-in-range]": {
1040
+ borderTopLeftRadius: theme2.defaultRadius,
1041
+ borderBottomLeftRadius: theme2.defaultRadius
1042
+ },
1043
+ "&[data-last-in-range]": {
1044
+ borderTopRightRadius: theme2.defaultRadius,
1045
+ borderBottomRightRadius: theme2.defaultRadius
1046
+ },
1047
+ "&[data-selected]": {
1048
+ backgroundColor: theme2.fn.themeColor(color, 9),
1049
+ color: theme2.white
1050
+ },
1051
+ "&[data-weekend]": {
1052
+ color: theme2.fn.themeColor(color, 8),
1053
+ "&[data-selected]": {
1054
+ color: theme2.white
1055
+ },
1056
+ "&[data-disabled], &:disabled": {
1057
+ color: `${theme2.fn.themeColor(color, 5)} !important`
1058
+ }
1059
+ },
1060
+ "&[data-disabled], &:disabled": {
1061
+ color: `${theme2.fn.themeColor(color, 5)} !important`
1062
+ },
1063
+ "&[data-outside]": {
1064
+ color: theme2.fn.themeColor(color, 6)
1065
+ }
1022
1066
  }
1023
- }
1024
- })
1067
+ };
1068
+ }
1025
1069
  },
1026
1070
  Anchor: {
1027
1071
  styles: (theme2, params) => {
package/dist/theme/theme.js CHANGED
@@ -1008,18 +1008,62 @@ const theme = {
1008
1008
  }
1009
1009
  },
1010
1010
  RangeCalendar: {
1011
- styles: (theme2) => ({
1012
- day: {
1013
- "&[data-first-in-range]": {
1014
- borderTopLeftRadius: theme2.defaultRadius,
1015
- borderBottomLeftRadius: theme2.defaultRadius
1011
+ styles: (theme2) => {
1012
+ const color = theme2.primaryColor;
1013
+ return {
1014
+ calendarHeaderLevel: {
1015
+ color: theme2.fn.themeColor(color, 7)
1016
1016
  },
1017
- "&[data-last-in-range]": {
1018
- borderTopRightRadius: theme2.defaultRadius,
1019
- borderBottomRightRadius: theme2.defaultRadius
1017
+ calendarHeaderLevelIcon: {
1018
+ color: `${theme2.fn.themeColor(color, 7)} !important`
1019
+ },
1020
+ calendarHeaderControl: {
1021
+ color: `${theme2.fn.themeColor(color, 7)} !important`
1022
+ },
1023
+ yearPickerControlActive: {
1024
+ backgroundColor: theme2.fn.themeColor(color, 9)
1025
+ },
1026
+ monthPickerControlActive: {
1027
+ backgroundColor: theme2.fn.themeColor(color, 9)
1028
+ },
1029
+ weekday: {
1030
+ color: theme2.fn.themeColor(color, 7)
1031
+ },
1032
+ day: {
1033
+ color: theme2.fn.themeColor(color, 8),
1034
+ "&[data-in-range]": {
1035
+ backgroundColor: theme2.fn.themeColor(color, 3)
1036
+ },
1037
+ "&[data-first-in-range]": {
1038
+ borderTopLeftRadius: theme2.defaultRadius,
1039
+ borderBottomLeftRadius: theme2.defaultRadius
1040
+ },
1041
+ "&[data-last-in-range]": {
1042
+ borderTopRightRadius: theme2.defaultRadius,
1043
+ borderBottomRightRadius: theme2.defaultRadius
1044
+ },
1045
+ "&[data-selected]": {
1046
+ backgroundColor: theme2.fn.themeColor(color, 9),
1047
+ color: theme2.white
1048
+ },
1049
+ "&[data-weekend]": {
1050
+ color: theme2.fn.themeColor(color, 8),
1051
+ "&[data-selected]": {
1052
+ color: theme2.white
1053
+ },
1054
+ "&[data-disabled], &:disabled": {
1055
+ color: `${theme2.fn.themeColor(color, 5)} !important`
1056
+ }
1057
+ },
1058
+ "&[data-disabled], &:disabled": {
1059
+ color: `${theme2.fn.themeColor(color, 5)} !important`
1060
+ },
1061
+ "&[data-outside]": {
1062
+ color: theme2.fn.themeColor(color, 6)
1063
+ }
1020
1064
  }
1021
- }
1022
- })
1065
+ };
1066
+ }
1023
1067
  },
1024
1068
  Anchor: {
1025
1069
  styles: (theme2, params) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.0.0-beta.46",
3
+ "version": "2.0.0-beta.48",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",