@tedi-design-system/react 18.1.0-rc.9 → 18.1.1-rc.1

package/src/tedi/components/form/input-group/input-group.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),w=require("../../../../../external/classnames/index.cjs.js"),e=require("react"),G=require("../feedback-text/feedback-text.cjs.js"),N=require("../form-label/form-label.cjs.js"),R=require("./components/input/input.cjs.js"),_=require("./components/prefix/prefix.cjs.js"),A=require("./components/suffix/suffix.cjs.js"),t=require("./input-group.module.scss.cjs.js"),d=e.createContext(null),F=()=>{const n=e.useContext(d);if(!n)throw new Error("InputGroupContext missing");return n},T=()=>e.useContext(d),c=e.forwardRef(({className:n,addons:S=!0,helper:u,label:s,children:j,disabled:i,invalid:o,id:q,...P},h)=>{const l=e.useRef(null),y=e.useId(),a=q??y,[p,g]=e.useState(!1),[f,I]=e.useState(!1);e.useImperativeHandle(h,()=>({get root(){return l.current}}));const b=e.useMemo(()=>({hasPrefix:p,hasSuffix:f,disabled:i,invalid:o,hasExternalLabel:!!s,inputId:a,registerPrefix:()=>g(!0),unregisterPrefix:()=>g(!1),registerSuffix:()=>I(!0),unregisterSuffix:()=>I(!1)}),[a,p,f,i,o,s]),v=w.default(t.default["tedi-input-group"],{[t.default["tedi-input-group--addons"]]:S,[t.default["tedi-input-group--has-prefix"]]:p,[t.default["tedi-input-group--has-suffix"]]:f,[t.default["tedi-input-group--disabled"]]:i,[t.default["tedi-input-group--invalid"]]:o},n),C=()=>!u||Array.isArray(u)&&u.length===0?null:r.jsx("div",{className:t.default["tedi-input-group__feedback-wrapper"],children:Array.isArray(u)?u.map((k,m)=>r.jsx(G.FeedbackText,{...k,id:`group-helper-${m}`},m)):r.jsx(G.FeedbackText,{...u,id:"group-helper"})});return r.jsx(d.Provider,{value:b,children:r.jsxs("div",{ref:l,className:v,"data-name":"tedi-input-group","aria-disabled":i,children:[s&&r.jsx(N.FormLabel,{...P,label:s,id:a}),r.jsx("div",{className:t.default["tedi-input-group__row"],children:j}),C()]})})});c.displayName="InputGroup";const x=c;x.Prefix=_.Prefix;x.Suffix=A.Suffix;x.Input=R.Input;exports.InputGroupBase=c;exports.useInputGroup=F;exports.useOptionalInputGroup=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),k=require("../../../../../external/classnames/index.cjs.js"),e=require("react"),m=require("../feedback-text/feedback-text.cjs.js"),w=require("../form-label/form-label.cjs.js"),N=require("./components/input/input.cjs.js"),R=require("./components/prefix/prefix.cjs.js"),_=require("./components/suffix/suffix.cjs.js"),t=require("./input-group.module.scss.cjs.js"),d=e.createContext(null),A=()=>{const n=e.useContext(d);if(!n)throw new Error("InputGroupContext missing");return n},F=()=>e.useContext(d),c=e.forwardRef(({className:n,addons:G=!0,helper:u,label:s,children:j,disabled:i,invalid:o,id:S,...q},P)=>{const x=e.useRef(null),b=e.useId(),a=S??b,[p,l]=e.useState(!1),[f,g]=e.useState(!1);e.useImperativeHandle(P,()=>({get root(){return x.current}}));const h=e.useMemo(()=>({hasPrefix:p,hasSuffix:f,disabled:i,invalid:o,hasExternalLabel:!!s,inputId:a,registerPrefix:()=>l(!0),unregisterPrefix:()=>l(!1),registerSuffix:()=>g(!0),unregisterSuffix:()=>g(!1)}),[a,p,f,i,o,s]),y=k.default(t.default["tedi-input-group"],{[t.default["tedi-input-group--addons"]]:G,[t.default["tedi-input-group--has-prefix"]]:p,[t.default["tedi-input-group--has-suffix"]]:f,[t.default["tedi-input-group--disabled"]]:i,[t.default["tedi-input-group--invalid"]]:o},n),v=()=>!u||Array.isArray(u)&&u.length===0?null:r.jsx("div",{className:t.default["tedi-input-group__feedback-wrapper"],children:Array.isArray(u)?u.map((C,I)=>r.jsx(m.FeedbackText,{...C,id:`group-helper-${I}`},I)):r.jsx(m.FeedbackText,{...u,id:"group-helper"})});return r.jsx(d.Provider,{value:h,children:r.jsxs("div",{ref:x,className:y,"data-name":"tedi-input-group","aria-disabled":i,children:[s&&r.jsx(w.FormLabel,{...q,label:s,id:a}),r.jsx("div",{className:t.default["tedi-input-group__row"],children:j}),v()]})})});c.displayName="InputGroup";const O=Object.assign(c,{Prefix:R.Prefix,Suffix:_.Suffix,Input:N.Input});exports.InputGroup=O;exports.InputGroupBase=c;exports.useInputGroup=A;exports.useOptionalInputGroup=F;

package/src/tedi/components/form/input-group/input-group.d.ts

@@ -1,9 +1,6 @@
 import { default as React, ReactNode } from 'react';
 import { FeedbackTextProps } from '../feedback-text/feedback-text';
 import { FormLabelProps } from '../form-label/form-label';
-import { Input } from './components/input/input';
-import { Prefix } from './components/prefix/prefix';
-import { Suffix } from './components/suffix/suffix';
 export interface InputGroupProps extends FormLabelProps {
     /**
      * Additional class name(s) applied to the root element of the InputGroup.
@@ -92,9 +89,9 @@ export type InputGroupContextValue = {
 export declare const useInputGroup: () => InputGroupContextValue;
 export declare const useOptionalInputGroup: () => InputGroupContextValue | null;
 export declare const InputGroupBase: React.ForwardRefExoticComponent<InputGroupProps & React.RefAttributes<InputGroupForwardRef>>;
-declare const InputGroup: typeof InputGroupBase & {
-    Prefix: typeof Prefix;
-    Suffix: typeof Suffix;
-    Input: typeof Input;
+export declare const InputGroup: React.ForwardRefExoticComponent<InputGroupProps & React.RefAttributes<InputGroupForwardRef>> & {
+    Prefix: ({ children, className, ...props }: import('.').PrefixProps) => import("react/jsx-runtime").JSX.Element;
+    Suffix: ({ children, className, ...props }: import('.').SuffixProps) => import("react/jsx-runtime").JSX.Element;
+    Input: ({ children }: import('.').InputProps) => string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined;
 };
 export default InputGroup;

package/src/tedi/components/form/input-group/input-group.es.js

@@ -1,63 +1,65 @@
-import { jsx as e, jsxs as F } from "react/jsx-runtime";
-import H from "../../../../../external/classnames/index.es.js";
-import l, { forwardRef as j, useState as I, useImperativeHandle as E, useMemo as L, useContext as S, createContext as b } from "react";
-import { FeedbackText as G } from "../feedback-text/feedback-text.es.js";
-import { FormLabel as B } from "../form-label/form-label.es.js";
-import { Input as M } from "./components/input/input.es.js";
-import { Prefix as O } from "./components/prefix/prefix.es.js";
-import { Suffix as T } from "./components/suffix/suffix.es.js";
+import { jsx as e, jsxs as j } from "react/jsx-runtime";
+import k from "../../../../../external/classnames/index.es.js";
+import g, { forwardRef as F, useState as l, useImperativeHandle as H, useMemo as b, useContext as G, createContext as E } from "react";
+import { FeedbackText as I } from "../feedback-text/feedback-text.es.js";
+import { FormLabel as L } from "../form-label/form-label.es.js";
+import { Input as O } from "./components/input/input.es.js";
+import { Prefix as B } from "./components/prefix/prefix.es.js";
+import { Suffix as M } from "./components/suffix/suffix.es.js";
 import r from "./input-group.module.scss.es.js";
-const f = b(null), W = () => {
-  const u = S(f);
+const f = E(null), U = () => {
+  const u = G(f);
   if (!u) throw new Error("InputGroupContext missing");
   return u;
-}, X = () => S(f), h = j(
-  ({ className: u, addons: P = !0, helper: t, label: o, children: y, disabled: i, invalid: n, id: N, ..._ }, v) => {
-    const m = l.useRef(null), w = l.useId(), s = N ?? w, [p, c] = I(!1), [a, x] = I(!1);
-    E(v, () => ({
+}, W = () => G(f), h = F(
+  ({ className: u, addons: S = !0, helper: t, label: o, children: y, disabled: s, invalid: i, id: N, ...P }, _) => {
+    const c = g.useRef(null), v = g.useId(), n = N ?? v, [p, d] = l(!1), [a, m] = l(!1);
+    H(_, () => ({
       get root() {
-        return m.current;
+        return c.current;
       }
     }));
-    const C = L(
+    const w = b(
       () => ({
         hasPrefix: p,
         hasSuffix: a,
-        disabled: i,
-        invalid: n,
+        disabled: s,
+        invalid: i,
         hasExternalLabel: !!o,
-        inputId: s,
-        registerPrefix: () => c(!0),
-        unregisterPrefix: () => c(!1),
-        registerSuffix: () => x(!0),
-        unregisterSuffix: () => x(!1)
+        inputId: n,
+        registerPrefix: () => d(!0),
+        unregisterPrefix: () => d(!1),
+        registerSuffix: () => m(!0),
+        unregisterSuffix: () => m(!1)
       }),
-      [s, p, a, i, n, o]
-    ), A = H(
+      [n, p, a, s, i, o]
+    ), C = k(
       r["tedi-input-group"],
       {
-        [r["tedi-input-group--addons"]]: P,
+        [r["tedi-input-group--addons"]]: S,
         [r["tedi-input-group--has-prefix"]]: p,
         [r["tedi-input-group--has-suffix"]]: a,
-        [r["tedi-input-group--disabled"]]: i,
-        [r["tedi-input-group--invalid"]]: n
+        [r["tedi-input-group--disabled"]]: s,
+        [r["tedi-input-group--invalid"]]: i
       },
       u
-    ), R = () => !t || Array.isArray(t) && t.length === 0 ? null : /* @__PURE__ */ e("div", { className: r["tedi-input-group__feedback-wrapper"], children: Array.isArray(t) ? t.map((k, g) => /* @__PURE__ */ e(G, { ...k, id: `group-helper-${g}` }, g)) : /* @__PURE__ */ e(G, { ...t, id: "group-helper" }) });
-    return /* @__PURE__ */ e(f.Provider, { value: C, children: /* @__PURE__ */ F("div", { ref: m, className: A, "data-name": "tedi-input-group", "aria-disabled": i, children: [
-      o && /* @__PURE__ */ e(B, { ..._, label: o, id: s }),
+    ), A = () => !t || Array.isArray(t) && t.length === 0 ? null : /* @__PURE__ */ e("div", { className: r["tedi-input-group__feedback-wrapper"], children: Array.isArray(t) ? t.map((R, x) => /* @__PURE__ */ e(I, { ...R, id: `group-helper-${x}` }, x)) : /* @__PURE__ */ e(I, { ...t, id: "group-helper" }) });
+    return /* @__PURE__ */ e(f.Provider, { value: w, children: /* @__PURE__ */ j("div", { ref: c, className: C, "data-name": "tedi-input-group", "aria-disabled": s, children: [
+      o && /* @__PURE__ */ e(L, { ...P, label: o, id: n }),
       /* @__PURE__ */ e("div", { className: r["tedi-input-group__row"], children: y }),
-      R()
+      A()
     ] }) });
   }
 );
 h.displayName = "InputGroup";
-const d = h;
-d.Prefix = O;
-d.Suffix = T;
-d.Input = M;
+const X = Object.assign(h, {
+  Prefix: B,
+  Suffix: M,
+  Input: O
+});
 export {
+  X as InputGroup,
   h as InputGroupBase,
-  W as useInputGroup,
-  X as useOptionalInputGroup
+  U as useInputGroup,
+  W as useOptionalInputGroup
 };

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;