@tidbcloud/uikit 2.2.8 → 2.2.9

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 (16) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/biz/TimeRangePicker/AbsoluteTimeRangePicker.cjs +17 -22
  3. package/dist/biz/TimeRangePicker/AbsoluteTimeRangePicker.d.cts +19 -1
  4. package/dist/biz/TimeRangePicker/AbsoluteTimeRangePicker.d.mts +19 -1
  5. package/dist/biz/TimeRangePicker/AbsoluteTimeRangePicker.mjs +18 -23
  6. package/dist/biz/TimeRangePicker/helpers.cjs +6 -4
  7. package/dist/biz/TimeRangePicker/helpers.d.cts +1 -0
  8. package/dist/biz/TimeRangePicker/helpers.d.mts +1 -0
  9. package/dist/biz/TimeRangePicker/helpers.mjs +6 -4
  10. package/dist/biz/TimeRangePicker/index.cjs +48 -20
  11. package/dist/biz/TimeRangePicker/index.d.cts +16 -4
  12. package/dist/biz/TimeRangePicker/index.d.mts +16 -4
  13. package/dist/biz/TimeRangePicker/index.mjs +48 -20
  14. package/dist/primitive/Prism/Prism.cjs +3 -3
  15. package/dist/primitive/Prism/Prism.mjs +3 -3
  16. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.2.9
4
+
5
+ ### Patch Changes
6
+
7
+ - tweak(TimeRangePicker): support custom time range & i18n ([#489](https://github.com/tidbcloud/tidbcloud-uikit/pull/489))
8
+ - fix(Prism): colorScheme ([#512](https://github.com/tidbcloud/tidbcloud-uikit/pull/512))
9
+
3
10
  ## 2.2.8
4
11
 
5
12
  ### Patch Changes
package/dist/biz/TimeRangePicker/AbsoluteTimeRangePicker.cjs CHANGED
@@ -27,12 +27,16 @@ const AbsoluteTimeRangePicker = ({
27
27
  maxDuration,
28
28
  onChange,
29
29
  onCancel,
30
- onReturnClick
30
+ onReturnClick,
31
+ dateInputFormat,
32
+ datePickerProps,
33
+ localization
31
34
  }) => {
35
+ var _a, _b, _c, _d, _e, _f, _g;
32
36
  const [start, setStart] = React.useState(() => value ? new Date(value[0] * 1e3) : null);
33
37
  const [end, setEnd] = React.useState(() => value ? new Date(value[1] * 1e3) : null);
34
- const startDate = start ? dayjs.dayjs(start).format("MMM D, YYYY") : "-";
35
- const endDate = end ? dayjs.dayjs(end).format("MMM D, YYYY") : "-";
38
+ const startDate = start ? (dateInputFormat == null ? void 0 : dateInputFormat(start)) || dayjs.dayjs(start).format("MMM D, YYYY") : "-";
39
+ const endDate = end ? (dateInputFormat == null ? void 0 : dateInputFormat(end)) || dayjs.dayjs(end).format("MMM D, YYYY") : "-";
36
40
  const startTime = start ? dayjs.dayjs(start).format("HH:mm:ss") : "-";
37
41
  const endTime = end ? dayjs.dayjs(end).format("HH:mm:ss") : "-";
38
42
  const isRangeComplete = !!start && !!end;
@@ -75,10 +79,10 @@ const AbsoluteTimeRangePicker = ({
75
79
  return /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { p: "md", w: 280, m: -4, children: [
76
80
  /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { pb: "xs", mt: -4, onClick: onReturnClick, sx: { cursor: "pointer" }, children: [
77
81
  /* @__PURE__ */ jsxRuntime.jsx(index.IconChevronLeft, { size: 16 }),
78
- /* @__PURE__ */ jsxRuntime.jsx(index$1.Typography, { variant: "body-lg", children: "Back" })
82
+ /* @__PURE__ */ jsxRuntime.jsx(index$1.Typography, { variant: "body-lg", children: (localization == null ? void 0 : localization.back) || "Back" })
79
83
  ] }),
80
84
  /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { gap: 0, pt: 8, justify: "space-between", children: [
81
- /* @__PURE__ */ jsxRuntime.jsx(index$1.Typography, { variant: "label-sm", children: "Start" }),
85
+ /* @__PURE__ */ jsxRuntime.jsx(index$1.Typography, { variant: "label-sm", children: (localization == null ? void 0 : localization.start) || "Start" }),
82
86
  /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { gap: 8, children: [
83
87
  /* @__PURE__ */ jsxRuntime.jsx(Input.Input, { w: 116, value: startDate, error: beyondMin || startAfterEnd || beyondDuration }),
84
88
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -94,7 +98,7 @@ const AbsoluteTimeRangePicker = ({
94
98
  ] })
95
99
  ] }),
96
100
  /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { gap: 0, pt: 8, justify: "space-between", children: [
97
- /* @__PURE__ */ jsxRuntime.jsx(index$1.Typography, { variant: "label-sm", children: "End" }),
101
+ /* @__PURE__ */ jsxRuntime.jsx(index$1.Typography, { variant: "label-sm", children: (localization == null ? void 0 : localization.end) || "End" }),
98
102
  /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { gap: 8, children: [
99
103
  /* @__PURE__ */ jsxRuntime.jsx(Input.Input, { w: 116, value: endDate, error: beyondMax || startAfterEnd || beyondDuration }),
100
104
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -112,6 +116,7 @@ const AbsoluteTimeRangePicker = ({
112
116
  /* @__PURE__ */ jsxRuntime.jsx(Flex.Flex, { justify: "center", pt: 8, children: /* @__PURE__ */ jsxRuntime.jsx(
113
117
  DatePicker.DatePicker,
114
118
  {
119
+ ...datePickerProps,
115
120
  type: "range",
116
121
  value: displayRangeDate,
117
122
  onChange: updateRangeDate,
@@ -120,30 +125,20 @@ const AbsoluteTimeRangePicker = ({
120
125
  }
121
126
  ) }),
122
127
  (startAfterEnd || beyondMin || beyondMax || beyondDuration) && /* @__PURE__ */ jsxRuntime.jsxs(Alert.Alert, { icon: /* @__PURE__ */ jsxRuntime.jsx(index.IconAlertCircle, { size: 16 }), color: "red", pt: 8, children: [
123
- startAfterEnd && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { c: "red", children: "Please select an end time after the start time." }),
124
- beyondMin && /* @__PURE__ */ jsxRuntime.jsxs(Text.Text, { c: "red", children: [
125
- "Please select a start time after ",
126
- /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: helpers.timeFormatter(minDateTime, null, "MMM D, YYYY HH:mm:ss") })
127
- ] }),
128
- beyondMax && /* @__PURE__ */ jsxRuntime.jsxs(Text.Text, { c: "red", children: [
129
- "Please select an end time before ",
130
- /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: helpers.timeFormatter(maxDateTime, null, "MMM D, YYYY HH:mm:ss") })
131
- ] }),
132
- beyondDuration && /* @__PURE__ */ jsxRuntime.jsxs(Text.Text, { c: "red", children: [
133
- "The selection exceeds the ",
134
- helpers.formatDuration(maxDuration),
135
- " limit, please select a shorter time range."
136
- ] })
128
+ startAfterEnd && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { c: "red", children: ((_a = localization == null ? void 0 : localization.errors) == null ? void 0 : _a.startAfterEnd) || "Please select an end time after the start time." }),
129
+ beyondMin && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { c: "red", children: ((_c = (_b = localization == null ? void 0 : localization.errors) == null ? void 0 : _b.beyondMin) == null ? void 0 : _c.call(_b, minDateTime)) || `Please select a start time after ${helpers.timeFormatter(minDateTime, null, "MMM D, YYYY HH:mm:ss")}` }),
130
+ beyondMax && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { c: "red", children: ((_e = (_d = localization == null ? void 0 : localization.errors) == null ? void 0 : _d.beyondMax) == null ? void 0 : _e.call(_d, maxDateTime)) || `Please select an end time before ${helpers.timeFormatter(maxDateTime, null, "MMM D, YYYY HH:mm:ss")}` }),
131
+ beyondDuration && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { c: "red", children: ((_g = (_f = localization == null ? void 0 : localization.errors) == null ? void 0 : _f.beyondDuration) == null ? void 0 : _g.call(_f, maxDuration)) || `The selection exceeds the ${helpers.formatDuration(maxDuration)} limit, please select a shorter time range.` })
137
132
  ] }),
138
133
  /* @__PURE__ */ jsxRuntime.jsxs(Flex.Flex, { pt: 8, gap: "xs", justify: "flex-end", align: "flex-start", direction: "row", wrap: "wrap", children: [
139
- /* @__PURE__ */ jsxRuntime.jsx(index$2.Button, { size: "xs", variant: "default", onClick: onCancel, children: "Cancel" }),
134
+ /* @__PURE__ */ jsxRuntime.jsx(index$2.Button, { size: "xs", variant: "default", onClick: onCancel, children: (localization == null ? void 0 : localization.cancel) || "Cancel" }),
140
135
  /* @__PURE__ */ jsxRuntime.jsx(
141
136
  index$2.Button,
142
137
  {
143
138
  size: "xs",
144
139
  onClick: apply,
145
140
  disabled: !start || !end || startAfterEnd || beyondMin || beyondMax || beyondDuration,
146
- children: "Apply"
141
+ children: (localization == null ? void 0 : localization.apply) || "Apply"
147
142
  }
148
143
  )
149
144
  ] })
package/dist/biz/TimeRangePicker/AbsoluteTimeRangePicker.d.cts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { MouseEventHandler } from 'react';
2
+ import { DatePickerProps } from '../../primitive/index.cjs';
2
3
  import { AbsoluteTimeRange, TimeRangeValue } from './helpers.cjs';
3
4
  interface AbsoluteTimeRangePickerProps {
4
5
  value?: TimeRangeValue;
@@ -8,6 +9,23 @@ interface AbsoluteTimeRangePickerProps {
8
9
  onChange?: (v: AbsoluteTimeRange) => void;
9
10
  onCancel?: () => void;
10
11
  onReturnClick?: MouseEventHandler<HTMLElement>;
12
+ dateInputFormat?: (date: Date) => string;
13
+ datePickerProps?: DatePickerProps<'range'>;
14
+ localization?: Localization;
11
15
  }
12
- declare const AbsoluteTimeRangePicker: ({ value, maxDateTime, minDateTime, maxDuration, onChange, onCancel, onReturnClick }: AbsoluteTimeRangePickerProps) => import("react/jsx-runtime.js").JSX.Element;
16
+ export interface Localization {
17
+ entry?: string;
18
+ back?: string;
19
+ start?: string;
20
+ end?: string;
21
+ apply?: string;
22
+ cancel?: string;
23
+ errors?: {
24
+ startAfterEnd?: string;
25
+ beyondMin?: (min: Date) => string;
26
+ beyondMax?: (max: Date) => string;
27
+ beyondDuration?: (duration: number) => string;
28
+ };
29
+ }
30
+ declare const AbsoluteTimeRangePicker: ({ value, maxDateTime, minDateTime, maxDuration, onChange, onCancel, onReturnClick, dateInputFormat, datePickerProps, localization }: AbsoluteTimeRangePickerProps) => import("react/jsx-runtime.js").JSX.Element;
13
31
  export default AbsoluteTimeRangePicker;
package/dist/biz/TimeRangePicker/AbsoluteTimeRangePicker.d.mts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { MouseEventHandler } from 'react';
2
+ import { DatePickerProps } from '../../primitive/index.mjs';
2
3
  import { AbsoluteTimeRange, TimeRangeValue } from './helpers.mjs';
3
4
  interface AbsoluteTimeRangePickerProps {
4
5
  value?: TimeRangeValue;
@@ -8,6 +9,23 @@ interface AbsoluteTimeRangePickerProps {
8
9
  onChange?: (v: AbsoluteTimeRange) => void;
9
10
  onCancel?: () => void;
10
11
  onReturnClick?: MouseEventHandler<HTMLElement>;
12
+ dateInputFormat?: (date: Date) => string;
13
+ datePickerProps?: DatePickerProps<'range'>;
14
+ localization?: Localization;
11
15
  }
12
- declare const AbsoluteTimeRangePicker: ({ value, maxDateTime, minDateTime, maxDuration, onChange, onCancel, onReturnClick }: AbsoluteTimeRangePickerProps) => import("react/jsx-runtime.js").JSX.Element;
16
+ export interface Localization {
17
+ entry?: string;
18
+ back?: string;
19
+ start?: string;
20
+ end?: string;
21
+ apply?: string;
22
+ cancel?: string;
23
+ errors?: {
24
+ startAfterEnd?: string;
25
+ beyondMin?: (min: Date) => string;
26
+ beyondMax?: (max: Date) => string;
27
+ beyondDuration?: (duration: number) => string;
28
+ };
29
+ }
30
+ declare const AbsoluteTimeRangePicker: ({ value, maxDateTime, minDateTime, maxDuration, onChange, onCancel, onReturnClick, dateInputFormat, datePickerProps, localization }: AbsoluteTimeRangePickerProps) => import("react/jsx-runtime.js").JSX.Element;
13
31
  export default AbsoluteTimeRangePicker;
package/dist/biz/TimeRangePicker/AbsoluteTimeRangePicker.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { jsxs, jsx, Fragment } from "react/jsx-runtime";
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
2
  import { useState } from "react";
3
3
  import { IconChevronLeft, IconAlertCircle } from "../../icons/index.mjs";
4
4
  /* empty css */
@@ -25,12 +25,16 @@ const AbsoluteTimeRangePicker = ({
25
25
  maxDuration,
26
26
  onChange,
27
27
  onCancel,
28
- onReturnClick
28
+ onReturnClick,
29
+ dateInputFormat,
30
+ datePickerProps,
31
+ localization
29
32
  }) => {
33
+ var _a, _b, _c, _d, _e, _f, _g;
30
34
  const [start, setStart] = useState(() => value ? new Date(value[0] * 1e3) : null);
31
35
  const [end, setEnd] = useState(() => value ? new Date(value[1] * 1e3) : null);
32
- const startDate = start ? dayjs(start).format("MMM D, YYYY") : "-";
33
- const endDate = end ? dayjs(end).format("MMM D, YYYY") : "-";
36
+ const startDate = start ? (dateInputFormat == null ? void 0 : dateInputFormat(start)) || dayjs(start).format("MMM D, YYYY") : "-";
37
+ const endDate = end ? (dateInputFormat == null ? void 0 : dateInputFormat(end)) || dayjs(end).format("MMM D, YYYY") : "-";
34
38
  const startTime = start ? dayjs(start).format("HH:mm:ss") : "-";
35
39
  const endTime = end ? dayjs(end).format("HH:mm:ss") : "-";
36
40
  const isRangeComplete = !!start && !!end;
@@ -73,10 +77,10 @@ const AbsoluteTimeRangePicker = ({
73
77
  return /* @__PURE__ */ jsxs(Box, { p: "md", w: 280, m: -4, children: [
74
78
  /* @__PURE__ */ jsxs(Group, { pb: "xs", mt: -4, onClick: onReturnClick, sx: { cursor: "pointer" }, children: [
75
79
  /* @__PURE__ */ jsx(IconChevronLeft, { size: 16 }),
76
- /* @__PURE__ */ jsx(Typography, { variant: "body-lg", children: "Back" })
80
+ /* @__PURE__ */ jsx(Typography, { variant: "body-lg", children: (localization == null ? void 0 : localization.back) || "Back" })
77
81
  ] }),
78
82
  /* @__PURE__ */ jsxs(Group, { gap: 0, pt: 8, justify: "space-between", children: [
79
- /* @__PURE__ */ jsx(Typography, { variant: "label-sm", children: "Start" }),
83
+ /* @__PURE__ */ jsx(Typography, { variant: "label-sm", children: (localization == null ? void 0 : localization.start) || "Start" }),
80
84
  /* @__PURE__ */ jsxs(Group, { gap: 8, children: [
81
85
  /* @__PURE__ */ jsx(Input, { w: 116, value: startDate, error: beyondMin || startAfterEnd || beyondDuration }),
82
86
  /* @__PURE__ */ jsx(
@@ -92,7 +96,7 @@ const AbsoluteTimeRangePicker = ({
92
96
  ] })
93
97
  ] }),
94
98
  /* @__PURE__ */ jsxs(Group, { gap: 0, pt: 8, justify: "space-between", children: [
95
- /* @__PURE__ */ jsx(Typography, { variant: "label-sm", children: "End" }),
99
+ /* @__PURE__ */ jsx(Typography, { variant: "label-sm", children: (localization == null ? void 0 : localization.end) || "End" }),
96
100
  /* @__PURE__ */ jsxs(Group, { gap: 8, children: [
97
101
  /* @__PURE__ */ jsx(Input, { w: 116, value: endDate, error: beyondMax || startAfterEnd || beyondDuration }),
98
102
  /* @__PURE__ */ jsx(
@@ -110,6 +114,7 @@ const AbsoluteTimeRangePicker = ({
110
114
  /* @__PURE__ */ jsx(Flex, { justify: "center", pt: 8, children: /* @__PURE__ */ jsx(
111
115
  DatePicker,
112
116
  {
117
+ ...datePickerProps,
113
118
  type: "range",
114
119
  value: displayRangeDate,
115
120
  onChange: updateRangeDate,
@@ -118,30 +123,20 @@ const AbsoluteTimeRangePicker = ({
118
123
  }
119
124
  ) }),
120
125
  (startAfterEnd || beyondMin || beyondMax || beyondDuration) && /* @__PURE__ */ jsxs(Alert, { icon: /* @__PURE__ */ jsx(IconAlertCircle, { size: 16 }), color: "red", pt: 8, children: [
121
- startAfterEnd && /* @__PURE__ */ jsx(Text, { c: "red", children: "Please select an end time after the start time." }),
122
- beyondMin && /* @__PURE__ */ jsxs(Text, { c: "red", children: [
123
- "Please select a start time after ",
124
- /* @__PURE__ */ jsx(Fragment, { children: timeFormatter(minDateTime, null, "MMM D, YYYY HH:mm:ss") })
125
- ] }),
126
- beyondMax && /* @__PURE__ */ jsxs(Text, { c: "red", children: [
127
- "Please select an end time before ",
128
- /* @__PURE__ */ jsx(Fragment, { children: timeFormatter(maxDateTime, null, "MMM D, YYYY HH:mm:ss") })
129
- ] }),
130
- beyondDuration && /* @__PURE__ */ jsxs(Text, { c: "red", children: [
131
- "The selection exceeds the ",
132
- formatDuration(maxDuration),
133
- " limit, please select a shorter time range."
134
- ] })
126
+ startAfterEnd && /* @__PURE__ */ jsx(Text, { c: "red", children: ((_a = localization == null ? void 0 : localization.errors) == null ? void 0 : _a.startAfterEnd) || "Please select an end time after the start time." }),
127
+ beyondMin && /* @__PURE__ */ jsx(Text, { c: "red", children: ((_c = (_b = localization == null ? void 0 : localization.errors) == null ? void 0 : _b.beyondMin) == null ? void 0 : _c.call(_b, minDateTime)) || `Please select a start time after ${timeFormatter(minDateTime, null, "MMM D, YYYY HH:mm:ss")}` }),
128
+ beyondMax && /* @__PURE__ */ jsx(Text, { c: "red", children: ((_e = (_d = localization == null ? void 0 : localization.errors) == null ? void 0 : _d.beyondMax) == null ? void 0 : _e.call(_d, maxDateTime)) || `Please select an end time before ${timeFormatter(maxDateTime, null, "MMM D, YYYY HH:mm:ss")}` }),
129
+ beyondDuration && /* @__PURE__ */ jsx(Text, { c: "red", children: ((_g = (_f = localization == null ? void 0 : localization.errors) == null ? void 0 : _f.beyondDuration) == null ? void 0 : _g.call(_f, maxDuration)) || `The selection exceeds the ${formatDuration(maxDuration)} limit, please select a shorter time range.` })
135
130
  ] }),
136
131
  /* @__PURE__ */ jsxs(Flex, { pt: 8, gap: "xs", justify: "flex-end", align: "flex-start", direction: "row", wrap: "wrap", children: [
137
- /* @__PURE__ */ jsx(Button, { size: "xs", variant: "default", onClick: onCancel, children: "Cancel" }),
132
+ /* @__PURE__ */ jsx(Button, { size: "xs", variant: "default", onClick: onCancel, children: (localization == null ? void 0 : localization.cancel) || "Cancel" }),
138
133
  /* @__PURE__ */ jsx(
139
134
  Button,
140
135
  {
141
136
  size: "xs",
142
137
  onClick: apply,
143
138
  disabled: !start || !end || startAfterEnd || beyondMin || beyondMax || beyondDuration,
144
- children: "Apply"
139
+ children: (localization == null ? void 0 : localization.apply) || "Apply"
145
140
  }
146
141
  )
147
142
  ] })
package/dist/biz/TimeRangePicker/helpers.cjs CHANGED
@@ -29,8 +29,9 @@ const toTimeRangeValue = (timeRange, offset = 0) => {
29
29
  if (timeRange.type === "absolute") {
30
30
  return timeRange.value.map((t) => t + offset);
31
31
  } else {
32
+ const isFuture = timeRange.isFuture;
32
33
  const now = dayjs.dayjs().unix();
33
- return [now - timeRange.value + offset, now + offset];
34
+ return isFuture ? [now + offset, now + timeRange.value + offset] : [now - timeRange.value + offset, now + offset];
34
35
  }
35
36
  };
36
37
  function fromTimeRangeValue(v) {
@@ -41,14 +42,15 @@ function fromTimeRangeValue(v) {
41
42
  }
42
43
  const toURLTimeRange = (timeRange) => {
43
44
  if (timeRange.type === "relative") {
44
- return { from: `${timeRange.value}`, to: "now" };
45
+ const isFuture = timeRange.isFuture;
46
+ return isFuture ? { from: "now", to: `${timeRange.value}` } : { from: `${timeRange.value}`, to: "now" };
45
47
  }
46
48
  const timeRangeValue = toTimeRangeValue(timeRange);
47
49
  return { from: `${timeRangeValue[0]}`, to: `${timeRangeValue[1]}` };
48
50
  };
49
51
  const urlToTimeRange = (urlTimeRange) => {
50
- if (urlTimeRange.to === "now") {
51
- return { type: "relative", value: Number(urlTimeRange.from) };
52
+ if (urlTimeRange.to === "now" || urlTimeRange.from === "now") {
53
+ return { type: "relative", value: Number(urlTimeRange.from), isFuture: urlTimeRange.from === "now" };
52
54
  }
53
55
  return { type: "absolute", value: [Number(urlTimeRange.from), Number(urlTimeRange.to)] };
54
56
  };
package/dist/biz/TimeRangePicker/helpers.d.cts CHANGED
@@ -2,6 +2,7 @@ export type TimeRange = RelativeTimeRange | AbsoluteTimeRange;
2
2
  export interface RelativeTimeRange {
3
3
  type: 'relative';
4
4
  value: number;
5
+ isFuture?: boolean;
5
6
  }
6
7
  export interface AbsoluteTimeRange {
7
8
  type: 'absolute';
package/dist/biz/TimeRangePicker/helpers.d.mts CHANGED
@@ -2,6 +2,7 @@ export type TimeRange = RelativeTimeRange | AbsoluteTimeRange;
2
2
  export interface RelativeTimeRange {
3
3
  type: 'relative';
4
4
  value: number;
5
+ isFuture?: boolean;
5
6
  }
6
7
  export interface AbsoluteTimeRange {
7
8
  type: 'absolute';
package/dist/biz/TimeRangePicker/helpers.mjs CHANGED
@@ -27,8 +27,9 @@ const toTimeRangeValue = (timeRange, offset = 0) => {
27
27
  if (timeRange.type === "absolute") {
28
28
  return timeRange.value.map((t) => t + offset);
29
29
  } else {
30
+ const isFuture = timeRange.isFuture;
30
31
  const now = dayjs().unix();
31
- return [now - timeRange.value + offset, now + offset];
32
+ return isFuture ? [now + offset, now + timeRange.value + offset] : [now - timeRange.value + offset, now + offset];
32
33
  }
33
34
  };
34
35
  function fromTimeRangeValue(v) {
@@ -39,14 +40,15 @@ function fromTimeRangeValue(v) {
39
40
  }
40
41
  const toURLTimeRange = (timeRange) => {
41
42
  if (timeRange.type === "relative") {
42
- return { from: `${timeRange.value}`, to: "now" };
43
+ const isFuture = timeRange.isFuture;
44
+ return isFuture ? { from: "now", to: `${timeRange.value}` } : { from: `${timeRange.value}`, to: "now" };
43
45
  }
44
46
  const timeRangeValue = toTimeRangeValue(timeRange);
45
47
  return { from: `${timeRangeValue[0]}`, to: `${timeRangeValue[1]}` };
46
48
  };
47
49
  const urlToTimeRange = (urlTimeRange) => {
48
- if (urlTimeRange.to === "now") {
49
- return { type: "relative", value: Number(urlTimeRange.from) };
50
+ if (urlTimeRange.to === "now" || urlTimeRange.from === "now") {
51
+ return { type: "relative", value: Number(urlTimeRange.from), isFuture: urlTimeRange.from === "now" };
50
52
  }
51
53
  return { type: "absolute", value: [Number(urlTimeRange.from), Number(urlTimeRange.to)] };
52
54
  };
package/dist/biz/TimeRangePicker/index.cjs CHANGED
@@ -29,14 +29,21 @@ const TimeRangePicker = ({
29
29
  quickRanges = helpers.DEFAULT_QUICK_RANGES,
30
30
  loading,
31
31
  placeholder,
32
+ badgePlaceholder,
32
33
  clearable,
33
34
  timezone,
34
- sx
35
+ sx,
36
+ dateInputFormat,
37
+ datePickerProps,
38
+ localization,
39
+ relativeFormatter,
40
+ absoluteFormatter
35
41
  }) => {
36
42
  const [opened, setOpened] = React.useState(false);
37
43
  const [customMode, setCustomMode] = React.useState(false);
38
44
  const isEmptyValue = !value;
39
45
  const isRelativeRange = (value == null ? void 0 : value.type) === "relative";
46
+ const isFuture = isRelativeRange && (value == null ? void 0 : value.isFuture);
40
47
  const { hovered, ref: targetRef } = useHover.useHover();
41
48
  const timeRangeValue = isEmptyValue ? void 0 : helpers.toTimeRangeValue(value);
42
49
  const duration = isEmptyValue ? void 0 : timeRangeValue[1] - timeRangeValue[0];
@@ -50,12 +57,24 @@ const TimeRangePicker = ({
50
57
  if (!timeRangeValue) {
51
58
  return "";
52
59
  }
60
+ if (absoluteFormatter) {
61
+ return absoluteFormatter(value);
62
+ }
53
63
  return `${helpers.timeFormatter(timeRangeValue[0], timezone ?? null, "MMM D, YYYY HH:mm")} - ${helpers.timeFormatter(
54
64
  timeRangeValue[1],
55
65
  timezone ?? null,
56
66
  "MMM D, YYYY HH:mm"
57
67
  )}`;
58
- }, [timeRangeValue]);
68
+ }, [value]);
69
+ const formattedRelativeDateTime = React.useMemo(() => {
70
+ if (!value || value.type === "absolute") {
71
+ return "";
72
+ }
73
+ if (relativeFormatter) {
74
+ return relativeFormatter(value);
75
+ }
76
+ return `${isFuture ? "Next" : "Past"} ${helpers.formatDuration(duration)}`;
77
+ }, [value]);
59
78
  return /* @__PURE__ */ jsxRuntime.jsxs(
60
79
  Menu.Menu,
61
80
  {
@@ -111,7 +130,7 @@ const TimeRangePicker = ({
111
130
  }
112
131
  ) : /* @__PURE__ */ jsxRuntime.jsx(index$1.IconChevronSelectorVertical, { size: 16, color: "var(--mantine-color-carbon-7)!important" }),
113
132
  children: /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { w: "100%", gap: 0, children: [
114
- /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { sx: { flex: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(DurationBadge, { children: isEmptyValue ? "All" : helpers.formatDuration(duration, true) }) }),
133
+ /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { sx: { flex: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(DurationBadge, { children: isEmptyValue ? badgePlaceholder || "All" : helpers.formatDuration(duration, true) }) }),
115
134
  /* @__PURE__ */ jsxRuntime.jsx(
116
135
  Text.Text,
117
136
  {
@@ -124,7 +143,7 @@ const TimeRangePicker = ({
124
143
  textAlign: "left"
125
144
  },
126
145
  c: isEmptyValue ? "dimmed" : "carbon.8",
127
- children: isEmptyValue ? placeholder || "Time Range" : isRelativeRange ? `Past ${helpers.formatDuration(duration)}` : formattedAbsDateTime
146
+ children: isEmptyValue ? placeholder || "Time Range" : isRelativeRange ? formattedRelativeDateTime : formattedAbsDateTime
128
147
  }
129
148
  )
130
149
  ] })
@@ -142,7 +161,10 @@ const TimeRangePicker = ({
142
161
  setOpened(false);
143
162
  },
144
163
  onCancel: () => setOpened(false),
145
- onReturnClick: () => setCustomMode(false)
164
+ onReturnClick: () => setCustomMode(false),
165
+ dateInputFormat,
166
+ datePickerProps,
167
+ localization
146
168
  }
147
169
  ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
148
170
  !disableAbsoluteRanges && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -152,25 +174,31 @@ const TimeRangePicker = ({
152
174
  rightSection: /* @__PURE__ */ jsxRuntime.jsx(index$1.IconChevronRight, { size: 16 }),
153
175
  closeMenuOnClick: false,
154
176
  onClick: () => setCustomMode(true),
155
- children: /* @__PURE__ */ jsxRuntime.jsx(index$2.Typography, { variant: "body-lg", children: "Custom" })
177
+ children: /* @__PURE__ */ jsxRuntime.jsx(index$2.Typography, { variant: "body-lg", children: (localization == null ? void 0 : localization.entry) || "Custom" })
156
178
  }
157
179
  ),
158
180
  /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Divider, {})
159
181
  ] }),
160
- /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: quickRanges.map((seconds) => /* @__PURE__ */ jsxRuntime.jsx(
161
- Menu.Menu.Item,
162
- {
163
- sx: (theme) => ({
164
- background: seconds === selectedRelativeItem ? theme.colors.carbon[3] : ""
165
- }),
166
- onClick: () => onChange == null ? void 0 : onChange({ type: "relative", value: seconds }),
167
- children: /* @__PURE__ */ jsxRuntime.jsxs(Text.Text, { children: [
168
- "Past ",
169
- helpers.formatDuration(seconds)
170
- ] })
171
- },
172
- seconds
173
- )) })
182
+ /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: quickRanges.map((item) => {
183
+ const isNumber = typeof item === "number";
184
+ const seconds = isNumber ? item : item.value;
185
+ const isFuture2 = isNumber ? false : item.isFuture;
186
+ let label = isNumber ? `Past ${helpers.formatDuration(seconds)}` : item.label;
187
+ if (!label) {
188
+ label = isFuture2 ? `Next ${helpers.formatDuration(seconds)}` : `Past ${helpers.formatDuration(seconds)}`;
189
+ }
190
+ return /* @__PURE__ */ jsxRuntime.jsx(
191
+ Menu.Menu.Item,
192
+ {
193
+ sx: (theme) => ({
194
+ background: seconds === selectedRelativeItem ? theme.colors.carbon[3] : ""
195
+ }),
196
+ onClick: () => onChange == null ? void 0 : onChange({ type: "relative", value: seconds, isFuture: isFuture2 }),
197
+ children: /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { children: label })
198
+ },
199
+ seconds
200
+ );
201
+ }) })
174
202
  ] }) })
175
203
  ]
176
204
  }
package/dist/biz/TimeRangePicker/index.d.cts CHANGED
@@ -1,5 +1,6 @@
1
- import { ButtonProps } from '../../primitive/index.cjs';
2
- import { TimeRange } from './helpers.cjs';
1
+ import { ButtonProps, DatePickerProps } from '../../primitive/index.cjs';
2
+ import { Localization } from './AbsoluteTimeRangePicker.cjs';
3
+ import { TimeRange, AbsoluteTimeRange, RelativeTimeRange } from './helpers.cjs';
3
4
  export type TimeRangePickerProps = TimeRangePickerBaseProps & ({
4
5
  clearable: true;
5
6
  value?: TimeRange;
@@ -12,13 +13,24 @@ export type TimeRangePickerProps = TimeRangePickerBaseProps & ({
12
13
  export interface TimeRangePickerBaseProps extends ButtonProps {
13
14
  loading?: boolean;
14
15
  placeholder?: string;
16
+ badgePlaceholder?: string;
15
17
  clearable?: boolean;
18
+ relativeFormatter?: (relativeRange: RelativeTimeRange) => string;
19
+ absoluteFormatter?: (absoluteRange: AbsoluteTimeRange) => string;
16
20
  minDateTime?: () => Date;
17
21
  maxDateTime?: () => Date;
18
22
  maxDuration?: number;
19
- quickRanges?: number[];
23
+ quickRanges?: (number | QuickRange)[];
20
24
  disableAbsoluteRanges?: boolean;
21
25
  timezone?: number;
26
+ datePickerProps?: DatePickerProps<'range'>;
27
+ dateInputFormat?: (date: Date) => string;
28
+ localization?: Localization;
22
29
  }
23
- export declare const TimeRangePicker: ({ value, minDateTime, maxDateTime, maxDuration, disableAbsoluteRanges, onChange, quickRanges, loading, placeholder, clearable, timezone, sx }: React.PropsWithChildren<TimeRangePickerProps>) => import("react/jsx-runtime.js").JSX.Element;
30
+ type QuickRange = {
31
+ value: number;
32
+ label?: React.ReactNode;
33
+ isFuture?: boolean;
34
+ };
35
+ export declare const TimeRangePicker: ({ value, minDateTime, maxDateTime, maxDuration, disableAbsoluteRanges, onChange, quickRanges, loading, placeholder, badgePlaceholder, clearable, timezone, sx, dateInputFormat, datePickerProps, localization, relativeFormatter, absoluteFormatter }: React.PropsWithChildren<TimeRangePickerProps>) => import("react/jsx-runtime.js").JSX.Element;
24
36
  export * from './helpers.cjs';
package/dist/biz/TimeRangePicker/index.d.mts CHANGED
@@ -1,5 +1,6 @@
1
- import { ButtonProps } from '../../primitive/index.mjs';
2
- import { TimeRange } from './helpers.mjs';
1
+ import { ButtonProps, DatePickerProps } from '../../primitive/index.mjs';
2
+ import { Localization } from './AbsoluteTimeRangePicker.mjs';
3
+ import { TimeRange, AbsoluteTimeRange, RelativeTimeRange } from './helpers.mjs';
3
4
  export type TimeRangePickerProps = TimeRangePickerBaseProps & ({
4
5
  clearable: true;
5
6
  value?: TimeRange;
@@ -12,13 +13,24 @@ export type TimeRangePickerProps = TimeRangePickerBaseProps & ({
12
13
  export interface TimeRangePickerBaseProps extends ButtonProps {
13
14
  loading?: boolean;
14
15
  placeholder?: string;
16
+ badgePlaceholder?: string;
15
17
  clearable?: boolean;
18
+ relativeFormatter?: (relativeRange: RelativeTimeRange) => string;
19
+ absoluteFormatter?: (absoluteRange: AbsoluteTimeRange) => string;
16
20
  minDateTime?: () => Date;
17
21
  maxDateTime?: () => Date;
18
22
  maxDuration?: number;
19
- quickRanges?: number[];
23
+ quickRanges?: (number | QuickRange)[];
20
24
  disableAbsoluteRanges?: boolean;
21
25
  timezone?: number;
26
+ datePickerProps?: DatePickerProps<'range'>;
27
+ dateInputFormat?: (date: Date) => string;
28
+ localization?: Localization;
22
29
  }
23
- export declare const TimeRangePicker: ({ value, minDateTime, maxDateTime, maxDuration, disableAbsoluteRanges, onChange, quickRanges, loading, placeholder, clearable, timezone, sx }: React.PropsWithChildren<TimeRangePickerProps>) => import("react/jsx-runtime.js").JSX.Element;
30
+ type QuickRange = {
31
+ value: number;
32
+ label?: React.ReactNode;
33
+ isFuture?: boolean;
34
+ };
35
+ export declare const TimeRangePicker: ({ value, minDateTime, maxDateTime, maxDuration, disableAbsoluteRanges, onChange, quickRanges, loading, placeholder, badgePlaceholder, clearable, timezone, sx, dateInputFormat, datePickerProps, localization, relativeFormatter, absoluteFormatter }: React.PropsWithChildren<TimeRangePickerProps>) => import("react/jsx-runtime.js").JSX.Element;
24
36
  export * from './helpers.mjs';
package/dist/biz/TimeRangePicker/index.mjs CHANGED
@@ -28,14 +28,21 @@ const TimeRangePicker = ({
28
28
  quickRanges = DEFAULT_QUICK_RANGES,
29
29
  loading,
30
30
  placeholder,
31
+ badgePlaceholder,
31
32
  clearable,
32
33
  timezone,
33
- sx
34
+ sx,
35
+ dateInputFormat,
36
+ datePickerProps,
37
+ localization,
38
+ relativeFormatter,
39
+ absoluteFormatter
34
40
  }) => {
35
41
  const [opened, setOpened] = useState(false);
36
42
  const [customMode, setCustomMode] = useState(false);
37
43
  const isEmptyValue = !value;
38
44
  const isRelativeRange = (value == null ? void 0 : value.type) === "relative";
45
+ const isFuture = isRelativeRange && (value == null ? void 0 : value.isFuture);
39
46
  const { hovered, ref: targetRef } = useHover();
40
47
  const timeRangeValue = isEmptyValue ? void 0 : toTimeRangeValue(value);
41
48
  const duration = isEmptyValue ? void 0 : timeRangeValue[1] - timeRangeValue[0];
@@ -49,12 +56,24 @@ const TimeRangePicker = ({
49
56
  if (!timeRangeValue) {
50
57
  return "";
51
58
  }
59
+ if (absoluteFormatter) {
60
+ return absoluteFormatter(value);
61
+ }
52
62
  return `${timeFormatter(timeRangeValue[0], timezone ?? null, "MMM D, YYYY HH:mm")} - ${timeFormatter(
53
63
  timeRangeValue[1],
54
64
  timezone ?? null,
55
65
  "MMM D, YYYY HH:mm"
56
66
  )}`;
57
- }, [timeRangeValue]);
67
+ }, [value]);
68
+ const formattedRelativeDateTime = useMemo(() => {
69
+ if (!value || value.type === "absolute") {
70
+ return "";
71
+ }
72
+ if (relativeFormatter) {
73
+ return relativeFormatter(value);
74
+ }
75
+ return `${isFuture ? "Next" : "Past"} ${formatDuration(duration)}`;
76
+ }, [value]);
58
77
  return /* @__PURE__ */ jsxs(
59
78
  Menu,
60
79
  {
@@ -110,7 +129,7 @@ const TimeRangePicker = ({
110
129
  }
111
130
  ) : /* @__PURE__ */ jsx(IconChevronSelectorVertical, { size: 16, color: "var(--mantine-color-carbon-7)!important" }),
112
131
  children: /* @__PURE__ */ jsxs(Group, { w: "100%", gap: 0, children: [
113
- /* @__PURE__ */ jsx(Box, { sx: { flex: "none" }, children: /* @__PURE__ */ jsx(DurationBadge, { children: isEmptyValue ? "All" : formatDuration(duration, true) }) }),
132
+ /* @__PURE__ */ jsx(Box, { sx: { flex: "none" }, children: /* @__PURE__ */ jsx(DurationBadge, { children: isEmptyValue ? badgePlaceholder || "All" : formatDuration(duration, true) }) }),
114
133
  /* @__PURE__ */ jsx(
115
134
  Text,
116
135
  {
@@ -123,7 +142,7 @@ const TimeRangePicker = ({
123
142
  textAlign: "left"
124
143
  },
125
144
  c: isEmptyValue ? "dimmed" : "carbon.8",
126
- children: isEmptyValue ? placeholder || "Time Range" : isRelativeRange ? `Past ${formatDuration(duration)}` : formattedAbsDateTime
145
+ children: isEmptyValue ? placeholder || "Time Range" : isRelativeRange ? formattedRelativeDateTime : formattedAbsDateTime
127
146
  }
128
147
  )
129
148
  ] })
@@ -141,7 +160,10 @@ const TimeRangePicker = ({
141
160
  setOpened(false);
142
161
  },
143
162
  onCancel: () => setOpened(false),
144
- onReturnClick: () => setCustomMode(false)
163
+ onReturnClick: () => setCustomMode(false),
164
+ dateInputFormat,
165
+ datePickerProps,
166
+ localization
145
167
  }
146
168
  ) : /* @__PURE__ */ jsxs(Fragment, { children: [
147
169
  !disableAbsoluteRanges && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -151,25 +173,31 @@ const TimeRangePicker = ({
151
173
  rightSection: /* @__PURE__ */ jsx(IconChevronRight, { size: 16 }),
152
174
  closeMenuOnClick: false,
153
175
  onClick: () => setCustomMode(true),
154
- children: /* @__PURE__ */ jsx(Typography, { variant: "body-lg", children: "Custom" })
176
+ children: /* @__PURE__ */ jsx(Typography, { variant: "body-lg", children: (localization == null ? void 0 : localization.entry) || "Custom" })
155
177
  }
156
178
  ),
157
179
  /* @__PURE__ */ jsx(Menu.Divider, {})
158
180
  ] }),
159
- /* @__PURE__ */ jsx(Fragment, { children: quickRanges.map((seconds) => /* @__PURE__ */ jsx(
160
- Menu.Item,
161
- {
162
- sx: (theme) => ({
163
- background: seconds === selectedRelativeItem ? theme.colors.carbon[3] : ""
164
- }),
165
- onClick: () => onChange == null ? void 0 : onChange({ type: "relative", value: seconds }),
166
- children: /* @__PURE__ */ jsxs(Text, { children: [
167
- "Past ",
168
- formatDuration(seconds)
169
- ] })
170
- },
171
- seconds
172
- )) })
181
+ /* @__PURE__ */ jsx(Fragment, { children: quickRanges.map((item) => {
182
+ const isNumber = typeof item === "number";
183
+ const seconds = isNumber ? item : item.value;
184
+ const isFuture2 = isNumber ? false : item.isFuture;
185
+ let label = isNumber ? `Past ${formatDuration(seconds)}` : item.label;
186
+ if (!label) {
187
+ label = isFuture2 ? `Next ${formatDuration(seconds)}` : `Past ${formatDuration(seconds)}`;
188
+ }
189
+ return /* @__PURE__ */ jsx(
190
+ Menu.Item,
191
+ {
192
+ sx: (theme) => ({
193
+ background: seconds === selectedRelativeItem ? theme.colors.carbon[3] : ""
194
+ }),
195
+ onClick: () => onChange == null ? void 0 : onChange({ type: "relative", value: seconds, isFuture: isFuture2 }),
196
+ children: /* @__PURE__ */ jsx(Text, { children: label })
197
+ },
198
+ seconds
199
+ );
200
+ }) })
173
201
  ] }) })
174
202
  ]
175
203
  }
package/dist/primitive/Prism/Prism.cjs CHANGED
@@ -7,7 +7,7 @@ const prismTheme = require("./prism-theme.cjs");
7
7
  const Prism_styles = require("./Prism.styles.cjs");
8
8
  const factory = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/factory/factory.cjs");
9
9
  const useProps = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/MantineProvider/use-props/use-props.cjs");
10
- const useColorScheme = require("../../node_modules/.pnpm/@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-color-scheme/use-color-scheme.cjs");
10
+ const useComputedColorScheme = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/MantineProvider/use-mantine-color-scheme/use-computed-color-scheme.cjs");
11
11
  const MantineThemeProvider = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs");
12
12
  const useClipboard = require("../../node_modules/.pnpm/@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-clipboard/use-clipboard.cjs");
13
13
  const ScrollArea = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/ScrollArea/ScrollArea.cjs");
@@ -49,10 +49,10 @@ const Prism = factory.factory((_props, ref) => {
49
49
  } = useProps.useProps("Prism", prismDefaultProps, props);
50
50
  const code = trim && typeof children === "string" ? children.trim() : children;
51
51
  const maxLineSize = code.split("\n").length.toString().length;
52
- const mantineColorScheme = useColorScheme.useColorScheme();
52
+ const globalColorScheme = useComputedColorScheme.useComputedColorScheme();
53
53
  const theme = MantineThemeProvider.useMantineTheme();
54
54
  const clipboard = useClipboard.useClipboard();
55
- const _colorScheme = colorScheme || mantineColorScheme;
55
+ const _colorScheme = colorScheme || globalColorScheme;
56
56
  const { classes } = Prism_styles.default({
57
57
  colorScheme: _colorScheme,
58
58
  native: ScrollAreaComponent !== ScrollArea.ScrollArea,
package/dist/primitive/Prism/Prism.mjs CHANGED
@@ -5,7 +5,7 @@ import { getPrismTheme } from "./prism-theme.mjs";
5
5
  import usePrismStyles from "./Prism.styles.mjs";
6
6
  import { factory } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/factory/factory.mjs";
7
7
  import { useProps } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/MantineProvider/use-props/use-props.mjs";
8
- import { useColorScheme } from "../../node_modules/.pnpm/@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-color-scheme/use-color-scheme.mjs";
8
+ import { useComputedColorScheme } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/MantineProvider/use-mantine-color-scheme/use-computed-color-scheme.mjs";
9
9
  import { useMantineTheme } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs";
10
10
  import { useClipboard } from "../../node_modules/.pnpm/@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-clipboard/use-clipboard.mjs";
11
11
  import { ScrollArea } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/ScrollArea/ScrollArea.mjs";
@@ -47,10 +47,10 @@ const Prism = factory((_props, ref) => {
47
47
  } = useProps("Prism", prismDefaultProps, props);
48
48
  const code = trim && typeof children === "string" ? children.trim() : children;
49
49
  const maxLineSize = code.split("\n").length.toString().length;
50
- const mantineColorScheme = useColorScheme();
50
+ const globalColorScheme = useComputedColorScheme();
51
51
  const theme = useMantineTheme();
52
52
  const clipboard = useClipboard();
53
- const _colorScheme = colorScheme || mantineColorScheme;
53
+ const _colorScheme = colorScheme || globalColorScheme;
54
54
  const { classes } = usePrismStyles({
55
55
  colorScheme: _colorScheme,
56
56
  native: ScrollAreaComponent !== ScrollArea,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.2.8",
3
+ "version": "2.2.9",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",