@tedi-design-system/react 19.1.0-rc.2 → 19.1.0-rc.20

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

@@ -1,15 +1,15 @@
-import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import _ from "../../../../../external/classnames/index.es.js";
-import { forwardRef as oe, useId as de, useState as m, useCallback as i, useRef as ce, useEffect as ue } from "react";
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import P from "../../../../../external/classnames/index.es.js";
+import { forwardRef as se, useId as de, useState as m, useCallback as i, useRef as ce, useEffect as ue } from "react";
 import { Tooltip as me } from "../../overlays/tooltip/tooltip.es.js";
 import { TooltipContent as pe } from "../../overlays/tooltip/tooltip-content.es.js";
-import { TooltipTrigger as fe } from "../../overlays/tooltip/tooltip-trigger.es.js";
-import { FeedbackText as ve } from "../feedback-text/feedback-text.es.js";
+import { TooltipTrigger as ve } from "../../overlays/tooltip/tooltip-trigger.es.js";
+import { FeedbackText as fe } from "../feedback-text/feedback-text.es.js";
 import { FormLabel as ge } from "../form-label/form-label.es.js";
 import e from "./slider.module.scss.es.js";
 import { useBreakpointProps as he } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-const be = oe((N, S) => {
-  const { getCurrentBreakpointProps: D } = he(N.defaultServerBreakpoint), {
+const be = se((_, S) => {
+  const { getCurrentBreakpointProps: D } = he(_.defaultServerBreakpoint), {
     id: R,
     name: $,
     label: w,
@@ -23,58 +23,58 @@ const be = oe((N, S) => {
     onChange: c,
     disabled: n = !1,
     invalid: O = !1,
-    minLabel: f,
+    minLabel: v,
     maxLabel: U,
-    showCurrentValue: v = !1,
-    valueFormatter: x,
+    showCurrentValue: f = !1,
+    valueFormatter: N,
     tooltip: z = !0,
-    addonRight: I,
+    addonRight: x,
     helper: a,
     className: A,
     "aria-label": G,
     "aria-labelledby": J,
     "aria-valuetext": K
-  } = D(N), Q = de(), g = R ?? `tedi-slider-${Q}`, k = a ? a.id ?? `${g}-helper` : void 0, [W, X] = m(q ?? t), u = Math.min(d, Math.max(t, p ?? W)), [Y, y] = m(!1), [Z, F] = m(!1), [l, T] = m(!1), V = !!z && !n, ee = V && (Y || Z || l), re = i(() => y(!0), []), ae = i(() => y(!1), []), ie = i(() => F(!0), []), te = i(() => F(!1), []), B = ce(null), s = i(() => {
-    B.current = null, T(!1);
+  } = D(_), Q = de(), g = R ?? `tedi-slider-${Q}`, I = a ? a.id ?? `${g}-helper` : void 0, [W, X] = m(q ?? t), u = Math.min(d, Math.max(t, p ?? W)), [Y, y] = m(!1), [Z, F] = m(!1), [l, T] = m(!1), V = !!z && !n, ee = V && (Y || Z || l), re = i(() => y(!0), []), ae = i(() => y(!1), []), ie = i(() => F(!0), []), te = i(() => F(!1), []), k = ce(null), o = i(() => {
+    k.current = null, T(!1);
   }, []);
   ue(() => {
     if (l)
-      return window.addEventListener("pointerup", s), window.addEventListener("pointercancel", s), () => {
-        window.removeEventListener("pointerup", s), window.removeEventListener("pointercancel", s);
+      return window.addEventListener("pointerup", o), window.addEventListener("pointercancel", o), () => {
+        window.removeEventListener("pointerup", o), window.removeEventListener("pointercancel", o);
       };
-  }, [l, s]);
+  }, [l, o]);
   const ne = i(
     (b) => {
-      n || (B.current = b.pointerId, T(!0));
+      n || (k.current = b.pointerId, T(!0));
     },
     [n]
   ), le = i(
     (b) => {
-      const P = Number(b.target.value);
-      p === void 0 && X(P), c == null || c(P);
+      const C = Number(b.target.value);
+      p === void 0 && X(C), c == null || c(C);
     },
     [c, p]
-  ), E = O || (a == null ? void 0 : a.type) === "error", M = d === t ? 0 : (u - t) / (d - t) * 100, C = x ? x(u) : u, h = v ? C : U, se = _(
+  ), B = O || (a == null ? void 0 : a.type) === "error", E = d === t ? 0 : (u - t) / (d - t) * 100, M = N ? N(u) : u, h = f ? M : U, oe = P(
     e["tedi-slider"],
     {
       [e["tedi-slider--disabled"]]: n,
-      [e["tedi-slider--invalid"]]: E,
+      [e["tedi-slider--invalid"]]: B,
       [e["tedi-slider--dragging"]]: l && !n
     },
     A
   );
-  return /* @__PURE__ */ o("div", { "data-name": "slider", className: se, children: [
+  return /* @__PURE__ */ s("div", { "data-name": "slider", className: oe, children: [
     w && /* @__PURE__ */ r(ge, { id: g, label: w, required: L, hideLabel: j }),
-    /* @__PURE__ */ o("div", { className: e["tedi-slider__container"], children: [
-      /* @__PURE__ */ o("div", { className: e["tedi-slider__track-row"], children: [
-        f != null && /* @__PURE__ */ r("span", { className: e["tedi-slider__range-label"], "aria-hidden": "true", children: f }),
-        /* @__PURE__ */ o(
+    /* @__PURE__ */ s("div", { className: e["tedi-slider__container"], children: [
+      /* @__PURE__ */ s("div", { className: e["tedi-slider__track-row"], children: [
+        v != null && /* @__PURE__ */ r("span", { className: e["tedi-slider__range-label"], "aria-hidden": "true", children: v }),
+        /* @__PURE__ */ s(
           "div",
           {
             className: e["tedi-slider__track"],
             style: {
-              "--tedi-slider-progress": `${M}%`,
-              "--tedi-slider-progress-ratio": `${M / 100}`
+              "--tedi-slider-progress": `${E}%`,
+              "--tedi-slider-progress-ratio": `${E / 100}`
             },
             children: [
               /* @__PURE__ */ r(
@@ -90,8 +90,8 @@ const be = oe((N, S) => {
                   value: u,
                   disabled: n,
                   required: L,
-                  "aria-invalid": E ? "true" : void 0,
-                  "aria-describedby": k,
+                  "aria-invalid": B ? "true" : void 0,
+                  "aria-describedby": I,
                   "aria-label": G,
                   "aria-labelledby": J,
                   "aria-valuetext": K,
@@ -101,12 +101,12 @@ const be = oe((N, S) => {
                   onPointerDown: ne,
                   onFocus: ie,
                   onBlur: te,
-                  className: _(e["tedi-slider__input"], {
+                  className: P(e["tedi-slider__input"], {
                     [e["tedi-slider__input--dragging"]]: l
                   })
                 }
               ),
-              V && /* @__PURE__ */ o(
+              V && /* @__PURE__ */ s(
                 me,
                 {
                   open: ee,
@@ -116,8 +116,8 @@ const be = oe((N, S) => {
                   placement: "top",
                   trackReferencePosition: !0,
                   children: [
-                    /* @__PURE__ */ r(fe, { children: /* @__PURE__ */ r("span", { className: e["tedi-slider__thumb-anchor"], "aria-hidden": "true", tabIndex: -1 }) }),
-                    /* @__PURE__ */ r(pe, { children: C })
+                    /* @__PURE__ */ r(ve, { children: /* @__PURE__ */ r("span", { className: e["tedi-slider__thumb-anchor"], "aria-hidden": "true", tabIndex: -1 }) }),
+                    /* @__PURE__ */ r(pe, { children: M })
                   ]
                 }
               )
@@ -128,15 +128,15 @@ const be = oe((N, S) => {
           "span",
           {
             className: e["tedi-slider__range-label"],
-            "aria-hidden": v ? void 0 : "true",
-            "aria-live": v ? "polite" : void 0,
+            "aria-hidden": f ? void 0 : "true",
+            "aria-live": f ? "polite" : void 0,
             children: h
           }
         )
       ] }),
-      I && /* @__PURE__ */ r("div", { className: e["tedi-slider__addon"], children: I })
+      x && /* @__PURE__ */ r("div", { className: e["tedi-slider__addon"], children: x })
     ] }),
-    a && /* @__PURE__ */ r(ve, { ...a, id: k, className: _(e["tedi-slider__feedback"], a.className) })
+    a && /* @__PURE__ */ r(fe, { ...a, id: I })
   ] });
 });
 be.displayName = "Slider";

package/src/tedi/components/form/slider/slider.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-slider":"tedi-slider-90e24e7d","tedi-slider__container":"tedi-slider__container-525c4b64","tedi-slider__track-row":"tedi-slider__track-row-95e9c2d5","tedi-slider__range-label":"tedi-slider__range-label-a2a6a43b","tedi-slider__track":"tedi-slider__track-a7afc8d6","tedi-slider__thumb-anchor":"tedi-slider__thumb-anchor-7e282370","tedi-slider__input":"tedi-slider__input-b2d1c042","tedi-slider__input--dragging":"tedi-slider__input--dragging-6a2f5f85","tedi-slider__addon":"tedi-slider__addon-6b259d81","tedi-slider__feedback":"tedi-slider__feedback-dad1545e","tedi-slider--disabled":"tedi-slider--disabled-d1da914a","tedi-slider--dragging":"tedi-slider--dragging-c82f4f25"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-slider":"tedi-slider-90e24e7d","tedi-slider__container":"tedi-slider__container-525c4b64","tedi-slider__track-row":"tedi-slider__track-row-95e9c2d5","tedi-slider__range-label":"tedi-slider__range-label-a2a6a43b","tedi-slider__track":"tedi-slider__track-a7afc8d6","tedi-slider__thumb-anchor":"tedi-slider__thumb-anchor-7e282370","tedi-slider__input":"tedi-slider__input-b2d1c042","tedi-slider__input--dragging":"tedi-slider__input--dragging-6a2f5f85","tedi-slider__addon":"tedi-slider__addon-6b259d81","tedi-slider--disabled":"tedi-slider--disabled-d1da914a","tedi-slider--dragging":"tedi-slider--dragging-c82f4f25"};exports.default=e;

package/src/tedi/components/form/slider/slider.module.scss.es.js

@@ -8,7 +8,6 @@ const d = {
   "tedi-slider__input": "tedi-slider__input-b2d1c042",
   "tedi-slider__input--dragging": "tedi-slider__input--dragging-6a2f5f85",
   "tedi-slider__addon": "tedi-slider__addon-6b259d81",
-  "tedi-slider__feedback": "tedi-slider__feedback-dad1545e",
   "tedi-slider--disabled": "tedi-slider--disabled-d1da914a",
   "tedi-slider--dragging": "tedi-slider--dragging-c82f4f25"
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),_=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),O=require("../../base/icon/icon.cjs.js"),pe=require("../../buttons/closing-button/closing-button.cjs.js"),_e=require("../../misc/separator/separator.cjs.js"),D=require("../feedback-text/feedback-text.cjs.js"),he=require("../field/field.cjs.js"),ge=require("../form-label/form-label.cjs.js"),k=require("../input-group/input-group.cjs.js"),r=require("./textfield.module.scss.cjs.js"),Ie=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),je=require("../../../providers/label-provider/use-labels.cjs.js"),Ae={large:24,default:18},q=l.forwardRef((h,U)=>{var H;const{getCurrentBreakpointProps:J}=Ie.useBreakpointProps(h.defaultServerBreakpoint),{id:Ne,label:g,className:Q,inputClassName:W,disabled:c,required:C,hideLabel:S,invalid:u,readOnly:B,icon:i,onIconClick:b,iconButtonProps:y,size:d="default",placeholder:X,isArrowsHidden:Y=!0,isClearable:F,onClear:v,onChange:o,onChangeEvent:Z,onKeyUp:G,onKeyDown:ee,onKeyPress:te,defaultValue:T,value:I,onFocus:j,onBlur:A,onClick:re,helper:e,input:s,name:ae,isTextArea:le,startSlot:ie,endSlot:se,...ne}=J(h)||{},{getLabel:w}=je.useLabels(),z=l.useRef(null),L=l.useRef(null),[de,R]=l.useState(I??T??""),M=I??de,f=!!(F&&M&&!B),x=(H=k.useOptionalInputGroup)==null?void 0:H.call(k),oe=l.useId(),ce=x==null?void 0:x.hasExternalLabel,m=h.id??(x==null?void 0:x.inputId)??oe;l.useImperativeHandle(U,()=>({get input(){return L.current},get inner(){return z.current}}));const P=l.useMemo(()=>Array.isArray(e)?u||e.some(t=>t.type==="error"):u||(e==null?void 0:e.type)==="error",[u,e]),ue=l.useMemo(()=>!e||Array.isArray(e)&&e.length===0?!1:Array.isArray(e)?!u&&e.every(t=>t.type==="valid"):!u&&e.type==="valid",[u,e]),fe=d==="large"?"default":d,p=I!==void 0,xe=l.useCallback(t=>{p||R(t),o==null||o(t)},[p,o]),$=l.useCallback(()=>{p||R(""),o==null||o(""),v==null||v()},[p,o,v]),E=l.useCallback(()=>{if(!i)return null;const N={size:d==="large"?24:d==="small"?!!b?18:16:18,className:r.default["tedi-textfield__icon"]},K=typeof i=="string"?{...N,name:i}:{...N,...i,className:_.default(N.className,i.className)};return b?a.jsx("button",{type:"button",...y,className:_.default(r.default["tedi-textfield__icon-wrapper"],y==null?void 0:y.className),onClick:c?void 0:b,disabled:c,children:a.jsx(O.Icon,{...K})}):a.jsx("div",{className:r.default["tedi-textfield__icon-wrapper"],"aria-hidden":"true",children:a.jsx(O.Icon,{...K})})},[i,d,b,y,c]),V=l.useMemo(()=>f?a.jsx(pe.ClosingButton,{iconSize:Ae[d==="large"?"large":"default"],onClick:c?void 0:$,disabled:c,title:w("clear"),className:r.default["tedi-textfield__clear-button"]}):null,[f,d,c,$,w]),me=l.useMemo(()=>!f&&!i?null:a.jsxs("div",{className:r.default["tedi-textfield__right-area"],children:[V,f&&i&&a.jsx(_e.Separator,{color:"primary",axis:"vertical",className:r.default["tedi-textfield__separator"]}),i&&E()]}),[f,i,V,E]),ye=a.jsx(he.Field,{...s,id:m,name:ae,value:M,defaultValue:T,onChange:xe,onChangeEvent:Z,disabled:c,readOnly:B,required:C,invalid:P,placeholder:X,className:_.default(r.default["tedi-textfield__input"],W,{[r.default["tedi-textfield__input--hidden-arrows"]]:Y}),onFocus:t=>{var n;(n=s==null?void 0:s.onFocus)==null||n.call(s,t),j==null||j(t)},onBlur:t=>{var n;(n=s==null?void 0:s.onBlur)==null||n.call(s,t),A==null||A(t)},isTextArea:le,"aria-describedby":!e||Array.isArray(e)&&e.length===0?void 0:Array.isArray(e)?e.map((t,n)=>`${m}-helper-${n}`).join(" "):`${m}-helper`,"aria-label":S&&typeof g=="string"?g:void 0,ref:L}),be=_.default(r.default["tedi-textfield"],{[r.default[`tedi-textfield--${d}`]]:d},{[r.default["tedi-textfield--with-icon"]]:i},{[r.default["tedi-textfield--invalid"]]:P},{[r.default["tedi-textfield--valid"]]:ue},{[r.default["tedi-textfield--clearable"]]:f},Q),ve=()=>!e||Array.isArray(e)&&e.length===0?null:a.jsx("div",{className:r.default["tedi-textfield__feedback-wrapper"],children:Array.isArray(e)?e.map((t,n)=>a.jsx(D.FeedbackText,{...t,id:`${m}-helper-${n}`},n)):a.jsx(D.FeedbackText,{...e,id:`${m}-helper`})});return a.jsxs("div",{"data-name":"textfield",...ne,className:be,children:[!ce&&a.jsx(ge.FormLabel,{id:m,label:g,required:C,hideLabel:S,size:fe}),a.jsxs("div",{className:r.default["tedi-textfield__inner"],onKeyDown:ee,onKeyUp:G,onKeyPress:te,onClick:re,ref:z,children:[ie,ye,se,(F||i)&&me]}),ve()]})});q.displayName="TextField";exports.TextField=q;exports.default=q;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),_=require("../../../../../external/classnames/index.cjs.js"),i=require("react"),K=require("../../base/icon/icon.cjs.js"),pe=require("../../buttons/closing-button/closing-button.cjs.js"),_e=require("../../misc/separator/separator.cjs.js"),D=require("../feedback-text/feedback-text.cjs.js"),he=require("../field/field.cjs.js"),ge=require("../form-label/form-label.cjs.js"),k=require("../input-group/input-group.cjs.js"),r=require("./textfield.module.scss.cjs.js"),Ie=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),je=require("../../../providers/label-provider/use-labels.cjs.js"),Ae={large:24,default:18},q=i.forwardRef((h,U)=>{var V;const{getCurrentBreakpointProps:J}=Ie.useBreakpointProps(h.defaultServerBreakpoint),{id:Ne,label:g,className:Q,inputClassName:W,disabled:c,required:C,hideLabel:S,invalid:u,readOnly:B,icon:s,onIconClick:b,iconButtonProps:y,size:d="default",placeholder:X,isArrowsHidden:Y=!0,isClearable:F,onClear:v,onChange:o,onChangeEvent:Z,onKeyUp:G,onKeyDown:ee,onKeyPress:te,defaultValue:T,value:I,onFocus:j,onBlur:A,onClick:re,helper:e,input:a,name:ae,isTextArea:le,startSlot:ie,endSlot:se,...ne}=J(h)||{},{getLabel:w}=je.useLabels(),z=i.useRef(null),L=i.useRef(null),[de,R]=i.useState(I??T??""),M=I??de,f=!!(F&&M&&!B),x=(V=k.useOptionalInputGroup)==null?void 0:V.call(k),oe=i.useId(),ce=x==null?void 0:x.hasExternalLabel,m=h.id??(x==null?void 0:x.inputId)??oe;i.useImperativeHandle(U,()=>({get input(){return L.current},get inner(){return z.current}}));const P=i.useMemo(()=>Array.isArray(e)?u||e.some(t=>t.type==="error"):u||(e==null?void 0:e.type)==="error",[u,e]),ue=i.useMemo(()=>!e||Array.isArray(e)&&e.length===0?!1:Array.isArray(e)?!u&&e.every(t=>t.type==="valid"):!u&&e.type==="valid",[u,e]),fe=d==="large"?"default":d,p=I!==void 0,xe=i.useCallback(t=>{p||R(t),o==null||o(t)},[p,o]),O=i.useCallback(()=>{p||R(""),o==null||o(""),v==null||v()},[p,o,v]),$=i.useCallback(()=>{if(!s)return null;const N={size:d==="large"?24:d==="small"?!!b?18:16:18,className:r.default["tedi-textfield__icon"]},H=typeof s=="string"?{...N,name:s}:{...N,...s,className:_.default(N.className,s.className)};return b?l.jsx("button",{type:"button",...y,className:_.default(r.default["tedi-textfield__icon-wrapper"],y==null?void 0:y.className),onClick:c?void 0:b,disabled:c,children:l.jsx(K.Icon,{...H})}):l.jsx("div",{className:r.default["tedi-textfield__icon-wrapper"],"aria-hidden":"true",children:l.jsx(K.Icon,{...H})})},[s,d,b,y,c]),E=i.useMemo(()=>f?l.jsx(pe.ClosingButton,{iconSize:Ae[d==="large"?"large":"default"],onClick:c?void 0:O,disabled:c,title:w("clear"),className:r.default["tedi-textfield__clear-button"]}):null,[f,d,c,O,w]),me=i.useMemo(()=>!f&&!s?null:l.jsxs("div",{className:r.default["tedi-textfield__right-area"],children:[E,f&&s&&l.jsx(_e.Separator,{color:"primary",axis:"vertical",className:r.default["tedi-textfield__separator"]}),s&&$()]}),[f,s,E,$]),ye=l.jsx(he.Field,{...a,id:m,name:ae,value:M,defaultValue:T,onChange:xe,onChangeEvent:Z,disabled:c,readOnly:B||(a==null?void 0:a.readOnly),required:C,invalid:P,placeholder:X,className:_.default(r.default["tedi-textfield__input"],W,{[r.default["tedi-textfield__input--hidden-arrows"]]:Y}),onFocus:t=>{var n;(n=a==null?void 0:a.onFocus)==null||n.call(a,t),j==null||j(t)},onBlur:t=>{var n;(n=a==null?void 0:a.onBlur)==null||n.call(a,t),A==null||A(t)},isTextArea:le,"aria-describedby":!e||Array.isArray(e)&&e.length===0?void 0:Array.isArray(e)?e.map((t,n)=>`${m}-helper-${n}`).join(" "):`${m}-helper`,"aria-label":S&&typeof g=="string"?g:void 0,ref:L}),be=_.default(r.default["tedi-textfield"],{[r.default[`tedi-textfield--${d}`]]:d},{[r.default["tedi-textfield--with-icon"]]:s},{[r.default["tedi-textfield--invalid"]]:P},{[r.default["tedi-textfield--valid"]]:ue},{[r.default["tedi-textfield--clearable"]]:f},Q),ve=()=>!e||Array.isArray(e)&&e.length===0?null:l.jsx("div",{className:r.default["tedi-textfield__feedback-wrapper"],children:Array.isArray(e)?e.map((t,n)=>l.jsx(D.FeedbackText,{...t,id:`${m}-helper-${n}`},n)):l.jsx(D.FeedbackText,{...e,id:`${m}-helper`})});return l.jsxs("div",{"data-name":"textfield",...ne,className:be,children:[!ce&&l.jsx(ge.FormLabel,{id:m,label:g,required:C,hideLabel:S,size:fe}),l.jsxs("div",{className:r.default["tedi-textfield__inner"],onKeyDown:ee,onKeyUp:G,onKeyPress:te,onClick:re,ref:z,children:[ie,ye,se,(F||s)&&me]}),ve()]})});q.displayName="TextField";exports.TextField=q;exports.default=q;

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

@@ -15,7 +15,7 @@ const Se = {
   large: 24,
   default: 18
 }, Be = _e((I, J) => {
-  var O;
+  var M;
   const { getCurrentBreakpointProps: Q } = ke(I.defaultServerBreakpoint), {
     id: we,
     label: g,
@@ -43,15 +43,15 @@ const Se = {
     value: N,
     onFocus: A,
     onBlur: k,
-    onClick: ie,
+    onClick: ae,
     helper: e,
     input: a,
-    name: ae,
+    name: ie,
     isTextArea: le,
     startSlot: ne,
     endSlot: se,
     ...oe
-  } = Q(I) || {}, { getLabel: L } = Ce(), T = y.useRef(null), E = y.useRef(null), [de, P] = y.useState(N ?? $ ?? ""), V = N ?? de, f = !!(R && V && !F), m = (O = Ae) == null ? void 0 : O(), ce = y.useId(), fe = m == null ? void 0 : m.hasExternalLabel, u = I.id ?? (m == null ? void 0 : m.inputId) ?? ce;
+  } = Q(I) || {}, { getLabel: L } = Ce(), T = y.useRef(null), E = y.useRef(null), [de, O] = y.useState(N ?? $ ?? ""), P = N ?? de, f = !!(R && P && !F), m = (M = Ae) == null ? void 0 : M(), ce = y.useId(), fe = m == null ? void 0 : m.hasExternalLabel, u = I.id ?? (m == null ? void 0 : m.inputId) ?? ce;
   y.useImperativeHandle(J, () => ({
     get input() {
       return E.current;
@@ -60,14 +60,14 @@ const Se = {
       return T.current;
     }
   }));
-  const j = b(() => Array.isArray(e) ? c || e.some((r) => r.type === "error") : c || (e == null ? void 0 : e.type) === "error", [c, e]), me = b(() => !e || Array.isArray(e) && e.length === 0 ? !1 : Array.isArray(e) ? !c && e.every((r) => r.type === "valid") : !c && e.type === "valid", [c, e]), ue = s === "large" ? "default" : s, h = N !== void 0, pe = B(
+  const V = b(() => Array.isArray(e) ? c || e.some((r) => r.type === "error") : c || (e == null ? void 0 : e.type) === "error", [c, e]), me = b(() => !e || Array.isArray(e) && e.length === 0 ? !1 : Array.isArray(e) ? !c && e.every((r) => r.type === "valid") : !c && e.type === "valid", [c, e]), ue = s === "large" ? "default" : s, h = N !== void 0, pe = B(
     (r) => {
-      h || P(r), o == null || o(r);
+      h || O(r), o == null || o(r);
     },
     [h, o]
-  ), H = B(() => {
-    h || P(""), o == null || o(""), x == null || x();
-  }, [h, o, x]), K = B(() => {
+  ), j = B(() => {
+    h || O(""), o == null || o(""), x == null || x();
+  }, [h, o, x]), H = B(() => {
     if (!i) return null;
     const C = {
       size: s === "large" ? 24 : s === "small" ? !!v ? 18 : 16 : 18,
@@ -84,33 +84,33 @@ const Se = {
         children: /* @__PURE__ */ n(D, { ...q })
       }
     ) : /* @__PURE__ */ n("div", { className: t["tedi-textfield__icon-wrapper"], "aria-hidden": "true", children: /* @__PURE__ */ n(D, { ...q }) });
-  }, [i, s, v, p, d]), M = b(() => f ? /* @__PURE__ */ n(
+  }, [i, s, v, p, d]), K = b(() => f ? /* @__PURE__ */ n(
     be,
     {
       iconSize: Se[s === "large" ? "large" : "default"],
-      onClick: d ? void 0 : H,
+      onClick: d ? void 0 : j,
       disabled: d,
       title: L("clear"),
       className: t["tedi-textfield__clear-button"]
     }
-  ) : null, [f, s, d, H, L]), ye = b(() => !f && !i ? null : /* @__PURE__ */ S("div", { className: t["tedi-textfield__right-area"], children: [
-    M,
+  ) : null, [f, s, d, j, L]), ye = b(() => !f && !i ? null : /* @__PURE__ */ S("div", { className: t["tedi-textfield__right-area"], children: [
+    K,
     f && i && /* @__PURE__ */ n(Ie, { color: "primary", axis: "vertical", className: t["tedi-textfield__separator"] }),
-    i && K()
-  ] }), [f, i, M, K]), ve = /* @__PURE__ */ n(
+    i && H()
+  ] }), [f, i, K, H]), ve = /* @__PURE__ */ n(
     ge,
     {
       ...a,
       id: u,
-      name: ae,
-      value: V,
+      name: ie,
+      value: P,
       defaultValue: $,
       onChange: pe,
       onChangeEvent: G,
       disabled: d,
-      readOnly: F,
+      readOnly: F || (a == null ? void 0 : a.readOnly),
       required: w,
-      invalid: j,
+      invalid: V,
       placeholder: Y,
       className: _(t["tedi-textfield__input"], X, {
         [t["tedi-textfield__input--hidden-arrows"]]: Z
@@ -132,7 +132,7 @@ const Se = {
     t["tedi-textfield"],
     { [t[`tedi-textfield--${s}`]]: s },
     { [t["tedi-textfield--with-icon"]]: i },
-    { [t["tedi-textfield--invalid"]]: j },
+    { [t["tedi-textfield--invalid"]]: V },
     { [t["tedi-textfield--valid"]]: me },
     { [t["tedi-textfield--clearable"]]: f },
     W
@@ -146,7 +146,7 @@ const Se = {
         onKeyDown: re,
         onKeyUp: ee,
         onKeyPress: te,
-        onClick: ie,
+        onClick: ae,
         ref: T,
         children: [
           ne,

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

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