@tedi-design-system/react 17.2.0-rc.1 → 18.0.0-rc.10

package/src/tedi/components/form/number-field/number-field.d.ts

@@ -36,18 +36,31 @@ export interface NumberFieldProps extends BreakpointSupport<NumberFieldBreakpoin
      */
     value?: number;
     /**
-     * Callback fired when the input value changes.
+     * Callback fired when the input value changes. Emits `undefined` when the
+     * field is cleared so consumers can distinguish *"user explicitly entered
+     * zero"* from *"field is empty"* — important for required-field validation
+     * and for fields where `0` is a meaningful selection.
      */
-    onChange?: (value: number) => void;
+    onChange?: (value: number | undefined) => void;
     /**
      * Specifies the input mode for the field (e.g., numeric or decimal).
-     * @default numeric
+     * Defaults to `'decimal'` when `decimalPlaces > 0` or `decimalSeparator === ','`,
+     * otherwise numeric.
      */
     inputMode?: 'numeric' | 'decimal';
     /**
      * Number of decimal places for rounding calculations.
      */
     decimalPlaces?: number;
+    /**
+     * Character used as the decimal separator when displaying the value.
+     * Both `.` and `,` are always accepted as input regardless of this setting.
+     *
+     * Defaults are derived from `<LabelProvider locale>`: `en` → `.`, `et` / `ru`
+     * → `,`. Pass the prop explicitly to override the locale-derived default for
+     * a single field.
+     */
+    decimalSeparator?: '.' | ',';
     /**
      * Minimum allowed value. Disables decrementing below this value and restricts manual input.
      */

package/src/tedi/components/form/number-field/number-field.es.js

@@ -1,122 +1,146 @@
-import { jsxs as N, jsx as d } from "react/jsx-runtime";
-import b from "../../../../../external/classnames/index.es.js";
-import { useRef as K, useState as O, useMemo as Q, useCallback as R } from "react";
-import { Text as X } from "../../base/typography/text/text.es.js";
-import { Button as Y } from "../../buttons/button/button.es.js";
-import { FeedbackText as Z } from "../feedback-text/feedback-text.es.js";
-import { FormLabel as ee } from "../form-label/form-label.es.js";
+import { jsxs as L, jsx as c } from "react/jsx-runtime";
+import _ from "../../../../../external/classnames/index.es.js";
+import { useCallback as D, useRef as W, useState as S, useEffect as se } from "react";
+import { Text as de } from "../../base/typography/text/text.es.js";
+import { Button as oe } from "../../buttons/button/button.es.js";
+import { FeedbackText as ue } from "../feedback-text/feedback-text.es.js";
+import { FormLabel as ce } from "../form-label/form-label.es.js";
 import n from "./number-field.module.scss.es.js";
-import { useBreakpointProps as te } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as ne } from "../../../providers/label-provider/use-labels.es.js";
-const ie = (y) => {
-  const { getCurrentBreakpointProps: P } = te(y.defaultServerBreakpoint), {
-    id: v,
-    label: $,
-    hideLabel: j,
-    required: x,
-    className: k,
-    size: _,
-    inputMode: q = "numeric",
-    decimalPlaces: F,
-    min: r,
-    max: a,
-    step: u = 1,
-    defaultValue: z,
-    value: h,
+import { useBreakpointProps as me } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as fe } from "../../../providers/label-provider/use-labels.es.js";
+const pe = (T) => {
+  const { getCurrentBreakpointProps: A } = me(T.defaultServerBreakpoint), { getLabel: w, locale: R } = fe(), G = R === "en" ? "." : ",", {
+    id: y,
+    label: H,
+    hideLabel: J,
+    required: E,
+    className: U,
+    size: B,
+    inputMode: K,
+    decimalPlaces: f,
+    decimalSeparator: I = G,
+    min: l,
+    max: s,
+    step: x = 1,
+    defaultValue: O,
+    value: o,
     onChange: i,
-    suffix: B,
-    fullWidth: S = !1,
-    disabled: o = !1,
-    invalid: M = !1,
-    helper: l,
-    input: m
-  } = P(y), { getLabel: V } = ne(), c = K(null), [w, L] = O(""), [T, C] = O(z ?? 0), s = Q(
-    () => i && typeof h < "u" ? h : T,
-    [i, h, T]
-  ), U = l ? `${v}-helper` : void 0, g = R(
+    suffix: h,
+    fullWidth: Q = !1,
+    disabled: p = !1,
+    invalid: F = !1,
+    helper: r,
+    input: b
+  } = A(T), X = K ?? (f && f > 0 || I === "," ? "decimal" : "numeric"), m = D(
+    (e) => e === void 0 ? "" : I === "," ? String(e).replace(".", ",") : String(e),
+    [I]
+  ), v = W(null), M = W(!1), [$, g] = S(""), [Y, k] = S(O), [Z, N] = S(() => m(o ?? O)), a = i && typeof o < "u" ? o : Y;
+  se(() => {
+    !M.current && typeof o < "u" && N(m(o));
+  }, [o, m]);
+  const z = r ? `${y}-helper` : void 0, P = D(
     (e) => {
-      const t = r !== void 0 && e < r, f = a !== void 0 && e > a;
-      return M || t || f || (l == null ? void 0 : l.type) === "error";
+      if (e === void 0)
+        return F || (r == null ? void 0 : r.type) === "error";
+      const t = l !== void 0 && e < l, d = s !== void 0 && e > s;
+      return F || t || d || (r == null ? void 0 : r.type) === "error";
     },
-    [M, l, a, r]
-  ), I = (e) => Math.min(a ?? 1 / 0, Math.max(r ?? -1 / 0, e)), W = (e) => {
-    const t = V("numberField.quantityUpdated", e);
-    L(t), setTimeout(() => {
-      L("");
+    [F, r, s, l]
+  ), j = (e) => Math.min(s ?? 1 / 0, Math.max(l ?? -1 / 0, e)), ee = (e) => {
+    const t = w("numberField.quantityUpdated", e);
+    g(t), setTimeout(() => {
+      g("");
     }, 5e3);
-  }, A = (e) => F !== void 0 ? parseFloat(e.toFixed(F)) : e, D = (e) => {
-    let t = s;
-    e === "increment" && (t = t + u), e === "decrement" && (t = t - u), t = I(t), t = A(t), W(t), i == null || i(t), C(t);
-  }, G = ({ currentTarget: { value: e } }) => {
-    i == null || i(I(+e)), C(I(+e));
-  }, E = (e) => {
-    const t = e === "increment" ? a !== void 0 && s >= a : r !== void 0 && s <= r, f = b(n["tedi-number-field__button"], n[`tedi-number-field__button--${e}`], {
-      [n["tedi-number-field__button--disabled"]]: t || o
-    }), p = V(`numberField.${e}`, u);
-    return /* @__PURE__ */ d(
-      Y,
+  }, q = (e) => f !== void 0 ? parseFloat(e.toFixed(f)) : e, te = (e) => {
+    let t = a ?? 0;
+    e === "increment" && (t = t + x), e === "decrement" && (t = t - x), t = j(t), t = q(t), ee(t), i == null || i(t), k(t), N(m(t));
+  }, ne = ({ currentTarget: { value: e } }) => {
+    if (N(e), e === "") {
+      a !== void 0 && (i == null || i(void 0), k(void 0));
+      return;
+    }
+    const t = e.replace(",", ".");
+    if (!/^-?(\d+(\.\d*)?|\.\d+)$/.test(t))
+      return;
+    const d = parseFloat(t);
+    if (Number.isNaN(d)) return;
+    const u = j(d), V = q(u);
+    V !== a && (i == null || i(V), k(V));
+  }, ie = () => {
+    M.current = !0;
+  }, re = () => {
+    M.current = !1, N(m(a));
+  }, C = (e) => {
+    const t = a !== void 0 && (e === "increment" ? s !== void 0 && a >= s : l !== void 0 && a <= l), d = _(n["tedi-number-field__button"], n[`tedi-number-field__button--${e}`], {
+      [n["tedi-number-field__button--disabled"]]: t || p
+    }), u = w(`numberField.${e}`, x);
+    return /* @__PURE__ */ c(
+      oe,
       {
-        "aria-label": p,
-        onClick: () => D(e),
-        disabled: t || o,
+        "aria-label": u,
+        onClick: () => te(e),
+        disabled: t || p,
         visualType: "secondary",
-        className: f,
+        className: d,
         icon: { name: e === "increment" ? "add" : "remove" },
-        size: _ === "small" ? "small" : void 0,
+        size: B === "small" ? "small" : void 0,
         children: e === "increment" ? "+" : "-"
       }
     );
-  }, H = () => {
-    const e = b(n["tedi-number-field__input-wrapper"], {
-      [n["tedi-number-field__input-wrapper--with-suffix"]]: B,
-      [n["tedi-number-field__input-wrapper--full-width"]]: S
-    }), t = b(n["tedi-number-field__input"], m == null ? void 0 : m.className);
-    return /* @__PURE__ */ N("div", { className: e, onClick: () => {
-      var p;
-      return (p = c == null ? void 0 : c.current) == null ? void 0 : p.focus();
+  }, ae = () => {
+    const e = _(n["tedi-number-field__input-wrapper"], {
+      [n["tedi-number-field__input-wrapper--with-suffix"]]: h,
+      [n["tedi-number-field__input-wrapper--full-width"]]: Q
+    }), t = _(n["tedi-number-field__input"], b == null ? void 0 : b.className);
+    return /* @__PURE__ */ L("div", { className: e, onClick: () => {
+      var u;
+      return (u = v == null ? void 0 : v.current) == null ? void 0 : u.focus();
     }, children: [
-      /* @__PURE__ */ d(
+      /* @__PURE__ */ c(
         "input",
         {
-          ref: c,
-          id: v,
-          "aria-describedby": U,
-          "aria-invalid": g(s) ? "true" : "false",
-          type: "number",
-          inputMode: q,
-          value: s,
-          min: r,
-          max: a,
-          required: x,
-          step: u,
-          disabled: o,
-          onChange: G,
+          ref: v,
+          id: y,
+          role: "spinbutton",
+          "aria-valuemin": l,
+          "aria-valuemax": s,
+          "aria-valuenow": a,
+          "aria-describedby": z,
+          "aria-invalid": P(a) ? "true" : "false",
+          type: "text",
+          inputMode: X,
+          value: Z,
+          required: E,
+          disabled: p,
+          onChange: ne,
+          onFocus: ie,
+          onBlur: re,
           className: t,
-          ...m
+          ...b
         }
       ),
-      B && /* @__PURE__ */ d(X, { element: "span", modifiers: "small", color: "tertiary", className: n["tedi-number-field__suffix"], children: B })
+      h && /* @__PURE__ */ c(de, { element: "span", modifiers: "small", color: "tertiary", className: n["tedi-number-field__suffix"], children: h })
     ] });
-  }, J = b(
+  }, le = _(
     n["tedi-number-field"],
-    { [n["tedi-number-field--invalid"]]: g(s) },
-    { [n["tedi-number-field--disabled"]]: o },
-    { [n["tedi-number-field--small"]]: _ === "small" },
-    k
+    { [n["tedi-number-field--invalid"]]: P(a) },
+    { [n["tedi-number-field--disabled"]]: p },
+    { [n["tedi-number-field--small"]]: B === "small" },
+    U
   );
-  return /* @__PURE__ */ N("div", { "data-name": "number-field", className: k, children: [
-    /* @__PURE__ */ d(ee, { id: v, label: $, required: x, hideLabel: j, size: _ }),
-    /* @__PURE__ */ N("div", { className: J, children: [
-      E("decrement"),
-      H(),
-      E("increment")
+  return /* @__PURE__ */ L("div", { "data-name": "number-field", className: U, children: [
+    /* @__PURE__ */ c(ce, { id: y, label: H, required: E, hideLabel: J, size: B }),
+    /* @__PURE__ */ L("div", { className: le, children: [
+      C("decrement"),
+      ae(),
+      C("increment")
     ] }),
-    l && /* @__PURE__ */ d(Z, { className: n["tedi-number-field__feedback"], ...l, id: U }),
-    w && /* @__PURE__ */ d("div", { "aria-live": "polite", className: "sr-only", children: w })
+    r && /* @__PURE__ */ c(ue, { className: n["tedi-number-field__feedback"], ...r, id: z }),
+    $ && /* @__PURE__ */ c("div", { "aria-live": "polite", className: "sr-only", children: $ })
   ] });
 };
-ie.displayName = "NumberField";
+pe.displayName = "NumberField";
 export {
-  ie as NumberField,
-  ie as default
+  pe as NumberField,
+  pe as default
 };

package/src/tedi/components/form/search/search.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("../../../../../external/classnames/index.cjs.js"),j=require("react"),v=require("../../buttons/button/button.cjs.js"),L=require("../textfield/textfield.cjs.js"),s=require("./search.module.scss.cjs.js"),N=require("../../../providers/label-provider/use-labels.cjs.js"),u=j.forwardRef(({placeholder:c,isClearable:d=!0,searchIcon:n="search",onSearch:a,onChange:o,button:e,ariaLabel:f,className:h,...t},_)=>{const{getLabel:l}=N.useLabels(),m=y=>{y.key==="Enter"&&(a==null||a(t.value))},x=()=>{a==null||a(t.value)},b={...t,ref:_,inputClassName:i.default(s.default["tedi-search__input"],e&&s.default["tedi-search__input--has-button"],h),placeholder:c,isClearable:d,onKeyDown:m,onChange:o,...e?{}:{icon:n}},p=c||l("search"),q=f??p;return r.jsxs("div",{className:i.default(s.default["tedi-search__wrapper"]),role:"search","aria-label":q,children:[r.jsx(L.TextField,{...b}),e&&r.jsx(v.Button,{...e,onClick:x,className:i.default(s.default["tedi-search__button"],e.className),"aria-label":e.children?void 0:l("search"),children:e.children??l("search")})]})});u.displayName="Search";exports.Search=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),i=require("../../../../../external/classnames/index.cjs.js"),v=require("react"),L=require("../../buttons/button/button.cjs.js"),N=require("../textfield/textfield.cjs.js"),s=require("./search.module.scss.cjs.js"),w=require("../../../providers/label-provider/use-labels.cjs.js"),u=v.forwardRef(({placeholder:c,isClearable:d=!0,searchIcon:n="search",onSearch:a,onChange:o,button:e,ariaLabel:f,className:h,input:x,...t},_)=>{const{getLabel:r}=w.useLabels(),b=j=>{j.key==="Enter"&&(a==null||a(t.value))},m=()=>{a==null||a(t.value)},p={...t,ref:_,inputClassName:i.default(s.default["tedi-search__input"],e&&s.default["tedi-search__input--has-button"],h),placeholder:c,isClearable:d,onKeyDown:b,onChange:o,input:{...x,role:"searchbox"},...e?{}:{icon:n}},q=c||r("search"),y=f??q;return l.jsxs("div",{className:i.default(s.default["tedi-search__wrapper"]),role:"search","aria-label":y,children:[l.jsx(N.TextField,{...p}),e&&l.jsx(L.Button,{...e,onClick:m,className:i.default(s.default["tedi-search__button"],e.className),"aria-label":e.children?void 0:r("search"),children:e.children??r("search")})]})});u.displayName="Search";exports.Search=u;

package/src/tedi/components/form/search/search.es.js

@@ -1,40 +1,42 @@
-import { jsxs as v, jsx as c } from "react/jsx-runtime";
+import { jsxs as w, jsx as c } from "react/jsx-runtime";
 import l from "../../../../../external/classnames/index.es.js";
-import { forwardRef as w } from "react";
-import { Button as L } from "../../buttons/button/button.es.js";
+import { forwardRef as L } from "react";
+import { Button as b } from "../../buttons/button/button.es.js";
 import { TextField as k } from "../textfield/textfield.es.js";
 import a from "./search.module.scss.es.js";
 import { useLabels as C } from "../../../providers/label-provider/use-labels.es.js";
-const b = w(
+const j = L(
   ({
     placeholder: t,
-    isClearable: m = !0,
-    searchIcon: o = "search",
+    isClearable: o = !0,
+    searchIcon: m = "search",
     onSearch: s,
     onChange: d,
     button: e,
     ariaLabel: p,
     className: n,
+    input: f,
     ...r
-  }, f) => {
-    const { getLabel: i } = C(), h = (y) => {
-      y.key === "Enter" && (s == null || s(r.value));
+  }, h) => {
+    const { getLabel: i } = C(), u = (v) => {
+      v.key === "Enter" && (s == null || s(r.value));
     }, _ = () => {
       s == null || s(r.value);
-    }, u = {
+    }, x = {
       ...r,
-      ref: f,
+      ref: h,
       inputClassName: l(a["tedi-search__input"], e && a["tedi-search__input--has-button"], n),
       placeholder: t,
-      isClearable: m,
-      onKeyDown: h,
+      isClearable: o,
+      onKeyDown: u,
       onChange: d,
-      ...e ? {} : { icon: o }
-    }, N = t || i("search"), x = p ?? N;
-    return /* @__PURE__ */ v("div", { className: l(a["tedi-search__wrapper"]), role: "search", "aria-label": x, children: [
-      /* @__PURE__ */ c(k, { ...u }),
+      input: { ...f, role: "searchbox" },
+      ...e ? {} : { icon: m }
+    }, N = t || i("search"), y = p ?? N;
+    return /* @__PURE__ */ w("div", { className: l(a["tedi-search__wrapper"]), role: "search", "aria-label": y, children: [
+      /* @__PURE__ */ c(k, { ...x }),
       e && /* @__PURE__ */ c(
-        L,
+        b,
         {
           ...e,
           onClick: _,
@@ -46,7 +48,7 @@ const b = w(
     ] });
   }
 );
-b.displayName = "Search";
+j.displayName = "Search";
 export {
-  b as Search
+  j as Search
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),T=require("../../../../../external/classnames/index.cjs.js"),m=require("react"),B=require("../textfield/textfield.cjs.js"),ne=require("../time-picker/time-picker.cjs.js"),s=require("./time-field.module.scss.cjs.js"),O=require("./time-field-helpers.cjs.js"),re=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),C=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),oe=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),k=require("../../overlays/dropdown/dropdown.cjs.js"),E=v=>{const{getCurrentBreakpointProps:S}=oe.useBreakpointProps(v.defaultServerBreakpoint),{id:V,label:M,value:c,defaultValue:z,onChange:F,readOnly:u=!1,required:A,placeholder:H,inputProps:i,stepMinutes:K=1,className:I,availableTimes:l}=v,{useNativePicker:G=!1,timePickerTrigger:P="button",showPicker:a=!0,availableTimesVariant:q="grid-buttons"}=S(v),y=c!==void 0,[J,N]=m.useState(c??z??""),g=y?c:J,[_,b]=m.useState(!1),w=P==="input",r=G,L=d.useFloating({open:_,onOpenChange:b,placement:w?"bottom-start":"bottom-end",middleware:[C.offset(O.TIMEPICKER_OFFSET),C.flip(),C.shift()],whileElementsMounted:re.autoUpdate}),{refs:j,context:p,x:Q,y:W,strategy:X}=L,Y=d.useClick(p),Z=d.useDismiss(p),$=d.useRole(p,{role:"listbox"}),D=a&&w&&!u&&!r,R=d.useInteractions([...D?[Y]:[],Z,$]),x=e=>{const n=e.trim();y||N(n),F==null||F(n)},ee=e=>{var h;const n=e.target.value??"";(h=i==null?void 0:i.onBlur)==null||h.call(i,e);const o=O.normalizeTime(n);o!==null&&o!==n&&x(o)};m.useEffect(()=>{c!==void 0&&N(c)},[c]);const f=m.useRef(null);m.useEffect(()=>{var e;(e=f.current)!=null&&e.inner&&j.setReference(f.current.inner)},[j]);const te=()=>{var n;const e=(n=f.current)==null?void 0:n.input;if(e){if(typeof e.showPicker=="function"){e.showPicker();return}e.focus()}},ie=()=>b(e=>!e),U={...i,id:V,label:M,value:g,placeholder:H,readOnly:u||!r&&w,icon:"schedule",isClearable:!0,required:A,onIconClick:()=>{u||!a||(r?te():P==="button"&&ie())},onChange:x,onBlur:ee,className:T.default(s.default["tedi-time-field__textfield"],{[s.default["tedi-time-field__icon--disabled"]]:!a||u},{[s.default["tedi-time-field__textfield--disabled"]]:i==null?void 0:i.disabled},{[s.default["tedi-time-field--native"]]:r}),input:{...i==null?void 0:i.input,...r&&{type:"time"}}};if(!r&&a&&!u&&q==="dropdown"&&!!(l!=null&&l.length)){const e=l.indexOf(g),n=e>=0?e:0;return t.jsxs(k.Dropdown,{width:"trigger",defaultActiveIndex:n,children:[t.jsx(k.Dropdown.Trigger,{children:t.jsx("div",{className:T.default(s.default["tedi-time-field__container"],I,{[s.default["tedi-time-field__container--native"]]:r}),children:t.jsx(B.TextField,{ref:f,...U})})}),t.jsx(k.Dropdown.Content,{children:l.map((o,h)=>t.jsx(k.Dropdown.Item,{index:h,active:o===g,onClick:()=>x(o),children:o},o))})]})}return t.jsxs(t.Fragment,{children:[t.jsx("div",{className:T.default(s.default["tedi-time-field__container"],I),...D?R.getReferenceProps():{},"aria-haspopup":a?"listbox":void 0,tabIndex:-1,children:t.jsx(B.TextField,{ref:f,"aria-expanded":a?_:void 0,...U})}),!r&&a&&t.jsx(d.FloatingPortal,{children:_&&!u&&t.jsx(d.FloatingFocusManager,{context:p,modal:!1,initialFocus:-1,children:t.jsx("div",{ref:j.setFloating,...R.getFloatingProps({style:{position:X,top:W??0,left:Q??0}}),children:t.jsx(ne.TimePicker,{value:g,stepMinutes:K,availableTimes:l,onChange:e=>{x(e),l&&b(!1)},gridVariant:q==="grid-radio"?"radio":"button",className:s.default["tedi-time-field__picker-wrapper"]})})})})]})};E.displayName="TimeField";exports.TimeField=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),c=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),T=require("../../../../../external/classnames/index.cjs.js"),m=require("react"),O=require("../textfield/textfield.cjs.js"),se=require("../time-picker/time-picker.cjs.js"),o=require("./time-field.module.scss.cjs.js"),E=require("./time-field-helpers.cjs.js"),oe=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),q=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),le=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),k=require("../../overlays/dropdown/dropdown.cjs.js"),S=b=>{const{getCurrentBreakpointProps:V}=le.useBreakpointProps(b.defaultServerBreakpoint),{id:M,label:z,value:u,defaultValue:A,onChange:v,readOnly:C=!1,disabled:l=!1,required:H,placeholder:K,inputProps:t,stepMinutes:G=1,className:I,availableTimes:d}=b,{useNativePicker:J=!1,timePickerTrigger:P="button",showPicker:a=!0,availableTimesVariant:y="grid-buttons"}=V(b),N=u!==void 0,[L,D]=m.useState(u??A??""),g=N?u:L,[F,_]=m.useState(!1),w=P==="input",r=J,Q=c.useFloating({open:F,onOpenChange:_,placement:w?"bottom-start":"bottom-end",middleware:[q.offset(E.TIMEPICKER_OFFSET),q.flip(),q.shift()],whileElementsMounted:oe.autoUpdate}),{refs:j,context:x,x:W,y:X,strategy:Y}=Q,Z=c.useClick(x),$=c.useDismiss(x),ee=c.useRole(x,{role:"listbox"}),R=a&&w&&!C&&!l&&!r,U=c.useInteractions([...R?[Z]:[],$,ee]),p=e=>{const n=e.trim();N||D(n),v==null||v(n)},te=e=>{var h;const n=e.target.value??"";(h=t==null?void 0:t.onBlur)==null||h.call(t,e);const s=E.normalizeTime(n);s!==null&&s!==n&&p(s)};m.useEffect(()=>{u!==void 0&&D(u)},[u]);const f=m.useRef(null);m.useEffect(()=>{var e;(e=f.current)!=null&&e.inner&&j.setReference(f.current.inner)},[j]);const ie=()=>{var n;const e=(n=f.current)==null?void 0:n.input;if(e){if(typeof e.showPicker=="function"){e.showPicker();return}e.focus()}},ne=()=>_(e=>!e),re=()=>{!a||l||(r?ie():P==="button"&&ne())},B={...t,id:M,label:z,value:g,placeholder:K,readOnly:C||!r&&w,disabled:l||(t==null?void 0:t.disabled),icon:"schedule",isClearable:!0,required:H,onIconClick:re,onChange:p,onBlur:te,className:T.default(o.default["tedi-time-field__textfield"],{[o.default["tedi-time-field__icon--disabled"]]:!a||l},{[o.default["tedi-time-field__textfield--disabled"]]:l||(t==null?void 0:t.disabled)},{[o.default["tedi-time-field--native"]]:r}),input:{...t==null?void 0:t.input,...r&&{type:"time"}}};if(!r&&a&&!l&&y==="dropdown"&&!!(d!=null&&d.length)){const e=d.indexOf(g),n=e>=0?e:0;return i.jsxs(k.Dropdown,{width:"trigger",defaultActiveIndex:n,children:[i.jsx(k.Dropdown.Trigger,{children:i.jsx("div",{className:T.default(o.default["tedi-time-field__container"],I,{[o.default["tedi-time-field__container--native"]]:r}),children:i.jsx(O.TextField,{ref:f,...B})})}),i.jsx(k.Dropdown.Content,{children:d.map((s,h)=>i.jsx(k.Dropdown.Item,{index:h,active:s===g,onClick:()=>p(s),children:s},s))})]})}return i.jsxs(i.Fragment,{children:[i.jsx("div",{className:T.default(o.default["tedi-time-field__container"],I),...R?U.getReferenceProps():{},"aria-haspopup":a?"listbox":void 0,tabIndex:-1,children:i.jsx(O.TextField,{ref:f,"aria-expanded":a?F:void 0,...B})}),!r&&a&&!l&&i.jsx(c.FloatingPortal,{children:F&&i.jsx(c.FloatingFocusManager,{context:x,modal:!1,initialFocus:-1,children:i.jsx("div",{ref:j.setFloating,...U.getFloatingProps({style:{position:Y,top:X??0,left:W??0}}),children:i.jsx(se.TimePicker,{value:g,stepMinutes:G,availableTimes:d,onChange:e=>{p(e),d&&_(!1)},gridVariant:y==="grid-radio"?"radio":"button",className:o.default["tedi-time-field__picker-wrapper"]})})})})]})};S.displayName="TimeField";exports.TimeField=S;

package/src/tedi/components/form/time-field/time-field.d.ts

@@ -56,6 +56,15 @@ export interface TimeFieldProps extends BreakpointSupport<TimeFieldBreakpointPro
      * @default false
      */
     readOnly?: boolean;
+    /**
+     * Disables the input and the picker. Equivalent of `<DateTimeField disabled>`
+     * — added so all three field siblings (`DateField`, `TimeField`,
+     * `DateTimeField`) share the same form-control idiom for "this field is
+     * fully unavailable". Forwards to the underlying `TextField`'s `disabled`
+     * attribute and short-circuits the picker open path.
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Marks the input as required.
      */