@tedi-design-system/react 19.0.0-rc.7 → 19.0.0-rc.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -1
- package/bundle-stats.html +1 -1
- package/index.css +1 -1
- package/package.json +5 -3
- package/src/tedi/components/content/calendar/calendar.cjs.js +1 -1
- package/src/tedi/components/content/calendar/calendar.d.ts +12 -0
- package/src/tedi/components/content/calendar/calendar.es.js +39 -35
- package/src/tedi/components/content/calendar/components/calendar-header/calendar-header.cjs.js +1 -1
- package/src/tedi/components/content/calendar/components/calendar-header/calendar-header.d.ts +13 -1
- package/src/tedi/components/content/calendar/components/calendar-header/calendar-header.es.js +40 -35
- package/src/tedi/components/form/date-field/date-field.cjs.js +1 -1
- package/src/tedi/components/form/date-field/date-field.d.ts +10 -0
- package/src/tedi/components/form/date-field/date-field.es.js +176 -170
- package/src/tedi/components/form/date-field/date-picker-modal/date-picker-modal.cjs.js +1 -1
- package/src/tedi/components/form/date-field/date-picker-modal/date-picker-modal.d.ts +4 -0
- package/src/tedi/components/form/date-field/date-picker-modal/date-picker-modal.es.js +47 -43
- package/src/tedi/components/form/date-time-field/date-time-field.cjs.js +1 -1
- package/src/tedi/components/form/date-time-field/date-time-field.d.ts +10 -0
- package/src/tedi/components/form/date-time-field/date-time-field.es.js +92 -88
- package/src/tedi/components/form/file-upload/file-upload.cjs.js +1 -1
- package/src/tedi/components/form/file-upload/file-upload.es.js +11 -11
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import { jsx as o, jsxs as b } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import { useState as g, useEffect as
|
|
4
|
-
import { Heading as
|
|
2
|
+
import W from "../../../../../../external/classnames/index.es.js";
|
|
3
|
+
import { useState as g, useEffect as X, useCallback as w } from "react";
|
|
4
|
+
import { Heading as Z } from "../../../base/typography/heading/heading.es.js";
|
|
5
5
|
import { Button as T } from "../../../buttons/button/button.es.js";
|
|
6
|
-
import { ClosingButton as
|
|
7
|
-
import { Calendar as
|
|
8
|
-
import { resolveRangeSelection as
|
|
6
|
+
import { ClosingButton as $ } from "../../../buttons/closing-button/closing-button.es.js";
|
|
7
|
+
import { Calendar as v } from "../../../content/calendar/calendar.es.js";
|
|
8
|
+
import { resolveRangeSelection as ee } from "../date-field-helpers.es.js";
|
|
9
9
|
import c from "./date-picker-modal.module.scss.es.js";
|
|
10
|
-
import { useLabels as
|
|
10
|
+
import { useLabels as te } from "../../../../providers/label-provider/use-labels.es.js";
|
|
11
11
|
import { Modal as d } from "../../../overlays/modal/modal.es.js";
|
|
12
|
-
import { useModal as
|
|
13
|
-
const _ = (e, n) => e instanceof Date ? e : Array.isArray(e) && e.length > 0 ? [...e].sort((a, l) => a.getTime() - l.getTime())[0] : e && typeof e == "object" && "from" in e && e.from instanceof Date ? e.from : e && typeof e == "object" && "to" in e && e.to instanceof Date ? e.to : n ?? /* @__PURE__ */ new Date(),
|
|
14
|
-
const { labelId: n, onOpenChange: a } =
|
|
12
|
+
import { useModal as re } from "../../../overlays/modal/modal-context.es.js";
|
|
13
|
+
const _ = (e, n) => e instanceof Date ? e : Array.isArray(e) && e.length > 0 ? [...e].sort((a, l) => a.getTime() - l.getTime())[0] : e && typeof e == "object" && "from" in e && e.from instanceof Date ? e.from : e && typeof e == "object" && "to" in e && e.to instanceof Date ? e.to : n ?? /* @__PURE__ */ new Date(), ie = ({ title: e }) => {
|
|
14
|
+
const { labelId: n, onOpenChange: a } = re();
|
|
15
15
|
return /* @__PURE__ */ b("div", { className: c["tedi-date-picker-modal__header"], children: [
|
|
16
|
-
/* @__PURE__ */ o(
|
|
17
|
-
/* @__PURE__ */ o(
|
|
16
|
+
/* @__PURE__ */ o(Z, { element: "h2", modifiers: "h4", id: n, className: c["tedi-date-picker-modal__title"], children: e }),
|
|
17
|
+
/* @__PURE__ */ o($, { size: "small", onClick: () => a(!1) })
|
|
18
18
|
] });
|
|
19
|
-
},
|
|
19
|
+
}, oe = (e) => {
|
|
20
20
|
const {
|
|
21
21
|
open: n,
|
|
22
22
|
onOpenChange: a,
|
|
@@ -32,54 +32,56 @@ const _ = (e, n) => e instanceof Date ? e : Array.isArray(e) && e.length > 0 ? [
|
|
|
32
32
|
availableDays: H,
|
|
33
33
|
footer: L,
|
|
34
34
|
monthYearSelectType: V,
|
|
35
|
-
|
|
36
|
-
|
|
35
|
+
minYear: Y,
|
|
36
|
+
maxYear: I,
|
|
37
|
+
dayStatus: K,
|
|
38
|
+
showNavigation: q,
|
|
37
39
|
selectionLevel: m = "days",
|
|
38
40
|
initialView: h,
|
|
39
41
|
initialMonth: p,
|
|
40
|
-
modalProps:
|
|
41
|
-
title:
|
|
42
|
-
...
|
|
43
|
-
} = e, { getLabel: y } =
|
|
44
|
-
|
|
42
|
+
modalProps: r,
|
|
43
|
+
title: z,
|
|
44
|
+
...E
|
|
45
|
+
} = e, { getLabel: y } = te(), [i, f] = g(l), [F, C] = g(h ?? m), [R, D] = g(() => _(l, p));
|
|
46
|
+
X(() => {
|
|
45
47
|
n && (f(l), C(h ?? m), D(_(l, p)));
|
|
46
48
|
}, [n, l, m, h, p]);
|
|
47
|
-
const
|
|
49
|
+
const G = w(
|
|
48
50
|
(s, u) => {
|
|
49
|
-
f(t === "range" ? (
|
|
51
|
+
f(t === "range" ? (U) => ee(s, U, u) : s);
|
|
50
52
|
},
|
|
51
53
|
[t]
|
|
52
|
-
),
|
|
54
|
+
), J = w(
|
|
53
55
|
(s) => {
|
|
54
56
|
f((u) => t === "range" ? { from: s, to: void 0 } : t === "multiple" ? [...Array.isArray(u) ? u : [], s] : s);
|
|
55
57
|
},
|
|
56
58
|
[t]
|
|
57
|
-
),
|
|
58
|
-
M || (A(
|
|
59
|
-
}, N =
|
|
59
|
+
), P = t === "multiple" ? Array.isArray(i) && i.length > 0 : t === "range" ? !!i && typeof i == "object" && "from" in i && i.from instanceof Date : i instanceof Date, M = k === !0 && !P, Q = () => {
|
|
60
|
+
M || (A(i), a(!1));
|
|
61
|
+
}, N = z ?? y(t === "range" ? "date-field.modal-title-range" : t === "multiple" ? "date-field.modal-title-multiple" : "date-field.modal-title");
|
|
60
62
|
return /* @__PURE__ */ o(d, { open: n, onToggle: a, children: /* @__PURE__ */ b(
|
|
61
63
|
d.Content,
|
|
62
64
|
{
|
|
63
65
|
position: "center",
|
|
64
66
|
"aria-label": N,
|
|
65
|
-
...
|
|
66
|
-
md: { width: "max-content", ...
|
|
67
|
-
sm: { width: "full", ...
|
|
68
|
-
className:
|
|
67
|
+
...r,
|
|
68
|
+
md: { width: "max-content", ...r == null ? void 0 : r.md },
|
|
69
|
+
sm: { width: "full", ...r == null ? void 0 : r.sm },
|
|
70
|
+
className: W(c["tedi-date-picker-modal"], r == null ? void 0 : r.className),
|
|
69
71
|
children: [
|
|
70
|
-
/* @__PURE__ */ o(d.Header, { children: /* @__PURE__ */ o(
|
|
72
|
+
/* @__PURE__ */ o(d.Header, { children: /* @__PURE__ */ o(ie, { title: N }) }),
|
|
71
73
|
/* @__PURE__ */ o(d.Body, { className: c["tedi-date-picker-modal__body"], children: /* @__PURE__ */ o(
|
|
72
|
-
|
|
74
|
+
v,
|
|
73
75
|
{
|
|
74
|
-
...
|
|
76
|
+
...E,
|
|
75
77
|
numberOfMonths: S,
|
|
76
|
-
view:
|
|
78
|
+
view: F,
|
|
77
79
|
selectionLevel: m,
|
|
78
|
-
currentMonth:
|
|
80
|
+
currentMonth: R,
|
|
79
81
|
setCurrentMonth: D,
|
|
80
82
|
setView: C,
|
|
81
83
|
mode: t,
|
|
82
|
-
value:
|
|
84
|
+
value: i,
|
|
83
85
|
locale: j,
|
|
84
86
|
localeCode: x,
|
|
85
87
|
showOutsideDays: O,
|
|
@@ -88,23 +90,25 @@ const _ = (e, n) => e instanceof Date ? e : Array.isArray(e) && e.length > 0 ? [
|
|
|
88
90
|
availableDays: H,
|
|
89
91
|
footer: L,
|
|
90
92
|
monthYearSelectType: V,
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
93
|
+
minYear: Y,
|
|
94
|
+
maxYear: I,
|
|
95
|
+
dayStatus: K,
|
|
96
|
+
showNavigation: q,
|
|
97
|
+
handleSelect: G,
|
|
98
|
+
applyValue: J,
|
|
95
99
|
className: c["tedi-date-picker-modal__calendar"],
|
|
96
100
|
bordered: !1
|
|
97
101
|
}
|
|
98
102
|
) }),
|
|
99
103
|
/* @__PURE__ */ b(d.Footer, { children: [
|
|
100
104
|
/* @__PURE__ */ o(T, { visualType: "secondary", onClick: () => a(!1), children: y("date-field.cancel") }),
|
|
101
|
-
/* @__PURE__ */ o(T, { onClick:
|
|
105
|
+
/* @__PURE__ */ o(T, { onClick: Q, disabled: M, children: y("date-field.confirm") })
|
|
102
106
|
] })
|
|
103
107
|
]
|
|
104
108
|
}
|
|
105
109
|
) });
|
|
106
110
|
};
|
|
107
|
-
|
|
111
|
+
oe.displayName = "DatePickerModal";
|
|
108
112
|
export {
|
|
109
|
-
|
|
113
|
+
oe as DatePickerModal
|
|
110
114
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),D=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),w=require("../../../../../external/classnames/index.cjs.js"),n=require("react"),ke=require("../../buttons/button/button.cjs.js"),vt=require("../../content/calendar/calendar.cjs.js"),y=require("../date-field/date-field-helpers.cjs.js"),xt=require("../textfield/textfield.cjs.js"),Fe=require("../time-picker/time-picker.cjs.js"),a=require("./date-time-field.module.scss.cjs.js"),Nt=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Dt=require("../../../providers/label-provider/use-labels.cjs.js"),Te=require("../../../helpers/hooks/use-breakpoint.cjs.js"),yt=require("../../../../../external/react-day-picker/dist/esm/locale/et.cjs.js"),jt=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),G=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),kt=require("../../../../../external/react-day-picker/dist/esm/utils/dateMatchModifiers.cjs.js"),h=s=>String(s).padStart(2,"0"),g=s=>s?`${h(s.getHours())}:${h(s.getMinutes())}`:"00:00",_=(s,c)=>{const[U,b]=c.split(":"),R=Number(U),P=Number(b),E=new Date(s);return E.setHours(Number.isFinite(R)?R:0,Number.isFinite(P)?P:0,0,0),E},ne=s=>s instanceof Date,Ft=s=>s?`${s.getFullYear()}-${h(s.getMonth()+1)}-${h(s.getDate())}T${h(s.getHours())}:${h(s.getMinutes())}`:"",Tt=s=>{if(!s)return;const c=new Date(s);return isNaN(c.getTime())?void 0:c},Mt=s=>!s||ne(s)?{}:s,St=s=>ne(s)?s:void 0,Me=n.forwardRef((s,c)=>{const{getCurrentBreakpointProps:U}=Nt.useBreakpointProps(s.defaultServerBreakpoint),{getLabel:b}=Dt.useLabels(),R=Te.default(s.defaultServerBreakpoint),P=Te.isBreakpointBelow(R,"md"),{layout:E="side-by-side",useNativePicker:Se=!1,monthYearSelectType:Ce="dropdown",timeGridVariant:we,showOutsideDays:Re=!0,availableTimes:v,timeHeading:z=b("dateTimeField.timeHeading")}=U(s),{id:Pe,label:Ee,placeholder:Ve,className:qe,value:le,defaultValue:Ae,onChange:W,required:de,readOnly:Oe,disabled:V,minDate:oe,maxDate:ce,disablePast:ue,disableFuture:me,disabledMatchers:j,stepMinutes:fe=15,initialMonth:Y,locale:$e=yt.et,localeCode:k="et-EE",selectTimeLabel:Le=b("dateTimeField.selectTime"),backLabel:He=b("dateTimeField.back"),mode:Be="single",selectionLevel:Ie="days",inputProps:l,disabledDateErrorMessage:Ge=b("dateField.disabledDateError")}=s,d=Be==="range",f=Se&&!d,F=d?"side-by-side":E,he=we??(F==="multi-step"?"radio":"button"),pe=le!==void 0,[Ue,ze]=n.useState(Ae),x=pe?le:Ue,u=d?Mt(x):{},m=d?void 0:St(x),[N,J]=n.useState(!1),[We,K]=n.useState("date"),[Ye,ge]=n.useState("days"),Q=d?u.from:m,[Je,q]=n.useState(()=>Q??Y??new Date),_e=n.useRef(Q);_e.current=Q,n.useEffect(()=>{N||(K("date"),ge("days"),q(_e.current??Y??new Date))},[N,Y]);const A=n.useMemo(()=>new Intl.DateTimeFormat(k,{day:"2-digit",month:"2-digit",year:"numeric"}),[k]),Ke=n.useMemo(()=>new Intl.DateTimeFormat(k,{day:"2-digit",month:"2-digit",year:"2-digit"}),[k]),O=n.useCallback(e=>e?`${A.format(e)} ${h(e.getHours())}:${h(e.getMinutes())}`:"",[A]),$=n.useCallback(e=>{if(!e)return"";if(ne(e))return O(e);const t=O(e.from),r=O(e.to);return!t&&!r?"":r?t?`${t} – ${r}`:r:t},[O]),Qe=n.useMemo(()=>{const e=y.getLocaleDateParts(A),{fieldOrder:t}=e,r=new RegExp(`^${y.buildDateRegexSource(e)}\\s+(\\d{2}):(\\d{2})$`);return gt=>{const I=gt.trim().match(r);if(!I)return;const De={};t.forEach((_t,bt)=>{De[_t]=Number(I[bt+1])});const ye=Number(I[t.length+1]),je=Number(I[t.length+2]),{day:ae,month:se,year:re}=De;if(ae===void 0||se===void 0||re===void 0||ye>23||je>59)return;const C=new Date(re,se-1,ae,ye,je,0,0);if(!(isNaN(C.getTime())||C.getFullYear()!==re||C.getMonth()!==se-1||C.getDate()!==ae))return C}},[A]),[Xe,X]=n.useState(()=>$(x)),[be,p]=n.useState(!1);n.useEffect(()=>{X($(x))},[x,$]);const Ze=D.useFloating({open:N,onOpenChange:J,placement:"bottom-end",middleware:[G.offset(y.CALENDAR_POPOVER_OFFSET),G.flip(),G.shift({padding:y.CALENDAR_POPOVER_PADDING}),G.size({padding:y.CALENDAR_POPOVER_PADDING,apply({availableWidth:e,elements:t}){t.floating.style.maxWidth=`${e}px`}})],whileElementsMounted:jt.autoUpdate}),{refs:Z,context:ee,x:et,y:tt,strategy:it}=Ze,at=D.useInteractions([D.useDismiss(ee,{outsidePress:e=>{const t=e.target;return!(t!=null&&t.closest('[role="menu"], [role="listbox"]'))}}),D.useRole(ee,{role:"dialog"})]),L=n.useRef(null),st=n.useCallback(e=>{L.current=e,typeof c=="function"?c(e):c&&(c.current=e)},[c]);n.useEffect(()=>{var e;(e=L.current)!=null&&e.inner&&Z.setReference(L.current.inner)},[Z]);const o=e=>{pe||ze(e),W==null||W(e),X($(e))},T=n.useCallback(e=>{if(v)return typeof v=="function"?v(e??new Date):v},[v]),M=n.useCallback((e,t)=>{const r=T(e);return!r||r.length===0||r.includes(t)?t:r[0]},[T]),rt=e=>{if(d){const t=e;if(!t||!t.from&&!t.to){o(void 0);return}const r={};t.from&&(r.from=_(t.from,M(t.from,g(u.from)))),t.to&&(r.to=_(t.to,M(t.to,g(u.to)))),o(r);return}e instanceof Date?o(_(e,M(e,g(m)))):e===void 0&&o(void 0)},nt=e=>{if(d){o({from:_(e,M(e,g(u.from)))});return}o(_(e,M(e,g(m))))},lt=e=>{const t=m??new Date;o(_(t,e)),F==="multi-step"&&T(t)&&J(!1)},dt=e=>t=>{const r=u[e]??u.from??new Date;o({...u,[e]:_(r,t)})},H=n.useMemo(()=>[...y.buildDisabledMatchers({minDate:oe,maxDate:ce,disablePast:ue,disableFuture:me}),...j?Array.isArray(j)?j:[j]:[]],[oe,ce,ue,me,j]),ve=n.useCallback(e=>kt.dateMatchModifiers(e,H),[H]),ot=e=>{if(X(e),e===""){p(!1),o(void 0);return}if(f){const r=Tt(e);if(!r){p(!1);return}if(ve(r)){p(!0);return}p(!1),o(r),q(r);return}if(d)return;const t=Qe(e);if(!t){p(!1);return}if(ve(t)){p(!0);return}p(!1),o(t),q(t)},ct=()=>{var t;const e=(t=L.current)==null?void 0:t.input;if(e){if(typeof e.showPicker=="function"){e.showPicker();return}e.focus()}},ut=()=>{if(!V){if(f){ct();return}J(e=>!e)}},mt=F==="multi-step"?i.jsx("div",{className:a.default["tedi-date-time-field__select-time-wrapper"],children:i.jsx(ke.Button,{type:"button",visualType:"link",size:"small",iconLeft:"schedule",onClick:()=>K("time"),children:Le})}):void 0,te=i.jsx(vt.Calendar,{view:Ye,setView:ge,selectionLevel:Ie,currentMonth:Je,setCurrentMonth:q,mode:d?"range":"single",value:d?u:m,numberOfMonths:d&&!P?2:1,locale:$e,localeCode:k,showOutsideDays:Re,monthYearSelectType:Ce,disabledMatchers:H.length?H:void 0,required:de,handleSelect:rt,applyValue:nt,footer:mt,className:w.default(a.default["tedi-date-time-field__calendar"],F==="side-by-side"&&a.default["tedi-date-time-field__calendar--split"])}),ie=T(m),ft=!ie||ie.length===0,xe=i.jsx(Fe.TimePicker,{value:g(m),stepMinutes:fe,availableTimes:ie,gridVariant:he,onChange:lt,className:w.default(a.default["tedi-date-time-field__time-picker"],{[a.default["tedi-date-time-field__time-picker--wheel"]]:ft})}),Ne=e=>{const t=T(u[e]),r=!t||t.length===0;return i.jsx(Fe.TimePicker,{value:g(u[e]),stepMinutes:fe,availableTimes:t,gridVariant:he,onChange:dt(e),className:w.default(a.default["tedi-date-time-field__time-picker"],{[a.default["tedi-date-time-field__time-picker--wheel"]]:r})})},S=l==null?void 0:l.helper,B=be?{text:Ge,type:"error"}:null,ht=B?S?Array.isArray(S)?[...S,B]:[S,B]:B:S,pt={...l,id:Pe,label:Ee,value:f?Ft(m):Xe,placeholder:Ve,readOnly:Oe||!f&&!!v&&!!x,icon:"calendar_today",isClearable:!0,required:de,disabled:V,invalid:be||(l==null?void 0:l.invalid),helper:ht,onIconClick:ut,onChange:ot,className:w.default(a.default["tedi-date-time-field__textfield"],l==null?void 0:l.className,{[a.default["tedi-date-time-field__icon--disabled"]]:V}),input:{...l==null?void 0:l.input,type:f?"datetime-local":"text","aria-expanded":f?void 0:N}};return i.jsxs(i.Fragment,{children:[i.jsx("div",{className:w.default(a.default["tedi-date-time-field__container"],qe),"aria-haspopup":"dialog",children:i.jsx(xt.TextField,{ref:st,"aria-expanded":f?void 0:N,...pt})}),!f&&i.jsx(D.FloatingPortal,{children:N&&!V&&i.jsx(D.FloatingFocusManager,{context:ee,modal:!1,initialFocus:-1,children:i.jsx("div",{ref:Z.setFloating,className:a.default["tedi-date-time-field__popup"],...at.getFloatingProps({style:{position:it,top:tt??0,left:et??0}}),children:d?i.jsxs("div",{className:a.default["tedi-date-time-field__range"],children:[te,i.jsx("div",{className:a.default["tedi-date-time-field__range-separator"],"aria-hidden":"true",children:i.jsx("div",{className:a.default["tedi-date-time-field__range-separator-line"]})}),i.jsxs("div",{className:a.default["tedi-date-time-field__range-times"],children:[i.jsxs("div",{className:a.default["tedi-date-time-field__range-time"],children:[i.jsx("div",{className:a.default["tedi-date-time-field__split-time-header"],children:i.jsx("span",{className:a.default["tedi-date-time-field__split-heading"],children:z})}),i.jsx("div",{className:a.default["tedi-date-time-field__split-time-body"],children:Ne("from")})]}),i.jsxs("div",{className:a.default["tedi-date-time-field__range-time"],children:[i.jsx("div",{className:a.default["tedi-date-time-field__split-time-header"],children:i.jsx("span",{className:a.default["tedi-date-time-field__split-heading"],children:z})}),i.jsx("div",{className:a.default["tedi-date-time-field__split-time-body"],children:Ne("to")})]})]})]}):F==="side-by-side"?i.jsxs("div",{className:a.default["tedi-date-time-field__split"],children:[te,i.jsx("div",{className:a.default["tedi-date-time-field__split-separator"],"aria-hidden":"true",children:i.jsx("div",{className:a.default["tedi-date-time-field__split-separator-line"]})}),i.jsxs("div",{className:a.default["tedi-date-time-field__split-time"],children:[i.jsx("div",{className:a.default["tedi-date-time-field__split-time-header"],children:i.jsx("span",{className:a.default["tedi-date-time-field__split-heading"],children:z})}),i.jsx("div",{className:a.default["tedi-date-time-field__split-time-body"],children:xe})]})]}):We==="date"?te:i.jsxs("div",{className:a.default["tedi-date-time-field__time-step"],children:[i.jsxs("header",{className:a.default["tedi-date-time-field__time-header"],children:[i.jsx(ke.Button,{type:"button",visualType:"link",size:"small",iconLeft:"arrow_back",onClick:()=>K("date"),children:He}),i.jsx("span",{className:a.default["tedi-date-time-field__time-date"],children:Ke.format(m??new Date)})]}),i.jsx("div",{className:a.default["tedi-date-time-field__time-body"],children:xe})]})})})})]})});Me.displayName="DateTimeField";exports.DateTimeField=Me;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),D=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),w=require("../../../../../external/classnames/index.cjs.js"),n=require("react"),ke=require("../../buttons/button/button.cjs.js"),Nt=require("../../content/calendar/calendar.cjs.js"),y=require("../date-field/date-field-helpers.cjs.js"),Dt=require("../textfield/textfield.cjs.js"),Fe=require("../time-picker/time-picker.cjs.js"),a=require("./date-time-field.module.scss.cjs.js"),yt=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),jt=require("../../../providers/label-provider/use-labels.cjs.js"),Te=require("../../../helpers/hooks/use-breakpoint.cjs.js"),kt=require("../../../../../external/react-day-picker/dist/esm/locale/et.cjs.js"),Ft=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),Y=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),Tt=require("../../../../../external/react-day-picker/dist/esm/utils/dateMatchModifiers.cjs.js"),h=s=>String(s).padStart(2,"0"),g=s=>s?`${h(s.getHours())}:${h(s.getMinutes())}`:"00:00",_=(s,c)=>{const[G,b]=c.split(":"),R=Number(G),P=Number(b),E=new Date(s);return E.setHours(Number.isFinite(R)?R:0,Number.isFinite(P)?P:0,0,0),E},ne=s=>s instanceof Date,Mt=s=>s?`${s.getFullYear()}-${h(s.getMonth()+1)}-${h(s.getDate())}T${h(s.getHours())}:${h(s.getMinutes())}`:"",St=s=>{if(!s)return;const c=new Date(s);return isNaN(c.getTime())?void 0:c},Ct=s=>!s||ne(s)?{}:s,wt=s=>ne(s)?s:void 0,Me=n.forwardRef((s,c)=>{const{getCurrentBreakpointProps:G}=yt.useBreakpointProps(s.defaultServerBreakpoint),{getLabel:b}=jt.useLabels(),R=Te.default(s.defaultServerBreakpoint),P=Te.isBreakpointBelow(R,"md"),{layout:E="side-by-side",useNativePicker:Se=!1,monthYearSelectType:Ce="dropdown",timeGridVariant:we,showOutsideDays:Re=!0,availableTimes:v,timeHeading:U=b("dateTimeField.timeHeading")}=G(s),{id:Pe,label:Ee,placeholder:Ve,className:qe,value:le,defaultValue:Ae,onChange:z,required:de,readOnly:Oe,disabled:V,minDate:oe,maxDate:ce,disablePast:ue,disableFuture:me,disabledMatchers:j,stepMinutes:fe=15,initialMonth:W,locale:$e=kt.et,localeCode:k="et-EE",selectTimeLabel:Le=b("dateTimeField.selectTime"),backLabel:He=b("dateTimeField.back"),mode:Be="single",selectionLevel:Ie="days",minYear:Ye,maxYear:Ge,inputProps:l,disabledDateErrorMessage:Ue=b("dateField.disabledDateError")}=s,d=Be==="range",f=Se&&!d,F=d?"side-by-side":E,he=we??(F==="multi-step"?"radio":"button"),pe=le!==void 0,[ze,We]=n.useState(Ae),x=pe?le:ze,u=d?Ct(x):{},m=d?void 0:wt(x),[N,J]=n.useState(!1),[Je,K]=n.useState("date"),[Ke,ge]=n.useState("days"),Q=d?u.from:m,[Qe,q]=n.useState(()=>Q??W??new Date),_e=n.useRef(Q);_e.current=Q,n.useEffect(()=>{N||(K("date"),ge("days"),q(_e.current??W??new Date))},[N,W]);const A=n.useMemo(()=>new Intl.DateTimeFormat(k,{day:"2-digit",month:"2-digit",year:"numeric"}),[k]),Xe=n.useMemo(()=>new Intl.DateTimeFormat(k,{day:"2-digit",month:"2-digit",year:"2-digit"}),[k]),O=n.useCallback(e=>e?`${A.format(e)} ${h(e.getHours())}:${h(e.getMinutes())}`:"",[A]),$=n.useCallback(e=>{if(!e)return"";if(ne(e))return O(e);const t=O(e.from),r=O(e.to);return!t&&!r?"":r?t?`${t} – ${r}`:r:t},[O]),Ze=n.useMemo(()=>{const e=y.getLocaleDateParts(A),{fieldOrder:t}=e,r=new RegExp(`^${y.buildDateRegexSource(e)}\\s+(\\d{2}):(\\d{2})$`);return bt=>{const I=bt.trim().match(r);if(!I)return;const De={};t.forEach((vt,xt)=>{De[vt]=Number(I[xt+1])});const ye=Number(I[t.length+1]),je=Number(I[t.length+2]),{day:ae,month:se,year:re}=De;if(ae===void 0||se===void 0||re===void 0||ye>23||je>59)return;const C=new Date(re,se-1,ae,ye,je,0,0);if(!(isNaN(C.getTime())||C.getFullYear()!==re||C.getMonth()!==se-1||C.getDate()!==ae))return C}},[A]),[et,X]=n.useState(()=>$(x)),[be,p]=n.useState(!1);n.useEffect(()=>{X($(x))},[x,$]);const tt=D.useFloating({open:N,onOpenChange:J,placement:"bottom-end",middleware:[Y.offset(y.CALENDAR_POPOVER_OFFSET),Y.flip(),Y.shift({padding:y.CALENDAR_POPOVER_PADDING}),Y.size({padding:y.CALENDAR_POPOVER_PADDING,apply({availableWidth:e,elements:t}){t.floating.style.maxWidth=`${e}px`}})],whileElementsMounted:Ft.autoUpdate}),{refs:Z,context:ee,x:it,y:at,strategy:st}=tt,rt=D.useInteractions([D.useDismiss(ee,{outsidePress:e=>{const t=e.target;return!(t!=null&&t.closest('[role="menu"], [role="listbox"]'))}}),D.useRole(ee,{role:"dialog"})]),L=n.useRef(null),nt=n.useCallback(e=>{L.current=e,typeof c=="function"?c(e):c&&(c.current=e)},[c]);n.useEffect(()=>{var e;(e=L.current)!=null&&e.inner&&Z.setReference(L.current.inner)},[Z]);const o=e=>{pe||We(e),z==null||z(e),X($(e))},T=n.useCallback(e=>{if(v)return typeof v=="function"?v(e??new Date):v},[v]),M=n.useCallback((e,t)=>{const r=T(e);return!r||r.length===0||r.includes(t)?t:r[0]},[T]),lt=e=>{if(d){const t=e;if(!t||!t.from&&!t.to){o(void 0);return}const r={};t.from&&(r.from=_(t.from,M(t.from,g(u.from)))),t.to&&(r.to=_(t.to,M(t.to,g(u.to)))),o(r);return}e instanceof Date?o(_(e,M(e,g(m)))):e===void 0&&o(void 0)},dt=e=>{if(d){o({from:_(e,M(e,g(u.from)))});return}o(_(e,M(e,g(m))))},ot=e=>{const t=m??new Date;o(_(t,e)),F==="multi-step"&&T(t)&&J(!1)},ct=e=>t=>{const r=u[e]??u.from??new Date;o({...u,[e]:_(r,t)})},H=n.useMemo(()=>[...y.buildDisabledMatchers({minDate:oe,maxDate:ce,disablePast:ue,disableFuture:me}),...j?Array.isArray(j)?j:[j]:[]],[oe,ce,ue,me,j]),ve=n.useCallback(e=>Tt.dateMatchModifiers(e,H),[H]),ut=e=>{if(X(e),e===""){p(!1),o(void 0);return}if(f){const r=St(e);if(!r){p(!1);return}if(ve(r)){p(!0);return}p(!1),o(r),q(r);return}if(d)return;const t=Ze(e);if(!t){p(!1);return}if(ve(t)){p(!0);return}p(!1),o(t),q(t)},mt=()=>{var t;const e=(t=L.current)==null?void 0:t.input;if(e){if(typeof e.showPicker=="function"){e.showPicker();return}e.focus()}},ft=()=>{if(!V){if(f){mt();return}J(e=>!e)}},ht=F==="multi-step"?i.jsx("div",{className:a.default["tedi-date-time-field__select-time-wrapper"],children:i.jsx(ke.Button,{type:"button",visualType:"link",size:"small",iconLeft:"schedule",onClick:()=>K("time"),children:Le})}):void 0,te=i.jsx(Nt.Calendar,{view:Ke,setView:ge,selectionLevel:Ie,currentMonth:Qe,setCurrentMonth:q,mode:d?"range":"single",value:d?u:m,numberOfMonths:d&&!P?2:1,locale:$e,localeCode:k,showOutsideDays:Re,monthYearSelectType:Ce,minYear:Ye,maxYear:Ge,disabledMatchers:H.length?H:void 0,required:de,handleSelect:lt,applyValue:dt,footer:ht,className:w.default(a.default["tedi-date-time-field__calendar"],F==="side-by-side"&&a.default["tedi-date-time-field__calendar--split"])}),ie=T(m),pt=!ie||ie.length===0,xe=i.jsx(Fe.TimePicker,{value:g(m),stepMinutes:fe,availableTimes:ie,gridVariant:he,onChange:ot,className:w.default(a.default["tedi-date-time-field__time-picker"],{[a.default["tedi-date-time-field__time-picker--wheel"]]:pt})}),Ne=e=>{const t=T(u[e]),r=!t||t.length===0;return i.jsx(Fe.TimePicker,{value:g(u[e]),stepMinutes:fe,availableTimes:t,gridVariant:he,onChange:ct(e),className:w.default(a.default["tedi-date-time-field__time-picker"],{[a.default["tedi-date-time-field__time-picker--wheel"]]:r})})},S=l==null?void 0:l.helper,B=be?{text:Ue,type:"error"}:null,gt=B?S?Array.isArray(S)?[...S,B]:[S,B]:B:S,_t={...l,id:Pe,label:Ee,value:f?Mt(m):et,placeholder:Ve,readOnly:Oe||!f&&!!v&&!!x,icon:"calendar_today",isClearable:!0,required:de,disabled:V,invalid:be||(l==null?void 0:l.invalid),helper:gt,onIconClick:ft,onChange:ut,className:w.default(a.default["tedi-date-time-field__textfield"],l==null?void 0:l.className,{[a.default["tedi-date-time-field__icon--disabled"]]:V}),input:{...l==null?void 0:l.input,type:f?"datetime-local":"text","aria-expanded":f?void 0:N}};return i.jsxs(i.Fragment,{children:[i.jsx("div",{className:w.default(a.default["tedi-date-time-field__container"],qe),"aria-haspopup":"dialog",children:i.jsx(Dt.TextField,{ref:nt,"aria-expanded":f?void 0:N,..._t})}),!f&&i.jsx(D.FloatingPortal,{children:N&&!V&&i.jsx(D.FloatingFocusManager,{context:ee,modal:!1,initialFocus:-1,children:i.jsx("div",{ref:Z.setFloating,className:a.default["tedi-date-time-field__popup"],...rt.getFloatingProps({style:{position:st,top:at??0,left:it??0}}),children:d?i.jsxs("div",{className:a.default["tedi-date-time-field__range"],children:[te,i.jsx("div",{className:a.default["tedi-date-time-field__range-separator"],"aria-hidden":"true",children:i.jsx("div",{className:a.default["tedi-date-time-field__range-separator-line"]})}),i.jsxs("div",{className:a.default["tedi-date-time-field__range-times"],children:[i.jsxs("div",{className:a.default["tedi-date-time-field__range-time"],children:[i.jsx("div",{className:a.default["tedi-date-time-field__split-time-header"],children:i.jsx("span",{className:a.default["tedi-date-time-field__split-heading"],children:U})}),i.jsx("div",{className:a.default["tedi-date-time-field__split-time-body"],children:Ne("from")})]}),i.jsxs("div",{className:a.default["tedi-date-time-field__range-time"],children:[i.jsx("div",{className:a.default["tedi-date-time-field__split-time-header"],children:i.jsx("span",{className:a.default["tedi-date-time-field__split-heading"],children:U})}),i.jsx("div",{className:a.default["tedi-date-time-field__split-time-body"],children:Ne("to")})]})]})]}):F==="side-by-side"?i.jsxs("div",{className:a.default["tedi-date-time-field__split"],children:[te,i.jsx("div",{className:a.default["tedi-date-time-field__split-separator"],"aria-hidden":"true",children:i.jsx("div",{className:a.default["tedi-date-time-field__split-separator-line"]})}),i.jsxs("div",{className:a.default["tedi-date-time-field__split-time"],children:[i.jsx("div",{className:a.default["tedi-date-time-field__split-time-header"],children:i.jsx("span",{className:a.default["tedi-date-time-field__split-heading"],children:U})}),i.jsx("div",{className:a.default["tedi-date-time-field__split-time-body"],children:xe})]})]}):Je==="date"?te:i.jsxs("div",{className:a.default["tedi-date-time-field__time-step"],children:[i.jsxs("header",{className:a.default["tedi-date-time-field__time-header"],children:[i.jsx(ke.Button,{type:"button",visualType:"link",size:"small",iconLeft:"arrow_back",onClick:()=>K("date"),children:He}),i.jsx("span",{className:a.default["tedi-date-time-field__time-date"],children:Xe.format(m??new Date)})]}),i.jsx("div",{className:a.default["tedi-date-time-field__time-body"],children:xe})]})})})})]})});Me.displayName="DateTimeField";exports.DateTimeField=Me;
|
|
@@ -190,6 +190,16 @@ export interface DateTimeFieldProps extends BreakpointSupport<DateTimeFieldBreak
|
|
|
190
190
|
* @default days
|
|
191
191
|
*/
|
|
192
192
|
selectionLevel?: CalendarView;
|
|
193
|
+
/**
|
|
194
|
+
* Earliest year offered in the calendar header's year dropdown.
|
|
195
|
+
* @default currentYear - 100
|
|
196
|
+
*/
|
|
197
|
+
minYear?: number;
|
|
198
|
+
/**
|
|
199
|
+
* Latest year offered in the calendar header's year dropdown.
|
|
200
|
+
* @default currentYear + 20
|
|
201
|
+
*/
|
|
202
|
+
maxYear?: number;
|
|
193
203
|
/**
|
|
194
204
|
* Forwarded to the underlying `TextField`. `id`, `label`, `value`, and
|
|
195
205
|
* `onChange` are owned by `DateTimeField`.
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import { jsx as r, jsxs as f, Fragment as
|
|
2
|
-
import { useFloating as
|
|
1
|
+
import { jsx as r, jsxs as f, Fragment as Dt } from "react/jsx-runtime";
|
|
2
|
+
import { useFloating as Ft, useInteractions as Tt, useDismiss as kt, useRole as Mt, FloatingPortal as wt, FloatingFocusManager as xt } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
|
|
3
3
|
import C from "../../../../../external/classnames/index.es.js";
|
|
4
|
-
import Me, { useState as g, useRef as
|
|
4
|
+
import Me, { useState as g, useRef as Rt, useEffect as se, useMemo as G, useCallback as F } from "react";
|
|
5
5
|
import { Button as we } from "../../buttons/button/button.es.js";
|
|
6
|
-
import { Calendar as
|
|
7
|
-
import { getLocaleDateParts as
|
|
8
|
-
import { TextField as
|
|
6
|
+
import { Calendar as Vt } from "../../content/calendar/calendar.es.js";
|
|
7
|
+
import { getLocaleDateParts as Ct, buildDateRegexSource as Et, buildDisabledMatchers as St, CALENDAR_POPOVER_OFFSET as Pt, CALENDAR_POPOVER_PADDING as xe } from "../date-field/date-field-helpers.es.js";
|
|
8
|
+
import { TextField as $t } from "../textfield/textfield.es.js";
|
|
9
9
|
import { TimePicker as Re } from "../time-picker/time-picker.es.js";
|
|
10
10
|
import i from "./date-time-field.module.scss.es.js";
|
|
11
|
-
import { useBreakpointProps as
|
|
12
|
-
import { useLabels as
|
|
13
|
-
import
|
|
14
|
-
import { et as
|
|
15
|
-
import { autoUpdate as
|
|
16
|
-
import { offset as
|
|
17
|
-
import { dateMatchModifiers as
|
|
11
|
+
import { useBreakpointProps as At } from "../../../helpers/hooks/use-breakpoint-props.es.js";
|
|
12
|
+
import { useLabels as Ot } from "../../../providers/label-provider/use-labels.es.js";
|
|
13
|
+
import Lt, { isBreakpointBelow as Ht } from "../../../helpers/hooks/use-breakpoint.es.js";
|
|
14
|
+
import { et as It } from "../../../../../external/react-day-picker/dist/esm/locale/et.es.js";
|
|
15
|
+
import { autoUpdate as Bt } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
|
|
16
|
+
import { offset as Yt, flip as zt, shift as Gt, size as Wt } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
|
|
17
|
+
import { dateMatchModifiers as jt } from "../../../../../external/react-day-picker/dist/esm/utils/dateMatchModifiers.es.js";
|
|
18
18
|
const p = (a) => String(a).padStart(2, "0"), _ = (a) => a ? `${p(a.getHours())}:${p(a.getMinutes())}` : "00:00", v = (a, o) => {
|
|
19
|
-
const [
|
|
19
|
+
const [W, b] = o.split(":"), E = Number(W), S = Number(b), P = new Date(a);
|
|
20
20
|
return P.setHours(Number.isFinite(E) ? E : 0, Number.isFinite(S) ? S : 0, 0, 0), P;
|
|
21
|
-
}, le = (a) => a instanceof Date,
|
|
21
|
+
}, le = (a) => a instanceof Date, qt = (a) => a ? `${a.getFullYear()}-${p(a.getMonth() + 1)}-${p(a.getDate())}T${p(a.getHours())}:${p(a.getMinutes())}` : "", Ut = (a) => {
|
|
22
22
|
if (!a) return;
|
|
23
23
|
const o = new Date(a);
|
|
24
24
|
return isNaN(o.getTime()) ? void 0 : o;
|
|
25
|
-
},
|
|
26
|
-
const { getCurrentBreakpointProps:
|
|
25
|
+
}, Jt = (a) => !a || le(a) ? {} : a, Kt = (a) => le(a) ? a : void 0, Qt = Me.forwardRef((a, o) => {
|
|
26
|
+
const { getCurrentBreakpointProps: W } = At(a.defaultServerBreakpoint), { getLabel: b } = Ot(), E = Lt(a.defaultServerBreakpoint), S = Ht(E, "md"), {
|
|
27
27
|
layout: P = "side-by-side",
|
|
28
28
|
useNativePicker: Ve = !1,
|
|
29
29
|
monthYearSelectType: Ce = "dropdown",
|
|
@@ -31,7 +31,7 @@ const p = (a) => String(a).padStart(2, "0"), _ = (a) => a ? `${p(a.getHours())}:
|
|
|
31
31
|
showOutsideDays: Se = !0,
|
|
32
32
|
availableTimes: N,
|
|
33
33
|
timeHeading: j = b("dateTimeField.timeHeading")
|
|
34
|
-
} =
|
|
34
|
+
} = W(a), {
|
|
35
35
|
id: Pe,
|
|
36
36
|
label: $e,
|
|
37
37
|
placeholder: Ae,
|
|
@@ -49,26 +49,28 @@ const p = (a) => String(a).padStart(2, "0"), _ = (a) => a ? `${p(a.getHours())}:
|
|
|
49
49
|
disabledMatchers: T,
|
|
50
50
|
stepMinutes: pe = 15,
|
|
51
51
|
initialMonth: U,
|
|
52
|
-
locale: Ie =
|
|
52
|
+
locale: Ie = It,
|
|
53
53
|
localeCode: k = "et-EE",
|
|
54
54
|
selectTimeLabel: Be = b("dateTimeField.selectTime"),
|
|
55
|
-
backLabel:
|
|
56
|
-
mode:
|
|
57
|
-
selectionLevel:
|
|
55
|
+
backLabel: Ye = b("dateTimeField.back"),
|
|
56
|
+
mode: ze = "single",
|
|
57
|
+
selectionLevel: Ge = "days",
|
|
58
|
+
minYear: We,
|
|
59
|
+
maxYear: je,
|
|
58
60
|
inputProps: s,
|
|
59
|
-
disabledDateErrorMessage:
|
|
60
|
-
} = a, l =
|
|
61
|
+
disabledDateErrorMessage: qe = b("dateField.disabledDateError")
|
|
62
|
+
} = a, l = ze === "range", u = Ve && !l, M = l ? "side-by-side" : P, he = Ee ?? (M === "multi-step" ? "radio" : "button"), ge = de !== void 0, [Ue, Je] = g(Le), y = ge ? de : Ue, c = l ? Jt(y) : {}, m = l ? void 0 : Kt(y), [D, J] = g(!1), [Ke, K] = g("date"), [Qe, _e] = g("days"), Q = l ? c.from : m, [Xe, A] = g(() => Q ?? U ?? /* @__PURE__ */ new Date()), ve = Rt(Q);
|
|
61
63
|
ve.current = Q, se(() => {
|
|
62
64
|
D || (K("date"), _e("days"), A(ve.current ?? U ?? /* @__PURE__ */ new Date()));
|
|
63
65
|
}, [D, U]);
|
|
64
|
-
const O =
|
|
66
|
+
const O = G(
|
|
65
67
|
() => new Intl.DateTimeFormat(k, {
|
|
66
68
|
day: "2-digit",
|
|
67
69
|
month: "2-digit",
|
|
68
70
|
year: "numeric"
|
|
69
71
|
}),
|
|
70
72
|
[k]
|
|
71
|
-
),
|
|
73
|
+
), Ze = G(
|
|
72
74
|
() => new Intl.DateTimeFormat(k, {
|
|
73
75
|
day: "2-digit",
|
|
74
76
|
month: "2-digit",
|
|
@@ -86,50 +88,50 @@ const p = (a) => String(a).padStart(2, "0"), _ = (a) => a ? `${p(a.getHours())}:
|
|
|
86
88
|
return !t && !n ? "" : n ? t ? `${t} – ${n}` : n : t;
|
|
87
89
|
},
|
|
88
90
|
[L]
|
|
89
|
-
),
|
|
90
|
-
const e =
|
|
91
|
-
return (
|
|
92
|
-
const
|
|
93
|
-
if (!
|
|
91
|
+
), et = G(() => {
|
|
92
|
+
const e = Ct(O), { fieldOrder: t } = e, n = new RegExp(`^${Et(e)}\\s+(\\d{2}):(\\d{2})$`);
|
|
93
|
+
return (bt) => {
|
|
94
|
+
const z = bt.trim().match(n);
|
|
95
|
+
if (!z) return;
|
|
94
96
|
const Fe = {};
|
|
95
|
-
t.forEach((
|
|
96
|
-
Fe[
|
|
97
|
+
t.forEach((Nt, yt) => {
|
|
98
|
+
Fe[Nt] = Number(z[yt + 1]);
|
|
97
99
|
});
|
|
98
|
-
const Te = Number(
|
|
100
|
+
const Te = Number(z[t.length + 1]), ke = Number(z[t.length + 2]), { day: ae, month: re, year: ne } = Fe;
|
|
99
101
|
if (ae === void 0 || re === void 0 || ne === void 0 || Te > 23 || ke > 59) return;
|
|
100
102
|
const V = new Date(ne, re - 1, ae, Te, ke, 0, 0);
|
|
101
103
|
if (!(isNaN(V.getTime()) || V.getFullYear() !== ne || V.getMonth() !== re - 1 || V.getDate() !== ae))
|
|
102
104
|
return V;
|
|
103
105
|
};
|
|
104
|
-
}, [O]), [
|
|
106
|
+
}, [O]), [tt, X] = g(() => H(y)), [be, h] = g(!1);
|
|
105
107
|
se(() => {
|
|
106
108
|
X(H(y));
|
|
107
109
|
}, [y, H]);
|
|
108
|
-
const
|
|
110
|
+
const it = Ft({
|
|
109
111
|
open: D,
|
|
110
112
|
onOpenChange: J,
|
|
111
113
|
placement: "bottom-end",
|
|
112
114
|
middleware: [
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
115
|
+
Yt(Pt),
|
|
116
|
+
zt(),
|
|
117
|
+
Gt({ padding: xe }),
|
|
118
|
+
Wt({
|
|
117
119
|
padding: xe,
|
|
118
120
|
apply({ availableWidth: e, elements: t }) {
|
|
119
121
|
t.floating.style.maxWidth = `${e}px`;
|
|
120
122
|
}
|
|
121
123
|
})
|
|
122
124
|
],
|
|
123
|
-
whileElementsMounted:
|
|
124
|
-
}), { refs: Z, context: ee, x:
|
|
125
|
-
|
|
125
|
+
whileElementsMounted: Bt
|
|
126
|
+
}), { refs: Z, context: ee, x: at, y: rt, strategy: nt } = it, st = Tt([
|
|
127
|
+
kt(ee, {
|
|
126
128
|
outsidePress: (e) => {
|
|
127
129
|
const t = e.target;
|
|
128
130
|
return !(t != null && t.closest('[role="menu"], [role="listbox"]'));
|
|
129
131
|
}
|
|
130
132
|
}),
|
|
131
|
-
|
|
132
|
-
]), I = Me.useRef(null),
|
|
133
|
+
Mt(ee, { role: "dialog" })
|
|
134
|
+
]), I = Me.useRef(null), lt = F(
|
|
133
135
|
(e) => {
|
|
134
136
|
I.current = e, typeof o == "function" ? o(e) : o && (o.current = e);
|
|
135
137
|
},
|
|
@@ -140,7 +142,7 @@ const p = (a) => String(a).padStart(2, "0"), _ = (a) => a ? `${p(a.getHours())}:
|
|
|
140
142
|
(e = I.current) != null && e.inner && Z.setReference(I.current.inner);
|
|
141
143
|
}, [Z]);
|
|
142
144
|
const d = (e) => {
|
|
143
|
-
ge ||
|
|
145
|
+
ge || Je(e), q == null || q(e), X(H(e));
|
|
144
146
|
}, w = F(
|
|
145
147
|
(e) => {
|
|
146
148
|
if (N)
|
|
@@ -153,7 +155,7 @@ const p = (a) => String(a).padStart(2, "0"), _ = (a) => a ? `${p(a.getHours())}:
|
|
|
153
155
|
return !n || n.length === 0 || n.includes(t) ? t : n[0];
|
|
154
156
|
},
|
|
155
157
|
[w]
|
|
156
|
-
),
|
|
158
|
+
), dt = (e) => {
|
|
157
159
|
if (l) {
|
|
158
160
|
const t = e;
|
|
159
161
|
if (!t || !t.from && !t.to) {
|
|
@@ -165,21 +167,21 @@ const p = (a) => String(a).padStart(2, "0"), _ = (a) => a ? `${p(a.getHours())}:
|
|
|
165
167
|
return;
|
|
166
168
|
}
|
|
167
169
|
e instanceof Date ? d(v(e, x(e, _(m)))) : e === void 0 && d(void 0);
|
|
168
|
-
},
|
|
170
|
+
}, ot = (e) => {
|
|
169
171
|
if (l) {
|
|
170
172
|
d({ from: v(e, x(e, _(c.from))) });
|
|
171
173
|
return;
|
|
172
174
|
}
|
|
173
175
|
d(v(e, x(e, _(m))));
|
|
174
|
-
},
|
|
176
|
+
}, ct = (e) => {
|
|
175
177
|
const t = m ?? /* @__PURE__ */ new Date();
|
|
176
178
|
d(v(t, e)), M === "multi-step" && w(t) && J(!1);
|
|
177
|
-
},
|
|
179
|
+
}, mt = (e) => (t) => {
|
|
178
180
|
const n = c[e] ?? c.from ?? /* @__PURE__ */ new Date();
|
|
179
181
|
d({ ...c, [e]: v(n, t) });
|
|
180
|
-
}, B =
|
|
182
|
+
}, B = G(
|
|
181
183
|
() => [
|
|
182
|
-
...
|
|
184
|
+
...St({
|
|
183
185
|
minDate: ce,
|
|
184
186
|
maxDate: me,
|
|
185
187
|
disablePast: fe,
|
|
@@ -189,15 +191,15 @@ const p = (a) => String(a).padStart(2, "0"), _ = (a) => a ? `${p(a.getHours())}:
|
|
|
189
191
|
],
|
|
190
192
|
[ce, me, fe, ue, T]
|
|
191
193
|
), Ne = F(
|
|
192
|
-
(e) =>
|
|
194
|
+
(e) => jt(e, B),
|
|
193
195
|
[B]
|
|
194
|
-
),
|
|
196
|
+
), ft = (e) => {
|
|
195
197
|
if (X(e), e === "") {
|
|
196
198
|
h(!1), d(void 0);
|
|
197
199
|
return;
|
|
198
200
|
}
|
|
199
201
|
if (u) {
|
|
200
|
-
const n =
|
|
202
|
+
const n = Ut(e);
|
|
201
203
|
if (!n) {
|
|
202
204
|
h(!1);
|
|
203
205
|
return;
|
|
@@ -210,7 +212,7 @@ const p = (a) => String(a).padStart(2, "0"), _ = (a) => a ? `${p(a.getHours())}:
|
|
|
210
212
|
return;
|
|
211
213
|
}
|
|
212
214
|
if (l) return;
|
|
213
|
-
const t =
|
|
215
|
+
const t = et(e);
|
|
214
216
|
if (!t) {
|
|
215
217
|
h(!1);
|
|
216
218
|
return;
|
|
@@ -220,7 +222,7 @@ const p = (a) => String(a).padStart(2, "0"), _ = (a) => a ? `${p(a.getHours())}:
|
|
|
220
222
|
return;
|
|
221
223
|
}
|
|
222
224
|
h(!1), d(t), A(t);
|
|
223
|
-
},
|
|
225
|
+
}, ut = () => {
|
|
224
226
|
var t;
|
|
225
227
|
const e = (t = I.current) == null ? void 0 : t.input;
|
|
226
228
|
if (e) {
|
|
@@ -230,21 +232,21 @@ const p = (a) => String(a).padStart(2, "0"), _ = (a) => a ? `${p(a.getHours())}:
|
|
|
230
232
|
}
|
|
231
233
|
e.focus();
|
|
232
234
|
}
|
|
233
|
-
},
|
|
235
|
+
}, pt = () => {
|
|
234
236
|
if (!$) {
|
|
235
237
|
if (u) {
|
|
236
|
-
|
|
238
|
+
ut();
|
|
237
239
|
return;
|
|
238
240
|
}
|
|
239
241
|
J((e) => !e);
|
|
240
242
|
}
|
|
241
|
-
},
|
|
242
|
-
|
|
243
|
+
}, ht = M === "multi-step" ? /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__select-time-wrapper"], children: /* @__PURE__ */ r(we, { type: "button", visualType: "link", size: "small", iconLeft: "schedule", onClick: () => K("time"), children: Be }) }) : void 0, te = /* @__PURE__ */ r(
|
|
244
|
+
Vt,
|
|
243
245
|
{
|
|
244
|
-
view:
|
|
246
|
+
view: Qe,
|
|
245
247
|
setView: _e,
|
|
246
|
-
selectionLevel:
|
|
247
|
-
currentMonth:
|
|
248
|
+
selectionLevel: Ge,
|
|
249
|
+
currentMonth: Xe,
|
|
248
250
|
setCurrentMonth: A,
|
|
249
251
|
mode: l ? "range" : "single",
|
|
250
252
|
value: l ? c : m,
|
|
@@ -253,26 +255,28 @@ const p = (a) => String(a).padStart(2, "0"), _ = (a) => a ? `${p(a.getHours())}:
|
|
|
253
255
|
localeCode: k,
|
|
254
256
|
showOutsideDays: Se,
|
|
255
257
|
monthYearSelectType: Ce,
|
|
258
|
+
minYear: We,
|
|
259
|
+
maxYear: je,
|
|
256
260
|
disabledMatchers: B.length ? B : void 0,
|
|
257
261
|
required: oe,
|
|
258
|
-
handleSelect:
|
|
259
|
-
applyValue:
|
|
260
|
-
footer:
|
|
262
|
+
handleSelect: dt,
|
|
263
|
+
applyValue: ot,
|
|
264
|
+
footer: ht,
|
|
261
265
|
className: C(
|
|
262
266
|
i["tedi-date-time-field__calendar"],
|
|
263
267
|
M === "side-by-side" && i["tedi-date-time-field__calendar--split"]
|
|
264
268
|
)
|
|
265
269
|
}
|
|
266
|
-
), ie = w(m),
|
|
270
|
+
), ie = w(m), gt = !ie || ie.length === 0, ye = /* @__PURE__ */ r(
|
|
267
271
|
Re,
|
|
268
272
|
{
|
|
269
273
|
value: _(m),
|
|
270
274
|
stepMinutes: pe,
|
|
271
275
|
availableTimes: ie,
|
|
272
276
|
gridVariant: he,
|
|
273
|
-
onChange:
|
|
277
|
+
onChange: ct,
|
|
274
278
|
className: C(i["tedi-date-time-field__time-picker"], {
|
|
275
|
-
[i["tedi-date-time-field__time-picker--wheel"]]:
|
|
279
|
+
[i["tedi-date-time-field__time-picker--wheel"]]: gt
|
|
276
280
|
})
|
|
277
281
|
}
|
|
278
282
|
), De = (e) => {
|
|
@@ -284,17 +288,17 @@ const p = (a) => String(a).padStart(2, "0"), _ = (a) => a ? `${p(a.getHours())}:
|
|
|
284
288
|
stepMinutes: pe,
|
|
285
289
|
availableTimes: t,
|
|
286
290
|
gridVariant: he,
|
|
287
|
-
onChange:
|
|
291
|
+
onChange: mt(e),
|
|
288
292
|
className: C(i["tedi-date-time-field__time-picker"], {
|
|
289
293
|
[i["tedi-date-time-field__time-picker--wheel"]]: n
|
|
290
294
|
})
|
|
291
295
|
}
|
|
292
296
|
);
|
|
293
|
-
}, R = s == null ? void 0 : s.helper,
|
|
297
|
+
}, R = s == null ? void 0 : s.helper, Y = be ? { text: qe, type: "error" } : null, _t = Y ? R ? Array.isArray(R) ? [...R, Y] : [R, Y] : Y : R, vt = {
|
|
294
298
|
...s,
|
|
295
299
|
id: Pe,
|
|
296
300
|
label: $e,
|
|
297
|
-
value: u ?
|
|
301
|
+
value: u ? qt(m) : tt,
|
|
298
302
|
placeholder: Ae,
|
|
299
303
|
readOnly: He || !u && !!N && !!y,
|
|
300
304
|
icon: "calendar_today",
|
|
@@ -302,9 +306,9 @@ const p = (a) => String(a).padStart(2, "0"), _ = (a) => a ? `${p(a.getHours())}:
|
|
|
302
306
|
required: oe,
|
|
303
307
|
disabled: $,
|
|
304
308
|
invalid: be || (s == null ? void 0 : s.invalid),
|
|
305
|
-
helper:
|
|
306
|
-
onIconClick:
|
|
307
|
-
onChange:
|
|
309
|
+
helper: _t,
|
|
310
|
+
onIconClick: pt,
|
|
311
|
+
onChange: ft,
|
|
308
312
|
className: C(i["tedi-date-time-field__textfield"], s == null ? void 0 : s.className, {
|
|
309
313
|
[i["tedi-date-time-field__icon--disabled"]]: $
|
|
310
314
|
}),
|
|
@@ -314,18 +318,18 @@ const p = (a) => String(a).padStart(2, "0"), _ = (a) => a ? `${p(a.getHours())}:
|
|
|
314
318
|
"aria-expanded": u ? void 0 : D
|
|
315
319
|
}
|
|
316
320
|
};
|
|
317
|
-
return /* @__PURE__ */ f(
|
|
318
|
-
/* @__PURE__ */ r("div", { className: C(i["tedi-date-time-field__container"], Oe), "aria-haspopup": "dialog", children: /* @__PURE__ */ r(
|
|
319
|
-
!u && /* @__PURE__ */ r(
|
|
321
|
+
return /* @__PURE__ */ f(Dt, { children: [
|
|
322
|
+
/* @__PURE__ */ r("div", { className: C(i["tedi-date-time-field__container"], Oe), "aria-haspopup": "dialog", children: /* @__PURE__ */ r($t, { ref: lt, "aria-expanded": u ? void 0 : D, ...vt }) }),
|
|
323
|
+
!u && /* @__PURE__ */ r(wt, { children: D && !$ && /* @__PURE__ */ r(xt, { context: ee, modal: !1, initialFocus: -1, children: /* @__PURE__ */ r(
|
|
320
324
|
"div",
|
|
321
325
|
{
|
|
322
326
|
ref: Z.setFloating,
|
|
323
327
|
className: i["tedi-date-time-field__popup"],
|
|
324
|
-
...
|
|
328
|
+
...st.getFloatingProps({
|
|
325
329
|
style: {
|
|
326
|
-
position:
|
|
327
|
-
top:
|
|
328
|
-
left:
|
|
330
|
+
position: nt,
|
|
331
|
+
top: rt ?? 0,
|
|
332
|
+
left: at ?? 0
|
|
329
333
|
}
|
|
330
334
|
}),
|
|
331
335
|
children: l ? /* @__PURE__ */ f("div", { className: i["tedi-date-time-field__range"], children: [
|
|
@@ -348,7 +352,7 @@ const p = (a) => String(a).padStart(2, "0"), _ = (a) => a ? `${p(a.getHours())}:
|
|
|
348
352
|
/* @__PURE__ */ r("div", { className: i["tedi-date-time-field__split-time-header"], children: /* @__PURE__ */ r("span", { className: i["tedi-date-time-field__split-heading"], children: j }) }),
|
|
349
353
|
/* @__PURE__ */ r("div", { className: i["tedi-date-time-field__split-time-body"], children: ye })
|
|
350
354
|
] })
|
|
351
|
-
] }) :
|
|
355
|
+
] }) : Ke === "date" ? te : /* @__PURE__ */ f("div", { className: i["tedi-date-time-field__time-step"], children: [
|
|
352
356
|
/* @__PURE__ */ f("header", { className: i["tedi-date-time-field__time-header"], children: [
|
|
353
357
|
/* @__PURE__ */ r(
|
|
354
358
|
we,
|
|
@@ -358,10 +362,10 @@ const p = (a) => String(a).padStart(2, "0"), _ = (a) => a ? `${p(a.getHours())}:
|
|
|
358
362
|
size: "small",
|
|
359
363
|
iconLeft: "arrow_back",
|
|
360
364
|
onClick: () => K("date"),
|
|
361
|
-
children:
|
|
365
|
+
children: Ye
|
|
362
366
|
}
|
|
363
367
|
),
|
|
364
|
-
/* @__PURE__ */ r("span", { className: i["tedi-date-time-field__time-date"], children:
|
|
368
|
+
/* @__PURE__ */ r("span", { className: i["tedi-date-time-field__time-date"], children: Ze.format(m ?? /* @__PURE__ */ new Date()) })
|
|
365
369
|
] }),
|
|
366
370
|
/* @__PURE__ */ r("div", { className: i["tedi-date-time-field__time-body"], children: ye })
|
|
367
371
|
] })
|
|
@@ -369,7 +373,7 @@ const p = (a) => String(a).padStart(2, "0"), _ = (a) => a ? `${p(a.getHours())}:
|
|
|
369
373
|
) }) })
|
|
370
374
|
] });
|
|
371
375
|
});
|
|
372
|
-
|
|
376
|
+
Qt.displayName = "DateTimeField";
|
|
373
377
|
export {
|
|
374
|
-
|
|
378
|
+
Qt as DateTimeField
|
|
375
379
|
};
|