@tedi-design-system/react 19.2.0-rc.6 → 19.2.0-rc.8

package/src/tedi/components/form/slider/slider.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { BreakpointSupport } from '../../../helpers';
 import { FeedbackTextProps } from '../feedback-text/feedback-text';
+import { FormLabelProps } from '../form-label/form-label';
 type SliderBreakpointProps = {
     /**
      * Text/element rendered to the left of the track (e.g. the minimum value).
@@ -59,6 +60,12 @@ export interface SliderProps extends BreakpointSupport<SliderBreakpointProps> {
      * available to assistive technology, or `'keep-space'` to reserve the vertical space.
      */
     hideLabel?: boolean | 'keep-space';
+    /**
+     * Additional props forwarded to the underlying `Label` component.
+     * Use `modifiers` to control how the label text wraps or breaks
+     * (e.g. `{ modifiers: 'nowrap' }`).
+     */
+    labelProps?: FormLabelProps['labelProps'];
     /**
      * Marks the field as required.
      */

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

@@ -1,70 +1,71 @@
 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 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 C from "../../../../../external/classnames/index.es.js";
+import { forwardRef as de, useId as ce, useState as m, useCallback as i, useRef as ue, useEffect as me } from "react";
+import { Tooltip as pe } from "../../overlays/tooltip/tooltip.es.js";
+import { TooltipContent as ve } from "../../overlays/tooltip/tooltip-content.es.js";
+import { TooltipTrigger as fe } from "../../overlays/tooltip/tooltip-trigger.es.js";
+import { FeedbackText as ge } from "../feedback-text/feedback-text.es.js";
+import { FormLabel as he } 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 = se((_, S) => {
-  const { getCurrentBreakpointProps: D } = he(_.defaultServerBreakpoint), {
+import { useBreakpointProps as be } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const _e = de((_, S) => {
+  const { getCurrentBreakpointProps: D } = be(_.defaultServerBreakpoint), {
     id: R,
     name: $,
     label: w,
     hideLabel: j,
+    labelProps: H,
     required: L,
     min: t = 0,
     max: d = 100,
-    step: H = 1,
+    step: q = 1,
     value: p,
-    defaultValue: q,
+    defaultValue: O,
     onChange: c,
     disabled: n = !1,
-    invalid: O = !1,
+    invalid: U = !1,
     minLabel: v,
-    maxLabel: U,
+    maxLabel: z,
     showCurrentValue: f = !1,
     valueFormatter: N,
-    tooltip: z = !0,
+    tooltip: A = !0,
     addonRight: x,
     helper: a,
-    className: A,
-    "aria-label": G,
-    "aria-labelledby": J,
-    "aria-valuetext": K
-  } = 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(() => {
+    className: G,
+    "aria-label": J,
+    "aria-labelledby": K,
+    "aria-valuetext": Q
+  } = D(_), W = ce(), g = R ?? `tedi-slider-${W}`, I = a ? a.id ?? `${g}-helper` : void 0, [X, Y] = m(O ?? t), u = Math.min(d, Math.max(t, p ?? X)), [Z, y] = m(!1), [ee, F] = m(!1), [l, T] = m(!1), V = !!A && !n, re = V && (Z || ee || l), ae = i(() => y(!0), []), ie = i(() => y(!1), []), te = i(() => F(!0), []), ne = i(() => F(!1), []), k = ue(null), o = i(() => {
     k.current = null, T(!1);
   }, []);
-  ue(() => {
+  me(() => {
     if (l)
       return window.addEventListener("pointerup", o), window.addEventListener("pointercancel", o), () => {
         window.removeEventListener("pointerup", o), window.removeEventListener("pointercancel", o);
       };
   }, [l, o]);
-  const ne = i(
+  const le = i(
     (b) => {
       n || (k.current = b.pointerId, T(!0));
     },
     [n]
-  ), le = i(
+  ), oe = i(
     (b) => {
-      const C = Number(b.target.value);
-      p === void 0 && X(C), c == null || c(C);
+      const P = Number(b.target.value);
+      p === void 0 && Y(P), c == null || c(P);
     },
     [c, p]
-  ), 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(
+  ), B = U || (a == null ? void 0 : a.type) === "error", E = d === t ? 0 : (u - t) / (d - t) * 100, M = N ? N(u) : u, h = f ? M : z, se = C(
     e["tedi-slider"],
     {
       [e["tedi-slider--disabled"]]: n,
       [e["tedi-slider--invalid"]]: B,
       [e["tedi-slider--dragging"]]: l && !n
     },
-    A
+    G
   );
-  return /* @__PURE__ */ s("div", { "data-name": "slider", className: oe, children: [
-    w && /* @__PURE__ */ r(ge, { id: g, label: w, required: L, hideLabel: j }),
+  return /* @__PURE__ */ s("div", { "data-name": "slider", className: se, children: [
+    w && /* @__PURE__ */ r(he, { id: g, label: w, required: L, hideLabel: j, labelProps: H }),
     /* @__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 }),
@@ -86,38 +87,38 @@ const be = se((_, S) => {
                   type: "range",
                   min: t,
                   max: d,
-                  step: H,
+                  step: q,
                   value: u,
                   disabled: n,
                   required: L,
                   "aria-invalid": B ? "true" : void 0,
                   "aria-describedby": I,
-                  "aria-label": G,
-                  "aria-labelledby": J,
-                  "aria-valuetext": K,
-                  onChange: le,
-                  onMouseEnter: re,
-                  onMouseLeave: ae,
-                  onPointerDown: ne,
-                  onFocus: ie,
-                  onBlur: te,
-                  className: P(e["tedi-slider__input"], {
+                  "aria-label": J,
+                  "aria-labelledby": K,
+                  "aria-valuetext": Q,
+                  onChange: oe,
+                  onMouseEnter: ae,
+                  onMouseLeave: ie,
+                  onPointerDown: le,
+                  onFocus: te,
+                  onBlur: ne,
+                  className: C(e["tedi-slider__input"], {
                     [e["tedi-slider__input--dragging"]]: l
                   })
                 }
               ),
               V && /* @__PURE__ */ s(
-                me,
+                pe,
                 {
-                  open: ee,
+                  open: re,
                   onToggle: () => {
                   },
                   focusManager: { returnFocus: !1, initialFocus: -1 },
                   placement: "top",
                   trackReferencePosition: !0,
                   children: [
-                    /* @__PURE__ */ r(ve, { children: /* @__PURE__ */ r("span", { className: e["tedi-slider__thumb-anchor"], "aria-hidden": "true", tabIndex: -1 }) }),
-                    /* @__PURE__ */ r(pe, { children: M })
+                    /* @__PURE__ */ r(fe, { children: /* @__PURE__ */ r("span", { className: e["tedi-slider__thumb-anchor"], "aria-hidden": "true", tabIndex: -1 }) }),
+                    /* @__PURE__ */ r(ve, { children: M })
                   ]
                 }
               )
@@ -136,10 +137,10 @@ const be = se((_, S) => {
       ] }),
       x && /* @__PURE__ */ r("div", { className: e["tedi-slider__addon"], children: x })
     ] }),
-    a && /* @__PURE__ */ r(fe, { ...a, id: I })
+    a && /* @__PURE__ */ r(ge, { ...a, id: I })
   ] });
 });
-be.displayName = "Slider";
+_e.displayName = "Slider";
 export {
-  be as Slider
+  _e as Slider
 };

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

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

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

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

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

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

@@ -47,6 +47,11 @@ export interface TimeFieldProps extends BreakpointSupport<TimeFieldBreakpointPro
      * Label for the input field. Used for accessibility.
      */
     label: string;
+    /**
+     * Props forwarded to the field's label (e.g. `{ modifiers: 'nowrap' }` to control
+     * how a long label wraps). Breakpoint keys are supported for responsive wrapping.
+     */
+    labelProps?: TextFieldProps['labelProps'];
     /**
      * Current value of the time field (controlled).
      */