@epilot/zenith-react 0.1.0-next.1 → 0.2.0-next.0
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.
- package/README.md +79 -10
- package/dist/components/alert-dialog/alert-dialog.js +48 -47
- package/dist/components/alert-dialog/alert-dialog.js.map +1 -1
- package/dist/components/appearance-boundary/appearance-boundary.js +32 -34
- package/dist/components/appearance-boundary/appearance-boundary.js.map +1 -1
- package/dist/components/badge/badge.js +1 -1
- package/dist/components/badge/badge.js.map +1 -1
- package/dist/components/breadcrumb/breadcrumb.js +10 -10
- package/dist/components/breadcrumb/breadcrumb.js.map +1 -1
- package/dist/components/button/button.js +28 -28
- package/dist/components/button/button.js.map +1 -1
- package/dist/components/callout/callout.js +42 -40
- package/dist/components/callout/callout.js.map +1 -1
- package/dist/components/checkbox/checkbox.js +13 -13
- package/dist/components/checkbox/checkbox.js.map +1 -1
- package/dist/components/code-block/code-block.js +6 -6
- package/dist/components/code-block/code-block.js.map +1 -1
- package/dist/components/code-editor/code-editor.js +1 -1
- package/dist/components/code-editor/code-editor.js.map +1 -1
- package/dist/components/command/command.js +6 -6
- package/dist/components/command/command.js.map +1 -1
- package/dist/components/data-table/data-table-body.js +120 -66
- package/dist/components/data-table/data-table-body.js.map +1 -1
- package/dist/components/data-table/data-table-column-header.js +7 -7
- package/dist/components/data-table/data-table-column-header.js.map +1 -1
- package/dist/components/data-table/data-table-column-order.js +277 -0
- package/dist/components/data-table/data-table-column-order.js.map +1 -0
- package/dist/components/data-table/data-table-content.js +72 -58
- package/dist/components/data-table/data-table-content.js.map +1 -1
- package/dist/components/data-table/data-table-context.js +8 -4
- package/dist/components/data-table/data-table-context.js.map +1 -1
- package/dist/components/data-table/data-table-footer.js +31 -0
- package/dist/components/data-table/data-table-footer.js.map +1 -0
- package/dist/components/data-table/data-table-header-draggable.js +151 -0
- package/dist/components/data-table/data-table-header-draggable.js.map +1 -0
- package/dist/components/data-table/data-table-header.js +130 -57
- package/dist/components/data-table/data-table-header.js.map +1 -1
- package/dist/components/data-table/data-table-resize-handle.js +137 -0
- package/dist/components/data-table/data-table-resize-handle.js.map +1 -0
- package/dist/components/data-table/data-table.js +184 -156
- package/dist/components/data-table/data-table.js.map +1 -1
- package/dist/components/data-table/hooks/use-data-table-virtualizer.js +9 -0
- package/dist/components/data-table/hooks/use-data-table-virtualizer.js.map +1 -0
- package/dist/components/date-range-picker/date-range-picker.js +196 -179
- package/dist/components/date-range-picker/date-range-picker.js.map +1 -1
- package/dist/components/date-time-picker/calendar.js +29 -29
- package/dist/components/date-time-picker/calendar.js.map +1 -1
- package/dist/components/date-time-picker/date-time-picker-input.js +127 -114
- package/dist/components/date-time-picker/date-time-picker-input.js.map +1 -1
- package/dist/components/date-time-picker/date-time-picker.js +91 -88
- package/dist/components/date-time-picker/date-time-picker.js.map +1 -1
- package/dist/components/date-time-picker/time-picker.js +55 -55
- package/dist/components/date-time-picker/time-picker.js.map +1 -1
- package/dist/components/dialog/dialog.js +74 -72
- package/dist/components/dialog/dialog.js.map +1 -1
- package/dist/components/drawer/drawer.js +69 -67
- package/dist/components/drawer/drawer.js.map +1 -1
- package/dist/components/dropdown-menu/dropdown-menu.js +36 -36
- package/dist/components/dropdown-menu/dropdown-menu.js.map +1 -1
- package/dist/components/field/field-combobox.js +4 -4
- package/dist/components/field/field-combobox.js.map +1 -1
- package/dist/components/field/field.js +207 -176
- package/dist/components/field/field.js.map +1 -1
- package/dist/components/list/list.js +40 -40
- package/dist/components/list/list.js.map +1 -1
- package/dist/components/option-card/option-card.js +27 -25
- package/dist/components/option-card/option-card.js.map +1 -1
- package/dist/components/pill/pill.js +9 -9
- package/dist/components/pill/pill.js.map +1 -1
- package/dist/components/radio/radio.js +14 -14
- package/dist/components/radio/radio.js.map +1 -1
- package/dist/components/scroll-area/scroll-area.js +9 -9
- package/dist/components/scroll-area/scroll-area.js.map +1 -1
- package/dist/components/segmented-control/segmented-control.js +1 -1
- package/dist/components/segmented-control/segmented-control.js.map +1 -1
- package/dist/components/select/select.js +11 -11
- package/dist/components/select/select.js.map +1 -1
- package/dist/components/spinner/spinner.js.map +1 -1
- package/dist/components/switch/switch.js +11 -11
- package/dist/components/switch/switch.js.map +1 -1
- package/dist/components/table/table-pagination.js +1 -1
- package/dist/components/table/table-pagination.js.map +1 -1
- package/dist/components/table/table.js +15 -15
- package/dist/components/table/table.js.map +1 -1
- package/dist/components/tabs/tabs.js +131 -76
- package/dist/components/tabs/tabs.js.map +1 -1
- package/dist/components/text/text.js +10 -1
- package/dist/components/text/text.js.map +1 -1
- package/dist/components/toast/toast.js +26 -26
- package/dist/components/toast/toast.js.map +1 -1
- package/dist/components/toggle/toggle.js +20 -20
- package/dist/components/toggle/toggle.js.map +1 -1
- package/dist/index.d.ts +1940 -1867
- package/dist/index.js +133 -121
- package/dist/index.js.map +1 -1
- package/dist/packages/tokens/dist/generated/core.generated.js +13 -22
- package/dist/packages/tokens/dist/generated/core.generated.js.map +1 -1
- package/dist/packages/tokens/dist/generated/palette.generated.js +5 -5
- package/dist/packages/tokens/dist/generated/palette.generated.js.map +1 -1
- package/dist/packages/tokens/dist/install.js +5 -5
- package/dist/packages/tokens/dist/install.js.map +1 -1
- package/dist/tokens/core.meta.generated.js +2 -2
- package/dist/tokens/core.meta.generated.js.map +1 -1
- package/dist/tokens/index.d.ts +1029 -1104
- package/dist/tokens/index.js +1031 -1106
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/palette.generated.js +2 -2
- package/dist/tokens/palette.generated.js.map +1 -1
- package/dist/tokens.json +605 -755
- package/dist/vendor/.bun/@dnd-kit_core@6.3.1_6f4b9a1cfb20c0ae/vendor/@dnd-kit/core/dist/core.esm.js +385 -340
- package/dist/vendor/.bun/@dnd-kit_core@6.3.1_6f4b9a1cfb20c0ae/vendor/@dnd-kit/core/dist/core.esm.js.map +1 -1
- package/dist/vendor/.bun/@dnd-kit_sortable@10.0.0_1d291640e1250bbe/vendor/@dnd-kit/sortable/dist/sortable.esm.js +344 -229
- package/dist/vendor/.bun/@dnd-kit_sortable@10.0.0_1d291640e1250bbe/vendor/@dnd-kit/sortable/dist/sortable.esm.js.map +1 -1
- package/dist/vendor/.bun/@dnd-kit_utilities@3.2.2_62547eec5a2188e3/vendor/@dnd-kit/utilities/dist/utilities.esm.js +1 -1
- package/dist/vendor/.bun/@tanstack_react-virtual@3.11.2_6f4b9a1cfb20c0ae/vendor/@tanstack/react-virtual/dist/esm/index.js +36 -0
- package/dist/vendor/.bun/@tanstack_react-virtual@3.11.2_6f4b9a1cfb20c0ae/vendor/@tanstack/react-virtual/dist/esm/index.js.map +1 -0
- package/dist/vendor/.bun/@tanstack_virtual-core@3.11.2/vendor/@tanstack/virtual-core/dist/esm/index.js +450 -0
- package/dist/vendor/.bun/@tanstack_virtual-core@3.11.2/vendor/@tanstack/virtual-core/dist/esm/index.js.map +1 -0
- package/dist/vendor/.bun/@tanstack_virtual-core@3.11.2/vendor/@tanstack/virtual-core/dist/esm/utils.js +50 -0
- package/dist/vendor/.bun/@tanstack_virtual-core@3.11.2/vendor/@tanstack/virtual-core/dist/esm/utils.js.map +1 -0
- package/package.json +5 -3
|
@@ -1,103 +1,106 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import * as
|
|
3
|
-
import { SLOT_ATTR as
|
|
4
|
-
import { Field as
|
|
5
|
-
import { makeZenithStyles as
|
|
6
|
-
import { DateTimePickerRoot as
|
|
7
|
-
import { DateTimePickerInput as
|
|
8
|
-
import { DateTimePickerPopover as
|
|
9
|
-
import { DateTimePickerPanel as
|
|
10
|
-
const
|
|
1
|
+
import { jsx as e, jsxs as s } from "react/jsx-runtime";
|
|
2
|
+
import * as o from "react";
|
|
3
|
+
import { SLOT_ATTR as w, mergeClasses as z } from "@epilot/zenith-runtime/v1";
|
|
4
|
+
import { Field as G, FieldLabel as H, FieldError as J } from "../field/field.js";
|
|
5
|
+
import { makeZenithStyles as K } from "../../styles/make-styles.js";
|
|
6
|
+
import { DateTimePickerRoot as Q } from "./date-time-picker-context.js";
|
|
7
|
+
import { DateTimePickerLabelProvider as U, DateTimePickerInput as W } from "./date-time-picker-input.js";
|
|
8
|
+
import { DateTimePickerPopover as X } from "./date-time-picker-popover.js";
|
|
9
|
+
import { DateTimePickerPanel as Y } from "./date-time-picker-panel.js";
|
|
10
|
+
const $ = K({
|
|
11
11
|
root: {
|
|
12
12
|
width: "100%"
|
|
13
13
|
}
|
|
14
|
-
}),
|
|
14
|
+
}), se = o.forwardRef(
|
|
15
15
|
function({
|
|
16
|
-
value:
|
|
17
|
-
onChange:
|
|
18
|
-
onBlur:
|
|
19
|
-
disabled:
|
|
20
|
-
disablePast:
|
|
21
|
-
label:
|
|
22
|
-
error:
|
|
23
|
-
placeholder:
|
|
24
|
-
format:
|
|
25
|
-
locale:
|
|
26
|
-
className:
|
|
27
|
-
keyboardIcon:
|
|
28
|
-
okLabel:
|
|
29
|
-
cancelLabel:
|
|
30
|
-
inputAriaLabel:
|
|
31
|
-
openPickerAriaLabel:
|
|
32
|
-
previousMonthLabel:
|
|
33
|
-
nextMonthLabel:
|
|
34
|
-
hoursLabel:
|
|
35
|
-
minutesLabel:
|
|
36
|
-
showTodayButton:
|
|
37
|
-
todayLabel:
|
|
38
|
-
showWeekNumbers:
|
|
39
|
-
testId:
|
|
40
|
-
currentTimeInTimezone:
|
|
41
|
-
timePickerPosition:
|
|
42
|
-
showTimePicker:
|
|
43
|
-
editable:
|
|
44
|
-
iconPosition:
|
|
45
|
-
minuteStep:
|
|
46
|
-
},
|
|
47
|
-
const
|
|
16
|
+
value: a,
|
|
17
|
+
onChange: c,
|
|
18
|
+
onBlur: n,
|
|
19
|
+
disabled: f = !1,
|
|
20
|
+
disablePast: p = !1,
|
|
21
|
+
label: t,
|
|
22
|
+
error: r,
|
|
23
|
+
placeholder: h,
|
|
24
|
+
format: y,
|
|
25
|
+
locale: u,
|
|
26
|
+
className: v,
|
|
27
|
+
keyboardIcon: P,
|
|
28
|
+
okLabel: k,
|
|
29
|
+
cancelLabel: T,
|
|
30
|
+
inputAriaLabel: i,
|
|
31
|
+
openPickerAriaLabel: D,
|
|
32
|
+
previousMonthLabel: F,
|
|
33
|
+
nextMonthLabel: I,
|
|
34
|
+
hoursLabel: M,
|
|
35
|
+
minutesLabel: g,
|
|
36
|
+
showTodayButton: R,
|
|
37
|
+
todayLabel: x,
|
|
38
|
+
showWeekNumbers: S,
|
|
39
|
+
testId: j,
|
|
40
|
+
currentTimeInTimezone: L,
|
|
41
|
+
timePickerPosition: B,
|
|
42
|
+
showTimePicker: d = !0,
|
|
43
|
+
editable: C,
|
|
44
|
+
iconPosition: E,
|
|
45
|
+
minuteStep: N
|
|
46
|
+
}, O) {
|
|
47
|
+
const V = $(), Z = r ? "destructive" : "highlight", m = o.useId(), l = o.useId(), _ = o.useMemo(
|
|
48
|
+
() => t ? { inputId: m, labelId: l, namedByLabel: i === void 0 } : null,
|
|
49
|
+
[t, m, l, i]
|
|
50
|
+
), b = y ?? (d ? void 0 : "dd/MM/yyyy"), q = h ?? (d ? void 0 : "dd/MM/yyyy");
|
|
48
51
|
return /* @__PURE__ */ e(
|
|
49
|
-
|
|
52
|
+
Q,
|
|
50
53
|
{
|
|
51
|
-
currentTimeInTimezone:
|
|
52
|
-
disabled:
|
|
53
|
-
disablePast:
|
|
54
|
-
format:
|
|
55
|
-
locale:
|
|
56
|
-
onBlur:
|
|
57
|
-
onChange:
|
|
58
|
-
value:
|
|
59
|
-
children: /* @__PURE__ */
|
|
60
|
-
|
|
54
|
+
currentTimeInTimezone: L,
|
|
55
|
+
disabled: f,
|
|
56
|
+
disablePast: p,
|
|
57
|
+
format: b,
|
|
58
|
+
locale: u,
|
|
59
|
+
onBlur: n,
|
|
60
|
+
onChange: c,
|
|
61
|
+
value: a,
|
|
62
|
+
children: /* @__PURE__ */ s(
|
|
63
|
+
G,
|
|
61
64
|
{
|
|
62
|
-
className:
|
|
65
|
+
className: z(V.root, v),
|
|
63
66
|
"data-slot": "datetimepicker",
|
|
64
|
-
[
|
|
65
|
-
ref:
|
|
66
|
-
variant:
|
|
67
|
+
[w]: "datetimepicker",
|
|
68
|
+
ref: O,
|
|
69
|
+
variant: Z,
|
|
67
70
|
children: [
|
|
68
|
-
|
|
69
|
-
/* @__PURE__ */
|
|
71
|
+
t && /* @__PURE__ */ e(H, { id: l, htmlFor: m, children: t }),
|
|
72
|
+
/* @__PURE__ */ e(U, { value: _, children: /* @__PURE__ */ s(X, { children: [
|
|
70
73
|
/* @__PURE__ */ e(
|
|
71
|
-
|
|
74
|
+
W,
|
|
72
75
|
{
|
|
73
|
-
editable:
|
|
74
|
-
iconPosition:
|
|
75
|
-
inputAriaLabel:
|
|
76
|
-
keyboardIcon:
|
|
77
|
-
openPickerAriaLabel:
|
|
78
|
-
placeholder:
|
|
79
|
-
testId:
|
|
76
|
+
editable: C,
|
|
77
|
+
iconPosition: E,
|
|
78
|
+
inputAriaLabel: i,
|
|
79
|
+
keyboardIcon: P,
|
|
80
|
+
openPickerAriaLabel: D,
|
|
81
|
+
placeholder: q,
|
|
82
|
+
testId: j
|
|
80
83
|
}
|
|
81
84
|
),
|
|
82
85
|
/* @__PURE__ */ e(
|
|
83
|
-
|
|
86
|
+
Y,
|
|
84
87
|
{
|
|
85
|
-
cancelLabel:
|
|
86
|
-
hoursLabel:
|
|
87
|
-
minuteStep:
|
|
88
|
-
minutesLabel:
|
|
89
|
-
nextMonthLabel:
|
|
90
|
-
okLabel:
|
|
91
|
-
previousMonthLabel:
|
|
92
|
-
showTimePicker:
|
|
93
|
-
showTodayButton:
|
|
94
|
-
showWeekNumbers:
|
|
95
|
-
timePickerPosition:
|
|
96
|
-
todayLabel:
|
|
88
|
+
cancelLabel: T,
|
|
89
|
+
hoursLabel: M,
|
|
90
|
+
minuteStep: N,
|
|
91
|
+
minutesLabel: g,
|
|
92
|
+
nextMonthLabel: I,
|
|
93
|
+
okLabel: k,
|
|
94
|
+
previousMonthLabel: F,
|
|
95
|
+
showTimePicker: d,
|
|
96
|
+
showTodayButton: R,
|
|
97
|
+
showWeekNumbers: S,
|
|
98
|
+
timePickerPosition: B,
|
|
99
|
+
todayLabel: x
|
|
97
100
|
}
|
|
98
101
|
)
|
|
99
|
-
] }),
|
|
100
|
-
|
|
102
|
+
] }) }),
|
|
103
|
+
r && /* @__PURE__ */ e(J, { children: r })
|
|
101
104
|
]
|
|
102
105
|
}
|
|
103
106
|
)
|
|
@@ -106,10 +109,10 @@ const Q = B({
|
|
|
106
109
|
}
|
|
107
110
|
);
|
|
108
111
|
export {
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
112
|
+
se as DateTimePicker,
|
|
113
|
+
W as DateTimePickerInput,
|
|
114
|
+
Y as DateTimePickerPanel,
|
|
115
|
+
X as DateTimePickerPopover,
|
|
116
|
+
Q as DateTimePickerRoot
|
|
114
117
|
};
|
|
115
118
|
//# sourceMappingURL=date-time-picker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-time-picker.js","sources":["../../../src/components/date-time-picker/date-time-picker.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses } from \"@epilot/zenith-runtime/v1\"\n\nimport { Field, FieldError, FieldLabel } from \"../field/field\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\n\nimport { DateTimePickerRoot } from \"./date-time-picker-context\"\nimport type { DateTimePickerRootProps } from \"./date-time-picker-context\"\nimport {
|
|
1
|
+
{"version":3,"file":"date-time-picker.js","sources":["../../../src/components/date-time-picker/date-time-picker.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses } from \"@epilot/zenith-runtime/v1\"\n\nimport { Field, FieldError, FieldLabel } from \"../field/field\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\n\nimport { DateTimePickerRoot } from \"./date-time-picker-context\"\nimport type { DateTimePickerRootProps } from \"./date-time-picker-context\"\nimport {\n DateTimePickerInput,\n DateTimePickerLabelProvider,\n} from \"./date-time-picker-input\"\nimport type { DateTimePickerInputProps } from \"./date-time-picker-input\"\nimport { DateTimePickerPopover } from \"./date-time-picker-popover\"\nimport type { DateTimePickerPopoverProps } from \"./date-time-picker-popover\"\nimport { DateTimePickerPanel } from \"./date-time-picker-panel\"\nimport type { DateTimePickerPanelProps } from \"./date-time-picker-panel\"\nimport { Calendar } from \"./calendar\"\nimport type { CalendarProps } from \"./calendar\"\nimport { TimePicker } from \"./time-picker\"\nimport type { TimePickerProps } from \"./time-picker\"\nimport type { DateTimePickerLocale } from \"./date-time-picker-utils\"\n\ntype DateTimePickerProps = {\n value: Date | null\n onChange: (date: Date | null) => void\n onBlur?: () => void\n disabled?: boolean\n disablePast?: boolean\n label?: string\n error?: string\n placeholder?: string\n format?: string\n locale?: DateTimePickerLocale\n className?: string\n keyboardIcon?: React.ReactNode\n okLabel?: string\n cancelLabel?: string\n inputAriaLabel?: string\n openPickerAriaLabel?: string\n previousMonthLabel?: string\n nextMonthLabel?: string\n hoursLabel?: string\n minutesLabel?: string\n showTodayButton?: boolean\n todayLabel?: string\n showWeekNumbers?: boolean\n testId?: string\n currentTimeInTimezone?: Date\n timePickerPosition?: \"bottom\" | \"side\"\n showTimePicker?: boolean\n editable?: boolean\n iconPosition?: \"start\" | \"end\"\n minuteStep?: number\n}\n\nconst useStyles = makeZenithStyles({\n root: {\n width: \"100%\",\n },\n})\n\nconst DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(\n function DateTimePicker(\n {\n value,\n onChange,\n onBlur,\n disabled = false,\n disablePast = false,\n label,\n error,\n placeholder,\n format,\n locale,\n className,\n keyboardIcon,\n okLabel,\n cancelLabel,\n inputAriaLabel,\n openPickerAriaLabel,\n previousMonthLabel,\n nextMonthLabel,\n hoursLabel,\n minutesLabel,\n showTodayButton,\n todayLabel,\n showWeekNumbers,\n testId,\n currentTimeInTimezone,\n timePickerPosition,\n showTimePicker = true,\n editable,\n iconPosition,\n minuteStep,\n },\n ref\n ) {\n const styles = useStyles()\n const fieldVariant = error ? \"destructive\" : \"highlight\"\n // This component renders both the label and the input, so it connects them (#16).\n const inputId = React.useId()\n const labelId = React.useId()\n const labelling = React.useMemo(\n () =>\n label\n ? { inputId, labelId, namedByLabel: inputAriaLabel === undefined }\n : null,\n [label, inputId, labelId, inputAriaLabel]\n )\n const resolvedFormat = format ?? (showTimePicker ? undefined : \"dd/MM/yyyy\")\n const resolvedPlaceholder =\n placeholder ?? (showTimePicker ? undefined : \"dd/MM/yyyy\")\n\n return (\n <DateTimePickerRoot\n currentTimeInTimezone={currentTimeInTimezone}\n disabled={disabled}\n disablePast={disablePast}\n format={resolvedFormat}\n locale={locale}\n onBlur={onBlur}\n onChange={onChange}\n value={value}\n >\n <Field\n className={mergeClasses(styles.root, className)}\n data-slot=\"datetimepicker\"\n {...{ [SLOT_ATTR]: \"datetimepicker\" }}\n ref={ref}\n variant={fieldVariant}\n >\n {label && (\n <FieldLabel id={labelId} htmlFor={inputId}>\n {label}\n </FieldLabel>\n )}\n <DateTimePickerLabelProvider value={labelling}>\n <DateTimePickerPopover>\n <DateTimePickerInput\n editable={editable}\n iconPosition={iconPosition}\n inputAriaLabel={inputAriaLabel}\n keyboardIcon={keyboardIcon}\n openPickerAriaLabel={openPickerAriaLabel}\n placeholder={resolvedPlaceholder}\n testId={testId}\n />\n <DateTimePickerPanel\n cancelLabel={cancelLabel}\n hoursLabel={hoursLabel}\n minuteStep={minuteStep}\n minutesLabel={minutesLabel}\n nextMonthLabel={nextMonthLabel}\n okLabel={okLabel}\n previousMonthLabel={previousMonthLabel}\n showTimePicker={showTimePicker}\n showTodayButton={showTodayButton}\n showWeekNumbers={showWeekNumbers}\n timePickerPosition={timePickerPosition}\n todayLabel={todayLabel}\n />\n </DateTimePickerPopover>\n </DateTimePickerLabelProvider>\n {error && <FieldError>{error}</FieldError>}\n </Field>\n </DateTimePickerRoot>\n )\n }\n)\n\nexport {\n DateTimePicker,\n DateTimePickerRoot,\n DateTimePickerInput,\n DateTimePickerPopover,\n DateTimePickerPanel,\n Calendar,\n TimePicker,\n}\n\nexport type {\n DateTimePickerProps,\n DateTimePickerRootProps,\n DateTimePickerInputProps,\n DateTimePickerPopoverProps,\n DateTimePickerPanelProps,\n CalendarProps,\n TimePickerProps,\n DateTimePickerLocale,\n}\n"],"names":["useStyles","makeZenithStyles","DateTimePicker","React","value","onChange","onBlur","disabled","disablePast","label","error","placeholder","format","locale","className","keyboardIcon","okLabel","cancelLabel","inputAriaLabel","openPickerAriaLabel","previousMonthLabel","nextMonthLabel","hoursLabel","minutesLabel","showTodayButton","todayLabel","showWeekNumbers","testId","currentTimeInTimezone","timePickerPosition","showTimePicker","editable","iconPosition","minuteStep","ref","styles","fieldVariant","inputId","labelId","labelling","resolvedFormat","resolvedPlaceholder","jsx","DateTimePickerRoot","jsxs","Field","mergeClasses","SLOT_ATTR","FieldLabel","DateTimePickerLabelProvider","DateTimePickerPopover","DateTimePickerInput","DateTimePickerPanel","FieldError"],"mappings":"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"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { jsxs as O, jsx as
|
|
1
|
+
import { jsxs as O, jsx as d } from "react/jsx-runtime";
|
|
2
2
|
import * as n from "react";
|
|
3
3
|
import { SLOT_ATTR as x, mergeClasses as h, shorthands as k } from "@epilot/zenith-runtime/v1";
|
|
4
4
|
import { makeZenithStyles as U } from "../../styles/make-styles.js";
|
|
5
|
-
import {
|
|
6
|
-
import { getHours as
|
|
7
|
-
const
|
|
5
|
+
import { accentSolidHover as V, accentContrast as _, accentSolid as z, fontWeightSemibold as F, grayA4 as G, grayA11 as L, leadingSm as X, textSm as Z, grayA8 as J, leadingBase as K, textBase as P, grayA6 as Q, radiusMd as N, grayA5 as tt, spacingElement1 as et } from "../../tokens/index.js";
|
|
6
|
+
import { getHours as rt, getMinutes as ot, updateTime as R, padNumber as nt } from "./date-time-picker-utils.js";
|
|
7
|
+
const lt = Array.from({ length: 24 }, (w, e) => e), A = U({
|
|
8
8
|
root: {
|
|
9
9
|
display: "flex",
|
|
10
10
|
flexDirection: "row",
|
|
11
11
|
alignItems: "stretch",
|
|
12
12
|
justifyContent: "center",
|
|
13
|
-
...k.gap(
|
|
13
|
+
...k.gap(et)
|
|
14
14
|
},
|
|
15
15
|
fillHeight: {
|
|
16
16
|
height: "100%"
|
|
@@ -31,8 +31,8 @@ const le = Array.from({ length: 24 }, (w, t) => t), R = U({
|
|
|
31
31
|
overflowX: "hidden",
|
|
32
32
|
width: "100%",
|
|
33
33
|
alignItems: "center",
|
|
34
|
-
...k.borderRadius(
|
|
35
|
-
...k.border("1px", "solid",
|
|
34
|
+
...k.borderRadius(N),
|
|
35
|
+
...k.border("1px", "solid", tt),
|
|
36
36
|
scrollbarWidth: "thin",
|
|
37
37
|
scrollbarColor: `${Q} transparent`
|
|
38
38
|
},
|
|
@@ -60,7 +60,7 @@ const le = Array.from({ length: 24 }, (w, t) => t), R = U({
|
|
|
60
60
|
justifyContent: "center",
|
|
61
61
|
fontSize: Z,
|
|
62
62
|
lineHeight: X,
|
|
63
|
-
...k.borderRadius(
|
|
63
|
+
...k.borderRadius(N),
|
|
64
64
|
transitionProperty: "background-color, color",
|
|
65
65
|
transitionDuration: "150ms",
|
|
66
66
|
minHeight: "2rem",
|
|
@@ -92,15 +92,15 @@ const le = Array.from({ length: 24 }, (w, t) => t), R = U({
|
|
|
92
92
|
cursor: "pointer"
|
|
93
93
|
}
|
|
94
94
|
}), H = n.memo(function({
|
|
95
|
-
value:
|
|
95
|
+
value: e,
|
|
96
96
|
isSelected: a,
|
|
97
97
|
isDisabled: l,
|
|
98
|
-
onClick:
|
|
98
|
+
onClick: m
|
|
99
99
|
}) {
|
|
100
|
-
const c =
|
|
101
|
-
l ||
|
|
102
|
-
}, [
|
|
103
|
-
return /* @__PURE__ */
|
|
100
|
+
const c = A(), f = n.useCallback(() => {
|
|
101
|
+
l || m(e);
|
|
102
|
+
}, [m, e, l]);
|
|
103
|
+
return /* @__PURE__ */ d(
|
|
104
104
|
"button",
|
|
105
105
|
{
|
|
106
106
|
"aria-disabled": l,
|
|
@@ -114,21 +114,21 @@ const le = Array.from({ length: 24 }, (w, t) => t), R = U({
|
|
|
114
114
|
"data-selected": a,
|
|
115
115
|
"data-slot": "time-button",
|
|
116
116
|
[x]: "time-button",
|
|
117
|
-
"data-value":
|
|
117
|
+
"data-value": e,
|
|
118
118
|
disabled: l,
|
|
119
119
|
onClick: f,
|
|
120
120
|
type: "button",
|
|
121
|
-
children:
|
|
121
|
+
children: nt(e)
|
|
122
122
|
}
|
|
123
123
|
);
|
|
124
124
|
});
|
|
125
125
|
H.displayName = "TimeButton";
|
|
126
|
-
const
|
|
126
|
+
const dt = n.forwardRef(
|
|
127
127
|
function({
|
|
128
|
-
value:
|
|
128
|
+
value: e,
|
|
129
129
|
onChange: a,
|
|
130
130
|
onTimeSelect: l,
|
|
131
|
-
disablePast:
|
|
131
|
+
disablePast: m = !1,
|
|
132
132
|
currentTimeInTimezone: c,
|
|
133
133
|
fillHeight: f = !1,
|
|
134
134
|
minuteStep: I = 1,
|
|
@@ -136,42 +136,42 @@ const me = n.forwardRef(
|
|
|
136
136
|
hoursLabel: W = "Hours",
|
|
137
137
|
minutesLabel: T = "Minutes"
|
|
138
138
|
}, E) {
|
|
139
|
-
const r =
|
|
140
|
-
const
|
|
141
|
-
for (let s = 0; s < 60; s += g)
|
|
142
|
-
return
|
|
143
|
-
}, [g]), u =
|
|
139
|
+
const r = A(), g = Math.max(1, Math.floor(I)), M = n.useMemo(() => {
|
|
140
|
+
const t = [];
|
|
141
|
+
for (let s = 0; s < 60; s += g) t.push(s);
|
|
142
|
+
return t;
|
|
143
|
+
}, [g]), u = e !== null ? rt(e) : -1, S = e !== null ? ot(e) : -1, p = e === null ? -1 : g === 1 ? S : Math.min(
|
|
144
144
|
M[M.length - 1],
|
|
145
145
|
Math.round(S / g) * g
|
|
146
146
|
), C = n.useRef(null), B = n.useRef(null), i = n.useMemo(
|
|
147
147
|
() => c || /* @__PURE__ */ new Date(),
|
|
148
148
|
[c]
|
|
149
|
-
), y = n.useMemo(() =>
|
|
150
|
-
(
|
|
151
|
-
[
|
|
149
|
+
), y = n.useMemo(() => e ? e.getFullYear() === i.getFullYear() && e.getMonth() === i.getMonth() && e.getDate() === i.getDate() : !1, [e, i]), b = i.getHours(), D = i.getMinutes(), Y = n.useCallback(
|
|
150
|
+
(t) => !m || !y ? !1 : t < b,
|
|
151
|
+
[m, y, b]
|
|
152
152
|
), $ = n.useCallback(
|
|
153
|
-
(
|
|
154
|
-
[
|
|
153
|
+
(t) => !m || !y ? !1 : u < b ? !0 : u === b ? t < D : !1,
|
|
154
|
+
[m, y, u, b, D]
|
|
155
155
|
), q = n.useCallback(
|
|
156
|
-
(
|
|
157
|
-
const s =
|
|
158
|
-
a(
|
|
156
|
+
(t) => {
|
|
157
|
+
const s = e || i, o = p >= 0 ? p : 0;
|
|
158
|
+
a(R(s, t, o));
|
|
159
159
|
},
|
|
160
|
-
[a,
|
|
160
|
+
[a, e, i, p]
|
|
161
161
|
), v = n.useCallback(
|
|
162
|
-
(
|
|
163
|
-
const s =
|
|
164
|
-
a(
|
|
162
|
+
(t) => {
|
|
163
|
+
const s = e || i, o = u >= 0 ? u : 0;
|
|
164
|
+
a(R(s, o, t)), l == null || l();
|
|
165
165
|
},
|
|
166
|
-
[a, l,
|
|
166
|
+
[a, l, e, i, u]
|
|
167
167
|
);
|
|
168
168
|
return n.useEffect(() => {
|
|
169
|
-
var
|
|
169
|
+
var t, s;
|
|
170
170
|
if (C.current) {
|
|
171
171
|
const o = C.current.querySelector(
|
|
172
172
|
`[data-value="${u}"]`
|
|
173
173
|
);
|
|
174
|
-
o && ((
|
|
174
|
+
o && ((t = o.scrollIntoView) == null || t.call(o, {
|
|
175
175
|
block: "center",
|
|
176
176
|
behavior: "auto"
|
|
177
177
|
}));
|
|
@@ -197,14 +197,14 @@ const me = n.forwardRef(
|
|
|
197
197
|
"data-slot": "timepicker",
|
|
198
198
|
[x]: "timepicker",
|
|
199
199
|
children: [
|
|
200
|
-
/* @__PURE__ */
|
|
200
|
+
/* @__PURE__ */ d(
|
|
201
201
|
"div",
|
|
202
202
|
{
|
|
203
203
|
className: h(
|
|
204
204
|
r.column,
|
|
205
205
|
f && r.columnFillHeight
|
|
206
206
|
),
|
|
207
|
-
children: /* @__PURE__ */
|
|
207
|
+
children: /* @__PURE__ */ d(
|
|
208
208
|
"div",
|
|
209
209
|
{
|
|
210
210
|
className: h(
|
|
@@ -216,29 +216,29 @@ const me = n.forwardRef(
|
|
|
216
216
|
role: "group",
|
|
217
217
|
[x]: "timepicker-scroll",
|
|
218
218
|
ref: C,
|
|
219
|
-
children:
|
|
219
|
+
children: lt.map((t) => /* @__PURE__ */ d(
|
|
220
220
|
H,
|
|
221
221
|
{
|
|
222
|
-
isDisabled: Y(
|
|
223
|
-
isSelected:
|
|
222
|
+
isDisabled: Y(t),
|
|
223
|
+
isSelected: t === u,
|
|
224
224
|
onClick: q,
|
|
225
|
-
value:
|
|
225
|
+
value: t
|
|
226
226
|
},
|
|
227
|
-
|
|
227
|
+
t
|
|
228
228
|
))
|
|
229
229
|
}
|
|
230
230
|
)
|
|
231
231
|
}
|
|
232
232
|
),
|
|
233
|
-
/* @__PURE__ */
|
|
234
|
-
/* @__PURE__ */
|
|
233
|
+
/* @__PURE__ */ d("div", { className: r.separator, children: ":" }),
|
|
234
|
+
/* @__PURE__ */ d(
|
|
235
235
|
"div",
|
|
236
236
|
{
|
|
237
237
|
className: h(
|
|
238
238
|
r.column,
|
|
239
239
|
f && r.columnFillHeight
|
|
240
240
|
),
|
|
241
|
-
children: /* @__PURE__ */
|
|
241
|
+
children: /* @__PURE__ */ d(
|
|
242
242
|
"div",
|
|
243
243
|
{
|
|
244
244
|
className: h(
|
|
@@ -250,15 +250,15 @@ const me = n.forwardRef(
|
|
|
250
250
|
role: "group",
|
|
251
251
|
[x]: "timepicker-scroll",
|
|
252
252
|
ref: B,
|
|
253
|
-
children: M.map((
|
|
253
|
+
children: M.map((t) => /* @__PURE__ */ d(
|
|
254
254
|
H,
|
|
255
255
|
{
|
|
256
|
-
isDisabled: $(
|
|
257
|
-
isSelected:
|
|
256
|
+
isDisabled: $(t),
|
|
257
|
+
isSelected: t === p,
|
|
258
258
|
onClick: v,
|
|
259
|
-
value:
|
|
259
|
+
value: t
|
|
260
260
|
},
|
|
261
|
-
|
|
261
|
+
t
|
|
262
262
|
))
|
|
263
263
|
}
|
|
264
264
|
)
|
|
@@ -270,6 +270,6 @@ const me = n.forwardRef(
|
|
|
270
270
|
}
|
|
271
271
|
);
|
|
272
272
|
export {
|
|
273
|
-
|
|
273
|
+
dt as TimePicker
|
|
274
274
|
};
|
|
275
275
|
//# sourceMappingURL=time-picker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"time-picker.js","sources":["../../../src/components/date-time-picker/time-picker.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nimport {\n getHours,\n getMinutes,\n padNumber,\n updateTime,\n} from \"./date-time-picker-utils\"\n\nconst HOURS = Array.from({ length: 24 }, (_, i) => i)\n\nexport type TimePickerProps = {\n value: Date | null\n onChange: (date: Date) => void\n onTimeSelect?: () => void\n disablePast?: boolean\n currentTimeInTimezone?: Date\n fillHeight?: boolean\n minuteStep?: number\n className?: string\n /**\n * Accessible name for the hours column. Pass a translated string. These are ACCESSIBLE NAMES,\n * not visible headers, and the distinction is deliberate.\n */\n hoursLabel?: string\n /** Accessible name for the minutes column. Pass a translated string. See `hoursLabel`. */\n minutesLabel?: string\n}\n\nconst useStyles = makeZenithStyles({\n root: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"stretch\",\n justifyContent: \"center\",\n ...shorthands.gap(tokens.spacingElement1),\n },\n fillHeight: {\n height: \"100%\",\n },\n column: {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n width: \"3.5rem\",\n },\n columnFillHeight: {\n minHeight: \"0\",\n },\n scroll: {\n display: \"flex\",\n flexDirection: \"column\",\n overflowY: \"auto\",\n overflowX: \"hidden\",\n width: \"100%\",\n alignItems: \"center\",\n ...shorthands.borderRadius(tokens.radiusMd),\n ...shorthands.border(\"1px\", \"solid\", tokens.grayA5),\n scrollbarWidth: \"thin\",\n scrollbarColor: `${tokens.grayA6} transparent`,\n },\n scrollFixed: {\n height: \"8rem\",\n },\n scrollFill: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: \"0%\",\n minHeight: \"0\",\n },\n separator: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: tokens.textBase,\n lineHeight: tokens.leadingBase,\n fontWeight: tokens.fontWeightSemibold,\n color: tokens.grayA8,\n },\n timeBtn: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n ...shorthands.borderRadius(tokens.radiusMd),\n transitionProperty: \"background-color, color\",\n transitionDuration: \"150ms\",\n minHeight: \"2rem\",\n width: \"100%\",\n maxWidth: \"3rem\",\n ...shorthands.border(\"0\"),\n outlineStyle: \"none\",\n },\n timeBtnDefault: {\n backgroundColor: \"transparent\",\n color: tokens.grayA11,\n \":hover\": {\n backgroundColor: tokens.grayA4,\n },\n },\n timeBtnSelected: {\n fontWeight: tokens.fontWeightSemibold,\n backgroundColor: tokens.semAccentSolid,\n color: tokens.semAccentContrast,\n \":hover\": {\n backgroundColor: tokens.semAccentSolidHover,\n },\n },\n timeBtnDisabled: {\n cursor: \"not-allowed\",\n opacity: 0.5,\n },\n timeBtnEnabled: {\n cursor: \"pointer\",\n },\n})\n\ntype TimeButtonProps = {\n value: number\n isSelected: boolean\n isDisabled: boolean\n onClick: (value: number) => void\n}\n\nconst TimeButton = React.memo(function TimeButton({\n value,\n isSelected,\n isDisabled,\n onClick,\n}: TimeButtonProps) {\n const styles = useStyles()\n const handleClick = React.useCallback(() => {\n if (!isDisabled) {\n onClick(value)\n }\n }, [onClick, value, isDisabled])\n\n return (\n <button\n aria-disabled={isDisabled}\n aria-pressed={isSelected}\n className={mergeClasses(\n styles.timeBtn,\n !isSelected && styles.timeBtnDefault,\n isSelected && styles.timeBtnSelected,\n isDisabled ? styles.timeBtnDisabled : styles.timeBtnEnabled\n )}\n data-selected={isSelected}\n data-slot=\"time-button\"\n {...{ [SLOT_ATTR]: \"time-button\" }}\n data-value={value}\n disabled={isDisabled}\n onClick={handleClick}\n type=\"button\"\n >\n {padNumber(value)}\n </button>\n )\n})\n\nTimeButton.displayName = \"TimeButton\"\n\nexport const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(\n function TimePicker(\n {\n value,\n onChange,\n onTimeSelect,\n disablePast = false,\n currentTimeInTimezone,\n fillHeight = false,\n minuteStep = 1,\n className,\n hoursLabel = \"Hours\",\n minutesLabel = \"Minutes\",\n },\n ref\n ) {\n const styles = useStyles()\n const step = Math.max(1, Math.floor(minuteStep))\n\n // Enumerate buckets 0, step, 2·step… stopping at <60 so a step that\n // doesn't divide 60 evenly (e.g. 7) can never produce an out-of-range\n // value like 63.\n const MINUTES = React.useMemo(() => {\n const buckets: number[] = []\n for (let m = 0; m < 60; m += step) buckets.push(m)\n\n return buckets\n }, [step])\n\n const selectedHour = value !== null ? getHours(value) : -1\n const rawMinute = value !== null ? getMinutes(value) : -1\n const selectedMinute =\n value === null\n ? -1\n : step === 1\n ? rawMinute\n : Math.min(\n MINUTES[MINUTES.length - 1],\n Math.round(rawMinute / step) * step\n )\n\n const hoursRef = React.useRef<HTMLDivElement>(null)\n const minutesRef = React.useRef<HTMLDivElement>(null)\n\n const now = React.useMemo(\n () => currentTimeInTimezone || new Date(),\n [currentTimeInTimezone]\n )\n const isToday = React.useMemo(() => {\n if (!value) return false\n\n return (\n value.getFullYear() === now.getFullYear() &&\n value.getMonth() === now.getMonth() &&\n value.getDate() === now.getDate()\n )\n }, [value, now])\n\n const currentHour = now.getHours()\n const currentMinute = now.getMinutes()\n\n const isHourDisabled = React.useCallback(\n (hour: number) => {\n if (!disablePast || !isToday) return false\n\n return hour < currentHour\n },\n [disablePast, isToday, currentHour]\n )\n\n const isMinuteDisabled = React.useCallback(\n (minute: number) => {\n if (!disablePast || !isToday) return false\n if (selectedHour < currentHour) return true\n if (selectedHour === currentHour) return minute < currentMinute\n\n return false\n },\n [disablePast, isToday, selectedHour, currentHour, currentMinute]\n )\n\n const handleHourChange = React.useCallback(\n (hour: number) => {\n const base = value || now\n const minute = selectedMinute >= 0 ? selectedMinute : 0\n\n onChange(updateTime(base, hour, minute))\n },\n [onChange, value, now, selectedMinute]\n )\n\n const handleMinuteChange = React.useCallback(\n (minute: number) => {\n const base = value || now\n const hour = selectedHour >= 0 ? selectedHour : 0\n\n onChange(updateTime(base, hour, minute))\n onTimeSelect?.()\n },\n [onChange, onTimeSelect, value, now, selectedHour]\n )\n\n React.useEffect(() => {\n if (hoursRef.current) {\n const selectedElement = hoursRef.current.querySelector(\n `[data-value=\"${selectedHour}\"]`\n )\n\n if (selectedElement) {\n selectedElement.scrollIntoView?.({\n block: \"center\",\n behavior: \"auto\",\n })\n }\n }\n if (minutesRef.current) {\n const selectedElement = minutesRef.current.querySelector(\n `[data-value=\"${selectedMinute}\"]`\n )\n\n if (selectedElement) {\n selectedElement.scrollIntoView?.({\n block: \"center\",\n behavior: \"auto\",\n })\n }\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <div\n ref={ref}\n className={mergeClasses(\n styles.root,\n fillHeight && styles.fillHeight,\n className\n )}\n data-slot=\"timepicker\"\n {...{ [SLOT_ATTR]: \"timepicker\" }}\n >\n <div\n className={mergeClasses(\n styles.column,\n fillHeight && styles.columnFillHeight\n )}\n >\n <div\n className={mergeClasses(\n styles.scroll,\n fillHeight ? styles.scrollFill : styles.scrollFixed\n )}\n aria-label={hoursLabel}\n data-slot=\"timepicker-scroll\"\n role=\"group\"\n {...{ [SLOT_ATTR]: \"timepicker-scroll\" }}\n ref={hoursRef}\n >\n {HOURS.map((hour) => (\n <TimeButton\n isDisabled={isHourDisabled(hour)}\n isSelected={hour === selectedHour}\n key={hour}\n onClick={handleHourChange}\n value={hour}\n />\n ))}\n </div>\n </div>\n\n <div className={styles.separator}>:</div>\n\n <div\n className={mergeClasses(\n styles.column,\n fillHeight && styles.columnFillHeight\n )}\n >\n <div\n className={mergeClasses(\n styles.scroll,\n fillHeight ? styles.scrollFill : styles.scrollFixed\n )}\n aria-label={minutesLabel}\n data-slot=\"timepicker-scroll\"\n role=\"group\"\n {...{ [SLOT_ATTR]: \"timepicker-scroll\" }}\n ref={minutesRef}\n >\n {MINUTES.map((minute) => (\n <TimeButton\n isDisabled={isMinuteDisabled(minute)}\n isSelected={minute === selectedMinute}\n key={minute}\n onClick={handleMinuteChange}\n value={minute}\n />\n ))}\n </div>\n </div>\n </div>\n )\n }\n)\n"],"names":["HOURS","_","i","useStyles","makeZenithStyles","shorthands","tokens.spacingElement1","tokens.radiusMd","tokens.grayA5","tokens.grayA6","tokens.textBase","tokens.leadingBase","tokens.fontWeightSemibold","tokens.grayA8","tokens.textSm","tokens.leadingSm","tokens.grayA11","tokens.grayA4","tokens.semAccentSolid","tokens.semAccentContrast","tokens.semAccentSolidHover","TimeButton","React","value","isSelected","isDisabled","onClick","styles","handleClick","jsx","mergeClasses","SLOT_ATTR","TimePicker","onChange","onTimeSelect","disablePast","currentTimeInTimezone","fillHeight","minuteStep","className","hoursLabel","minutesLabel","ref","step","MINUTES","buckets","m","selectedHour","getHours","rawMinute","getMinutes","selectedMinute","hoursRef","minutesRef","now","isToday","currentHour","currentMinute","isHourDisabled","hour","isMinuteDisabled","minute","handleHourChange","base","updateTime","handleMinuteChange","selectedElement","_a","_b","jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"time-picker.js","sources":["../../../src/components/date-time-picker/time-picker.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nimport {\n getHours,\n getMinutes,\n padNumber,\n updateTime,\n} from \"./date-time-picker-utils\"\n\nconst HOURS = Array.from({ length: 24 }, (_, i) => i)\n\nexport type TimePickerProps = {\n value: Date | null\n onChange: (date: Date) => void\n onTimeSelect?: () => void\n disablePast?: boolean\n currentTimeInTimezone?: Date\n fillHeight?: boolean\n minuteStep?: number\n className?: string\n /**\n * Accessible name for the hours column. Pass a translated string. These are ACCESSIBLE NAMES,\n * not visible headers, and the distinction is deliberate.\n */\n hoursLabel?: string\n /** Accessible name for the minutes column. Pass a translated string. See `hoursLabel`. */\n minutesLabel?: string\n}\n\nconst useStyles = makeZenithStyles({\n root: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"stretch\",\n justifyContent: \"center\",\n ...shorthands.gap(tokens.spacingElement1),\n },\n fillHeight: {\n height: \"100%\",\n },\n column: {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n width: \"3.5rem\",\n },\n columnFillHeight: {\n minHeight: \"0\",\n },\n scroll: {\n display: \"flex\",\n flexDirection: \"column\",\n overflowY: \"auto\",\n overflowX: \"hidden\",\n width: \"100%\",\n alignItems: \"center\",\n ...shorthands.borderRadius(tokens.radiusMd),\n ...shorthands.border(\"1px\", \"solid\", tokens.grayA5),\n scrollbarWidth: \"thin\",\n scrollbarColor: `${tokens.grayA6} transparent`,\n },\n scrollFixed: {\n height: \"8rem\",\n },\n scrollFill: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: \"0%\",\n minHeight: \"0\",\n },\n separator: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: tokens.textBase,\n lineHeight: tokens.leadingBase,\n fontWeight: tokens.fontWeightSemibold,\n color: tokens.grayA8,\n },\n timeBtn: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n ...shorthands.borderRadius(tokens.radiusMd),\n transitionProperty: \"background-color, color\",\n transitionDuration: \"150ms\",\n minHeight: \"2rem\",\n width: \"100%\",\n maxWidth: \"3rem\",\n ...shorthands.border(\"0\"),\n outlineStyle: \"none\",\n },\n timeBtnDefault: {\n backgroundColor: \"transparent\",\n color: tokens.grayA11,\n \":hover\": {\n backgroundColor: tokens.grayA4,\n },\n },\n timeBtnSelected: {\n fontWeight: tokens.fontWeightSemibold,\n backgroundColor: tokens.accentSolid,\n color: tokens.accentContrast,\n \":hover\": {\n backgroundColor: tokens.accentSolidHover,\n },\n },\n timeBtnDisabled: {\n cursor: \"not-allowed\",\n opacity: 0.5,\n },\n timeBtnEnabled: {\n cursor: \"pointer\",\n },\n})\n\ntype TimeButtonProps = {\n value: number\n isSelected: boolean\n isDisabled: boolean\n onClick: (value: number) => void\n}\n\nconst TimeButton = React.memo(function TimeButton({\n value,\n isSelected,\n isDisabled,\n onClick,\n}: TimeButtonProps) {\n const styles = useStyles()\n const handleClick = React.useCallback(() => {\n if (!isDisabled) {\n onClick(value)\n }\n }, [onClick, value, isDisabled])\n\n return (\n <button\n aria-disabled={isDisabled}\n aria-pressed={isSelected}\n className={mergeClasses(\n styles.timeBtn,\n !isSelected && styles.timeBtnDefault,\n isSelected && styles.timeBtnSelected,\n isDisabled ? styles.timeBtnDisabled : styles.timeBtnEnabled\n )}\n data-selected={isSelected}\n data-slot=\"time-button\"\n {...{ [SLOT_ATTR]: \"time-button\" }}\n data-value={value}\n disabled={isDisabled}\n onClick={handleClick}\n type=\"button\"\n >\n {padNumber(value)}\n </button>\n )\n})\n\nTimeButton.displayName = \"TimeButton\"\n\nexport const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(\n function TimePicker(\n {\n value,\n onChange,\n onTimeSelect,\n disablePast = false,\n currentTimeInTimezone,\n fillHeight = false,\n minuteStep = 1,\n className,\n hoursLabel = \"Hours\",\n minutesLabel = \"Minutes\",\n },\n ref\n ) {\n const styles = useStyles()\n const step = Math.max(1, Math.floor(minuteStep))\n\n // Enumerate buckets 0, step, 2·step… stopping at <60 so a step that\n // doesn't divide 60 evenly (e.g. 7) can never produce an out-of-range\n // value like 63.\n const MINUTES = React.useMemo(() => {\n const buckets: number[] = []\n for (let m = 0; m < 60; m += step) buckets.push(m)\n\n return buckets\n }, [step])\n\n const selectedHour = value !== null ? getHours(value) : -1\n const rawMinute = value !== null ? getMinutes(value) : -1\n const selectedMinute =\n value === null\n ? -1\n : step === 1\n ? rawMinute\n : Math.min(\n MINUTES[MINUTES.length - 1],\n Math.round(rawMinute / step) * step\n )\n\n const hoursRef = React.useRef<HTMLDivElement>(null)\n const minutesRef = React.useRef<HTMLDivElement>(null)\n\n const now = React.useMemo(\n () => currentTimeInTimezone || new Date(),\n [currentTimeInTimezone]\n )\n const isToday = React.useMemo(() => {\n if (!value) return false\n\n return (\n value.getFullYear() === now.getFullYear() &&\n value.getMonth() === now.getMonth() &&\n value.getDate() === now.getDate()\n )\n }, [value, now])\n\n const currentHour = now.getHours()\n const currentMinute = now.getMinutes()\n\n const isHourDisabled = React.useCallback(\n (hour: number) => {\n if (!disablePast || !isToday) return false\n\n return hour < currentHour\n },\n [disablePast, isToday, currentHour]\n )\n\n const isMinuteDisabled = React.useCallback(\n (minute: number) => {\n if (!disablePast || !isToday) return false\n if (selectedHour < currentHour) return true\n if (selectedHour === currentHour) return minute < currentMinute\n\n return false\n },\n [disablePast, isToday, selectedHour, currentHour, currentMinute]\n )\n\n const handleHourChange = React.useCallback(\n (hour: number) => {\n const base = value || now\n const minute = selectedMinute >= 0 ? selectedMinute : 0\n\n onChange(updateTime(base, hour, minute))\n },\n [onChange, value, now, selectedMinute]\n )\n\n const handleMinuteChange = React.useCallback(\n (minute: number) => {\n const base = value || now\n const hour = selectedHour >= 0 ? selectedHour : 0\n\n onChange(updateTime(base, hour, minute))\n onTimeSelect?.()\n },\n [onChange, onTimeSelect, value, now, selectedHour]\n )\n\n React.useEffect(() => {\n if (hoursRef.current) {\n const selectedElement = hoursRef.current.querySelector(\n `[data-value=\"${selectedHour}\"]`\n )\n\n if (selectedElement) {\n selectedElement.scrollIntoView?.({\n block: \"center\",\n behavior: \"auto\",\n })\n }\n }\n if (minutesRef.current) {\n const selectedElement = minutesRef.current.querySelector(\n `[data-value=\"${selectedMinute}\"]`\n )\n\n if (selectedElement) {\n selectedElement.scrollIntoView?.({\n block: \"center\",\n behavior: \"auto\",\n })\n }\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <div\n ref={ref}\n className={mergeClasses(\n styles.root,\n fillHeight && styles.fillHeight,\n className\n )}\n data-slot=\"timepicker\"\n {...{ [SLOT_ATTR]: \"timepicker\" }}\n >\n <div\n className={mergeClasses(\n styles.column,\n fillHeight && styles.columnFillHeight\n )}\n >\n <div\n className={mergeClasses(\n styles.scroll,\n fillHeight ? styles.scrollFill : styles.scrollFixed\n )}\n aria-label={hoursLabel}\n data-slot=\"timepicker-scroll\"\n role=\"group\"\n {...{ [SLOT_ATTR]: \"timepicker-scroll\" }}\n ref={hoursRef}\n >\n {HOURS.map((hour) => (\n <TimeButton\n isDisabled={isHourDisabled(hour)}\n isSelected={hour === selectedHour}\n key={hour}\n onClick={handleHourChange}\n value={hour}\n />\n ))}\n </div>\n </div>\n\n <div className={styles.separator}>:</div>\n\n <div\n className={mergeClasses(\n styles.column,\n fillHeight && styles.columnFillHeight\n )}\n >\n <div\n className={mergeClasses(\n styles.scroll,\n fillHeight ? styles.scrollFill : styles.scrollFixed\n )}\n aria-label={minutesLabel}\n data-slot=\"timepicker-scroll\"\n role=\"group\"\n {...{ [SLOT_ATTR]: \"timepicker-scroll\" }}\n ref={minutesRef}\n >\n {MINUTES.map((minute) => (\n <TimeButton\n isDisabled={isMinuteDisabled(minute)}\n isSelected={minute === selectedMinute}\n key={minute}\n onClick={handleMinuteChange}\n value={minute}\n />\n ))}\n </div>\n </div>\n </div>\n )\n }\n)\n"],"names":["HOURS","_","i","useStyles","makeZenithStyles","shorthands","tokens.spacingElement1","tokens.radiusMd","tokens.grayA5","tokens.grayA6","tokens.textBase","tokens.leadingBase","tokens.fontWeightSemibold","tokens.grayA8","tokens.textSm","tokens.leadingSm","tokens.grayA11","tokens.grayA4","tokens.accentSolid","tokens.accentContrast","tokens.accentSolidHover","TimeButton","React","value","isSelected","isDisabled","onClick","styles","handleClick","jsx","mergeClasses","SLOT_ATTR","TimePicker","onChange","onTimeSelect","disablePast","currentTimeInTimezone","fillHeight","minuteStep","className","hoursLabel","minutesLabel","ref","step","MINUTES","buckets","m","selectedHour","getHours","rawMinute","getMinutes","selectedMinute","hoursRef","minutesRef","now","isToday","currentHour","currentMinute","isHourDisabled","hour","isMinuteDisabled","minute","handleHourChange","base","updateTime","handleMinuteChange","selectedElement","_a","_b","jsxs"],"mappings":"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"}
|