@box-kite/react 2.2.8 → 2.2.9

package/components/dateField.cjs

@@ -1 +1 @@
-"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../platform.cjs"),n=require("../box.cjs"),r=require("../behavior.cjs"),i=require("../identity.cjs"),a=require("../dates.cjs"),o=require("../date-math.cjs"),s=require("../date-input.cjs"),c=require("../reporting.cjs"),l=require("../date-environment.cjs");let u=require("react"),d=require("react/jsx-runtime");var f=`data-segment`;function p(e,p){let{type:m=`date`,value:ee,defaultValue:te=null,onValueChange:ne,zone:h,locale:re,hourCycle:ie,granularity:g=`minute`,min:_,max:v,isDateUnavailable:y,disabled:b=!1,readOnly:x=!1,required:S=!1,invalid:ae,name:C,label:w,labelledBy:oe,describedBy:T,placeholderValue:E,disambiguation:D,showZone:se,end:ce,autoFocus:le,emptyText:ue=`Empty`,tabIndex:de=0,props:fe,...O}=e,k=l.n({locale:re,zone:h===`none`?void 0:h}),{locale:A}=k,j=m===`datetime`&&h!==`none`?k.zone:null,M=ie??a.b(A),N=(0,u.useMemo)(()=>({type:m,locale:A,hourCycle:M,granularity:g}),[m,A,M,g]),P=(0,u.useMemo)(()=>s.o(N),[N]),F=`${m}|${A}|${M}|${g}|${j}`,[I,pe]=c.a({value:ee,defaultValue:te,onChange:(e,t)=>ne?.(e,{...t,...o.x(e,j??k.zone)}),interaction:{component:`dateField`,type:`valueChange`,content:[`value`]}}),[L,R]=(0,u.useState)(()=>({draft:s.n(I,N,j),source:I,key:F})),z=L.draft;if(L.source!==I||L.key!==F){let e=s.f(L.draft,P,N,{zone:j,disambiguation:D}),t={draft:L.key===F&&e===I?L.draft:s.n(I,N,j),source:I,key:F};R(t),z=t.draft}let[B,V]=(0,u.useState)(null),H=(0,u.useRef)(null),U=(0,u.useRef)(null),W=i.t(`date-field`),me=w===void 0?void 0:`${W}-label`,G=(0,u.useMemo)(()=>s.n(E??`${o.N(k.zone)}T00:00:00`,{...N,type:N.type===`date`?`date`:`datetime`},null),[E,k.zone,N]),K=(e,t,n)=>{let r=s.f(e,P,N,{zone:j,disambiguation:D});R({draft:e,source:r,key:F}),pe(r,{reason:t,event:n})},q=r.o({draft:z,editing:B,commit:K}),J=()=>Array.from(H.current?.querySelectorAll(`[${f}]`)??[]),Y=e=>{let t=J();t[Math.max(0,Math.min(e,t.length-1))]?.focus()},X=e=>J().indexOf(e),Z=(e,t,n,r)=>{let{draft:i,editing:a}=q.current,o=a?.type===t?a.buffer:``;if(t===`dayPeriod`){let t=s.d(i,n,A);t&&(q.current.commit(t,`keyboard`,r),Y(X(e)+1));return}if(!/^\d$/.test(n)){/^[^\p{L}\p{N}]$/u.test(n)&&i[t]!==void 0&&Y(X(e)+1);return}let c=s.u(i,t,o,n,N);V({type:t,buffer:c.advance?``:c.buffer}),q.current.commit(c.draft,`keyboard`,r),c.advance&&Y(X(e)+1)},he=r.a(e=>{let n=e.target.closest(`[${f}]`);if(!n||b||e.defaultPrevented)return;let r=n.getAttribute(f),i=X(n),a=t.p(n),{key:o}=e,c=q.current.draft,l=t=>{e.preventDefault(),!x&&(V({type:r,buffer:``}),K(t,`keyboard`,e))};if(o===`ArrowUp`||o===`ArrowDown`)return l(s.c(c,r,o===`ArrowUp`?1:-1,N,G));if(o===`PageUp`||o===`PageDown`)return l(s.c(c,r,(o===`PageUp`?1:-1)*s.t[r],N,G));if(o===`Home`||o===`End`){let e=s.i(r,c,N);return l({...c,[r]:o===`Home`?e.min:e.max})}if(o===`ArrowLeft`||o===`ArrowRight`){e.preventDefault(),Y(i+(o===`ArrowRight`===a?-1:1));return}if(o===`Backspace`||o===`Delete`){if(e.preventDefault(),x)return;let t=q.current.editing?.type===r?q.current.editing.buffer:``;if(t.length>1){let n=t.slice(0,-1);V({type:r,buffer:n}),K({...c,[r]:Number(n)},`keyboard`,e)}else c[r]===void 0?o===`Backspace`&&Y(i-1):(V({type:r,buffer:``}),K({...c,[r]:void 0},`keyboard`,e));return}if(o===`Enter`){e.preventDefault(),U.current?.form?.requestSubmit();return}o===`Unidentified`||o===`Process`||e.ctrlKey||e.metaKey||e.altKey||o.length!==1||(e.preventDefault(),x||Z(n,r,o,e))});(0,u.useEffect)(()=>{let e=H.current;if(!e)return;let t=e=>{let t=e.target?.closest(`[${f}]`);if(!t||(e.preventDefault(),b||x))return;let n=t.getAttribute(f);if(e.inputType.startsWith(`delete`)){t.dispatchEvent(new KeyboardEvent(`keydown`,{key:`Backspace`,bubbles:!0,cancelable:!0}));return}for(let r of e.data??``)Z(t,n,r,e)};return e.addEventListener(`beforeinput`,t),()=>e.removeEventListener(`beforeinput`,t)});let ge=r.a(e=>{if(e.preventDefault(),b||x)return;let t=m===`datetime`?j?`instant`:`datetime`:m,n=s.m(e.clipboardData.getData(`text`),{locale:A,kind:t,zone:j??k.zone});n&&K(s.n(n,N,j),`paste`,e)});(0,u.useEffect)(()=>{let e=U.current?.form;if(!e)return;let t=e=>q.current.commit(s.n(te,N,j),`reset`,e);return e.addEventListener(`reset`,t),()=>e.removeEventListener(`reset`,t)}),(0,u.useEffect)(()=>{le&&Y(0)},[]);let _e=I!==null&&(_!=null&&o.i(I,_)<0||v!=null&&o.i(I,v)>0),Q=I!==null&&m!==`time`&&y?o.O(I,{zone:j??k.zone}):null,$=ae??(_e||Q!==null&&y(Q)),ve=m===`time`?[]:a.x(A),ye=typeof w==`string`?w:void 0,be=s.r(P)[0],xe=m===`datetime`&&j&&(se??j!==k.readerZone)?a.s(j,{locale:A,style:`short`,at:I??void 0}):null;return(0,d.jsxs)(d.Fragment,{children:[w!==void 0&&(0,d.jsx)(n.default,{component:`dateField.label`,display:`block`,mb:1.5,fontSize:14,id:me,props:{onClick:()=>Y(0)},children:w}),(0,d.jsxs)(n.default,{ref:e=>{H.current=e,typeof p==`function`?p(e):p&&(p.current=e)},component:`dateField`,display:`inline-flex`,ai:`center`,position:`relative`,cursor:`text`,css:{fontVariantNumeric:`tabular-nums`,unicodeBidi:`isolate`},...O,variant:[O.variant,{disabled:b,invalid:$}],id:W,props:{role:`group`,"aria-labelledby":[me,oe].filter(Boolean).join(` `)||void 0,"aria-describedby":T,"aria-disabled":b||void 0,"aria-invalid":$||void 0,...fe,onKeyDown:he,onPaste:ge,onPointerDown:e=>{if(e.target!==e.currentTarget||b)return;e.preventDefault();let t=s.r(P).findIndex(e=>q.current.draft[e]===void 0);Y(t===-1?0:t)}},children:[P.map((e,t)=>{if(e.type===`literal`)return(0,d.jsx)(n.default,{component:`dateField.literal`,whiteSpace:`pre`,props:{"aria-hidden":!0},children:e.text},t);let r=e.type,i=s.i(r,z,N),o=z[r],c=o===void 0,l=B?.type===r?B.buffer:``,u=s.a(r,z,l,A),p=c?ue:r===`month`?`${o} – ${ve[o-1]}`:r===`dayPeriod`?u:String(o);return(0,d.jsx)(n.default,{component:`dateField.segment`,display:`inline-block`,px:.5,borderRadius:1,textAlign:`end`,whiteSpace:`nowrap`,variant:{placeholder:c,disabled:b},id:`${W}-${r}`,props:{[f]:r,role:`spinbutton`,tabIndex:b?-1:de,contentEditable:!b&&!x,suppressContentEditableWarning:!0,spellCheck:!1,autoCorrect:`off`,autoCapitalize:`off`,inputMode:r===`dayPeriod`?`text`:`numeric`,enterKeyHint:`next`,"aria-label":ye?`${a.y(r,A)}, ${ye}`:a.y(r,A),"aria-valuemin":i.min,"aria-valuemax":i.max,"aria-valuenow":o??G[r]??i.min,"aria-valuetext":p,"aria-readonly":x||void 0,"aria-disabled":b||void 0,"aria-invalid":$||void 0,"aria-describedby":r===be?T:void 0,onFocus:()=>V({type:r,buffer:``}),onBlur:()=>V(null)},children:u},t)}),xe&&(0,d.jsx)(n.default,{component:`dateField.zone`,ms:2,fontSize:13,whiteSpace:`nowrap`,children:xe}),ce,C!==void 0||S?(0,d.jsx)(u.Fragment,{children:S?(0,d.jsx)(n.default,{tag:`input`,ref:U,component:`dateField.validation`,required:!0,disabled:b,props:{type:`text`,name:C,value:I??``,tabIndex:-1,"aria-hidden":!0,onChange:()=>{},onFocus:()=>Y(0)}}):(0,d.jsx)(`input`,{ref:U,type:`hidden`,name:C,value:I??``,disabled:b})}):null]})]})}var m=e.f(p,`DateField`);exports.default=m;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../platform.cjs"),n=require("../box.cjs"),r=require("../behavior.cjs"),i=require("../identity.cjs"),a=require("../dates.cjs"),o=require("../date-math.cjs"),s=require("../date-input.cjs"),c=require("../reporting.cjs"),l=require("../date-environment.cjs");let u=require("react"),d=require("react/jsx-runtime");var f=`data-segment`;function p(e,p){let{type:m=`date`,value:ee,defaultValue:te=null,onValueChange:ne,zone:h,locale:re,hourCycle:ie,granularity:g=`minute`,min:_,max:v,isDateUnavailable:y,disabled:b=!1,readOnly:x=!1,required:S=!1,invalid:ae,name:C,label:w,labelledBy:oe,describedBy:T,placeholderValue:E,disambiguation:D,showZone:se,end:O,autoFocus:ce,emptyText:le=`Empty`,tabIndex:ue=0,props:de,...k}=e,A=l.n({locale:re,zone:h===`none`?void 0:h}),{locale:j}=A,M=m===`datetime`&&h!==`none`?A.zone:null,N=ie??a.b(j),P=(0,u.useMemo)(()=>({type:m,locale:j,hourCycle:N,granularity:g}),[m,j,N,g]),F=(0,u.useMemo)(()=>s.o(P),[P]),I=`${m}|${j}|${N}|${g}|${M}`,[L,fe]=c.a({value:ee,defaultValue:te,onChange:(e,t)=>ne?.(e,{...t,...o.x(e,M??A.zone)}),interaction:{component:`dateField`,type:`valueChange`,content:[`value`]}}),[R,z]=(0,u.useState)(()=>({draft:s.n(L,P,M),source:L,key:I})),B=R.draft;if(R.source!==L||R.key!==I){let e=s.f(R.draft,F,P,{zone:M,disambiguation:D}),t={draft:R.key===I&&e===L?R.draft:s.n(L,P,M),source:L,key:I};z(t),B=t.draft}let[V,H]=(0,u.useState)(null),U=(0,u.useRef)(null),W=(0,u.useRef)(null),G=i.t(`date-field`),pe=w===void 0?void 0:`${G}-label`,K=(0,u.useMemo)(()=>s.n(E??`${o.N(A.zone)}T00:00:00`,{...P,type:P.type===`date`?`date`:`datetime`},null),[E,A.zone,P]),q=(e,t,n)=>{let r=s.f(e,F,P,{zone:M,disambiguation:D});z({draft:e,source:r,key:I}),fe(r,{reason:t,event:n})},J=r.o({draft:B,editing:V,commit:q}),Y=()=>Array.from(U.current?.querySelectorAll(`[${f}]`)??[]),X=e=>{let t=Y();t[Math.max(0,Math.min(e,t.length-1))]?.focus()},Z=e=>Y().indexOf(e),Q=(e,t,n,r)=>{let{draft:i,editing:a}=J.current,o=a?.type===t?a.buffer:``;if(t===`dayPeriod`){let t=s.d(i,n,j);t&&(J.current.commit(t,`keyboard`,r),X(Z(e)+1));return}if(!/^\d$/.test(n)){/^[^\p{L}\p{N}]$/u.test(n)&&i[t]!==void 0&&X(Z(e)+1);return}let c=s.u(i,t,o,n,P);H({type:t,buffer:c.advance?``:c.buffer}),J.current.commit(c.draft,`keyboard`,r),c.advance&&X(Z(e)+1)},me=r.a(e=>{let n=e.target.closest(`[${f}]`);if(!n||b||e.defaultPrevented)return;let r=n.getAttribute(f),i=Z(n),a=t.p(n),{key:o}=e,c=J.current.draft,l=t=>{e.preventDefault(),!x&&(H({type:r,buffer:``}),q(t,`keyboard`,e))};if(o===`ArrowUp`||o===`ArrowDown`)return l(s.c(c,r,o===`ArrowUp`?1:-1,P,K));if(o===`PageUp`||o===`PageDown`)return l(s.c(c,r,(o===`PageUp`?1:-1)*s.t[r],P,K));if(o===`Home`||o===`End`){let e=s.i(r,c,P);return l({...c,[r]:o===`Home`?e.min:e.max})}if(o===`ArrowLeft`||o===`ArrowRight`){e.preventDefault(),X(i+(o===`ArrowRight`===a?-1:1));return}if(o===`Backspace`||o===`Delete`){if(e.preventDefault(),x)return;let t=J.current.editing?.type===r?J.current.editing.buffer:``;if(t.length>1){let n=t.slice(0,-1);H({type:r,buffer:n}),q({...c,[r]:Number(n)},`keyboard`,e)}else c[r]===void 0?o===`Backspace`&&X(i-1):(H({type:r,buffer:``}),q({...c,[r]:void 0},`keyboard`,e));return}if(o===`Enter`){e.preventDefault(),W.current?.form?.requestSubmit();return}o===`Unidentified`||o===`Process`||e.ctrlKey||e.metaKey||e.altKey||o.length!==1||(e.preventDefault(),x||Q(n,r,o,e))});(0,u.useEffect)(()=>{let e=U.current;if(!e)return;let t=e=>{let t=e.target?.closest(`[${f}]`);if(!t||(e.preventDefault(),b||x))return;let n=t.getAttribute(f);if(e.inputType.startsWith(`delete`)){t.dispatchEvent(new KeyboardEvent(`keydown`,{key:`Backspace`,bubbles:!0,cancelable:!0}));return}for(let r of e.data??``)Q(t,n,r,e)};return e.addEventListener(`beforeinput`,t),()=>e.removeEventListener(`beforeinput`,t)});let he=r.a(e=>{if(e.preventDefault(),b||x)return;let t=m===`datetime`?M?`instant`:`datetime`:m,n=s.m(e.clipboardData.getData(`text`),{locale:j,kind:t,zone:M??A.zone});n&&q(s.n(n,P,M),`paste`,e)});(0,u.useEffect)(()=>{let e=W.current?.form;if(!e)return;let t=e=>J.current.commit(s.n(te,P,M),`reset`,e);return e.addEventListener(`reset`,t),()=>e.removeEventListener(`reset`,t)}),(0,u.useEffect)(()=>{ce&&X(0)},[]);let ge=L!==null&&(_!=null&&o.i(L,_)<0||v!=null&&o.i(L,v)>0),_e=L!==null&&m!==`time`&&y?o.O(L,{zone:M??A.zone}):null,$=ae??(ge||_e!==null&&y(_e)),ve=m===`time`?[]:a.x(j),ye=typeof w==`string`?w:void 0,be=s.r(F)[0],xe=m===`datetime`&&M&&(se??M!==A.readerZone)?a.s(M,{locale:j,style:`short`,at:L??void 0}):null;return(0,d.jsxs)(d.Fragment,{children:[w!==void 0&&(0,d.jsx)(n.default,{component:`dateField.label`,display:`block`,mb:1.5,fontSize:14,id:pe,props:{onClick:()=>X(0)},children:w}),(0,d.jsxs)(n.default,{ref:e=>{U.current=e,typeof p==`function`?p(e):p&&(p.current=e)},component:`dateField`,display:`inline-flex`,ai:`center`,position:`relative`,cursor:`text`,css:{fontVariantNumeric:`tabular-nums`,unicodeBidi:`isolate`},...k,variant:[k.variant,{disabled:b,invalid:$}],id:G,props:{role:`group`,"aria-labelledby":[pe,oe].filter(Boolean).join(` `)||void 0,"aria-describedby":T,"aria-disabled":b||void 0,"aria-invalid":$||void 0,...de,onKeyDown:me,onPaste:he,onPointerDown:e=>{if(e.target!==e.currentTarget||b)return;e.preventDefault();let t=s.r(F).findIndex(e=>J.current.draft[e]===void 0);X(t===-1?0:t)}},children:[F.map((e,t)=>{if(e.type===`literal`)return(0,d.jsx)(n.default,{component:`dateField.literal`,whiteSpace:`pre`,props:{"aria-hidden":!0},children:e.text},t);let r=e.type,i=s.i(r,B,P),o=B[r],c=o===void 0,l=V?.type===r?V.buffer:``,u=s.a(r,B,l,j),p=c?le:r===`month`?`${o} – ${ve[o-1]}`:r===`dayPeriod`?u:String(o);return(0,d.jsx)(n.default,{component:`dateField.segment`,display:`inline-block`,px:.5,borderRadius:1,textAlign:`end`,whiteSpace:`nowrap`,variant:{placeholder:c,disabled:b},id:`${G}-${r}`,props:{[f]:r,role:`spinbutton`,tabIndex:b?-1:ue,contentEditable:!b&&!x,suppressContentEditableWarning:!0,spellCheck:!1,autoCorrect:`off`,autoCapitalize:`off`,inputMode:r===`dayPeriod`?`text`:`numeric`,enterKeyHint:`next`,"aria-label":ye?`${a.y(r,j)}, ${ye}`:a.y(r,j),"aria-valuemin":i.min,"aria-valuemax":i.max,"aria-valuenow":o??K[r]??i.min,"aria-valuetext":p,"aria-readonly":x||void 0,"aria-disabled":b||void 0,"aria-invalid":$||void 0,"aria-describedby":r===be?T:void 0,onFocus:()=>H({type:r,buffer:``}),onBlur:()=>H(null)},children:u},t)}),xe&&(0,d.jsx)(n.default,{component:`dateField.zone`,ms:2,fontSize:13,whiteSpace:`nowrap`,children:xe}),O!==void 0&&(0,d.jsx)(n.default,{display:`inline-flex`,ai:`center`,ms:`auto`,children:O}),C!==void 0||S?(0,d.jsx)(u.Fragment,{children:S?(0,d.jsx)(n.default,{tag:`input`,ref:W,component:`dateField.validation`,required:!0,disabled:b,props:{type:`text`,name:C,value:L??``,tabIndex:-1,"aria-hidden":!0,onChange:()=>{},onFocus:()=>X(0)}}):(0,d.jsx)(`input`,{ref:W,type:`hidden`,name:C,value:L??``,disabled:b})}):null]})]})}var m=e.f(p,`DateField`);exports.default=m;

package/components/dateField.mjs

@@ -6,31 +6,31 @@ import { a as r, o as i } from "../behavior.mjs";
 import { t as a } from "../identity.mjs";
 import { b as o, s, x as c, y as l } from "../dates.mjs";
 import { N as u, O as ee, i as te, x as ne } from "../date-math.mjs";
-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 m, t as ce, u as le } from "../date-input.mjs";
-import { a as ue } from "../reporting.mjs";
-import { n as de } from "../date-environment.mjs";
-import { Fragment as fe, useEffect as h, useMemo as g, useRef as pe, useState as _ } from "react";
-import { Fragment as me, jsx as v, jsxs as y } from "react/jsx-runtime";
+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";
+import { a as de } from "../reporting.mjs";
+import { n as fe } from "../date-environment.mjs";
+import { Fragment as pe, useEffect as m, useMemo as h, useRef as me, useState as g } from "react";
+import { Fragment as he, jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/components/dateField.tsx
-var b = "data-segment";
-function x(e, x) {
-	let { type: S = "date", value: he, defaultValue: ge = null, onValueChange: _e, zone: C, locale: ve, hourCycle: ye, granularity: w = "minute", min: be, max: xe, isDateUnavailable: Se, disabled: T = !1, readOnly: E = !1, required: Ce = !1, invalid: we, name: D, label: O, labelledBy: Te, describedBy: Ee, placeholderValue: k, disambiguation: A, showZone: De, end: Oe, autoFocus: ke, emptyText: Ae = "Empty", tabIndex: je = 0, props: Me, ...j } = e, M = de({
-		locale: ve,
-		zone: C === "none" ? void 0 : C
-	}), { locale: N } = M, P = S === "datetime" && C !== "none" ? M.zone : null, F = ye ?? o(N), I = g(() => ({
-		type: S,
+var y = "data-segment";
+function b(e, b) {
+	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({
+		locale: ye,
+		zone: S === "none" ? void 0 : S
+	}), { locale: N } = M, P = x === "datetime" && S !== "none" ? M.zone : null, F = be ?? o(N), I = h(() => ({
+		type: x,
 		locale: N,
 		hourCycle: F,
-		granularity: w
+		granularity: C
 	}), [
-		S,
+		x,
 		N,
 		F,
-		w
-	]), L = g(() => se(I), [I]), R = `${S}|${N}|${F}|${w}|${P}`, [z, Ne] = ue({
-		value: he,
-		defaultValue: ge,
-		onChange: (e, t) => _e?.(e, {
+		C
+	]), L = h(() => se(I), [I]), R = `${x}|${N}|${F}|${C}|${P}`, [z, Ne] = de({
+		value: ge,
+		defaultValue: _e,
+		onChange: (e, t) => ve?.(e, {
 			...t,
 			...ne(e, P ?? M.zone)
 		}),
@@ -39,7 +39,7 @@ function x(e, x) {
 			type: "valueChange",
 			content: ["value"]
 		}
-	}), [B, Pe] = _(() => ({
+	}), [B, Pe] = g(() => ({
 		draft: p(z, I, P),
 		source: z,
 		key: R
@@ -47,7 +47,7 @@ function x(e, x) {
 	if (B.source !== z || B.key !== R) {
 		let e = d(B.draft, L, I, {
 			zone: P,
-			disambiguation: A
+			disambiguation: k
 		}), t = {
 			draft: B.key === R && e === z ? B.draft : p(z, I, P),
 			source: z,
@@ -55,17 +55,17 @@ function x(e, x) {
 		};
 		Pe(t), V = t.draft;
 	}
-	let [H, U] = _(null), W = pe(null), G = pe(null), K = a("date-field"), Fe = O === void 0 ? void 0 : `${K}-label`, q = g(() => p(k ?? `${u(M.zone)}T00:00:00`, {
+	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`, {
 		...I,
 		type: I.type === "date" ? "date" : "datetime"
 	}, null), [
-		k,
+		O,
 		M.zone,
 		I
 	]), J = (e, t, n) => {
 		let r = d(e, L, I, {
 			zone: P,
-			disambiguation: A
+			disambiguation: k
 		});
 		Pe({
 			draft: e,
@@ -79,7 +79,7 @@ function x(e, x) {
 		draft: V,
 		editing: H,
 		commit: J
-	}), Ie = () => Array.from(W.current?.querySelectorAll(`[${b}]`) ?? []), X = (e) => {
+	}), Ie = () => Array.from(W.current?.querySelectorAll(`[${y}]`) ?? []), X = (e) => {
 		let t = Ie();
 		t[Math.max(0, Math.min(e, t.length - 1))]?.focus();
 	}, Z = (e) => Ie().indexOf(e), Le = (e, t, n, r) => {
@@ -93,22 +93,22 @@ function x(e, x) {
 			/^[^\p{L}\p{N}]$/u.test(n) && i[t] !== void 0 && X(Z(e) + 1);
 			return;
 		}
-		let s = le(i, t, o, n, I);
+		let s = ue(i, t, o, n, I);
 		U({
 			type: t,
 			buffer: s.advance ? "" : s.buffer
 		}), Y.current.commit(s.draft, "keyboard", r), s.advance && X(Z(e) + 1);
 	}, Re = r((e) => {
-		let n = e.target.closest(`[${b}]`);
-		if (!n || T || e.defaultPrevented) return;
-		let r = n.getAttribute(b), i = Z(n), a = t(n), { key: o } = e, s = Y.current.draft, c = (t) => {
-			e.preventDefault(), !E && (U({
+		let n = e.target.closest(`[${y}]`);
+		if (!n || w || e.defaultPrevented) return;
+		let r = n.getAttribute(y), i = Z(n), a = t(n), { key: o } = e, s = Y.current.draft, c = (t) => {
+			e.preventDefault(), !T && (U({
 				type: r,
 				buffer: ""
 			}), J(t, "keyboard", e));
 		};
 		if (o === "ArrowUp" || o === "ArrowDown") return c(ie(s, r, o === "ArrowUp" ? 1 : -1, I, q));
-		if (o === "PageUp" || o === "PageDown") return c(ie(s, r, (o === "PageUp" ? 1 : -1) * ce[r], I, q));
+		if (o === "PageUp" || o === "PageDown") return c(ie(s, r, (o === "PageUp" ? 1 : -1) * le[r], I, q));
 		if (o === "Home" || o === "End") {
 			let e = f(r, s, I);
 			return c({
@@ -121,7 +121,7 @@ function x(e, x) {
 			return;
 		}
 		if (o === "Backspace" || o === "Delete") {
-			if (e.preventDefault(), E) return;
+			if (e.preventDefault(), T) return;
 			let t = Y.current.editing?.type === r ? Y.current.editing.buffer : "";
 			if (t.length > 1) {
 				let n = t.slice(0, -1);
@@ -145,15 +145,15 @@ function x(e, x) {
 			e.preventDefault(), G.current?.form?.requestSubmit();
 			return;
 		}
-		o === "Unidentified" || o === "Process" || e.ctrlKey || e.metaKey || e.altKey || o.length !== 1 || (e.preventDefault(), E || Le(n, r, o, e));
+		o === "Unidentified" || o === "Process" || e.ctrlKey || e.metaKey || e.altKey || o.length !== 1 || (e.preventDefault(), T || Le(n, r, o, e));
 	});
-	h(() => {
+	m(() => {
 		let e = W.current;
 		if (!e) return;
 		let t = (e) => {
-			let t = e.target?.closest(`[${b}]`);
-			if (!t || (e.preventDefault(), T || E)) return;
-			let n = t.getAttribute(b);
+			let t = e.target?.closest(`[${y}]`);
+			if (!t || (e.preventDefault(), w || T)) return;
+			let n = t.getAttribute(y);
 			if (e.inputType.startsWith("delete")) {
 				t.dispatchEvent(new KeyboardEvent("keydown", {
 					key: "Backspace",
@@ -167,38 +167,38 @@ function x(e, x) {
 		return e.addEventListener("beforeinput", t), () => e.removeEventListener("beforeinput", t);
 	});
 	let ze = r((e) => {
-		if (e.preventDefault(), T || E) return;
-		let t = S === "datetime" ? P ? "instant" : "datetime" : S, n = oe(e.clipboardData.getData("text"), {
+		if (e.preventDefault(), w || T) return;
+		let t = x === "datetime" ? P ? "instant" : "datetime" : x, n = oe(e.clipboardData.getData("text"), {
 			locale: N,
 			kind: t,
 			zone: P ?? M.zone
 		});
 		n && J(p(n, I, P), "paste", e);
 	});
-	h(() => {
+	m(() => {
 		let e = G.current?.form;
 		if (!e) return;
-		let t = (e) => Y.current.commit(p(ge, I, P), "reset", e);
+		let t = (e) => Y.current.commit(p(_e, I, P), "reset", e);
 		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
-	}), h(() => {
+	}), m(() => {
 		ke && X(0);
 	}, []);
-	let Be = z !== null && (be != null && te(z, be) < 0 || xe != null && te(z, xe) > 0), Ve = z !== null && S !== "time" && Se ? ee(z, { zone: P ?? M.zone }) : null, Q = we ?? (Be || Ve !== null && Se(Ve)), He = S === "time" ? [] : c(N), Ue = typeof O == "string" ? O : void 0, We = m(L)[0], $ = S === "datetime" && P && (De ?? P !== M.readerZone) ? s(P, {
+	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, {
 		locale: N,
 		style: "short",
 		at: z ?? void 0
 	}) : null;
-	return /* @__PURE__ */ y(me, { children: [O !== void 0 && /* @__PURE__ */ v(n, {
+	return /* @__PURE__ */ v(he, { children: [D !== void 0 && /* @__PURE__ */ _(n, {
 		component: "dateField.label",
 		display: "block",
 		mb: 1.5,
 		fontSize: 14,
 		id: Fe,
 		props: { onClick: () => X(0) },
-		children: O
-	}), /* @__PURE__ */ y(n, {
+		children: D
+	}), /* @__PURE__ */ v(n, {
 		ref: (e) => {
-			W.current = e, typeof x == "function" ? x(e) : x && (x.current = e);
+			W.current = e, typeof b == "function" ? b(e) : b && (b.current = e);
 		},
 		component: "dateField",
 		display: "inline-flex",
@@ -211,36 +211,36 @@ function x(e, x) {
 		},
 		...j,
 		variant: [j.variant, {
-			disabled: T,
+			disabled: w,
 			invalid: Q
 		}],
 		id: K,
 		props: {
 			role: "group",
-			"aria-labelledby": [Fe, Te].filter(Boolean).join(" ") || void 0,
-			"aria-describedby": Ee,
-			"aria-disabled": T || void 0,
+			"aria-labelledby": [Fe, Ee].filter(Boolean).join(" ") || void 0,
+			"aria-describedby": De,
+			"aria-disabled": w || void 0,
 			"aria-invalid": Q || void 0,
 			...Me,
 			onKeyDown: Re,
 			onPaste: ze,
 			onPointerDown: (e) => {
-				if (e.target !== e.currentTarget || T) return;
+				if (e.target !== e.currentTarget || w) return;
 				e.preventDefault();
-				let t = m(L).findIndex((e) => Y.current.draft[e] === void 0);
+				let t = ce(L).findIndex((e) => Y.current.draft[e] === void 0);
 				X(t === -1 ? 0 : t);
 			}
 		},
 		children: [
 			L.map((e, t) => {
-				if (e.type === "literal") return /* @__PURE__ */ v(n, {
+				if (e.type === "literal") return /* @__PURE__ */ _(n, {
 					component: "dateField.literal",
 					whiteSpace: "pre",
 					props: { "aria-hidden": !0 },
 					children: e.text
 				}, t);
 				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);
-				return /* @__PURE__ */ v(n, {
+				return /* @__PURE__ */ _(n, {
 					component: "dateField.segment",
 					display: "inline-block",
 					px: .5,
@@ -249,14 +249,14 @@ function x(e, x) {
 					whiteSpace: "nowrap",
 					variant: {
 						placeholder: o,
-						disabled: T
+						disabled: w
 					},
 					id: `${K}-${r}`,
 					props: {
-						[b]: r,
+						[y]: r,
 						role: "spinbutton",
-						tabIndex: T ? -1 : je,
-						contentEditable: !T && !E,
+						tabIndex: w ? -1 : je,
+						contentEditable: !w && !T,
 						suppressContentEditableWarning: !0,
 						spellCheck: !1,
 						autoCorrect: "off",
@@ -268,10 +268,10 @@ function x(e, x) {
 						"aria-valuemax": i.max,
 						"aria-valuenow": a ?? q[r] ?? i.min,
 						"aria-valuetext": u,
-						"aria-readonly": E || void 0,
-						"aria-disabled": T || void 0,
+						"aria-readonly": T || void 0,
+						"aria-disabled": w || void 0,
 						"aria-invalid": Q || void 0,
-						"aria-describedby": r === We ? Ee : void 0,
+						"aria-describedby": r === We ? De : void 0,
 						onFocus: () => U({
 							type: r,
 							buffer: ""
@@ -281,39 +281,44 @@ function x(e, x) {
 					children: c
 				}, t);
 			}),
-			$ && /* @__PURE__ */ v(n, {
+			$ && /* @__PURE__ */ _(n, {
 				component: "dateField.zone",
 				ms: 2,
 				fontSize: 13,
 				whiteSpace: "nowrap",
 				children: $
 			}),
-			Oe,
-			D !== void 0 || Ce ? /* @__PURE__ */ v(fe, { children: Ce ? /* @__PURE__ */ v(n, {
+			A !== void 0 && /* @__PURE__ */ _(n, {
+				display: "inline-flex",
+				ai: "center",
+				ms: "auto",
+				children: A
+			}),
+			E !== void 0 || we ? /* @__PURE__ */ _(pe, { children: we ? /* @__PURE__ */ _(n, {
 				tag: "input",
 				ref: G,
 				component: "dateField.validation",
 				required: !0,
-				disabled: T,
+				disabled: w,
 				props: {
 					type: "text",
-					name: D,
+					name: E,
 					value: z ?? "",
 					tabIndex: -1,
 					"aria-hidden": !0,
 					onChange: () => {},
 					onFocus: () => X(0)
 				}
-			}) : /* @__PURE__ */ v("input", {
+			}) : /* @__PURE__ */ _("input", {
 				ref: G,
 				type: "hidden",
-				name: D,
+				name: E,
 				value: z ?? "",
-				disabled: T
+				disabled: w
 			}) }) : null
 		]
 	})] });
 }
-var S = e(x, "DateField");
+var x = e(b, "DateField");
 //#endregion
-export { S as default };
+export { x as default };

package/components/datePicker.cjs

@@ -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;
+"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}),(0,h.jsxs)(t.default,{display:`inline-flex`,ai:`center`,gap:2,ms:`auto`,children:[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;

package/components/datePicker.mjs

@@ -472,42 +472,47 @@ function A(e, n) {
 					props: { "aria-label": ne },
 					invalid: _ ?? Y
 				}),
-				N && R && !f && !p && /* @__PURE__ */ E(t, {
-					tag: "button",
-					component: "datePicker.clear",
+				/* @__PURE__ */ D(t, {
 					display: "inline-flex",
 					ai: "center",
-					jc: "center",
-					width: 6,
-					height: 6,
-					borderRadius: 999,
-					props: {
-						type: "button",
-						"aria-label": de,
-						tabIndex: F,
-						onClick: (e) => X(null, null, "clear", e)
-					},
-					children: /* @__PURE__ */ E(ae, {})
-				}),
-				/* @__PURE__ */ E(t, {
-					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: f || p,
-					props: {
-						type: "button",
-						"aria-label": J ? `${P}, ${J}` : P,
-						tabIndex: F,
-						...me
-					},
-					children: /* @__PURE__ */ E(re, {})
+					gap: 2,
+					ms: "auto",
+					children: [N && R && !f && !p && /* @__PURE__ */ E(t, {
+						tag: "button",
+						component: "datePicker.clear",
+						display: "inline-flex",
+						ai: "center",
+						jc: "center",
+						width: 6,
+						height: 6,
+						borderRadius: 999,
+						props: {
+							type: "button",
+							"aria-label": de,
+							tabIndex: F,
+							onClick: (e) => X(null, null, "clear", e)
+						},
+						children: /* @__PURE__ */ E(ae, {})
+					}), /* @__PURE__ */ E(t, {
+						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: f || p,
+						props: {
+							type: "button",
+							"aria-label": J ? `${P}, ${J}` : P,
+							tabIndex: F,
+							...me
+						},
+						children: /* @__PURE__ */ E(re, {})
+					})]
 				})
 			]
 		}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box-kite/react",
-  "version": "2.2.8",
+  "version": "2.2.9",
   "type": "module",
   "sideEffects": [
     "pages/**"
@@ -454,7 +454,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "49.64 kB"
+      "limit": "49.66 kB"
     },
     {
       "name": "Calendar",
@@ -480,7 +480,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "61.85 kB"
+      "limit": "61.87 kB"
     },
     {
       "name": "DateTime",
@@ -613,7 +613,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "165.71 kB"
+      "limit": "165.73 kB"
     }
   ],
   "repository": {
@@ -653,7 +653,7 @@
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@box-kite/core": "2.2.8",
+    "@box-kite/core": "2.2.9",
     "csstype": "^3.2.3",
     "use-sync-external-store": "^1.6.0"
   },