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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "17.2.0-rc.1",
+  "version": "18.0.0-rc.2",
   "type": "module",
   "sideEffects": false,
   "exports": {

package/src/tedi/components/buttons/collapse/collapse.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),s=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),K=require("../../../../../external/react-animate-height/dist/esm/index.cjs.js"),A=require("../../../providers/printing-provider/printing-provider.cjs.js"),F=require("../../base/icon/icon.cjs.js"),G=require("../../base/typography/text/text.cjs.js"),H=require("../../misc/print/print.cjs.js"),e=require("./collapse.module.scss.cjs.js"),J=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Q=require("../../../providers/label-provider/use-labels.cjs.js"),v=require("../../layout/grid/row.cjs.js"),o=require("../../layout/grid/col.cjs.js"),N=x=>{const{getCurrentBreakpointProps:P}=J.useBreakpointProps(x.defaultServerBreakpoint),{getLabel:h}=Q.useLabels(),{id:r,children:w,className:k,openText:j=h("open"),closeText:g=h("close"),hideCollapseText:I=!1,title:c,titleRowProps:O,defaultOpen:$,open:d,onToggle:u,arrowType:n="default",size:i="default",underline:S=!0,toggleLabel:y,iconOnly:B=!1,...M}=P(x),p=`${r}__trigger`,f=`${r}__content`,R=`${r}__animate`,[b,T]=_.useState(()=>$),m=A.usePrint(),a=_.useMemo(()=>m||(d!==void 0?d:b),[m,d,b]),L=B===!0&&!c,D=s.default(e.default["tedi-collapse"],i==="small"&&e.default["tedi-collapse--small"],a&&e.default["tedi-collapse--is-open"],L&&e.default["tedi-collapse--icon-only"],e.default[`tedi-collapse--arrow-${n}`],k),q=()=>{const l=!a;T(l),u==null||u(l)},z=l=>{(l.key==="Enter"||l.key===" ")&&!l.repeat&&(l.preventDefault(),q())},E=y||(a?g:j),C=_.useMemo(()=>t.jsx("div",{id:f,role:"region","aria-labelledby":p,className:e.default["tedi-collapse__content"],children:w}),[w,f,p]);return t.jsxs("div",{"data-name":"collapse",...M,className:D,children:[t.jsx("button",{id:p,type:"button","data-name":"collapse-trigger",className:e.default["tedi-collapse__title"],"aria-label":E,"aria-expanded":a,"aria-controls":f,onKeyDown:z,onClick:q,children:t.jsxs(v.Row,{justifyContent:"between",alignItems:"center",wrap:"nowrap",...O,element:"span",children:[c&&t.jsx(o.Col,{"aria-hidden":"true",children:c}),t.jsx(o.Col,{width:"auto",children:t.jsxs(v.Row,{element:"span",alignItems:"center",gutter:0,wrap:"nowrap",children:[t.jsx(H.Print,{visibility:"hide",children:t.jsx(o.Col,{width:"auto",className:s.default({"visually-hidden":I}),children:t.jsx(G.Text,{element:"span",className:s.default(e.default["tedi-collapse__text"],{[e.default["tedi-collapse__text--underline"]]:S}),children:a?g:j})})}),t.jsx(o.Col,{width:"auto",children:t.jsx("div",{className:s.default(e.default["tedi-collapse__icon-wrapper"],e.default[`tedi-collapse__icon-wrapper--${n}`],i==="small"&&e.default["tedi-collapse__icon-wrapper--small"]),children:t.jsx(F.Icon,{className:s.default(e.default["tedi-collapse__icon"],e.default[`tedi-collapse__icon--${n}`],i==="small"&&e.default["tedi-collapse__icon--small"]),name:"expand_more",size:i==="small"||n==="secondary"?18:24})})})]})})]})}),m?C:t.jsx(K.default,{id:R,duration:300,height:a?"auto":0,"data-testid":"collapse-inner",children:C})]})};exports.Collapse=N;exports.default=N;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),n=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),F=require("../../../../../external/react-animate-height/dist/esm/index.cjs.js"),G=require("../../../providers/printing-provider/printing-provider.cjs.js"),H=require("../../base/icon/icon.cjs.js"),J=require("../../base/typography/text/text.cjs.js"),Q=require("../../misc/print/print.cjs.js"),e=require("./collapse.module.scss.cjs.js"),U=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),V=require("../../../providers/label-provider/use-labels.cjs.js"),C=require("../../layout/grid/row.cjs.js"),o=require("../../layout/grid/col.cjs.js"),I=x=>{const{getCurrentBreakpointProps:N}=U.useBreakpointProps(x.defaultServerBreakpoint),{getLabel:h}=V.useLabels(),{id:r,children:w,className:P,openText:j=h("open"),closeText:g=h("close"),hideCollapseText:k=!1,title:d,titleRowProps:O,defaultOpen:$,open:c,onToggle:u,arrowType:s="default",size:i="default",underline:S=!0,toggleLabel:y,iconOnly:B=!1,inverted:M=!1,...R}=N(x),p=`${r}__trigger`,f=`${r}__content`,T=`${r}__animate`,[b,L]=_.useState(()=>$),m=G.usePrint(),a=_.useMemo(()=>m||(c!==void 0?c:b),[m,c,b]),D=B===!0&&!d,z=M&&s!=="secondary",E=n.default(e.default["tedi-collapse"],i==="small"&&e.default["tedi-collapse--small"],a&&e.default["tedi-collapse--is-open"],D&&e.default["tedi-collapse--icon-only"],z&&e.default["tedi-collapse--inverted"],e.default[`tedi-collapse--arrow-${s}`],P),v=()=>{const l=!a;L(l),u==null||u(l)},K=l=>{(l.key==="Enter"||l.key===" ")&&!l.repeat&&(l.preventDefault(),v())},A=y||(a?g:j),q=_.useMemo(()=>t.jsx("div",{id:f,role:"region","aria-labelledby":p,className:e.default["tedi-collapse__content"],children:w}),[w,f,p]);return t.jsxs("div",{"data-name":"collapse",...R,className:E,children:[t.jsx("button",{id:p,type:"button","data-name":"collapse-trigger",className:e.default["tedi-collapse__title"],"aria-label":A,"aria-expanded":a,"aria-controls":f,onKeyDown:K,onClick:v,children:t.jsxs(C.Row,{justifyContent:"between",alignItems:"center",wrap:"nowrap",...O,element:"span",children:[d&&t.jsx(o.Col,{"aria-hidden":"true",children:d}),t.jsx(o.Col,{width:"auto",children:t.jsxs(C.Row,{element:"span",alignItems:"center",gutter:0,wrap:"nowrap",children:[t.jsx(Q.Print,{visibility:"hide",children:t.jsx(o.Col,{width:"auto",className:n.default({"visually-hidden":k}),children:t.jsx(J.Text,{element:"span",className:n.default(e.default["tedi-collapse__text"],{[e.default["tedi-collapse__text--underline"]]:S}),children:a?g:j})})}),t.jsx(o.Col,{width:"auto",children:t.jsx("div",{className:n.default(e.default["tedi-collapse__icon-wrapper"],e.default[`tedi-collapse__icon-wrapper--${s}`],i==="small"&&e.default["tedi-collapse__icon-wrapper--small"]),children:t.jsx(H.Icon,{className:n.default(e.default["tedi-collapse__icon"],e.default[`tedi-collapse__icon--${s}`],i==="small"&&e.default["tedi-collapse__icon--small"]),name:"expand_more",size:i==="small"||s==="secondary"?18:24})})})]})})]})}),m?q:t.jsx(F.default,{id:T,duration:300,height:a?"auto":0,"data-testid":"collapse-inner",children:q})]})};exports.Collapse=I;exports.default=I;

package/src/tedi/components/buttons/collapse/collapse.d.ts

@@ -40,6 +40,14 @@ type CollapseBreakpointProps = {
      * @default false
      */
     iconOnly?: boolean;
+    /**
+     * Inverted color palette — flips the link / icon colors to their
+     * inverted-surface equivalents (white text + icon), for use on top of dark
+     * backgrounds. Pairs with both the with-text and icon-only variants; the
+     * secondary-arrow style has no inverted form in the design.
+     * @default false
+     */
+    inverted?: boolean;
 };
 export interface CollapseProps extends BreakpointSupport<CollapseBreakpointProps> {
     /**

package/src/tedi/components/buttons/collapse/collapse.es.js

@@ -1,55 +1,57 @@
-import { jsx as t, jsxs as h } from "react/jsx-runtime";
-import o from "../../../../../external/classnames/index.es.js";
-import f from "react";
-import A from "../../../../../external/react-animate-height/dist/esm/index.es.js";
-import { usePrint as H } from "../../../providers/printing-provider/printing-provider.es.js";
-import { Icon as q } from "../../base/icon/icon.es.js";
-import { Text as F } from "../../base/typography/text/text.es.js";
-import { Print as G } from "../../misc/print/print.es.js";
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import n from "../../../../../external/classnames/index.es.js";
+import h from "react";
+import q from "../../../../../external/react-animate-height/dist/esm/index.es.js";
+import { usePrint as F } from "../../../providers/printing-provider/printing-provider.es.js";
+import { Icon as G } from "../../base/icon/icon.es.js";
+import { Text as J } from "../../base/typography/text/text.es.js";
+import { Print as Q } from "../../misc/print/print.es.js";
 import e from "./collapse.module.scss.es.js";
-import { useBreakpointProps as J } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as Q } from "../../../providers/label-provider/use-labels.es.js";
+import { useBreakpointProps as U } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as V } from "../../../providers/label-provider/use-labels.es.js";
 import { Row as k } from "../../layout/grid/row.es.js";
 import { Col as s } from "../../layout/grid/col.es.js";
-const se = (w) => {
-  const { getCurrentBreakpointProps: O } = J(w.defaultServerBreakpoint), { getLabel: y } = Q(), {
+const ce = (w) => {
+  const { getCurrentBreakpointProps: O } = U(w.defaultServerBreakpoint), { getLabel: y } = V(), {
     id: r,
     children: g,
     className: P,
     openText: b = y("open"),
-    closeText: x = y("close"),
+    closeText: v = y("close"),
     hideCollapseText: $ = !1,
     title: c,
     titleRowProps: B,
     defaultOpen: S,
     open: d,
     onToggle: p,
-    arrowType: n = "default",
+    arrowType: o = "default",
     size: i = "default",
     underline: T = !0,
-    toggleLabel: N,
+    toggleLabel: x,
     iconOnly: j = !1,
-    ...D
-  } = O(w), m = `${r}__trigger`, u = `${r}__content`, L = `${r}__animate`, [C, M] = f.useState(() => S), _ = H(), a = f.useMemo(
-    () => _ || (d !== void 0 ? d : C),
-    [_, d, C]
-  ), R = j === !0 && !c, z = o(
+    inverted: D = !1,
+    ...L
+  } = O(w), m = `${r}__trigger`, u = `${r}__content`, M = `${r}__animate`, [N, R] = h.useState(() => S), _ = F(), a = h.useMemo(
+    () => _ || (d !== void 0 ? d : N),
+    [_, d, N]
+  ), z = j === !0 && !c, E = D && o !== "secondary", K = n(
     e["tedi-collapse"],
     i === "small" && e["tedi-collapse--small"],
     a && e["tedi-collapse--is-open"],
-    R && e["tedi-collapse--icon-only"],
-    e[`tedi-collapse--arrow-${n}`],
+    z && e["tedi-collapse--icon-only"],
+    E && e["tedi-collapse--inverted"],
+    e[`tedi-collapse--arrow-${o}`],
     P
-  ), v = () => {
+  ), C = () => {
     const l = !a;
-    M(l), p == null || p(l);
-  }, E = (l) => {
-    (l.key === "Enter" || l.key === " ") && !l.repeat && (l.preventDefault(), v());
-  }, K = N || (a ? x : b), I = f.useMemo(
+    R(l), p == null || p(l);
+  }, A = (l) => {
+    (l.key === "Enter" || l.key === " ") && !l.repeat && (l.preventDefault(), C());
+  }, H = x || (a ? v : b), I = h.useMemo(
     () => /* @__PURE__ */ t("div", { id: u, role: "region", "aria-labelledby": m, className: e["tedi-collapse__content"], children: g }),
     [g, u, m]
   );
-  return /* @__PURE__ */ h("div", { "data-name": "collapse", ...D, className: z, children: [
+  return /* @__PURE__ */ f("div", { "data-name": "collapse", ...L, className: K, children: [
     /* @__PURE__ */ t(
       "button",
       {
@@ -57,42 +59,42 @@ const se = (w) => {
         type: "button",
         "data-name": "collapse-trigger",
         className: e["tedi-collapse__title"],
-        "aria-label": K,
+        "aria-label": H,
         "aria-expanded": a,
         "aria-controls": u,
-        onKeyDown: E,
-        onClick: v,
-        children: /* @__PURE__ */ h(k, { justifyContent: "between", alignItems: "center", wrap: "nowrap", ...B, element: "span", children: [
+        onKeyDown: A,
+        onClick: C,
+        children: /* @__PURE__ */ f(k, { justifyContent: "between", alignItems: "center", wrap: "nowrap", ...B, element: "span", children: [
           c && /* @__PURE__ */ t(s, { "aria-hidden": "true", children: c }),
-          /* @__PURE__ */ t(s, { width: "auto", children: /* @__PURE__ */ h(k, { element: "span", alignItems: "center", gutter: 0, wrap: "nowrap", children: [
-            /* @__PURE__ */ t(G, { visibility: "hide", children: /* @__PURE__ */ t(s, { width: "auto", className: o({ "visually-hidden": $ }), children: /* @__PURE__ */ t(
-              F,
+          /* @__PURE__ */ t(s, { width: "auto", children: /* @__PURE__ */ f(k, { element: "span", alignItems: "center", gutter: 0, wrap: "nowrap", children: [
+            /* @__PURE__ */ t(Q, { visibility: "hide", children: /* @__PURE__ */ t(s, { width: "auto", className: n({ "visually-hidden": $ }), children: /* @__PURE__ */ t(
+              J,
               {
                 element: "span",
-                className: o(e["tedi-collapse__text"], {
+                className: n(e["tedi-collapse__text"], {
                   [e["tedi-collapse__text--underline"]]: T
                 }),
-                children: a ? x : b
+                children: a ? v : b
               }
             ) }) }),
             /* @__PURE__ */ t(s, { width: "auto", children: /* @__PURE__ */ t(
               "div",
               {
-                className: o(
+                className: n(
                   e["tedi-collapse__icon-wrapper"],
-                  e[`tedi-collapse__icon-wrapper--${n}`],
+                  e[`tedi-collapse__icon-wrapper--${o}`],
                   i === "small" && e["tedi-collapse__icon-wrapper--small"]
                 ),
                 children: /* @__PURE__ */ t(
-                  q,
+                  G,
                   {
-                    className: o(
+                    className: n(
                       e["tedi-collapse__icon"],
-                      e[`tedi-collapse__icon--${n}`],
+                      e[`tedi-collapse__icon--${o}`],
                       i === "small" && e["tedi-collapse__icon--small"]
                     ),
                     name: "expand_more",
-                    size: i === "small" || n === "secondary" ? 18 : 24
+                    size: i === "small" || o === "secondary" ? 18 : 24
                   }
                 )
               }
@@ -101,10 +103,10 @@ const se = (w) => {
         ] })
       }
     ),
-    _ ? I : /* @__PURE__ */ t(A, { id: L, duration: 300, height: a ? "auto" : 0, "data-testid": "collapse-inner", children: I })
+    _ ? I : /* @__PURE__ */ t(q, { id: M, duration: 300, height: a ? "auto" : 0, "data-testid": "collapse-inner", children: I })
   ] });
 };
 export {
-  se as Collapse,
-  se as default
+  ce as Collapse,
+  ce as default
 };

package/src/tedi/components/buttons/collapse/collapse.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-collapse__title":"tedi-collapse__title-3e140e5c","tedi-collapse__text":"tedi-collapse__text-d150fea1","tedi-collapse__text--underline":"tedi-collapse__text--underline-73ca86bd","tedi-collapse__icon-wrapper":"tedi-collapse__icon-wrapper-d2b036ea","tedi-collapse__icon":"tedi-collapse__icon-5156e480","tedi-collapse__icon-wrapper--secondary":"tedi-collapse__icon-wrapper--secondary-3321348a","tedi-collapse__icon--secondary":"tedi-collapse__icon--secondary-f0f3125f","tedi-collapse__icon--default":"tedi-collapse__icon--default-9c7e19e4","tedi-collapse__icon-wrapper--default":"tedi-collapse__icon-wrapper--default-450808b2","tedi-collapse__icon-wrapper--small":"tedi-collapse__icon-wrapper--small-65e6d09a","tedi-collapse--icon-only":"tedi-collapse--icon-only-335962f8","tedi-collapse__content":"tedi-collapse__content-350b91f8","tedi-collapse--is-open":"tedi-collapse--is-open-b34b11c3"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-collapse__title":"tedi-collapse__title-3e140e5c","tedi-collapse__text":"tedi-collapse__text-d150fea1","tedi-collapse__text--underline":"tedi-collapse__text--underline-73ca86bd","tedi-collapse__icon-wrapper":"tedi-collapse__icon-wrapper-d2b036ea","tedi-collapse__icon":"tedi-collapse__icon-5156e480","tedi-collapse__icon-wrapper--secondary":"tedi-collapse__icon-wrapper--secondary-3321348a","tedi-collapse__icon--secondary":"tedi-collapse__icon--secondary-f0f3125f","tedi-collapse__icon--default":"tedi-collapse__icon--default-9c7e19e4","tedi-collapse__icon-wrapper--default":"tedi-collapse__icon-wrapper--default-450808b2","tedi-collapse__icon-wrapper--small":"tedi-collapse__icon-wrapper--small-65e6d09a","tedi-collapse--icon-only":"tedi-collapse--icon-only-335962f8","tedi-collapse__content":"tedi-collapse__content-350b91f8","tedi-collapse--is-open":"tedi-collapse--is-open-b34b11c3","tedi-collapse--inverted":"tedi-collapse--inverted-bd2d0e21"};exports.default=e;

package/src/tedi/components/buttons/collapse/collapse.module.scss.es.js

@@ -11,7 +11,8 @@ const e = {
   "tedi-collapse__icon-wrapper--small": "tedi-collapse__icon-wrapper--small-65e6d09a",
   "tedi-collapse--icon-only": "tedi-collapse--icon-only-335962f8",
   "tedi-collapse__content": "tedi-collapse__content-350b91f8",
-  "tedi-collapse--is-open": "tedi-collapse--is-open-b34b11c3"
+  "tedi-collapse--is-open": "tedi-collapse--is-open-b34b11c3",
+  "tedi-collapse--inverted": "tedi-collapse--inverted-bd2d0e21"
 };
 export {
   e as default

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

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

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

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

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

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

package/src/tedi/providers/label-provider/label-provider.d.ts

@@ -3,6 +3,11 @@ import { TediLabelEntryRecord, TediLabels, TediLabelValuesRecord, TediLanguage }
 export interface ILabelContext {
     getLabel<TKey extends keyof TediLabels, TArgs extends TediLabels[TKey] extends Record<TediLanguage, infer FuncType> ? FuncType extends (...args: infer P) => string ? P : [] : TediLabels[TKey] extends (...args: infer P) => string ? P : []>(key: TKey, ...args: TArgs): string;
     setLocale: (locale: TediLanguage) => void;
+    /**
+     * Currently active locale. Exposed so components can derive locale-sensitive
+     * formatting defaults (e.g. `NumberField`'s `decimalSeparator`) without
+     * forcing every consumer to repeat the prop on every instance.
+     */
     locale: TediLanguage;
 }
 export declare const LabelContext: React.Context<ILabelContext>;