@box-kite/react 2.2.8 → 2.2.10
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/.claude/rules/box-kite-rules.md +1 -1
- package/.claude/skills/box-kite/SKILL.md +1 -1
- package/.cursor/rules/box-kite.mdc +1 -1
- package/AGENTS.md +1 -1
- package/BOX_AI_CONTEXT.md +9 -9
- package/BOX_KITE_AI_CONTEXT.md +9 -9
- package/catalog.cjs +1 -1
- package/catalog.mjs +24 -0
- package/components/dateField.cjs +1 -1
- package/components/dateField.mjs +77 -72
- package/components/datePicker.cjs +1 -1
- package/components/datePicker.d.ts +6 -0
- package/components/datePicker.mjs +444 -250
- package/components/semantics.d.ts +29 -29
- package/date-input.cjs +1 -1
- package/date-input.mjs +5 -4
- package/docs/props.md +2 -2
- package/package.json +31 -31
- package/spec.cjs +1 -1
- package/spec.mjs +1 -1
- package/utils/date/fieldModel.d.ts +8 -2
package/components/dateField.mjs
CHANGED
|
@@ -6,31 +6,31 @@ import { a as r, o as i } from "../behavior.mjs";
|
|
|
6
6
|
import { t as a } from "../identity.mjs";
|
|
7
7
|
import { b as o, s, x as c, y as l } from "../dates.mjs";
|
|
8
8
|
import { N as u, O as ee, i as te, x as ne } from "../date-math.mjs";
|
|
9
|
-
import { a as re, c as ie, d as ae, f as d, i as f, m as oe, n as p, o as se, r as
|
|
10
|
-
import { a as
|
|
11
|
-
import { n as
|
|
12
|
-
import { Fragment as
|
|
13
|
-
import { Fragment as
|
|
9
|
+
import { a as re, c as ie, d as ae, f as d, i as f, m as oe, n as p, o as se, r as ce, t as le, u as ue } from "../date-input.mjs";
|
|
10
|
+
import { a as de } from "../reporting.mjs";
|
|
11
|
+
import { n as fe } from "../date-environment.mjs";
|
|
12
|
+
import { Fragment as pe, useEffect as m, useMemo as h, useRef as me, useState as g } from "react";
|
|
13
|
+
import { Fragment as he, jsx as _, jsxs as v } from "react/jsx-runtime";
|
|
14
14
|
//#region src/components/dateField.tsx
|
|
15
|
-
var
|
|
16
|
-
function
|
|
17
|
-
let { type:
|
|
18
|
-
locale:
|
|
19
|
-
zone:
|
|
20
|
-
}), { locale: N } = M, P =
|
|
21
|
-
type:
|
|
15
|
+
var y = "data-segment";
|
|
16
|
+
function b(e, b) {
|
|
17
|
+
let { type: x = "date", value: ge, defaultValue: _e = null, onValueChange: ve, zone: S, locale: ye, hourCycle: be, granularity: C = "minute", min: xe, max: Se, isDateUnavailable: Ce, disabled: w = !1, readOnly: T = !1, required: we = !1, invalid: Te, name: E, label: D, labelledBy: Ee, describedBy: De, placeholderValue: O, disambiguation: k, showZone: Oe, end: A, autoFocus: ke, emptyText: Ae = "Empty", tabIndex: je = 0, props: Me, ...j } = e, M = fe({
|
|
18
|
+
locale: ye,
|
|
19
|
+
zone: S === "none" ? void 0 : S
|
|
20
|
+
}), { locale: N } = M, P = x === "datetime" && S !== "none" ? M.zone : null, F = be ?? o(N), I = h(() => ({
|
|
21
|
+
type: x,
|
|
22
22
|
locale: N,
|
|
23
23
|
hourCycle: F,
|
|
24
|
-
granularity:
|
|
24
|
+
granularity: C
|
|
25
25
|
}), [
|
|
26
|
-
|
|
26
|
+
x,
|
|
27
27
|
N,
|
|
28
28
|
F,
|
|
29
|
-
|
|
30
|
-
]), L =
|
|
31
|
-
value:
|
|
32
|
-
defaultValue:
|
|
33
|
-
onChange: (e, t) =>
|
|
29
|
+
C
|
|
30
|
+
]), L = h(() => se(I), [I]), R = `${x}|${N}|${F}|${C}|${P}`, [z, Ne] = de({
|
|
31
|
+
value: ge,
|
|
32
|
+
defaultValue: _e,
|
|
33
|
+
onChange: (e, t) => ve?.(e, {
|
|
34
34
|
...t,
|
|
35
35
|
...ne(e, P ?? M.zone)
|
|
36
36
|
}),
|
|
@@ -39,7 +39,7 @@ function x(e, x) {
|
|
|
39
39
|
type: "valueChange",
|
|
40
40
|
content: ["value"]
|
|
41
41
|
}
|
|
42
|
-
}), [B, Pe] =
|
|
42
|
+
}), [B, Pe] = g(() => ({
|
|
43
43
|
draft: p(z, I, P),
|
|
44
44
|
source: z,
|
|
45
45
|
key: R
|
|
@@ -47,7 +47,7 @@ function x(e, x) {
|
|
|
47
47
|
if (B.source !== z || B.key !== R) {
|
|
48
48
|
let e = d(B.draft, L, I, {
|
|
49
49
|
zone: P,
|
|
50
|
-
disambiguation:
|
|
50
|
+
disambiguation: k
|
|
51
51
|
}), t = {
|
|
52
52
|
draft: B.key === R && e === z ? B.draft : p(z, I, P),
|
|
53
53
|
source: z,
|
|
@@ -55,17 +55,17 @@ function x(e, x) {
|
|
|
55
55
|
};
|
|
56
56
|
Pe(t), V = t.draft;
|
|
57
57
|
}
|
|
58
|
-
let [H, U] =
|
|
58
|
+
let [H, U] = g(null), W = me(null), G = me(null), K = a("date-field"), Fe = D === void 0 ? void 0 : `${K}-label`, q = h(() => p(O ?? `${u(M.zone)}T00:00:00`, {
|
|
59
59
|
...I,
|
|
60
60
|
type: I.type === "date" ? "date" : "datetime"
|
|
61
61
|
}, null), [
|
|
62
|
-
|
|
62
|
+
O,
|
|
63
63
|
M.zone,
|
|
64
64
|
I
|
|
65
65
|
]), J = (e, t, n) => {
|
|
66
66
|
let r = d(e, L, I, {
|
|
67
67
|
zone: P,
|
|
68
|
-
disambiguation:
|
|
68
|
+
disambiguation: k
|
|
69
69
|
});
|
|
70
70
|
Pe({
|
|
71
71
|
draft: e,
|
|
@@ -79,7 +79,7 @@ function x(e, x) {
|
|
|
79
79
|
draft: V,
|
|
80
80
|
editing: H,
|
|
81
81
|
commit: J
|
|
82
|
-
}), Ie = () => Array.from(W.current?.querySelectorAll(`[${
|
|
82
|
+
}), Ie = () => Array.from(W.current?.querySelectorAll(`[${y}]`) ?? []), X = (e) => {
|
|
83
83
|
let t = Ie();
|
|
84
84
|
t[Math.max(0, Math.min(e, t.length - 1))]?.focus();
|
|
85
85
|
}, Z = (e) => Ie().indexOf(e), Le = (e, t, n, r) => {
|
|
@@ -93,22 +93,22 @@ function x(e, x) {
|
|
|
93
93
|
/^[^\p{L}\p{N}]$/u.test(n) && i[t] !== void 0 && X(Z(e) + 1);
|
|
94
94
|
return;
|
|
95
95
|
}
|
|
96
|
-
let s =
|
|
96
|
+
let s = ue(i, t, o, n, I);
|
|
97
97
|
U({
|
|
98
98
|
type: t,
|
|
99
99
|
buffer: s.advance ? "" : s.buffer
|
|
100
100
|
}), Y.current.commit(s.draft, "keyboard", r), s.advance && X(Z(e) + 1);
|
|
101
101
|
}, Re = r((e) => {
|
|
102
|
-
let n = e.target.closest(`[${
|
|
103
|
-
if (!n ||
|
|
104
|
-
let r = n.getAttribute(
|
|
105
|
-
e.preventDefault(), !
|
|
102
|
+
let n = e.target.closest(`[${y}]`);
|
|
103
|
+
if (!n || w || e.defaultPrevented) return;
|
|
104
|
+
let r = n.getAttribute(y), i = Z(n), a = t(n), { key: o } = e, s = Y.current.draft, c = (t) => {
|
|
105
|
+
e.preventDefault(), !T && (U({
|
|
106
106
|
type: r,
|
|
107
107
|
buffer: ""
|
|
108
108
|
}), J(t, "keyboard", e));
|
|
109
109
|
};
|
|
110
110
|
if (o === "ArrowUp" || o === "ArrowDown") return c(ie(s, r, o === "ArrowUp" ? 1 : -1, I, q));
|
|
111
|
-
if (o === "PageUp" || o === "PageDown") return c(ie(s, r, (o === "PageUp" ? 1 : -1) *
|
|
111
|
+
if (o === "PageUp" || o === "PageDown") return c(ie(s, r, (o === "PageUp" ? 1 : -1) * le[r], I, q));
|
|
112
112
|
if (o === "Home" || o === "End") {
|
|
113
113
|
let e = f(r, s, I);
|
|
114
114
|
return c({
|
|
@@ -121,7 +121,7 @@ function x(e, x) {
|
|
|
121
121
|
return;
|
|
122
122
|
}
|
|
123
123
|
if (o === "Backspace" || o === "Delete") {
|
|
124
|
-
if (e.preventDefault(),
|
|
124
|
+
if (e.preventDefault(), T) return;
|
|
125
125
|
let t = Y.current.editing?.type === r ? Y.current.editing.buffer : "";
|
|
126
126
|
if (t.length > 1) {
|
|
127
127
|
let n = t.slice(0, -1);
|
|
@@ -145,15 +145,15 @@ function x(e, x) {
|
|
|
145
145
|
e.preventDefault(), G.current?.form?.requestSubmit();
|
|
146
146
|
return;
|
|
147
147
|
}
|
|
148
|
-
o === "Unidentified" || o === "Process" || e.ctrlKey || e.metaKey || e.altKey || o.length !== 1 || (e.preventDefault(),
|
|
148
|
+
o === "Unidentified" || o === "Process" || e.ctrlKey || e.metaKey || e.altKey || o.length !== 1 || (e.preventDefault(), T || Le(n, r, o, e));
|
|
149
149
|
});
|
|
150
|
-
|
|
150
|
+
m(() => {
|
|
151
151
|
let e = W.current;
|
|
152
152
|
if (!e) return;
|
|
153
153
|
let t = (e) => {
|
|
154
|
-
let t = e.target?.closest(`[${
|
|
155
|
-
if (!t || (e.preventDefault(),
|
|
156
|
-
let n = t.getAttribute(
|
|
154
|
+
let t = e.target?.closest(`[${y}]`);
|
|
155
|
+
if (!t || (e.preventDefault(), w || T)) return;
|
|
156
|
+
let n = t.getAttribute(y);
|
|
157
157
|
if (e.inputType.startsWith("delete")) {
|
|
158
158
|
t.dispatchEvent(new KeyboardEvent("keydown", {
|
|
159
159
|
key: "Backspace",
|
|
@@ -167,38 +167,38 @@ function x(e, x) {
|
|
|
167
167
|
return e.addEventListener("beforeinput", t), () => e.removeEventListener("beforeinput", t);
|
|
168
168
|
});
|
|
169
169
|
let ze = r((e) => {
|
|
170
|
-
if (e.preventDefault(),
|
|
171
|
-
let t =
|
|
170
|
+
if (e.preventDefault(), w || T) return;
|
|
171
|
+
let t = x === "datetime" ? P ? "instant" : "datetime" : x, n = oe(e.clipboardData.getData("text"), {
|
|
172
172
|
locale: N,
|
|
173
173
|
kind: t,
|
|
174
174
|
zone: P ?? M.zone
|
|
175
175
|
});
|
|
176
176
|
n && J(p(n, I, P), "paste", e);
|
|
177
177
|
});
|
|
178
|
-
|
|
178
|
+
m(() => {
|
|
179
179
|
let e = G.current?.form;
|
|
180
180
|
if (!e) return;
|
|
181
|
-
let t = (e) => Y.current.commit(p(
|
|
181
|
+
let t = (e) => Y.current.commit(p(_e, I, P), "reset", e);
|
|
182
182
|
return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
|
|
183
|
-
}),
|
|
183
|
+
}), m(() => {
|
|
184
184
|
ke && X(0);
|
|
185
185
|
}, []);
|
|
186
|
-
let Be = z !== null && (
|
|
186
|
+
let Be = z !== null && (xe != null && te(z, xe) < 0 || Se != null && te(z, Se) > 0), Ve = z !== null && x !== "time" && Ce ? ee(z, { zone: P ?? M.zone }) : null, Q = Te ?? (Be || Ve !== null && Ce(Ve)), He = x === "time" ? [] : c(N), Ue = typeof D == "string" ? D : void 0, We = ce(L)[0], $ = x === "datetime" && P && (Oe ?? P !== M.readerZone) ? s(P, {
|
|
187
187
|
locale: N,
|
|
188
188
|
style: "short",
|
|
189
189
|
at: z ?? void 0
|
|
190
190
|
}) : null;
|
|
191
|
-
return /* @__PURE__ */
|
|
191
|
+
return /* @__PURE__ */ v(he, { children: [D !== void 0 && /* @__PURE__ */ _(n, {
|
|
192
192
|
component: "dateField.label",
|
|
193
193
|
display: "block",
|
|
194
194
|
mb: 1.5,
|
|
195
195
|
fontSize: 14,
|
|
196
196
|
id: Fe,
|
|
197
197
|
props: { onClick: () => X(0) },
|
|
198
|
-
children:
|
|
199
|
-
}), /* @__PURE__ */
|
|
198
|
+
children: D
|
|
199
|
+
}), /* @__PURE__ */ v(n, {
|
|
200
200
|
ref: (e) => {
|
|
201
|
-
W.current = e, typeof
|
|
201
|
+
W.current = e, typeof b == "function" ? b(e) : b && (b.current = e);
|
|
202
202
|
},
|
|
203
203
|
component: "dateField",
|
|
204
204
|
display: "inline-flex",
|
|
@@ -211,36 +211,36 @@ function x(e, x) {
|
|
|
211
211
|
},
|
|
212
212
|
...j,
|
|
213
213
|
variant: [j.variant, {
|
|
214
|
-
disabled:
|
|
214
|
+
disabled: w,
|
|
215
215
|
invalid: Q
|
|
216
216
|
}],
|
|
217
217
|
id: K,
|
|
218
218
|
props: {
|
|
219
219
|
role: "group",
|
|
220
|
-
"aria-labelledby": [Fe,
|
|
221
|
-
"aria-describedby":
|
|
222
|
-
"aria-disabled":
|
|
220
|
+
"aria-labelledby": [Fe, Ee].filter(Boolean).join(" ") || void 0,
|
|
221
|
+
"aria-describedby": De,
|
|
222
|
+
"aria-disabled": w || void 0,
|
|
223
223
|
"aria-invalid": Q || void 0,
|
|
224
224
|
...Me,
|
|
225
225
|
onKeyDown: Re,
|
|
226
226
|
onPaste: ze,
|
|
227
227
|
onPointerDown: (e) => {
|
|
228
|
-
if (e.target !== e.currentTarget ||
|
|
228
|
+
if (e.target !== e.currentTarget || w) return;
|
|
229
229
|
e.preventDefault();
|
|
230
|
-
let t =
|
|
230
|
+
let t = ce(L).findIndex((e) => Y.current.draft[e] === void 0);
|
|
231
231
|
X(t === -1 ? 0 : t);
|
|
232
232
|
}
|
|
233
233
|
},
|
|
234
234
|
children: [
|
|
235
235
|
L.map((e, t) => {
|
|
236
|
-
if (e.type === "literal") return /* @__PURE__ */
|
|
236
|
+
if (e.type === "literal") return /* @__PURE__ */ _(n, {
|
|
237
237
|
component: "dateField.literal",
|
|
238
238
|
whiteSpace: "pre",
|
|
239
239
|
props: { "aria-hidden": !0 },
|
|
240
240
|
children: e.text
|
|
241
241
|
}, t);
|
|
242
242
|
let r = e.type, i = f(r, V, I), a = V[r], o = a === void 0, s = H?.type === r ? H.buffer : "", c = re(r, V, s, N), u = o ? Ae : r === "month" ? `${a} – ${He[a - 1]}` : r === "dayPeriod" ? c : String(a);
|
|
243
|
-
return /* @__PURE__ */
|
|
243
|
+
return /* @__PURE__ */ _(n, {
|
|
244
244
|
component: "dateField.segment",
|
|
245
245
|
display: "inline-block",
|
|
246
246
|
px: .5,
|
|
@@ -249,14 +249,14 @@ function x(e, x) {
|
|
|
249
249
|
whiteSpace: "nowrap",
|
|
250
250
|
variant: {
|
|
251
251
|
placeholder: o,
|
|
252
|
-
disabled:
|
|
252
|
+
disabled: w
|
|
253
253
|
},
|
|
254
254
|
id: `${K}-${r}`,
|
|
255
255
|
props: {
|
|
256
|
-
[
|
|
256
|
+
[y]: r,
|
|
257
257
|
role: "spinbutton",
|
|
258
|
-
tabIndex:
|
|
259
|
-
contentEditable: !
|
|
258
|
+
tabIndex: w ? -1 : je,
|
|
259
|
+
contentEditable: !w && !T,
|
|
260
260
|
suppressContentEditableWarning: !0,
|
|
261
261
|
spellCheck: !1,
|
|
262
262
|
autoCorrect: "off",
|
|
@@ -268,10 +268,10 @@ function x(e, x) {
|
|
|
268
268
|
"aria-valuemax": i.max,
|
|
269
269
|
"aria-valuenow": a ?? q[r] ?? i.min,
|
|
270
270
|
"aria-valuetext": u,
|
|
271
|
-
"aria-readonly":
|
|
272
|
-
"aria-disabled":
|
|
271
|
+
"aria-readonly": T || void 0,
|
|
272
|
+
"aria-disabled": w || void 0,
|
|
273
273
|
"aria-invalid": Q || void 0,
|
|
274
|
-
"aria-describedby": r === We ?
|
|
274
|
+
"aria-describedby": r === We ? De : void 0,
|
|
275
275
|
onFocus: () => U({
|
|
276
276
|
type: r,
|
|
277
277
|
buffer: ""
|
|
@@ -281,39 +281,44 @@ function x(e, x) {
|
|
|
281
281
|
children: c
|
|
282
282
|
}, t);
|
|
283
283
|
}),
|
|
284
|
-
$ && /* @__PURE__ */
|
|
284
|
+
$ && /* @__PURE__ */ _(n, {
|
|
285
285
|
component: "dateField.zone",
|
|
286
286
|
ms: 2,
|
|
287
287
|
fontSize: 13,
|
|
288
288
|
whiteSpace: "nowrap",
|
|
289
289
|
children: $
|
|
290
290
|
}),
|
|
291
|
-
|
|
292
|
-
|
|
291
|
+
A !== void 0 && /* @__PURE__ */ _(n, {
|
|
292
|
+
display: "inline-flex",
|
|
293
|
+
ai: "center",
|
|
294
|
+
ms: "auto",
|
|
295
|
+
children: A
|
|
296
|
+
}),
|
|
297
|
+
E !== void 0 || we ? /* @__PURE__ */ _(pe, { children: we ? /* @__PURE__ */ _(n, {
|
|
293
298
|
tag: "input",
|
|
294
299
|
ref: G,
|
|
295
300
|
component: "dateField.validation",
|
|
296
301
|
required: !0,
|
|
297
|
-
disabled:
|
|
302
|
+
disabled: w,
|
|
298
303
|
props: {
|
|
299
304
|
type: "text",
|
|
300
|
-
name:
|
|
305
|
+
name: E,
|
|
301
306
|
value: z ?? "",
|
|
302
307
|
tabIndex: -1,
|
|
303
308
|
"aria-hidden": !0,
|
|
304
309
|
onChange: () => {},
|
|
305
310
|
onFocus: () => X(0)
|
|
306
311
|
}
|
|
307
|
-
}) : /* @__PURE__ */
|
|
312
|
+
}) : /* @__PURE__ */ _("input", {
|
|
308
313
|
ref: G,
|
|
309
314
|
type: "hidden",
|
|
310
|
-
name:
|
|
315
|
+
name: E,
|
|
311
316
|
value: z ?? "",
|
|
312
|
-
disabled:
|
|
317
|
+
disabled: w
|
|
313
318
|
}) }) : null
|
|
314
319
|
]
|
|
315
320
|
})] });
|
|
316
321
|
}
|
|
317
|
-
var
|
|
322
|
+
var x = e(b, "DateField");
|
|
318
323
|
//#endregion
|
|
319
|
-
export {
|
|
324
|
+
export { x as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../box.cjs"),n=require("../behavior.cjs"),r=require("../placement.cjs"),i=require("../dates.cjs"),a=require("../date-math.cjs"),o=require("../date-input.cjs"),s=require("../reporting.cjs"),c=require("./svg.cjs"),l=require("../date-environment.cjs"),u=require("./calendar.cjs"),d=require("../layer.cjs"),f=require("./overlay.cjs"),p=require("./dateField.cjs");let m=require("react"),h=require("react/jsx-runtime");function g(){return(0,h.jsx)(c.Svg,{viewBox:`0 0 16 16`,width:`1rem`,height:`1rem`,props:{fill:`none`},children:(0,h.jsx)(c.Path,{d:`M3 3.5h10a1 1 0 0 1 1 1V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4.5a1 1 0 0 1 1-1ZM2 7h12M5.5 2v3M10.5 2v3`,stroke:`currentColor`,strokeWidth:1.5,strokeLinecap:`round`})})}function _(){return(0,h.jsx)(c.Svg,{viewBox:`0 0 16 16`,width:`1rem`,height:`1rem`,props:{fill:`none`},children:(0,h.jsx)(c.Path,{d:`M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12ZM8 5v3l2 1.5`,stroke:`currentColor`,strokeWidth:1.5,strokeLinecap:`round`,strokeLinejoin:`round`})})}function v(){return(0,h.jsx)(c.Svg,{viewBox:`0 0 16 16`,width:`0.875rem`,height:`0.875rem`,props:{fill:`none`},children:(0,h.jsx)(c.Path,{d:`m4.5 4.5 7 7m0-7-7 7`,stroke:`currentColor`,strokeWidth:1.5,strokeLinecap:`round`})})}function y(e,t){typeof e==`function`?e(t):e&&(e.current=t)}function b(e){let[i,a]=(0,m.useState)(null),o=e.ref,s=(0,m.useCallback)(e=>{a(e),y(o,e)},[o]),c=e=>{if(!e||e.contains(document.activeElement)&&document.activeElement!==e)return;let t=[`[data-date][tabindex="0"]`,`[role="option"][tabindex="0"]`,`button:not([disabled])`].map(t=>e.querySelector(t)).find(Boolean),n=e.querySelector(`[role="listbox"]`),r=n?.querySelector(`[role="option"][tabindex="0"]`);n&&r&&(n.scrollTop=r.offsetTop-n.clientHeight/2+r.offsetHeight/2),(t??e).focus({preventScroll:!0})},l=n.a(e=>c(e)),{platform:u,isOpen:p,id:g,setPanel:_,setOpen:v,trigger:b,triggerElement:x,panelElement:S}=d.t({haspopup:`dialog`,idPrefix:`date-picker`,open:e.open,defaultOpen:e.defaultOpen,onOpenChange:e.onOpenChange,interaction:{component:`datePicker`,type:`openChange`},onOpened:l,onClosing:(e,t)=>{e&&t?.focus()}}),C=r.t({side:e.side,align:e.align,offset:1,flip:!0,anchor:i});return(0,m.useEffect)(()=>{p&&c(S)},[p,S]),{attachTrigger:b.ref,triggerAttributes:b.props,closeOnChoice:e=>{x?.focus(),v(!1,{reason:`select`,event:e})},id:g,attachField:s,panel:n=>{let r={role:`dialog`,"aria-label":e.label,tabIndex:-1};return u?(0,h.jsx)(t.default,{ref:_,component:`popover`,variant:{topLayer:!0},p:3,...C.layerProps,id:g,props:{popover:`auto`,...r},children:p?n:null}):p&&(0,h.jsx)(f.default,{contentRef:_,anchor:i,side:e.side,align:e.align,offset:1,component:`popover`,p:3,id:g,props:r,children:n})}}}function x(e){let{value:r,step:a,locale:s,hourCycle:c,onSelect:l,label:u}=e,d=(0,m.useMemo)(()=>o.l(a),[a]),f=o.s(r,a),p=Math.max(0,f?d.indexOf(f):d.indexOf(`09:00:00`)),g=n.t({count:d.length,defaultActiveIndex:p,loop:!1,onSelect:(e,t)=>l(d[e],t)});return(0,h.jsx)(t.default,{component:`datePicker.times`,position:`relative`,display:`flex`,d:`column`,gap:.5,maxHeight:72,overflowY:`auto`,ps:2,bs:1,props:{role:`listbox`,"aria-label":u,onKeyDown:g.onKeyDown},children:d.map((e,n)=>(0,h.jsx)(t.default,{component:`datePicker.time`,variant:{selected:e===f},px:3,py:1.5,borderRadius:2,fontSize:14,textAlign:`start`,whiteSpace:`nowrap`,css:{fontVariantNumeric:`tabular-nums`},props:{role:`option`,"aria-selected":e===f,...g.itemProps(n),onClick:t=>l(e,t)},children:i.t(e,{locale:s,hour:`numeric`,minute:`2-digit`,hourCycle:c===void 0?void 0:c===12?`h12`:`h23`})},e))})}function S(e){return(0,h.jsx)(t.default,{component:`datePicker.presets`,display:`flex`,d:`column`,gap:.5,pe:2,be:1,props:{role:`group`},children:e.presets.map(n=>(0,h.jsx)(t.default,{tag:`button`,component:`datePicker.preset`,variant:{selected:e.isSelected(n.value)},px:3,py:1.5,borderRadius:2,fontSize:14,textAlign:`start`,whiteSpace:`nowrap`,props:{type:`button`,onClick:t=>e.onSelect(n.value,t)},children:n.label},n.label))})}function C(e,n){let{type:r=`date`,value:o,defaultValue:c=null,onValueChange:d,zone:f,locale:m,hourCycle:y,granularity:C,disambiguation:w,min:T,max:E,isDateUnavailable:D,disabled:O=!1,readOnly:k=!1,required:ee,invalid:te,name:ne,label:A,labelledBy:re,describedBy:ie,open:j,defaultOpen:ae,onOpenChange:oe,closeOnSelect:M=!0,firstDayOfWeek:se,weekNumbers:ce,side:le=`bottom`,align:N=`start`,clearable:ue=!1,triggerLabel:P,clearLabel:F=`Clear`,tabIndex:I,step:L=30,defaultTime:de=`00:00`,presets:R,showZone:fe,...z}=e,B=l.n({locale:m,zone:f===`none`?void 0:f}),{locale:V}=B,H=r===`datetime`&&f!==`none`?B.zone:null,U=H??B.zone,[W,G]=s.a({value:o,defaultValue:c,onChange:(e,t)=>d?.(e,{...t,...a.x(e,U)}),interaction:{component:`datePicker`,type:`valueChange`,content:[`value`]}}),K=P??(r===`time`?`Choose time`:`Choose date`),q=typeof A==`string`?A:K,{attachTrigger:pe,triggerAttributes:J,closeOnChoice:Y,attachField:X,panel:Z}=b({ref:n,open:j,defaultOpen:ae,onOpenChange:oe,side:le,align:N,label:q}),Q=W&&r!==`time`?a.O(W,{zone:U}):null,me=W&&r!==`date`?a.A(W,{zone:U}):null,he=W?i.t(W,{locale:V,zone:U,...r===`date`?{dateStyle:`medium`}:r===`time`?{timeStyle:`short`}:{dateStyle:`medium`,timeStyle:`short`}}):``,$=Y,ge=(e,t)=>a.r(e,t,H?{zone:H,disambiguation:w}:{}),_e=(e,t)=>{e&&(r===`date`?(G(e,{reason:`select`,event:t}),M&&$(t)):G(ge(e,me??de),{reason:`select`,event:t}))},ve=(e,t)=>{G(r===`time`?e:ge(Q??a.N(U),e),{reason:`select`,event:t}),M&&$(t)},ye=(0,h.jsx)(t.default,{tag:`button`,ref:pe,component:`datePicker.trigger`,display:`inline-flex`,ai:`center`,jc:`center`,width:7,height:7,ms:2,me:-1.5,borderRadius:1.5,disabled:O||k,props:{type:`button`,"aria-label":he?`${K}, ${he}`:K,tabIndex:I,...J},children:r===`time`?(0,h.jsx)(_,{}):(0,h.jsx)(g,{})}),be=ue&&W&&!O&&!k&&(0,h.jsx)(t.default,{tag:`button`,component:`datePicker.clear`,display:`inline-flex`,ai:`center`,jc:`center`,width:6,height:6,ms:1,borderRadius:999,props:{type:`button`,"aria-label":F,tabIndex:I,onClick:e=>G(null,{reason:`clear`,event:e})},children:(0,h.jsx)(v,{})});return(0,h.jsxs)(s.t,{children:[(0,h.jsx)(p.default,{ref:X,...z,type:r,value:W,onValueChange:(e,t)=>G(e,{reason:t.reason,event:t.event}),zone:f,locale:m,hourCycle:y,granularity:C,disambiguation:w,min:T,max:E,isDateUnavailable:D,disabled:O,readOnly:k,required:ee,invalid:te,name:ne,label:A,labelledBy:re,describedBy:ie,showZone:fe,tabIndex:I,end:(0,h.jsxs)(h.Fragment,{children:[be,ye]})}),Z((0,h.jsxs)(t.default,{display:`flex`,gap:3,ai:`stretch`,children:[R&&R.length>0&&(0,h.jsx)(S,{presets:R,isSelected:e=>W!==null&&a.i(e,W,{zone:U})===0,onSelect:(e,t)=>{G(e,{reason:`preset`,event:t}),M&&$(t)}}),r!==`time`&&(0,h.jsx)(u.default,{value:Q,onValueChange:(e,t)=>_e(e,t.event),min:T?a.O(T,{zone:U}):void 0,max:E?a.O(E,{zone:U}):void 0,isDateUnavailable:D,locale:m,zone:f===`none`?void 0:f,firstDayOfWeek:se,weekNumbers:ce}),r!==`date`&&(0,h.jsx)(x,{value:me,step:L,locale:V,hourCycle:y,label:r===`time`?q:`Time`,onSelect:ve})]}))]})}function w(e,n){let{value:r,defaultValue:o=null,onValueChange:c,locale:d,min:f,max:_,isDateUnavailable:y,disabled:x=!1,readOnly:C=!1,required:w,invalid:T,startName:E,endName:D,label:O,labelledBy:k,describedBy:ee,startLabel:te=`Start date`,endLabel:ne=`End date`,open:A,defaultOpen:re,onOpenChange:ie,closeOnSelect:j=!0,firstDayOfWeek:ae,weekNumbers:oe,months:M=2,side:se=`bottom`,align:ce=`start`,clearable:le=!1,triggerLabel:N=`Choose dates`,clearLabel:ue=`Clear`,tabIndex:P,presets:F,props:I,...L}=e,{locale:de}=l.n({locale:d}),[R,fe]=s.a({value:r,defaultValue:o,onChange:c,interaction:{component:`dateRangePicker`,type:`valueChange`,content:[`value`]}}),[z,B]=(0,m.useState)({start:R?.start??null,end:R?.end??null,source:R}),{start:V,end:H}=z;z.source!==R&&(V=R?.start??null,H=R?.end??null,B({start:V,end:H,source:R}));let{attachTrigger:U,triggerAttributes:W,closeOnChoice:G,id:K,attachField:q,panel:pe}=b({ref:n,open:A,defaultOpen:re,onOpenChange:ie,side:se,align:ce,label:typeof O==`string`?O:N}),J=R?i.n(R.start,R.end,{locale:de}):``,Y=V!==null&&H!==null&&a.i(V,H)>0,X=(e,t,n,r)=>{let i=e&&t&&a.i(e,t)<=0?{start:e,end:t}:null;B({start:e,end:t,source:i}),fe(i,{reason:n,event:r})},Z=G,Q={locale:d,min:f,max:_,isDateUnavailable:y,disabled:x,readOnly:C,required:w,component:`datePicker.part`,px:0,py:0,tabIndex:P};return(0,h.jsxs)(s.t,{children:[O!==void 0&&(0,h.jsx)(t.default,{component:`dateField.label`,display:`block`,mb:1.5,fontSize:14,id:`${K}-label`,children:O}),(0,h.jsxs)(t.default,{ref:q,component:`dateField`,display:`inline-flex`,ai:`center`,gap:2,px:3,py:2,...L,variant:[L.variant,{disabled:x,invalid:T??Y}],props:{role:`group`,"aria-labelledby":[O===void 0?void 0:`${K}-label`,k].filter(Boolean).join(` `)||void 0,"aria-invalid":(T??Y)||void 0,"aria-describedby":ee,...I},children:[(0,h.jsx)(p.default,{...Q,value:V,onValueChange:(e,t)=>X(e,H,t.reason,t.event),name:E,props:{"aria-label":te},invalid:T??Y}),(0,h.jsx)(t.default,{component:`dateField.literal`,props:{"aria-hidden":!0},children:`–`}),(0,h.jsx)(p.default,{...Q,value:H,onValueChange:(e,t)=>X(V,e,t.reason,t.event),name:D,props:{"aria-label":ne},invalid:T??Y}),le&&R&&!x&&!C&&(0,h.jsx)(t.default,{tag:`button`,component:`datePicker.clear`,display:`inline-flex`,ai:`center`,jc:`center`,width:6,height:6,borderRadius:999,props:{type:`button`,"aria-label":ue,tabIndex:P,onClick:e=>X(null,null,`clear`,e)},children:(0,h.jsx)(v,{})}),(0,h.jsx)(t.default,{tag:`button`,ref:U,component:`datePicker.trigger`,display:`inline-flex`,ai:`center`,jc:`center`,width:7,height:7,me:-1.5,borderRadius:1.5,disabled:x||C,props:{type:`button`,"aria-label":J?`${N}, ${J}`:N,tabIndex:P,...W},children:(0,h.jsx)(g,{})})]}),pe((0,h.jsxs)(t.default,{display:`flex`,gap:3,ai:`stretch`,children:[F&&F.length>0&&(0,h.jsx)(S,{presets:F,isSelected:e=>R!==null&&e.start===R.start&&e.end===R.end,onSelect:(e,t)=>{X(e.start,e.end,`preset`,t),j&&Z(t)}}),(0,h.jsx)(u.default,{mode:`range`,months:M,value:R,defaultFocusedDate:V??void 0,onValueChange:(e,t)=>{X(e?.start??null,e?.end??null,`select`,t.event),j&&e&&t.event&&Z(t.event)},min:f,max:_,isDateUnavailable:y,locale:d,firstDayOfWeek:ae,weekNumbers:oe})]}))]})}var T=e.f(C,`DatePicker`),E=e.f(w,`DateRangePicker`);exports.DateRangePicker=E,exports.default=T;
|
|
1
|
+
"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../box.cjs"),n=require("../behavior.cjs"),r=require("../placement.cjs"),i=require("../dates.cjs"),a=require("../date-math.cjs"),o=require("../date-input.cjs"),s=require("../reporting.cjs"),c=require("./svg.cjs"),l=require("../date-environment.cjs"),u=require("./calendar.cjs"),d=require("../layer.cjs"),f=require("./overlay.cjs"),p=require("./dateField.cjs");let m=require("react"),h=require("react/jsx-runtime");function g(){return(0,h.jsx)(c.Svg,{viewBox:`0 0 16 16`,width:`1rem`,height:`1rem`,props:{fill:`none`},children:(0,h.jsx)(c.Path,{d:`M3 3.5h10a1 1 0 0 1 1 1V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4.5a1 1 0 0 1 1-1ZM2 7h12M5.5 2v3M10.5 2v3`,stroke:`currentColor`,strokeWidth:1.5,strokeLinecap:`round`})})}function _(){return(0,h.jsx)(c.Svg,{viewBox:`0 0 16 16`,width:`1rem`,height:`1rem`,props:{fill:`none`},children:(0,h.jsx)(c.Path,{d:`M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12ZM8 5v3l2 1.5`,stroke:`currentColor`,strokeWidth:1.5,strokeLinecap:`round`,strokeLinejoin:`round`})})}function v(){return(0,h.jsx)(c.Svg,{viewBox:`0 0 16 16`,width:`0.875rem`,height:`0.875rem`,props:{fill:`none`},children:(0,h.jsx)(c.Path,{d:`m4.5 4.5 7 7m0-7-7 7`,stroke:`currentColor`,strokeWidth:1.5,strokeLinecap:`round`})})}function y(e,t){typeof e==`function`?e(t):e&&(e.current=t)}function b(e){let[i,a]=(0,m.useState)(null),o=e.ref,s=(0,m.useCallback)(e=>{a(e),y(o,e)},[o]),c=e=>{if(!e||e.contains(document.activeElement)&&document.activeElement!==e)return;let t=[`[data-date][tabindex="0"]`,`[role="option"][tabindex="0"]`,`button:not([disabled])`].map(t=>e.querySelector(t)).find(Boolean),n=e.querySelector(`[role="listbox"]`),r=n?.querySelector(`[role="option"][tabindex="0"]`);n&&r&&(n.scrollTop=r.offsetTop-n.clientHeight/2+r.offsetHeight/2),(t??e).focus({preventScroll:!0})},l=n.a(e=>c(e)),{platform:u,isOpen:p,id:g,setPanel:_,setOpen:v,trigger:b,triggerElement:x,panelElement:S}=d.t({haspopup:`dialog`,idPrefix:`date-picker`,open:e.open,defaultOpen:e.defaultOpen,onOpenChange:e.onOpenChange,interaction:{component:`datePicker`,type:`openChange`},onOpened:l,onClosing:(e,t)=>{e&&t?.focus()}}),C=r.t({side:e.side,align:e.align,offset:1,flip:!0,matchWidth:e.matchWidth,anchor:i});return(0,m.useEffect)(()=>{p&&c(S)},[p,S]),{attachTrigger:b.ref,triggerAttributes:b.props,triggerElement:x,closeOnChoice:e=>{x?.focus(),v(!1,{reason:`select`,event:e})},id:g,attachField:s,panel:n=>{let r={role:`dialog`,"aria-label":e.label,tabIndex:-1};return u?(0,h.jsx)(t.default,{ref:_,component:`popover`,variant:{topLayer:!0},p:3,...C.layerProps,id:g,props:{popover:`auto`,...r},children:p?n:null}):p&&(0,h.jsx)(f.default,{contentRef:_,anchor:i,side:e.side,align:e.align,offset:1,matchWidth:e.matchWidth,component:`popover`,p:3,id:g,props:r,children:n})}}}function x(e){let{value:r,step:a,locale:s,hourCycle:c,onSelect:l,label:u,min:d,max:f,emptyLabel:p,separated:g}=e,_=(0,m.useMemo)(()=>o.l(a,{min:d,max:f}),[a,d,f]),v=o.s(r,a),y=Math.max(0,v?_.indexOf(v):_.indexOf(`09:00:00`)),b=n.t({count:_.length,defaultActiveIndex:y,loop:!1,onSelect:(e,t)=>l(_[e],t)}),x=g?{ps:2,bs:1}:{};return _.length===0?(0,h.jsx)(t.default,{component:`datePicker.empty`,flexGrow:1,px:3,py:1.5,fontSize:14,...x,props:{role:`status`},children:p}):(0,h.jsx)(t.default,{component:`datePicker.times`,position:`relative`,display:`flex`,d:`column`,flexGrow:1,gap:.5,maxHeight:72,overflowY:`auto`,p:1,...x,props:{role:`listbox`,"aria-label":u,onKeyDown:b.onKeyDown},children:_.map((e,n)=>(0,h.jsx)(t.default,{component:`datePicker.time`,variant:{selected:e===v},px:3,py:1.5,borderRadius:2,fontSize:14,textAlign:`start`,whiteSpace:`nowrap`,css:{fontVariantNumeric:`tabular-nums`},props:{role:`option`,"aria-selected":e===v,...b.itemProps(n),onClick:t=>l(e,t)},children:i.t(e,{locale:s,hour:`numeric`,minute:`2-digit`,hourCycle:c===void 0?void 0:c===12?`h12`:`h23`})},e))})}function S(e){return(0,h.jsx)(t.default,{component:`datePicker.presets`,display:`flex`,d:`column`,gap:.5,pe:2,be:1,props:{role:`group`},children:e.presets.map(n=>(0,h.jsx)(t.default,{tag:`button`,component:`datePicker.preset`,variant:{selected:e.isSelected(n.value)},px:3,py:1.5,borderRadius:2,fontSize:14,textAlign:`start`,whiteSpace:`nowrap`,props:{type:`button`,onClick:t=>e.onSelect(n.value,t)},children:n.label},n.label))})}function C(e){let{frame:r,attachField:i,attachTrigger:a,triggerAttributes:o,triggerElement:s,id:c,label:l,labelledBy:u,describedBy:d}=e,{text:f,placeholder:p,icon:g,clear:_,disabled:v,invalid:y,required:b=!1,tabIndex:x,inputs:S,onReset:C}=e,w=(0,m.useRef)(null),T=l===void 0?void 0:`${c}-label`,E=`${c}-value`,D=n.a(C);return(0,m.useEffect)(()=>{let e=w.current?.form;if(e)return e.addEventListener(`reset`,D),()=>e.removeEventListener(`reset`,D)},[D]),(0,h.jsxs)(h.Fragment,{children:[l!==void 0&&(0,h.jsx)(t.default,{component:`dateField.label`,display:`block`,mb:1.5,fontSize:14,id:T,props:{onClick:()=>s?.focus()},children:l}),(0,h.jsxs)(t.default,{ref:i,component:`dateField`,display:`inline-flex`,ai:`center`,position:`relative`,cursor:`pointer`,css:{fontVariantNumeric:`tabular-nums`},...r,variant:[r.variant,{disabled:v,invalid:y}],children:[(0,h.jsx)(t.default,{tag:`button`,ref:a,component:`datePicker.value`,variant:{placeholder:!f},flexGrow:1,textAlign:`start`,whiteSpace:`nowrap`,css:{font:`inherit`},after:{position:`absolute`,inset:0},disabled:v,props:{type:`button`,tabIndex:x,"aria-labelledby":[T,u,E].filter(Boolean).join(` `),"aria-describedby":d,"aria-invalid":y||void 0,...o},children:(0,h.jsx)(`span`,{id:E,children:f||p})}),(0,h.jsxs)(t.default,{display:`inline-flex`,ai:`center`,gap:1,ms:2,children:[_,(0,h.jsx)(t.default,{component:`datePicker.icon`,display:`inline-flex`,ai:`center`,jc:`center`,width:7,height:7,me:-1.5,props:{"aria-hidden":!0},children:g})]}),S.map((e,n)=>b?(0,h.jsx)(t.default,{tag:`input`,ref:n===0?w:void 0,component:`dateField.validation`,required:!0,disabled:v,props:{type:`text`,name:e.name,value:e.value,tabIndex:-1,"aria-hidden":!0,onChange:()=>{},onFocus:()=>s?.focus()}},n):e.name===void 0?null:(0,h.jsx)(`input`,{ref:n===0?w:void 0,type:`hidden`,name:e.name,value:e.value,disabled:v},n))]})]})}function w(e,n){let{type:r=`date`,value:o,defaultValue:c=null,onValueChange:d,zone:f,locale:m,hourCycle:y,granularity:w,disambiguation:T,min:E,max:D,isDateUnavailable:O,disabled:k=!1,readOnly:A=!1,required:j,invalid:ee,name:te,label:M,labelledBy:ne,describedBy:re,open:ie,defaultOpen:ae,onOpenChange:oe,closeOnSelect:N=!0,firstDayOfWeek:se,weekNumbers:ce,side:le=`bottom`,align:ue=`start`,matchWidth:de=r===`time`,emptyTimesLabel:fe=`No times available`,clearable:P=!1,pickOnly:pe=!1,triggerLabel:F,clearLabel:I=`Clear`,tabIndex:L,step:R=30,defaultTime:me=`00:00`,presets:z,showZone:he,...B}=e,V=l.n({locale:m,zone:f===`none`?void 0:f}),{locale:H}=V,U=r===`datetime`&&f!==`none`?V.zone:null,W=U??V.zone,[G,K]=s.a({value:o,defaultValue:c,onChange:(e,t)=>d?.(e,{...t,...a.x(e,W)}),interaction:{component:`datePicker`,type:`valueChange`,content:[`value`]}}),q=F??(r===`time`?`Choose time`:`Choose date`),J=typeof M==`string`?M:q,{attachTrigger:Y,triggerAttributes:ge,triggerElement:X,closeOnChoice:Z,id:Q,attachField:_e,panel:ve}=b({ref:n,open:ie,defaultOpen:ae,onOpenChange:oe,side:le,align:ue,matchWidth:de,label:J}),$=G&&r!==`time`?a.O(G,{zone:W}):null,ye=G&&r!==`date`?a.A(G,{zone:W}):null,be=r===`datetime`?$??a.N(W):null,xe=e=>e&&(be===null||a.O(e,{zone:W})===be)?a.A(e,{zone:W}):null,Se=G?i.t(G,{locale:H,zone:W,hourCycle:y===void 0?void 0:y===12?`h12`:`h23`,...r===`date`?{dateStyle:`medium`}:r===`time`?{timeStyle:`short`}:{dateStyle:`medium`,timeStyle:`short`}}):``,Ce=pe&&G&&U&&(he??U!==V.readerZone)?i.s(U,{locale:H,style:`short`,at:G}):null,we=Z,Te=(e,t)=>a.r(e,t,U?{zone:U,disambiguation:T}:{}),Ee=(e,t)=>{e&&(r===`date`?(K(e,{reason:`select`,event:t}),N&&we(t)):K(Te(e,ye??me),{reason:`select`,event:t}))},De=(e,t)=>{K(r===`time`?e:Te($??a.N(W),e),{reason:`select`,event:t}),N&&we(t)},Oe=(0,h.jsx)(t.default,{tag:`button`,ref:Y,component:`datePicker.trigger`,display:`inline-flex`,ai:`center`,jc:`center`,width:7,height:7,ms:2,me:-1.5,borderRadius:1.5,disabled:k||A,props:{type:`button`,"aria-label":Se?`${q}, ${Se}`:q,tabIndex:L,...ge},children:r===`time`?(0,h.jsx)(_,{}):(0,h.jsx)(g,{})}),ke=P&&G&&!k&&!A&&(0,h.jsx)(t.default,{tag:`button`,component:`datePicker.clear`,display:`inline-flex`,ai:`center`,jc:`center`,width:6,height:6,ms:1,borderRadius:999,position:`relative`,zIndex:1,props:{type:`button`,"aria-label":I,tabIndex:L,onClick:e=>K(null,{reason:`clear`,event:e})},children:(0,h.jsx)(v,{})}),Ae=G!==null&&(E!=null&&a.i(G,E)<0||D!=null&&a.i(G,D)>0),je=pe?(0,h.jsx)(C,{frame:B,attachField:_e,attachTrigger:A?void 0:Y,triggerAttributes:A?void 0:ge,triggerElement:X,id:Q,label:M,labelledBy:ne,describedBy:re,text:Ce?`${Se} ${Ce}`:Se,placeholder:q,icon:r===`time`?(0,h.jsx)(_,{}):(0,h.jsx)(g,{}),clear:ke,disabled:k,invalid:ee??(Ae||$!==null&&!!O?.($)),required:j,tabIndex:L,inputs:[{name:te,value:G??``}],onReset:e=>K(c,{reason:`reset`,event:e})}):(0,h.jsx)(p.default,{ref:_e,...B,type:r,value:G,onValueChange:(e,t)=>K(e,{reason:t.reason,event:t.event}),zone:f,locale:m,hourCycle:y,granularity:w,disambiguation:T,min:E,max:D,isDateUnavailable:O,disabled:k,readOnly:A,required:j,invalid:ee,name:te,label:M,labelledBy:ne,describedBy:re,showZone:he,tabIndex:L,end:(0,h.jsxs)(h.Fragment,{children:[ke,Oe]})});return(0,h.jsxs)(s.t,{children:[je,ve((0,h.jsxs)(t.default,{display:`flex`,gap:3,ai:`stretch`,children:[z&&z.length>0&&(0,h.jsx)(S,{presets:z,isSelected:e=>G!==null&&a.i(e,G,{zone:W})===0,onSelect:(e,t)=>{K(e,{reason:`preset`,event:t}),N&&we(t)}}),r!==`time`&&(0,h.jsx)(u.default,{value:$,onValueChange:(e,t)=>Ee(e,t.event),min:E?a.O(E,{zone:W}):void 0,max:D?a.O(D,{zone:W}):void 0,isDateUnavailable:O,locale:m,zone:f===`none`?void 0:f,firstDayOfWeek:se,weekNumbers:ce}),r!==`date`&&(0,h.jsx)(x,{value:ye,step:R,locale:H,hourCycle:y,label:r===`time`?J:`Time`,min:xe(E),max:xe(D),emptyLabel:fe,separated:r===`datetime`,onSelect:De})]}))]})}function T(e,n){let{value:r,defaultValue:o=null,onValueChange:c,locale:d,min:f,max:_,isDateUnavailable:y,disabled:x=!1,readOnly:w=!1,required:T,invalid:E,startName:D,endName:O,label:k,labelledBy:A,describedBy:j,startLabel:ee=`Start date`,endLabel:te=`End date`,open:M,defaultOpen:ne,onOpenChange:re,closeOnSelect:ie=!0,firstDayOfWeek:ae,weekNumbers:oe,months:N=2,side:se=`bottom`,align:ce=`start`,matchWidth:le=!1,emptyTimesLabel:ue,clearable:de=!1,pickOnly:fe=!1,triggerLabel:P=`Choose dates`,clearLabel:pe=`Clear`,tabIndex:F,presets:I,props:L,...R}=e,{locale:me}=l.n({locale:d}),[z,he]=s.a({value:r,defaultValue:o,onChange:c,interaction:{component:`dateRangePicker`,type:`valueChange`,content:[`value`]}}),[B,V]=(0,m.useState)({start:z?.start??null,end:z?.end??null,source:z}),{start:H,end:U}=B;B.source!==z&&(H=z?.start??null,U=z?.end??null,V({start:H,end:U,source:z}));let{attachTrigger:W,triggerAttributes:G,triggerElement:K,closeOnChoice:q,id:J,attachField:Y,panel:ge}=b({ref:n,open:M,defaultOpen:ne,onOpenChange:re,side:se,align:ce,matchWidth:le,label:typeof k==`string`?k:P}),X=z?i.n(z.start,z.end,{locale:me}):``,Z=H!==null&&U!==null&&a.i(H,U)>0,Q=(e,t,n,r)=>{let i=e&&t&&a.i(e,t)<=0?{start:e,end:t}:null;V({start:e,end:t,source:i}),he(i,{reason:n,event:r})},_e=q,ve={locale:d,min:f,max:_,isDateUnavailable:y,disabled:x,readOnly:w,required:T,component:`datePicker.part`,px:0,py:0,tabIndex:F},$=de&&z&&!x&&!w&&(0,h.jsx)(t.default,{tag:`button`,component:`datePicker.clear`,display:`inline-flex`,ai:`center`,jc:`center`,width:6,height:6,borderRadius:999,position:`relative`,zIndex:1,props:{type:`button`,"aria-label":pe,tabIndex:F,onClick:e=>Q(null,null,`clear`,e)},children:(0,h.jsx)(v,{})}),ye=z!==null&&(f!=null&&a.i(z.start,f)<0||_!=null&&a.i(z.end,_)>0),be=fe?(0,h.jsx)(C,{frame:{...R,props:L},attachField:Y,attachTrigger:w?void 0:W,triggerAttributes:w?void 0:G,triggerElement:K,id:J,label:k,labelledBy:A,describedBy:j,text:X,placeholder:P,icon:(0,h.jsx)(g,{}),clear:$,disabled:x,invalid:E??ye,required:T,tabIndex:F,inputs:[{name:D,value:z?.start??``},{name:O,value:z?.end??``}],onReset:e=>Q(o?.start??null,o?.end??null,`reset`,e)}):(0,h.jsxs)(h.Fragment,{children:[k!==void 0&&(0,h.jsx)(t.default,{component:`dateField.label`,display:`block`,mb:1.5,fontSize:14,id:`${J}-label`,children:k}),(0,h.jsxs)(t.default,{ref:Y,component:`dateField`,display:`inline-flex`,ai:`center`,gap:2,px:3,py:2,...R,variant:[R.variant,{disabled:x,invalid:E??Z}],props:{role:`group`,"aria-labelledby":[k===void 0?void 0:`${J}-label`,A].filter(Boolean).join(` `)||void 0,"aria-invalid":(E??Z)||void 0,"aria-describedby":j,...L},children:[(0,h.jsx)(p.default,{...ve,value:H,onValueChange:(e,t)=>Q(e,U,t.reason,t.event),name:D,props:{"aria-label":ee},invalid:E??Z}),(0,h.jsx)(t.default,{component:`dateField.literal`,props:{"aria-hidden":!0},children:`–`}),(0,h.jsx)(p.default,{...ve,value:U,onValueChange:(e,t)=>Q(H,e,t.reason,t.event),name:O,props:{"aria-label":te},invalid:E??Z}),(0,h.jsxs)(t.default,{display:`inline-flex`,ai:`center`,gap:2,ms:`auto`,children:[$,(0,h.jsx)(t.default,{tag:`button`,ref:W,component:`datePicker.trigger`,display:`inline-flex`,ai:`center`,jc:`center`,width:7,height:7,me:-1.5,borderRadius:1.5,disabled:x||w,props:{type:`button`,"aria-label":X?`${P}, ${X}`:P,tabIndex:F,...G},children:(0,h.jsx)(g,{})})]})]})]});return(0,h.jsxs)(s.t,{children:[be,ge((0,h.jsxs)(t.default,{display:`flex`,gap:3,ai:`stretch`,children:[I&&I.length>0&&(0,h.jsx)(S,{presets:I,isSelected:e=>z!==null&&e.start===z.start&&e.end===z.end,onSelect:(e,t)=>{Q(e.start,e.end,`preset`,t),ie&&_e(t)}}),(0,h.jsx)(u.default,{mode:`range`,months:N,value:z,defaultFocusedDate:H??void 0,onValueChange:(e,t)=>{Q(e?.start??null,e?.end??null,`select`,t.event),ie&&e&&t.event&&_e(t.event)},min:f,max:_,isDateUnavailable:y,locale:d,firstDayOfWeek:ae,weekNumbers:oe})]}))]})}var E=e.f(w,`DatePicker`),D=e.f(T,`DateRangePicker`);exports.DateRangePicker=D,exports.default=E;
|
|
@@ -57,8 +57,14 @@ interface SharedProps<TKey extends keyof ComponentsAndVariants> extends PickerBo
|
|
|
57
57
|
side?: AnchorSide;
|
|
58
58
|
/** Which of the field's edges it lines up with. Default `'start'`. */
|
|
59
59
|
align?: AnchorAlign;
|
|
60
|
+
/** Whether the panel is at least as wide as the field. Default `true` for a time, `false` otherwise. */
|
|
61
|
+
matchWidth?: boolean;
|
|
62
|
+
/** What the time list says when no time is within `min`/`max`. Default `'No times available'`. */
|
|
63
|
+
emptyTimesLabel?: string;
|
|
60
64
|
/** A button inside the field that empties it. */
|
|
61
65
|
clearable?: boolean;
|
|
66
|
+
/** The field is one button that shows the value and opens the panel, with nothing to type. Default `false`. */
|
|
67
|
+
pickOnly?: boolean;
|
|
62
68
|
/** The calendar button's name. Default `'Choose date'`, or `'Choose time'`. */
|
|
63
69
|
triggerLabel?: string;
|
|
64
70
|
/** The clear button's name. Default `'Clear'`. */
|