@tidbcloud/uikit 2.8.0 → 2.8.2

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 +14 -19
  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 +14 -19
  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.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Feat/datetimepicker start date calendar ([#650](https://github.com/tidbcloud/tidbcloud-uikit/pull/650))
8
+
9
+ ## 2.8.1
10
+
11
+ ### Patch Changes
12
+
13
+ - fix(uikit): improve DateTimePicker dark mode contrast ([#648](https://github.com/tidbcloud/tidbcloud-uikit/pull/648))
14
+
3
15
  ## 2.8.0
4
16
 
5
17
  ### Minor 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,15 +149,21 @@ 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
155
  color: `${theme.colors.carbon[4]} !important`,
167
- opacity: 1
156
+ opacity: 1,
157
+ '[data-mantine-color-scheme="dark"] &': {
158
+ color: `${theme.colors.carbon[5]} !important`
159
+ }
168
160
  },
169
161
  "&[data-outside]": {
170
162
  color: theme.colors.carbon[6],
171
- opacity: 1
163
+ opacity: 1,
164
+ '[data-mantine-color-scheme="dark"] &': {
165
+ color: theme.colors.carbon[7]
166
+ }
172
167
  },
173
168
  "&[data-today]:not([data-selected])": {
174
169
  border: 0
@@ -178,7 +173,7 @@ const DateTimePicker = ({
178
173
  color: theme.white
179
174
  }
180
175
  }
181
- }) : void 0
176
+ })
182
177
  }
183
178
  ),
184
179
  /* @__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,15 +147,21 @@ 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
153
  color: `${theme.colors.carbon[4]} !important`,
165
- opacity: 1
154
+ opacity: 1,
155
+ '[data-mantine-color-scheme="dark"] &': {
156
+ color: `${theme.colors.carbon[5]} !important`
157
+ }
166
158
  },
167
159
  "&[data-outside]": {
168
160
  color: theme.colors.carbon[6],
169
- opacity: 1
161
+ opacity: 1,
162
+ '[data-mantine-color-scheme="dark"] &': {
163
+ color: theme.colors.carbon[7]
164
+ }
170
165
  },
171
166
  "&[data-today]:not([data-selected])": {
172
167
  border: 0
@@ -176,7 +171,7 @@ const DateTimePicker = ({
176
171
  color: theme.white
177
172
  }
178
173
  }
179
- }) : void 0
174
+ })
180
175
  }
181
176
  ),
182
177
  /* @__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.0",
3
+ "version": "2.8.2",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",