@tedi-design-system/react 19.1.2-rc.3 → 19.2.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "19.1.2-rc.3",
+  "version": "19.2.0-rc.1",
   "description": "TEDI Design System React component library — accessible, reusable UI components. Docs & live examples: https://storybook.tedi.ee/react/rc/",
   "type": "module",
   "sideEffects": false,

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),v=require("../../../../../external/classnames/index.cjs.js"),i=require("react"),T=require("../../base/icon/icon.cjs.js"),Z=require("../../buttons/closing-button/closing-button.cjs.js"),ee=require("../../misc/separator/separator.cjs.js"),z=require("../../tags/tag/tag.cjs.js"),te=require("../form-label/form-label.cjs.js"),r=require("./multi-value-field.module.scss.cjs.js"),le=require("../../../providers/label-provider/use-labels.cjs.js"),j=4,ie=44,N=i.forwardRef((F,O)=>{const{id:A,label:w,name:q,values:C,onChange:_,tagColor:y="primary",tagsDirection:P="stack",className:$,icon:o,onIconClick:V,iconButtonProps:m,isClearable:G=!0,required:S,disabled:b}=F,{getLabel:M}=le.useLabels(),[X,B]=i.useState(C??[]),E=i.useRef(null),W=i.useRef(null);i.useImperativeHandle(O,()=>({input:W.current,wrapper:E.current}),[]);const a=C??X,n=P==="row",[f,D]=i.useState(null),H=i.useCallback(e=>D(e),[]),p=i.useRef(0),[d,g]=i.useState(null);i.useEffect(()=>{n&&g(null)},[a.length,n]),i.useEffect(()=>{if(!n||!f||typeof ResizeObserver>"u")return;const e=new ResizeObserver(t=>{var c;const s=((c=t[0])==null?void 0:c.contentRect.width)??0;s>0&&s!==p.current&&g(null)});return e.observe(f),()=>e.disconnect()},[n,f]),i.useLayoutEffect(()=>{if(!n||d!==null)return;const e=f;if(!e)return;const t=e.clientWidth;if(t===0)return;const s=e.querySelectorAll("[data-tedi-tag-index]");if(s.length===0)return;let c=0;for(let u=0;u<s.length;u++)c+=s[u].offsetWidth+(u>0?j:0);if(c<=t){p.current=t,g(s.length);return}let k=0,h=0;for(let u=0;u<s.length;u++){const Q=s[u].offsetWidth,Y=u<s.length-1?ie+j:0,L=k+Q+(h>0?j:0);if(L+Y<=t)k=L,h++;else break}h===0&&(h=1),p.current=t,g(h)},[n,d,a,f]);const I=e=>{B(e),_==null||_(e)},J=e=>{const t=a.filter((s,c)=>c!==e);I(t)},x=!b&&G&&a.length>0,U=()=>{I([])},R=n&&d!==null?Math.max(0,a.length-d):0,K=()=>{if(!o)return null;const e=typeof o=="string"?{name:o}:o;return V?l.jsx("button",{...m,className:v.default(r.default["tedi-multi-value-field__icon-wrapper"],m==null?void 0:m.className),onClick:V,type:"button",children:l.jsx(T.Icon,{...e,size:18})}):l.jsx("div",{className:r.default["tedi-multi-value-field__icon-wrapper"],children:l.jsx(T.Icon,{...e,size:18})})};return l.jsxs("div",{className:v.default(r.default["tedi-multi-value-field"],$),children:[w&&l.jsx(te.FormLabel,{id:A,label:w,required:S}),l.jsxs("div",{ref:E,className:v.default(r.default["tedi-multi-value-field__inner"],{[r.default["tedi-multi-value-field__inner--row"]]:n}),children:[a.length>0&&l.jsxs("div",{ref:H,className:v.default(r.default["tedi-multi-value-field__tags"],{[r.default["tedi-multi-value-field__tags--row"]]:n}),children:[a.map((e,t)=>n&&d!==null&&t>=d?null:l.jsx(z.Tag,{color:y,"data-tedi-tag-index":t,onClose:b?void 0:()=>J(t),children:e},`${e}-${t}`)),R>0&&l.jsxs(z.Tag,{color:y,className:r.default["tedi-multi-value-field__overflow-tag"],"aria-label":M("multi-value-field.hidden-count",R),children:["+",R]})]}),(x||o)&&l.jsxs("div",{className:r.default["tedi-multi-value-field__right-area"],children:[x&&l.jsx(Z.ClosingButton,{onClick:U,title:M("clear"),className:r.default["tedi-multi-value-field__clear-button"],iconSize:18}),x&&o&&l.jsx(ee.Separator,{color:"primary",axis:"vertical",height:1.5,spacing:.25}),o&&K()]})]}),q&&l.jsx("input",{ref:W,type:"hidden",name:q,value:a.length?JSON.stringify(a):"",required:S,disabled:b})]})});N.displayName="MultiValueField";exports.MultiValueField=N;exports.default=N;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),_=require("../../../../../external/classnames/index.cjs.js"),i=require("react"),O=require("../../base/icon/icon.cjs.js"),ee=require("../../buttons/closing-button/closing-button.cjs.js"),te=require("../../misc/separator/separator.cjs.js"),T=require("../../tags/tag/tag.cjs.js"),le=require("../form-label/form-label.cjs.js"),s=require("./multi-value-field.module.scss.cjs.js"),ie=require("../../../providers/label-provider/use-labels.cjs.js"),j=4,ne=44,N=i.forwardRef((z,F)=>{const{id:A,label:w,name:C,values:q,onChange:b,tagColor:y="primary",tagsDirection:P="stack",className:$,icon:o,onIconClick:V,iconButtonProps:m,isClearable:G=!0,showClearOnInteraction:X,required:S,disabled:p}=z,{getLabel:M}=ie.useLabels(),[B,D]=i.useState(q??[]),E=i.useRef(null),I=i.useRef(null);i.useImperativeHandle(F,()=>({input:I.current,wrapper:E.current}),[]);const a=q??B,r=P==="row",[f,H]=i.useState(null),J=i.useCallback(e=>H(e),[]),x=i.useRef(0),[d,g]=i.useState(null);i.useEffect(()=>{r&&g(null)},[a.length,r]),i.useEffect(()=>{if(!r||!f||typeof ResizeObserver>"u")return;const e=new ResizeObserver(t=>{var c;const n=((c=t[0])==null?void 0:c.contentRect.width)??0;n>0&&n!==x.current&&g(null)});return e.observe(f),()=>e.disconnect()},[r,f]),i.useLayoutEffect(()=>{if(!r||d!==null)return;const e=f;if(!e)return;const t=e.clientWidth;if(t===0)return;const n=e.querySelectorAll("[data-tedi-tag-index]");if(n.length===0)return;let c=0;for(let u=0;u<n.length;u++)c+=n[u].offsetWidth+(u>0?j:0);if(c<=t){x.current=t,g(n.length);return}let k=0,h=0;for(let u=0;u<n.length;u++){const Y=n[u].offsetWidth,Z=u<n.length-1?ne+j:0,L=k+Y+(h>0?j:0);if(L+Z<=t)k=L,h++;else break}h===0&&(h=1),x.current=t,g(h)},[r,d,a,f]);const W=e=>{D(e),b==null||b(e)},U=e=>{const t=a.filter((n,c)=>c!==e);W(t)},v=!p&&G&&a.length>0,K=()=>{W([])},R=r&&d!==null?Math.max(0,a.length-d):0,Q=()=>{if(!o)return null;const e=typeof o=="string"?{name:o}:o;return V?l.jsx("button",{...m,className:_.default(s.default["tedi-multi-value-field__icon-wrapper"],m==null?void 0:m.className),onClick:V,type:"button",children:l.jsx(O.Icon,{...e,size:18})}):l.jsx("div",{className:s.default["tedi-multi-value-field__icon-wrapper"],children:l.jsx(O.Icon,{...e,size:18})})};return l.jsxs("div",{className:_.default(s.default["tedi-multi-value-field"],$,{[s.default["tedi-multi-value-field--clear-on-interaction"]]:v&&X}),children:[w&&l.jsx(le.FormLabel,{id:A,label:w,required:S}),l.jsxs("div",{ref:E,className:_.default(s.default["tedi-multi-value-field__inner"],{[s.default["tedi-multi-value-field__inner--row"]]:r}),children:[a.length>0&&l.jsxs("div",{ref:J,className:_.default(s.default["tedi-multi-value-field__tags"],{[s.default["tedi-multi-value-field__tags--row"]]:r}),children:[a.map((e,t)=>r&&d!==null&&t>=d?null:l.jsx(T.Tag,{color:y,"data-tedi-tag-index":t,onClose:p?void 0:()=>U(t),children:e},`${e}-${t}`)),R>0&&l.jsxs(T.Tag,{color:y,className:s.default["tedi-multi-value-field__overflow-tag"],"aria-label":M("multi-value-field.hidden-count",R),children:["+",R]})]}),(v||o)&&l.jsxs("div",{className:s.default["tedi-multi-value-field__right-area"],children:[v&&l.jsx(ee.ClosingButton,{onClick:K,title:M("clear"),className:s.default["tedi-multi-value-field__clear-button"],iconSize:18}),v&&o&&l.jsx(te.Separator,{color:"primary",axis:"vertical",height:1.5,spacing:.25}),o&&Q()]})]}),C&&l.jsx("input",{ref:I,type:"hidden",name:C,value:a.length?JSON.stringify(a):"",required:S,disabled:p})]})});N.displayName="MultiValueField";exports.MultiValueField=N;exports.default=N;

package/src/tedi/components/form/multi-value-field/multi-value-field.d.ts

@@ -63,6 +63,12 @@ export interface MultiValueFieldProps {
      * @default true
      */
     isClearable?: boolean;
+    /**
+     * Show the clear (×) button only while the field is hovered or focused, instead of whenever values
+     * exist. Requires `isClearable`.
+     * @default false
+     */
+    showClearOnInteraction?: boolean;
     /**
      * Marks the field as required.
      * Adds required indicator to label and applies native required validation to the hidden input.

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

@@ -1,162 +1,171 @@
 import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import v from "../../../../../external/classnames/index.es.js";
-import { forwardRef as te, useState as R, useRef as C, useImperativeHandle as le, useCallback as ie, useEffect as T, useLayoutEffect as re } from "react";
+import g from "../../../../../external/classnames/index.es.js";
+import { forwardRef as le, useState as C, useRef as R, useImperativeHandle as ie, useCallback as re, useEffect as T, useLayoutEffect as ne } from "react";
 import { Icon as F } from "../../base/icon/icon.es.js";
-import { ClosingButton as ne } from "../../buttons/closing-button/closing-button.es.js";
-import { Separator as se } from "../../misc/separator/separator.es.js";
+import { ClosingButton as se } from "../../buttons/closing-button/closing-button.es.js";
+import { Separator as ae } from "../../misc/separator/separator.es.js";
 import { Tag as P } from "../../tags/tag/tag.es.js";
-import { FormLabel as ae } from "../form-label/form-label.es.js";
-import r from "./multi-value-field.module.scss.es.js";
-import { useLabels as oe } from "../../../providers/label-provider/use-labels.es.js";
-const y = 4, ue = 44, ce = te((j, q) => {
+import { FormLabel as oe } from "../form-label/form-label.es.js";
+import i from "./multi-value-field.module.scss.es.js";
+import { useLabels as ce } from "../../../providers/label-provider/use-labels.es.js";
+const y = 4, ue = 44, de = le((j, q) => {
   const {
     id: G,
     label: V,
     name: W,
     values: E,
-    onChange: g,
-    tagColor: k = "primary",
+    onChange: _,
+    tagColor: I = "primary",
     tagsDirection: X = "stack",
     className: $,
     icon: o,
-    onIconClick: I,
+    onIconClick: k,
     iconButtonProps: h,
     isClearable: D = !0,
+    showClearOnInteraction: H,
     required: M,
-    disabled: _
-  } = j, { getLabel: S } = oe(), [H, J] = R(E ?? []), x = C(null), z = C(null);
-  le(q, () => ({ input: z.current, wrapper: x.current }), []);
-  const n = E ?? H, i = X === "row", [d, U] = R(null), B = ie((e) => U(e), []), b = C(0), [c, p] = R(null);
+    disabled: b
+  } = j, { getLabel: S } = ce(), [J, U] = C(E ?? []), x = R(null), z = R(null);
+  ie(q, () => ({ input: z.current, wrapper: x.current }), []);
+  const n = E ?? J, r = X === "row", [d, B] = C(null), K = re((e) => B(e), []), N = R(0), [u, p] = C(null);
   T(() => {
-    i && p(null);
-  }, [n.length, i]), T(() => {
-    if (!i || !d || typeof ResizeObserver > "u") return;
+    r && p(null);
+  }, [n.length, r]), T(() => {
+    if (!r || !d || typeof ResizeObserver > "u") return;
     const e = new ResizeObserver((t) => {
-      var u;
-      const l = ((u = t[0]) == null ? void 0 : u.contentRect.width) ?? 0;
-      l > 0 && l !== b.current && p(null);
+      var c;
+      const l = ((c = t[0]) == null ? void 0 : c.contentRect.width) ?? 0;
+      l > 0 && l !== N.current && p(null);
     });
     return e.observe(d), () => e.disconnect();
-  }, [i, d]), re(() => {
-    if (!i || c !== null) return;
+  }, [r, d]), ne(() => {
+    if (!r || u !== null) return;
     const e = d;
     if (!e) return;
     const t = e.clientWidth;
     if (t === 0) return;
     const l = e.querySelectorAll("[data-tedi-tag-index]");
     if (l.length === 0) return;
-    let u = 0;
+    let c = 0;
     for (let s = 0; s < l.length; s++)
-      u += l[s].offsetWidth + (s > 0 ? y : 0);
-    if (u <= t) {
-      b.current = t, p(l.length);
+      c += l[s].offsetWidth + (s > 0 ? y : 0);
+    if (c <= t) {
+      N.current = t, p(l.length);
       return;
     }
-    let L = 0, f = 0;
+    let A = 0, f = 0;
     for (let s = 0; s < l.length; s++) {
-      const Z = l[s].offsetWidth, ee = s < l.length - 1 ? ue + y : 0, O = L + Z + (f > 0 ? y : 0);
-      if (O + ee <= t)
-        L = O, f++;
+      const ee = l[s].offsetWidth, te = s < l.length - 1 ? ue + y : 0, L = A + ee + (f > 0 ? y : 0);
+      if (L + te <= t)
+        A = L, f++;
       else
         break;
     }
-    f === 0 && (f = 1), b.current = t, p(f);
-  }, [i, c, n, d]);
-  const A = (e) => {
-    J(e), g == null || g(e);
-  }, K = (e) => {
-    const t = n.filter((l, u) => u !== e);
-    A(t);
-  }, N = !_ && D && n.length > 0, Q = () => {
-    A([]);
-  }, w = i && c !== null ? Math.max(0, n.length - c) : 0, Y = () => {
+    f === 0 && (f = 1), N.current = t, p(f);
+  }, [r, u, n, d]);
+  const O = (e) => {
+    U(e), _ == null || _(e);
+  }, Q = (e) => {
+    const t = n.filter((l, c) => c !== e);
+    O(t);
+  }, v = !b && D && n.length > 0, Y = () => {
+    O([]);
+  }, w = r && u !== null ? Math.max(0, n.length - u) : 0, Z = () => {
     if (!o) return null;
     const e = typeof o == "string" ? { name: o } : o;
-    return I ? /* @__PURE__ */ a(
+    return k ? /* @__PURE__ */ a(
       "button",
       {
         ...h,
-        className: v(r["tedi-multi-value-field__icon-wrapper"], h == null ? void 0 : h.className),
-        onClick: I,
+        className: g(i["tedi-multi-value-field__icon-wrapper"], h == null ? void 0 : h.className),
+        onClick: k,
         type: "button",
         children: /* @__PURE__ */ a(F, { ...e, size: 18 })
       }
-    ) : /* @__PURE__ */ a("div", { className: r["tedi-multi-value-field__icon-wrapper"], children: /* @__PURE__ */ a(F, { ...e, size: 18 }) });
+    ) : /* @__PURE__ */ a("div", { className: i["tedi-multi-value-field__icon-wrapper"], children: /* @__PURE__ */ a(F, { ...e, size: 18 }) });
   };
-  return /* @__PURE__ */ m("div", { className: v(r["tedi-multi-value-field"], $), children: [
-    V && /* @__PURE__ */ a(ae, { id: G, label: V, required: M }),
-    /* @__PURE__ */ m(
-      "div",
-      {
-        ref: x,
-        className: v(r["tedi-multi-value-field__inner"], {
-          [r["tedi-multi-value-field__inner--row"]]: i
-        }),
-        children: [
-          n.length > 0 && /* @__PURE__ */ m(
-            "div",
-            {
-              ref: B,
-              className: v(r["tedi-multi-value-field__tags"], {
-                [r["tedi-multi-value-field__tags--row"]]: i
-              }),
-              children: [
-                n.map((e, t) => i && c !== null && t >= c ? null : /* @__PURE__ */ a(
-                  P,
-                  {
-                    color: k,
-                    "data-tedi-tag-index": t,
-                    onClose: _ ? void 0 : () => K(t),
-                    children: e
-                  },
-                  `${e}-${t}`
-                )),
-                w > 0 && /* @__PURE__ */ m(
-                  P,
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: g(i["tedi-multi-value-field"], $, {
+        [i["tedi-multi-value-field--clear-on-interaction"]]: v && H
+      }),
+      children: [
+        V && /* @__PURE__ */ a(oe, { id: G, label: V, required: M }),
+        /* @__PURE__ */ m(
+          "div",
+          {
+            ref: x,
+            className: g(i["tedi-multi-value-field__inner"], {
+              [i["tedi-multi-value-field__inner--row"]]: r
+            }),
+            children: [
+              n.length > 0 && /* @__PURE__ */ m(
+                "div",
+                {
+                  ref: K,
+                  className: g(i["tedi-multi-value-field__tags"], {
+                    [i["tedi-multi-value-field__tags--row"]]: r
+                  }),
+                  children: [
+                    n.map((e, t) => r && u !== null && t >= u ? null : /* @__PURE__ */ a(
+                      P,
+                      {
+                        color: I,
+                        "data-tedi-tag-index": t,
+                        onClose: b ? void 0 : () => Q(t),
+                        children: e
+                      },
+                      `${e}-${t}`
+                    )),
+                    w > 0 && /* @__PURE__ */ m(
+                      P,
+                      {
+                        color: I,
+                        className: i["tedi-multi-value-field__overflow-tag"],
+                        "aria-label": S("multi-value-field.hidden-count", w),
+                        children: [
+                          "+",
+                          w
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              (v || o) && /* @__PURE__ */ m("div", { className: i["tedi-multi-value-field__right-area"], children: [
+                v && /* @__PURE__ */ a(
+                  se,
                   {
-                    color: k,
-                    className: r["tedi-multi-value-field__overflow-tag"],
-                    "aria-label": S("multi-value-field.hidden-count", w),
-                    children: [
-                      "+",
-                      w
-                    ]
+                    onClick: Y,
+                    title: S("clear"),
+                    className: i["tedi-multi-value-field__clear-button"],
+                    iconSize: 18
                   }
-                )
-              ]
-            }
-          ),
-          (N || o) && /* @__PURE__ */ m("div", { className: r["tedi-multi-value-field__right-area"], children: [
-            N && /* @__PURE__ */ a(
-              ne,
-              {
-                onClick: Q,
-                title: S("clear"),
-                className: r["tedi-multi-value-field__clear-button"],
-                iconSize: 18
-              }
-            ),
-            N && o && /* @__PURE__ */ a(se, { color: "primary", axis: "vertical", height: 1.5, spacing: 0.25 }),
-            o && Y()
-          ] })
-        ]
-      }
-    ),
-    W && /* @__PURE__ */ a(
-      "input",
-      {
-        ref: z,
-        type: "hidden",
-        name: W,
-        value: n.length ? JSON.stringify(n) : "",
-        required: M,
-        disabled: _
-      }
-    )
-  ] });
+                ),
+                v && o && /* @__PURE__ */ a(ae, { color: "primary", axis: "vertical", height: 1.5, spacing: 0.25 }),
+                o && Z()
+              ] })
+            ]
+          }
+        ),
+        W && /* @__PURE__ */ a(
+          "input",
+          {
+            ref: z,
+            type: "hidden",
+            name: W,
+            value: n.length ? JSON.stringify(n) : "",
+            required: M,
+            disabled: b
+          }
+        )
+      ]
+    }
+  );
 });
-ce.displayName = "MultiValueField";
+de.displayName = "MultiValueField";
 export {
-  ce as MultiValueField,
-  ce as default
+  de as MultiValueField,
+  de as default
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-multi-value-field__inner":"tedi-multi-value-field__inner-d00be7fe","tedi-multi-value-field__inner--row":"tedi-multi-value-field__inner--row-50af96e5","tedi-multi-value-field__tags":"tedi-multi-value-field__tags-4f52450e","tedi-multi-value-field__tags--row":"tedi-multi-value-field__tags--row-fa16b6db","tedi-multi-value-field__overflow-tag":"tedi-multi-value-field__overflow-tag-e6aa972a","tedi-multi-value-field__right-area":"tedi-multi-value-field__right-area-2d533551","tedi-multi-value-field__icon-wrapper":"tedi-multi-value-field__icon-wrapper-d73d0e44"};exports.default=e;
+"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--clear-on-interaction":"tedi-multi-value-field--clear-on-interaction-6c3d0181","tedi-multi-value-field__clear-button":"tedi-multi-value-field__clear-button-1a689cce","tedi-multi-value-field__inner--row":"tedi-multi-value-field__inner--row-50af96e5","tedi-multi-value-field__tags":"tedi-multi-value-field__tags-4f52450e","tedi-multi-value-field__tags--row":"tedi-multi-value-field__tags--row-fa16b6db","tedi-multi-value-field__overflow-tag":"tedi-multi-value-field__overflow-tag-e6aa972a","tedi-multi-value-field__right-area":"tedi-multi-value-field__right-area-2d533551","tedi-multi-value-field__icon-wrapper":"tedi-multi-value-field__icon-wrapper-d73d0e44"};exports.default=e;

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

@@ -1,5 +1,7 @@
 const e = {
   "tedi-multi-value-field__inner": "tedi-multi-value-field__inner-d00be7fe",
+  "tedi-multi-value-field--clear-on-interaction": "tedi-multi-value-field--clear-on-interaction-6c3d0181",
+  "tedi-multi-value-field__clear-button": "tedi-multi-value-field__clear-button-1a689cce",
   "tedi-multi-value-field__inner--row": "tedi-multi-value-field__inner--row-50af96e5",
   "tedi-multi-value-field__tags": "tedi-multi-value-field__tags-4f52450e",
   "tedi-multi-value-field__tags--row": "tedi-multi-value-field__tags--row-fa16b6db",

package/src/tedi/components/form/select/components/select-clear-indicator.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../../buttons/closing-button/closing-button.cjs.js"),a=require("../../../misc/separator/separator.cjs.js"),l=require("../select.module.scss.cjs.js"),c=require("../../../../providers/label-provider/use-labels.cjs.js"),i=({isClearIndicatorVisible:r,innerProps:{ref:t,...s}})=>{const{getLabel:n}=c.useLabels();return r?e.jsxs(e.Fragment,{children:[e.jsx(o.ClosingButton,{tabIndex:0,ref:t,iconSize:18,...s,children:n("clear")}),e.jsx(a.Separator,{color:"primary",axis:"vertical",className:l.default["tedi-select__separator"]})]}):null};exports.SelectClearIndicator=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../../../../../external/classnames/index.cjs.js"),i=require("../../../buttons/closing-button/closing-button.cjs.js"),n=require("../../../misc/separator/separator.cjs.js"),r=require("../select.module.scss.cjs.js"),o=require("../../../../providers/label-provider/use-labels.cjs.js"),u=({isClearIndicatorVisible:a,innerProps:{ref:s,...t}})=>{const{getLabel:l}=o.useLabels();return a?e.jsxs(e.Fragment,{children:[e.jsx(i.ClosingButton,{tabIndex:0,ref:s,iconSize:18,...t,className:c.default(r.default["tedi-select__clear-indicator"],t.className),children:l("clear")}),e.jsx(n.Separator,{color:"primary",axis:"vertical",className:r.default["tedi-select__separator"]})]}):null};exports.SelectClearIndicator=u;

package/src/tedi/components/form/select/components/select-clear-indicator.es.js

@@ -1,16 +1,27 @@
-import { jsxs as i, Fragment as s, jsx as r } from "react/jsx-runtime";
-import { ClosingButton as l } from "../../../buttons/closing-button/closing-button.es.js";
+import { jsxs as i, Fragment as l, jsx as e } from "react/jsx-runtime";
+import c from "../../../../../../external/classnames/index.es.js";
+import { ClosingButton as m } from "../../../buttons/closing-button/closing-button.es.js";
 import { Separator as n } from "../../../misc/separator/separator.es.js";
-import m from "../select.module.scss.es.js";
-import { useLabels as c } from "../../../../providers/label-provider/use-labels.es.js";
+import t from "../select.module.scss.es.js";
+import { useLabels as p } from "../../../../providers/label-provider/use-labels.es.js";
 const b = ({
-  isClearIndicatorVisible: e,
-  innerProps: { ref: o, ...t }
+  isClearIndicatorVisible: a,
+  innerProps: { ref: o, ...r }
 }) => {
-  const { getLabel: a } = c();
-  return e ? /* @__PURE__ */ i(s, { children: [
-    /* @__PURE__ */ r(l, { tabIndex: 0, ref: o, iconSize: 18, ...t, children: a("clear") }),
-    /* @__PURE__ */ r(n, { color: "primary", axis: "vertical", className: m["tedi-select__separator"] })
+  const { getLabel: s } = p();
+  return a ? /* @__PURE__ */ i(l, { children: [
+    /* @__PURE__ */ e(
+      m,
+      {
+        tabIndex: 0,
+        ref: o,
+        iconSize: 18,
+        ...r,
+        className: c(t["tedi-select__clear-indicator"], r.className),
+        children: s("clear")
+      }
+    ),
+    /* @__PURE__ */ e(n, { color: "primary", axis: "vertical", className: t["tedi-select__separator"] })
   ] }) : null;
 };
 export {

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const M=require("react/jsx-runtime"),Q=require("../../../../../external/classnames/index.cjs.js"),a=require("react"),tt=require("../../../../../external/react-select/dist/react-select.esm.cjs.js"),nt=require("../../../../../external/react-select/async/dist/react-select-async.esm.cjs.js"),lt=require("../feedback-text/feedback-text.cjs.js"),ot=require("../form-label/form-label.cjs.js"),T=require("../input-group/input-group.cjs.js"),st=require("../input-group/input-group.module.scss.cjs.js"),i=require("./components/select-bulk-helpers.cjs.js"),at=require("./components/select-clear-indicator.cjs.js"),rt=require("./components/select-control.cjs.js"),it=require("./components/select-dropdown-indicator.cjs.js"),ut=require("./components/select-group.cjs.js"),ct=require("./components/select-group-heading.cjs.js"),dt=require("./components/select-indicators-container.cjs.js"),pt=require("./components/select-input.cjs.js"),ft=require("./components/select-loading-indicator.cjs.js"),St=require("./components/select-menu.cjs.js"),gt=require("./components/select-menu-list.cjs.js"),bt=require("./components/select-menu-portal.cjs.js"),mt=require("./components/select-multi-value.cjs.js"),yt=require("./components/select-multi-value-remove.cjs.js"),Lt=require("./components/select-option.cjs.js"),Mt=require("./components/select-single-value.cjs.js"),vt=require("./components/select-value-container.cjs.js"),p=require("./select.module.scss.cjs.js"),It=require("../../../providers/label-provider/use-labels.cjs.js"),Y=a.forwardRef((k,Z)=>{var J;const{options:c,defaultOptions:ee,name:te,iconName:ne="arrow_drop_down",label:le,required:R,value:x,defaultValue:D,tagsDirection:V="stack",onChange:_,onInputChange:oe,inputValue:se,loadOptions:ae,isLoading:re,openMenuOnFocus:ie=!1,openMenuOnClick:ue=!0,tabSelectsValue:ce=!1,disabled:P=!1,className:de,hideLabel:pe=!1,helper:u,placeholder:fe,invalid:Se,valid:ge,size:q,async:be=!1,renderOption:me,renderMessageListFooter:F,noOptionsMessage:ye,loadingMessage:Le,multiple:v=!1,showSelectAll:G=!1,selectableGroups:N=!1,dropdownType:Me="menu",renderValue:ve,closeMenuOnSelect:Ie=!v,blurInputOnSelect:j=!1,autoFocus:he=!1,isClearable:Ce=!0,isClearIndicatorVisible:Ae=!1,isSearchable:C=!0,openKeyboardOnTouch:H=!0,menuIsOpen:Oe,onMenuClose:Ve,onMenuOpen:_e,onBlur:E,inputIsHidden:qe,isTagRemovable:Ee=!1,tagsEllipsis:we=!1,backspaceRemovesValue:Te=!1,optionGroupHeadingText:ke={modifiers:"small",color:"tertiary"},cacheOptions:Re=!0,showRadioButtons:xe=!1,renderWithoutLabel:De,tooltip:Pe,classNames:U}=k,d=(J=T.useOptionalInputGroup)==null?void 0:J.call(T),Fe=a.useId(),w=d==null?void 0:d.hasExternalLabel,g=k.id??(d==null?void 0:d.inputId)??Fe,Ge=w?(d==null?void 0:d.inputId)??g:`${g}-input`,Ne=w?`${g}-container`:g,K=u?(u==null?void 0:u.id)??`${g}-helper`:void 0,I=a.useRef(null),{getLabel:A}=It.useLabels();a.useImperativeHandle(Z,()=>I.current);const[je,B]=a.useState(!1),He=t=>{var e,n;if(H||!C||t.pointerType!=="touch"&&t.pointerType!=="pen")return;const o=t.target;if(!((e=o.closest)!=null&&e.call(o,`.${p.default["tedi-select__control"]}`)))return;const l=(n=I.current)==null?void 0:n.inputRef,r=!!l&&(t.target===l||l.contains(o));B(!r)},Ue=()=>{B(!1),E==null||E()},m=!!G&&v,[Ke,Be]=a.useState(D??null),$=x!==void 0,b=$?x:Ke,f=a.useMemo(()=>Array.isArray(b)?b:b?[b]:[],[b]),O=a.useMemo(()=>({value:i.SELECT_ALL_VALUE,label:A("select.select-all")}),[A]),y=!!N&&!!v,{groupFlattenedOptions:z,groupSentinelMap:h}=a.useMemo(()=>{const t=new Map;if(!y||!c||c.length===0)return{groupFlattenedOptions:null,groupSentinelMap:t};if(!c.some(e=>e&&Array.isArray(e.options)))return{groupFlattenedOptions:null,groupSentinelMap:t};const l=[],r=new Map;for(const e of c)if(e&&Array.isArray(e.options)){const n=e,s=`${i.GROUP_OPTION_PREFIX}${n.label??""}`,S=n.options.filter(L=>!L.isDisabled);r.set(s,{enabled:S}),l.push({value:s,label:n.label??""});for(const L of n.options)l.push({...L,customData:{...L.customData??{},__tediInGroup:!0}})}else l.push(e);return{groupFlattenedOptions:l,groupSentinelMap:r}},[c,y]),$e=a.useMemo(()=>{let t=z??c;return m&&t&&t.length>0&&(t=[O,...t]),t},[c,z,m,O]),ze=a.useMemo(()=>{const t=[];if(y&&h.size>0)for(const[o,l]of h)l.enabled.length>0&&i.areAllSelected(f,l.enabled)&&t.push({value:o,label:""});if(m){const o=i.getEnabledOptions(c??[]);o.length>0&&i.areAllSelected(f,o)&&t.push(O)}return t.length===0?b:[...f,...t]},[b,f,c,y,h,m,O]),We=(t,o)=>{let l=t;const r=o.option;if(y&&r&&h.has(r.value)){const e=h.get(r.value).enabled;if(o.action==="select-option"){const n=[...f];for(const s of e)n.some(S=>S.value===s.value)||n.push(s);l=n}else o.action==="deselect-option"&&(l=f.filter(n=>!e.some(s=>s.value===n.value)))}else if(m){const e=i.getEnabledOptions(c??[]),n=(r==null?void 0:r.value)===i.SELECT_ALL_VALUE;n&&o.action==="select-option"?l=[...f.filter(S=>S.value!==i.SELECT_ALL_VALUE&&!e.some(L=>L.value===S.value)),...e]:n&&o.action==="deselect-option"&&(l=f.filter(s=>s.value!==i.SELECT_ALL_VALUE&&!e.some(S=>S.value===s.value)))}Array.isArray(l)&&(l=l.filter(e=>e.value!==i.SELECT_ALL_VALUE&&!i.isGroupSentinel(e))),$||Be(l),_==null||_(l),!j&&I.current&&setTimeout(()=>{var e,n;return(n=(e=I.current)==null?void 0:e.inputRef)==null?void 0:n.focus()},0)},Xe=a.useCallback((t,o)=>t.data.value===i.SELECT_ALL_VALUE||i.isGroupSentinel(t.data)||!o?!0:String(t.label).toLowerCase().includes(o.toLowerCase()),[]),[W,X]=a.useState(!1),Je=t=>{(t.key==="ArrowUp"||t.key==="ArrowDown"||t.key==="Home"||t.key==="End"||t.key==="PageUp"||t.key==="PageDown"||t.key==="Tab")&&(W||X(!0))},Qe=a.useCallback(()=>{X(t=>t&&!1)},[]),Ye=a.useCallback(t=>M.jsx(gt.SelectMenuList,{...t,renderMessageListFooter:F}),[F]),Ze=()=>{const t={ClearIndicator:e=>at.SelectClearIndicator({isClearIndicatorVisible:Ae,...e}),DropdownIndicator:()=>it.SelectDropDownIndicator({iconName:ne}),IndicatorSeparator:()=>null,MenuPortal:bt.SelectMenuPortal,Menu:St.SelectMenu,MenuList:Ye,Option:e=>Lt.SelectOption({renderOption:me,multiple:v,showRadioButtons:xe,...e}),Control:rt.SelectControl,Input:pt.SelectInput,MultiValue:e=>mt.SelectMultiValue({isTagRemovable:Ee,tagsEllipsis:we,...e}),MultiValueRemove:yt.SelectMultiValueRemove,SingleValue:Mt.SelectSingleValue,Group:ut.SelectGroup,GroupHeading:e=>ct.SelectGroupHeading({optionGroupHeadingText:ke,...e}),IndicatorsContainer:dt.SelectIndicatorsContainer,ValueContainer:vt.SelectValueContainer,LoadingIndicator:ft.SelectLoadingIndicator},o=be?nt.default:tt.default,l=()=>A("select.no-options"),r=()=>A("select.loading");return M.jsx(o,{tagsDirection:V,showSelectAll:G,selectableGroups:N,dropdownType:Me,renderValue:ve,keyboardMode:W,exitKeyboardMode:Qe,onKeyDown:Je,id:Ne,"aria-describedby":K,autoFocus:he,ref:I,instanceId:g,className:"tedi-select__wrapper",name:te,options:$e,defaultOptions:ee,value:ze,defaultValue:D,cacheOptions:Re,onChange:We,filterOption:m||y?Xe:void 0,onInputChange:oe,onBlur:Ue,softKeyboardSuppressed:!H&&C&&je,inputValue:se,inputId:Ge,loadOptions:ae,isLoading:re,noOptionsMessage:ye||l,loadingMessage:Le||r,classNamePrefix:"select",components:t,isDisabled:P,isSearchable:C,menuIsOpen:Oe,openMenuOnFocus:ie,openMenuOnClick:ue,tabSelectsValue:ce,onMenuClose:Ve,onMenuOpen:_e,placeholder:fe||"",isClearable:Ce,backspaceRemovesValue:Te,menuShouldScrollIntoView:!0,isMulti:v,hideSelectedOptions:!1,closeMenuOnSelect:Ie,blurInputOnSelect:j,menuPlacement:"auto",inputIsHidden:qe,required:R,menuPortalTarget:document.body,menuPosition:"absolute",classNames:(()=>{const e={};if(U)for(const[n,s]of Object.entries(U))e[n]=typeof s=="string"?()=>s:s;if(d){const n=e.control;e.control=s=>Q.default(n==null?void 0:n(s),st.default["tedi-input-group__input"])}return Object.keys(e).length>0?e: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"})}})},et=Q.default(p.default["tedi-select"],de,{[p.default["tedi-select--invalid"]]:Se||(u==null?void 0:u.type)==="error"},{[p.default["tedi-select--valid"]]:ge||(u==null?void 0:u.type)==="valid"},{[p.default[`tedi-select--${q}`]]:q},{[p.default[`tedi-select--tags-${V}`]]:V},{[p.default["tedi-select--searchable"]]:C},{[p.default["tedi-select--disabled"]]:P});return M.jsxs("div",{"data-name":"select",className:et,onPointerDownCapture:He,children:[M.jsxs("div",{className:p.default["tedi-select__inner"],children:[!w&&M.jsx(ot.FormLabel,{id:`${g}-input`,label:le,required:R,hideLabel:pe,size:q,renderWithoutLabel:De,tooltip:Pe}),Ze()]}),u&&M.jsx(lt.FeedbackText,{...u,id:K})]})});Y.displayName="Select";exports.Select=Y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const M=require("react/jsx-runtime"),Y=require("../../../../../external/classnames/index.cjs.js"),a=require("react"),nt=require("../../../../../external/react-select/dist/react-select.esm.cjs.js"),lt=require("../../../../../external/react-select/async/dist/react-select-async.esm.cjs.js"),ot=require("../feedback-text/feedback-text.cjs.js"),st=require("../form-label/form-label.cjs.js"),T=require("../input-group/input-group.cjs.js"),at=require("../input-group/input-group.module.scss.cjs.js"),i=require("./components/select-bulk-helpers.cjs.js"),rt=require("./components/select-clear-indicator.cjs.js"),it=require("./components/select-control.cjs.js"),ct=require("./components/select-dropdown-indicator.cjs.js"),ut=require("./components/select-group.cjs.js"),dt=require("./components/select-group-heading.cjs.js"),pt=require("./components/select-indicators-container.cjs.js"),ft=require("./components/select-input.cjs.js"),St=require("./components/select-loading-indicator.cjs.js"),gt=require("./components/select-menu.cjs.js"),bt=require("./components/select-menu-list.cjs.js"),mt=require("./components/select-menu-portal.cjs.js"),yt=require("./components/select-multi-value.cjs.js"),Lt=require("./components/select-multi-value-remove.cjs.js"),Mt=require("./components/select-option.cjs.js"),vt=require("./components/select-single-value.cjs.js"),It=require("./components/select-value-container.cjs.js"),p=require("./select.module.scss.cjs.js"),ht=require("../../../providers/label-provider/use-labels.cjs.js"),Z=a.forwardRef((k,ee)=>{var Q;const{options:u,defaultOptions:te,name:ne,iconName:le="arrow_drop_down",label:oe,required:R,value:x,defaultValue:D,tagsDirection:V="stack",onChange:_,onInputChange:se,inputValue:ae,loadOptions:re,isLoading:ie,openMenuOnFocus:ce=!1,openMenuOnClick:ue=!0,tabSelectsValue:de=!1,disabled:P=!1,className:pe,hideLabel:fe=!1,helper:c,placeholder:Se,invalid:ge,valid:be,size:q,async:me=!1,renderOption:ye,renderMessageListFooter:F,noOptionsMessage:Le,loadingMessage:Me,multiple:v=!1,showSelectAll:G=!1,selectableGroups:N=!1,dropdownType:ve="menu",renderValue:Ie,closeMenuOnSelect:he=!v,blurInputOnSelect:j=!1,autoFocus:Ce=!1,isClearable:Oe=!0,isClearIndicatorVisible:H=!1,showClearOnInteraction:Ae=!1,isSearchable:C=!0,openKeyboardOnTouch:U=!0,menuIsOpen:Ve,onMenuClose:_e,onMenuOpen:qe,onBlur:E,inputIsHidden:Ee,isTagRemovable:we=!1,tagsEllipsis:Te=!1,backspaceRemovesValue:ke=!1,optionGroupHeadingText:Re={modifiers:"small",color:"tertiary"},cacheOptions:xe=!0,showRadioButtons:De=!1,renderWithoutLabel:Pe,tooltip:Fe,classNames:K}=k,d=(Q=T.useOptionalInputGroup)==null?void 0:Q.call(T),Ge=a.useId(),w=d==null?void 0:d.hasExternalLabel,g=k.id??(d==null?void 0:d.inputId)??Ge,Ne=w?(d==null?void 0:d.inputId)??g:`${g}-input`,je=w?`${g}-container`:g,B=c?(c==null?void 0:c.id)??`${g}-helper`:void 0,I=a.useRef(null),{getLabel:O}=ht.useLabels();a.useImperativeHandle(ee,()=>I.current);const[He,$]=a.useState(!1),Ue=t=>{var e,n;if(U||!C||t.pointerType!=="touch"&&t.pointerType!=="pen")return;const o=t.target;if(!((e=o.closest)!=null&&e.call(o,`.${p.default["tedi-select__control"]}`)))return;const l=(n=I.current)==null?void 0:n.inputRef,r=!!l&&(t.target===l||l.contains(o));$(!r)},Ke=()=>{$(!1),E==null||E()},m=!!G&&v,[Be,$e]=a.useState(D??null),z=x!==void 0,b=z?x:Be,f=a.useMemo(()=>Array.isArray(b)?b:b?[b]:[],[b]),A=a.useMemo(()=>({value:i.SELECT_ALL_VALUE,label:O("select.select-all")}),[O]),y=!!N&&!!v,{groupFlattenedOptions:W,groupSentinelMap:h}=a.useMemo(()=>{const t=new Map;if(!y||!u||u.length===0)return{groupFlattenedOptions:null,groupSentinelMap:t};if(!u.some(e=>e&&Array.isArray(e.options)))return{groupFlattenedOptions:null,groupSentinelMap:t};const l=[],r=new Map;for(const e of u)if(e&&Array.isArray(e.options)){const n=e,s=`${i.GROUP_OPTION_PREFIX}${n.label??""}`,S=n.options.filter(L=>!L.isDisabled);r.set(s,{enabled:S}),l.push({value:s,label:n.label??""});for(const L of n.options)l.push({...L,customData:{...L.customData??{},__tediInGroup:!0}})}else l.push(e);return{groupFlattenedOptions:l,groupSentinelMap:r}},[u,y]),ze=a.useMemo(()=>{let t=W??u;return m&&t&&t.length>0&&(t=[A,...t]),t},[u,W,m,A]),We=a.useMemo(()=>{const t=[];if(y&&h.size>0)for(const[o,l]of h)l.enabled.length>0&&i.areAllSelected(f,l.enabled)&&t.push({value:o,label:""});if(m){const o=i.getEnabledOptions(u??[]);o.length>0&&i.areAllSelected(f,o)&&t.push(A)}return t.length===0?b:[...f,...t]},[b,f,u,y,h,m,A]),Xe=(t,o)=>{let l=t;const r=o.option;if(y&&r&&h.has(r.value)){const e=h.get(r.value).enabled;if(o.action==="select-option"){const n=[...f];for(const s of e)n.some(S=>S.value===s.value)||n.push(s);l=n}else o.action==="deselect-option"&&(l=f.filter(n=>!e.some(s=>s.value===n.value)))}else if(m){const e=i.getEnabledOptions(u??[]),n=(r==null?void 0:r.value)===i.SELECT_ALL_VALUE;n&&o.action==="select-option"?l=[...f.filter(S=>S.value!==i.SELECT_ALL_VALUE&&!e.some(L=>L.value===S.value)),...e]:n&&o.action==="deselect-option"&&(l=f.filter(s=>s.value!==i.SELECT_ALL_VALUE&&!e.some(S=>S.value===s.value)))}Array.isArray(l)&&(l=l.filter(e=>e.value!==i.SELECT_ALL_VALUE&&!i.isGroupSentinel(e))),z||$e(l),_==null||_(l),!j&&I.current&&setTimeout(()=>{var e,n;return(n=(e=I.current)==null?void 0:e.inputRef)==null?void 0:n.focus()},0)},Je=a.useCallback((t,o)=>t.data.value===i.SELECT_ALL_VALUE||i.isGroupSentinel(t.data)||!o?!0:String(t.label).toLowerCase().includes(o.toLowerCase()),[]),[X,J]=a.useState(!1),Qe=t=>{(t.key==="ArrowUp"||t.key==="ArrowDown"||t.key==="Home"||t.key==="End"||t.key==="PageUp"||t.key==="PageDown"||t.key==="Tab")&&(X||J(!0))},Ye=a.useCallback(()=>{J(t=>t&&!1)},[]),Ze=a.useCallback(t=>M.jsx(bt.SelectMenuList,{...t,renderMessageListFooter:F}),[F]),et=()=>{const t={ClearIndicator:e=>rt.SelectClearIndicator({isClearIndicatorVisible:H,...e}),DropdownIndicator:()=>ct.SelectDropDownIndicator({iconName:le}),IndicatorSeparator:()=>null,MenuPortal:mt.SelectMenuPortal,Menu:gt.SelectMenu,MenuList:Ze,Option:e=>Mt.SelectOption({renderOption:ye,multiple:v,showRadioButtons:De,...e}),Control:it.SelectControl,Input:ft.SelectInput,MultiValue:e=>yt.SelectMultiValue({isTagRemovable:we,tagsEllipsis:Te,...e}),MultiValueRemove:Lt.SelectMultiValueRemove,SingleValue:vt.SelectSingleValue,Group:ut.SelectGroup,GroupHeading:e=>dt.SelectGroupHeading({optionGroupHeadingText:Re,...e}),IndicatorsContainer:pt.SelectIndicatorsContainer,ValueContainer:It.SelectValueContainer,LoadingIndicator:St.SelectLoadingIndicator},o=me?lt.default:nt.default,l=()=>O("select.no-options"),r=()=>O("select.loading");return M.jsx(o,{tagsDirection:V,showSelectAll:G,selectableGroups:N,dropdownType:ve,renderValue:Ie,keyboardMode:X,exitKeyboardMode:Ye,onKeyDown:Qe,id:je,"aria-describedby":B,autoFocus:Ce,ref:I,instanceId:g,className:"tedi-select__wrapper",name:ne,options:ze,defaultOptions:te,value:We,defaultValue:D,cacheOptions:xe,onChange:Xe,filterOption:m||y?Je:void 0,onInputChange:se,onBlur:Ke,softKeyboardSuppressed:!U&&C&&He,inputValue:ae,inputId:Ne,loadOptions:re,isLoading:ie,noOptionsMessage:Le||l,loadingMessage:Me||r,classNamePrefix:"select",components:t,isDisabled:P,isSearchable:C,menuIsOpen:Ve,openMenuOnFocus:ce,openMenuOnClick:ue,tabSelectsValue:de,onMenuClose:_e,onMenuOpen:qe,placeholder:Se||"",isClearable:Oe,backspaceRemovesValue:ke,menuShouldScrollIntoView:!0,isMulti:v,hideSelectedOptions:!1,closeMenuOnSelect:he,blurInputOnSelect:j,menuPlacement:"auto",inputIsHidden:Ee,required:R,menuPortalTarget:document.body,menuPosition:"absolute",classNames:(()=>{const e={};if(K)for(const[n,s]of Object.entries(K))e[n]=typeof s=="string"?()=>s:s;if(d){const n=e.control;e.control=s=>Y.default(n==null?void 0:n(s),at.default["tedi-input-group__input"])}return Object.keys(e).length>0?e: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"})}})},tt=Y.default(p.default["tedi-select"],pe,{[p.default["tedi-select--invalid"]]:ge||(c==null?void 0:c.type)==="error"},{[p.default["tedi-select--valid"]]:be||(c==null?void 0:c.type)==="valid"},{[p.default[`tedi-select--${q}`]]:q},{[p.default[`tedi-select--tags-${V}`]]:V},{[p.default["tedi-select--searchable"]]:C},{[p.default["tedi-select--clear-on-interaction"]]:H&&Ae},{[p.default["tedi-select--disabled"]]:P});return M.jsxs("div",{"data-name":"select",className:tt,onPointerDownCapture:Ue,children:[M.jsxs("div",{className:p.default["tedi-select__inner"],children:[!w&&M.jsx(st.FormLabel,{id:`${g}-input`,label:oe,required:R,hideLabel:fe,size:q,renderWithoutLabel:Pe,tooltip:Fe}),et()]}),c&&M.jsx(ot.FeedbackText,{...c,id:B})]})});Z.displayName="Select";exports.Select=Z;

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

@@ -246,6 +246,12 @@ export interface SelectProps extends Omit<FormLabelProps, 'id' | 'label'> {
      * leave this prop unset.
      */
     isClearIndicatorVisible?: boolean;
+    /**
+     * Show the clear (×) button only while the control is hovered or focused, instead of whenever a
+     * value is selected. Requires `isClearIndicatorVisible`.
+     * @default false
+     */
+    showClearOnInteraction?: boolean;
     /**
      * Allow filtering the option list by typing. Set to `false` for a pure
      * dropdown with no search input (e.g. color/icon pickers).