@tedi-design-system/react 18.0.0-rc.9 → 18.0.0

package/src/tedi/components/form/date-field/date-field.module.scss.es.js

@@ -1,5 +1,7 @@
 const e = {
   "tedi-date-field__calendar": "tedi-date-field__calendar-56bdb86f",
+  "tedi-date-field__calendar-popover--fullwidth": "tedi-date-field__calendar-popover--fullwidth-851e2a12",
+  "tedi-date-field__calendar--fullwidth": "tedi-date-field__calendar--fullwidth-1d852ca1",
   "tedi-date-field__textfield": "tedi-date-field__textfield-c80668a6",
   "tedi-date-field__textfield--disabled": "tedi-date-field__textfield--disabled-5f79b37d",
   "tedi-date-field__icon--disabled": "tedi-date-field__icon--disabled-0e13b2f6",

package/src/tedi/components/form/date-field/date-picker-modal/date-picker-modal.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),G=require("../../../../../../external/classnames/index.cjs.js"),d=require("react"),J=require("../../../base/typography/heading/heading.cjs.js"),C=require("../../../buttons/button/button.cjs.js"),Q=require("../../../buttons/closing-button/closing-button.cjs.js"),U=require("../../../content/calendar/calendar.cjs.js"),W=require("../date-field-helpers.cjs.js"),u=require("./date-picker-modal.module.scss.cjs.js"),X=require("../../../../providers/label-provider/use-labels.cjs.js"),c=require("../../../overlays/modal/modal.cjs.js"),Z=require("../../../overlays/modal/modal-context.cjs.js"),D=(e,a)=>e instanceof Date?e:Array.isArray(e)&&e.length>0?[...e].sort((o,l)=>o.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:a??new Date,$=({title:e})=>{const{labelId:a,onOpenChange:o}=Z.useModal();return t.jsxs("div",{className:u.default["tedi-date-picker-modal__header"],children:[t.jsx(J.Heading,{element:"h2",modifiers:"h4",id:a,className:u.default["tedi-date-picker-modal__title"],children:e}),t.jsx(Q.ClosingButton,{size:"small",onClick:()=>o(!1)})]})},q=e=>{const{open:a,onOpenChange:o,value:l,onConfirm:S,mode:n="single",numberOfMonths:T,locale:_,localeCode:w,showOutsideDays:N=!0,disabledMatchers:A,required:p,availableDays:B,footer:O,monthYearSelectType:H,showNavigation:L,selectionLevel:f="days",initialView:g,initialMonth:y,modalProps:i,title:P,...R}=e,{getLabel:b}=X.useLabels(),[r,m]=d.useState(l),[V,M]=d.useState(g??f),[F,j]=d.useState(()=>D(l,y));d.useEffect(()=>{a&&(m(l),M(g??f),j(D(l,y)))},[a,l,f,g,y]);const I=d.useCallback((s,h)=>{m(n==="range"?Y=>W.resolveRangeSelection(s,Y,h):s)},[n]),K=d.useCallback(s=>{m(h=>n==="range"?{from:s,to:void 0}:n==="multiple"?[...Array.isArray(h)?h:[],s]:s)},[n]),z=n==="multiple"?Array.isArray(r)&&r.length>0:n==="range"?!!r&&typeof r=="object"&&"from"in r&&r.from instanceof Date:r instanceof Date,k=p===!0&&!z,E=()=>{k||(S(r),o(!1))},x=P??b(n==="range"?"date-field.modal-title-range":n==="multiple"?"date-field.modal-title-multiple":"date-field.modal-title");return t.jsx(c.Modal,{open:a,onToggle:o,children:t.jsxs(c.Modal.Content,{position:"center","aria-label":x,...i,md:{width:"max-content",...i==null?void 0:i.md},sm:{width:"full",...i==null?void 0:i.sm},className:G.default(u.default["tedi-date-picker-modal"],i==null?void 0:i.className),children:[t.jsx(c.Modal.Header,{children:t.jsx($,{title:x})}),t.jsx(c.Modal.Body,{className:u.default["tedi-date-picker-modal__body"],children:t.jsx(U.Calendar,{...R,numberOfMonths:T,view:V,selectionLevel:f,currentMonth:F,setCurrentMonth:j,setView:M,mode:n,value:r,locale:_,localeCode:w,showOutsideDays:N,disabledMatchers:A,required:p,availableDays:B,footer:O,monthYearSelectType:H,showNavigation:L,handleSelect:I,applyValue:K,className:u.default["tedi-date-picker-modal__calendar"],bordered:!1})}),t.jsxs(c.Modal.Footer,{children:[t.jsx(C.Button,{visualType:"secondary",onClick:()=>o(!1),children:b("date-field.cancel")}),t.jsx(C.Button,{onClick:E,disabled:k,children:b("date-field.confirm")})]})]})})};q.displayName="DatePickerModal";exports.DatePickerModal=q;

package/src/tedi/components/form/date-field/date-picker-modal/date-picker-modal.d.ts

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+import { DateRange, DayPickerProps, Locale, Matcher } from 'react-day-picker';
+import { ModalContentProps } from '../../../overlays/modal';
+import { CalendarView } from '../date-field';
+type DateFieldMode = 'single' | 'multiple' | 'range';
+type DateValue = Date | Date[] | DateRange | undefined;
+export interface DatePickerModalProps extends Omit<DayPickerProps, 'mode' | 'selected' | 'onSelect' | 'numberOfMonths'> {
+    /** Whether the modal is open. Pair with `onOpenChange`. */
+    open: boolean;
+    /** Fires when the modal opens or closes (Escape / backdrop / Cancel / Confirm). */
+    onOpenChange: (open: boolean) => void;
+    /** Current committed value. Used to seed the draft when the modal opens. */
+    value: DateValue;
+    /**
+     * Fires with the chosen value when the user clicks "Confirm". Cancel /
+     * Escape / backdrop dismiss discards the draft.
+     */
+    onConfirm: (date: DateValue) => void;
+    /** Selection mode forwarded to `Calendar`. @default single */
+    mode?: DateFieldMode;
+    numberOfMonths?: number;
+    locale?: Locale;
+    localeCode?: string;
+    showOutsideDays?: boolean;
+    disabledMatchers?: Matcher[];
+    required?: boolean;
+    availableDays?: Date[] | ((date: Date) => boolean);
+    footer?: React.ReactNode;
+    monthYearSelectType?: 'dropdown' | 'grid';
+    showNavigation?: boolean;
+    selectionLevel?: CalendarView;
+    /** Grid the calendar opens on, independent of `selectionLevel`. Defaults to `selectionLevel`. */
+    initialView?: CalendarView;
+    /** Initial month to display when the modal opens. Defaults to the selected date or today. */
+    initialMonth?: Date;
+    /**
+     * Extra props spread onto `Modal.Content`, overriding the responsive width / `position="center"`
+     * defaults (including `fullscreen`). `className` is merged, not replaced, so the internal layout survives.
+     */
+    modalProps?: Omit<ModalContentProps, 'children'>;
+    /**
+     * Modal title text. Falls back to a mode-aware i18n key —
+     * `date-field.modal-title` / `-range` / `-multiple`.
+     */
+    title?: string;
+}
+export declare const DatePickerModal: {
+    (props: DatePickerModalProps): JSX.Element;
+    displayName: string;
+};
+export default DatePickerModal;

package/src/tedi/components/form/date-field/date-picker-modal/date-picker-modal.es.js

@@ -0,0 +1,108 @@
+import { jsx as o, jsxs as b } from "react/jsx-runtime";
+import P from "../../../../../../external/classnames/index.es.js";
+import { useState as g, useEffect as Q, useCallback as w } from "react";
+import { Heading as U } from "../../../base/typography/heading/heading.es.js";
+import { Button as T } from "../../../buttons/button/button.es.js";
+import { ClosingButton as W } from "../../../buttons/closing-button/closing-button.es.js";
+import { Calendar as X } from "../../../content/calendar/calendar.es.js";
+import { resolveRangeSelection as Z } from "../date-field-helpers.es.js";
+import c from "./date-picker-modal.module.scss.es.js";
+import { useLabels as $ } from "../../../../providers/label-provider/use-labels.es.js";
+import { Modal as d } from "../../../overlays/modal/modal.es.js";
+import { useModal as v } from "../../../overlays/modal/modal-context.es.js";
+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(), ee = ({ title: e }) => {
+  const { labelId: n, onOpenChange: a } = v();
+  return /* @__PURE__ */ b("div", { className: c["tedi-date-picker-modal__header"], children: [
+    /* @__PURE__ */ o(U, { element: "h2", modifiers: "h4", id: n, className: c["tedi-date-picker-modal__title"], children: e }),
+    /* @__PURE__ */ o(W, { size: "small", onClick: () => a(!1) })
+  ] });
+}, te = (e) => {
+  const {
+    open: n,
+    onOpenChange: a,
+    value: l,
+    onConfirm: A,
+    mode: t = "single",
+    numberOfMonths: j,
+    locale: S,
+    localeCode: x,
+    showOutsideDays: O = !0,
+    disabledMatchers: B,
+    required: k,
+    availableDays: H,
+    footer: L,
+    monthYearSelectType: V,
+    showNavigation: I,
+    selectionLevel: m = "days",
+    initialView: h,
+    initialMonth: p,
+    modalProps: i,
+    title: K,
+    ...q
+  } = e, { getLabel: y } = $(), [r, f] = g(l), [z, C] = g(h ?? m), [E, D] = g(() => _(l, p));
+  Q(() => {
+    n && (f(l), C(h ?? m), D(_(l, p)));
+  }, [n, l, m, h, p]);
+  const F = w(
+    (s, u) => {
+      f(t === "range" ? (J) => Z(s, J, u) : s);
+    },
+    [t]
+  ), R = w(
+    (s) => {
+      f((u) => t === "range" ? { from: s, to: void 0 } : t === "multiple" ? [...Array.isArray(u) ? u : [], s] : s);
+    },
+    [t]
+  ), Y = t === "multiple" ? Array.isArray(r) && r.length > 0 : t === "range" ? !!r && typeof r == "object" && "from" in r && r.from instanceof Date : r instanceof Date, M = k === !0 && !Y, G = () => {
+    M || (A(r), a(!1));
+  }, N = K ?? y(t === "range" ? "date-field.modal-title-range" : t === "multiple" ? "date-field.modal-title-multiple" : "date-field.modal-title");
+  return /* @__PURE__ */ o(d, { open: n, onToggle: a, children: /* @__PURE__ */ b(
+    d.Content,
+    {
+      position: "center",
+      "aria-label": N,
+      ...i,
+      md: { width: "max-content", ...i == null ? void 0 : i.md },
+      sm: { width: "full", ...i == null ? void 0 : i.sm },
+      className: P(c["tedi-date-picker-modal"], i == null ? void 0 : i.className),
+      children: [
+        /* @__PURE__ */ o(d.Header, { children: /* @__PURE__ */ o(ee, { title: N }) }),
+        /* @__PURE__ */ o(d.Body, { className: c["tedi-date-picker-modal__body"], children: /* @__PURE__ */ o(
+          X,
+          {
+            ...q,
+            numberOfMonths: j,
+            view: z,
+            selectionLevel: m,
+            currentMonth: E,
+            setCurrentMonth: D,
+            setView: C,
+            mode: t,
+            value: r,
+            locale: S,
+            localeCode: x,
+            showOutsideDays: O,
+            disabledMatchers: B,
+            required: k,
+            availableDays: H,
+            footer: L,
+            monthYearSelectType: V,
+            showNavigation: I,
+            handleSelect: F,
+            applyValue: R,
+            className: c["tedi-date-picker-modal__calendar"],
+            bordered: !1
+          }
+        ) }),
+        /* @__PURE__ */ b(d.Footer, { children: [
+          /* @__PURE__ */ o(T, { visualType: "secondary", onClick: () => a(!1), children: y("date-field.cancel") }),
+          /* @__PURE__ */ o(T, { onClick: G, disabled: M, children: y("date-field.confirm") })
+        ] })
+      ]
+    }
+  ) });
+};
+te.displayName = "DatePickerModal";
+export {
+  te as DatePickerModal
+};

package/src/tedi/components/form/date-field/date-picker-modal/date-picker-modal.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-date-picker-modal":"tedi-date-picker-modal-fd7a9e09","tedi-date-picker-modal__header":"tedi-date-picker-modal__header-d61d5292","tedi-date-picker-modal__title":"tedi-date-picker-modal__title-93184118","tedi-date-picker-modal__body":"tedi-date-picker-modal__body-47a7c06d","tedi-date-picker-modal__calendar":"tedi-date-picker-modal__calendar-8f146b2c"};exports.default=e;

package/src/tedi/components/form/date-field/date-picker-modal/date-picker-modal.module.scss.es.js

@@ -0,0 +1,10 @@
+const e = {
+  "tedi-date-picker-modal": "tedi-date-picker-modal-fd7a9e09",
+  "tedi-date-picker-modal__header": "tedi-date-picker-modal__header-d61d5292",
+  "tedi-date-picker-modal__title": "tedi-date-picker-modal__title-93184118",
+  "tedi-date-picker-modal__body": "tedi-date-picker-modal__body-47a7c06d",
+  "tedi-date-picker-modal__calendar": "tedi-date-picker-modal__calendar-8f146b2c"
+};
+export {
+  e as default
+};

package/src/tedi/components/form/date-time-field/date-time-field.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[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"),Fe=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"),Te=require("../time-picker/time-picker.cjs.js"),a=require("./date-time-field.module.scss.cjs.js"),Nt=require("../../../../../external/react-day-picker/dist/esm/locale/et.cjs.js"),Dt=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"),yt=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),jt=require("../../../providers/label-provider/use-labels.cjs.js"),Me=require("../../../helpers/hooks/use-breakpoint.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,le=n.forwardRef((s,c)=>{const{getCurrentBreakpointProps:U}=yt.useBreakpointProps(s.defaultServerBreakpoint),{getLabel:b}=jt.useLabels(),R=Me.useBreakpoint(s.defaultServerBreakpoint),P=Me.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:de,defaultValue:Ae,onChange:W,required:oe,readOnly:Oe,disabled:V,minDate:ce,maxDate:ue,disablePast:me,disableFuture:fe,disabledMatchers:j,stepMinutes:he=15,initialMonth:Y,locale:$e=Nt.et,localeCode:k="et-EE",selectTimeLabel:Le=b("dateTimeField.selectTime"),backLabel:Be=b("dateTimeField.back"),mode:He="single",selectionLevel:Ie="days",inputProps:l,disabledDateErrorMessage:Ge=b("dateField.disabledDateError")}=s,d=He==="range",f=Se&&!d,F=d?"side-by-side":E,pe=we??(F==="multi-step"?"radio":"button"),ge=de!==void 0,[Ue,ze]=n.useState(Ae),x=ge?de:Ue,u=d?Mt(x):{},m=d?void 0:St(x),[N,J]=n.useState(!1),[We,K]=n.useState("date"),[Ye,_e]=n.useState("days"),Q=d?u.from:m,[Je,q]=n.useState(()=>Q??Y??new Date),be=n.useRef(Q);be.current=Q,n.useEffect(()=>{N||(K("date"),_e("days"),q(be.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 ye={};t.forEach((_t,bt)=>{ye[_t]=Number(I[bt+1])});const je=Number(I[t.length+1]),ke=Number(I[t.length+2]),{day:ae,month:se,year:re}=ye;if(ae===void 0||se===void 0||re===void 0||je>23||ke>59)return;const C=new Date(re,se-1,ae,je,ke,0,0);if(!(isNaN(C.getTime())||C.getFullYear()!==re||C.getMonth()!==se-1||C.getDate()!==ae))return C}},[A]),[Xe,X]=n.useState(()=>$(x)),[ve,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:Dt.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=>{ge||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)})},B=n.useMemo(()=>[...y.buildDisabledMatchers({minDate:ce,maxDate:ue,disablePast:me,disableFuture:fe}),...j?Array.isArray(j)?j:[j]:[]],[ce,ue,me,fe,j]),xe=n.useCallback(e=>kt.dateMatchModifiers(e,B),[B]),ot=e=>{if(X(e),e===""){p(!1),o(void 0);return}if(f){const r=Tt(e);if(!r){p(!1);return}if(xe(r)){p(!0);return}p(!1),o(r),q(r);return}if(d)return;const t=Qe(e);if(!t){p(!1);return}if(xe(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(Fe.Button,{type:"button",visualType:"link",size:"small",iconLeft:"schedule",onClick:()=>K("time"),children:Le})}):void 0,te=i.jsx(vt.Calendar,{view:Ye,setView:_e,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:B.length?B:void 0,required:oe,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,Ne=i.jsx(Te.TimePicker,{value:g(m),stepMinutes:he,availableTimes:ie,gridVariant:pe,onChange:lt,className:w.default(a.default["tedi-date-time-field__time-picker"],{[a.default["tedi-date-time-field__time-picker--wheel"]]:ft})}),De=e=>{const t=T(u[e]),r=!t||t.length===0;return i.jsx(Te.TimePicker,{value:g(u[e]),stepMinutes:he,availableTimes:t,gridVariant:pe,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,H=ve?{text:Ge,type:"error"}:null,ht=H?S?Array.isArray(S)?[...S,H]:[S,H]:H: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:oe,disabled:V,invalid:ve||(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:De("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:De("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:Ne})]})]}):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(Fe.Button,{type:"button",visualType:"link",size:"small",iconLeft:"arrow_back",onClick:()=>K("date"),children:Be}),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:Ne})]})})})})]})});le.displayName="DateTimeField";exports.DateTimeField=le;exports.default=le;
+"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;

package/src/tedi/components/form/date-time-field/date-time-field.es.js

@@ -8,12 +8,12 @@ import { getLocaleDateParts as Rt, buildDateRegexSource as Vt, buildDisabledMatc
 import { TextField as St } from "../textfield/textfield.es.js";
 import { TimePicker as Re } from "../time-picker/time-picker.es.js";
 import i from "./date-time-field.module.scss.es.js";
-import { et as Pt } from "../../../../../external/react-day-picker/dist/esm/locale/et.es.js";
-import { autoUpdate as $t } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
-import { offset as At, flip as Ot, shift as Lt, size as Ht } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
-import { useBreakpointProps as It } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as Bt } from "../../../providers/label-provider/use-labels.es.js";
-import { useBreakpoint as zt, isBreakpointBelow as Gt } from "../../../helpers/hooks/use-breakpoint.es.js";
+import { useBreakpointProps as Pt } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as $t } from "../../../providers/label-provider/use-labels.es.js";
+import At, { isBreakpointBelow as Ot } from "../../../helpers/hooks/use-breakpoint.es.js";
+import { et as Lt } from "../../../../../external/react-day-picker/dist/esm/locale/et.es.js";
+import { autoUpdate as Ht } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
+import { offset as It, flip as Bt, shift as zt, size as Gt } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
 import { dateMatchModifiers as Wt } from "../../../../../external/react-day-picker/dist/esm/utils/dateMatchModifiers.es.js";
 const p = (a) => String(a).padStart(2, "0"), _ = (a) => a ? `${p(a.getHours())}:${p(a.getMinutes())}` : "00:00", v = (a, o) => {
   const [Y, b] = o.split(":"), E = Number(Y), S = Number(b), P = new Date(a);
@@ -23,7 +23,7 @@ const p = (a) => String(a).padStart(2, "0"), _ = (a) => a ? `${p(a.getHours())}:
   const o = new Date(a);
   return isNaN(o.getTime()) ? void 0 : o;
 }, qt = (a) => !a || le(a) ? {} : a, Ut = (a) => le(a) ? a : void 0, Jt = Me.forwardRef((a, o) => {
-  const { getCurrentBreakpointProps: Y } = It(a.defaultServerBreakpoint), { getLabel: b } = Bt(), E = zt(a.defaultServerBreakpoint), S = Gt(E, "md"), {
+  const { getCurrentBreakpointProps: Y } = Pt(a.defaultServerBreakpoint), { getLabel: b } = $t(), E = At(a.defaultServerBreakpoint), S = Ot(E, "md"), {
     layout: P = "side-by-side",
     useNativePicker: Ve = !1,
     monthYearSelectType: Ce = "dropdown",
@@ -49,7 +49,7 @@ const p = (a) => String(a).padStart(2, "0"), _ = (a) => a ? `${p(a.getHours())}:
     disabledMatchers: T,
     stepMinutes: pe = 15,
     initialMonth: U,
-    locale: Ie = Pt,
+    locale: Ie = Lt,
     localeCode: k = "et-EE",
     selectTimeLabel: Be = b("dateTimeField.selectTime"),
     backLabel: ze = b("dateTimeField.back"),
@@ -110,17 +110,17 @@ const p = (a) => String(a).padStart(2, "0"), _ = (a) => a ? `${p(a.getHours())}:
     onOpenChange: J,
     placement: "bottom-end",
     middleware: [
-      At(Et),
-      Ot(),
-      Lt({ padding: xe }),
-      Ht({
+      It(Et),
+      Bt(),
+      zt({ padding: xe }),
+      Gt({
         padding: xe,
         apply({ availableWidth: e, elements: t }) {
           t.floating.style.maxWidth = `${e}px`;
         }
       })
     ],
-    whileElementsMounted: $t
+    whileElementsMounted: Ht
   }), { refs: Z, context: ee, x: tt, y: it, strategy: at } = et, rt = Dt([
     Ft(ee, {
       outsidePress: (e) => {
@@ -371,6 +371,5 @@ const p = (a) => String(a).padStart(2, "0"), _ = (a) => a ? `${p(a.getHours())}:
 });
 Jt.displayName = "DateTimeField";
 export {
-  Jt as DateTimeField,
-  Jt as default
+  Jt as DateTimeField
 };

package/src/tedi/components/form/file-dropzone/file-dropzone.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),F=require("../../../../../external/classnames/index.cjs.js"),C=require("../../../../../external/react-dropzone/dist/es/index.cjs.js"),N=require("../../../helpers/hooks/use-file-upload.cjs.js"),u=require("../../base/icon/icon.cjs.js"),D=require("../../buttons/closing-button/closing-button.cjs.js"),f=require("../feedback-text/feedback-text.cjs.js"),I=require("../form-label/form-label.cjs.js"),t=require("./file-dropzone.module.scss.cjs.js"),L=require("../../cards/card/card.cjs.js"),S=require("../../cards/card/card-content/card-content.cjs.js"),k=require("../../../providers/label-provider/use-labels.cjs.js"),m=require("../../content/list/list.cjs.js"),w=require("../../layout/grid/row.cjs.js"),x=require("../../layout/grid/col.cjs.js"),p=o=>{const{getLabel:s}=k.useLabels(),{label:z=s("file-dropzone.label"),className:b,disabled:a=!1,helper:i,id:c,...j}=o,{innerFiles:d,uploadErrorHelper:n,onFileChange:g,onFileRemove:v}=N.useFileUpload(o),{getRootProps:_,getInputProps:q,isDragActive:h}=C.useDropzone({disabled:a,accept:o.accept?{"application/*":[o.accept]}:void 0,multiple:o.multiple,maxSize:o.maxSize?o.maxSize*1024**2:void 0,onDrop:l=>{if(a)return;g({target:{files:l}})}}),y=F.default(t.default["tedi-file-dropzone"],{[t.default["tedi-file-dropzone--disabled"]]:a},{[t.default["tedi-file-dropzone--invalid"]]:((n==null?void 0:n.type)||(i==null?void 0:i.type))==="error"},{[t.default["tedi-file-dropzone--valid"]]:((n==null?void 0:n.type)||(i==null?void 0:i.type))==="valid"},{[t.default["tedi-file-dropzone--drop-over"]]:h},b),r=i?(i==null?void 0:i.id)??`${c}-helper`:void 0;return e.jsxs(e.Fragment,{children:[e.jsxs("div",{..._({tabIndex:a?-1:0,"aria-disabled":a,"aria-describedby":r}),className:y,children:[e.jsx("input",{...q(),disabled:a}),e.jsxs("div",{className:t.default["tedi-file-dropzone__label-wrapper"],children:[e.jsx(u.Icon,{color:a?"tertiary":"secondary",size:24,name:"attach_file"}),e.jsx(I.FormLabel,{...j,id:c,label:z,className:t.default["tedi-file-dropzone__label"]})]})]}),i?e.jsx(f.FeedbackText,{...i,id:r}):n?e.jsx(f.FeedbackText,{...n,id:r}):null,!!d.length&&e.jsx(m.List,{className:t.default["tedi-file-dropzone__file-list"],style:"none","aria-label":s("file-dropzone.selected-files"),children:d.map(l=>e.jsx(m.List.Item,{className:t.default["tedi-file-dropzone__file-list-item"],children:e.jsx(L.Card,{background:l.isValid===!1?"danger-primary":"tertiary",borderless:!0,className:t.default["tedi-file-dropzone__file-item"],children:e.jsx(S.CardContent,{padding:.5,children:e.jsxs(w.Row,{alignItems:"center",children:[e.jsxs(x.Col,{className:t.default["tedi-file-dropzone__file-name"],children:[l.name," ",l.isValid===!1&&e.jsx(u.Icon,{name:"info",color:"danger",display:"inline",size:18})]}),e.jsx(x.Col,{width:"auto",children:e.jsx(D.ClosingButton,{iconSize:18,title:s("remove")+" "+l.name,onClick:()=>v(l)})})]})})})},l.id||l.name))}),e.jsx("div",{className:"sr-only",role:"status","aria-live":"polite","aria-atomic":"true",children:d.length===0?s("file-dropzone.no-file"):s("file-dropzone.files-selected",d.length)})]})};exports.FileDropzone=p;exports.default=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),L=require("../../../../../external/classnames/index.cjs.js"),N=require("../../../../../external/react-dropzone/dist/es/index.cjs.js"),D=require("../../../helpers/hooks/use-file-upload.cjs.js"),$=require("../../base/icon/icon.cjs.js"),I=require("../../buttons/button/button.cjs.js"),S=require("../../misc/attachment/attachment.cjs.js"),f=require("../feedback-text/feedback-text.cjs.js"),T=require("../form-label/form-label.cjs.js"),n=require("./file-dropzone.module.scss.cjs.js"),k=require("../../../providers/label-provider/use-labels.cjs.js"),p=require("../../content/list/list.cjs.js"),P=s=>{const{getLabel:d}=k.useLabels(),{label:x=d("file-dropzone.label"),className:b,disabled:o=!1,helper:i,id:m,attachmentProps:c,...z}=s,{innerFiles:r,uploadErrorHelper:a,onFileChange:g,onFileRemove:j}=D.useFileUpload(s),{getRootProps:v,getInputProps:h,isDragActive:y}=N.useDropzone({disabled:o,accept:s.accept?{"application/*":[s.accept]}:void 0,multiple:s.multiple,maxSize:s.maxSize?s.maxSize*1024**2:void 0,onDrop:t=>{if(o)return;g({target:{files:t}})}}),F=L.default(n.default["tedi-file-dropzone"],{[n.default["tedi-file-dropzone--disabled"]]:o},{[n.default["tedi-file-dropzone--invalid"]]:((a==null?void 0:a.type)||(i==null?void 0:i.type))==="error"},{[n.default["tedi-file-dropzone--valid"]]:((a==null?void 0:a.type)||(i==null?void 0:i.type))==="valid"},{[n.default["tedi-file-dropzone--drop-over"]]:y},b),u=i?(i==null?void 0:i.id)??`${m}-helper`:void 0;return e.jsxs(e.Fragment,{children:[e.jsxs("div",{...v({tabIndex:o?-1:0,"aria-disabled":o,"aria-describedby":u}),className:F,children:[e.jsx("input",{...h(),disabled:o}),e.jsx("div",{className:n.default["tedi-file-dropzone__label-wrapper"],children:e.jsx(T.FormLabel,{...z,id:m,label:e.jsxs(e.Fragment,{children:[e.jsx($.Icon,{color:o?"tertiary":"secondary",size:24,name:"attach_file",display:"inline",className:n.default["tedi-file-dropzone__label-icon"]}),x]}),className:n.default["tedi-file-dropzone__label"]})})]}),i?e.jsx(f.FeedbackText,{...i,id:u}):a?e.jsx(f.FeedbackText,{...a,id:u}):null,!!r.length&&e.jsx(p.List,{className:n.default["tedi-file-dropzone__file-list"],style:"none","aria-label":d("file-dropzone.selected-files"),children:r.map(t=>{const l=typeof c=="function"?c(t):c,{actions:q,..._}=l??{};return e.jsx(p.List.Item,{className:n.default["tedi-file-dropzone__file-list-item"],children:e.jsx(S.Attachment,{..._,name:t.name??"",isValid:t.isValid??(l==null?void 0:l.isValid),isLoading:t.isLoading??(l==null?void 0:l.isLoading),actions:e.jsxs(e.Fragment,{children:[q,e.jsx(I.Button,{visualType:"neutral",icon:"delete",onClick:()=>j(t),children:`${d("remove")} ${t.name??""}`})]})})},t.id??`${t.name??"file"}-${t.size??""}-${t.lastModified??""}`)})}),e.jsx("div",{className:"sr-only",role:"status","aria-live":"polite","aria-atomic":"true",children:r.length===0?d("file-dropzone.no-file"):d("file-dropzone.files-selected",r.length)})]})};exports.FileDropzone=P;

package/src/tedi/components/form/file-dropzone/file-dropzone.d.ts

@@ -1,12 +1,38 @@
-import { UseFileUploadProps } from '../../../helpers/hooks/use-file-upload';
+import { FileUploadFile, UseFileUploadProps } from '../../../helpers/hooks/use-file-upload';
+import { AttachmentProps } from '../../misc/attachment/attachment';
 import { FeedbackTextProps } from '../feedback-text/feedback-text';
 import { FormLabelProps } from '../form-label/form-label';
-export interface FileDropzoneProps extends Omit<FormLabelProps, 'size' | 'hideLabel'>, UseFileUploadProps {
+export type FileDropzoneAttachmentProps = Partial<Omit<AttachmentProps, 'name'>> | ((file: FileUploadFile) => Partial<Omit<AttachmentProps, 'name'>>);
+export interface FileDropzoneProps extends Omit<FormLabelProps, 'size' | 'hideLabel' | 'label'>, UseFileUploadProps {
+    /**
+     * Additional CSS class names to apply to the dropzone for custom styling
+     */
     className?: string;
+    /**
+     * The name attribute for the file input, used for form submission and identifying the field.
+     */
     name: string;
-    label: string;
+    /**
+     * The text label displayed for the file dropzone, providing context for users.
+     * Defaults to the `LabelProvider`'s localised `file-dropzone.label` (e.g. "Lohista
+     * failid siia või klõpsa, et sirvida" in Estonian).
+     */
+    label?: string;
+    /**
+     * Provides helper text or feedback (such as an error or instruction message) to guide the user.
+     */
     helper?: FeedbackTextProps;
+    /**
+     * Disables the file dropzone, preventing user interaction.
+     */
     disabled?: boolean;
+    /**
+     * Overrides forwarded to each rendered `Attachment` (e.g. `icon`, `fileSize`,
+     * `progress`, `feedback`). Pass a function to vary per file. `FileDropzone`
+     * sets `name`, `isValid` and `isLoading` itself, and always appends a remove
+     * button to the `actions` slot (after any `actions` you provide here).
+     */
+    attachmentProps?: FileDropzoneAttachmentProps;
 }
 export declare const FileDropzone: (props: FileDropzoneProps) => JSX.Element;
 export default FileDropzone;

package/src/tedi/components/form/file-dropzone/file-dropzone.es.js

@@ -1,93 +1,114 @@
-import { jsxs as d, Fragment as C, jsx as e } from "react/jsx-runtime";
+import { jsxs as c, Fragment as f, jsx as t } from "react/jsx-runtime";
 import I from "../../../../../external/classnames/index.es.js";
-import { useDropzone as D } from "../../../../../external/react-dropzone/dist/es/index.es.js";
-import { useFileUpload as L } from "../../../helpers/hooks/use-file-upload.es.js";
-import { Icon as f } from "../../base/icon/icon.es.js";
-import { ClosingButton as S } from "../../buttons/closing-button/closing-button.es.js";
-import { FeedbackText as p } from "../feedback-text/feedback-text.es.js";
+import { useDropzone as A } from "../../../../../external/react-dropzone/dist/es/index.es.js";
+import { useFileUpload as P } from "../../../helpers/hooks/use-file-upload.es.js";
+import { Icon as S } from "../../base/icon/icon.es.js";
+import { Button as V } from "../../buttons/button/button.es.js";
+import { Attachment as j } from "../../misc/attachment/attachment.es.js";
+import { FeedbackText as b } from "../feedback-text/feedback-text.es.js";
 import { FormLabel as k } from "../form-label/form-label.es.js";
 import o from "./file-dropzone.module.scss.es.js";
-import { Card as w } from "../../cards/card/card.es.js";
-import { CardContent as R } from "../../cards/card/card-content/card-content.es.js";
-import { useLabels as j } from "../../../providers/label-provider/use-labels.es.js";
-import { List as z } from "../../content/list/list.es.js";
-import { Row as B } from "../../layout/grid/row.es.js";
-import { Col as b } from "../../layout/grid/col.es.js";
-const Z = (a) => {
-  const { getLabel: n } = j(), { label: g = n("file-dropzone.label"), className: v, disabled: r = !1, helper: i, id: c, ...h } = a, { innerFiles: s, uploadErrorHelper: l, onFileChange: u, onFileRemove: y } = L(a), { getRootProps: _, getInputProps: N, isDragActive: x } = D({
-    disabled: r,
-    accept: a.accept ? { "application/*": [a.accept] } : void 0,
-    multiple: a.multiple,
-    maxSize: a.maxSize ? a.maxSize * 1024 ** 2 : void 0,
-    onDrop: (t) => {
-      if (r) return;
-      u({
-        target: { files: t }
+import { useLabels as B } from "../../../providers/label-provider/use-labels.es.js";
+import { List as v } from "../../content/list/list.es.js";
+const W = (l) => {
+  const { getLabel: s } = B(), {
+    label: h = s("file-dropzone.label"),
+    className: u,
+    disabled: d = !1,
+    helper: e,
+    id: z,
+    attachmentProps: m,
+    ...g
+  } = l, { innerFiles: r, uploadErrorHelper: a, onFileChange: y, onFileRemove: _ } = P(l), { getRootProps: N, getInputProps: x, isDragActive: F } = A({
+    disabled: d,
+    accept: l.accept ? { "application/*": [l.accept] } : void 0,
+    multiple: l.multiple,
+    maxSize: l.maxSize ? l.maxSize * 1024 ** 2 : void 0,
+    onDrop: (i) => {
+      if (d) return;
+      y({
+        target: { files: i }
       });
     }
-  }), F = I(
+  }), L = I(
     o["tedi-file-dropzone"],
-    { [o["tedi-file-dropzone--disabled"]]: r },
-    { [o["tedi-file-dropzone--invalid"]]: ((l == null ? void 0 : l.type) || (i == null ? void 0 : i.type)) === "error" },
-    { [o["tedi-file-dropzone--valid"]]: ((l == null ? void 0 : l.type) || (i == null ? void 0 : i.type)) === "valid" },
-    { [o["tedi-file-dropzone--drop-over"]]: x },
-    v
-  ), m = i ? (i == null ? void 0 : i.id) ?? `${c}-helper` : void 0;
-  return /* @__PURE__ */ d(C, { children: [
-    /* @__PURE__ */ d(
+    { [o["tedi-file-dropzone--disabled"]]: d },
+    { [o["tedi-file-dropzone--invalid"]]: ((a == null ? void 0 : a.type) || (e == null ? void 0 : e.type)) === "error" },
+    { [o["tedi-file-dropzone--valid"]]: ((a == null ? void 0 : a.type) || (e == null ? void 0 : e.type)) === "valid" },
+    { [o["tedi-file-dropzone--drop-over"]]: F },
+    u
+  ), p = e ? (e == null ? void 0 : e.id) ?? `${z}-helper` : void 0;
+  return /* @__PURE__ */ c(f, { children: [
+    /* @__PURE__ */ c(
       "div",
       {
-        ..._({
-          tabIndex: r ? -1 : 0,
-          "aria-disabled": r,
-          "aria-describedby": m
+        ...N({
+          tabIndex: d ? -1 : 0,
+          "aria-disabled": d,
+          "aria-describedby": p
         }),
-        className: F,
+        className: L,
         children: [
-          /* @__PURE__ */ e("input", { ...N(), disabled: r }),
-          /* @__PURE__ */ d("div", { className: o["tedi-file-dropzone__label-wrapper"], children: [
-            /* @__PURE__ */ e(f, { color: r ? "tertiary" : "secondary", size: 24, name: "attach_file" }),
-            /* @__PURE__ */ e(k, { ...h, id: c, label: g, className: o["tedi-file-dropzone__label"] })
-          ] })
+          /* @__PURE__ */ t("input", { ...x(), disabled: d }),
+          /* @__PURE__ */ t("div", { className: o["tedi-file-dropzone__label-wrapper"], children: /* @__PURE__ */ t(
+            k,
+            {
+              ...g,
+              id: z,
+              label: /* @__PURE__ */ c(f, { children: [
+                /* @__PURE__ */ t(
+                  S,
+                  {
+                    color: d ? "tertiary" : "secondary",
+                    size: 24,
+                    name: "attach_file",
+                    display: "inline",
+                    className: o["tedi-file-dropzone__label-icon"]
+                  }
+                ),
+                h
+              ] }),
+              className: o["tedi-file-dropzone__label"]
+            }
+          ) })
         ]
       }
     ),
-    i ? /* @__PURE__ */ e(p, { ...i, id: m }) : l ? /* @__PURE__ */ e(p, { ...l, id: m }) : null,
-    !!s.length && /* @__PURE__ */ e(
-      z,
+    e ? /* @__PURE__ */ t(b, { ...e, id: p }) : a ? /* @__PURE__ */ t(b, { ...a, id: p }) : null,
+    !!r.length && /* @__PURE__ */ t(
+      v,
       {
         className: o["tedi-file-dropzone__file-list"],
         style: "none",
-        "aria-label": n("file-dropzone.selected-files"),
-        children: s.map((t) => /* @__PURE__ */ e(z.Item, { className: o["tedi-file-dropzone__file-list-item"], children: /* @__PURE__ */ e(
-          w,
-          {
-            background: t.isValid === !1 ? "danger-primary" : "tertiary",
-            borderless: !0,
-            className: o["tedi-file-dropzone__file-item"],
-            children: /* @__PURE__ */ e(R, { padding: 0.5, children: /* @__PURE__ */ d(B, { alignItems: "center", children: [
-              /* @__PURE__ */ d(b, { className: o["tedi-file-dropzone__file-name"], children: [
-                t.name,
-                " ",
-                t.isValid === !1 && /* @__PURE__ */ e(f, { name: "info", color: "danger", display: "inline", size: 18 })
-              ] }),
-              /* @__PURE__ */ e(b, { width: "auto", children: /* @__PURE__ */ e(
-                S,
+        "aria-label": s("file-dropzone.selected-files"),
+        children: r.map((i) => {
+          const n = typeof m == "function" ? m(i) : m, { actions: $, ...D } = n ?? {};
+          return /* @__PURE__ */ t(
+            v.Item,
+            {
+              className: o["tedi-file-dropzone__file-list-item"],
+              children: /* @__PURE__ */ t(
+                j,
                 {
-                  iconSize: 18,
-                  title: n("remove") + " " + t.name,
-                  onClick: () => y(t)
+                  ...D,
+                  name: i.name ?? "",
+                  isValid: i.isValid ?? (n == null ? void 0 : n.isValid),
+                  isLoading: i.isLoading ?? (n == null ? void 0 : n.isLoading),
+                  actions: /* @__PURE__ */ c(f, { children: [
+                    $,
+                    /* @__PURE__ */ t(V, { visualType: "neutral", icon: "delete", onClick: () => _(i), children: `${s("remove")} ${i.name ?? ""}` })
+                  ] })
                 }
-              ) })
-            ] }) })
-          }
-        ) }, t.id || t.name))
+              )
+            },
+            i.id ?? `${i.name ?? "file"}-${i.size ?? ""}-${i.lastModified ?? ""}`
+          );
+        })
       }
     ),
-    /* @__PURE__ */ e("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: s.length === 0 ? n("file-dropzone.no-file") : n("file-dropzone.files-selected", s.length) })
+    /* @__PURE__ */ t("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: r.length === 0 ? s("file-dropzone.no-file") : s("file-dropzone.files-selected", r.length) })
   ] });
 };
 export {
-  Z as FileDropzone,
-  Z as default
+  W as FileDropzone
 };

package/src/tedi/components/form/file-dropzone/file-dropzone.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-file-dropzone":"tedi-file-dropzone-70698e52","tedi-file-dropzone__label-wrapper":"tedi-file-dropzone__label-wrapper-78360685","tedi-file-dropzone__label":"tedi-file-dropzone__label-5c15bc34","tedi-file-dropzone--disabled":"tedi-file-dropzone--disabled-0e01143d","tedi-file-dropzone--invalid":"tedi-file-dropzone--invalid-159cce6d","tedi-file-dropzone--valid":"tedi-file-dropzone--valid-d2d3ef3d","tedi-file-dropzone--drop-over":"tedi-file-dropzone--drop-over-3e31af77","tedi-file-dropzone__file-list":"tedi-file-dropzone__file-list-c1ededa3","tedi-file-dropzone__file-list-item":"tedi-file-dropzone__file-list-item-3ad71621","tedi-file-dropzone__file-name":"tedi-file-dropzone__file-name-f9bf2a63"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-file-dropzone":"tedi-file-dropzone-70698e52","tedi-file-dropzone__label-wrapper":"tedi-file-dropzone__label-wrapper-78360685","tedi-file-dropzone__label":"tedi-file-dropzone__label-5c15bc34","tedi-file-dropzone__label-icon":"tedi-file-dropzone__label-icon-180ef5ad","tedi-file-dropzone--disabled":"tedi-file-dropzone--disabled-0e01143d","tedi-file-dropzone--invalid":"tedi-file-dropzone--invalid-159cce6d","tedi-file-dropzone--valid":"tedi-file-dropzone--valid-d2d3ef3d","tedi-file-dropzone--drop-over":"tedi-file-dropzone--drop-over-3e31af77","tedi-file-dropzone__file-list":"tedi-file-dropzone__file-list-c1ededa3","tedi-file-dropzone__file-list-item":"tedi-file-dropzone__file-list-item-3ad71621"};exports.default=e;

package/src/tedi/components/form/file-dropzone/file-dropzone.module.scss.es.js

@@ -2,13 +2,13 @@ const e = {
   "tedi-file-dropzone": "tedi-file-dropzone-70698e52",
   "tedi-file-dropzone__label-wrapper": "tedi-file-dropzone__label-wrapper-78360685",
   "tedi-file-dropzone__label": "tedi-file-dropzone__label-5c15bc34",
+  "tedi-file-dropzone__label-icon": "tedi-file-dropzone__label-icon-180ef5ad",
   "tedi-file-dropzone--disabled": "tedi-file-dropzone--disabled-0e01143d",
   "tedi-file-dropzone--invalid": "tedi-file-dropzone--invalid-159cce6d",
   "tedi-file-dropzone--valid": "tedi-file-dropzone--valid-d2d3ef3d",
   "tedi-file-dropzone--drop-over": "tedi-file-dropzone--drop-over-3e31af77",
   "tedi-file-dropzone__file-list": "tedi-file-dropzone__file-list-c1ededa3",
-  "tedi-file-dropzone__file-list-item": "tedi-file-dropzone__file-list-item-3ad71621",
-  "tedi-file-dropzone__file-name": "tedi-file-dropzone__file-name-f9bf2a63"
+  "tedi-file-dropzone__file-list-item": "tedi-file-dropzone__file-list-item-3ad71621"
 };
 export {
   e as default

package/src/tedi/components/form/file-upload/examples/multiple-handled.d.ts

@@ -1,3 +1,3 @@
-import { StoryFn } from '@storybook/react';
+import { StoryFn } from '@storybook/react-vite';
 import { default as FileUpload } from '../file-upload';
 export declare const MultipleHandledTemplate: StoryFn<typeof FileUpload>;