@tedi-design-system/react 17.1.0-rc.3 → 17.1.0-rc.5

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

@@ -0,0 +1,81 @@
+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) => {
+  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(
+      "button",
+      {
+        ...a,
+        className: _(t["tedi-multi-value-field__icon-wrapper"], a == null ? void 0 : a.className),
+        onClick: p,
+        type: "button",
+        children: /* @__PURE__ */ l(g, { ...e, size: 18 })
+      }
+    ) : /* @__PURE__ */ l("div", { className: t["tedi-multi-value-field__icon-wrapper"], children: /* @__PURE__ */ l(g, { ...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(
+      "input",
+      {
+        type: "hidden",
+        name: u,
+        value: r.length ? JSON.stringify(r) : "",
+        required: v,
+        disabled: n
+      }
+    )
+  ] });
+});
+O.displayName = "MultiValueField";
+export {
+  O as MultiValueField,
+  O as default
+};

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

@@ -0,0 +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;

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

@@ -0,0 +1,9 @@
+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"
+};
+export {
+  e as default
+};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=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"),O=N=>{const{getCurrentBreakpointProps:P}=Y.useBreakpointProps(N.defaultServerBreakpoint),{id:x,label:S,hideLabel:U,required:I,className:q,size:_,inputMode:E="numeric",decimalPlaces:j,min:i,max:u,step:c=1,defaultValue:$,value:B,onChange:l,suffix:h,fullWidth:z=!1,disabled:m=!1,invalid:k=!1,helper:d,input:f}=P(N),{getLabel:F}=Z.useLabels(),b=o.useRef(null),[M,L]=o.useState(""),[T,V]=o.useState($??0),s=o.useMemo(()=>l&&typeof B<"u"?B:T,[l,B,T]),g=d?`${x}-helper`:void 0,w=o.useCallback(e=>{const t=i!==void 0&&e<i,r=u!==void 0&&e>u;return k||t||r||(d==null?void 0:d.type)==="error"},[k,d,u,i]),y=e=>Math.min(u??1/0,Math.max(i??-1/0,e)),R=e=>{const t=F("numberField.quantityUpdated",e);L(t),setTimeout(()=>{L("")},5e3)},W=e=>j!==void 0?parseFloat(e.toFixed(j)):e,A=e=>{let t=s;e==="increment"&&(t=t+c),e==="decrement"&&(t=t-c),t=y(t),t=W(t),R(t),l==null||l(t),V(t)},D=({currentTarget:{value:e}})=>{l==null||l(y(+e)),V(y(+e))},C=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=F(`numberField.${e}`,c);return a.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 a.jsxs("div",{className:e,onClick:r,children:[a.jsx("input",{ref:b,id:x,"aria-describedby":g,"aria-invalid":w(s)?"true":"false",type:"number",inputMode:E,value:s,min:i,max:u,required:I,step:c,disabled:m,onChange:D,className:t,...f}),h&&a.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"]]:w(s)},{[n.default["tedi-number-field--disabled"]]:m},{[n.default["tedi-number-field--small"]]:_==="small"},q);return a.jsxs("div",{"data-name":"number-field",className:q,children:[a.jsx(X.FormLabel,{id:x,label:S,required:I,hideLabel:U,size:_}),a.jsxs("div",{className:H,children:[C("decrement"),G(),C("increment")]}),d&&a.jsx(Q.FeedbackText,{className:n.default["tedi-number-field__feedback"],...d,id:g}),M&&a.jsx("div",{"aria-live":"polite",className:"sr-only",children:M})]})};O.displayName="NumberField";exports.NumberField=O;
+"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;

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

@@ -20,13 +20,13 @@ const ie = (y) => {
     decimalPlaces: F,
     min: r,
     max: a,
-    step: o = 1,
+    step: u = 1,
     defaultValue: z,
     value: h,
     onChange: i,
     suffix: B,
     fullWidth: S = !1,
-    disabled: u = !1,
+    disabled: o = !1,
     invalid: M = !1,
     helper: l,
     input: m
@@ -46,19 +46,19 @@ const ie = (y) => {
     }, 5e3);
   }, A = (e) => F !== void 0 ? parseFloat(e.toFixed(F)) : e, D = (e) => {
     let t = s;
-    e === "increment" && (t = t + o), e === "decrement" && (t = t - o), t = I(t), t = A(t), W(t), i == null || i(t), C(t);
+    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 || u
-    }), p = V(`numberField.${e}`, o);
+      [n["tedi-number-field__button--disabled"]]: t || o
+    }), p = V(`numberField.${e}`, u);
     return /* @__PURE__ */ d(
       Y,
       {
         "aria-label": p,
         onClick: () => D(e),
-        disabled: t || u,
+        disabled: t || o,
         visualType: "secondary",
         className: f,
         icon: { name: e === "increment" ? "add" : "remove" },
@@ -88,8 +88,8 @@ const ie = (y) => {
           min: r,
           max: a,
           required: x,
-          step: o,
-          disabled: u,
+          step: u,
+          disabled: o,
           onChange: G,
           className: t,
           ...m
@@ -100,7 +100,7 @@ const ie = (y) => {
   }, J = b(
     n["tedi-number-field"],
     { [n["tedi-number-field--invalid"]]: g(s) },
-    { [n["tedi-number-field--disabled"]]: u },
+    { [n["tedi-number-field--disabled"]]: o },
     { [n["tedi-number-field--small"]]: _ === "small" },
     k
   );
@@ -117,5 +117,6 @@ const ie = (y) => {
 };
 ie.displayName = "NumberField";
 export {
-  ie as NumberField
+  ie as NumberField,
+  ie as default
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),Ce=require("../../../../../external/classnames/index.cjs.js"),a=require("react"),Oe=require("../../../../../external/react-select/dist/react-select.esm.cjs.js"),Le=require("../../../../../external/react-select/async/dist/react-select-async.esm.cjs.js"),ve=require("../feedback-text/feedback-text.cjs.js"),Ve=require("../form-label/form-label.cjs.js"),g=require("../input-group/input-group.cjs.js"),he=require("./components/select-clear-indicator.cjs.js"),xe=require("./components/select-control.cjs.js"),ye=require("./components/select-dropdown-indicator.cjs.js"),Re=require("./components/select-group.cjs.js"),je=require("./components/select-group-heading.cjs.js"),we=require("./components/select-indicators-container.cjs.js"),Ne=require("./components/select-input.cjs.js"),_e=require("./components/select-loading-indicator.cjs.js"),He=require("./components/select-menu.cjs.js"),Pe=require("./components/select-menu-list.cjs.js"),Te=require("./components/select-menu-portal.cjs.js"),De=require("./components/select-multi-value.cjs.js"),ke=require("./components/select-multi-value-remove.cjs.js"),Fe=require("./components/select-option.cjs.js"),Ee=require("./components/select-value-container.cjs.js"),s=require("./select.module.scss.cjs.js"),Ge=require("../../../providers/label-provider/use-labels.cjs.js"),j=a.forwardRef((S,w)=>{var R;const{options:N,defaultOptions:_,id:b,name:H,iconName:P="arrow_drop_down",label:T,required:M,value:D,defaultValue:k,tagsDirection:I="row",onChange:u,onInputChange:F,inputValue:E,loadOptions:G,isLoading:B,openMenuOnFocus:$=!1,openMenuOnClick:z=!0,tabSelectsValue:A=!1,disabled:q=!1,className:C,hideLabel:W=!1,helper:t,placeholder:J,invalid:K,valid:Q,size:d,async:U=!1,renderOption:X,renderMessageListFooter:O,noOptionsMessage:Y,loadingMessage:Z,multiple:p=!1,closeMenuOnSelect:ee=!p,blurInputOnSelect:L=!1,autoFocus:te=!1,isClearable:se=!0,isClearIndicatorVisible:ne=!1,isSearchable:v=!0,menuIsOpen:le,onMenuClose:oe,onMenuOpen:ae,onBlur:re,inputIsHidden:ie,isTagRemovable:V=!1,optionGroupHeadingText:ce={modifiers:"small",color:"tertiary"},cacheOptions:ue=!0,showRadioButtons:de=!1,renderWithoutLabel:pe,tooltip:me,classNames:h}=S,n=(R=g.useOptionalInputGroup)==null?void 0:R.call(g),fe=a.useId(),ge=n==null?void 0:n.hasExternalLabel,m=S.id??(n==null?void 0:n.inputId)??fe,x=t?(t==null?void 0:t.id)??`${m}-helper`:void 0,r=a.useRef(null),{getLabel:y}=Ge.useLabels();a.useImperativeHandle(w,()=>r.current);const Se=o=>{u==null||u(o),!L&&r.current&&setTimeout(()=>{var i,c;return(c=(i=r.current)==null?void 0:i.inputRef)==null?void 0:c.focus()},0)},be=a.useCallback(o=>l.jsx(Pe.SelectMenuList,{...o,renderMessageListFooter:O}),[O]),Me=()=>{const o={ClearIndicator:e=>he.SelectClearIndicator({isClearIndicatorVisible:ne,...e}),DropdownIndicator:()=>ye.SelectDropDownIndicator({iconName:P}),IndicatorSeparator:()=>null,MenuPortal:Te.SelectMenuPortal,Menu:He.SelectMenu,MenuList:be,Option:e=>Fe.SelectOption({renderOption:X,multiple:p,showRadioButtons:de,...e}),Control:e=>xe.SelectControl({...e,className:C}),Input:Ne.SelectInput,MultiValue:e=>De.SelectMultiValue({isTagRemovable:V,...e}),MultiValueRemove:ke.SelectMultiValueRemove,Group:Re.SelectGroup,GroupHeading:e=>je.SelectGroupHeading({optionGroupHeadingText:ce,...e}),IndicatorsContainer:we.SelectIndicatorsContainer,ValueContainer:Ee.SelectValueContainer,LoadingIndicator:_e.SelectLoadingIndicator},i=U?Le.default:Oe.default,c=()=>y("select.no-options"),qe=()=>y("select.loading");return l.jsx(i,{id:m,"aria-describedby":x,autoFocus:te,ref:r,instanceId:b,className:"tedi-select__wrapper",name:H,options:N,defaultOptions:_,value:D,defaultValue:k,cacheOptions:ue,onChange:Se,onInputChange:F,onBlur:re,inputValue:E,inputId:`${b}-input`,loadOptions:G,isLoading:B,noOptionsMessage:Y||c,loadingMessage:Z||qe,classNamePrefix:"select",components:o,isDisabled:q,isSearchable:v,menuIsOpen:le,openMenuOnFocus:$,openMenuOnClick:z,tabSelectsValue:A,onMenuClose:oe,onMenuOpen:ae,placeholder:J||"",isClearable:se,backspaceRemovesValue:V,menuShouldScrollIntoView:!0,isMulti:p,hideSelectedOptions:!1,closeMenuOnSelect:ee,blurInputOnSelect:L,menuPlacement:"auto",inputIsHidden:ie,required:M,menuPortalTarget:document.body,menuPosition:"absolute",classNames:h?Object.fromEntries(Object.entries(h).map(([e,f])=>[e,typeof f=="string"?()=>f:f])):void 0,theme:e=>({...e,colors:{...e.colors,primary:"var(--tedi-blue-600)",danger:"var(--tedi-red-600)",dangerLight:"var(--tedi-red-200)"}}),styles:{input:e=>({...e,gridTemplateColumns:"0fr"})}})},Ie=Ce.default(s.default["tedi-select"],C,{[s.default["tedi-select--invalid"]]:K||(t==null?void 0:t.type)==="error"},{[s.default["tedi-select--valid"]]:Q||(t==null?void 0:t.type)==="valid"},{[s.default[`tedi-select--${d}`]]:d},{[s.default[`tedi-select--tags-${I}`]]:I},{[s.default["tedi-select--searchable"]]:v},{[s.default["tedi-select--disabled"]]:q});return l.jsxs("div",{"data-name":"select",className:Ie,children:[l.jsxs("div",{className:s.default["tedi-select__inner"],children:[!ge&&l.jsx(Ve.FormLabel,{id:`${m}-input`,label:T,required:M,hideLabel:W,size:d,renderWithoutLabel:pe,tooltip:me}),Me()]}),t&&l.jsx(ve.FeedbackText,{...t,id:x})]})});j.displayName="Select";exports.Select=j;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),Ce=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),Oe=require("../../../../../external/react-select/dist/react-select.esm.cjs.js"),ve=require("../../../../../external/react-select/async/dist/react-select-async.esm.cjs.js"),Le=require("../feedback-text/feedback-text.cjs.js"),Ve=require("../form-label/form-label.cjs.js"),g=require("../input-group/input-group.cjs.js"),he=require("./components/select-clear-indicator.cjs.js"),xe=require("./components/select-control.cjs.js"),Re=require("./components/select-dropdown-indicator.cjs.js"),ye=require("./components/select-group.cjs.js"),_e=require("./components/select-group-heading.cjs.js"),je=require("./components/select-indicators-container.cjs.js"),we=require("./components/select-input.cjs.js"),Ne=require("./components/select-loading-indicator.cjs.js"),He=require("./components/select-menu.cjs.js"),Pe=require("./components/select-menu-list.cjs.js"),Te=require("./components/select-menu-portal.cjs.js"),De=require("./components/select-multi-value.cjs.js"),ke=require("./components/select-multi-value-remove.cjs.js"),Fe=require("./components/select-option.cjs.js"),Ee=require("./components/select-value-container.cjs.js"),s=require("./select.module.scss.cjs.js"),Ge=require("../../../providers/label-provider/use-labels.cjs.js"),S=o.forwardRef((b,j)=>{var _;const{options:w,defaultOptions:N,id:M,name:H,iconName:P="arrow_drop_down",label:T,required:I,value:D,defaultValue:k,tagsDirection:q="row",onChange:u,onInputChange:F,inputValue:E,loadOptions:G,isLoading:B,openMenuOnFocus:$=!1,openMenuOnClick:z=!0,tabSelectsValue:A=!1,disabled:C=!1,className:O,hideLabel:W=!1,helper:t,placeholder:J,invalid:K,valid:Q,size:d,async:U=!1,renderOption:X,renderMessageListFooter:v,noOptionsMessage:Y,loadingMessage:Z,multiple:p=!1,closeMenuOnSelect:ee=!p,blurInputOnSelect:L=!1,autoFocus:te=!1,isClearable:se=!0,isClearIndicatorVisible:ne=!1,isSearchable:V=!0,menuIsOpen:le,onMenuClose:ae,onMenuOpen:oe,onBlur:re,inputIsHidden:ie,isTagRemovable:h=!1,optionGroupHeadingText:ce={modifiers:"small",color:"tertiary"},cacheOptions:ue=!0,showRadioButtons:de=!1,renderWithoutLabel:pe,tooltip:me,classNames:x}=b,n=(_=g.useOptionalInputGroup)==null?void 0:_.call(g),fe=o.useId(),ge=n==null?void 0:n.hasExternalLabel,m=b.id??(n==null?void 0:n.inputId)??fe,R=t?(t==null?void 0:t.id)??`${m}-helper`:void 0,r=o.useRef(null),{getLabel:y}=Ge.useLabels();o.useImperativeHandle(j,()=>r.current);const Se=a=>{u==null||u(a),!L&&r.current&&setTimeout(()=>{var i,c;return(c=(i=r.current)==null?void 0:i.inputRef)==null?void 0:c.focus()},0)},be=o.useCallback(a=>l.jsx(Pe.SelectMenuList,{...a,renderMessageListFooter:v}),[v]),Me=()=>{const a={ClearIndicator:e=>he.SelectClearIndicator({isClearIndicatorVisible:ne,...e}),DropdownIndicator:()=>Re.SelectDropDownIndicator({iconName:P}),IndicatorSeparator:()=>null,MenuPortal:Te.SelectMenuPortal,Menu:He.SelectMenu,MenuList:be,Option:e=>Fe.SelectOption({renderOption:X,multiple:p,showRadioButtons:de,...e}),Control:e=>xe.SelectControl({...e,className:O}),Input:we.SelectInput,MultiValue:e=>De.SelectMultiValue({isTagRemovable:h,...e}),MultiValueRemove:ke.SelectMultiValueRemove,Group:ye.SelectGroup,GroupHeading:e=>_e.SelectGroupHeading({optionGroupHeadingText:ce,...e}),IndicatorsContainer:je.SelectIndicatorsContainer,ValueContainer:Ee.SelectValueContainer,LoadingIndicator:Ne.SelectLoadingIndicator},i=U?ve.default:Oe.default,c=()=>y("select.no-options"),qe=()=>y("select.loading");return l.jsx(i,{id:m,"aria-describedby":R,autoFocus:te,ref:r,instanceId:M,className:"tedi-select__wrapper",name:H,options:w,defaultOptions:N,value:D,defaultValue:k,cacheOptions:ue,onChange:Se,onInputChange:F,onBlur:re,inputValue:E,inputId:`${M}-input`,loadOptions:G,isLoading:B,noOptionsMessage:Y||c,loadingMessage:Z||qe,classNamePrefix:"select",components:a,isDisabled:C,isSearchable:V,menuIsOpen:le,openMenuOnFocus:$,openMenuOnClick:z,tabSelectsValue:A,onMenuClose:ae,onMenuOpen:oe,placeholder:J||"",isClearable:se,backspaceRemovesValue:h,menuShouldScrollIntoView:!0,isMulti:p,hideSelectedOptions:!1,closeMenuOnSelect:ee,blurInputOnSelect:L,menuPlacement:"auto",inputIsHidden:ie,required:I,menuPortalTarget:document.body,menuPosition:"absolute",classNames:x?Object.fromEntries(Object.entries(x).map(([e,f])=>[e,typeof f=="string"?()=>f:f])):void 0,theme:e=>({...e,colors:{...e.colors,primary:"var(--tedi-blue-600)",danger:"var(--tedi-red-600)",dangerLight:"var(--tedi-red-200)"}}),styles:{input:e=>({...e,gridTemplateColumns:"0fr"})}})},Ie=Ce.default(s.default["tedi-select"],O,{[s.default["tedi-select--invalid"]]:K||(t==null?void 0:t.type)==="error"},{[s.default["tedi-select--valid"]]:Q||(t==null?void 0:t.type)==="valid"},{[s.default[`tedi-select--${d}`]]:d},{[s.default[`tedi-select--tags-${q}`]]:q},{[s.default["tedi-select--searchable"]]:V},{[s.default["tedi-select--disabled"]]:C});return l.jsxs("div",{"data-name":"select",className:Ie,children:[l.jsxs("div",{className:s.default["tedi-select__inner"],children:[!ge&&l.jsx(Ve.FormLabel,{id:`${m}-input`,label:T,required:I,hideLabel:W,size:d,renderWithoutLabel:pe,tooltip:me}),Me()]}),t&&l.jsx(Le.FeedbackText,{...t,id:R})]})});S.displayName="Select";exports.Select=S;exports.default=S;

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

@@ -68,8 +68,8 @@ const qe = ve(
       menuIsOpen: ae,
       onMenuClose: ne,
       onMenuOpen: re,
-      onBlur: ie,
-      inputIsHidden: se,
+      onBlur: se,
+      inputIsHidden: ie,
       isTagRemovable: h = !1,
       optionGroupHeadingText: le = { modifiers: "small", color: "tertiary" },
       cacheOptions: ce = !0,
@@ -84,8 +84,8 @@ const qe = ve(
     );
     const ge = (n) => {
       d == null || d(n), !C && r.current && setTimeout(() => {
-        var i, s;
-        return (s = (i = r.current) == null ? void 0 : i.inputRef) == null ? void 0 : s.focus();
+        var s, i;
+        return (i = (s = r.current) == null ? void 0 : s.inputRef) == null ? void 0 : i.focus();
       }, 0);
     }, Se = c.useCallback(
       (n) => /* @__PURE__ */ l(De, { ...n, renderMessageListFooter: v }),
@@ -108,9 +108,9 @@ const qe = ve(
         IndicatorsContainer: xe,
         ValueContainer: Be,
         LoadingIndicator: Pe
-      }, i = Q ? Le : Ce, s = () => V("select.no-options"), Ie = () => V("select.loading");
+      }, s = Q ? Le : Ce, i = () => V("select.no-options"), Ie = () => V("select.loading");
       return /* @__PURE__ */ l(
-        i,
+        s,
         {
           id: p,
           "aria-describedby": N,
@@ -126,12 +126,12 @@ const qe = ve(
           cacheOptions: ce,
           onChange: ge,
           onInputChange: j,
-          onBlur: ie,
+          onBlur: se,
           inputValue: k,
           inputId: `${S}-input`,
           loadOptions: E,
           isLoading: B,
-          noOptionsMessage: X || s,
+          noOptionsMessage: X || i,
           loadingMessage: Y || Ie,
           classNamePrefix: "select",
           components: n,
@@ -152,7 +152,7 @@ const qe = ve(
           closeMenuOnSelect: Z,
           blurInputOnSelect: C,
           menuPlacement: "auto",
-          inputIsHidden: se,
+          inputIsHidden: ie,
           required: b,
           menuPortalTarget: document.body,
           menuPosition: "absolute",
@@ -211,5 +211,6 @@ const qe = ve(
 );
 qe.displayName = "Select";
 export {
-  qe as Select
+  qe as Select,
+  qe as default
 };

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

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

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

@@ -141,5 +141,6 @@ const be = oe((N, S) => {
 });
 be.displayName = "Slider";
 export {
-  be as Slider
+  be as Slider,
+  be as default
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L=require("react/jsx-runtime"),w=require("../../../../../external/classnames/index.cjs.js"),a=require("react"),O=require("../textfield/textfield.cjs.js"),d=require("./textarea.module.scss.cjs.js"),M=a.forwardRef((N,o)=>{const{className:_,helper:p=[],characterLimit:s,onChange:n,onChangeEvent:g,value:l,defaultValue:b,autoGrow:t=!1,minRows:u=3,maxRows:y=12,height:H="7.5rem",maxHeight:i,...q}=N,[T,F]=a.useState(b??""),c=a.useRef(null),[v,E]=a.useState("auto"),j=a.useCallback(e=>{!l&&!(n||g)&&F(e),n==null||n(e)},[l,n,g]),m=a.useMemo(()=>l??T,[l,T]),r=a.useCallback(()=>{if(!t||!c.current)return;const e=c.current,$=e.style.overflow;e.style.overflow="hidden";const f=window.getComputedStyle(e);let h=parseFloat(f.lineHeight);isNaN(h)&&(h=(parseFloat(f.fontSize)||16)*1.5);const S=parseFloat(f.paddingTop),A=parseFloat(f.paddingBottom),B=e.scrollHeight-S-A;let x=Math.ceil(B/h);x=Math.min(Math.max(x,u),y);const R=`${x*h+S+A}px`;e.style.height=R,E(R),e.style.overflow=$,e.style.overflowY=e.scrollHeight>e.clientHeight?"auto":"hidden"},[t,u,y]);a.useEffect(()=>{t&&requestAnimationFrame(()=>{r()})},[m,t,r]),a.useEffect(()=>{t&&c.current&&r()},[t,r]);const k=a.useCallback(e=>{o&&(typeof o=="function"?o(e):o.current=e),e!=null&&e.input&&e.input instanceof HTMLTextAreaElement&&(c.current=e.input,t&&setTimeout(r,0))},[o,t,r]),z=a.useMemo(()=>t?{rows:u,style:{...i?{maxHeight:i}:{},overflow:"hidden",height:v}}:{style:{height:H,...i?{maxHeight:i}:{},overflow:"auto"}},[t,u,i,H,v]),C=m.length,I=s?`${C}/${s}`:"",V=[...Array.isArray(p)?p:[p],...s?[{type:C>s?"error":"hint",text:I,position:"right",className:w.default(d.default["tedi-textarea__character-count"])}]:[]];return L.jsx(O.TextField,{...q,ref:k,"data-name":"textarea",inputClassName:w.default(d.default["tedi-textarea__input"],{[d.default["tedi-textarea__input--auto-grow"]]:t}),isTextArea:!0,className:w.default(d.default["tedi-textarea"],_),value:m,onChange:j,onChangeEvent:g,helper:V,input:z})});M.displayName="TextArea";exports.TextArea=M;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const L=require("react/jsx-runtime"),w=require("../../../../../external/classnames/index.cjs.js"),a=require("react"),O=require("../textfield/textfield.cjs.js"),d=require("./textarea.module.scss.cjs.js"),H=a.forwardRef((R,o)=>{const{className:N,helper:p=[],characterLimit:i,onChange:n,onChangeEvent:g,value:l,defaultValue:b,autoGrow:t=!1,minRows:u=3,maxRows:y=12,height:v="7.5rem",maxHeight:s,...q}=R,[T,F]=a.useState(b??""),c=a.useRef(null),[C,E]=a.useState("auto"),j=a.useCallback(e=>{!l&&!(n||g)&&F(e),n==null||n(e)},[l,n,g]),m=a.useMemo(()=>l??T,[l,T]),r=a.useCallback(()=>{if(!t||!c.current)return;const e=c.current,$=e.style.overflow;e.style.overflow="hidden";const f=window.getComputedStyle(e);let h=parseFloat(f.lineHeight);isNaN(h)&&(h=(parseFloat(f.fontSize)||16)*1.5);const _=parseFloat(f.paddingTop),A=parseFloat(f.paddingBottom),B=e.scrollHeight-_-A;let x=Math.ceil(B/h);x=Math.min(Math.max(x,u),y);const M=`${x*h+_+A}px`;e.style.height=M,E(M),e.style.overflow=$,e.style.overflowY=e.scrollHeight>e.clientHeight?"auto":"hidden"},[t,u,y]);a.useEffect(()=>{t&&requestAnimationFrame(()=>{r()})},[m,t,r]),a.useEffect(()=>{t&&c.current&&r()},[t,r]);const k=a.useCallback(e=>{o&&(typeof o=="function"?o(e):o.current=e),e!=null&&e.input&&e.input instanceof HTMLTextAreaElement&&(c.current=e.input,t&&setTimeout(r,0))},[o,t,r]),z=a.useMemo(()=>t?{rows:u,style:{...s?{maxHeight:s}:{},overflow:"hidden",height:C}}:{style:{height:v,...s?{maxHeight:s}:{},overflow:"auto"}},[t,u,s,v,C]),S=m.length,I=i?`${S}/${i}`:"",V=[...Array.isArray(p)?p:[p],...i?[{type:S>i?"error":"hint",text:I,position:"right",className:w.default(d.default["tedi-textarea__character-count"])}]:[]];return L.jsx(O.TextField,{...q,ref:k,"data-name":"textarea",inputClassName:w.default(d.default["tedi-textarea__input"],{[d.default["tedi-textarea__input--auto-grow"]]:t}),isTextArea:!0,className:w.default(d.default["tedi-textarea"],N),value:m,onChange:j,onChangeEvent:g,helper:V,input:z})});H.displayName="TextArea";exports.TextArea=H;exports.default=H;

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

@@ -2,11 +2,11 @@ import { jsx as q } from "react/jsx-runtime";
 import w from "../../../../../external/classnames/index.es.js";
 import a, { forwardRef as G, useRef as O, useEffect as R } from "react";
 import { TextField as P } from "../textfield/textfield.es.js";
-import p from "./textarea.module.scss.es.js";
+import m from "./textarea.module.scss.es.js";
 const Y = G((S, r) => {
   const {
     className: F,
-    helper: f = [],
+    helper: p = [],
     characterLimit: i,
     onChange: s,
     onChangeEvent: g,
@@ -23,24 +23,24 @@ const Y = G((S, r) => {
       !l && !(s || g) && k(t), s == null || s(t);
     },
     [l, s, g]
-  ), x = a.useMemo(() => l ?? v, [l, v]), o = a.useCallback(() => {
+  ), d = a.useMemo(() => l ?? v, [l, v]), o = a.useCallback(() => {
     if (!e || !u.current) return;
     const t = u.current, L = t.style.overflow;
     t.style.overflow = "hidden";
     const h = window.getComputedStyle(t);
-    let m = parseFloat(h.lineHeight);
-    isNaN(m) && (m = (parseFloat(h.fontSize) || 16) * 1.5);
+    let f = parseFloat(h.lineHeight);
+    isNaN(f) && (f = (parseFloat(h.fontSize) || 16) * 1.5);
     const N = parseFloat(h.paddingTop), _ = parseFloat(h.paddingBottom), j = t.scrollHeight - N - _;
-    let d = Math.ceil(j / m);
-    d = Math.min(Math.max(d, c), H);
-    const A = `${d * m + N + _}px`;
+    let x = Math.ceil(j / f);
+    x = Math.min(Math.max(x, c), H);
+    const A = `${x * f + N + _}px`;
     t.style.height = A, z(A), t.style.overflow = L, t.style.overflowY = t.scrollHeight > t.clientHeight ? "auto" : "hidden";
   }, [e, c, H]);
   R(() => {
     e && requestAnimationFrame(() => {
       o();
     });
-  }, [x, e, o]), R(() => {
+  }, [d, e, o]), R(() => {
     e && u.current && o();
   }, [e, o]);
   const I = a.useCallback(
@@ -61,14 +61,14 @@ const Y = G((S, r) => {
       ...n ? { maxHeight: n } : {},
       overflow: "auto"
     }
-  }, [e, c, n, y, C]), T = x.length, $ = i ? `${T}/${i}` : "", B = [
-    ...Array.isArray(f) ? f : [f],
+  }, [e, c, n, y, C]), T = d.length, $ = i ? `${T}/${i}` : "", B = [
+    ...Array.isArray(p) ? p : [p],
     ...i ? [
       {
         type: T > i ? "error" : "hint",
         text: $,
         position: "right",
-        className: w(p["tedi-textarea__character-count"])
+        className: w(m["tedi-textarea__character-count"])
       }
     ] : []
   ];
@@ -78,12 +78,12 @@ const Y = G((S, r) => {
       ...b,
       ref: I,
       "data-name": "textarea",
-      inputClassName: w(p["tedi-textarea__input"], {
-        [p["tedi-textarea__input--auto-grow"]]: e
+      inputClassName: w(m["tedi-textarea__input"], {
+        [m["tedi-textarea__input--auto-grow"]]: e
       }),
       isTextArea: !0,
-      className: w(p["tedi-textarea"], F),
-      value: x,
+      className: w(m["tedi-textarea"], F),
+      value: d,
       onChange: E,
       onChangeEvent: g,
       helper: B,
@@ -93,5 +93,6 @@ const Y = G((S, r) => {
 });
 Y.displayName = "TextArea";
 export {
-  Y as TextArea
+  Y as TextArea,
+  Y as default
 };

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

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

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

@@ -128,6 +128,17 @@ export interface TextFieldProps extends BreakpointSupport<TextFieldBreakpointPro
      * @param event - Mouse event from the icon wrapper
      */
     onIconClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
+    /**
+     * Extra HTML attributes spread on the icon `<button>` element.
+     *
+     * Use this to wire ARIA state (e.g. `aria-expanded`, `aria-controls`,
+     * `aria-haspopup`) directly to the icon trigger, so screen readers announce
+     * disclosure state correctly when the icon opens a popover / dialog.
+     *
+     * Only applied when `onIconClick` is set (i.e. the icon is rendered as a
+     * `<button>`).
+     */
+    iconButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
     /**
      * Click handler for the entire inner container (the area around the input).
      *
@@ -198,6 +209,11 @@ export interface TextFieldProps extends BreakpointSupport<TextFieldBreakpointPro
      * Additional attributes for the input element.
      */
     input?: React.InputHTMLAttributes<HTMLInputElement> | React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+    startSlot?: React.ReactNode;
+    /**
+     * Optional end slot element to render inside the input container, after the input field.
+     */
+    endSlot?: React.ReactNode;
 }
 export interface TextFieldForwardRef {
     input: FieldElement | null;