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

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-select__control":"tedi-select__control-dbce8bb7","tedi-select__value-container":"tedi-select__value-container-253d079a","tedi-select__indicators-container":"tedi-select__indicators-container-0fc8fa2a","tedi-select__input":"tedi-select__input-5525b622","tedi-select":"tedi-select-8b014852","tedi-select--disabled":"tedi-select--disabled-2d4b8ddd","tedi-select--invalid":"tedi-select--invalid-3901c89c","tedi-select--valid":"tedi-select--valid-969c0297","tedi-select__control--focused":"tedi-select__control--focused-0e632efe","tedi-select__arrow":"tedi-select__arrow-94b5ef4a","tedi-select__loading-indicator":"tedi-select__loading-indicator-a35a63ca","tedi-select__dropdown-indicator":"tedi-select__dropdown-indicator-5a948baa","tedi-select__clear-indicator":"tedi-select__clear-indicator-68b60b12","tedi-select__menu-portal":"tedi-select__menu-portal-d5349f37","tedi-select__menu":"tedi-select__menu-bf54b75b","tedi-select__menu-list--grid":"tedi-select__menu-list--grid-393f3232","tedi-select__menu-list":"tedi-select__menu-list-0aa06e24","tedi-select__menu-list-inner":"tedi-select__menu-list-inner-471e5cf8","tedi-select__menu-list-footer":"tedi-select__menu-list-footer-eb1d3bbc","tedi-select__option":"tedi-select__option-6f811381","tedi-select__option--disabled":"tedi-select__option--disabled-d3aff112","tedi-select__option--selected":"tedi-select__option--selected-a93e5fb0","tedi-select__option--focused":"tedi-select__option--focused-1d972ff1","tedi-select__option--control":"tedi-select__option--control-f69f3f48","tedi-select--small":"tedi-select--small-2659608b","tedi-select__multi-value-item":"tedi-select__multi-value-item-b8ec59ae","tedi-select__multi-value--ellipsis":"tedi-select__multi-value--ellipsis-1d821ed7","tedi-select__group":"tedi-select__group-b275e954","tedi-select__group-heading":"tedi-select__group-heading-02b3d9bc","tedi-select__group-heading--selectable":"tedi-select__group-heading--selectable-c84cd617","tedi-select__option--indented":"tedi-select__option--indented-bf4a1661","tedi-select__multi-value-clear":"tedi-select__multi-value-clear-d231f7de","tedi-select--tags-row":"tedi-select--tags-row-c9f33e4b","tedi-select__overflow-tag":"tedi-select__overflow-tag-c0391df2","tedi-select__menu-list--keyboard":"tedi-select__menu-list--keyboard-3d066942","tedi-select__select-all":"tedi-select__select-all-12c3e7f1","tedi-select__group-heading-toggle":"tedi-select__group-heading-toggle-34296a63","tedi-select--tags-stack":"tedi-select--tags-stack-ddb929a9","tedi-select__separator":"tedi-select__separator-b1045f3f","tedi-select--searchable":"tedi-select--searchable-d56eb325"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-select__control":"tedi-select__control-dbce8bb7","tedi-select__value-container":"tedi-select__value-container-253d079a","tedi-select__indicators-container":"tedi-select__indicators-container-0fc8fa2a","tedi-select__input":"tedi-select__input-5525b622","tedi-select":"tedi-select-8b014852","tedi-select--disabled":"tedi-select--disabled-2d4b8ddd","tedi-select--invalid":"tedi-select--invalid-3901c89c","tedi-select--valid":"tedi-select--valid-969c0297","tedi-select__control--focused":"tedi-select__control--focused-0e632efe","tedi-select__arrow":"tedi-select__arrow-94b5ef4a","tedi-select__loading-indicator":"tedi-select__loading-indicator-a35a63ca","tedi-select__dropdown-indicator":"tedi-select__dropdown-indicator-5a948baa","tedi-select__clear-indicator":"tedi-select__clear-indicator-68b60b12","tedi-select--clear-on-interaction":"tedi-select--clear-on-interaction-6a390ada","tedi-select__separator":"tedi-select__separator-b1045f3f","tedi-select__menu-portal":"tedi-select__menu-portal-d5349f37","tedi-select__menu":"tedi-select__menu-bf54b75b","tedi-select__menu-list--grid":"tedi-select__menu-list--grid-393f3232","tedi-select__menu-list":"tedi-select__menu-list-0aa06e24","tedi-select__menu-list-inner":"tedi-select__menu-list-inner-471e5cf8","tedi-select__menu-list-footer":"tedi-select__menu-list-footer-eb1d3bbc","tedi-select__option":"tedi-select__option-6f811381","tedi-select__option--disabled":"tedi-select__option--disabled-d3aff112","tedi-select__option--selected":"tedi-select__option--selected-a93e5fb0","tedi-select__option--focused":"tedi-select__option--focused-1d972ff1","tedi-select__option--control":"tedi-select__option--control-f69f3f48","tedi-select--small":"tedi-select--small-2659608b","tedi-select__multi-value-item":"tedi-select__multi-value-item-b8ec59ae","tedi-select__multi-value--ellipsis":"tedi-select__multi-value--ellipsis-1d821ed7","tedi-select__group":"tedi-select__group-b275e954","tedi-select__group-heading":"tedi-select__group-heading-02b3d9bc","tedi-select__group-heading--selectable":"tedi-select__group-heading--selectable-c84cd617","tedi-select__option--indented":"tedi-select__option--indented-bf4a1661","tedi-select__multi-value-clear":"tedi-select__multi-value-clear-d231f7de","tedi-select--tags-row":"tedi-select--tags-row-c9f33e4b","tedi-select__overflow-tag":"tedi-select__overflow-tag-c0391df2","tedi-select__menu-list--keyboard":"tedi-select__menu-list--keyboard-3d066942","tedi-select__select-all":"tedi-select__select-all-12c3e7f1","tedi-select__group-heading-toggle":"tedi-select__group-heading-toggle-34296a63","tedi-select--tags-stack":"tedi-select--tags-stack-ddb929a9","tedi-select--searchable":"tedi-select--searchable-d56eb325"};exports.default=e;

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

@@ -12,6 +12,8 @@ const e = {
   "tedi-select__loading-indicator": "tedi-select__loading-indicator-a35a63ca",
   "tedi-select__dropdown-indicator": "tedi-select__dropdown-indicator-5a948baa",
   "tedi-select__clear-indicator": "tedi-select__clear-indicator-68b60b12",
+  "tedi-select--clear-on-interaction": "tedi-select--clear-on-interaction-6a390ada",
+  "tedi-select__separator": "tedi-select__separator-b1045f3f",
   "tedi-select__menu-portal": "tedi-select__menu-portal-d5349f37",
   "tedi-select__menu": "tedi-select__menu-bf54b75b",
   "tedi-select__menu-list--grid": "tedi-select__menu-list--grid-393f3232",
@@ -37,7 +39,6 @@ const e = {
   "tedi-select__select-all": "tedi-select__select-all-12c3e7f1",
   "tedi-select__group-heading-toggle": "tedi-select__group-heading-toggle-34296a63",
   "tedi-select--tags-stack": "tedi-select--tags-stack-ddb929a9",
-  "tedi-select__separator": "tedi-select__separator-b1045f3f",
   "tedi-select--searchable": "tedi-select--searchable-d56eb325"
 };
 export {

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

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { TextFieldForwardRef, TextFieldProps } from '../textfield/textfield';
-export interface TextareaProps extends Omit<TextFieldProps, 'icon' | 'isClearable' | 'onClear'> {
+export interface TextareaProps extends Omit<TextFieldProps, 'icon' | 'isClearable' | 'showClearOnInteraction' | 'onClear'> {
     /**
      * Maximum number of characters allowed in the textarea.
      */

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

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

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

@@ -50,6 +50,12 @@ type TextFieldBreakpointProps = {
      * @default false
      */
     isClearable?: boolean;
+    /**
+     * Show the clear (×) button only while the field is hovered or focused, instead of whenever it has
+     * a value. Requires `isClearable`.
+     * @default false
+     */
+    showClearOnInteraction?: boolean;
     /**
      * Additional CSS class name applied to the root container (`<div>`).
      *