@mortenbrudvik/waveui 0.9.0 → 0.11.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 +758 -152
- package/dist/components/button/Toolbar.cjs +1 -1
- package/dist/components/button/Toolbar.cjs.map +1 -1
- package/dist/components/button/Toolbar.mjs +25 -30
- package/dist/components/button/Toolbar.mjs.map +1 -1
- package/dist/components/button/Toolbar.navigation.cjs +2 -0
- package/dist/components/button/Toolbar.navigation.cjs.map +1 -0
- package/dist/components/button/Toolbar.navigation.mjs +17 -0
- package/dist/components/button/Toolbar.navigation.mjs.map +1 -0
- package/dist/components/data-display/Avatar.cjs +1 -1
- package/dist/components/data-display/Avatar.cjs.map +1 -1
- package/dist/components/data-display/Avatar.context.cjs +2 -0
- package/dist/components/data-display/Avatar.context.cjs.map +1 -0
- package/dist/components/data-display/Avatar.context.mjs +9 -0
- package/dist/components/data-display/Avatar.context.mjs.map +1 -0
- package/dist/components/data-display/Avatar.mjs +66 -61
- package/dist/components/data-display/Avatar.mjs.map +1 -1
- package/dist/components/data-display/InteractionTag.cjs +2 -0
- package/dist/components/data-display/InteractionTag.cjs.map +1 -0
- package/dist/components/data-display/InteractionTag.mjs +234 -0
- package/dist/components/data-display/InteractionTag.mjs.map +1 -0
- package/dist/components/data-display/Tag.cjs +1 -1
- package/dist/components/data-display/Tag.cjs.map +1 -1
- package/dist/components/data-display/Tag.mjs +222 -90
- package/dist/components/data-display/Tag.mjs.map +1 -1
- package/dist/components/data-display/TagGroup.cjs +2 -0
- package/dist/components/data-display/TagGroup.cjs.map +1 -0
- package/dist/components/data-display/TagGroup.context.cjs +2 -0
- package/dist/components/data-display/TagGroup.context.cjs.map +1 -0
- package/dist/components/data-display/TagGroup.context.mjs +113 -0
- package/dist/components/data-display/TagGroup.context.mjs.map +1 -0
- package/dist/components/data-display/TagGroup.mjs +149 -0
- package/dist/components/data-display/TagGroup.mjs.map +1 -0
- package/dist/components/data-display/tagStyles.cjs +2 -0
- package/dist/components/data-display/tagStyles.cjs.map +1 -0
- package/dist/components/data-display/tagStyles.mjs +108 -0
- package/dist/components/data-display/tagStyles.mjs.map +1 -0
- package/dist/components/feedback/Toaster.cjs +1 -1
- package/dist/components/feedback/Toaster.cjs.map +1 -1
- package/dist/components/feedback/Toaster.mjs +213 -181
- package/dist/components/feedback/Toaster.mjs.map +1 -1
- package/dist/components/input/Calendar.cjs +2 -0
- package/dist/components/input/Calendar.cjs.map +1 -0
- package/dist/components/input/Calendar.mjs +352 -0
- package/dist/components/input/Calendar.mjs.map +1 -0
- package/dist/components/input/Calendar.views.cjs +2 -0
- package/dist/components/input/Calendar.views.cjs.map +1 -0
- package/dist/components/input/Calendar.views.mjs +194 -0
- package/dist/components/input/Calendar.views.mjs.map +1 -0
- package/dist/components/input/ColorArea.cjs +1 -1
- package/dist/components/input/ColorArea.cjs.map +1 -1
- package/dist/components/input/ColorArea.mjs +18 -18
- package/dist/components/input/ColorArea.mjs.map +1 -1
- package/dist/components/input/Combobox.cjs +1 -1
- package/dist/components/input/Combobox.cjs.map +1 -1
- package/dist/components/input/Combobox.expand.cjs +1 -1
- package/dist/components/input/Combobox.expand.cjs.map +1 -1
- package/dist/components/input/Combobox.expand.mjs +7 -7
- package/dist/components/input/Combobox.expand.mjs.map +1 -1
- package/dist/components/input/Combobox.mjs +232 -156
- package/dist/components/input/Combobox.mjs.map +1 -1
- package/dist/components/input/Combobox.text.cjs +2 -0
- package/dist/components/input/Combobox.text.cjs.map +1 -0
- package/dist/components/input/Combobox.text.mjs +24 -0
- package/dist/components/input/Combobox.text.mjs.map +1 -0
- package/dist/components/input/DatePicker.cjs +1 -1
- package/dist/components/input/DatePicker.cjs.map +1 -1
- package/dist/components/input/DatePicker.mjs +203 -288
- package/dist/components/input/DatePicker.mjs.map +1 -1
- package/dist/components/input/Dropdown.cjs +1 -1
- package/dist/components/input/Dropdown.cjs.map +1 -1
- package/dist/components/input/Dropdown.mjs +135 -109
- package/dist/components/input/Dropdown.mjs.map +1 -1
- package/dist/components/input/Listbox.cjs +2 -0
- package/dist/components/input/Listbox.cjs.map +1 -0
- package/dist/components/input/Listbox.mjs +134 -0
- package/dist/components/input/Listbox.mjs.map +1 -0
- package/dist/components/input/Option.cjs +1 -1
- package/dist/components/input/Option.cjs.map +1 -1
- package/dist/components/input/Option.mjs +163 -97
- package/dist/components/input/Option.mjs.map +1 -1
- package/dist/components/input/SwatchPicker.cjs +1 -1
- package/dist/components/input/SwatchPicker.cjs.map +1 -1
- package/dist/components/input/SwatchPicker.context.cjs +2 -0
- package/dist/components/input/SwatchPicker.context.cjs.map +1 -0
- package/dist/components/input/SwatchPicker.context.mjs +35 -0
- package/dist/components/input/SwatchPicker.context.mjs.map +1 -0
- package/dist/components/input/SwatchPicker.mjs +131 -103
- package/dist/components/input/SwatchPicker.mjs.map +1 -1
- package/dist/components/input/SwatchPicker.swatches.cjs +2 -0
- package/dist/components/input/SwatchPicker.swatches.cjs.map +1 -0
- package/dist/components/input/SwatchPicker.swatches.mjs +207 -0
- package/dist/components/input/SwatchPicker.swatches.mjs.map +1 -0
- package/dist/components/input/TagPicker.cjs +1 -1
- package/dist/components/input/TagPicker.cjs.map +1 -1
- package/dist/components/input/TagPicker.context.cjs +2 -0
- package/dist/components/input/TagPicker.context.cjs.map +1 -0
- package/dist/components/input/TagPicker.context.mjs +20 -0
- package/dist/components/input/TagPicker.context.mjs.map +1 -0
- package/dist/components/input/TagPicker.create.cjs +2 -0
- package/dist/components/input/TagPicker.create.cjs.map +1 -0
- package/dist/components/input/TagPicker.create.mjs +24 -0
- package/dist/components/input/TagPicker.create.mjs.map +1 -0
- package/dist/components/input/TagPicker.mjs +13 -274
- package/dist/components/input/TagPicker.mjs.map +1 -1
- package/dist/components/input/TagPicker.option.cjs +2 -0
- package/dist/components/input/TagPicker.option.cjs.map +1 -0
- package/dist/components/input/TagPicker.option.mjs +45 -0
- package/dist/components/input/TagPicker.option.mjs.map +1 -0
- package/dist/components/input/TagPicker.overflow.cjs +2 -0
- package/dist/components/input/TagPicker.overflow.cjs.map +1 -0
- package/dist/components/input/TagPicker.overflow.mjs +153 -0
- package/dist/components/input/TagPicker.overflow.mjs.map +1 -0
- package/dist/components/input/TagPicker.parts.cjs +2 -0
- package/dist/components/input/TagPicker.parts.cjs.map +1 -0
- package/dist/components/input/TagPicker.parts.mjs +425 -0
- package/dist/components/input/TagPicker.parts.mjs.map +1 -0
- package/dist/components/input/TagPicker.root.cjs +2 -0
- package/dist/components/input/TagPicker.root.cjs.map +1 -0
- package/dist/components/input/TagPicker.root.mjs +416 -0
- package/dist/components/input/TagPicker.root.mjs.map +1 -0
- package/dist/components/input/TimePicker.cjs +1 -1
- package/dist/components/input/TimePicker.cjs.map +1 -1
- package/dist/components/input/TimePicker.mjs +77 -77
- package/dist/components/input/TimePicker.mjs.map +1 -1
- package/dist/components/input/dateUtils.cjs +1 -1
- package/dist/components/input/dateUtils.cjs.map +1 -1
- package/dist/components/input/dateUtils.mjs +114 -96
- package/dist/components/input/dateUtils.mjs.map +1 -1
- package/dist/components/input/pickerLabels.cjs +2 -0
- package/dist/components/input/pickerLabels.cjs.map +1 -0
- package/dist/components/input/pickerLabels.mjs +16 -0
- package/dist/components/input/pickerLabels.mjs.map +1 -0
- package/dist/components/input/pickerValues.cjs +2 -0
- package/dist/components/input/pickerValues.cjs.map +1 -0
- package/dist/components/input/pickerValues.mjs +24 -0
- package/dist/components/input/pickerValues.mjs.map +1 -0
- package/dist/components/layout/Accordion.cjs.map +1 -1
- package/dist/components/layout/Accordion.mjs.map +1 -1
- package/dist/components/navigation/Hamburger.cjs +2 -0
- package/dist/components/navigation/Hamburger.cjs.map +1 -0
- package/dist/components/navigation/Hamburger.mjs +54 -0
- package/dist/components/navigation/Hamburger.mjs.map +1 -0
- package/dist/components/navigation/Nav.cjs +1 -1
- package/dist/components/navigation/Nav.cjs.map +1 -1
- package/dist/components/navigation/Nav.context.cjs +2 -0
- package/dist/components/navigation/Nav.context.cjs.map +1 -0
- package/dist/components/navigation/Nav.context.mjs +137 -0
- package/dist/components/navigation/Nav.context.mjs.map +1 -0
- package/dist/components/navigation/Nav.mjs +151 -258
- package/dist/components/navigation/Nav.mjs.map +1 -1
- package/dist/components/navigation/Nav.parts.cjs +2 -0
- package/dist/components/navigation/Nav.parts.cjs.map +1 -0
- package/dist/components/navigation/Nav.parts.mjs +77 -0
- package/dist/components/navigation/Nav.parts.mjs.map +1 -0
- package/dist/components/navigation/Nav.root.cjs +2 -0
- package/dist/components/navigation/Nav.root.cjs.map +1 -0
- package/dist/components/navigation/Nav.root.mjs +78 -0
- package/dist/components/navigation/Nav.root.mjs.map +1 -0
- package/dist/components/navigation/NavDrawer.cjs +2 -0
- package/dist/components/navigation/NavDrawer.cjs.map +1 -0
- package/dist/components/navigation/NavDrawer.context.cjs +2 -0
- package/dist/components/navigation/NavDrawer.context.cjs.map +1 -0
- package/dist/components/navigation/NavDrawer.context.mjs +11 -0
- package/dist/components/navigation/NavDrawer.context.mjs.map +1 -0
- package/dist/components/navigation/NavDrawer.mjs +179 -0
- package/dist/components/navigation/NavDrawer.mjs.map +1 -0
- package/dist/components/overlays/Dialog.cjs +1 -1
- package/dist/components/overlays/Dialog.cjs.map +1 -1
- package/dist/components/overlays/Dialog.mjs +190 -125
- package/dist/components/overlays/Dialog.mjs.map +1 -1
- package/dist/components/overlays/Dialog.shared.cjs +1 -1
- package/dist/components/overlays/Dialog.shared.cjs.map +1 -1
- package/dist/components/overlays/Dialog.shared.mjs +157 -81
- package/dist/components/overlays/Dialog.shared.mjs.map +1 -1
- package/dist/components/overlays/Dialog.slots.cjs +2 -0
- package/dist/components/overlays/Dialog.slots.cjs.map +1 -0
- package/dist/components/overlays/Dialog.slots.mjs +129 -0
- package/dist/components/overlays/Dialog.slots.mjs.map +1 -0
- package/dist/components/overlays/Drawer.cjs +1 -1
- package/dist/components/overlays/Drawer.cjs.map +1 -1
- package/dist/components/overlays/Drawer.context.cjs +2 -0
- package/dist/components/overlays/Drawer.context.cjs.map +1 -0
- package/dist/components/overlays/Drawer.context.mjs +29 -0
- package/dist/components/overlays/Drawer.context.mjs.map +1 -0
- package/dist/components/overlays/Drawer.mjs +12 -187
- package/dist/components/overlays/Drawer.mjs.map +1 -1
- package/dist/components/overlays/Drawer.panel.cjs +2 -0
- package/dist/components/overlays/Drawer.panel.cjs.map +1 -0
- package/dist/components/overlays/Drawer.panel.mjs +159 -0
- package/dist/components/overlays/Drawer.panel.mjs.map +1 -0
- package/dist/components/overlays/Drawer.parts.cjs +2 -0
- package/dist/components/overlays/Drawer.parts.cjs.map +1 -0
- package/dist/components/overlays/Drawer.parts.mjs +152 -0
- package/dist/components/overlays/Drawer.parts.mjs.map +1 -0
- package/dist/components/overlays/Drawer.root.cjs +2 -0
- package/dist/components/overlays/Drawer.root.cjs.map +1 -0
- package/dist/components/overlays/Drawer.root.mjs +207 -0
- package/dist/components/overlays/Drawer.root.mjs.map +1 -0
- package/dist/components/overlays/Drawer.scroll.cjs +2 -0
- package/dist/components/overlays/Drawer.scroll.cjs.map +1 -0
- package/dist/components/overlays/Drawer.scroll.mjs +42 -0
- package/dist/components/overlays/Drawer.scroll.mjs.map +1 -0
- package/dist/components/table/useGridNavigation.cjs +1 -1
- package/dist/components/table/useGridNavigation.cjs.map +1 -1
- package/dist/components/table/useGridNavigation.mjs +67 -70
- package/dist/components/table/useGridNavigation.mjs.map +1 -1
- package/dist/hooks/useActiveDescendant.cjs +2 -0
- package/dist/hooks/useActiveDescendant.cjs.map +1 -0
- package/dist/hooks/useActiveDescendant.mjs +56 -0
- package/dist/hooks/useActiveDescendant.mjs.map +1 -0
- package/dist/hooks/useDismiss.cjs.map +1 -1
- package/dist/hooks/useDismiss.mjs.map +1 -1
- package/dist/hooks/useFocusTrap.cjs +1 -1
- package/dist/hooks/useFocusTrap.cjs.map +1 -1
- package/dist/hooks/useFocusTrap.mjs +115 -98
- package/dist/hooks/useFocusTrap.mjs.map +1 -1
- package/dist/hooks/useListbox.cjs +1 -1
- package/dist/hooks/useListbox.cjs.map +1 -1
- package/dist/hooks/useListbox.mjs +250 -210
- package/dist/hooks/useListbox.mjs.map +1 -1
- package/dist/hooks/useModalLayer.cjs +1 -1
- package/dist/hooks/useModalLayer.cjs.map +1 -1
- package/dist/hooks/useModalLayer.mjs +35 -22
- package/dist/hooks/useModalLayer.mjs.map +1 -1
- package/dist/hooks/useRestoreFocus.cjs +1 -1
- package/dist/hooks/useRestoreFocus.cjs.map +1 -1
- package/dist/hooks/useRestoreFocus.mjs +91 -78
- package/dist/hooks/useRestoreFocus.mjs.map +1 -1
- package/dist/hooks/useRovingGrid.cjs +2 -0
- package/dist/hooks/useRovingGrid.cjs.map +1 -0
- package/dist/hooks/useRovingGrid.mjs +69 -0
- package/dist/hooks/useRovingGrid.mjs.map +1 -0
- package/dist/hooks/useRovingTabIndex.cjs +1 -1
- package/dist/hooks/useRovingTabIndex.cjs.map +1 -1
- package/dist/hooks/useRovingTabIndex.mjs +102 -78
- package/dist/hooks/useRovingTabIndex.mjs.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +4391 -394
- package/dist/index.d.ts +4391 -394
- package/dist/index.mjs +115 -101
- package/dist/lib/classNames.cjs +1 -1
- package/dist/lib/classNames.cjs.map +1 -1
- package/dist/lib/classNames.mjs +170 -74
- package/dist/lib/classNames.mjs.map +1 -1
- package/dist/lib/date.cjs +2 -0
- package/dist/lib/date.cjs.map +1 -0
- package/dist/lib/date.mjs +44 -0
- package/dist/lib/date.mjs.map +1 -0
- package/dist/lib/focus.cjs +1 -1
- package/dist/lib/focus.cjs.map +1 -1
- package/dist/lib/focus.mjs +5 -2
- package/dist/lib/focus.mjs.map +1 -1
- package/dist/lib/icons.cjs +1 -1
- package/dist/lib/icons.cjs.map +1 -1
- package/dist/lib/icons.mjs +13 -6
- package/dist/lib/icons.mjs.map +1 -1
- package/dist/lib/layers.cjs +1 -1
- package/dist/lib/layers.cjs.map +1 -1
- package/dist/lib/layers.mjs +53 -47
- package/dist/lib/layers.mjs.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/src/styles/tokens.css +25 -0
|
@@ -9,15 +9,15 @@ import { useMergedRefs as o } from "../../hooks/useMergedRefs.mjs";
|
|
|
9
9
|
import { useIsClient as te } from "../../hooks/useIsClient.mjs";
|
|
10
10
|
import { joinIds as ne } from "../../lib/aria.mjs";
|
|
11
11
|
import { useFieldContext as re, useFieldControl as ie } from "../../hooks/useFieldControl.mjs";
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
12
|
+
import { ListboxContext as ae, useListbox as oe, useListboxOption as s } from "../../hooks/useListbox.mjs";
|
|
13
|
+
import { useDismiss as se } from "../../hooks/useDismiss.mjs";
|
|
14
|
+
import { Portal as ce } from "../portal/Portal.mjs";
|
|
15
|
+
import { disabledStyles as le, forcedColors as ue, inputAppearanceClasses as de, inputFocus as fe, inputHeightClasses as pe, inputPaddingClasses as me, inputTextClasses as he } from "../../lib/styles.mjs";
|
|
16
|
+
import { CheckIcon as c, DismissIcon as ge } from "../../lib/icons.mjs";
|
|
17
|
+
import { useInputLook as _e } from "./inputLook.mjs";
|
|
18
|
+
import { isInvalidLook as ve } from "./Input.mjs";
|
|
19
|
+
import { useFormReset as ye } from "../../hooks/useFormReset.mjs";
|
|
20
|
+
import { HiddenInput as be } from "../internal/HiddenInput.mjs";
|
|
21
21
|
import { pickerButtonOffset as xe, pickerEndPadding as Se, pickerGlyphSize as Ce, pickerIconButtonClasses as we } from "./pickerStyles.mjs";
|
|
22
22
|
import { PickerExpandButton as Te, showsExpandButton as Ee } from "./Combobox.expand.mjs";
|
|
23
23
|
import { usePopupPosition as De } from "../../hooks/usePopupPosition.mjs";
|
|
@@ -27,16 +27,16 @@ import { jsx as f, jsxs as p } from "react/jsx-runtime";
|
|
|
27
27
|
import { flushSync as je } from "react-dom";
|
|
28
28
|
//#region src/components/input/TimePicker.tsx
|
|
29
29
|
var m = "flex cursor-pointer items-center gap-2 px-3 py-1.5 text-body-1 text-foreground hover:bg-subtle-hover data-[active]:bg-subtle-hover data-[active]:outline-2 data-[active]:outline-ring data-[active]:-outline-offset-2 data-[selected]:bg-subtle-selected data-[selected]:font-semibold", Me = d.memo(function({ value: t, label: n }) {
|
|
30
|
-
let { selected: r, optionProps: a } =
|
|
30
|
+
let { selected: r, optionProps: a } = s({
|
|
31
31
|
value: t,
|
|
32
32
|
label: n
|
|
33
33
|
});
|
|
34
34
|
return /* @__PURE__ */ p("li", {
|
|
35
35
|
...a,
|
|
36
|
-
className: e(i.option, m, r &&
|
|
36
|
+
className: e(i.option, m, r && ue.selectedContainer),
|
|
37
37
|
children: [/* @__PURE__ */ f("span", {
|
|
38
38
|
className: e(i.checkIcon, "flex h-4 w-4 shrink-0 items-center justify-center"),
|
|
39
|
-
children: r ? /* @__PURE__ */ f(
|
|
39
|
+
children: r ? /* @__PURE__ */ f(c, { size: 12 }) : null
|
|
40
40
|
}), n]
|
|
41
41
|
});
|
|
42
42
|
});
|
|
@@ -53,9 +53,9 @@ function Ie(e, t) {
|
|
|
53
53
|
return e.label.toLowerCase().startsWith(t) || e.value.startsWith(t);
|
|
54
54
|
}
|
|
55
55
|
var g = (s) => {
|
|
56
|
-
let { value:
|
|
56
|
+
let { value: ue, defaultValue: c, onValueChange: ke, onChange: m, format: g = "12h", step: _ = 30, minTime: v = "00:00", maxTime: y = "23:59", placeholder: Le = "Select a time", disabled: b = !1, size: Re, appearance: ze, readOnly: x, clearable: Be = !1, expandIcon: Ve, open: He, defaultOpen: Ue, onOpenChange: We, onInvalidInput: Ge, labels: S, name: Ke, form: qe, required: Je, autoComplete: Ye = "off", autoCapitalize: Xe, autoCorrect: Ze, maxLength: Qe, enterKeyHint: $e, inputMode: et, spellCheck: tt, autoFocus: nt, tabIndex: rt, id: it, "aria-label": at, "aria-labelledby": ot, "aria-describedby": st, "aria-invalid": ct, "aria-required": lt, "aria-errormessage": ut, "aria-details": dt, onFocus: ft, onBlur: pt, onKeyDown: mt, onKeyUp: ht, controlRef: gt, className: _t, ref: vt, ...yt } = s;
|
|
57
57
|
m !== void 0 && t("TimePicker", "onChange", "onValueChange");
|
|
58
|
-
let { size: C, appearance: w } =
|
|
58
|
+
let { size: C, appearance: w } = _e(Re, ze), [T, E] = a(ue, c ?? "", (e) => {
|
|
59
59
|
ke?.(e), m?.(e);
|
|
60
60
|
}), bt = Ae(_).valid, D = u(v), O = u(y), k = !Number.isNaN(D) && !Number.isNaN(O) && D <= O, A = d.useMemo(() => Oe(_, v, y, g), [
|
|
61
61
|
_,
|
|
@@ -92,7 +92,7 @@ var g = (s) => {
|
|
|
92
92
|
if (!e) return;
|
|
93
93
|
let t = u(e), n = Number.isNaN(t) ? null : l(t);
|
|
94
94
|
return (t) => t.value === n || Fe(t, e);
|
|
95
|
-
}, [Dt]),
|
|
95
|
+
}, [Dt]), V = (e) => {
|
|
96
96
|
let t = e.trim().toLowerCase();
|
|
97
97
|
if (!t) return null;
|
|
98
98
|
let n = u(e);
|
|
@@ -101,115 +101,115 @@ var g = (s) => {
|
|
|
101
101
|
return A.some((t) => t.value === e) ? e : null;
|
|
102
102
|
}
|
|
103
103
|
return (A.find((e) => Ie(e, t)) ?? A.find((e) => Fe(e, t)))?.value ?? null;
|
|
104
|
-
},
|
|
104
|
+
}, kt = T !== "" && A.some((e) => e.value === T), At = d.useMemo(() => T ? [T] : [], [T]), H = (e) => {
|
|
105
105
|
E(e), I(null), R(null);
|
|
106
|
-
},
|
|
107
|
-
if (!e.trim()) return
|
|
106
|
+
}, U = (e) => {
|
|
107
|
+
if (!e.trim()) return H(""), null;
|
|
108
108
|
let t = u(e);
|
|
109
|
-
return Number.isNaN(t) ? "unparseable" : !k || t < D || t > O ? "out-of-range" : (
|
|
110
|
-
},
|
|
109
|
+
return Number.isNaN(t) ? "unparseable" : !k || t < D || t > O ? "out-of-range" : (H(l(t)), null);
|
|
110
|
+
}, jt = (e, t) => {
|
|
111
111
|
R(t), Ge?.(e, t);
|
|
112
|
-
},
|
|
112
|
+
}, W = () => {
|
|
113
113
|
I(null), R(null);
|
|
114
|
-
},
|
|
115
|
-
open:
|
|
114
|
+
}, G = d.useMemo(() => B ? A.some(B) : A.length > 0, [A, B]), K = P && G, q = oe({
|
|
115
|
+
open: K,
|
|
116
116
|
onOpenChange: (e) => e ? Ot() : z(),
|
|
117
117
|
mode: "editable",
|
|
118
|
-
selectedValues:
|
|
119
|
-
onSelect: (e) =>
|
|
118
|
+
selectedValues: At,
|
|
119
|
+
onSelect: (e) => H(e),
|
|
120
120
|
items: A,
|
|
121
121
|
filter: B,
|
|
122
|
-
autoHighlight: F === null &&
|
|
122
|
+
autoHighlight: F === null && kt ? "selected" : !1,
|
|
123
123
|
idPrefix: "timepicker-listbox",
|
|
124
124
|
onClearDraft: F === null ? void 0 : () => {
|
|
125
|
-
|
|
125
|
+
W(), z();
|
|
126
126
|
}
|
|
127
|
-
}),
|
|
127
|
+
}), Mt = T ? q.getItem(T)?.label ?? h(T, g) : "", J = Be && !x && T !== "", Nt = P && !G ? A.length === 0 ? S?.noTimes ?? "No times available" : S?.noMatches ?? "No matching times" : "", Pt = d.useRef(null), Y = d.useRef(null), Ft = d.useRef(null), It = o(vt, Pt), Lt = o(gt, Y), { layerId: Rt } = se({
|
|
128
128
|
open: P,
|
|
129
129
|
onDismiss: z,
|
|
130
|
-
refs: [
|
|
131
|
-
anchorRef:
|
|
130
|
+
refs: [Ft, Pt],
|
|
131
|
+
anchorRef: Y,
|
|
132
132
|
kind: "listbox",
|
|
133
133
|
focusOutside: !0
|
|
134
|
-
}), { setReference:
|
|
134
|
+
}), { setReference: zt, setFloating: Bt, floatingProps: Vt } = De({
|
|
135
135
|
open: P,
|
|
136
136
|
side: "bottom",
|
|
137
137
|
align: "start",
|
|
138
138
|
matchReferenceWidth: !0,
|
|
139
139
|
fitViewport: !0
|
|
140
|
-
}),
|
|
140
|
+
}), Ht = o(Ft, Bt), X = re(), Ut = (Je ?? X?.required ?? !1) && !x, Wt = ee("timepicker-error"), Z = L !== null && !X?.hasErrorMessage, Gt = ie({
|
|
141
141
|
id: it,
|
|
142
142
|
"aria-label": at,
|
|
143
143
|
"aria-labelledby": ot,
|
|
144
|
-
"aria-describedby": ne(st, Z ?
|
|
144
|
+
"aria-describedby": ne(st, Z ? Wt : void 0),
|
|
145
145
|
"aria-invalid": L !== null || ct,
|
|
146
146
|
"aria-required": lt ?? Je
|
|
147
|
-
}), Kt =
|
|
148
|
-
|
|
149
|
-
E(c ?? ""),
|
|
147
|
+
}), Kt = ve(!1, Gt["aria-invalid"]);
|
|
148
|
+
ye(Y, () => {
|
|
149
|
+
E(c ?? ""), W(), z();
|
|
150
150
|
}, qe);
|
|
151
151
|
let qt = (e) => {
|
|
152
152
|
if (!j) return;
|
|
153
153
|
let t = e.target.value;
|
|
154
|
-
I(t), R(null), P || N(!0),
|
|
154
|
+
I(t), R(null), P || N(!0), q.setActiveValue(V(t));
|
|
155
155
|
}, Jt = r(mt, (e) => {
|
|
156
|
-
if (j && (
|
|
157
|
-
if (e.key === "Escape" && F === "" &&
|
|
158
|
-
e.preventDefault(),
|
|
156
|
+
if (j && (q.onKeyDown(e), !(e.defaultPrevented || e.nativeEvent.isComposing))) {
|
|
157
|
+
if (e.key === "Escape" && F === "" && Mt !== "") {
|
|
158
|
+
e.preventDefault(), W(), z();
|
|
159
159
|
return;
|
|
160
160
|
}
|
|
161
161
|
if (e.key === "Enter" && F !== null) {
|
|
162
162
|
e.preventDefault();
|
|
163
|
-
let t =
|
|
164
|
-
z(), t !== null &&
|
|
163
|
+
let t = U(F);
|
|
164
|
+
z(), t !== null && jt(F, t);
|
|
165
165
|
}
|
|
166
|
-
e.key === "Tab" && !e.shiftKey &&
|
|
166
|
+
e.key === "Tab" && !e.shiftKey && J && F !== null && !F.trim() && je(() => U(F)), e.key === "Tab" && P && !K && z();
|
|
167
167
|
}
|
|
168
|
-
}), Yt = r(ht,
|
|
169
|
-
j && !P && (Ot(), F !== null &&
|
|
168
|
+
}), Yt = r(ht, q.onKeyUp), Xt = () => {
|
|
169
|
+
j && !P && (Ot(), F !== null && q.setActiveValue(V(F)));
|
|
170
170
|
}, Zt = r(pt, () => {
|
|
171
171
|
if (!j || F === null) return;
|
|
172
|
-
let e = L === null ?
|
|
173
|
-
z(), e !== null &&
|
|
172
|
+
let e = L === null ? U(F) : null;
|
|
173
|
+
z(), e !== null && jt(F, e);
|
|
174
174
|
}), Qt = () => {
|
|
175
|
-
j && (P ? z() : Xt(),
|
|
175
|
+
j && (P ? z() : Xt(), Y.current?.focus());
|
|
176
176
|
}, $t = () => {
|
|
177
|
-
j && (
|
|
178
|
-
}, en = ne(ot,
|
|
179
|
-
...
|
|
177
|
+
j && (H(""), Y.current?.focus());
|
|
178
|
+
}, en = ne(ot, X?.labelId), tn = (t) => /* @__PURE__ */ f("ul", {
|
|
179
|
+
...q.getListboxProps(),
|
|
180
180
|
"aria-labelledby": en,
|
|
181
181
|
"aria-label": en ? void 0 : at ?? S?.list ?? "Times",
|
|
182
182
|
hidden: t || void 0,
|
|
183
183
|
className: e(i.listbox, "max-h-60 min-h-0 overflow-auto py-1 focus:outline-hidden"),
|
|
184
|
-
children:
|
|
184
|
+
children: q.items.map((e) => /* @__PURE__ */ f(Me, {
|
|
185
185
|
value: e.value,
|
|
186
186
|
label: e.label
|
|
187
187
|
}, e.value))
|
|
188
188
|
}), Q = Ee(Ve), $ = "";
|
|
189
189
|
Z && L === "unparseable" ? $ = (S?.invalidTime ?? Ne)(g === "24h" ? "HH:mm" : "h:mm AM") : Z && ($ = (S?.outOfRange ?? Pe)(s.minTime === void 0 ? void 0 : h(v, g), s.maxTime === void 0 ? void 0 : h(y, g)));
|
|
190
|
-
let nn = P ?
|
|
191
|
-
return /* @__PURE__ */ f(
|
|
192
|
-
value:
|
|
190
|
+
let nn = P ? G : A.length > 0;
|
|
191
|
+
return /* @__PURE__ */ f(ae.Provider, {
|
|
192
|
+
value: q.context,
|
|
193
193
|
children: /* @__PURE__ */ p("div", {
|
|
194
194
|
"data-size": C,
|
|
195
195
|
"data-appearance": w,
|
|
196
196
|
...yt,
|
|
197
|
-
ref:
|
|
197
|
+
ref: It,
|
|
198
198
|
className: e(i.root, "relative inline-flex flex-col", _t),
|
|
199
199
|
children: [
|
|
200
200
|
/* @__PURE__ */ p("div", {
|
|
201
|
-
ref:
|
|
201
|
+
ref: zt,
|
|
202
202
|
className: "relative flex items-center",
|
|
203
203
|
children: [
|
|
204
204
|
/* @__PURE__ */ f("input", {
|
|
205
|
-
ref:
|
|
205
|
+
ref: Lt,
|
|
206
206
|
type: "text",
|
|
207
|
-
...
|
|
208
|
-
"aria-controls": nn ?
|
|
207
|
+
...q.getComboboxProps(),
|
|
208
|
+
"aria-controls": nn ? q.listboxId : void 0,
|
|
209
209
|
...Gt,
|
|
210
210
|
"aria-errormessage": ut,
|
|
211
211
|
"aria-details": dt,
|
|
212
|
-
value: F ??
|
|
212
|
+
value: F ?? Mt,
|
|
213
213
|
onChange: qt,
|
|
214
214
|
onClick: Xt,
|
|
215
215
|
onFocus: ft,
|
|
@@ -228,23 +228,23 @@ var g = (s) => {
|
|
|
228
228
|
spellCheck: tt,
|
|
229
229
|
autoFocus: nt,
|
|
230
230
|
tabIndex: rt,
|
|
231
|
-
className: e(i.input,
|
|
231
|
+
className: e(i.input, pe[C], "w-full", me[C], he[C], de[w], "text-foreground placeholder:text-muted-foreground", fe, le, Kt && "border-destructive", Se(Number(J) + Number(Q), C))
|
|
232
232
|
}),
|
|
233
|
-
|
|
233
|
+
J && /* @__PURE__ */ f("button", {
|
|
234
234
|
type: "button",
|
|
235
235
|
"aria-label": S?.clear ?? "Clear time",
|
|
236
236
|
disabled: b,
|
|
237
237
|
onMouseDown: (e) => e.preventDefault(),
|
|
238
238
|
onClick: $t,
|
|
239
239
|
className: e(i.clearButton, we(C, w), xe(C, Q ? 2 : 1), "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", "disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100"),
|
|
240
|
-
children: /* @__PURE__ */ f(
|
|
240
|
+
children: /* @__PURE__ */ f(ge, { size: Ce(C, "icon") })
|
|
241
241
|
}),
|
|
242
242
|
Q && /* @__PURE__ */ f(Te, {
|
|
243
243
|
component: "TimePicker",
|
|
244
244
|
expandIcon: Ve,
|
|
245
245
|
label: S?.expand ?? "Show times",
|
|
246
|
-
expanded:
|
|
247
|
-
listboxId:
|
|
246
|
+
expanded: K,
|
|
247
|
+
listboxId: q.listboxId,
|
|
248
248
|
disabled: b || !!x,
|
|
249
249
|
onToggle: Qt,
|
|
250
250
|
size: C,
|
|
@@ -255,7 +255,7 @@ var g = (s) => {
|
|
|
255
255
|
]
|
|
256
256
|
}),
|
|
257
257
|
Z && /* @__PURE__ */ f("p", {
|
|
258
|
-
id:
|
|
258
|
+
id: Wt,
|
|
259
259
|
role: "alert",
|
|
260
260
|
className: e(i.errorMessage, "mt-1 text-caption-1 text-error"),
|
|
261
261
|
children: $
|
|
@@ -264,28 +264,28 @@ var g = (s) => {
|
|
|
264
264
|
/* @__PURE__ */ f("span", {
|
|
265
265
|
role: "status",
|
|
266
266
|
className: "sr-only",
|
|
267
|
-
children:
|
|
267
|
+
children: Nt
|
|
268
268
|
}),
|
|
269
|
-
/* @__PURE__ */ f(
|
|
269
|
+
/* @__PURE__ */ f(be, {
|
|
270
270
|
name: Ke,
|
|
271
271
|
form: qe,
|
|
272
272
|
disabled: b,
|
|
273
273
|
value: T,
|
|
274
274
|
type: "text",
|
|
275
|
-
required:
|
|
276
|
-
onInvalid: () =>
|
|
275
|
+
required: Ut,
|
|
276
|
+
onInvalid: () => Y.current?.focus()
|
|
277
277
|
}),
|
|
278
|
-
P && /* @__PURE__ */ f(
|
|
279
|
-
layerId:
|
|
278
|
+
P && /* @__PURE__ */ f(ce, {
|
|
279
|
+
layerId: Rt,
|
|
280
280
|
children: /* @__PURE__ */ f("div", {
|
|
281
|
-
ref:
|
|
282
|
-
...
|
|
281
|
+
ref: Ht,
|
|
282
|
+
...Vt,
|
|
283
283
|
"data-state": "open",
|
|
284
284
|
className: e(i.surface, "flex flex-col overflow-hidden rounded border border-border bg-background shadow-8"),
|
|
285
|
-
children:
|
|
285
|
+
children: G ? tn(!1) : /* @__PURE__ */ f("div", {
|
|
286
286
|
"aria-hidden": "true",
|
|
287
287
|
className: e(i.emptyMessage, "px-3 py-1.5 text-body-1 text-muted-foreground"),
|
|
288
|
-
children:
|
|
288
|
+
children: Nt
|
|
289
289
|
})
|
|
290
290
|
})
|
|
291
291
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimePicker.mjs","names":["useId","useId$1","React","OPTION_CLASSES","TimePickerOption","useListboxOption","optionProps","cn","timePickerClassNames","selected","forcedColors","CheckIcon","label","defaultInvalidTimeLabel","format","defaultOutOfRangeLabel","min","max","displayTime","minutes","timeToMinutes","value","minutesToTime","matchesQuery","item","text","startsWithQuery","TimePicker","valueProp","sizeProp","appearanceProp","openProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","rest","props","onChange","warnDeprecated","useInputLook","selectedValue","setSelectedValue","useControllable","defaultValue","onValueChange","next","stepValid","normalizeTimeStep","step","minMinutes","minTime","maxMinutes","maxTime","boundsValid","allOptions","generateTimeOptions","warnOnce","interactive","disabled","readOnly","openState","setOpen","openControlled","defaultOpen","onOpenChange","isClient","useIsClient","open","draft","setDraft","invalid","setInvalid","wasInteractive","setWasInteractive","seenValue","setSeenValue","query","openList","closeList","filter","exact","minutesToValue","getTypedActiveValue","needle","selectedInList","selectedValues","commitValue","commitDraft","rejectDraft","reason","onInvalidInput","clearDraft","hasMatches","expanded","lb","useListbox","displayLabel","showClear","clearable","statusMessage","labels","rootRef","inputRef","surfaceRef","rootRefs","useMergedRefs","ref","inputRefs","controlRef","useDismiss","usePopupPosition","surfaceRefs","setFloating","field","useFieldContext","validates","required","errorId","showOwnError","fieldProps","useFieldControl","joinIds","invalidLook","isInvalidLook","form","handleInputChange","event","handleKeyDown","composeEventHandlers","onKeyDown","flushSync","handleKeyUp","onKeyUp","handleInputClick","handleBlur","onBlur","handleExpandClick","handleClear","listboxLabelledBy","renderListbox","hidden","showExpand","showsExpandButton","expandIcon","errorMessage","listboxMounted","ListboxContext","size","appearance","className","setReference","inputHeightClasses","inputPaddingClasses","inputTextClasses","inputAppearanceClasses","inputFocus","disabledStyles","pickerEndPadding","pickerIconButtonClasses","pickerButtonOffset","DismissIcon","pickerGlyphSize","PickerExpandButton","HiddenInput","Portal","floatingProps"],"sources":["../../../src/components/input/TimePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { flushSync } from 'react-dom';\nimport { cn } from '../../lib/cn';\nimport { joinIds } from '../../lib/aria';\nimport { timePickerClassNames } from '../../lib/classNames';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { CheckIcon, DismissIcon } from '../../lib/icons';\nimport type { Slot } from '../../lib/slot';\nimport {\n disabledStyles,\n focusRing,\n forcedColors,\n inputAppearanceClasses,\n inputFocus,\n inputHeightClasses,\n inputInvalid,\n inputPaddingClasses,\n inputTextClasses,\n} from '../../lib/styles';\nimport type { CoreSize, InputAppearance } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useId } from '../../hooks/useId';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { ListboxContext, useListbox, useListboxOption } from '../../hooks/useListbox';\nimport type { ListboxItem } from '../../hooks/useListbox';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { Portal } from '../portal/Portal';\nimport { PickerExpandButton, showsExpandButton } from './Combobox.expand';\nimport {\n DEFAULT_TIME_STEP,\n generateTimeOptions,\n minutesToTime,\n minutesToValue,\n normalizeTimeStep,\n timeToMinutes,\n} from './dateUtils';\nimport { useInputLook } from './inputLook';\nimport { isInvalidLook } from './Input';\nimport {\n pickerButtonOffset,\n pickerEndPadding,\n pickerGlyphSize,\n pickerIconButtonClasses,\n} from './pickerStyles';\nimport type { RoutedHandlers } from './routedHandlers';\n\n/* ------------------------------------------------------------------ */\n/* Option */\n/* ------------------------------------------------------------------ */\n\nconst OPTION_CLASSES =\n 'flex cursor-pointer items-center gap-2 px-3 py-1.5 text-body-1 text-foreground hover:bg-subtle-hover data-[active]:bg-subtle-hover data-[active]:outline-2 data-[active]:outline-ring data-[active]:-outline-offset-2 data-[selected]:bg-subtle-selected data-[selected]:font-semibold';\n\ninterface TimePickerOptionProps {\n value: string;\n label: string;\n}\n\n/**\n * One time option. Memoized: it re-renders only when its own active/selected state changes (read\n * from the listbox store), so moving the highlight renders two options, not the whole list.\n */\nconst TimePickerOption = React.memo(function TimePickerOption({\n value,\n label,\n}: TimePickerOptionProps) {\n const { selected, optionProps } = useListboxOption<HTMLLIElement>({ value, label });\n return (\n <li\n {...optionProps}\n className={cn(\n timePickerClassNames.option,\n OPTION_CLASSES,\n selected && forcedColors.selectedContainer,\n )}\n >\n <span\n className={cn(\n timePickerClassNames.checkIcon,\n 'flex h-4 w-4 shrink-0 items-center justify-center',\n )}\n >\n {selected ? <CheckIcon size={12} /> : null}\n </span>\n {label}\n </li>\n );\n});\nTimePickerOption.displayName = 'TimePickerOption';\n\n/* ------------------------------------------------------------------ */\n/* TimePicker */\n/* ------------------------------------------------------------------ */\n\n/** Why typed text was not accepted (see {@link TimePickerProps.onInvalidInput}). */\nexport type TimePickerInvalidReason = 'unparseable' | 'out-of-range';\n\n/**\n * The TimePicker's built-in texts, for localization. Each member is optional and falls back to its\n * English default. The times themselves follow `format`.\n */\nexport interface TimePickerLabels {\n /** Name of the clear button.\n * @default 'Clear time'\n */\n clear?: string;\n /** Name of the expand button at the end of the input.\n * @default 'Show times'\n */\n expand?: string;\n /** Name of the list of times when the picker has no `aria-label`, `aria-labelledby` or Field\n * label to lend it.\n * @default 'Times'\n */\n list?: string;\n /** Status text (announced and shown in the open list) when `minTime`/`maxTime` leave no times.\n * @default 'No times available'\n */\n noTimes?: string;\n /** Status text (announced and shown in the open list) when the typed text matches no time.\n * @default 'No matching times'\n */\n noMatches?: string;\n /**\n * Message for text that is not a time. `format` is the display pattern (`'HH:mm'` or\n * `'h:mm AM'`).\n * @default (format) => `Enter a time in the format ${format}.`\n */\n invalidTime?: (format: string) => string;\n /**\n * Message for a time outside `minTime`/`maxTime`. The bounds are passed as the input shows times\n * (`format`); a bound that is not set is `undefined`.\n * @default (min, max) => `Enter a time between ${min} and ${max}.` (only `min`: `Enter a time on\n * or after ${min}.`; only `max`: `Enter a time on or before ${max}.`)\n */\n outOfRange?: (min: string | undefined, max: string | undefined) => string;\n}\n\nconst defaultInvalidTimeLabel = (format: string) => `Enter a time in the format ${format}.`;\n\nconst defaultOutOfRangeLabel = (min: string | undefined, max: string | undefined) => {\n if (min !== undefined && max !== undefined) return `Enter a time between ${min} and ${max}.`;\n if (min !== undefined) return `Enter a time on or after ${min}.`;\n return `Enter a time on or before ${max}.`;\n};\n\n/** Properties for the TimePicker component. */\nexport interface TimePickerProps extends Omit<\n React.HTMLAttributes<HTMLDivElement>,\n 'onChange' | 'defaultValue' | 'placeholder' | RoutedHandlers\n> {\n /** Controlled selected time in `HH:mm` (24-hour) format; `''` for no time. */\n value?: string;\n /**\n * Initial time for uncontrolled usage (`HH:mm`).\n * @default ''\n */\n defaultValue?: string;\n /** Called with the new `HH:mm` value (`''` when cleared) whenever the selected time changes. */\n onValueChange?: (value: string) => void;\n /**\n * @deprecated Use `onValueChange`. Still called with the new value (warns once in development).\n */\n onChange?: (value: string) => void;\n /**\n * Time display format of the input and the options.\n * @default '12h'\n */\n format?: '12h' | '24h';\n /**\n * Minutes between options. A non-finite or non-positive value falls back to 30 (development\n * warning); fractions are floored.\n * @default 30\n */\n step?: number;\n /**\n * Earliest time (inclusive): `HH:mm`, `HH:mm:ss` or `h:mm AM`.\n * @default '00:00'\n */\n minTime?: string;\n /**\n * Latest time (inclusive): `HH:mm`, `HH:mm:ss` or `h:mm AM`. Invalid or reversed bounds give no\n * options (development warning, \"No times available\", see `labels`).\n * @default '23:59'\n */\n maxTime?: string;\n /**\n * Placeholder text shown when no time is selected.\n * @default 'Select a time'\n */\n placeholder?: string;\n /**\n * Whether the time picker is disabled and non-interactive.\n * @default false\n */\n disabled?: boolean;\n /**\n * Size of the field: `small` (24px tall), `medium` (32px) or `large` (40px). Default: the\n * surrounding Field's `size`, else `WaveProvider inputDefaults.size`, else `'medium'`. The time\n * list keeps its size.\n */\n size?: CoreSize;\n /**\n * Look of the field: `outline` (a full border), `underline` (a bottom stroke only),\n * `filled-darker` or `filled-lighter` (a fill without a visible stroke: give the field a visible\n * label). Default: `WaveProvider inputDefaults.appearance`, else `'outline'`.\n */\n appearance?: InputAppearance;\n /**\n * Makes the input read-only: the list does not open and the value cannot change. Turning it (or\n * `disabled`) on while the user is typing drops the typed text.\n */\n readOnly?: boolean;\n /**\n * Whether to show a clear button when a time is selected (not shown while `readOnly`; shown\n * disabled while `disabled`). It is a tab stop after the input. Tab from erased text clears the\n * value before focus moves, so focus goes on past the clear button that disappears with it.\n * @default false\n */\n clearable?: boolean;\n /**\n * The glyph of the expand button at the end of the input (default: a chevron). The button\n * opens and closes the list without moving focus out of the input and is not a tab stop\n * (Alt+ArrowDown opens the list from the keyboard). `null` or `undefined` keep the chevron;\n * `false`, or a value that renders nothing, hides the button. Decorative content rendered\n * inside the built-in button: a `<button>` or `Button` passed here is not nested (its children\n * become the glyph, with a development warning).\n */\n expandIcon?: Slot<'span'>;\n /**\n * Controlled open state of the list (never shown while `disabled` or `readOnly`). The list\n * renders only in the browser: an open picker is closed in the server HTML and opens once it has\n * hydrated.\n */\n open?: boolean;\n /**\n * Initial open state of the list for uncontrolled usage. A picker that starts disabled or\n * read-only starts closed. The list renders only in the browser: it is closed in the server HTML\n * and opens once the picker has hydrated.\n * @default false\n */\n defaultOpen?: boolean;\n /** Called when the list opens or closes (only when the state changes). */\n onOpenChange?: (open: boolean) => void;\n /**\n * Called when edited text is not accepted on Enter or blur (once per edit): it is not a time\n * (`'unparseable'`) or lies outside `minTime`/`maxTime` (`'out-of-range'`). The text stays in the\n * input, which is marked `aria-invalid` and described by an error message (left to the\n * surrounding `Field` when it shows an error); Enter and leaving the input also close the list,\n * so it does not cover the message. Enter reports it again when pressed again.\n */\n onInvalidInput?: (text: string, reason: TimePickerInvalidReason) => void;\n /**\n * Names of the clear and expand buttons and of the list, the status texts of an empty list and\n * the error messages of rejected text, for localization. Unset members keep their English\n * defaults.\n */\n labels?: TimePickerLabels;\n /** Form field name: the `HH:mm` value is submitted under it (hidden input). */\n name?: string;\n /** Id of the `<form>` the value belongs to, when the picker is outside it. */\n form?: string;\n /**\n * Blocks form submission while no time is selected; sets `aria-required` on the input. Like a\n * native readonly input, a `readOnly` TimePicker does not block submission.\n */\n required?: boolean;\n /** Native `autocomplete` of the input. @default 'off' */\n autoComplete?: string;\n /** Native `maxlength` of the input. */\n maxLength?: number;\n /** Focus handler of the text input (the root keeps the other handlers). */\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n /** Blur handler of the text input. */\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n /** Key handler of the text input; `preventDefault()` skips the picker's own keys. */\n onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n /** Key handler of the text input. */\n onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;\n /** Ref to the text input (the `role=\"combobox\"` element); `ref` stays on the root. */\n controlRef?: React.Ref<HTMLInputElement>;\n /** Ref to the root element. */\n ref?: React.Ref<HTMLDivElement>;\n}\n\nfunction displayTime(value: string, format: '12h' | '24h'): string {\n const minutes = timeToMinutes(value);\n return Number.isNaN(minutes) ? value : minutesToTime(minutes, format);\n}\n\n/** Whether an option matches the (trimmed, lower-case) typed text: by label or `HH:mm` value. */\nfunction matchesQuery(item: ListboxItem, text: string): boolean {\n return item.label.toLowerCase().includes(text) || item.value.includes(text);\n}\n\n/** Whether an option's label or `HH:mm` value starts with the (trimmed, lower-case) typed text. */\nfunction startsWithQuery(item: ListboxItem, text: string): boolean {\n return item.label.toLowerCase().startsWith(text) || item.value.startsWith(text);\n}\n\n/**\n * A time input with a filterable list of times (APG editable combobox with list autocomplete).\n *\n * - Type to filter (by label or `HH:mm` value). A complete typed time (`2:00 PM`, `14:00`) makes\n * its own option active — not an earlier one that merely contains the text, such as `12:00 PM`\n * — and partial text makes the first option that starts with it active (`2:00 p` -> `2:00 PM`),\n * else the first one that contains it; Enter commits the active option. Enter or leaving the\n * field also commits a complete typed time that is not in the list (`9:15 AM`, `14:45`) when it\n * lies within `minTime`/`maxTime`, and erased text clears the value (as the clear button does);\n * Enter never submits the form with edited text, and both close the list. Other typed text is\n * kept: the input is marked invalid and an error message describes it (`onInvalidInput`,\n * reported once per edit) until the text is edited or replaced (an option, the clear button,\n * Escape, a form reset, a new value from the parent). Escape on a closed list reverts any edit,\n * erased text included, to the selected time.\n * - Click the input or the expand button at its end (a chevron, see `expandIcon`; not a tab stop,\n * and it leaves focus in the input), press ArrowDown/ArrowUp or type to open; the list opens\n * with every option and the selected one (when it is in the list) active and scrolled into\n * view. Without one, no option is active until ArrowDown/ArrowUp or typing, so Enter lets the\n * surrounding form submit. Escape, Tab, an outside press or focus leaving closes it. Typed text\n * kept after Escape closed the list still filters it when it reopens: a click resumes the option\n * typing made active, ArrowDown/ArrowUp start at the first/last match.\n * - `open`/`defaultOpen`/`onOpenChange` control the list. It closes when the picker becomes\n * disabled or read-only (uncontrolled `open`: it stays closed when the picker is enabled again),\n * and the text typed until then is dropped.\n * - Keys of an IME composition (its confirming Enter included) are left to the IME.\n * - `clearable` shows a clear button while a time is selected (not while read-only), a tab stop\n * after the input. Tab from erased text clears the value first, so focus moves on past the\n * picker instead of to the clear button that disappears.\n * - The value is `HH:mm` (24-hour) whatever the display `format`; values off the `step` grid or\n * outside the bounds are still displayed in `format`.\n * - **Size and appearance**: `size` resolves from its own prop, then the surrounding `Field`'s\n * `size`, then `WaveProvider inputDefaults.size`, else `'medium'`; `appearance` from its own\n * prop, then `WaveProvider inputDefaults.appearance`, else `'outline'`; both render as\n * `data-size` and `data-appearance` on the root `<div>`. The time list keeps its size.\n * - The input (`controlRef`) receives `id`, `aria-label`, `aria-labelledby`, `aria-describedby`,\n * `aria-invalid`, `aria-required`, `aria-errormessage`, `aria-details`, `tabIndex`,\n * `autoFocus`, `onFocus`/`onBlur`/`onKeyDown`/`onKeyUp` and the text input attributes\n * `autoComplete`, `autoCapitalize`, `autoCorrect`, `maxLength`, `inputMode`, `spellCheck` and\n * `enterKeyHint`. `ref`, `className`, `style`, other `aria-*` attributes and the remaining props\n * stay on the root `<div>`. Inside a `Field`, the input is labelled and described by it.\n * - `name`/`required` add a hidden input for native forms (`HH:mm`); the value resets with its form.\n * - The built-in names, status texts and error messages are English; `labels` localizes them.\n * - The open list renders only in the browser: an open list (`defaultOpen`, `open`) is closed in\n * the server HTML and opens once the picker has hydrated.\n */\nexport const TimePicker = (props: TimePickerProps) => {\n const {\n value: valueProp,\n defaultValue,\n onValueChange,\n onChange,\n format = '12h',\n step = DEFAULT_TIME_STEP,\n minTime = '00:00',\n maxTime = '23:59',\n placeholder = 'Select a time',\n disabled = false,\n size: sizeProp,\n appearance: appearanceProp,\n readOnly,\n clearable = false,\n expandIcon,\n open: openProp,\n defaultOpen,\n onOpenChange,\n onInvalidInput,\n labels,\n name,\n form,\n required,\n autoComplete = 'off',\n autoCapitalize,\n autoCorrect,\n maxLength,\n enterKeyHint,\n inputMode,\n spellCheck,\n autoFocus,\n tabIndex,\n id,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-invalid': ariaInvalid,\n 'aria-required': ariaRequired,\n 'aria-errormessage': ariaErrorMessage,\n 'aria-details': ariaDetails,\n onFocus,\n onBlur,\n onKeyDown,\n onKeyUp,\n controlRef,\n className,\n ref,\n ...rest\n } = props;\n\n if (onChange !== undefined) warnDeprecated('TimePicker', 'onChange', 'onValueChange');\n\n const { size, appearance } = useInputLook(sizeProp, appearanceProp);\n\n const [selectedValue, setSelectedValue] = useControllable<string>(\n valueProp,\n defaultValue ?? '',\n (next) => {\n onValueChange?.(next);\n onChange?.(next);\n },\n );\n\n /* ---- options, step and bounds ---------------------------------- */\n\n const stepValid = normalizeTimeStep(step).valid;\n const minMinutes = timeToMinutes(minTime);\n const maxMinutes = timeToMinutes(maxTime);\n const boundsValid =\n !Number.isNaN(minMinutes) && !Number.isNaN(maxMinutes) && minMinutes <= maxMinutes;\n const allOptions = React.useMemo(\n () => generateTimeOptions(step, minTime, maxTime, format),\n [step, minTime, maxTime, format],\n );\n\n // Once per invalid value and page (C-DEV), not once per instance and effect run.\n React.useEffect(() => {\n if (!stepValid) {\n warnOnce(\n `TimePicker:step:${String(step)}`,\n `TimePicker: \\`step\\` must be a positive number of minutes (received ${String(step)}); ` +\n `using ${DEFAULT_TIME_STEP}.`,\n );\n }\n }, [step, stepValid]);\n\n React.useEffect(() => {\n if (!boundsValid) {\n warnOnce(\n `TimePicker:bounds:${minTime}|${maxTime}`,\n `TimePicker: \\`minTime\\`/\\`maxTime\\` must be times such as \"09:00\", \"09:00:00\" or ` +\n `\"9:00 AM\" with minTime <= maxTime (received \"${minTime}\" / \"${maxTime}\"); no times are available.`,\n );\n }\n }, [minTime, maxTime, boundsValid]);\n\n /* ---- open state, draft text and query -------------------------- */\n\n const interactive = !disabled && !readOnly;\n const [openState, setOpen, openControlled] = useControllable<boolean>(\n openProp,\n // A picker that starts disabled or read-only never shows its list, so it starts closed (no\n // close to report later).\n (defaultOpen ?? false) && interactive,\n onOpenChange,\n );\n // The open list lives in a portal, which renders only in the browser: until then (the server\n // HTML, hydration) the picker shows the closed inline list and reports it closed, so\n // aria-controls and aria-activedescendant never name a missing element.\n const isClient = useIsClient();\n const open = openState && interactive && isClient;\n // A list hidden because the picker became disabled or read-only is closed for good\n // (uncontrolled), so enabling the picker again does not bring it back; onOpenChange(false)\n // reports it (a consumer callback, so from an effect). A controlled `open` stays the parent's.\n React.useEffect(() => {\n if (!interactive && openState && !openControlled) setOpen(false);\n }, [interactive, openState, openControlled, setOpen]);\n /** Typed text; `null` shows the selected time's label (draft model). */\n const [draft, setDraft] = React.useState<string | null>(null);\n /** Why the typed text was rejected (it is kept and flagged); `null` while it is not. */\n const [invalid, setInvalid] = React.useState<TimePickerInvalidReason | null>(null);\n // Locking the picker while the user types drops the typed text and its error, so no later blur\n // commits it (adjusted during render, C-HOOKS).\n const [wasInteractive, setWasInteractive] = React.useState(interactive);\n if (wasInteractive !== interactive) {\n setWasInteractive(interactive);\n if (!interactive) {\n setDraft(null);\n setInvalid(null);\n }\n }\n // A new value from the parent replaces rejected text (the picker's own commits clear it\n // themselves), so the input never shows an error next to a valid value. Text the user is still\n // typing stays.\n const [seenValue, setSeenValue] = React.useState(selectedValue);\n if (seenValue !== selectedValue) {\n setSeenValue(selectedValue);\n if (invalid !== null) {\n setDraft(null);\n setInvalid(null);\n }\n }\n /**\n * Filter text: the typed text only, never the selected time's label, so opening without an edit\n * shows every option. Typed text kept while the list is closed (Escape) keeps filtering it, so\n * a reopened list shows what the input says.\n */\n const query = draft ?? '';\n\n const openList = () => {\n if (!interactive || open) return;\n setOpen(true);\n };\n const closeList = () => setOpen(false);\n\n // A complete time in any spelling the commit accepts (`2:00pm`, `09:00 AM`, `14:00:00`) keeps its\n // own option, so it stays listed and active, as Enter and blur commit it.\n const filter = React.useMemo(() => {\n const text = query.trim().toLowerCase();\n if (!text) return undefined;\n const minutes = timeToMinutes(text);\n const exact = Number.isNaN(minutes) ? null : minutesToValue(minutes);\n return (item: ListboxItem) => item.value === exact || matchesQuery(item, text);\n }, [query]);\n\n /**\n * The option that typing `text` makes active. A complete time (`2:00 PM`, `14:00`) activates its\n * own option, never another one that merely contains the text (`12:00 PM`); when it is not in\n * the list (off-grid or out of bounds) nothing is active, so Enter commits the typed time or\n * nothing. Partial text activates the first option whose label or value starts with it (`2:00 p`\n * -> `2:00 PM`, `2` -> `2:00 AM`, not `12:00 AM`), else the first option that contains it.\n */\n const getTypedActiveValue = (text: string): string | null => {\n const needle = text.trim().toLowerCase();\n if (!needle) return null;\n const minutes = timeToMinutes(text);\n if (!Number.isNaN(minutes)) {\n const exact = minutesToValue(minutes);\n return allOptions.some((item) => item.value === exact) ? exact : null;\n }\n const match =\n allOptions.find((item) => startsWithQuery(item, needle)) ??\n allOptions.find((item) => matchesQuery(item, needle));\n return match?.value ?? null;\n };\n\n // Opening without typing activates the selected option only when it is in the list. An empty,\n // off-grid or out-of-range value activates nothing (ArrowDown/ArrowUp start at the first/last\n // option), so Enter on a freshly opened list commits nothing and the surrounding form submits.\n const selectedInList =\n selectedValue !== '' && allOptions.some((item) => item.value === selectedValue);\n\n const selectedValues = React.useMemo(\n () => (selectedValue ? [selectedValue] : []),\n [selectedValue],\n );\n\n const commitValue = (next: string) => {\n setSelectedValue(next);\n setDraft(null);\n setInvalid(null);\n };\n\n /**\n * Commits the typed text: erased text clears the value, a complete time within the bounds selects\n * it. Returns why any other text is not accepted (it is kept), else `null`.\n */\n const commitDraft = (text: string): TimePickerInvalidReason | null => {\n if (!text.trim()) {\n commitValue('');\n return null;\n }\n const minutes = timeToMinutes(text);\n if (Number.isNaN(minutes)) return 'unparseable';\n if (!boundsValid || minutes < minMinutes || minutes > maxMinutes) return 'out-of-range';\n commitValue(minutesToValue(minutes));\n return null;\n };\n\n /** Keeps rejected text, flags it and reports it. */\n const rejectDraft = (text: string, reason: TimePickerInvalidReason) => {\n setInvalid(reason);\n onInvalidInput?.(text, reason);\n };\n\n const clearDraft = () => {\n setDraft(null);\n setInvalid(null);\n };\n\n // The listbox counts as open only while it shows options: with no match nothing is displayed,\n // so `aria-expanded` is false and Escape reverts the typed text instead of closing an empty list.\n const hasMatches = React.useMemo(\n () => (filter ? allOptions.some(filter) : allOptions.length > 0),\n [allOptions, filter],\n );\n const expanded = open && hasMatches;\n\n const lb = useListbox({\n open: expanded,\n onOpenChange: (next) => (next ? openList() : closeList()),\n mode: 'editable',\n selectedValues,\n onSelect: (next) => commitValue(next),\n items: allOptions,\n filter,\n // Typing sets the active option itself (getTypedActiveValue in handleInputChange), so an exact\n // typed time wins over an earlier substring match; highlightOnFilter would force the first one.\n autoHighlight: draft === null && selectedInList ? 'selected' : false,\n idPrefix: 'timepicker-listbox',\n // Escape on a closed list reverts typed text (erased text: handleKeyDown); without a draft it is\n // left to enclosing layers.\n onClearDraft:\n draft !== null\n ? () => {\n clearDraft();\n closeList();\n }\n : undefined,\n });\n\n const displayLabel = selectedValue\n ? (lb.getItem(selectedValue)?.label ?? displayTime(selectedValue, format))\n : '';\n // Read-only pickers offer no clear action (the value cannot change).\n const showClear = clearable && !readOnly && selectedValue !== '';\n const statusMessage =\n open && !hasMatches\n ? allOptions.length === 0\n ? (labels?.noTimes ?? 'No times available')\n : (labels?.noMatches ?? 'No matching times')\n : '';\n\n /* ---- elements, dismissal, positioning --------------------------- */\n\n const rootRef = React.useRef<HTMLDivElement | null>(null);\n const inputRef = React.useRef<HTMLInputElement | null>(null);\n const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n const rootRefs = useMergedRefs<HTMLDivElement>(ref, rootRef);\n const inputRefs = useMergedRefs<HTMLInputElement>(controlRef, inputRef);\n\n const { layerId } = useDismiss({\n open,\n onDismiss: closeList,\n refs: [surfaceRef, rootRef],\n anchorRef: inputRef,\n kind: 'listbox',\n focusOutside: true,\n });\n\n const { setReference, setFloating, floatingProps } = usePopupPosition({\n open,\n side: 'bottom',\n align: 'start',\n matchReferenceWidth: true,\n fitViewport: true,\n });\n const surfaceRefs = useMergedRefs<HTMLDivElement>(surfaceRef, setFloating);\n\n /* ---- forms and Field ------------------------------------------- */\n\n const field = useFieldContext();\n const isRequired = required ?? field?.required ?? false;\n // Like a native readonly input, a read-only picker is barred from constraint validation (the\n // user could not fix it); its value is still submitted.\n const validates = isRequired && !readOnly;\n const errorId = useId('timepicker-error');\n // A Field that shows an error describes the input itself (its message is not repeated).\n const showOwnError = invalid !== null && !field?.hasErrorMessage;\n const fieldProps = useFieldControl({\n id,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': joinIds(ariaDescribedBy, showOwnError ? errorId : undefined),\n 'aria-invalid': invalid !== null ? true : ariaInvalid,\n // An explicit `required={false}` wins over a required Field, so aria-required matches\n // `isRequired`.\n 'aria-required': ariaRequired ?? required,\n });\n const invalidLook = isInvalidLook(false, fieldProps['aria-invalid']);\n\n useFormReset(\n inputRef,\n () => {\n setSelectedValue(defaultValue ?? '');\n clearDraft();\n closeList();\n },\n form,\n );\n\n /* ---- handlers --------------------------------------------------- */\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (!interactive) return;\n const text = event.target.value;\n setDraft(text);\n setInvalid(null);\n if (!open) setOpen(true);\n // Every edit re-ranks the highlight (it opens the list in the same update when closed).\n lb.setActiveValue(getTypedActiveValue(text));\n };\n\n const handleKeyDown = composeEventHandlers(\n onKeyDown,\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (!interactive) return;\n // Enter commits the active option: the exact typed time, the first match of partial text,\n // or the option moved to with the arrow keys.\n lb.onKeyDown(event);\n // Keys that belong to an IME composition (its confirming Enter) are left to the IME, as\n // useListbox leaves them.\n if (event.defaultPrevented || event.nativeEvent.isComposing) return;\n if (event.key === 'Escape' && draft === '' && displayLabel !== '') {\n // Erased text: useListbox calls onClearDraft only while the input has text, so Escape on a\n // closed list restores the selected time here (an open list was closed above). With nothing\n // to restore, Escape is left to enclosing layers.\n event.preventDefault();\n clearDraft();\n closeList();\n return;\n }\n if (event.key === 'Enter' && draft !== null) {\n // Edited text is committed (a complete time within the bounds; erased text clears) or kept\n // and flagged (reported on every Enter), never submitted with the form; untouched text\n // lets Enter submit. The list closes either way, so it does not cover the error message.\n event.preventDefault();\n const reason = commitDraft(draft);\n closeList();\n if (reason !== null) rejectDraft(draft, reason);\n }\n if (event.key === 'Tab' && !event.shiftKey && showClear && draft !== null && !draft.trim()) {\n // Erased text clears the value, and with it the clear button, the next tab stop. It is\n // settled before Tab moves focus (the blur would settle it while focus moves to that\n // button), so focus moves on to the tab stop after the picker instead of dropping to\n // <body> with the button (C-DISABLED).\n flushSync(() => commitDraft(draft));\n }\n if (event.key === 'Tab' && open && !expanded) {\n // useListbox closes the list on Tab only while it shows options. The status text shown\n // instead ('No matching times', 'No times available') closes too: the clear button, the\n // next tab stop, is inside the picker, so focus moving there does not dismiss it.\n closeList();\n }\n },\n );\n const handleKeyUp = composeEventHandlers(onKeyUp, lb.onKeyUp);\n\n const handleInputClick = () => {\n if (!interactive || open) return;\n openList();\n // Typed text kept after Escape resumes where typing left it: its matches (the filter) and the\n // option typing made active, so Enter commits the same time as before the list closed.\n if (draft !== null) lb.setActiveValue(getTypedActiveValue(draft));\n };\n\n const handleBlur = composeEventHandlers(onBlur, () => {\n if (!interactive || draft === null) return;\n // Leaving the input settles the edit as Enter does: rejected text is kept (text that was\n // already rejected is not reported again) and the list closes either way, so it does not cover\n // the error message.\n const reason = invalid === null ? commitDraft(draft) : null;\n closeList();\n if (reason !== null) rejectDraft(draft, reason);\n });\n\n // The expand button opens the list as a click in the input does (typed text kept after Escape\n // resumes its matches) and closes it; focus stays in (or returns to) the input.\n const handleExpandClick = () => {\n if (!interactive) return;\n if (open) closeList();\n else handleInputClick();\n inputRef.current?.focus();\n };\n\n const handleClear = () => {\n if (!interactive) return;\n commitValue('');\n inputRef.current?.focus();\n };\n\n /* ---- render ---------------------------------------------------- */\n\n const listboxLabelledBy = joinIds(ariaLabelledBy, field?.labelId);\n const renderListbox = (hidden: boolean) => (\n <ul\n {...lb.getListboxProps()}\n aria-labelledby={listboxLabelledBy}\n aria-label={listboxLabelledBy ? undefined : (ariaLabel ?? labels?.list ?? 'Times')}\n hidden={hidden || undefined}\n className={cn(\n timePickerClassNames.listbox,\n 'max-h-60 min-h-0 overflow-auto py-1 focus:outline-hidden',\n )}\n >\n {lb.items.map((item) => (\n <TimePickerOption key={item.value} value={item.value} label={item.label} />\n ))}\n </ul>\n );\n\n const showExpand = showsExpandButton(expandIcon);\n\n let errorMessage = '';\n if (showOwnError && invalid === 'unparseable') {\n errorMessage = (labels?.invalidTime ?? defaultInvalidTimeLabel)(\n format === '24h' ? 'HH:mm' : 'h:mm AM',\n );\n } else if (showOwnError) {\n // Bounds the consumer did not set are `undefined`, not the defaults.\n errorMessage = (labels?.outOfRange ?? defaultOutOfRangeLabel)(\n props.minTime === undefined ? undefined : displayTime(minTime, format),\n props.maxTime === undefined ? undefined : displayTime(maxTime, format),\n );\n }\n // aria-controls must name a listbox that is actually mounted. The closed list is inline only\n // while options exist; the open list is mounted only while something matches.\n const listboxMounted = open ? hasMatches : allOptions.length > 0;\n\n return (\n <ListboxContext.Provider value={lb.context}>\n <div\n data-size={size}\n data-appearance={appearance}\n {...rest}\n ref={rootRefs}\n className={cn(timePickerClassNames.root, 'relative inline-flex flex-col', className)}\n >\n <div ref={setReference} className=\"relative flex items-center\">\n <input\n ref={inputRefs}\n type=\"text\"\n {...lb.getComboboxProps()}\n aria-controls={listboxMounted ? lb.listboxId : undefined}\n {...fieldProps}\n aria-errormessage={ariaErrorMessage}\n aria-details={ariaDetails}\n value={draft ?? displayLabel}\n onChange={handleInputChange}\n onClick={handleInputClick}\n onFocus={onFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n autoComplete={autoComplete}\n autoCapitalize={autoCapitalize}\n autoCorrect={autoCorrect}\n maxLength={maxLength}\n enterKeyHint={enterKeyHint}\n inputMode={inputMode}\n spellCheck={spellCheck}\n autoFocus={autoFocus}\n tabIndex={tabIndex}\n className={cn(\n timePickerClassNames.input,\n inputHeightClasses[size],\n 'w-full',\n inputPaddingClasses[size],\n inputTextClasses[size],\n inputAppearanceClasses[appearance],\n 'text-foreground placeholder:text-muted-foreground',\n inputFocus,\n disabledStyles,\n invalidLook && inputInvalid,\n pickerEndPadding(Number(showClear) + Number(showExpand), size),\n )}\n />\n {showClear && (\n <button\n type=\"button\"\n aria-label={labels?.clear ?? 'Clear time'}\n disabled={disabled}\n // Keeps focus (and an open list) on the input while the pointer clears it.\n onMouseDown={(event) => event.preventDefault()}\n onClick={handleClear}\n className={cn(\n timePickerClassNames.clearButton,\n pickerIconButtonClasses(size, appearance),\n pickerButtonOffset(size, showExpand ? 2 : 1),\n focusRing,\n disabledStyles,\n )}\n >\n <DismissIcon size={pickerGlyphSize(size, 'icon')} />\n </button>\n )}\n {showExpand && (\n <PickerExpandButton\n component=\"TimePicker\"\n expandIcon={expandIcon}\n label={labels?.expand ?? 'Show times'}\n expanded={expanded}\n listboxId={lb.listboxId}\n disabled={disabled || !!readOnly}\n onToggle={handleExpandClick}\n size={size}\n appearance={appearance}\n className={timePickerClassNames.expandButton}\n iconClassName={timePickerClassNames.expandIcon}\n />\n )}\n </div>\n {showOwnError && (\n <p\n id={errorId}\n role=\"alert\"\n className={cn(timePickerClassNames.errorMessage, 'mt-1 text-caption-1 text-error')}\n >\n {errorMessage}\n </p>\n )}\n {!open && allOptions.length > 0 && renderListbox(true)}\n <span role=\"status\" className=\"sr-only\">\n {statusMessage}\n </span>\n <HiddenInput\n name={name}\n form={form}\n disabled={disabled}\n value={selectedValue}\n type=\"text\"\n required={validates}\n onInvalid={() => inputRef.current?.focus()}\n />\n {open && (\n <Portal layerId={layerId}>\n <div\n ref={surfaceRefs}\n {...floatingProps}\n data-state=\"open\"\n className={cn(\n timePickerClassNames.surface,\n 'flex flex-col overflow-hidden rounded border border-border bg-background shadow-8',\n )}\n >\n {hasMatches ? (\n renderListbox(false)\n ) : (\n <div\n aria-hidden=\"true\"\n className={cn(\n timePickerClassNames.emptyMessage,\n 'px-3 py-1.5 text-body-1 text-muted-foreground',\n )}\n >\n {statusMessage}\n </div>\n )}\n </div>\n </Portal>\n )}\n </div>\n </ListboxContext.Provider>\n );\n};\n\nTimePicker.displayName = 'TimePicker';\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TimePicker.mjs","names":["useId","useId$1","React","OPTION_CLASSES","TimePickerOption","useListboxOption","optionProps","cn","timePickerClassNames","selected","forcedColors","CheckIcon","label","defaultInvalidTimeLabel","format","defaultOutOfRangeLabel","min","max","displayTime","minutes","timeToMinutes","value","minutesToTime","matchesQuery","item","text","startsWithQuery","TimePicker","valueProp","sizeProp","appearanceProp","openProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","rest","props","onChange","warnDeprecated","useInputLook","selectedValue","setSelectedValue","useControllable","defaultValue","onValueChange","next","stepValid","normalizeTimeStep","step","minMinutes","minTime","maxMinutes","maxTime","boundsValid","allOptions","generateTimeOptions","warnOnce","interactive","disabled","readOnly","openState","setOpen","openControlled","defaultOpen","onOpenChange","isClient","useIsClient","open","draft","setDraft","invalid","setInvalid","wasInteractive","setWasInteractive","seenValue","setSeenValue","query","openList","closeList","filter","exact","minutesToValue","getTypedActiveValue","needle","selectedInList","selectedValues","commitValue","commitDraft","rejectDraft","reason","onInvalidInput","clearDraft","hasMatches","expanded","lb","useListbox","displayLabel","showClear","clearable","statusMessage","labels","rootRef","inputRef","surfaceRef","rootRefs","useMergedRefs","ref","inputRefs","controlRef","useDismiss","usePopupPosition","surfaceRefs","setFloating","field","useFieldContext","validates","required","errorId","showOwnError","fieldProps","useFieldControl","joinIds","invalidLook","isInvalidLook","form","handleInputChange","event","handleKeyDown","composeEventHandlers","onKeyDown","flushSync","handleKeyUp","onKeyUp","handleInputClick","handleBlur","onBlur","handleExpandClick","handleClear","listboxLabelledBy","renderListbox","hidden","showExpand","showsExpandButton","expandIcon","errorMessage","listboxMounted","ListboxContext","size","appearance","className","setReference","inputHeightClasses","inputPaddingClasses","inputTextClasses","inputAppearanceClasses","inputFocus","disabledStyles","pickerEndPadding","pickerIconButtonClasses","pickerButtonOffset","DismissIcon","pickerGlyphSize","PickerExpandButton","HiddenInput","Portal","floatingProps"],"sources":["../../../src/components/input/TimePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { flushSync } from 'react-dom';\nimport { cn } from '../../lib/cn';\nimport { joinIds } from '../../lib/aria';\nimport { timePickerClassNames } from '../../lib/classNames';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { CheckIcon, DismissIcon } from '../../lib/icons';\nimport type { Slot } from '../../lib/slot';\nimport {\n disabledStyles,\n focusRing,\n forcedColors,\n inputAppearanceClasses,\n inputFocus,\n inputHeightClasses,\n inputInvalid,\n inputPaddingClasses,\n inputTextClasses,\n} from '../../lib/styles';\nimport type { CoreSize, InputAppearance } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useId } from '../../hooks/useId';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { ListboxContext, useListbox, useListboxOption } from '../../hooks/useListbox';\nimport type { ListboxItem } from '../../hooks/useListbox';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { Portal } from '../portal/Portal';\nimport { PickerExpandButton, showsExpandButton } from './Combobox.expand';\nimport {\n DEFAULT_TIME_STEP,\n generateTimeOptions,\n minutesToTime,\n minutesToValue,\n normalizeTimeStep,\n timeToMinutes,\n} from './dateUtils';\nimport { useInputLook } from './inputLook';\nimport { isInvalidLook } from './Input';\nimport {\n pickerButtonOffset,\n pickerEndPadding,\n pickerGlyphSize,\n pickerIconButtonClasses,\n} from './pickerStyles';\nimport type { RoutedHandlers } from './routedHandlers';\n\n/* ------------------------------------------------------------------ */\n/* Option */\n/* ------------------------------------------------------------------ */\n\nconst OPTION_CLASSES =\n 'flex cursor-pointer items-center gap-2 px-3 py-1.5 text-body-1 text-foreground hover:bg-subtle-hover data-[active]:bg-subtle-hover data-[active]:outline-2 data-[active]:outline-ring data-[active]:-outline-offset-2 data-[selected]:bg-subtle-selected data-[selected]:font-semibold';\n\ninterface TimePickerOptionProps {\n value: string;\n label: string;\n}\n\n/**\n * One time option. Memoized: it re-renders only when its own active/selected state changes (read\n * from the listbox store), so moving the highlight renders two options, not the whole list.\n */\nconst TimePickerOption = React.memo(function TimePickerOption({\n value,\n label,\n}: TimePickerOptionProps) {\n const { selected, optionProps } = useListboxOption<HTMLLIElement>({ value, label });\n return (\n <li\n {...optionProps}\n className={cn(\n timePickerClassNames.option,\n OPTION_CLASSES,\n selected && forcedColors.selectedContainer,\n )}\n >\n <span\n className={cn(\n timePickerClassNames.checkIcon,\n 'flex h-4 w-4 shrink-0 items-center justify-center',\n )}\n >\n {selected ? <CheckIcon size={12} /> : null}\n </span>\n {label}\n </li>\n );\n});\nTimePickerOption.displayName = 'TimePickerOption';\n\n/* ------------------------------------------------------------------ */\n/* TimePicker */\n/* ------------------------------------------------------------------ */\n\n/** Why typed text was not accepted (see {@link TimePickerProps.onInvalidInput}). */\nexport type TimePickerInvalidReason = 'unparseable' | 'out-of-range';\n\n/**\n * The TimePicker's built-in texts, for localization. Each member is optional and falls back to its\n * English default. The times themselves follow `format`.\n */\nexport interface TimePickerLabels {\n /** Name of the clear button.\n * @default 'Clear time'\n */\n clear?: string;\n /** Name of the expand button at the end of the input.\n * @default 'Show times'\n */\n expand?: string;\n /** Name of the list of times when the picker has no `aria-label`, `aria-labelledby` or Field\n * label to lend it.\n * @default 'Times'\n */\n list?: string;\n /** Status text (announced and shown in the open list) when `minTime`/`maxTime` leave no times.\n * @default 'No times available'\n */\n noTimes?: string;\n /** Status text (announced and shown in the open list) when the typed text matches no time.\n * @default 'No matching times'\n */\n noMatches?: string;\n /**\n * Message for text that is not a time. `format` is the display pattern (`'HH:mm'` or\n * `'h:mm AM'`).\n * @default (format) => `Enter a time in the format ${format}.`\n */\n invalidTime?: (format: string) => string;\n /**\n * Message for a time outside `minTime`/`maxTime`. The bounds are passed as the input shows times\n * (`format`); a bound that is not set is `undefined`.\n * @default (min, max) => `Enter a time between ${min} and ${max}.` (only `min`: `Enter a time on\n * or after ${min}.`; only `max`: `Enter a time on or before ${max}.`)\n */\n outOfRange?: (min: string | undefined, max: string | undefined) => string;\n}\n\nconst defaultInvalidTimeLabel = (format: string) => `Enter a time in the format ${format}.`;\n\nconst defaultOutOfRangeLabel = (min: string | undefined, max: string | undefined) => {\n if (min !== undefined && max !== undefined) return `Enter a time between ${min} and ${max}.`;\n if (min !== undefined) return `Enter a time on or after ${min}.`;\n return `Enter a time on or before ${max}.`;\n};\n\n/** Properties for the TimePicker component. */\nexport interface TimePickerProps extends Omit<\n React.HTMLAttributes<HTMLDivElement>,\n 'onChange' | 'defaultValue' | 'placeholder' | RoutedHandlers\n> {\n /** Controlled selected time in `HH:mm` (24-hour) format; `''` for no time. */\n value?: string;\n /**\n * Initial time for uncontrolled usage (`HH:mm`).\n * @default ''\n */\n defaultValue?: string;\n /** Called with the new `HH:mm` value (`''` when cleared) whenever the selected time changes. */\n onValueChange?: (value: string) => void;\n /**\n * @deprecated Use `onValueChange`. Still called with the new value (warns once in development).\n */\n onChange?: (value: string) => void;\n /**\n * Time display format of the input and the options.\n * @default '12h'\n */\n format?: '12h' | '24h';\n /**\n * Minutes between options. A non-finite or non-positive value falls back to 30 (development\n * warning); fractions are floored.\n * @default 30\n */\n step?: number;\n /**\n * Earliest time (inclusive): `HH:mm`, `HH:mm:ss` or `h:mm AM`.\n * @default '00:00'\n */\n minTime?: string;\n /**\n * Latest time (inclusive): `HH:mm`, `HH:mm:ss` or `h:mm AM`. Invalid or reversed bounds give no\n * options (development warning, \"No times available\", see `labels`).\n * @default '23:59'\n */\n maxTime?: string;\n /**\n * Placeholder text shown when no time is selected.\n * @default 'Select a time'\n */\n placeholder?: string;\n /**\n * Whether the time picker is disabled and non-interactive.\n * @default false\n */\n disabled?: boolean;\n /**\n * Size of the field: `small` (24px tall), `medium` (32px) or `large` (40px). Default: the\n * surrounding Field's `size`, else `WaveProvider inputDefaults.size`, else `'medium'`. The time\n * list keeps its size.\n */\n size?: CoreSize;\n /**\n * Look of the field: `outline` (a full border), `underline` (a bottom stroke only),\n * `filled-darker` or `filled-lighter` (a fill without a visible stroke: give the field a visible\n * label). Default: `WaveProvider inputDefaults.appearance`, else `'outline'`.\n */\n appearance?: InputAppearance;\n /**\n * Makes the input read-only: the list does not open and the value cannot change. Turning it (or\n * `disabled`) on while the user is typing drops the typed text.\n */\n readOnly?: boolean;\n /**\n * Whether to show a clear button when a time is selected (not shown while `readOnly`; shown\n * disabled while `disabled`). It is a tab stop after the input. Tab from erased text clears the\n * value before focus moves, so focus goes on past the clear button that disappears with it.\n * @default false\n */\n clearable?: boolean;\n /**\n * The glyph of the expand button at the end of the input (default: a chevron). The button\n * opens and closes the list without moving focus out of the input and is not a tab stop\n * (Alt+ArrowDown opens the list from the keyboard). `null` or `undefined` keep the chevron;\n * `false`, or a value that renders nothing, hides the button. Decorative content rendered\n * inside the built-in button: a `<button>` or `Button` passed here is not nested (its children\n * become the glyph, with a development warning).\n */\n expandIcon?: Slot<'span'>;\n /**\n * Controlled open state of the list (never shown while `disabled` or `readOnly`). The list\n * renders only in the browser: an open picker is closed in the server HTML and opens once it has\n * hydrated.\n */\n open?: boolean;\n /**\n * Initial open state of the list for uncontrolled usage. A picker that starts disabled or\n * read-only starts closed. The list renders only in the browser: it is closed in the server HTML\n * and opens once the picker has hydrated.\n * @default false\n */\n defaultOpen?: boolean;\n /** Called when the list opens or closes (only when the state changes). */\n onOpenChange?: (open: boolean) => void;\n /**\n * Called when edited text is not accepted on Enter or blur (once per edit): it is not a time\n * (`'unparseable'`) or lies outside `minTime`/`maxTime` (`'out-of-range'`). The text stays in the\n * input, which is marked `aria-invalid` and described by an error message (left to the\n * surrounding `Field` when it shows an error); Enter and leaving the input also close the list,\n * so it does not cover the message. Enter reports it again when pressed again.\n */\n onInvalidInput?: (text: string, reason: TimePickerInvalidReason) => void;\n /**\n * Names of the clear and expand buttons and of the list, the status texts of an empty list and\n * the error messages of rejected text, for localization. Unset members keep their English\n * defaults.\n */\n labels?: TimePickerLabels;\n /** Form field name: the `HH:mm` value is submitted under it (hidden input). */\n name?: string;\n /** Id of the `<form>` the value belongs to, when the picker is outside it. */\n form?: string;\n /**\n * Blocks form submission while no time is selected; sets `aria-required` on the input. Like a\n * native readonly input, a `readOnly` TimePicker does not block submission.\n */\n required?: boolean;\n /** Native `autocomplete` of the input. @default 'off' */\n autoComplete?: string;\n /** Native `maxlength` of the input. */\n maxLength?: number;\n /** Focus handler of the text input (the root keeps the other handlers). */\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n /** Blur handler of the text input. */\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n /** Key handler of the text input; `preventDefault()` skips the picker's own keys. */\n onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n /** Key handler of the text input. */\n onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;\n /** Ref to the text input (the `role=\"combobox\"` element); `ref` stays on the root. */\n controlRef?: React.Ref<HTMLInputElement>;\n /** Ref to the root element. */\n ref?: React.Ref<HTMLDivElement>;\n}\n\nfunction displayTime(value: string, format: '12h' | '24h'): string {\n const minutes = timeToMinutes(value);\n return Number.isNaN(minutes) ? value : minutesToTime(minutes, format);\n}\n\n/** Whether an option matches the (trimmed, lower-case) typed text: by label or `HH:mm` value. */\nfunction matchesQuery(item: ListboxItem, text: string): boolean {\n return item.label.toLowerCase().includes(text) || item.value.includes(text);\n}\n\n/** Whether an option's label or `HH:mm` value starts with the (trimmed, lower-case) typed text. */\nfunction startsWithQuery(item: ListboxItem, text: string): boolean {\n return item.label.toLowerCase().startsWith(text) || item.value.startsWith(text);\n}\n\n/**\n * A time input with a filterable list of times (APG editable combobox with list autocomplete).\n *\n * - Type to filter (by label or `HH:mm` value). A complete typed time (`2:00 PM`, `14:00`) makes\n * its own option active — not an earlier one that merely contains the text, such as `12:00 PM`\n * — and partial text makes the first option that starts with it active (`2:00 p` -> `2:00 PM`),\n * else the first one that contains it; Enter commits the active option. Enter or leaving the\n * field also commits a complete typed time that is not in the list (`9:15 AM`, `14:45`) when it\n * lies within `minTime`/`maxTime`, and erased text clears the value (as the clear button does);\n * Enter never submits the form with edited text, and both close the list. Other typed text is\n * kept: the input is marked invalid and an error message describes it (`onInvalidInput`,\n * reported once per edit) until the text is edited or replaced (an option, the clear button,\n * Escape, a form reset, a new value from the parent). Escape on a closed list reverts any edit,\n * erased text included, to the selected time.\n * - Click the input or the expand button at its end (a chevron, see `expandIcon`; not a tab stop,\n * and it leaves focus in the input), press ArrowDown/ArrowUp or type to open; the list opens\n * with every option and the selected one (when it is in the list) active and scrolled into\n * view. Without one, no option is active until ArrowDown/ArrowUp or typing, so Enter lets the\n * surrounding form submit. Escape, Tab, an outside press or focus leaving closes it. Typed text\n * kept after Escape closed the list still filters it when it reopens: a click resumes the option\n * typing made active, ArrowDown/ArrowUp start at the first/last match.\n * - `open`/`defaultOpen`/`onOpenChange` control the list. It closes when the picker becomes\n * disabled or read-only (uncontrolled `open`: it stays closed when the picker is enabled again),\n * and the text typed until then is dropped.\n * - Keys of an IME composition (its confirming Enter included) are left to the IME.\n * - `clearable` shows a clear button while a time is selected (not while read-only), a tab stop\n * after the input. Tab from erased text clears the value first, so focus moves on past the\n * picker instead of to the clear button that disappears.\n * - The value is `HH:mm` (24-hour) whatever the display `format`; values off the `step` grid or\n * outside the bounds are still displayed in `format`.\n * - **Size and appearance**: `size` resolves from its own prop, then the surrounding `Field`'s\n * `size`, then `WaveProvider inputDefaults.size`, else `'medium'`; `appearance` from its own\n * prop, then `WaveProvider inputDefaults.appearance`, else `'outline'`; both render as\n * `data-size` and `data-appearance` on the root `<div>`. The time list keeps its size.\n * - The input (`controlRef`) receives `id`, `aria-label`, `aria-labelledby`, `aria-describedby`,\n * `aria-invalid`, `aria-required`, `aria-errormessage`, `aria-details`, `tabIndex`,\n * `autoFocus`, `onFocus`/`onBlur`/`onKeyDown`/`onKeyUp` and the text input attributes\n * `autoComplete`, `autoCapitalize`, `autoCorrect`, `maxLength`, `inputMode`, `spellCheck` and\n * `enterKeyHint`. `ref`, `className`, `style`, other `aria-*` attributes and the remaining props\n * stay on the root `<div>`. Inside a `Field`, the input is labelled and described by it.\n * - `name`/`required` add a hidden input for native forms (`HH:mm`); the value resets with its form.\n * - The built-in names, status texts and error messages are English; `labels` localizes them.\n * - The open list renders only in the browser: an open list (`defaultOpen`, `open`) is closed in\n * the server HTML and opens once the picker has hydrated.\n */\nexport const TimePicker = (props: TimePickerProps) => {\n const {\n value: valueProp,\n defaultValue,\n onValueChange,\n onChange,\n format = '12h',\n step = DEFAULT_TIME_STEP,\n minTime = '00:00',\n maxTime = '23:59',\n placeholder = 'Select a time',\n disabled = false,\n size: sizeProp,\n appearance: appearanceProp,\n readOnly,\n clearable = false,\n expandIcon,\n open: openProp,\n defaultOpen,\n onOpenChange,\n onInvalidInput,\n labels,\n name,\n form,\n required,\n autoComplete = 'off',\n autoCapitalize,\n autoCorrect,\n maxLength,\n enterKeyHint,\n inputMode,\n spellCheck,\n autoFocus,\n tabIndex,\n id,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-invalid': ariaInvalid,\n 'aria-required': ariaRequired,\n 'aria-errormessage': ariaErrorMessage,\n 'aria-details': ariaDetails,\n onFocus,\n onBlur,\n onKeyDown,\n onKeyUp,\n controlRef,\n className,\n ref,\n ...rest\n } = props;\n\n if (onChange !== undefined) warnDeprecated('TimePicker', 'onChange', 'onValueChange');\n\n const { size, appearance } = useInputLook(sizeProp, appearanceProp);\n\n const [selectedValue, setSelectedValue] = useControllable<string>(\n valueProp,\n defaultValue ?? '',\n (next) => {\n onValueChange?.(next);\n onChange?.(next);\n },\n );\n\n /* ---- options, step and bounds ---------------------------------- */\n\n const stepValid = normalizeTimeStep(step).valid;\n const minMinutes = timeToMinutes(minTime);\n const maxMinutes = timeToMinutes(maxTime);\n const boundsValid =\n !Number.isNaN(minMinutes) && !Number.isNaN(maxMinutes) && minMinutes <= maxMinutes;\n const allOptions = React.useMemo(\n () => generateTimeOptions(step, minTime, maxTime, format),\n [step, minTime, maxTime, format],\n );\n\n // Once per invalid value and page (C-DEV), not once per instance and effect run.\n React.useEffect(() => {\n if (!stepValid) {\n warnOnce(\n `TimePicker:step:${String(step)}`,\n `TimePicker: \\`step\\` must be a positive number of minutes (received ${String(step)}); ` +\n `using ${DEFAULT_TIME_STEP}.`,\n );\n }\n }, [step, stepValid]);\n\n React.useEffect(() => {\n if (!boundsValid) {\n warnOnce(\n `TimePicker:bounds:${minTime}|${maxTime}`,\n `TimePicker: \\`minTime\\`/\\`maxTime\\` must be times such as \"09:00\", \"09:00:00\" or ` +\n `\"9:00 AM\" with minTime <= maxTime (received \"${minTime}\" / \"${maxTime}\"); no times are available.`,\n );\n }\n }, [minTime, maxTime, boundsValid]);\n\n /* ---- open state, draft text and query -------------------------- */\n\n const interactive = !disabled && !readOnly;\n const [openState, setOpen, openControlled] = useControllable<boolean>(\n openProp,\n // A picker that starts disabled or read-only never shows its list, so it starts closed (no\n // close to report later).\n (defaultOpen ?? false) && interactive,\n onOpenChange,\n );\n // The open list lives in a portal, which renders only in the browser: until then (the server\n // HTML, hydration) the picker shows the closed inline list and reports it closed, so\n // aria-controls and aria-activedescendant never name a missing element.\n const isClient = useIsClient();\n const open = openState && interactive && isClient;\n // A list hidden because the picker became disabled or read-only is closed for good\n // (uncontrolled), so enabling the picker again does not bring it back; onOpenChange(false)\n // reports it (a consumer callback, so from an effect). A controlled `open` stays the parent's.\n React.useEffect(() => {\n if (!interactive && openState && !openControlled) setOpen(false);\n }, [interactive, openState, openControlled, setOpen]);\n /** Typed text; `null` shows the selected time's label (draft model). */\n const [draft, setDraft] = React.useState<string | null>(null);\n /** Why the typed text was rejected (it is kept and flagged); `null` while it is not. */\n const [invalid, setInvalid] = React.useState<TimePickerInvalidReason | null>(null);\n // Locking the picker while the user types drops the typed text and its error, so no later blur\n // commits it (adjusted during render, C-HOOKS).\n const [wasInteractive, setWasInteractive] = React.useState(interactive);\n if (wasInteractive !== interactive) {\n setWasInteractive(interactive);\n if (!interactive) {\n setDraft(null);\n setInvalid(null);\n }\n }\n // A new value from the parent replaces rejected text (the picker's own commits clear it\n // themselves), so the input never shows an error next to a valid value. Text the user is still\n // typing stays.\n const [seenValue, setSeenValue] = React.useState(selectedValue);\n if (seenValue !== selectedValue) {\n setSeenValue(selectedValue);\n if (invalid !== null) {\n setDraft(null);\n setInvalid(null);\n }\n }\n /**\n * Filter text: the typed text only, never the selected time's label, so opening without an edit\n * shows every option. Typed text kept while the list is closed (Escape) keeps filtering it, so\n * a reopened list shows what the input says.\n */\n const query = draft ?? '';\n\n const openList = () => {\n if (!interactive || open) return;\n setOpen(true);\n };\n const closeList = () => setOpen(false);\n\n // A complete time in any spelling the commit accepts (`2:00pm`, `09:00 AM`, `14:00:00`) keeps its\n // own option, so it stays listed and active, as Enter and blur commit it.\n const filter = React.useMemo(() => {\n const text = query.trim().toLowerCase();\n if (!text) return undefined;\n const minutes = timeToMinutes(text);\n const exact = Number.isNaN(minutes) ? null : minutesToValue(minutes);\n return (item: ListboxItem) => item.value === exact || matchesQuery(item, text);\n }, [query]);\n\n /**\n * The option that typing `text` makes active. A complete time (`2:00 PM`, `14:00`) activates its\n * own option, never another one that merely contains the text (`12:00 PM`); when it is not in\n * the list (off-grid or out of bounds) nothing is active, so Enter commits the typed time or\n * nothing. Partial text activates the first option whose label or value starts with it (`2:00 p`\n * -> `2:00 PM`, `2` -> `2:00 AM`, not `12:00 AM`), else the first option that contains it.\n */\n const getTypedActiveValue = (text: string): string | null => {\n const needle = text.trim().toLowerCase();\n if (!needle) return null;\n const minutes = timeToMinutes(text);\n if (!Number.isNaN(minutes)) {\n const exact = minutesToValue(minutes);\n return allOptions.some((item) => item.value === exact) ? exact : null;\n }\n const match =\n allOptions.find((item) => startsWithQuery(item, needle)) ??\n allOptions.find((item) => matchesQuery(item, needle));\n return match?.value ?? null;\n };\n\n // Opening without typing activates the selected option only when it is in the list. An empty,\n // off-grid or out-of-range value activates nothing (ArrowDown/ArrowUp start at the first/last\n // option), so Enter on a freshly opened list commits nothing and the surrounding form submits.\n const selectedInList =\n selectedValue !== '' && allOptions.some((item) => item.value === selectedValue);\n\n const selectedValues = React.useMemo(\n () => (selectedValue ? [selectedValue] : []),\n [selectedValue],\n );\n\n const commitValue = (next: string) => {\n setSelectedValue(next);\n setDraft(null);\n setInvalid(null);\n };\n\n /**\n * Commits the typed text: erased text clears the value, a complete time within the bounds selects\n * it. Returns why any other text is not accepted (it is kept), else `null`.\n */\n const commitDraft = (text: string): TimePickerInvalidReason | null => {\n if (!text.trim()) {\n commitValue('');\n return null;\n }\n const minutes = timeToMinutes(text);\n if (Number.isNaN(minutes)) return 'unparseable';\n if (!boundsValid || minutes < minMinutes || minutes > maxMinutes) return 'out-of-range';\n commitValue(minutesToValue(minutes));\n return null;\n };\n\n /** Keeps rejected text, flags it and reports it. */\n const rejectDraft = (text: string, reason: TimePickerInvalidReason) => {\n setInvalid(reason);\n onInvalidInput?.(text, reason);\n };\n\n const clearDraft = () => {\n setDraft(null);\n setInvalid(null);\n };\n\n // The listbox counts as open only while it shows options: with no match nothing is displayed,\n // so `aria-expanded` is false and Escape reverts the typed text instead of closing an empty list.\n const hasMatches = React.useMemo(\n () => (filter ? allOptions.some(filter) : allOptions.length > 0),\n [allOptions, filter],\n );\n const expanded = open && hasMatches;\n\n const lb = useListbox({\n open: expanded,\n onOpenChange: (next) => (next ? openList() : closeList()),\n mode: 'editable',\n selectedValues,\n onSelect: (next) => commitValue(next),\n items: allOptions,\n filter,\n // Typing sets the active option itself (getTypedActiveValue in handleInputChange), so an exact\n // typed time wins over an earlier substring match; highlightOnFilter would force the first one.\n autoHighlight: draft === null && selectedInList ? 'selected' : false,\n idPrefix: 'timepicker-listbox',\n // Escape on a closed list reverts typed text (erased text: handleKeyDown); without a draft it is\n // left to enclosing layers.\n onClearDraft:\n draft !== null\n ? () => {\n clearDraft();\n closeList();\n }\n : undefined,\n });\n\n const displayLabel = selectedValue\n ? (lb.getItem(selectedValue)?.label ?? displayTime(selectedValue, format))\n : '';\n // Read-only pickers offer no clear action (the value cannot change).\n const showClear = clearable && !readOnly && selectedValue !== '';\n const statusMessage =\n open && !hasMatches\n ? allOptions.length === 0\n ? (labels?.noTimes ?? 'No times available')\n : (labels?.noMatches ?? 'No matching times')\n : '';\n\n /* ---- elements, dismissal, positioning --------------------------- */\n\n const rootRef = React.useRef<HTMLDivElement | null>(null);\n const inputRef = React.useRef<HTMLInputElement | null>(null);\n const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n const rootRefs = useMergedRefs<HTMLDivElement>(ref, rootRef);\n const inputRefs = useMergedRefs<HTMLInputElement>(controlRef, inputRef);\n\n const { layerId } = useDismiss({\n open,\n onDismiss: closeList,\n refs: [surfaceRef, rootRef],\n anchorRef: inputRef,\n kind: 'listbox',\n focusOutside: true,\n });\n\n const { setReference, setFloating, floatingProps } = usePopupPosition({\n open,\n side: 'bottom',\n align: 'start',\n matchReferenceWidth: true,\n fitViewport: true,\n });\n const surfaceRefs = useMergedRefs<HTMLDivElement>(surfaceRef, setFloating);\n\n /* ---- forms and Field ------------------------------------------- */\n\n const field = useFieldContext();\n const isRequired = required ?? field?.required ?? false;\n // Like a native readonly input, a read-only picker is barred from constraint validation (the\n // user could not fix it); its value is still submitted.\n const validates = isRequired && !readOnly;\n const errorId = useId('timepicker-error');\n // A Field that shows an error describes the input itself (its message is not repeated).\n const showOwnError = invalid !== null && !field?.hasErrorMessage;\n const fieldProps = useFieldControl({\n id,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': joinIds(ariaDescribedBy, showOwnError ? errorId : undefined),\n 'aria-invalid': invalid !== null ? true : ariaInvalid,\n // An explicit `required={false}` wins over a required Field, so aria-required matches\n // `isRequired`.\n 'aria-required': ariaRequired ?? required,\n });\n const invalidLook = isInvalidLook(false, fieldProps['aria-invalid']);\n\n useFormReset(\n inputRef,\n () => {\n setSelectedValue(defaultValue ?? '');\n clearDraft();\n closeList();\n },\n form,\n );\n\n /* ---- handlers --------------------------------------------------- */\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (!interactive) return;\n const text = event.target.value;\n setDraft(text);\n setInvalid(null);\n if (!open) setOpen(true);\n // Every edit re-ranks the highlight (it opens the list in the same update when closed).\n lb.setActiveValue(getTypedActiveValue(text));\n };\n\n const handleKeyDown = composeEventHandlers(\n onKeyDown,\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (!interactive) return;\n // Enter commits the active option: the exact typed time, the first match of partial text,\n // or the option moved to with the arrow keys.\n lb.onKeyDown(event);\n // Keys that belong to an IME composition (its confirming Enter) are left to the IME, as\n // useListbox leaves them.\n if (event.defaultPrevented || event.nativeEvent.isComposing) return;\n if (event.key === 'Escape' && draft === '' && displayLabel !== '') {\n // Erased text: useListbox calls onClearDraft only while the input has text, so Escape on a\n // closed list restores the selected time here (an open list was closed above). With nothing\n // to restore, Escape is left to enclosing layers.\n event.preventDefault();\n clearDraft();\n closeList();\n return;\n }\n if (event.key === 'Enter' && draft !== null) {\n // Edited text is committed (a complete time within the bounds; erased text clears) or kept\n // and flagged (reported on every Enter), never submitted with the form; untouched text\n // lets Enter submit. The list closes either way, so it does not cover the error message.\n event.preventDefault();\n const reason = commitDraft(draft);\n closeList();\n if (reason !== null) rejectDraft(draft, reason);\n }\n if (event.key === 'Tab' && !event.shiftKey && showClear && draft !== null && !draft.trim()) {\n // Erased text clears the value, and with it the clear button, the next tab stop. It is\n // settled before Tab moves focus (the blur would settle it while focus moves to that\n // button), so focus moves on to the tab stop after the picker instead of dropping to\n // <body> with the button (C-DISABLED).\n flushSync(() => commitDraft(draft));\n }\n if (event.key === 'Tab' && open && !expanded) {\n // useListbox closes the list on Tab only while it shows options. The status text shown\n // instead ('No matching times', 'No times available') closes too: the clear button, the\n // next tab stop, is inside the picker, so focus moving there does not dismiss it.\n closeList();\n }\n },\n );\n const handleKeyUp = composeEventHandlers(onKeyUp, lb.onKeyUp);\n\n const handleInputClick = () => {\n if (!interactive || open) return;\n openList();\n // Typed text kept after Escape resumes where typing left it: its matches (the filter) and the\n // option typing made active, so Enter commits the same time as before the list closed.\n if (draft !== null) lb.setActiveValue(getTypedActiveValue(draft));\n };\n\n const handleBlur = composeEventHandlers(onBlur, () => {\n if (!interactive || draft === null) return;\n // Leaving the input settles the edit as Enter does: rejected text is kept (text that was\n // already rejected is not reported again) and the list closes either way, so it does not cover\n // the error message.\n const reason = invalid === null ? commitDraft(draft) : null;\n closeList();\n if (reason !== null) rejectDraft(draft, reason);\n });\n\n // The expand button opens the list as a click in the input does (typed text kept after Escape\n // resumes its matches) and closes it; focus stays in (or returns to) the input.\n const handleExpandClick = () => {\n if (!interactive) return;\n if (open) closeList();\n else handleInputClick();\n inputRef.current?.focus();\n };\n\n const handleClear = () => {\n if (!interactive) return;\n commitValue('');\n inputRef.current?.focus();\n };\n\n /* ---- render ---------------------------------------------------- */\n\n const listboxLabelledBy = joinIds(ariaLabelledBy, field?.labelId);\n const renderListbox = (hidden: boolean) => (\n <ul\n {...lb.getListboxProps()}\n aria-labelledby={listboxLabelledBy}\n aria-label={listboxLabelledBy ? undefined : (ariaLabel ?? labels?.list ?? 'Times')}\n hidden={hidden || undefined}\n className={cn(\n timePickerClassNames.listbox,\n 'max-h-60 min-h-0 overflow-auto py-1 focus:outline-hidden',\n )}\n >\n {lb.items.map((item) => (\n <TimePickerOption key={item.value} value={item.value} label={item.label} />\n ))}\n </ul>\n );\n\n const showExpand = showsExpandButton(expandIcon);\n\n let errorMessage = '';\n if (showOwnError && invalid === 'unparseable') {\n errorMessage = (labels?.invalidTime ?? defaultInvalidTimeLabel)(\n format === '24h' ? 'HH:mm' : 'h:mm AM',\n );\n } else if (showOwnError) {\n // Bounds the consumer did not set are `undefined`, not the defaults.\n errorMessage = (labels?.outOfRange ?? defaultOutOfRangeLabel)(\n props.minTime === undefined ? undefined : displayTime(minTime, format),\n props.maxTime === undefined ? undefined : displayTime(maxTime, format),\n );\n }\n // aria-controls must name a listbox that is actually mounted. The closed list is inline only\n // while options exist; the open list is mounted only while something matches.\n const listboxMounted = open ? hasMatches : allOptions.length > 0;\n\n return (\n <ListboxContext.Provider value={lb.context}>\n <div\n data-size={size}\n data-appearance={appearance}\n {...rest}\n ref={rootRefs}\n className={cn(timePickerClassNames.root, 'relative inline-flex flex-col', className)}\n >\n <div ref={setReference} className=\"relative flex items-center\">\n <input\n ref={inputRefs}\n type=\"text\"\n {...lb.getComboboxProps()}\n aria-controls={listboxMounted ? lb.listboxId : undefined}\n {...fieldProps}\n aria-errormessage={ariaErrorMessage}\n aria-details={ariaDetails}\n value={draft ?? displayLabel}\n onChange={handleInputChange}\n onClick={handleInputClick}\n onFocus={onFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n autoComplete={autoComplete}\n autoCapitalize={autoCapitalize}\n autoCorrect={autoCorrect}\n maxLength={maxLength}\n enterKeyHint={enterKeyHint}\n inputMode={inputMode}\n spellCheck={spellCheck}\n autoFocus={autoFocus}\n tabIndex={tabIndex}\n className={cn(\n timePickerClassNames.input,\n inputHeightClasses[size],\n 'w-full',\n inputPaddingClasses[size],\n inputTextClasses[size],\n inputAppearanceClasses[appearance],\n 'text-foreground placeholder:text-muted-foreground',\n inputFocus,\n disabledStyles,\n invalidLook && inputInvalid,\n pickerEndPadding(Number(showClear) + Number(showExpand), size),\n )}\n />\n {showClear && (\n <button\n type=\"button\"\n aria-label={labels?.clear ?? 'Clear time'}\n disabled={disabled}\n // Keeps focus (and an open list) on the input while the pointer clears it.\n onMouseDown={(event) => event.preventDefault()}\n onClick={handleClear}\n className={cn(\n timePickerClassNames.clearButton,\n pickerIconButtonClasses(size, appearance),\n pickerButtonOffset(size, showExpand ? 2 : 1),\n focusRing,\n disabledStyles,\n )}\n >\n <DismissIcon size={pickerGlyphSize(size, 'icon')} />\n </button>\n )}\n {showExpand && (\n <PickerExpandButton\n component=\"TimePicker\"\n expandIcon={expandIcon}\n label={labels?.expand ?? 'Show times'}\n expanded={expanded}\n listboxId={lb.listboxId}\n disabled={disabled || !!readOnly}\n onToggle={handleExpandClick}\n size={size}\n appearance={appearance}\n className={timePickerClassNames.expandButton}\n iconClassName={timePickerClassNames.expandIcon}\n />\n )}\n </div>\n {showOwnError && (\n <p\n id={errorId}\n role=\"alert\"\n className={cn(timePickerClassNames.errorMessage, 'mt-1 text-caption-1 text-error')}\n >\n {errorMessage}\n </p>\n )}\n {!open && allOptions.length > 0 && renderListbox(true)}\n <span role=\"status\" className=\"sr-only\">\n {statusMessage}\n </span>\n <HiddenInput\n name={name}\n form={form}\n disabled={disabled}\n value={selectedValue}\n type=\"text\"\n required={validates}\n onInvalid={() => inputRef.current?.focus()}\n />\n {open && (\n <Portal layerId={layerId}>\n <div\n ref={surfaceRefs}\n {...floatingProps}\n data-state=\"open\"\n className={cn(\n timePickerClassNames.surface,\n 'flex flex-col overflow-hidden rounded border border-border bg-background shadow-8',\n )}\n >\n {hasMatches ? (\n renderListbox(false)\n ) : (\n <div\n aria-hidden=\"true\"\n className={cn(\n timePickerClassNames.emptyMessage,\n 'px-3 py-1.5 text-body-1 text-muted-foreground',\n )}\n >\n {statusMessage}\n </div>\n )}\n </div>\n </Portal>\n )}\n </div>\n </ListboxContext.Provider>\n );\n};\n\nTimePicker.displayName = 'TimePicker';\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";
|
|
1
|
+
"use client";const e=require("../../lib/date.cjs");function t(e,t){return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()}function n(t,n,r){let i=e.startOfDay(t).getTime();return!(n&&i<e.startOfDay(n).getTime()||r&&i>e.startOfDay(r).getTime())}function r(t,n,r){let i=e.startOfDay(t);return n&&i.getTime()<e.startOfDay(n).getTime()?e.startOfDay(n):r&&i.getTime()>e.startOfDay(r).getTime()?e.startOfDay(r):i}function i(e){return Math.floor(e/10)*10}function a(t){return Array.from({length:12},(n,r)=>e.makeDate(t,r,1))}function o(t){return Array.from({length:12},(n,r)=>e.makeDate(t-1+r,0,1))}function s(t,n,r){let i=e.startOfMonth(t),a=e.makeDate(i.getFullYear(),i.getMonth()+1,0);return!!n&&a<e.startOfDay(n)||!!r&&i>e.startOfDay(r)}function c(t,n,r){return!!n&&e.makeDate(t,11,31)<e.startOfDay(n)||!!r&&e.makeDate(t,0,1)>e.startOfDay(r)}function l(t,n){let r=e.startOfMonth(t),i=(r.getDay()-n+7)%7,a=[];for(let t=0;t<42;t++)a.push(e.addDays(r,t-i));return a}function u(t,r,i,a){return!n(t,r,i)||!!a?.(e.startOfDay(t))}function d(t,n,r,i,a){let o=e.startOfDay(t),s;if(n===`day`)return[o];if(n===`month`){let t=e.startOfMonth(o);s=Array.from({length:e.daysInMonth(o.getFullYear(),o.getMonth())},(n,r)=>e.addDays(t,r))}else{let t=e.startOfWeek(o,r);s=Array.from({length:7},(n,r)=>e.addDays(t,r)),n===`work-week`&&(s=s.filter(e=>i.includes(e.getDay())))}return a?s.filter(e=>!a(e)):s}function f(e,t){return String(e).padStart(t,`0`)}function p(e){return`${f(e.getFullYear(),4)}-${f(e.getMonth()+1,2)}-${f(e.getDate(),2)}`}function m(t,n,r){return!Number.isInteger(t)||t<1||t>9999||!Number.isInteger(n)||n<1||n>12||!Number.isInteger(r)||r<1||r>e.daysInMonth(t,n-1)?null:e.makeDate(t,n-1,r)}function h(e){let t=/^(\d{4})-(\d{2})-(\d{2})$/.exec(e.trim());return t?m(Number(t[1]),Number(t[2]),Number(t[3])):null}function g(e){try{return Intl.getCanonicalLocales(e),!0}catch{return!1}}var _={year:`numeric`,month:`2-digit`,day:`2-digit`},v=new Set([`gregory`,`buddhist`]),y=new Map;function b(e){let t=e??``,n=y.get(t);if(n===void 0){let r;try{r=new Intl.DateTimeFormat(e).resolvedOptions().calendar}catch{r=new Intl.DateTimeFormat().resolvedOptions().calendar}n=v.has(r)?r:`gregory`,y.set(t,n)}return n}var x=new Map;function S(e,t){let n=`${e??``}|${JSON.stringify(t)}`,r=x.get(n);if(!r){let i={...t,calendar:b(e)};try{r=new Intl.DateTimeFormat(e,i)}catch{r=new Intl.DateTimeFormat(void 0,i)}x.set(n,r)}return r}var C=/[\u061c\u200b-\u200f\u202a-\u202e\u2066-\u2069]/g,w=new Map,T=e.makeDate(2001,10,23);function E(e,t){let n=``;for(let r of e.replace(C,``))n+=t.get(r)??r;return n}function D(e){let t=e??``,n=w.get(t);if(n)return n;let r=new Map,i;try{i=new Intl.NumberFormat(e,{useGrouping:!1})}catch{i=new Intl.NumberFormat(void 0,{useGrouping:!1})}for(let e=0;e<=9;e++)r.set(i.format(e),String(e));let a=S(e,_).formatToParts(T),o=[],s=new Set,c=``,l=0,u=4;for(let e of a)if(e.type===`day`||e.type===`month`||e.type===`year`){if(o.push(e.type),e.type===`year`){let t=E(e.value,r);u=t.length,l=Number(t)-T.getFullYear()}c+=e.type===`day`?`DD`:e.type===`month`?`MM`:`YYYY`}else{let t=e.value.replace(C,``);c+=t;for(let e of t)s.add(e)}let d={order:o,pattern:c.trim(),literals:s,digits:r,yearOffset:l,yearLength:u};return w.set(t,d),d}function O(e){let{order:t,pattern:n}=D(e);return{order:[...t],pattern:n}}function k(e,t){return S(t,_).format(e)}function A(e,t){let n=E(e.trim(),t.digits),r=n.match(/\d+/g);if(!r)return null;for(let e of n.replace(/\d+/g,``))if(!(/\s/.test(e)||t.literals.has(e)||`/.-`.includes(e)))return null;return r}function j(e,t){if(!e.trim())return null;let n=h(e);if(n)return n;let r=D(t);if(r.order.length!==3)return null;let i=A(e,r);if(!i||i.length!==3)return null;let a={};for(let e=0;e<3;e++){let t=r.order[e];if(t===`year`&&i[e].length<r.yearLength)return null;a[t]=Number(i[e])}let o=m((a.year??NaN)-r.yearOffset,a.month??NaN,a.day??NaN);if(!o)return null;let s=A(k(o,t),r);return!s||s.some((e,t)=>Number(e)!==Number(i[t]))?null:o}function M(t,n=0){let r=S(t,{weekday:`short`}),i=S(t,{weekday:`long`});return Array.from({length:7},(t,a)=>{let o=e.makeDate(2023,0,1+(n+a)%7);return{short:r.format(o),long:i.format(o)}})}function N(e,t){return S(t,{month:`long`,year:`numeric`}).format(e)}function P(e,t){return S(t,{month:`short`}).format(e)}function F(e,t){return S(t,{year:`numeric`}).formatToParts(e).find(e=>e.type===`year`)?.value??String(e.getFullYear())}function I(t,n){return S(n,{year:`numeric`}).formatRange(e.makeDate(t,0,1),e.makeDate(t+9,11,31))}function L(e,t){return S(t,{weekday:`long`,year:`numeric`,month:`long`,day:`numeric`}).format(e)}var R=new Map;function z(e,t){let n=t??``,r=R.get(n);if(!r){try{r=new Intl.NumberFormat(t,{useGrouping:!1})}catch{r=new Intl.NumberFormat(void 0,{useGrouping:!1})}R.set(n,r)}return r.format(e.getDate())}var B=/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/,V=/^(\d{1,2}):(\d{2})(?::(\d{2}))?\s*([ap])\.?\s*m\.?$/i;function H(e){let t=e.trim(),n=V.exec(t),r=n??B.exec(t);if(!r)return NaN;let i=Number(r[1]),a=Number(r[2]),o=r[3]===void 0?0:Number(r[3]);if(a>59||o>59)return NaN;if(n){if(i<1||i>12)return NaN;let e=r[4].toLowerCase()===`p`;i=i%12+(e?12:0)}else if(i>23)return NaN;return i*60+a}function U(e){return`${f(Math.floor(e/60)%24,2)}:${f(e%60,2)}`}function W(e,t){if(t===`24h`)return U(e);let n=Math.floor(e/60)%24,r=n>=12?`PM`:`AM`;return`${n%12==0?12:n%12}:${f(e%60,2)} ${r}`}function G(e){return!Number.isFinite(e)||e<=0?{step:30,valid:!1}:{step:Math.max(1,Math.floor(e)),valid:!0}}function K(e,t,n,r){let i=G(e).step,a=H(t),o=H(n);if(Number.isNaN(a)||Number.isNaN(o)||a>o)return[];let s=[];for(let e=a;e<=o;e+=i)s.push({value:U(e),label:W(e,r)});return s}exports.addDays=e.addDays,exports.addMonths=e.addMonths,exports.clampDate=r,exports.formatDate=k,exports.formatDayLabel=L,exports.formatDayNumber=z,exports.formatDecade=I,exports.formatISODate=p,exports.formatMonthShort=P,exports.formatMonthYear=N,exports.formatYear=F,exports.generateTimeOptions=K,exports.getCalendarDays=l,exports.getDecadeStart=i,exports.getDecadeYears=o,exports.getLocaleDateFormat=O,exports.getSelectionRange=d,exports.getWeekdayNames=M,exports.getYearMonths=a,exports.isDateInRange=n,exports.isDayUnavailable=u,exports.isMonthOutOfRange=s,exports.isSameDay=e.isSameDay,exports.isSameMonth=t,exports.isValidLocaleTag=g,exports.isYearOutOfRange=c,exports.minutesToTime=W,exports.minutesToValue=U,exports.normalizeTimeStep=G,exports.parseDate=j,exports.parseISODate=h,exports.startOfDay=e.startOfDay,exports.startOfMonth=e.startOfMonth,exports.timeToMinutes=H;
|
|
2
2
|
//# sourceMappingURL=dateUtils.cjs.map
|