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

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

@@ -0,0 +1,116 @@
+import { default as React } from 'react';
+import { BreakpointSupport } from '../../../helpers';
+import { FeedbackTextProps } from '../feedback-text/feedback-text';
+type SliderBreakpointProps = {
+    /**
+     * Text/element rendered to the left of the track (e.g. the minimum value).
+     */
+    minLabel?: React.ReactNode;
+    /**
+     * Text/element rendered to the right of the track (e.g. the maximum value).
+     * Ignored when `showCurrentValue` is `true`.
+     */
+    maxLabel?: React.ReactNode;
+    /**
+     * When `true`, renders the current value to the right of the track instead of `maxLabel`.
+     * @default false
+     */
+    showCurrentValue?: boolean;
+    /**
+     * Formats the current value, used by both the thumb tooltip and the `showCurrentValue` label.
+     * @default (value) => value
+     */
+    valueFormatter?: (value: number) => React.ReactNode;
+    /**
+     * Renders a tooltip above the thumb showing the current value. Shown only while the slider is
+     * hovered, focused, or being dragged. Value is formatted via `valueFormatter`.
+     * @default true
+     */
+    tooltip?: boolean;
+    /**
+     * Node rendered to the right of the slider, typically a NumberField used to edit the same value.
+     */
+    addonRight?: React.ReactNode;
+    /**
+     * Helper text rendered below the slider.
+     */
+    helper?: FeedbackTextProps;
+    /**
+     * Additional class name(s) applied to the root element.
+     */
+    className?: string;
+};
+export interface SliderProps extends BreakpointSupport<SliderBreakpointProps> {
+    /**
+     * Unique identifier for the underlying input element.
+     * Generated automatically if not provided.
+     */
+    id?: string;
+    /**
+     * Name attribute of the underlying input element.
+     */
+    name?: string;
+    /**
+     * Label text rendered above the slider.
+     */
+    label?: React.ReactNode;
+    /**
+     * Controls the visibility of the label. Pass `true` to hide it visually while keeping it
+     * available to assistive technology, or `'keep-space'` to reserve the vertical space.
+     */
+    hideLabel?: boolean | 'keep-space';
+    /**
+     * Marks the field as required.
+     */
+    required?: boolean;
+    /**
+     * Minimum allowed value.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum allowed value.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Step size.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Controlled value. Use together with `onChange`.
+     */
+    value?: number;
+    /**
+     * Default value for uncontrolled usage.
+     * @default min
+     */
+    defaultValue?: number;
+    /**
+     * Callback fired when the value changes.
+     */
+    onChange?: (value: number) => void;
+    /**
+     * Disables the slider.
+     */
+    disabled?: boolean;
+    /**
+     * Marks the slider as invalid for validation purposes.
+     */
+    invalid?: boolean;
+    /**
+     * Accessible label used when no visible `label` is provided.
+     */
+    'aria-label'?: string;
+    /**
+     * ID of an element that labels the slider, used when no visible `label` is provided.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Human-readable text alternative of the current value.
+     */
+    'aria-valuetext'?: string;
+}
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLInputElement>>;
+export default Slider;

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-slider":"tedi-slider-90e24e7d","tedi-slider__container":"tedi-slider__container-525c4b64","tedi-slider__track-row":"tedi-slider__track-row-95e9c2d5","tedi-slider__range-label":"tedi-slider__range-label-a2a6a43b","tedi-slider__track":"tedi-slider__track-a7afc8d6","tedi-slider__thumb-anchor":"tedi-slider__thumb-anchor-7e282370","tedi-slider__input":"tedi-slider__input-b2d1c042","tedi-slider__input--dragging":"tedi-slider__input--dragging-6a2f5f85","tedi-slider__addon":"tedi-slider__addon-6b259d81","tedi-slider__feedback":"tedi-slider__feedback-dad1545e","tedi-slider--disabled":"tedi-slider--disabled-d1da914a","tedi-slider--dragging":"tedi-slider--dragging-c82f4f25","tedi-slider--invalid":"tedi-slider--invalid-e5adda94"};exports.default=e;

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

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

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;