asma-ui-core 3.106.0 → 3.107.0

package/dist/components/feedback/minimizable-dialog/v2/MinimizableDialogV2.js

@@ -1,47 +1,53 @@
-import { cn as c } from "../../../../helpers/cn.js";
-import { firstTabbable as I } from "../../../../helpers/focusable.js";
-import { StyledTooltip as G } from "../../../data-display/tooltip/StyledTooltip.js";
-import { DialogBusyContext as j, useDialogBusyBoundary as J } from "../../dialog/DialogBusyContext.js";
-import { useMobileMediaQuery as K } from "../../../../hooks/useMediaQuery.hook.js";
-import { useFocusTrap as X } from "../../../../hooks/useFocusTrap.hook.js";
-import { CloseBtn as D } from "../components/CloseBtn.js";
-import { MinimizeBtn as P } from "../components/MinimizeBtn.js";
-import { FullScreenBtn as Y } from "../components/FullscreenBtn.js";
-import p from "./MinimizableDialogV2.module.js";
-import { useTranslations as Z } from "./useTranslations.js";
-import { useControlledProps as ee } from "./useControlledProps.js";
-import te from "clsx";
-import { useLayoutEffect as A, useRef as u } from "react";
-import { Fragment as ie, jsx as e, jsxs as o } from "react/jsx-runtime";
-var ge = (y) => {
-  const { showCloseIcon: z = !0, showMinimizeIcon: O = !0, showExpandIcon: V = !0, enableFullscreen: q = !0, title: r, label: x, children: E, open: d, onClose: W, classNameOverrides: v = {
+import { cn as s } from "../../../../helpers/cn.js";
+import { firstTabbable as A } from "../../../../helpers/focusable.js";
+import { StyledTooltip as te } from "../../../data-display/tooltip/StyledTooltip.js";
+import { DialogBusyContext as $, useDialogBusyBoundary as ie } from "../../dialog/DialogBusyContext.js";
+import { useMobileMediaQuery as le } from "../../../../hooks/useMediaQuery.hook.js";
+import { useFocusTrap as ne } from "../../../../hooks/useFocusTrap.hook.js";
+import { CloseBtn as O } from "../components/CloseBtn.js";
+import { MinimizeBtn as V } from "../components/MinimizeBtn.js";
+import { FullScreenBtn as oe } from "../components/FullscreenBtn.js";
+import v from "./MinimizableDialogV2.module.js";
+import { useTranslations as re } from "./useTranslations.js";
+import { useControlledProps as se } from "./useControlledProps.js";
+import ce from "clsx";
+import { useId as q, useLayoutEffect as H, useRef as c } from "react";
+import { Fragment as ae, jsx as e, jsxs as n } from "react/jsx-runtime";
+var Se = (N) => {
+  const { showCloseIcon: R = !0, showMinimizeIcon: L = !0, showExpandIcon: W = !0, enableFullscreen: _ = !0, title: u, label: f, children: Q, open: o, onClose: U, classNameOverrides: h = {
     maximized: "",
     minimized: "",
     fullscreen: ""
-  }, dataTest: _, actionNode: $, locale: H = "en", busyReason: L, style: w, initialFocusRef: N } = y, s = K(), i = Z(H), m = u(null), f = u(null), R = u(null), C = u(null), S = u(!1), { minimized: t, setMinimized: F, fullScreen: l, setFullScreen: T } = ee(y), n = l && !t, { busy: h, busyReason: B, contextValue: M } = J(L ?? i.waitUntilSaved), b = () => {
-    h || (F(!1), W());
+  }, dataTest: G, actionNode: J, locale: K = "en", busyReason: X, style: C, initialFocusRef: S } = N, r = le(), i = re(K), a = c(null), p = c(null), F = c(null), T = c(null), b = c(!1), g = c(null), x = q(), I = q(), { minimized: t, setMinimized: M, fullScreen: l, setFullScreen: B } = se(N), d = l && !t, { busy: y, busyReason: E, contextValue: j } = ie(X ?? i.waitUntilSaved), z = () => {
+    y || (M(!1), U());
   };
-  A(() => {
-    m.current?.toggleAttribute("inert", t), f.current?.toggleAttribute("inert", !t);
-  }, [t]), A(() => {
-    const g = d && !S.current;
-    if (S.current = d, !g) return;
-    const a = t ? f.current : m.current, U = t ? C.current : R.current;
-    (N?.current ?? U ?? (a ? I(a) : void 0))?.focus({ preventScroll: !0 });
+  H(() => {
+    a.current?.toggleAttribute("inert", t), p.current?.toggleAttribute("inert", !t);
+  }, [t]), H(() => {
+    const w = o && !b.current, m = !o && b.current;
+    if (b.current = o, m) {
+      const P = g.current;
+      g.current = null, (!document.activeElement || document.activeElement === document.body) && P?.isConnected && P.focus({ preventScroll: !0 });
+      return;
+    }
+    if (!w) return;
+    g.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const D = t ? p.current : a.current, ee = t ? T.current : F.current;
+    (S?.current ?? ee ?? (D ? A(D) : void 0))?.focus({ preventScroll: !0 });
   }, [
-    N,
+    S,
     t,
-    d
+    o
   ]);
   const k = () => {
-    const g = t ? m : f;
-    F(!t), requestAnimationFrame(() => {
-      const a = g.current;
-      a && (a.querySelector('[data-testid="toggle-minimize-btn"]') ?? I(a))?.focus({ preventScroll: !0 });
+    const w = t ? a : p;
+    M(!t), requestAnimationFrame(() => {
+      const m = w.current;
+      m && (m.querySelector('[data-testid="toggle-minimize-btn"]') ?? A(m))?.focus({ preventScroll: !0 });
     });
   };
-  X(d && n, m, b);
-  const Q = n ? s ? {
+  ne(o && d, a, z);
+  const Y = d ? r ? {
     inset: 0,
     maxHeight: "100dvh",
     maxWidth: "100dvw",
@@ -58,115 +64,120 @@ var ge = (y) => {
     maxWidth: "min(1000px, calc(100vw - 32px))",
     height: "95dvh"
   } : void 0;
-  return d ? /* @__PURE__ */ o(ie, { children: [
+  if (!o) return null;
+  const Z = f ? `${I} ${x}` : x;
+  return /* @__PURE__ */ n(ae, { children: [
     /* @__PURE__ */ e("div", {
-      ref: f,
+      ref: p,
       style: {
         zIndex: 51,
-        ...w
+        ...C
       },
-      className: c(p["minimized-dialog"], !t && p.hidden, v.minimized),
-      children: /* @__PURE__ */ o("div", {
-        className: te("flex items-center justify-between", !t && "hidden"),
-        "data-testid": _,
+      className: s(v["minimized-dialog"], !t && v.hidden, h.minimized),
+      children: /* @__PURE__ */ n("div", {
+        className: ce("flex items-center justify-between", !t && "hidden"),
+        "data-testid": G,
         children: [/* @__PURE__ */ e("div", {
           className: "max-w-[303px] truncate pr-1 text-lg font-semibold text-delta-800",
-          children: /* @__PURE__ */ e(G, {
-            title: r,
+          children: /* @__PURE__ */ e(te, {
+            title: u,
             placement: "top",
             children: /* @__PURE__ */ e("div", {
               className: "truncate",
-              children: r
+              children: u
             })
           })
-        }), /* @__PURE__ */ o("div", {
+        }), /* @__PURE__ */ n("div", {
           className: "flex items-center gap-x-1",
-          children: [/* @__PURE__ */ e(P, {
+          children: [/* @__PURE__ */ e(V, {
             type: "expand",
-            visibility: V,
+            visibility: W,
             onClick: k,
             tooltipTitle: i.expand
-          }), /* @__PURE__ */ e(D, {
-            buttonRef: C,
-            showCloseIcon: z,
-            onClick: b,
-            disabledReason: h ? B : void 0,
+          }), /* @__PURE__ */ e(O, {
+            buttonRef: T,
+            showCloseIcon: R,
+            onClick: z,
+            disabledReason: y ? E : void 0,
             tooltipTitle: i.close
           })]
         })]
       })
     }),
-    n && /* @__PURE__ */ e("div", {
+    d && /* @__PURE__ */ e("div", {
       className: "fixed inset-0 z-[52] bg-[rgb(98,110,126)] bg-opacity-70",
       onClick: () => {
-        T(!1);
+        B(!1);
       }
     }),
-    /* @__PURE__ */ o("div", {
+    /* @__PURE__ */ n("div", {
       style: {
         zIndex: 51,
-        ...w,
-        ...Q
+        ...C,
+        ...Y
       },
-      ref: m,
-      role: n ? "dialog" : void 0,
-      "aria-modal": n ? !0 : void 0,
-      "aria-label": n && typeof r == "string" ? r : void 0,
-      className: c(p.dialog, t && p.hidden, !l && v.maximized, l && v.fullscreen, n && "fixed z-[53] duration-0"),
-      children: [/* @__PURE__ */ o("div", {
-        className: c("flex flex-col border-b-[1px] border-delta-200 px-4", s ? "py-3" : "py-4"),
-        children: [/* @__PURE__ */ o("div", {
+      ref: a,
+      role: "dialog",
+      "aria-modal": d ? !0 : void 0,
+      "aria-labelledby": Z,
+      className: s(v.dialog, t && v.hidden, !l && h.maximized, l && h.fullscreen, d && "fixed z-[53] duration-0"),
+      children: [/* @__PURE__ */ n("div", {
+        className: s("flex flex-col border-b-[1px] border-delta-200 px-4", r ? "py-3" : "py-4"),
+        children: [/* @__PURE__ */ n("div", {
           className: "flex items-center justify-between",
-          children: [x ? /* @__PURE__ */ e("div", {
+          children: [f ? /* @__PURE__ */ e("div", {
+            id: I,
             className: "text-sm text-delta-700",
-            children: x
+            children: f
           }) : /* @__PURE__ */ e("div", {
-            className: c("font-semibold text-delta-800", s ? "line-clamp-2 text-xl" : "line-clamp-1 text-2xl"),
-            children: r
-          }), /* @__PURE__ */ o("div", {
+            id: x,
+            className: s("font-semibold text-delta-800", r ? "line-clamp-2 text-xl" : "line-clamp-1 text-2xl"),
+            children: u
+          }), /* @__PURE__ */ n("div", {
             className: "flex items-center gap-x-1",
             children: [
-              /* @__PURE__ */ e(j.Provider, {
-                value: M,
-                children: $
+              /* @__PURE__ */ e($.Provider, {
+                value: j,
+                children: J
               }),
-              /* @__PURE__ */ e(P, {
-                visibility: O && !s && !l,
+              /* @__PURE__ */ e(V, {
+                visibility: L && !r && !l,
                 type: "minimize",
                 onClick: k,
                 tooltipTitle: i.minimize
               }),
-              /* @__PURE__ */ e(Y, {
-                showFullScreenIcon: q && !s,
+              /* @__PURE__ */ e(oe, {
+                showFullScreenIcon: _ && !r,
                 fullScreen: l,
                 onClick: () => {
-                  T(!l);
+                  B(!l);
                 },
                 tooltipTitle: l ? i.exitFullscreen : i.fullscreen
               }),
-              /* @__PURE__ */ e(D, {
-                buttonRef: R,
-                showCloseIcon: z,
-                onClick: b,
-                disabledReason: h ? B : void 0,
+              /* @__PURE__ */ e(O, {
+                buttonRef: F,
+                showCloseIcon: R,
+                onClick: z,
+                disabledReason: y ? E : void 0,
                 tooltipTitle: i.close
               })
             ]
           })]
-        }), x && /* @__PURE__ */ e("div", {
-          className: c("font-semibold text-delta-800", s ? "line-clamp-2 text-xl" : "line-clamp-1 text-2xl"),
-          children: r
+        }), f && /* @__PURE__ */ e("div", {
+          id: x,
+          className: s("font-semibold text-delta-800", r ? "line-clamp-2 text-xl" : "line-clamp-1 text-2xl"),
+          children: u
         })]
       }), /* @__PURE__ */ e("div", {
-        className: c(t && "hidden", "flex flex-grow flex-col overflow-y-auto overscroll-contain"),
-        children: /* @__PURE__ */ e(j.Provider, {
-          value: M,
-          children: E
+        className: s(t && "hidden", "flex flex-grow flex-col overflow-y-auto overscroll-contain"),
+        children: /* @__PURE__ */ e($.Provider, {
+          value: j,
+          children: Q
         })
       })]
     })
-  ] }) : null;
+  ] });
 };
 export {
-  ge as MinimizableDialogV2
+  Se as MinimizableDialogV2
 };

package/dist/datetime/components/date-picker/components/BaseDatePickerInput.js

@@ -1,29 +1,30 @@
-import { StyledInputField as G } from "../../../../components/inputs/input-field/StyledInputField.js";
-import { getValue as f } from "../helpers.js";
-import { DatePickerButton as J } from "./DatePickerButton.js";
-import { DATE_INPUT_FONT_FAMILY as K } from "../../../../helpers/inputMask.js";
-import { useDatePickerMask as Q } from "../hooks/useDatePickerMask.js";
-import { defaultDatePickerValidationMessages as X, useDatePickerValidation as Z } from "../hooks/useDatePickerValidation.js";
-import { useEffect as b, useState as k } from "react";
-import { jsx as m, jsxs as N } from "react/jsx-runtime";
-import { isValid as $, parse as ee } from "date-fns";
-var ce = (V) => {
-  const { onClick: F, inputClassName: w, dateFormat: r, selected: e, error: I, helperText: H, errorText: Y, onInputChange: h, hideCalendar: B, locale: o, disabledDays: l, label: E, title: v, readOnly: t, disallowPast: i, disallowFuture: s, validateOnCalendarClose: D, onValidatedOnce: g, hideDefaultHelperText: O, required: d, minDate: n, ...u } = V, { validationError: A, handleValidation: c, errHelperText: R, clearValidation: x } = Z(X), { maskRef: S } = Q(), [a, y] = k(e ? f(e, r) : ""), [C, _] = k({
+import { StyledInputField as K } from "../../../../components/inputs/input-field/StyledInputField.js";
+import { getValue as h } from "../helpers.js";
+import { DatePickerButton as Q } from "./DatePickerButton.js";
+import { getTitleLabelling as X } from "../../../helpers/getTitleLabelling.js";
+import { DATE_INPUT_FONT_FAMILY as Z } from "../../../../helpers/inputMask.js";
+import { useDatePickerMask as $ } from "../hooks/useDatePickerMask.js";
+import { defaultDatePickerValidationMessages as ee, useDatePickerValidation as te } from "../hooks/useDatePickerValidation.js";
+import { useEffect as I, useId as ae, useState as N } from "react";
+import { jsx as p, jsxs as V } from "react/jsx-runtime";
+import { isValid as re, parse as oe } from "date-fns";
+var he = (F) => {
+  const { onClick: w, inputClassName: H, dateFormat: r, selected: e, error: Y, helperText: A, errorText: B, onInputChange: v, hideCalendar: E, locale: o, disabledDays: l, label: g, title: u, inputAriaProps: O, readOnly: t, disallowPast: i, disallowFuture: s, validateOnCalendarClose: D, onValidatedOnce: x, hideDefaultHelperText: L, required: d, minDate: n, ...f } = F, { validationError: R, handleValidation: c, errHelperText: S, clearValidation: y } = te(ee), { maskRef: _ } = $(), T = ae(), [a, C] = N(e ? h(e, r) : ""), [P, j] = N({
     selected: e,
     dateFormat: r
   });
-  (e !== C.selected || r !== C.dateFormat) && (_({
+  (e !== P.selected || r !== P.dateFormat) && (j({
     selected: e,
     dateFormat: r
-  }), y(e ? f(e, r) : ""));
-  const j = o?.code?.startsWith("nb") ? "DD/MM/ÅÅÅÅ" : "DD/MM/YYYY", L = O ? void 0 : j, T = !!(A || I), q = T ? Y ?? R : H ?? L;
-  b(() => {
+  }), C(e ? h(e, r) : ""));
+  const q = o?.code?.startsWith("nb") ? "DD/MM/ÅÅÅÅ" : "DD/MM/YYYY", z = L ? void 0 : q, M = !!(R || Y), U = M ? B ?? S : A ?? z;
+  I(() => {
     if (!e) {
-      x();
+      y();
       return;
     }
     c({
-      value: f(e, r),
+      value: h(e, r),
       disabledDays: l,
       localeCode: o?.code,
       disallowPast: i,
@@ -41,13 +42,13 @@ var ce = (V) => {
     d,
     n,
     c,
-    x
+    y
   ]);
-  const z = /\d/.test(a), U = (p) => {
-    const P = p.target.value;
-    y(P.replace(/\D/g, "").length ? P : "");
+  const W = /\d/.test(a), G = (m) => {
+    const k = m.target.value;
+    C(k.replace(/\D/g, "").length ? k : "");
   };
-  b(() => {
+  I(() => {
     D && (c({
       value: a,
       disabledDays: l,
@@ -56,7 +57,7 @@ var ce = (V) => {
       disallowFuture: s,
       required: d,
       minDate: n
-    }), g?.());
+    }), x?.());
   }, [
     D,
     a,
@@ -66,10 +67,10 @@ var ce = (V) => {
     s,
     d,
     n,
-    g,
+    x,
     c
   ]);
-  const W = () => {
+  const J = () => {
     if (c({
       value: a,
       disabledDays: l,
@@ -80,61 +81,70 @@ var ce = (V) => {
       minDate: n
     })) return;
     if (!a.replace(/\D/g, "").length) {
-      h?.(void 0);
+      v?.(void 0);
       return;
     }
-    const p = ee(a, "dd/MM/yyyy", /* @__PURE__ */ new Date());
-    h?.($(p) ? p : void 0);
-  }, M = t ? 120 : 156;
-  return /* @__PURE__ */ N("div", {
+    const m = oe(a, "dd/MM/yyyy", /* @__PURE__ */ new Date());
+    v?.(re(m) ? m : void 0);
+  }, b = t ? 120 : 156;
+  return /* @__PURE__ */ V("div", {
     className: "cursor-default",
-    children: [v && /* @__PURE__ */ m("div", {
+    children: [u && /* @__PURE__ */ p("div", {
+      id: T,
       className: "pb-1 font-roboto font-semibold text-delta-800",
-      children: v
-    }), /* @__PURE__ */ N("div", {
+      children: u
+    }), /* @__PURE__ */ V("div", {
       className: "flex gap-1",
       style: { height: t ? 40 : 75 },
-      children: [/* @__PURE__ */ m("div", {
-        style: { width: M },
-        children: /* @__PURE__ */ m("div", {
+      children: [/* @__PURE__ */ p("div", {
+        style: { width: b },
+        children: /* @__PURE__ */ p("div", {
           className: "relative",
-          children: /* @__PURE__ */ m(G, {
-            ...u,
-            label: E,
+          children: /* @__PURE__ */ p(K, {
+            ...f,
+            label: g,
             readOnly: t,
-            "data-testid": u.dataTest,
+            "data-testid": f.dataTest,
             autoComplete: "off",
-            inputRef: t ? void 0 : S,
-            placeholder: !t && !z ? "  /  /    " : void 0,
+            inputRef: t ? void 0 : _,
+            placeholder: !t && !W ? "  /  /    " : void 0,
             size: "small",
             value: t ? a.replaceAll("/", ".") : a,
-            className: w,
-            style: { width: M },
-            error: T,
-            onBlur: t ? void 0 : W,
-            helperText: q,
+            className: H,
+            style: { width: b },
+            error: M,
+            onBlur: t ? void 0 : J,
+            helperText: U,
             slotProps: {
               formHelperText: { sx: {
                 marginTop: "4px",
                 marginLeft: 0,
                 marginRight: 0
               } },
-              htmlInput: { ...t ? {} : {
-                inputMode: "numeric",
-                style: { fontFamily: K }
-              } }
+              htmlInput: {
+                ...X({
+                  title: u,
+                  titleId: T,
+                  label: g,
+                  inputAriaProps: O
+                }),
+                ...t ? {} : {
+                  inputMode: "numeric",
+                  style: { fontFamily: Z }
+                }
+              }
             },
-            onChange: U
+            onChange: G
           })
         })
-      }), !B && !t && /* @__PURE__ */ m(J, {
-        onClick: F,
-        disabled: !!u.disabled,
+      }), !E && !t && /* @__PURE__ */ p(Q, {
+        onClick: w,
+        disabled: !!f.disabled,
         localeCode: o?.code
       })]
     })]
   });
 };
 export {
-  ce as BaseDatePickerInput
+  he as BaseDatePickerInput
 };

package/dist/datetime/components/date-picker/components/DatePickerInputSingle.js

@@ -1,18 +1,18 @@
-import { BaseDatePickerInput as k } from "./BaseDatePickerInput.js";
-import { jsx as v } from "react/jsx-runtime";
-var F = ({ datePickerProps: e, onClick: a }) => {
-  const { inputClassName: r, disabled: t, helperText: l, label: d, error: n, locale: i, hideCalendar: o, dateFormat: s, disabledDays: p, dataTest: u, readOnly: m, errorText: c, disallowFuture: C, disallowPast: h, required: x, minDate: D, validateOnCalendarClose: b, onValidatedOnce: I, onInputChange: T, selected: f, title: g, hideDefaultHelperText: O } = e;
-  return /* @__PURE__ */ v(k, {
+import { BaseDatePickerInput as v } from "./BaseDatePickerInput.js";
+import { jsx as w } from "react/jsx-runtime";
+var j = ({ datePickerProps: e, onClick: a }) => {
+  const { inputClassName: r, disabled: t, helperText: l, label: d, error: i, locale: n, hideCalendar: o, dateFormat: s, disabledDays: p, dataTest: u, readOnly: m, errorText: c, disallowFuture: C, disallowPast: h, required: x, minDate: D, validateOnCalendarClose: b, onValidatedOnce: I, onInputChange: P, selected: T, title: f, hideDefaultHelperText: g, inputAriaProps: O } = e;
+  return /* @__PURE__ */ w(v, {
     dataTest: u,
     inputClassName: r,
     readOnly: m,
     disabled: !!t,
     helperText: l,
     onClick: a,
-    onInputChange: (P) => T?.(P),
-    selected: f,
-    error: !!n,
-    locale: i,
+    onInputChange: (k) => P?.(k),
+    selected: T,
+    error: !!i,
+    locale: n,
     hideCalendar: o,
     dateFormat: s,
     disabledDays: p,
@@ -24,10 +24,11 @@ var F = ({ datePickerProps: e, onClick: a }) => {
     minDate: D,
     validateOnCalendarClose: b,
     onValidatedOnce: I,
-    title: g,
-    hideDefaultHelperText: O
+    title: f,
+    hideDefaultHelperText: g,
+    inputAriaProps: O
   });
 };
 export {
-  F as DatePickerInputSingle
+  j as DatePickerInputSingle
 };

package/dist/datetime/components/time-picker/TimePickerInput.js

@@ -1,74 +1,82 @@
-import { ClockOutlineIcon as I } from "../../../components/icons/clock-outline-icon/ClockOutlineIcon.js";
-import { StyledInputField as N } from "../../../components/inputs/input-field/StyledInputField.js";
-import { useInputMask as y } from "../../../helpers/inputMask.js";
-import { HelperText as P, defaultTimePickerHelperMessages as R } from "./components/HelperText.js";
-import { useEffect as v, useRef as w } from "react";
-import { jsx as o, jsxs as H } from "react/jsx-runtime";
-var O = (c) => {
-  const { placeholder: x, disabled: e, inputClassName: u, dataTest: n, width: l, error: f, helperText: h, label: g, locale: k = "en", popupState: a, handleChange: T, handleBlur: C, isValidTime: p, isValidEndTime: m, localValue: b, title: d, readOnly: t } = c, E = y({
+import { ClockOutlineIcon as P } from "../../../components/icons/clock-outline-icon/ClockOutlineIcon.js";
+import { StyledInputField as y } from "../../../components/inputs/input-field/StyledInputField.js";
+import { getTitleLabelling as R } from "../../helpers/getTitleLabelling.js";
+import { useInputMask as v } from "../../../helpers/inputMask.js";
+import { HelperText as w, defaultTimePickerHelperMessages as A } from "./components/HelperText.js";
+import { useEffect as H, useId as M, useRef as V } from "react";
+import { jsx as l, jsxs as j } from "react/jsx-runtime";
+var q = (x) => {
+  const { placeholder: f, disabled: e, inputClassName: h, dataTest: p, width: o, error: g, helperText: T, label: m, locale: k = "en", popupState: i, handleChange: C, handleBlur: I, isValidTime: d, isValidEndTime: c, localValue: b, title: a, readOnly: t, inputAriaProps: E } = x, N = v({
     mask: "xx:xx",
     maskChar: "x",
     showMask: !1
-  }), i = !p || !m || !!f, s = w(null);
-  return v(() => {
-    s.current && a.setAnchorEl(s.current);
-  }, []), /* @__PURE__ */ H("div", {
+  }), s = !d || !c || !!g, n = V(null), u = M();
+  return H(() => {
+    n.current && i.setAnchorEl(n.current);
+  }, []), /* @__PURE__ */ j("div", {
     style: { height: t ? "40px" : "75px" },
-    children: [d && /* @__PURE__ */ o("div", {
+    children: [a && /* @__PURE__ */ l("div", {
+      id: u,
       className: "pb-1 font-roboto font-semibold text-delta-800",
-      children: d
-    }), /* @__PURE__ */ o(N, {
-      inputRef: E,
+      children: a
+    }), /* @__PURE__ */ l(y, {
+      inputRef: N,
       autoComplete: "off",
       type: "text",
-      dataTest: n,
-      "data-testid": n,
-      placeholder: x,
+      dataTest: p,
+      "data-testid": p,
+      placeholder: f,
       size: "small",
-      error: i,
-      helperText: /* @__PURE__ */ o(P, {
-        isValidTime: p,
-        isValidEndTime: m,
-        error: i,
+      error: s,
+      helperText: /* @__PURE__ */ l(w, {
+        isValidTime: d,
+        isValidEndTime: c,
+        error: s,
         localization: k,
-        helperText: h,
-        messages: R
+        helperText: T,
+        messages: A
       }),
-      onChange: T,
-      onBlur: C,
+      onChange: C,
+      onBlur: I,
       slotProps: {
+        htmlInput: R({
+          title: a,
+          titleId: u,
+          label: m,
+          inputAriaProps: E
+        }),
         input: {
-          ref: s,
+          ref: n,
           onClick: (r) => {
-            !e && !t && a.open(r);
+            !e && !t && i.open(r);
           },
-          endAdornment: /* @__PURE__ */ o(I, {
+          endAdornment: /* @__PURE__ */ l(P, {
             width: 24,
             height: 24,
             className: e ? "text-delta-300" : "text-delta-700",
             onClick: (r) => {
-              r.stopPropagation(), !e && !t && a.open(r);
+              r.stopPropagation(), !e && !t && i.open(r);
             }
           })
         },
         formHelperText: {
-          className: i ? "ml-0 mr-[14px] mt-1 leading-[23.24px]" : "mx-[14px] mt-1 leading-[23.24px]",
+          className: s ? "ml-0 mr-[14px] mt-1 leading-[23.24px]" : "mx-[14px] mt-1 leading-[23.24px]",
           hideErrorIcon: !0
         }
       },
       value: b,
       sx: {
-        maxWidth: l ?? 130,
-        width: l,
-        minWidth: l
+        maxWidth: o ?? 130,
+        width: o,
+        minWidth: o
       },
       disabled: e,
       readOnly: t,
-      className: u,
-      label: g
+      className: h,
+      label: m
     })]
   });
 };
 export {
-  O as TimePickerInput
+  q as TimePickerInput
 };

package/dist/datetime/helpers/getTitleLabelling.js

@@ -0,0 +1,10 @@
+var t = ({ title: e, titleId: l, label: b, inputAriaProps: a }) => {
+  const r = !!b || !!a?.["aria-label"] || !!a?.["aria-labelledby"];
+  return {
+    ...e && !r ? { "aria-labelledby": l } : {},
+    ...a
+  };
+};
+export {
+  t as getTitleLabelling
+};

package/dist/src/datetime/components/date-picker/components/BaseDatePickerInput.d.ts

@@ -1,3 +1,4 @@
+import { AriaAttributes } from 'react';
 import { DayPickerProps as ReactDayPickerProps, Matcher } from 'react-day-picker';
 export interface IBaseDatePickerInput {
     dataTest: string;
@@ -23,5 +24,6 @@ export interface IBaseDatePickerInput {
     hideDefaultHelperText?: boolean;
     required?: boolean;
     minDate?: Date;
+    inputAriaProps?: AriaAttributes;
 }
 export declare const BaseDatePickerInput: React.FC<IBaseDatePickerInput>;

package/dist/src/datetime/components/date-picker/types.d.ts

@@ -1,3 +1,4 @@
+import { AriaAttributes } from 'react';
 import { DayPicker, Matcher } from 'react-day-picker';
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 type CommonDatePickerProps = {
@@ -25,6 +26,11 @@ export interface DatePickerSingleFieldProps {
     disallowPast?: boolean;
     disallowFuture?: boolean;
     hideDefaultHelperText?: boolean;
+    /**
+     * Extra ARIA attributes for the text input (e.g. `aria-label`, `aria-required`). Without them the
+     * input is named by `title`, which is otherwise plain text above the field.
+     */
+    inputAriaProps?: AriaAttributes;
 }
 export interface DatePickerRangeFieldProps {
     labelFrom?: string;

package/dist/src/datetime/components/time-picker/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { AriaAttributes, ReactNode } from 'react';
 /**
     * @param notBeforeTime - Start time of the range. Selected time must be after this value.
 */
@@ -24,5 +24,10 @@ export interface StyledTimePickerProps {
      * Unlike `notBeforeTime`, it never shows an error.
      */
     minTime?: Date;
+    /**
+     * Extra ARIA attributes for the text input (e.g. `aria-label`, `aria-required`) — for a visible
+     * label rendered outside the picker. Without them the input is named by `title` or `label`.
+     */
+    inputAriaProps?: AriaAttributes;
 }
 export type IPopupStateType = JSX.Element;

package/dist/src/datetime/helpers/getTitleLabelling.d.ts

@@ -0,0 +1,12 @@
+import { AriaAttributes } from 'react';
+/**
+ * ARIA naming for a datetime input that shows its `title` as plain text above the field: points the
+ * input at the title unless a floating `label` or an explicit name in `inputAriaProps` already names it
+ * (`aria-labelledby` would otherwise override that name). `inputAriaProps` are spread last.
+ */
+export declare const getTitleLabelling: ({ title, titleId, label, inputAriaProps, }: {
+    title?: string;
+    titleId: string;
+    label?: string;
+    inputAriaProps?: AriaAttributes;
+}) => AriaAttributes;

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.106.0",
+    "version": "3.107.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",