@tedi-design-system/react 18.0.0-rc.3 → 18.0.0-rc.30

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

@@ -0,0 +1,375 @@
+import { jsx as r, jsxs as f, Fragment as Nt } from "react/jsx-runtime";
+import { useFloating as yt, useInteractions as Dt, useDismiss as Ft, useRole as Tt, FloatingPortal as kt, FloatingFocusManager as Mt } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import C from "../../../../../external/classnames/index.es.js";
+import Me, { useState as g, useRef as wt, useEffect as se, useMemo as W, useCallback as F } from "react";
+import { Button as we } from "../../buttons/button/button.es.js";
+import { Calendar as xt } from "../../content/calendar/calendar.es.js";
+import { getLocaleDateParts as Rt, buildDateRegexSource as Vt, buildDisabledMatchers as Ct, CALENDAR_POPOVER_OFFSET as Et, CALENDAR_POPOVER_PADDING as xe } from "../date-field/date-field-helpers.es.js";
+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 { 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);
+  return P.setHours(Number.isFinite(E) ? E : 0, Number.isFinite(S) ? S : 0, 0, 0), P;
+}, le = (a) => a instanceof Date, Yt = (a) => a ? `${a.getFullYear()}-${p(a.getMonth() + 1)}-${p(a.getDate())}T${p(a.getHours())}:${p(a.getMinutes())}` : "", jt = (a) => {
+  if (!a) return;
+  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 } = 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",
+    timeGridVariant: Ee,
+    showOutsideDays: Se = !0,
+    availableTimes: N,
+    timeHeading: j = b("dateTimeField.timeHeading")
+  } = Y(a), {
+    id: Pe,
+    label: $e,
+    placeholder: Ae,
+    className: Oe,
+    value: de,
+    defaultValue: Le,
+    onChange: q,
+    required: oe,
+    readOnly: He,
+    disabled: $,
+    minDate: ce,
+    maxDate: me,
+    disablePast: fe,
+    disableFuture: ue,
+    disabledMatchers: T,
+    stepMinutes: pe = 15,
+    initialMonth: U,
+    locale: Ie = Lt,
+    localeCode: k = "et-EE",
+    selectTimeLabel: Be = b("dateTimeField.selectTime"),
+    backLabel: ze = b("dateTimeField.back"),
+    mode: Ge = "single",
+    selectionLevel: We = "days",
+    inputProps: s,
+    disabledDateErrorMessage: Ye = b("dateField.disabledDateError")
+  } = a, l = Ge === "range", u = Ve && !l, M = l ? "side-by-side" : P, he = Ee ?? (M === "multi-step" ? "radio" : "button"), ge = de !== void 0, [je, qe] = g(Le), y = ge ? de : je, c = l ? qt(y) : {}, m = l ? void 0 : Ut(y), [D, J] = g(!1), [Ue, K] = g("date"), [Je, _e] = g("days"), Q = l ? c.from : m, [Ke, A] = g(() => Q ?? U ?? /* @__PURE__ */ new Date()), ve = wt(Q);
+  ve.current = Q, se(() => {
+    D || (K("date"), _e("days"), A(ve.current ?? U ?? /* @__PURE__ */ new Date()));
+  }, [D, U]);
+  const O = W(
+    () => new Intl.DateTimeFormat(k, {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric"
+    }),
+    [k]
+  ), Qe = W(
+    () => new Intl.DateTimeFormat(k, {
+      day: "2-digit",
+      month: "2-digit",
+      year: "2-digit"
+    }),
+    [k]
+  ), L = F(
+    (e) => e ? `${O.format(e)} ${p(e.getHours())}:${p(e.getMinutes())}` : "",
+    [O]
+  ), H = F(
+    (e) => {
+      if (!e) return "";
+      if (le(e)) return L(e);
+      const t = L(e.from), n = L(e.to);
+      return !t && !n ? "" : n ? t ? `${t} – ${n}` : n : t;
+    },
+    [L]
+  ), Xe = W(() => {
+    const e = Rt(O), { fieldOrder: t } = e, n = new RegExp(`^${Vt(e)}\\s+(\\d{2}):(\\d{2})$`);
+    return (_t) => {
+      const G = _t.trim().match(n);
+      if (!G) return;
+      const Fe = {};
+      t.forEach((vt, bt) => {
+        Fe[vt] = Number(G[bt + 1]);
+      });
+      const Te = Number(G[t.length + 1]), ke = Number(G[t.length + 2]), { day: ae, month: re, year: ne } = Fe;
+      if (ae === void 0 || re === void 0 || ne === void 0 || Te > 23 || ke > 59) return;
+      const V = new Date(ne, re - 1, ae, Te, ke, 0, 0);
+      if (!(isNaN(V.getTime()) || V.getFullYear() !== ne || V.getMonth() !== re - 1 || V.getDate() !== ae))
+        return V;
+    };
+  }, [O]), [Ze, X] = g(() => H(y)), [be, h] = g(!1);
+  se(() => {
+    X(H(y));
+  }, [y, H]);
+  const et = yt({
+    open: D,
+    onOpenChange: J,
+    placement: "bottom-end",
+    middleware: [
+      It(Et),
+      Bt(),
+      zt({ padding: xe }),
+      Gt({
+        padding: xe,
+        apply({ availableWidth: e, elements: t }) {
+          t.floating.style.maxWidth = `${e}px`;
+        }
+      })
+    ],
+    whileElementsMounted: Ht
+  }), { refs: Z, context: ee, x: tt, y: it, strategy: at } = et, rt = Dt([
+    Ft(ee, {
+      outsidePress: (e) => {
+        const t = e.target;
+        return !(t != null && t.closest('[role="menu"], [role="listbox"]'));
+      }
+    }),
+    Tt(ee, { role: "dialog" })
+  ]), I = Me.useRef(null), nt = F(
+    (e) => {
+      I.current = e, typeof o == "function" ? o(e) : o && (o.current = e);
+    },
+    [o]
+  );
+  se(() => {
+    var e;
+    (e = I.current) != null && e.inner && Z.setReference(I.current.inner);
+  }, [Z]);
+  const d = (e) => {
+    ge || qe(e), q == null || q(e), X(H(e));
+  }, w = F(
+    (e) => {
+      if (N)
+        return typeof N == "function" ? N(e ?? /* @__PURE__ */ new Date()) : N;
+    },
+    [N]
+  ), x = F(
+    (e, t) => {
+      const n = w(e);
+      return !n || n.length === 0 || n.includes(t) ? t : n[0];
+    },
+    [w]
+  ), st = (e) => {
+    if (l) {
+      const t = e;
+      if (!t || !t.from && !t.to) {
+        d(void 0);
+        return;
+      }
+      const n = {};
+      t.from && (n.from = v(t.from, x(t.from, _(c.from)))), t.to && (n.to = v(t.to, x(t.to, _(c.to)))), d(n);
+      return;
+    }
+    e instanceof Date ? d(v(e, x(e, _(m)))) : e === void 0 && d(void 0);
+  }, lt = (e) => {
+    if (l) {
+      d({ from: v(e, x(e, _(c.from))) });
+      return;
+    }
+    d(v(e, x(e, _(m))));
+  }, dt = (e) => {
+    const t = m ?? /* @__PURE__ */ new Date();
+    d(v(t, e)), M === "multi-step" && w(t) && J(!1);
+  }, ot = (e) => (t) => {
+    const n = c[e] ?? c.from ?? /* @__PURE__ */ new Date();
+    d({ ...c, [e]: v(n, t) });
+  }, B = W(
+    () => [
+      ...Ct({
+        minDate: ce,
+        maxDate: me,
+        disablePast: fe,
+        disableFuture: ue
+      }),
+      ...T ? Array.isArray(T) ? T : [T] : []
+    ],
+    [ce, me, fe, ue, T]
+  ), Ne = F(
+    (e) => Wt(e, B),
+    [B]
+  ), ct = (e) => {
+    if (X(e), e === "") {
+      h(!1), d(void 0);
+      return;
+    }
+    if (u) {
+      const n = jt(e);
+      if (!n) {
+        h(!1);
+        return;
+      }
+      if (Ne(n)) {
+        h(!0);
+        return;
+      }
+      h(!1), d(n), A(n);
+      return;
+    }
+    if (l) return;
+    const t = Xe(e);
+    if (!t) {
+      h(!1);
+      return;
+    }
+    if (Ne(t)) {
+      h(!0);
+      return;
+    }
+    h(!1), d(t), A(t);
+  }, mt = () => {
+    var t;
+    const e = (t = I.current) == null ? void 0 : t.input;
+    if (e) {
+      if (typeof e.showPicker == "function") {
+        e.showPicker();
+        return;
+      }
+      e.focus();
+    }
+  }, ft = () => {
+    if (!$) {
+      if (u) {
+        mt();
+        return;
+      }
+      J((e) => !e);
+    }
+  }, ut = 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(
+    xt,
+    {
+      view: Je,
+      setView: _e,
+      selectionLevel: We,
+      currentMonth: Ke,
+      setCurrentMonth: A,
+      mode: l ? "range" : "single",
+      value: l ? c : m,
+      numberOfMonths: l && !S ? 2 : 1,
+      locale: Ie,
+      localeCode: k,
+      showOutsideDays: Se,
+      monthYearSelectType: Ce,
+      disabledMatchers: B.length ? B : void 0,
+      required: oe,
+      handleSelect: st,
+      applyValue: lt,
+      footer: ut,
+      className: C(
+        i["tedi-date-time-field__calendar"],
+        M === "side-by-side" && i["tedi-date-time-field__calendar--split"]
+      )
+    }
+  ), ie = w(m), pt = !ie || ie.length === 0, ye = /* @__PURE__ */ r(
+    Re,
+    {
+      value: _(m),
+      stepMinutes: pe,
+      availableTimes: ie,
+      gridVariant: he,
+      onChange: dt,
+      className: C(i["tedi-date-time-field__time-picker"], {
+        [i["tedi-date-time-field__time-picker--wheel"]]: pt
+      })
+    }
+  ), De = (e) => {
+    const t = w(c[e]), n = !t || t.length === 0;
+    return /* @__PURE__ */ r(
+      Re,
+      {
+        value: _(c[e]),
+        stepMinutes: pe,
+        availableTimes: t,
+        gridVariant: he,
+        onChange: ot(e),
+        className: C(i["tedi-date-time-field__time-picker"], {
+          [i["tedi-date-time-field__time-picker--wheel"]]: n
+        })
+      }
+    );
+  }, R = s == null ? void 0 : s.helper, z = be ? { text: Ye, type: "error" } : null, ht = z ? R ? Array.isArray(R) ? [...R, z] : [R, z] : z : R, gt = {
+    ...s,
+    id: Pe,
+    label: $e,
+    value: u ? Yt(m) : Ze,
+    placeholder: Ae,
+    readOnly: He || !u && !!N && !!y,
+    icon: "calendar_today",
+    isClearable: !0,
+    required: oe,
+    disabled: $,
+    invalid: be || (s == null ? void 0 : s.invalid),
+    helper: ht,
+    onIconClick: ft,
+    onChange: ct,
+    className: C(i["tedi-date-time-field__textfield"], s == null ? void 0 : s.className, {
+      [i["tedi-date-time-field__icon--disabled"]]: $
+    }),
+    input: {
+      ...s == null ? void 0 : s.input,
+      type: u ? "datetime-local" : "text",
+      "aria-expanded": u ? void 0 : D
+    }
+  };
+  return /* @__PURE__ */ f(Nt, { children: [
+    /* @__PURE__ */ r("div", { className: C(i["tedi-date-time-field__container"], Oe), "aria-haspopup": "dialog", children: /* @__PURE__ */ r(St, { ref: nt, "aria-expanded": u ? void 0 : D, ...gt }) }),
+    !u && /* @__PURE__ */ r(kt, { children: D && !$ && /* @__PURE__ */ r(Mt, { context: ee, modal: !1, initialFocus: -1, children: /* @__PURE__ */ r(
+      "div",
+      {
+        ref: Z.setFloating,
+        className: i["tedi-date-time-field__popup"],
+        ...rt.getFloatingProps({
+          style: {
+            position: at,
+            top: it ?? 0,
+            left: tt ?? 0
+          }
+        }),
+        children: l ? /* @__PURE__ */ f("div", { className: i["tedi-date-time-field__range"], children: [
+          te,
+          /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__range-separator"], "aria-hidden": "true", children: /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__range-separator-line"] }) }),
+          /* @__PURE__ */ f("div", { className: i["tedi-date-time-field__range-times"], children: [
+            /* @__PURE__ */ f("div", { className: i["tedi-date-time-field__range-time"], children: [
+              /* @__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 }) }),
+              /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__split-time-body"], children: De("from") })
+            ] }),
+            /* @__PURE__ */ f("div", { className: i["tedi-date-time-field__range-time"], children: [
+              /* @__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 }) }),
+              /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__split-time-body"], children: De("to") })
+            ] })
+          ] })
+        ] }) : M === "side-by-side" ? /* @__PURE__ */ f("div", { className: i["tedi-date-time-field__split"], children: [
+          te,
+          /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__split-separator"], "aria-hidden": "true", children: /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__split-separator-line"] }) }),
+          /* @__PURE__ */ f("div", { className: i["tedi-date-time-field__split-time"], children: [
+            /* @__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 }) }),
+            /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__split-time-body"], children: ye })
+          ] })
+        ] }) : Ue === "date" ? te : /* @__PURE__ */ f("div", { className: i["tedi-date-time-field__time-step"], children: [
+          /* @__PURE__ */ f("header", { className: i["tedi-date-time-field__time-header"], children: [
+            /* @__PURE__ */ r(
+              we,
+              {
+                type: "button",
+                visualType: "link",
+                size: "small",
+                iconLeft: "arrow_back",
+                onClick: () => K("date"),
+                children: ze
+              }
+            ),
+            /* @__PURE__ */ r("span", { className: i["tedi-date-time-field__time-date"], children: Qe.format(m ?? /* @__PURE__ */ new Date()) })
+          ] }),
+          /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__time-body"], children: ye })
+        ] })
+      }
+    ) }) })
+  ] });
+});
+Jt.displayName = "DateTimeField";
+export {
+  Jt as DateTimeField
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-date-time-field__container":"tedi-date-time-field__container-27fb2d35","tedi-date-time-field__textfield":"tedi-date-time-field__textfield-74c7a842","tedi-date-time-field__icon--disabled":"tedi-date-time-field__icon--disabled-82069c63","tedi-date-time-field__popup":"tedi-date-time-field__popup-9c353957","tedi-date-time-field__calendar":"tedi-date-time-field__calendar-44cf1ff8","tedi-date-time-field__split":"tedi-date-time-field__split-7c921802","tedi-date-time-field__calendar--split":"tedi-date-time-field__calendar--split-758ff612","tedi-date-time-field__time-picker":"tedi-date-time-field__time-picker-4d9e2eb6","tedi-date-time-field__time-picker--wheel":"tedi-date-time-field__time-picker--wheel-4bd09564","tedi-date-time-field__split-separator":"tedi-date-time-field__split-separator-b37f315f","tedi-date-time-field__split-separator-line":"tedi-date-time-field__split-separator-line-d4cb6bfe","tedi-date-time-field__split-time":"tedi-date-time-field__split-time-d898edf8","tedi-date-time-field__split-time-header":"tedi-date-time-field__split-time-header-7a646313","tedi-date-time-field__split-heading":"tedi-date-time-field__split-heading-8a3194a5","tedi-date-time-field__split-time-body":"tedi-date-time-field__split-time-body-ce0c1335","tedi-date-time-field__range":"tedi-date-time-field__range-17507b68","tedi-date-time-field__range-separator":"tedi-date-time-field__range-separator-8159580a","tedi-date-time-field__range-separator-line":"tedi-date-time-field__range-separator-line-993e312a","tedi-date-time-field__range-times":"tedi-date-time-field__range-times-a55a5598","tedi-date-time-field__range-time":"tedi-date-time-field__range-time-f46bcb80","tedi-date-time-field__select-time-wrapper":"tedi-date-time-field__select-time-wrapper-5c969c55","tedi-date-time-field__time-step":"tedi-date-time-field__time-step-c25362e0","tedi-date-time-field__time-header":"tedi-date-time-field__time-header-e72d431f","tedi-date-time-field__time-date":"tedi-date-time-field__time-date-e5eb5da7","tedi-date-time-field__time-body":"tedi-date-time-field__time-body-b8c484e0"};exports.default=e;

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

@@ -0,0 +1,30 @@
+const e = {
+  "tedi-date-time-field__container": "tedi-date-time-field__container-27fb2d35",
+  "tedi-date-time-field__textfield": "tedi-date-time-field__textfield-74c7a842",
+  "tedi-date-time-field__icon--disabled": "tedi-date-time-field__icon--disabled-82069c63",
+  "tedi-date-time-field__popup": "tedi-date-time-field__popup-9c353957",
+  "tedi-date-time-field__calendar": "tedi-date-time-field__calendar-44cf1ff8",
+  "tedi-date-time-field__split": "tedi-date-time-field__split-7c921802",
+  "tedi-date-time-field__calendar--split": "tedi-date-time-field__calendar--split-758ff612",
+  "tedi-date-time-field__time-picker": "tedi-date-time-field__time-picker-4d9e2eb6",
+  "tedi-date-time-field__time-picker--wheel": "tedi-date-time-field__time-picker--wheel-4bd09564",
+  "tedi-date-time-field__split-separator": "tedi-date-time-field__split-separator-b37f315f",
+  "tedi-date-time-field__split-separator-line": "tedi-date-time-field__split-separator-line-d4cb6bfe",
+  "tedi-date-time-field__split-time": "tedi-date-time-field__split-time-d898edf8",
+  "tedi-date-time-field__split-time-header": "tedi-date-time-field__split-time-header-7a646313",
+  "tedi-date-time-field__split-heading": "tedi-date-time-field__split-heading-8a3194a5",
+  "tedi-date-time-field__split-time-body": "tedi-date-time-field__split-time-body-ce0c1335",
+  "tedi-date-time-field__range": "tedi-date-time-field__range-17507b68",
+  "tedi-date-time-field__range-separator": "tedi-date-time-field__range-separator-8159580a",
+  "tedi-date-time-field__range-separator-line": "tedi-date-time-field__range-separator-line-993e312a",
+  "tedi-date-time-field__range-times": "tedi-date-time-field__range-times-a55a5598",
+  "tedi-date-time-field__range-time": "tedi-date-time-field__range-time-f46bcb80",
+  "tedi-date-time-field__select-time-wrapper": "tedi-date-time-field__select-time-wrapper-5c969c55",
+  "tedi-date-time-field__time-step": "tedi-date-time-field__time-step-c25362e0",
+  "tedi-date-time-field__time-header": "tedi-date-time-field__time-header-e72d431f",
+  "tedi-date-time-field__time-date": "tedi-date-time-field__time-date-e5eb5da7",
+  "tedi-date-time-field__time-body": "tedi-date-time-field__time-body-b8c484e0"
+};
+export {
+  e as default
+};

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;