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

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

@@ -1,32 +1,32 @@
 import { jsx as L, jsxs as Q } from "react/jsx-runtime";
 import Y from "../../../../../external/classnames/index.es.js";
-import r, { forwardRef as lt } from "react";
-import st from "../../../../../external/react-select/dist/react-select.esm.es.js";
-import rt from "../../../../../external/react-select/async/dist/react-select-async.esm.es.js";
-import { FeedbackText as at } from "../feedback-text/feedback-text.es.js";
-import { FormLabel as it } from "../form-label/form-label.es.js";
-import { useOptionalInputGroup as ct } from "../input-group/input-group.es.js";
-import ut from "../input-group/input-group.module.scss.es.js";
-import { SELECT_ALL_VALUE as M, GROUP_OPTION_PREFIX as dt, areAllSelected as Z, getEnabledOptions as ee, isGroupSentinel as te } from "./components/select-bulk-helpers.es.js";
-import { SelectClearIndicator as pt } from "./components/select-clear-indicator.es.js";
-import { SelectControl as ft } from "./components/select-control.es.js";
-import { SelectDropDownIndicator as mt } from "./components/select-dropdown-indicator.es.js";
-import { SelectGroup as gt } from "./components/select-group.es.js";
-import { SelectGroupHeading as St } from "./components/select-group-heading.es.js";
-import { SelectIndicatorsContainer as bt } from "./components/select-indicators-container.es.js";
-import { SelectInput as yt } from "./components/select-input.es.js";
-import { SelectLoadingIndicator as Mt } from "./components/select-loading-indicator.es.js";
-import { SelectMenu as vt } from "./components/select-menu.es.js";
-import { SelectMenuList as ht } from "./components/select-menu-list.es.js";
-import { SelectMenuPortal as It } from "./components/select-menu-portal.es.js";
-import { SelectMultiValue as Ot } from "./components/select-multi-value.es.js";
-import { SelectMultiValueRemove as Ct } from "./components/select-multi-value-remove.es.js";
-import { SelectOption as wt } from "./components/select-option.es.js";
-import { SelectSingleValue as Lt } from "./components/select-single-value.es.js";
-import { SelectValueContainer as Vt } from "./components/select-value-container.es.js";
+import r, { forwardRef as st } from "react";
+import rt from "../../../../../external/react-select/dist/react-select.esm.es.js";
+import at from "../../../../../external/react-select/async/dist/react-select-async.esm.es.js";
+import { FeedbackText as it } from "../feedback-text/feedback-text.es.js";
+import { FormLabel as ct } from "../form-label/form-label.es.js";
+import { useOptionalInputGroup as ut } from "../input-group/input-group.es.js";
+import dt from "../input-group/input-group.module.scss.es.js";
+import { SELECT_ALL_VALUE as M, GROUP_OPTION_PREFIX as pt, areAllSelected as Z, getEnabledOptions as ee, isGroupSentinel as te } from "./components/select-bulk-helpers.es.js";
+import { SelectClearIndicator as ft } from "./components/select-clear-indicator.es.js";
+import { SelectControl as mt } from "./components/select-control.es.js";
+import { SelectDropDownIndicator as gt } from "./components/select-dropdown-indicator.es.js";
+import { SelectGroup as St } from "./components/select-group.es.js";
+import { SelectGroupHeading as bt } from "./components/select-group-heading.es.js";
+import { SelectIndicatorsContainer as yt } from "./components/select-indicators-container.es.js";
+import { SelectInput as Mt } from "./components/select-input.es.js";
+import { SelectLoadingIndicator as vt } from "./components/select-loading-indicator.es.js";
+import { SelectMenu as ht } from "./components/select-menu.es.js";
+import { SelectMenuList as It } from "./components/select-menu-list.es.js";
+import { SelectMenuPortal as Ot } from "./components/select-menu-portal.es.js";
+import { SelectMultiValue as Ct } from "./components/select-multi-value.es.js";
+import { SelectMultiValueRemove as wt } from "./components/select-multi-value-remove.es.js";
+import { SelectOption as Lt } from "./components/select-option.es.js";
+import { SelectSingleValue as Vt } from "./components/select-single-value.es.js";
+import { SelectValueContainer as At } from "./components/select-value-container.es.js";
 import d from "./select.module.scss.es.js";
-import { useLabels as At } from "../../../providers/label-provider/use-labels.es.js";
-const _t = lt(
+import { useLabels as _t } from "../../../providers/label-provider/use-labels.es.js";
+const kt = st(
   (D, oe) => {
     var J;
     const {
@@ -86,22 +86,23 @@ const _t = lt(
       showRadioButtons: xe = !1,
       renderWithoutLabel: Ee,
       tooltip: Ge,
+      labelProps: He,
       classNames: j
-    } = D, u = (J = ct) == null ? void 0 : J(), He = r.useId(), R = u == null ? void 0 : u.hasExternalLabel, m = D.id ?? (u == null ? void 0 : u.inputId) ?? He, Ke = R ? (u == null ? void 0 : u.inputId) ?? m : `${m}-input`, je = R ? `${m}-container` : m, U = a ? (a == null ? void 0 : a.id) ?? `${m}-helper` : void 0, h = r.useRef(null), { getLabel: C } = At();
+    } = D, u = (J = ut) == null ? void 0 : J(), Ke = r.useId(), R = u == null ? void 0 : u.hasExternalLabel, m = D.id ?? (u == null ? void 0 : u.inputId) ?? Ke, je = R ? (u == null ? void 0 : u.inputId) ?? m : `${m}-input`, Ue = R ? `${m}-container` : m, U = a ? (a == null ? void 0 : a.id) ?? `${m}-helper` : void 0, h = r.useRef(null), { getLabel: C } = _t();
     r.useImperativeHandle(
       oe,
       () => h.current
     );
-    const [Ue, B] = r.useState(!1), Be = (t) => {
+    const [Be, B] = r.useState(!1), ze = (t) => {
       var e, o;
       if (K || !O || t.pointerType !== "touch" && t.pointerType !== "pen") return;
       const l = t.target;
       if (!((e = l.closest) != null && e.call(l, `.${d["tedi-select__control"]}`))) return;
       const n = (o = h.current) == null ? void 0 : o.inputRef, i = !!n && (t.target === n || n.contains(l));
       B(!i);
-    }, ze = () => {
+    }, qe = () => {
       B(!1), k == null || k();
-    }, S = !!x && v, [qe, We] = r.useState(T ?? null), z = P !== void 0, g = z ? P : qe, p = r.useMemo(() => Array.isArray(g) ? g : g ? [g] : [], [g]), w = r.useMemo(
+    }, S = !!x && v, [We, Xe] = r.useState(T ?? null), z = P !== void 0, g = z ? P : We, p = r.useMemo(() => Array.isArray(g) ? g : g ? [g] : [], [g]), w = r.useMemo(
       () => ({ value: M, label: C("select.select-all") }),
       [C]
     ), b = !!E && !!v, { groupFlattenedOptions: q, groupSentinelMap: I } = r.useMemo(() => {
@@ -112,7 +113,7 @@ const _t = lt(
       const n = [], i = /* @__PURE__ */ new Map();
       for (const e of c)
         if (e && Array.isArray(e.options)) {
-          const o = e, s = `${dt}${o.label ?? ""}`, f = o.options.filter((y) => !y.isDisabled);
+          const o = e, s = `${pt}${o.label ?? ""}`, f = o.options.filter((y) => !y.isDisabled);
           i.set(s, { enabled: f }), n.push({ value: s, label: o.label ?? "" });
           for (const y of o.options)
             n.push({
@@ -122,10 +123,10 @@ const _t = lt(
         } else
           n.push(e);
       return { groupFlattenedOptions: n, groupSentinelMap: i };
-    }, [c, b]), Xe = r.useMemo(() => {
+    }, [c, b]), Je = r.useMemo(() => {
       let t = q ?? c;
       return S && t && t.length > 0 && (t = [w, ...t]), t;
-    }, [c, q, S, w]), Je = r.useMemo(() => {
+    }, [c, q, S, w]), Qe = r.useMemo(() => {
       const t = [];
       if (b && I.size > 0)
         for (const [l, n] of I)
@@ -143,7 +144,7 @@ const _t = lt(
       I,
       S,
       w
-    ]), Qe = (t, l) => {
+    ]), Ye = (t, l) => {
       let n = t;
       const i = l.option;
       if (b && i && I.has(i.value)) {
@@ -162,22 +163,22 @@ const _t = lt(
           (s) => s.value !== M && !e.some((f) => f.value === s.value)
         ));
       }
-      Array.isArray(n) && (n = n.filter((e) => e.value !== M && !te(e))), z || We(n), A == null || A(n), !G && h.current && setTimeout(() => {
+      Array.isArray(n) && (n = n.filter((e) => e.value !== M && !te(e))), z || Xe(n), A == null || A(n), !G && h.current && setTimeout(() => {
         var e, o;
         return (o = (e = h.current) == null ? void 0 : e.inputRef) == null ? void 0 : o.focus();
       }, 0);
-    }, Ye = r.useCallback(
+    }, Ze = r.useCallback(
       (t, l) => t.data.value === M || te(t.data) || !l ? !0 : String(t.label).toLowerCase().includes(l.toLowerCase()),
       []
-    ), [W, X] = r.useState(!1), Ze = (t) => {
+    ), [W, X] = r.useState(!1), et = (t) => {
       (t.key === "ArrowUp" || t.key === "ArrowDown" || t.key === "Home" || t.key === "End" || t.key === "PageUp" || t.key === "PageDown" || t.key === "Tab") && (W || X(!0));
-    }, et = r.useCallback(() => {
+    }, tt = r.useCallback(() => {
       X((t) => t && !1);
-    }, []), tt = r.useCallback(
-      (t) => /* @__PURE__ */ L(ht, { ...t, renderMessageListFooter: $ }),
+    }, []), ot = r.useCallback(
+      (t) => /* @__PURE__ */ L(It, { ...t, renderMessageListFooter: $ }),
       [$]
-    ), ot = () => /* @__PURE__ */ L(
-      Me ? rt : st,
+    ), nt = () => /* @__PURE__ */ L(
+      Me ? at : rt,
       {
         tagsDirection: V,
         showSelectAll: x,
@@ -185,50 +186,50 @@ const _t = lt(
         dropdownType: Oe,
         renderValue: Ce,
         keyboardMode: W,
-        exitKeyboardMode: et,
-        onKeyDown: Ze,
-        id: je,
+        exitKeyboardMode: tt,
+        onKeyDown: et,
+        id: Ue,
         "aria-describedby": U,
         autoFocus: Le,
         ref: h,
         instanceId: m,
         className: "tedi-select__wrapper",
         name: le,
-        options: Xe,
+        options: Je,
         defaultOptions: ne,
-        value: Je,
+        value: Qe,
         defaultValue: T,
         cacheOptions: $e,
-        onChange: Qe,
-        filterOption: S || b ? Ye : void 0,
+        onChange: Ye,
+        filterOption: S || b ? Ze : void 0,
         onInputChange: ae,
-        onBlur: ze,
-        softKeyboardSuppressed: !K && O && Ue,
+        onBlur: qe,
+        softKeyboardSuppressed: !K && O && Be,
         inputValue: ie,
-        inputId: Ke,
+        inputId: je,
         loadOptions: ce,
         isLoading: ue,
         noOptionsMessage: he || (() => C("select.no-options")),
         loadingMessage: Ie || (() => C("select.loading")),
         classNamePrefix: "select",
         components: {
-          ClearIndicator: (e) => pt({ isClearIndicatorVisible: H, ...e }),
-          DropdownIndicator: () => mt({ iconName: se }),
+          ClearIndicator: (e) => ft({ isClearIndicatorVisible: H, ...e }),
+          DropdownIndicator: () => gt({ iconName: se }),
           IndicatorSeparator: () => null,
-          MenuPortal: It,
-          Menu: vt,
-          MenuList: tt,
-          Option: (e) => wt({ renderOption: ve, multiple: v, showRadioButtons: xe, ...e }),
-          Control: ft,
-          Input: yt,
-          MultiValue: (e) => Ot({ isTagRemovable: Ne, tagsEllipsis: Pe, ...e }),
-          MultiValueRemove: Ct,
-          SingleValue: Lt,
-          Group: gt,
-          GroupHeading: (e) => St({ optionGroupHeadingText: Fe, ...e }),
-          IndicatorsContainer: bt,
-          ValueContainer: Vt,
-          LoadingIndicator: Mt
+          MenuPortal: Ot,
+          Menu: ht,
+          MenuList: ot,
+          Option: (e) => Lt({ renderOption: ve, multiple: v, showRadioButtons: xe, ...e }),
+          Control: mt,
+          Input: Mt,
+          MultiValue: (e) => Ct({ isTagRemovable: Ne, tagsEllipsis: Pe, ...e }),
+          MultiValueRemove: wt,
+          SingleValue: Vt,
+          Group: St,
+          GroupHeading: (e) => bt({ optionGroupHeadingText: Fe, ...e }),
+          IndicatorsContainer: yt,
+          ValueContainer: At,
+          LoadingIndicator: vt
         },
         isDisabled: F,
         isSearchable: O,
@@ -258,7 +259,7 @@ const _t = lt(
               e[o] = typeof s == "string" ? () => s : s;
           if (u) {
             const o = e.control;
-            e.control = (s) => Y(o == null ? void 0 : o(s), ut["tedi-input-group__input"]);
+            e.control = (s) => Y(o == null ? void 0 : o(s), dt["tedi-input-group__input"]);
           }
           return Object.keys(e).length > 0 ? e : void 0;
         })(),
@@ -278,7 +279,7 @@ const _t = lt(
           })
         }
       }
-    ), nt = Y(
+    ), lt = Y(
       d["tedi-select"],
       me,
       { [d["tedi-select--invalid"]]: be || (a == null ? void 0 : a.type) === "error" },
@@ -289,10 +290,10 @@ const _t = lt(
       { [d["tedi-select--clear-on-interaction"]]: H && Ae },
       { [d["tedi-select--disabled"]]: F }
     );
-    return /* @__PURE__ */ Q("div", { "data-name": "select", className: nt, onPointerDownCapture: Be, children: [
+    return /* @__PURE__ */ Q("div", { "data-name": "select", className: lt, onPointerDownCapture: ze, children: [
       /* @__PURE__ */ Q("div", { className: d["tedi-select__inner"], children: [
         !R && /* @__PURE__ */ L(
-          it,
+          ct,
           {
             id: `${m}-input`,
             label: re,
@@ -300,16 +301,17 @@ const _t = lt(
             hideLabel: ge,
             size: _,
             renderWithoutLabel: Ee,
-            tooltip: Ge
+            tooltip: Ge,
+            labelProps: He
           }
         ),
-        ot()
+        nt()
       ] }),
-      a && /* @__PURE__ */ L(at, { ...a, id: U })
+      a && /* @__PURE__ */ L(it, { ...a, id: U })
     ] });
   }
 );
-_t.displayName = "Select";
+kt.displayName = "Select";
 export {
-  _t as Select
+  kt as Select
 };

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

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

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;