@tedi-design-system/react 18.1.0-rc.8 → 18.1.0

package/src/tedi/components/form/multi-value-field/multi-value-field.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),x=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),j=require("../../base/icon/icon.cjs.js"),w=require("../../buttons/closing-button/closing-button.cjs.js"),k=require("../../misc/separator/separator.cjs.js"),z=require("../../tags/tag/tag.cjs.js"),R=require("../form-label/form-label.cjs.js"),i=require("./multi-value-field.module.scss.cjs.js"),$=require("../../../providers/label-provider/use-labels.cjs.js"),c=_.forwardRef((h,O)=>{const{id:b,label:d,name:m,values:f,onChange:n,tagColor:q="primary",className:N,icon:t,onIconClick:v,iconButtonProps:s,isClearable:V=!0,required:p,disabled:u}=h,{getLabel:y}=$.useLabels(),[C,S]=_.useState(f??[]),a=f??C,g=l=>{S(l),n==null||n(l)},F=l=>{const r=a.filter((T,M)=>M!==l);g(r)},o=!u&&V&&a.length>0,I=()=>{g([])},L=()=>{if(!t)return null;const l=typeof t=="string"?{name:t}:t;return v?e.jsx("button",{...s,className:x.default(i.default["tedi-multi-value-field__icon-wrapper"],s==null?void 0:s.className),onClick:v,type:"button",children:e.jsx(j.Icon,{...l,size:18})}):e.jsx("div",{className:i.default["tedi-multi-value-field__icon-wrapper"],children:e.jsx(j.Icon,{...l,size:18})})};return e.jsxs("div",{className:x.default(i.default["tedi-multi-value-field"],N),children:[d&&e.jsx(R.FormLabel,{id:b,label:d,required:p}),e.jsxs("div",{className:i.default["tedi-multi-value-field__inner"],children:[a.length>0&&e.jsx("div",{className:i.default["tedi-multi-value-field__tags"],children:a.map((l,r)=>e.jsx(z.Tag,{color:q,onClose:u?void 0:()=>F(r),children:l},`${l}-${r}`))}),(o||t)&&e.jsxs("div",{className:i.default["tedi-multi-value-field__right-area"],children:[o&&e.jsx(w.ClosingButton,{onClick:I,title:y("clear"),className:i.default["tedi-multi-value-field__clear-button"],iconSize:18}),o&&t&&e.jsx(k.Separator,{color:"primary",axis:"vertical",height:1.5,spacing:.25}),t&&L()]})]}),m&&e.jsx("input",{type:"hidden",name:m,value:a.length?JSON.stringify(a):"",required:p,disabled:u})]})});c.displayName="MultiValueField";exports.MultiValueField=c;exports.default=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),v=require("../../../../../external/classnames/index.cjs.js"),i=require("react"),T=require("../../base/icon/icon.cjs.js"),Z=require("../../buttons/closing-button/closing-button.cjs.js"),ee=require("../../misc/separator/separator.cjs.js"),z=require("../../tags/tag/tag.cjs.js"),te=require("../form-label/form-label.cjs.js"),r=require("./multi-value-field.module.scss.cjs.js"),le=require("../../../providers/label-provider/use-labels.cjs.js"),j=4,ie=44,N=i.forwardRef((F,O)=>{const{id:A,label:w,name:q,values:C,onChange:_,tagColor:y="primary",tagsDirection:P="stack",className:$,icon:o,onIconClick:V,iconButtonProps:m,isClearable:G=!0,required:S,disabled:b}=F,{getLabel:M}=le.useLabels(),[X,B]=i.useState(C??[]),E=i.useRef(null),W=i.useRef(null);i.useImperativeHandle(O,()=>({input:W.current,wrapper:E.current}),[]);const a=C??X,n=P==="row",[f,D]=i.useState(null),H=i.useCallback(e=>D(e),[]),p=i.useRef(0),[d,g]=i.useState(null);i.useEffect(()=>{n&&g(null)},[a.length,n]),i.useEffect(()=>{if(!n||!f||typeof ResizeObserver>"u")return;const e=new ResizeObserver(t=>{var c;const s=((c=t[0])==null?void 0:c.contentRect.width)??0;s>0&&s!==p.current&&g(null)});return e.observe(f),()=>e.disconnect()},[n,f]),i.useLayoutEffect(()=>{if(!n||d!==null)return;const e=f;if(!e)return;const t=e.clientWidth;if(t===0)return;const s=e.querySelectorAll("[data-tedi-tag-index]");if(s.length===0)return;let c=0;for(let u=0;u<s.length;u++)c+=s[u].offsetWidth+(u>0?j:0);if(c<=t){p.current=t,g(s.length);return}let k=0,h=0;for(let u=0;u<s.length;u++){const Q=s[u].offsetWidth,Y=u<s.length-1?ie+j:0,L=k+Q+(h>0?j:0);if(L+Y<=t)k=L,h++;else break}h===0&&(h=1),p.current=t,g(h)},[n,d,a,f]);const I=e=>{B(e),_==null||_(e)},J=e=>{const t=a.filter((s,c)=>c!==e);I(t)},x=!b&&G&&a.length>0,U=()=>{I([])},R=n&&d!==null?Math.max(0,a.length-d):0,K=()=>{if(!o)return null;const e=typeof o=="string"?{name:o}:o;return V?l.jsx("button",{...m,className:v.default(r.default["tedi-multi-value-field__icon-wrapper"],m==null?void 0:m.className),onClick:V,type:"button",children:l.jsx(T.Icon,{...e,size:18})}):l.jsx("div",{className:r.default["tedi-multi-value-field__icon-wrapper"],children:l.jsx(T.Icon,{...e,size:18})})};return l.jsxs("div",{className:v.default(r.default["tedi-multi-value-field"],$),children:[w&&l.jsx(te.FormLabel,{id:A,label:w,required:S}),l.jsxs("div",{ref:E,className:v.default(r.default["tedi-multi-value-field__inner"],{[r.default["tedi-multi-value-field__inner--row"]]:n}),children:[a.length>0&&l.jsxs("div",{ref:H,className:v.default(r.default["tedi-multi-value-field__tags"],{[r.default["tedi-multi-value-field__tags--row"]]:n}),children:[a.map((e,t)=>n&&d!==null&&t>=d?null:l.jsx(z.Tag,{color:y,"data-tedi-tag-index":t,onClose:b?void 0:()=>J(t),children:e},`${e}-${t}`)),R>0&&l.jsxs(z.Tag,{color:y,className:r.default["tedi-multi-value-field__overflow-tag"],"aria-label":M("multi-value-field.hidden-count",R),children:["+",R]})]}),(x||o)&&l.jsxs("div",{className:r.default["tedi-multi-value-field__right-area"],children:[x&&l.jsx(Z.ClosingButton,{onClick:U,title:M("clear"),className:r.default["tedi-multi-value-field__clear-button"],iconSize:18}),x&&o&&l.jsx(ee.Separator,{color:"primary",axis:"vertical",height:1.5,spacing:.25}),o&&K()]})]}),q&&l.jsx("input",{ref:W,type:"hidden",name:q,value:a.length?JSON.stringify(a):"",required:S,disabled:b})]})});N.displayName="MultiValueField";exports.MultiValueField=N;exports.default=N;

package/src/tedi/components/form/multi-value-field/multi-value-field.d.ts

@@ -29,6 +29,14 @@ export interface MultiValueFieldProps {
      * @default 'primary'
      */
     tagColor?: 'primary' | 'secondary' | 'danger';
+    /**
+     * Layout for the value tags.
+     * - `'stack'` (default) — tags wrap onto multiple rows; the field grows in height.
+     * - `'row'` — tags stay on a single row; any that don't fit collapse into a
+     *   `+N` counter (the count is measured from the available width).
+     * @default stack
+     */
+    tagsDirection?: 'stack' | 'row';
     /**
      * Additional CSS class names applied to the root element.
      */

package/src/tedi/components/form/multi-value-field/multi-value-field.es.js

@@ -1,81 +1,162 @@
-import { jsxs as m, jsx as l } from "react/jsx-runtime";
-import _ from "../../../../../external/classnames/index.es.js";
-import { forwardRef as L, useState as j } from "react";
-import { Icon as g } from "../../base/icon/icon.es.js";
-import { ClosingButton as M } from "../../buttons/closing-button/closing-button.es.js";
-import { Separator as $ } from "../../misc/separator/separator.es.js";
-import { Tag as q } from "../../tags/tag/tag.es.js";
-import { FormLabel as A } from "../form-label/form-label.es.js";
-import t from "./multi-value-field.module.scss.es.js";
-import { useLabels as J } from "../../../providers/label-provider/use-labels.es.js";
-const O = L((N, R) => {
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import v from "../../../../../external/classnames/index.es.js";
+import { forwardRef as te, useState as R, useRef as C, useImperativeHandle as le, useCallback as ie, useEffect as T, useLayoutEffect as re } from "react";
+import { Icon as F } from "../../base/icon/icon.es.js";
+import { ClosingButton as ne } from "../../buttons/closing-button/closing-button.es.js";
+import { Separator as se } from "../../misc/separator/separator.es.js";
+import { Tag as P } from "../../tags/tag/tag.es.js";
+import { FormLabel as ae } from "../form-label/form-label.es.js";
+import r from "./multi-value-field.module.scss.es.js";
+import { useLabels as oe } from "../../../providers/label-provider/use-labels.es.js";
+const y = 4, ue = 44, ce = te((j, q) => {
   const {
-    id: b,
-    label: d,
-    name: u,
-    values: f,
-    onChange: o,
-    tagColor: y = "primary",
-    className: C,
-    icon: i,
-    onIconClick: p,
-    iconButtonProps: a,
-    isClearable: V = !0,
-    required: v,
-    disabled: n
-  } = N, { getLabel: w } = J(), [x, I] = j(f ?? []), r = f ?? x, h = (e) => {
-    I(e), o == null || o(e);
-  }, S = (e) => {
-    const s = r.filter((T, F) => F !== e);
-    h(s);
-  }, c = !n && V && r.length > 0, k = () => {
-    h([]);
-  }, z = () => {
-    if (!i) return null;
-    const e = typeof i == "string" ? { name: i } : i;
-    return p ? /* @__PURE__ */ l(
+    id: G,
+    label: V,
+    name: W,
+    values: E,
+    onChange: g,
+    tagColor: k = "primary",
+    tagsDirection: X = "stack",
+    className: $,
+    icon: o,
+    onIconClick: I,
+    iconButtonProps: h,
+    isClearable: D = !0,
+    required: M,
+    disabled: _
+  } = j, { getLabel: S } = oe(), [H, J] = R(E ?? []), x = C(null), z = C(null);
+  le(q, () => ({ input: z.current, wrapper: x.current }), []);
+  const n = E ?? H, i = X === "row", [d, U] = R(null), B = ie((e) => U(e), []), b = C(0), [c, p] = R(null);
+  T(() => {
+    i && p(null);
+  }, [n.length, i]), T(() => {
+    if (!i || !d || typeof ResizeObserver > "u") return;
+    const e = new ResizeObserver((t) => {
+      var u;
+      const l = ((u = t[0]) == null ? void 0 : u.contentRect.width) ?? 0;
+      l > 0 && l !== b.current && p(null);
+    });
+    return e.observe(d), () => e.disconnect();
+  }, [i, d]), re(() => {
+    if (!i || c !== null) return;
+    const e = d;
+    if (!e) return;
+    const t = e.clientWidth;
+    if (t === 0) return;
+    const l = e.querySelectorAll("[data-tedi-tag-index]");
+    if (l.length === 0) return;
+    let u = 0;
+    for (let s = 0; s < l.length; s++)
+      u += l[s].offsetWidth + (s > 0 ? y : 0);
+    if (u <= t) {
+      b.current = t, p(l.length);
+      return;
+    }
+    let L = 0, f = 0;
+    for (let s = 0; s < l.length; s++) {
+      const Z = l[s].offsetWidth, ee = s < l.length - 1 ? ue + y : 0, O = L + Z + (f > 0 ? y : 0);
+      if (O + ee <= t)
+        L = O, f++;
+      else
+        break;
+    }
+    f === 0 && (f = 1), b.current = t, p(f);
+  }, [i, c, n, d]);
+  const A = (e) => {
+    J(e), g == null || g(e);
+  }, K = (e) => {
+    const t = n.filter((l, u) => u !== e);
+    A(t);
+  }, N = !_ && D && n.length > 0, Q = () => {
+    A([]);
+  }, w = i && c !== null ? Math.max(0, n.length - c) : 0, Y = () => {
+    if (!o) return null;
+    const e = typeof o == "string" ? { name: o } : o;
+    return I ? /* @__PURE__ */ a(
       "button",
       {
-        ...a,
-        className: _(t["tedi-multi-value-field__icon-wrapper"], a == null ? void 0 : a.className),
-        onClick: p,
+        ...h,
+        className: v(r["tedi-multi-value-field__icon-wrapper"], h == null ? void 0 : h.className),
+        onClick: I,
         type: "button",
-        children: /* @__PURE__ */ l(g, { ...e, size: 18 })
+        children: /* @__PURE__ */ a(F, { ...e, size: 18 })
       }
-    ) : /* @__PURE__ */ l("div", { className: t["tedi-multi-value-field__icon-wrapper"], children: /* @__PURE__ */ l(g, { ...e, size: 18 }) });
+    ) : /* @__PURE__ */ a("div", { className: r["tedi-multi-value-field__icon-wrapper"], children: /* @__PURE__ */ a(F, { ...e, size: 18 }) });
   };
-  return /* @__PURE__ */ m("div", { className: _(t["tedi-multi-value-field"], C), children: [
-    d && /* @__PURE__ */ l(A, { id: b, label: d, required: v }),
-    /* @__PURE__ */ m("div", { className: t["tedi-multi-value-field__inner"], children: [
-      r.length > 0 && /* @__PURE__ */ l("div", { className: t["tedi-multi-value-field__tags"], children: r.map((e, s) => /* @__PURE__ */ l(q, { color: y, onClose: n ? void 0 : () => S(s), children: e }, `${e}-${s}`)) }),
-      (c || i) && /* @__PURE__ */ m("div", { className: t["tedi-multi-value-field__right-area"], children: [
-        c && /* @__PURE__ */ l(
-          M,
-          {
-            onClick: k,
-            title: w("clear"),
-            className: t["tedi-multi-value-field__clear-button"],
-            iconSize: 18
-          }
-        ),
-        c && i && /* @__PURE__ */ l($, { color: "primary", axis: "vertical", height: 1.5, spacing: 0.25 }),
-        i && z()
-      ] })
-    ] }),
-    u && /* @__PURE__ */ l(
+  return /* @__PURE__ */ m("div", { className: v(r["tedi-multi-value-field"], $), children: [
+    V && /* @__PURE__ */ a(ae, { id: G, label: V, required: M }),
+    /* @__PURE__ */ m(
+      "div",
+      {
+        ref: x,
+        className: v(r["tedi-multi-value-field__inner"], {
+          [r["tedi-multi-value-field__inner--row"]]: i
+        }),
+        children: [
+          n.length > 0 && /* @__PURE__ */ m(
+            "div",
+            {
+              ref: B,
+              className: v(r["tedi-multi-value-field__tags"], {
+                [r["tedi-multi-value-field__tags--row"]]: i
+              }),
+              children: [
+                n.map((e, t) => i && c !== null && t >= c ? null : /* @__PURE__ */ a(
+                  P,
+                  {
+                    color: k,
+                    "data-tedi-tag-index": t,
+                    onClose: _ ? void 0 : () => K(t),
+                    children: e
+                  },
+                  `${e}-${t}`
+                )),
+                w > 0 && /* @__PURE__ */ m(
+                  P,
+                  {
+                    color: k,
+                    className: r["tedi-multi-value-field__overflow-tag"],
+                    "aria-label": S("multi-value-field.hidden-count", w),
+                    children: [
+                      "+",
+                      w
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          (N || o) && /* @__PURE__ */ m("div", { className: r["tedi-multi-value-field__right-area"], children: [
+            N && /* @__PURE__ */ a(
+              ne,
+              {
+                onClick: Q,
+                title: S("clear"),
+                className: r["tedi-multi-value-field__clear-button"],
+                iconSize: 18
+              }
+            ),
+            N && o && /* @__PURE__ */ a(se, { color: "primary", axis: "vertical", height: 1.5, spacing: 0.25 }),
+            o && Y()
+          ] })
+        ]
+      }
+    ),
+    W && /* @__PURE__ */ a(
       "input",
       {
+        ref: z,
         type: "hidden",
-        name: u,
-        value: r.length ? JSON.stringify(r) : "",
-        required: v,
-        disabled: n
+        name: W,
+        value: n.length ? JSON.stringify(n) : "",
+        required: M,
+        disabled: _
       }
     )
   ] });
 });
-O.displayName = "MultiValueField";
+ce.displayName = "MultiValueField";
 export {
-  O as MultiValueField,
-  O as default
+  ce as MultiValueField,
+  ce as default
 };

package/src/tedi/components/form/multi-value-field/multi-value-field.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-multi-value-field__inner":"tedi-multi-value-field__inner-d00be7fe","tedi-multi-value-field__tags":"tedi-multi-value-field__tags-4f52450e","tedi-multi-value-field__right-area":"tedi-multi-value-field__right-area-2d533551","tedi-multi-value-field__icon-wrapper":"tedi-multi-value-field__icon-wrapper-d73d0e44"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-multi-value-field__inner":"tedi-multi-value-field__inner-d00be7fe","tedi-multi-value-field__inner--row":"tedi-multi-value-field__inner--row-50af96e5","tedi-multi-value-field__tags":"tedi-multi-value-field__tags-4f52450e","tedi-multi-value-field__tags--row":"tedi-multi-value-field__tags--row-fa16b6db","tedi-multi-value-field__overflow-tag":"tedi-multi-value-field__overflow-tag-e6aa972a","tedi-multi-value-field__right-area":"tedi-multi-value-field__right-area-2d533551","tedi-multi-value-field__icon-wrapper":"tedi-multi-value-field__icon-wrapper-d73d0e44"};exports.default=e;

package/src/tedi/components/form/multi-value-field/multi-value-field.module.scss.es.js

@@ -1,6 +1,9 @@
 const e = {
   "tedi-multi-value-field__inner": "tedi-multi-value-field__inner-d00be7fe",
+  "tedi-multi-value-field__inner--row": "tedi-multi-value-field__inner--row-50af96e5",
   "tedi-multi-value-field__tags": "tedi-multi-value-field__tags-4f52450e",
+  "tedi-multi-value-field__tags--row": "tedi-multi-value-field__tags--row-fa16b6db",
+  "tedi-multi-value-field__overflow-tag": "tedi-multi-value-field__overflow-tag-e6aa972a",
   "tedi-multi-value-field__right-area": "tedi-multi-value-field__right-area-2d533551",
   "tedi-multi-value-field__icon-wrapper": "tedi-multi-value-field__icon-wrapper-d73d0e44"
 };

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

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

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),l=require("../../../../../external/classnames/index.cjs.js"),c=require("react"),T=require("../feedback-text/feedback-text.cjs.js"),$=require("../form-label/form-label.cjs.js"),e=require("./radio.module.scss.cjs.js"),z=require("../../layout/grid/row.cjs.js"),p=require("../../layout/grid/col.cjs.js"),x=j=>{const{id:r,label:u,value:n,className:k,disabled:s,onChange:i,hideLabel:q,helper:t,checked:o,defaultChecked:C,hover:N,name:g,tooltip:f,size:h="default",invalid:R,required:y,...w}=j,[_,L]=c.useState(C||!1),b=c.useRef(null),M=c.useMemo(()=>i&&typeof o<"u"?o:_,[i,_,o]),v=d=>{typeof o>"u"&&L(d==null?void 0:d.target.checked),i==null||i(n,d==null?void 0:d.target.checked)},m=t?t.id??`${r}-helper`:void 0,I=f?`${r}-tooltip`:void 0,S=l.default(e.default["tedi-radio__label"],{[e.default["tedi-radio--disabled"]]:s});return a.jsxs("div",{className:l.default(e.default["tedi-radio"],{[e.default["tedi-radio--disabled"]]:s}),"data-name":"radio",...w,children:[a.jsxs(z.Row,{gutter:0,children:[a.jsx(p.Col,{width:"auto",children:a.jsxs("div",{className:e.default["tedi-radio__outer-indicator-wrapper"],children:[a.jsx("input",{id:r,value:n,name:g,type:"radio",disabled:s,checked:M,onChange:v,className:e.default["tedi-radio__input"],"aria-describedby":[m,I].filter(Boolean).join(" ")}),a.jsx("div",{"aria-hidden":"true",onClick:()=>{var d;return(d=b.current)==null?void 0:d.click()},className:l.default(e.default["tedi-radio__indicator"],{[e.default["tedi-radio__indicator--hover"]]:N},{[e.default[`tedi-radio__indicator--size-${h}`]]:h},{[e.default["tedi-radio__indicator--invalid"]]:R},k),"data-testid":"radio-indicator"})]})}),u&&a.jsx(p.Col,{children:a.jsx($.FormLabel,{ref:b,className:S,id:r,"data-testid":"radio-label",hideLabel:q,label:u,tooltip:f,required:y})})]}),t&&a.jsx(T.FeedbackText,{id:m,...t,className:l.default(e.default["tedi-radio__helper"],t.className)})]})};exports.Radio=x;exports.default=x;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),l=require("../../../../../external/classnames/index.cjs.js"),c=require("react"),T=require("../feedback-text/feedback-text.cjs.js"),$=require("../form-label/form-label.cjs.js"),e=require("./radio.module.scss.cjs.js"),z=require("../../layout/grid/row.cjs.js"),x=require("../../layout/grid/col.cjs.js"),j=k=>{const{id:r,label:u,value:n,className:q,disabled:s,onChange:i,hideLabel:C,helper:t,checked:o,defaultChecked:N,hover:g,name:R,tooltip:f,size:h="default",invalid:y,required:_,...w}=k,[b,L]=c.useState(N||!1),m=c.useRef(null),M=c.useMemo(()=>i&&typeof o<"u"?o:b,[i,b,o]),v=d=>{typeof o>"u"&&L(d==null?void 0:d.target.checked),i==null||i(n,d==null?void 0:d.target.checked)},p=t?t.id??`${r}-helper`:void 0,I=f?`${r}-tooltip`:void 0,S=l.default(e.default["tedi-radio__label"],{[e.default["tedi-radio--disabled"]]:s});return a.jsxs("div",{className:l.default(e.default["tedi-radio"],{[e.default["tedi-radio--disabled"]]:s}),"data-name":"radio",...w,children:[a.jsxs(z.Row,{gutter:0,children:[a.jsx(x.Col,{width:"auto",children:a.jsxs("div",{className:e.default["tedi-radio__outer-indicator-wrapper"],children:[a.jsx("input",{id:r,value:n,name:R,type:"radio",disabled:s,checked:M,onChange:v,className:e.default["tedi-radio__input"],"aria-describedby":[p,I].filter(Boolean).join(" "),required:_}),a.jsx("div",{"aria-hidden":"true",onClick:()=>{var d;return(d=m.current)==null?void 0:d.click()},className:l.default(e.default["tedi-radio__indicator"],{[e.default["tedi-radio__indicator--hover"]]:g},{[e.default[`tedi-radio__indicator--size-${h}`]]:h},{[e.default["tedi-radio__indicator--invalid"]]:y},q),"data-testid":"radio-indicator"})]})}),u&&a.jsx(x.Col,{children:a.jsx($.FormLabel,{ref:m,className:S,id:r,"data-testid":"radio-label",hideLabel:C,label:u,tooltip:f,required:_})})]}),t&&a.jsx(T.FeedbackText,{id:p,...t,className:l.default(e.default["tedi-radio__helper"],t.className)})]})};exports.Radio=j;exports.default=j;