@tidbcloud/uikit 2.8.1 → 2.8.3

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 (12) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/biz/DateTimePicker/helpers.cjs +2 -2
  3. package/dist/biz/DateTimePicker/helpers.d.cts +2 -2
  4. package/dist/biz/DateTimePicker/helpers.d.mts +2 -2
  5. package/dist/biz/DateTimePicker/helpers.mjs +2 -2
  6. package/dist/biz/DateTimePicker/index.cjs +8 -27
  7. package/dist/biz/DateTimePicker/index.d.cts +1 -1
  8. package/dist/biz/DateTimePicker/index.d.mts +1 -1
  9. package/dist/biz/DateTimePicker/index.mjs +8 -27
  10. package/dist/biz/DateTimePicker/types.d.cts +5 -4
  11. package/dist/biz/DateTimePicker/types.d.mts +5 -4
  12. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.8.3
4
+
5
+ ### Patch Changes
6
+
7
+ - fix(uikit): unify DateTimePicker disabled/out-of-month colors ([#652](https://github.com/tidbcloud/tidbcloud-uikit/pull/652))
8
+
9
+ ## 2.8.2
10
+
11
+ ### Patch Changes
12
+
13
+ - Feat/datetimepicker start date calendar ([#650](https://github.com/tidbcloud/tidbcloud-uikit/pull/650))
14
+
3
15
  ## 2.8.1
4
16
 
5
17
  ### Patch Changes
package/dist/biz/DateTimePicker/helpers.cjs CHANGED
@@ -7,7 +7,7 @@ const useDateTimePicker = ({
7
7
  value,
8
8
  onChange,
9
9
  today = /* @__PURE__ */ new Date(),
10
- futureOnly = false,
10
+ highlightToday = false,
11
11
  startDate = dayjs.dayjs().subtract(10, "year").toDate(),
12
12
  endDate = dayjs.dayjs().add(10, "year").toDate(),
13
13
  utcOffset = dayjs.dayjs().utcOffset(),
@@ -44,7 +44,7 @@ const useDateTimePicker = ({
44
44
  value: displayValue,
45
45
  onChange: handleChange,
46
46
  today: displayToday,
47
- futureOnly,
47
+ highlightToday,
48
48
  startDate: displayStartDate,
49
49
  endDate: displayEndDate,
50
50
  formatter: (val) => {
package/dist/biz/DateTimePicker/helpers.d.cts CHANGED
@@ -29,7 +29,7 @@ declare module '@mantine/core' {
29
29
  }
30
30
  }
31
31
  import { DateTimePickerProps } from './types.cjs';
32
- export interface UseDateTimePickerProps extends Pick<DateTimePickerProps, 'value' | 'onChange' | 'today' | 'futureOnly' | 'startDate' | 'endDate' | 'format' | 'formatter'> {
32
+ export interface UseDateTimePickerProps extends Pick<DateTimePickerProps, 'value' | 'onChange' | 'today' | 'highlightToday' | 'startDate' | 'endDate' | 'format' | 'formatter'> {
33
33
  /**
34
34
  * the UTC offset in minutes.
35
35
  * User selected time will be treated as time in that timezone
@@ -63,4 +63,4 @@ export interface UseDateTimePickerProps extends Pick<DateTimePickerProps, 'value
63
63
  * }
64
64
  * ```
65
65
  */
66
- export declare const useDateTimePicker: ({ value, onChange, today, futureOnly, startDate, endDate, utcOffset, format, formatter }: UseDateTimePickerProps) => Pick<DateTimePickerProps, "value" | "onChange" | "today" | "futureOnly" | "startDate" | "endDate" | "formatter">;
66
+ export declare const useDateTimePicker: ({ value, onChange, today, highlightToday, startDate, endDate, utcOffset, format, formatter }: UseDateTimePickerProps) => Pick<DateTimePickerProps, "value" | "onChange" | "today" | "highlightToday" | "startDate" | "endDate" | "formatter">;
package/dist/biz/DateTimePicker/helpers.d.mts CHANGED
@@ -29,7 +29,7 @@ declare module '@mantine/core' {
29
29
  }
30
30
  }
31
31
  import { DateTimePickerProps } from './types.mjs';
32
- export interface UseDateTimePickerProps extends Pick<DateTimePickerProps, 'value' | 'onChange' | 'today' | 'futureOnly' | 'startDate' | 'endDate' | 'format' | 'formatter'> {
32
+ export interface UseDateTimePickerProps extends Pick<DateTimePickerProps, 'value' | 'onChange' | 'today' | 'highlightToday' | 'startDate' | 'endDate' | 'format' | 'formatter'> {
33
33
  /**
34
34
  * the UTC offset in minutes.
35
35
  * User selected time will be treated as time in that timezone
@@ -63,4 +63,4 @@ export interface UseDateTimePickerProps extends Pick<DateTimePickerProps, 'value
63
63
  * }
64
64
  * ```
65
65
  */
66
- export declare const useDateTimePicker: ({ value, onChange, today, futureOnly, startDate, endDate, utcOffset, format, formatter }: UseDateTimePickerProps) => Pick<DateTimePickerProps, "value" | "onChange" | "today" | "futureOnly" | "startDate" | "endDate" | "formatter">;
66
+ export declare const useDateTimePicker: ({ value, onChange, today, highlightToday, startDate, endDate, utcOffset, format, formatter }: UseDateTimePickerProps) => Pick<DateTimePickerProps, "value" | "onChange" | "today" | "highlightToday" | "startDate" | "endDate" | "formatter">;
package/dist/biz/DateTimePicker/helpers.mjs CHANGED
@@ -5,7 +5,7 @@ const useDateTimePicker = ({
5
5
  value,
6
6
  onChange,
7
7
  today = /* @__PURE__ */ new Date(),
8
- futureOnly = false,
8
+ highlightToday = false,
9
9
  startDate = dayjs().subtract(10, "year").toDate(),
10
10
  endDate = dayjs().add(10, "year").toDate(),
11
11
  utcOffset = dayjs().utcOffset(),
@@ -42,7 +42,7 @@ const useDateTimePicker = ({
42
42
  value: displayValue,
43
43
  onChange: handleChange,
44
44
  today: displayToday,
45
- futureOnly,
45
+ highlightToday,
46
46
  startDate: displayStartDate,
47
47
  endDate: displayEndDate,
48
48
  formatter: (val) => {
package/dist/biz/DateTimePicker/index.cjs CHANGED
@@ -24,7 +24,6 @@ const DatePicker = require("../../node_modules/.pnpm/@mantine_dates@7.17.8_@mant
24
24
  const Divider = require("../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Divider/Divider.cjs");
25
25
  const TimeInput = require("../../node_modules/.pnpm/@mantine_dates@7.17.8_@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hoo_itsuscsie4edrhi6ero4lpb3hq/node_modules/@mantine/dates/esm/components/TimeInput/TimeInput.cjs");
26
26
  const Flex = require("../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Flex/Flex.cjs");
27
- const getInitialCalendarDate = (currentDay) => currentDay.date() === currentDay.daysInMonth() ? currentDay.add(1, "month") : currentDay;
28
27
  const DateTimePicker = ({
29
28
  placeholder = "Select time",
30
29
  format = helpers$1.DEFAULT_TIME_FORMAT,
@@ -32,7 +31,7 @@ const DateTimePicker = ({
32
31
  defaultValue,
33
32
  value,
34
33
  today = /* @__PURE__ */ new Date(),
35
- futureOnly = false,
34
+ highlightToday = false,
36
35
  startDate = dayjs.dayjs().subtract(10, "year").toDate(),
37
36
  endDate = dayjs.dayjs().add(10, "year").toDate(),
38
37
  onChange,
@@ -45,9 +44,7 @@ const DateTimePicker = ({
45
44
  }) => {
46
45
  const [opened, { close, open }] = useDisclosure.useDisclosure(false);
47
46
  const currentDay = dayjs.dayjs(today).startOf("day");
48
- const minimumDate = futureOnly ? dayjs.dayjs.max(dayjs.dayjs(startDate), dayjs.dayjs(today)) : dayjs.dayjs(startDate);
49
- const initialCalendarDate = getInitialCalendarDate(currentDay);
50
- const [calendarDate, setCalendarDate] = React.useState(initialCalendarDate.toDate());
47
+ const minimumDate = dayjs.dayjs(startDate);
51
48
  const [currentValue, setCurrentValue] = useUncontrolled.useUncontrolled({
52
49
  value: value ? dayjs.dayjs(value) : void 0,
53
50
  defaultValue: defaultValue ? dayjs.dayjs(defaultValue) : dayjs.dayjs(),
@@ -85,9 +82,6 @@ const DateTimePicker = ({
85
82
  const calendarChange = ahooks.useMemoizedFn((v) => {
86
83
  let next = currentValue;
87
84
  next = next.year(v.getFullYear()).month(v.getMonth()).date(v.getDate());
88
- if (futureOnly) {
89
- setCalendarDate(v);
90
- }
91
85
  updateCurrentValue(next, "calendar");
92
86
  });
93
87
  const timeInputChange = ahooks.useMemoizedFn((e) => {
@@ -113,9 +107,6 @@ const DateTimePicker = ({
113
107
  closeOnClickOutside: true,
114
108
  onChange: (opened2) => {
115
109
  if (opened2) {
116
- if (futureOnly) {
117
- setCalendarDate(getInitialCalendarDate(currentDay).toDate());
118
- }
119
110
  open();
120
111
  } else {
121
112
  close();
@@ -140,11 +131,9 @@ const DateTimePicker = ({
140
131
  /* @__PURE__ */ jsxRuntime.jsx(
141
132
  DatePicker.DatePicker,
142
133
  {
143
- date: futureOnly ? calendarDate : void 0,
144
- onDateChange: futureOnly ? setCalendarDate : void 0,
145
- minDate: futureOnly ? minimumDate.startOf("day").toDate() : startDate,
134
+ minDate: startDate,
146
135
  maxDate: endDate,
147
- getDayProps: futureOnly ? (date) => {
136
+ getDayProps: highlightToday ? (date) => {
148
137
  const day = dayjs.dayjs(date);
149
138
  const isCurrentDay = day.isSame(currentDay, "day");
150
139
  const isSelected = day.isSame(currentValue, "day");
@@ -160,21 +149,13 @@ const DateTimePicker = ({
160
149
  onChange: calendarChange,
161
150
  withCellSpacing: false,
162
151
  size: "sm",
163
- styles: futureOnly ? (theme) => ({
152
+ styles: (theme) => ({
164
153
  day: {
165
154
  "&[data-disabled]": {
166
- color: `${theme.colors.carbon[4]} !important`,
167
- opacity: 1,
168
- '[data-mantine-color-scheme="dark"] &': {
169
- color: `${theme.colors.carbon[5]} !important`
170
- }
155
+ color: `${theme.colors.carbon[5]} !important`
171
156
  },
172
157
  "&[data-outside]": {
173
- color: theme.colors.carbon[6],
174
- opacity: 1,
175
- '[data-mantine-color-scheme="dark"] &': {
176
- color: theme.colors.carbon[7]
177
- }
158
+ color: `${theme.colors.carbon[7]} !important`
178
159
  },
179
160
  "&[data-today]:not([data-selected])": {
180
161
  border: 0
@@ -184,7 +165,7 @@ const DateTimePicker = ({
184
165
  color: theme.white
185
166
  }
186
167
  }
187
- }) : void 0
168
+ })
188
169
  }
189
170
  ),
190
171
  /* @__PURE__ */ jsxRuntime.jsx(Divider.Divider, { orientation: "vertical", mt: -12, mb: -16 }),
package/dist/biz/DateTimePicker/index.d.cts CHANGED
@@ -32,7 +32,7 @@ import { MantineSize, PopoverProps, TimeInputProps } from '../../primitive/index
32
32
  import { DateTimePickerProps } from './types.cjs';
33
33
  export type { DateTimePickerProps } from './types.cjs';
34
34
  export { useDateTimePicker } from './helpers.cjs';
35
- export declare const DateTimePicker: ({ placeholder, format, formatter, defaultValue, value, today, futureOnly, startDate, endDate, onChange, disable, withinPortal, sx, loading, size, footer }: DateTimePickerProps) => import("react/jsx-runtime.js").JSX.Element;
35
+ export declare const DateTimePicker: ({ placeholder, format, formatter, defaultValue, value, today, highlightToday, startDate, endDate, onChange, disable, withinPortal, sx, loading, size, footer }: DateTimePickerProps) => import("react/jsx-runtime.js").JSX.Element;
36
36
  export interface TimePickerProps extends Omit<TimeInputProps, 'value' | 'onChange' | 'defaultValue'>, Pick<PopoverProps, 'withinPortal' | 'withArrow' | 'position' | 'shadow'> {
37
37
  defaultValue?: string;
38
38
  /**
package/dist/biz/DateTimePicker/index.d.mts CHANGED
@@ -32,7 +32,7 @@ import { MantineSize, PopoverProps, TimeInputProps } from '../../primitive/index
32
32
  import { DateTimePickerProps } from './types.mjs';
33
33
  export type { DateTimePickerProps } from './types.mjs';
34
34
  export { useDateTimePicker } from './helpers.mjs';
35
- export declare const DateTimePicker: ({ placeholder, format, formatter, defaultValue, value, today, futureOnly, startDate, endDate, onChange, disable, withinPortal, sx, loading, size, footer }: DateTimePickerProps) => import("react/jsx-runtime.js").JSX.Element;
35
+ export declare const DateTimePicker: ({ placeholder, format, formatter, defaultValue, value, today, highlightToday, startDate, endDate, onChange, disable, withinPortal, sx, loading, size, footer }: DateTimePickerProps) => import("react/jsx-runtime.js").JSX.Element;
36
36
  export interface TimePickerProps extends Omit<TimeInputProps, 'value' | 'onChange' | 'defaultValue'>, Pick<PopoverProps, 'withinPortal' | 'withArrow' | 'position' | 'shadow'> {
37
37
  defaultValue?: string;
38
38
  /**
package/dist/biz/DateTimePicker/index.mjs CHANGED
@@ -22,7 +22,6 @@ import { DatePicker } from "../../node_modules/.pnpm/@mantine_dates@7.17.8_@mant
22
22
  import { Divider } from "../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Divider/Divider.mjs";
23
23
  import { TimeInput } from "../../node_modules/.pnpm/@mantine_dates@7.17.8_@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hoo_itsuscsie4edrhi6ero4lpb3hq/node_modules/@mantine/dates/esm/components/TimeInput/TimeInput.mjs";
24
24
  import { Flex } from "../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Flex/Flex.mjs";
25
- const getInitialCalendarDate = (currentDay) => currentDay.date() === currentDay.daysInMonth() ? currentDay.add(1, "month") : currentDay;
26
25
  const DateTimePicker = ({
27
26
  placeholder = "Select time",
28
27
  format = DEFAULT_TIME_FORMAT,
@@ -30,7 +29,7 @@ const DateTimePicker = ({
30
29
  defaultValue,
31
30
  value,
32
31
  today = /* @__PURE__ */ new Date(),
33
- futureOnly = false,
32
+ highlightToday = false,
34
33
  startDate = dayjs().subtract(10, "year").toDate(),
35
34
  endDate = dayjs().add(10, "year").toDate(),
36
35
  onChange,
@@ -43,9 +42,7 @@ const DateTimePicker = ({
43
42
  }) => {
44
43
  const [opened, { close, open }] = useDisclosure(false);
45
44
  const currentDay = dayjs(today).startOf("day");
46
- const minimumDate = futureOnly ? dayjs.max(dayjs(startDate), dayjs(today)) : dayjs(startDate);
47
- const initialCalendarDate = getInitialCalendarDate(currentDay);
48
- const [calendarDate, setCalendarDate] = useState(initialCalendarDate.toDate());
45
+ const minimumDate = dayjs(startDate);
49
46
  const [currentValue, setCurrentValue] = useUncontrolled({
50
47
  value: value ? dayjs(value) : void 0,
51
48
  defaultValue: defaultValue ? dayjs(defaultValue) : dayjs(),
@@ -83,9 +80,6 @@ const DateTimePicker = ({
83
80
  const calendarChange = useMemoizedFn((v) => {
84
81
  let next = currentValue;
85
82
  next = next.year(v.getFullYear()).month(v.getMonth()).date(v.getDate());
86
- if (futureOnly) {
87
- setCalendarDate(v);
88
- }
89
83
  updateCurrentValue(next, "calendar");
90
84
  });
91
85
  const timeInputChange = useMemoizedFn((e) => {
@@ -111,9 +105,6 @@ const DateTimePicker = ({
111
105
  closeOnClickOutside: true,
112
106
  onChange: (opened2) => {
113
107
  if (opened2) {
114
- if (futureOnly) {
115
- setCalendarDate(getInitialCalendarDate(currentDay).toDate());
116
- }
117
108
  open();
118
109
  } else {
119
110
  close();
@@ -138,11 +129,9 @@ const DateTimePicker = ({
138
129
  /* @__PURE__ */ jsx(
139
130
  DatePicker,
140
131
  {
141
- date: futureOnly ? calendarDate : void 0,
142
- onDateChange: futureOnly ? setCalendarDate : void 0,
143
- minDate: futureOnly ? minimumDate.startOf("day").toDate() : startDate,
132
+ minDate: startDate,
144
133
  maxDate: endDate,
145
- getDayProps: futureOnly ? (date) => {
134
+ getDayProps: highlightToday ? (date) => {
146
135
  const day = dayjs(date);
147
136
  const isCurrentDay = day.isSame(currentDay, "day");
148
137
  const isSelected = day.isSame(currentValue, "day");
@@ -158,21 +147,13 @@ const DateTimePicker = ({
158
147
  onChange: calendarChange,
159
148
  withCellSpacing: false,
160
149
  size: "sm",
161
- styles: futureOnly ? (theme) => ({
150
+ styles: (theme) => ({
162
151
  day: {
163
152
  "&[data-disabled]": {
164
- color: `${theme.colors.carbon[4]} !important`,
165
- opacity: 1,
166
- '[data-mantine-color-scheme="dark"] &': {
167
- color: `${theme.colors.carbon[5]} !important`
168
- }
153
+ color: `${theme.colors.carbon[5]} !important`
169
154
  },
170
155
  "&[data-outside]": {
171
- color: theme.colors.carbon[6],
172
- opacity: 1,
173
- '[data-mantine-color-scheme="dark"] &': {
174
- color: theme.colors.carbon[7]
175
- }
156
+ color: `${theme.colors.carbon[7]} !important`
176
157
  },
177
158
  "&[data-today]:not([data-selected])": {
178
159
  border: 0
@@ -182,7 +163,7 @@ const DateTimePicker = ({
182
163
  color: theme.white
183
164
  }
184
165
  }
185
- }) : void 0
166
+ })
186
167
  }
187
168
  ),
188
169
  /* @__PURE__ */ jsx(Divider, { orientation: "vertical", mt: -12, mb: -16 }),
package/dist/biz/DateTimePicker/types.d.cts CHANGED
@@ -53,17 +53,18 @@ export interface DateTimePickerProps extends Omit<TextInputProps, 'value' | 'onC
53
53
  defaultValue?: Date;
54
54
  value?: Date;
55
55
  /**
56
- * The current date and time used by `futureOnly` mode.
56
+ * The current date used to highlight "today" in the calendar.
57
57
  * Pass the organization time when the picker is displayed in an organization timezone.
58
+ * It only drives the current-day highlight; it does NOT change the selectable range.
58
59
  * @default new Date()
59
60
  */
60
61
  today?: Date;
61
62
  /**
62
- * Enables future-date selection behavior without changing existing DateTimePicker usages.
63
- * Past values are disabled and the calendar opens from today (or next month on month-end).
63
+ * When true, "today" is highlighted with a dark border in the calendar (unless it is
64
+ * the currently selected date). Off by default so existing usages are unaffected.
64
65
  * @default false
65
66
  */
66
- futureOnly?: boolean;
67
+ highlightToday?: boolean;
67
68
  startDate?: Date;
68
69
  endDate?: Date;
69
70
  onChange?: (val: Date) => void;
package/dist/biz/DateTimePicker/types.d.mts CHANGED
@@ -53,17 +53,18 @@ export interface DateTimePickerProps extends Omit<TextInputProps, 'value' | 'onC
53
53
  defaultValue?: Date;
54
54
  value?: Date;
55
55
  /**
56
- * The current date and time used by `futureOnly` mode.
56
+ * The current date used to highlight "today" in the calendar.
57
57
  * Pass the organization time when the picker is displayed in an organization timezone.
58
+ * It only drives the current-day highlight; it does NOT change the selectable range.
58
59
  * @default new Date()
59
60
  */
60
61
  today?: Date;
61
62
  /**
62
- * Enables future-date selection behavior without changing existing DateTimePicker usages.
63
- * Past values are disabled and the calendar opens from today (or next month on month-end).
63
+ * When true, "today" is highlighted with a dark border in the calendar (unless it is
64
+ * the currently selected date). Off by default so existing usages are unaffected.
64
65
  * @default false
65
66
  */
66
- futureOnly?: boolean;
67
+ highlightToday?: boolean;
67
68
  startDate?: Date;
68
69
  endDate?: Date;
69
70
  onChange?: (val: Date) => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.8.1",
3
+ "version": "2.8.3",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",