@tedi-design-system/react 17.0.0 → 17.1.0-rc.1

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

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

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

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

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

@@ -2,114 +2,196 @@ import { default as React } from 'react';
 import { BreakpointSupport } from '../../../helpers';
 import { IconWithoutBackgroundProps } from '../../base/icon/icon';
 import { FeedbackTextProps } from '../feedback-text/feedback-text';
+import { FieldElement } from '../field/field';
 import { FormLabelProps } from '../form-label/form-label';
 type TextFieldBreakpointProps = {
     /**
-     * Input field size
+     * Controls the visual size of the text field.
+     *
+     * - `'small'`  → Compact version (smaller height, padding, and font size)
+     * - `'default'` → Standard size (most commonly used)
+     * - `'large'`   → Larger touch target, bigger text and padding
+     *
      * @default 'default'
      */
     size?: 'default' | 'small' | 'large';
     /**
-     * Icon name or configuration for the input field.
+     * Icon displayed inside the text field on the right side.
+     *
+     * Accepts either:
+     * - A simple string (icon name) → e.g. `'search'`, `'user'`, `'calendar'`
+     * - A full `IconWithoutBackgroundProps` object for advanced configuration (size, color, className, etc.)
+     *
+     * When `onIconClick` is provided, the icon becomes a clickable button.
+     * Otherwise, it is rendered as a non-interactive decorative element.
      */
     icon?: string | IconWithoutBackgroundProps;
     /**
-     * Whether to render a textarea instead of an input.
+     * If `true`, renders a `<textarea>` instead of a regular `<input>`.
+     * Useful for multi-line text input (comments, descriptions, addresses, etc.).
+     *
+     * Note: When using `isTextArea`, the component still behaves like a text field
+     * (same styling, clear button, icon support, validation, etc.).
+     *
+     * @default false
      */
     isTextArea?: boolean;
     /**
-     * Placeholder text displayed inside the input.
+     * Placeholder text shown when the field is empty.
+     *
+     * Recommended to be short and descriptive. Avoid using placeholder as a label.
      */
     placeholder?: string;
     /**
-     * Whether the input includes a clear button.
+     * When `true`, displays a clear (×) button on the right side when the field has a value.
+     *
+     * Clicking the button clears the input and calls `onClear` (if provided).
+     *
+     * @default false
      */
     isClearable?: boolean;
     /**
-     * Custom CSS classes for the container.
+     * Additional CSS class name applied to the root container (`<div>`).
+     *
+     * Use this for layout adjustments, custom spacing, or theming the entire text field wrapper.
      */
     className?: string;
 };
-export interface TextFieldProps extends BreakpointSupport<TextFieldBreakpointProps>, Omit<FormLabelProps, 'size'> {
+export interface TextFieldProps extends BreakpointSupport<TextFieldBreakpointProps>, Omit<FormLabelProps, 'size' | 'id' | 'label'> {
     /**
-     * Unique identifier for the input field.
+     * Unique identifier for the text field.
+     *
+     * Required for accessibility (associates label, helper text, and input).
+     * Also used to generate `aria-describedby` and helper IDs automatically.
      */
-    id: string;
+    id?: string;
+    label?: React.ReactNode;
     /**
-     * Name attribute for the input element.
+     * Name attribute for the underlying input/textarea element.
+     *
+     * Important for form submission and integration with form libraries (React Hook Form, Formik, etc.).
      */
     name?: string;
     /**
-     * Custom CSS classes for the input element.
+     * Custom CSS class applied directly to the `<input>` or `<textarea>` element (via the internal `Field` component).
+     *
+     * Use this when you need to style the input itself (e.g. text alignment, font, custom focus styles).
+     *
+     * Note: The root container uses `className`.
      */
     inputClassName?: string;
     /**
-     * Callback triggered when the input value changes.
+     * Callback fired when the value changes. Receives the new value as a plain string.
+     *
+     * Preferred for most use cases (simpler than `onChangeEvent`).
+     *
+     * @param value - The current value of the field after change
      */
     onChange?: (value: string) => void;
     /**
-     * Callback triggered with the change event.
+     * Native `onChange` event handler.
+     *
+     * Gives you access to the full `ChangeEvent` object (useful if you need `event.target`, `event.preventDefault()`, etc.).
+     *
+     * Note: Both `onChange` and `onChangeEvent` are called when the value changes.
      */
-    onChangeEvent?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
+    onChangeEvent?: React.ChangeEventHandler<FieldElement>;
     /**
-     * Callback for keypress events.
+     * Keyboard event handlers attached to the inner wrapper `<div>`.
+     *
+     * Useful for handling Enter key submission, arrow key navigation, or custom keyboard shortcuts.
+     *
+     * Note: These are **not** attached to the input/textarea directly, but to the surrounding container.
      */
     onKeyPress?: React.KeyboardEventHandler<HTMLDivElement>;
-    /**
-     * Callback for keydown events.
-     */
     onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
-    /**
-     * Callback for keyup events.
-     */
     onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;
     /**
-     * Initial default value of the input.
+     * Default value for **uncontrolled** usage.
+     *
+     * Use this when you don't want to manage state yourself.
+     * The component will manage its internal state.
      */
     defaultValue?: string;
     /**
-     * Controlled value of the input field.
+     * Controlled value of the text field.
+     *
+     * When provided, the component becomes **fully controlled**.
+     * You must update this value via `onChange` to reflect user input.
      */
     value?: string;
     /**
-     * Callback for clicking the icon.
+     * Called when the user clicks on the icon (only works if `icon` is provided).
+     *
+     * The icon is automatically wrapped in a `<button>` when this prop is present.
+     *
+     * @param event - Mouse event from the icon wrapper
      */
     onIconClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
     /**
-     * Callback for input container clicks.
+     * Click handler for the entire inner container (the area around the input).
+     *
+     * Can be used to focus the input when clicking anywhere in the field area,
+     * or to trigger custom behavior.
      */
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     /**
-     * Whether the input is disabled.
+     * Disables the entire text field.
+     *
+     * When `true`:
+     * - Input becomes non-editable and non-focusable
+     * - Clear button and icon are disabled
+     * - Visual disabled styles are applied
      */
     disabled?: boolean;
     /**
-     * Whether the input is marked as invalid.
+     * Marks the field as invalid and triggers error styling.
+     *
+     * Also affects `aria-invalid` attribute.
+     *
+     * Note: The `helper` prop can override this if it contains items with `type: 'error'`.
      */
     invalid?: boolean;
     /**
-     * Whether the input is read-only.
+     * Makes the field read-only.
+     *
+     * User can focus and select text, but cannot modify the value.
+     * Useful for pre-filled data that should not be changed.
      */
     readOnly?: boolean;
     /**
-     * Helper text or feedback messages.
+     * Helper text, success message, or error message displayed below the field.
+     *
+     * Accepts either:
+     * - A single `FeedbackTextProps` object
+     * - An array of `FeedbackTextProps` (useful for multiple messages or mixed error/success states)
+     *
+     * The component automatically detects error states from helper items.
      */
     helper?: FeedbackTextProps | FeedbackTextProps[];
     /**
-     * Callback for input focus events.
+     * Fired when the input/textarea receives focus.
      */
-    onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onFocus?: React.FocusEventHandler<FieldElement>;
     /**
-     * Callback for input blur events.
+     * Fired when the input/textarea loses focus.
      */
-    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onBlur?: React.FocusEventHandler<FieldElement>;
     /**
-     * Whether to hide arrows for number inputs.
+     * Hides the spinner/arrows for number inputs (`type="number"`).
+     *
+     * Only has effect when the underlying input has `type="number"`.
+     *
      * @default true
      */
     isArrowsHidden?: boolean;
     /**
-     * Callback triggered when the clear button is clicked.
+     * Callback fired when the clear button (×) is clicked.
+     *
+     * Useful if you need to perform additional actions besides clearing the value
+     * (e.g. analytics, resetting related fields, etc.).
+     *
+     * Note: The field value is automatically cleared regardless of this callback.
      */
     onClear?: () => void;
     /**
@@ -118,7 +200,7 @@ export interface TextFieldProps extends BreakpointSupport<TextFieldBreakpointPro
     input?: React.InputHTMLAttributes<HTMLInputElement> | React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 }
 export interface TextFieldForwardRef {
-    input: HTMLInputElement | HTMLTextAreaElement | null;
+    input: FieldElement | null;
     inner: HTMLDivElement | null;
 }
 export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<TextFieldForwardRef>>;