@tedi-design-system/react 18.1.0-rc.9 → 18.1.0

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

@@ -5,29 +5,29 @@ import { FeedbackText as M } from "../feedback-text/feedback-text.es.js";
 import { FormLabel as q } from "../form-label/form-label.es.js";
 import e from "./radio.module.scss.es.js";
 import { Row as v } from "../../layout/grid/row.es.js";
-import { Col as k } from "../../layout/grid/col.es.js";
-const K = (N) => {
+import { Col as N } from "../../layout/grid/col.es.js";
+const K = (C) => {
   const {
     id: o,
     label: m,
     value: h,
-    className: C,
+    className: g,
     disabled: c,
     onChange: a,
-    hideLabel: g,
+    hideLabel: y,
     helper: r,
     checked: t,
-    defaultChecked: y,
-    hover: R,
-    name: x,
+    defaultChecked: R,
+    hover: x,
+    name: j,
     tooltip: p,
     size: f = "default",
-    invalid: j,
-    required: w,
+    invalid: w,
+    required: u,
     ...I
-  } = N, [u, L] = n.useState(y || !1), _ = n.useRef(null), $ = n.useMemo(() => a && typeof t < "u" ? t : u, [a, u, t]), z = (i) => {
+  } = C, [_, L] = n.useState(R || !1), b = n.useRef(null), $ = n.useMemo(() => a && typeof t < "u" ? t : _, [a, _, t]), z = (i) => {
     typeof t > "u" && L(i == null ? void 0 : i.target.checked), a == null || a(h, i == null ? void 0 : i.target.checked);
-  }, b = r ? r.id ?? `${o}-helper` : void 0, B = p ? `${o}-tooltip` : void 0, F = l(e["tedi-radio__label"], { [e["tedi-radio--disabled"]]: c });
+  }, k = r ? r.id ?? `${o}-helper` : void 0, B = p ? `${o}-tooltip` : void 0, F = l(e["tedi-radio__label"], { [e["tedi-radio--disabled"]]: c });
   return /* @__PURE__ */ s(
     "div",
     {
@@ -36,19 +36,20 @@ const K = (N) => {
       ...I,
       children: [
         /* @__PURE__ */ s(v, { gutter: 0, children: [
-          /* @__PURE__ */ d(k, { width: "auto", children: /* @__PURE__ */ s("div", { className: e["tedi-radio__outer-indicator-wrapper"], children: [
+          /* @__PURE__ */ d(N, { width: "auto", children: /* @__PURE__ */ s("div", { className: e["tedi-radio__outer-indicator-wrapper"], children: [
             /* @__PURE__ */ d(
               "input",
               {
                 id: o,
                 value: h,
-                name: x,
+                name: j,
                 type: "radio",
                 disabled: c,
                 checked: $,
                 onChange: z,
                 className: e["tedi-radio__input"],
-                "aria-describedby": [b, B].filter(Boolean).join(" ")
+                "aria-describedby": [k, B].filter(Boolean).join(" "),
+                required: u
               }
             ),
             /* @__PURE__ */ d(
@@ -57,34 +58,34 @@ const K = (N) => {
                 "aria-hidden": "true",
                 onClick: () => {
                   var i;
-                  return (i = _.current) == null ? void 0 : i.click();
+                  return (i = b.current) == null ? void 0 : i.click();
                 },
                 className: l(
                   e["tedi-radio__indicator"],
-                  { [e["tedi-radio__indicator--hover"]]: R },
+                  { [e["tedi-radio__indicator--hover"]]: x },
                   { [e[`tedi-radio__indicator--size-${f}`]]: f },
-                  { [e["tedi-radio__indicator--invalid"]]: j },
-                  C
+                  { [e["tedi-radio__indicator--invalid"]]: w },
+                  g
                 ),
                 "data-testid": "radio-indicator"
               }
             )
           ] }) }),
-          m && /* @__PURE__ */ d(k, { children: /* @__PURE__ */ d(
+          m && /* @__PURE__ */ d(N, { children: /* @__PURE__ */ d(
             q,
             {
-              ref: _,
+              ref: b,
               className: F,
               id: o,
               "data-testid": "radio-label",
-              hideLabel: g,
+              hideLabel: y,
               label: m,
               tooltip: p,
-              required: w
+              required: u
             }
           ) })
         ] }),
-        r && /* @__PURE__ */ d(M, { id: b, ...r, className: l(e["tedi-radio__helper"], r.className) })
+        r && /* @__PURE__ */ d(M, { id: k, ...r, className: l(e["tedi-radio__helper"], r.className) })
       ]
     }
   );

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),i=require("../../../../../external/classnames/index.cjs.js"),v=require("react"),L=require("../../buttons/button/button.cjs.js"),N=require("../textfield/textfield.cjs.js"),s=require("./search.module.scss.cjs.js"),w=require("../../../providers/label-provider/use-labels.cjs.js"),u=v.forwardRef(({placeholder:c,isClearable:d=!0,searchIcon:n="search",onSearch:a,onChange:o,button:e,ariaLabel:f,className:h,input:x,...t},_)=>{const{getLabel:r}=w.useLabels(),b=j=>{j.key==="Enter"&&(a==null||a(t.value))},m=()=>{a==null||a(t.value)},p={...t,ref:_,inputClassName:i.default(s.default["tedi-search__input"],e&&s.default["tedi-search__input--has-button"],h),placeholder:c,isClearable:d,onKeyDown:b,onChange:o,input:{...x,role:"searchbox"},...e?{}:{icon:n}},q=c||r("search"),y=f??q;return l.jsxs("div",{className:i.default(s.default["tedi-search__wrapper"]),role:"search","aria-label":y,children:[l.jsx(N.TextField,{...p}),e&&l.jsx(L.Button,{...e,onClick:m,className:i.default(s.default["tedi-search__button"],e.className),"aria-label":e.children?void 0:r("search"),children:e.children??r("search")})]})});u.displayName="Search";exports.Search=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),t=require("../../../../../external/classnames/index.cjs.js"),v=require("react"),w=require("../../buttons/button/button.cjs.js"),j=require("../textfield/textfield.cjs.js"),a=require("./search.module.scss.cjs.js"),L=require("../../../providers/label-provider/use-labels.cjs.js"),n=v.forwardRef(({placeholder:u,isClearable:o=!0,searchIcon:r="search",onSearch:s,onChange:f,button:e,ariaLabel:h,className:_,input:p,...l},m)=>{const{getLabel:i}=L.useLabels(),b=g=>{g.key==="Enter"&&(s==null||s(l.value))},x=()=>{s==null||s(l.value)},d=typeof r=="string"?{name:r}:r,y={color:"secondary",...d,className:t.default(d.className,l.disabled&&a.default["tedi-search__icon--disabled"])},q={...l,ref:m,inputClassName:t.default(a.default["tedi-search__input"],e&&a.default["tedi-search__input--has-button"],_),placeholder:u,isClearable:o,onKeyDown:b,onChange:f,input:{...p,role:"searchbox"},...e?{}:{icon:y}},N=h||i("search");return c.jsxs("div",{className:t.default(a.default["tedi-search__wrapper"],l.size==="small"&&a.default["tedi-search__wrapper--small"],l.size==="large"&&a.default["tedi-search__wrapper--large"]),role:"search","aria-label":N,children:[c.jsx(j.TextField,{...q}),e&&c.jsx(w.Button,{...e,onClick:x,className:t.default(a.default["tedi-search__button"],!e.children&&a.default["tedi-search__button--icon-only"],e.className),"aria-label":e.children?void 0:i("search"),children:e.children??i("search")})]})});n.displayName="Search";exports.Search=n;

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

@@ -1,54 +1,74 @@
-import { jsxs as w, jsx as c } from "react/jsx-runtime";
-import l from "../../../../../external/classnames/index.es.js";
-import { forwardRef as L } from "react";
-import { Button as b } from "../../buttons/button/button.es.js";
-import { TextField as k } from "../textfield/textfield.es.js";
+import { jsxs as b, jsx as t } from "react/jsx-runtime";
+import i from "../../../../../external/classnames/index.es.js";
+import { forwardRef as g } from "react";
+import { Button as k } from "../../buttons/button/button.es.js";
+import { TextField as B } from "../textfield/textfield.es.js";
 import a from "./search.module.scss.es.js";
 import { useLabels as C } from "../../../providers/label-provider/use-labels.es.js";
-const j = L(
+const L = g(
   ({
-    placeholder: t,
-    isClearable: o = !0,
-    searchIcon: m = "search",
+    placeholder: d,
+    isClearable: m = !0,
+    searchIcon: l = "search",
     onSearch: s,
-    onChange: d,
+    onChange: n,
     button: e,
     ariaLabel: p,
-    className: n,
-    input: f,
+    className: _,
+    input: h,
     ...r
-  }, h) => {
-    const { getLabel: i } = C(), u = (v) => {
+  }, f) => {
+    const { getLabel: c } = C(), y = (v) => {
       v.key === "Enter" && (s == null || s(r.value));
-    }, _ = () => {
+    }, N = () => {
       s == null || s(r.value);
-    }, x = {
+    }, o = typeof l == "string" ? { name: l } : l, u = {
+      color: "secondary",
+      ...o,
+      className: i(o.className, r.disabled && a["tedi-search__icon--disabled"])
+    }, w = {
       ...r,
-      ref: h,
-      inputClassName: l(a["tedi-search__input"], e && a["tedi-search__input--has-button"], n),
-      placeholder: t,
-      isClearable: o,
-      onKeyDown: u,
-      onChange: d,
-      input: { ...f, role: "searchbox" },
-      ...e ? {} : { icon: m }
-    }, N = t || i("search"), y = p ?? N;
-    return /* @__PURE__ */ w("div", { className: l(a["tedi-search__wrapper"]), role: "search", "aria-label": y, children: [
-      /* @__PURE__ */ c(k, { ...x }),
-      e && /* @__PURE__ */ c(
-        b,
-        {
-          ...e,
-          onClick: _,
-          className: l(a["tedi-search__button"], e.className),
-          "aria-label": e.children ? void 0 : i("search"),
-          children: e.children ?? i("search")
-        }
-      )
-    ] });
+      ref: f,
+      inputClassName: i(a["tedi-search__input"], e && a["tedi-search__input--has-button"], _),
+      placeholder: d,
+      isClearable: m,
+      onKeyDown: y,
+      onChange: n,
+      input: { ...h, role: "searchbox" },
+      ...e ? {} : { icon: u }
+    }, x = p || c("search");
+    return /* @__PURE__ */ b(
+      "div",
+      {
+        className: i(
+          a["tedi-search__wrapper"],
+          r.size === "small" && a["tedi-search__wrapper--small"],
+          r.size === "large" && a["tedi-search__wrapper--large"]
+        ),
+        role: "search",
+        "aria-label": x,
+        children: [
+          /* @__PURE__ */ t(B, { ...w }),
+          e && /* @__PURE__ */ t(
+            k,
+            {
+              ...e,
+              onClick: N,
+              className: i(
+                a["tedi-search__button"],
+                !e.children && a["tedi-search__button--icon-only"],
+                e.className
+              ),
+              "aria-label": e.children ? void 0 : c("search"),
+              children: e.children ?? c("search")
+            }
+          )
+        ]
+      }
+    );
   }
 );
-j.displayName = "Search";
+L.displayName = "Search";
 export {
-  j as Search
+  L as Search
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-search__wrapper":"tedi-search__wrapper-92d6f11f","tedi-search__input":"tedi-search__input-94d53b76","tedi-search__input--has-button":"tedi-search__input--has-button-d8e073e7","tedi-search__button":"tedi-search__button-cbb4df17"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-search__wrapper":"tedi-search__wrapper-92d6f11f","tedi-search__input":"tedi-search__input-94d53b76","tedi-search__input--has-button":"tedi-search__input--has-button-d8e073e7","tedi-search__icon--disabled":"tedi-search__icon--disabled-2b492592","tedi-search__button":"tedi-search__button-cbb4df17","tedi-search__wrapper--small":"tedi-search__wrapper--small-7c104c6a","tedi-search__wrapper--large":"tedi-search__wrapper--large-b59e60d7","tedi-search__button--icon-only":"tedi-search__button--icon-only-cf897af5"};exports.default=e;

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

@@ -1,9 +1,13 @@
-const t = {
+const e = {
   "tedi-search__wrapper": "tedi-search__wrapper-92d6f11f",
   "tedi-search__input": "tedi-search__input-94d53b76",
   "tedi-search__input--has-button": "tedi-search__input--has-button-d8e073e7",
-  "tedi-search__button": "tedi-search__button-cbb4df17"
+  "tedi-search__icon--disabled": "tedi-search__icon--disabled-2b492592",
+  "tedi-search__button": "tedi-search__button-cbb4df17",
+  "tedi-search__wrapper--small": "tedi-search__wrapper--small-7c104c6a",
+  "tedi-search__wrapper--large": "tedi-search__wrapper--large-b59e60d7",
+  "tedi-search__button--icon-only": "tedi-search__button--icon-only-cf897af5"
 };
 export {
-  t as default
+  e as default
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("../../../../../../external/classnames/index.cjs.js"),s=require("../select.module.scss.cjs.js"),d=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),u=e=>t.jsx(d.c.Input,{...e,className:i.default(e.className,s.default["tedi-select__input"]),isHidden:e.selectProps.inputIsHidden!==void 0?e.selectProps.inputIsHidden:e.isHidden,"aria-required":e.selectProps.required,required:e.selectProps.required});exports.SelectInput=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("../../../../../../external/classnames/index.cjs.js"),n=require("../select.module.scss.cjs.js"),l=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),u=e=>{var i;const d=e.selectProps["aria-describedby"],s=[...(((i=e["aria-describedby"])==null?void 0:i.split(" "))??[]).filter(t=>t&&!t.endsWith("-placeholder")),d].filter(Boolean).join(" ")||void 0;return r.jsx(l.c.Input,{...e,className:c.default(e.className,n.default["tedi-select__input"]),isHidden:e.selectProps.inputIsHidden!==void 0?e.selectProps.inputIsHidden:e.isHidden,"aria-required":e.selectProps.required,required:e.selectProps.required,"aria-describedby":s,inputMode:e.selectProps.softKeyboardSuppressed?"none":void 0})};exports.SelectInput=u;

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

@@ -1,17 +1,26 @@
-import { jsx as i } from "react/jsx-runtime";
-import s from "../../../../../../external/classnames/index.es.js";
-import t from "../select.module.scss.es.js";
-import { c as r } from "../../../../../../external/react-select/dist/index-641ee5b8.esm.es.js";
-const o = (e) => /* @__PURE__ */ i(
-  r.Input,
-  {
-    ...e,
-    className: s(e.className, t["tedi-select__input"]),
-    isHidden: e.selectProps.inputIsHidden !== void 0 ? e.selectProps.inputIsHidden : e.isHidden,
-    "aria-required": e.selectProps.required,
-    required: e.selectProps.required
-  }
-);
+import { jsx as t } from "react/jsx-runtime";
+import c from "../../../../../../external/classnames/index.es.js";
+import o from "../select.module.scss.es.js";
+import { c as n } from "../../../../../../external/react-select/dist/index-641ee5b8.esm.es.js";
+const b = (e) => {
+  var i;
+  const r = e.selectProps["aria-describedby"], d = [
+    ...(((i = e["aria-describedby"]) == null ? void 0 : i.split(" ")) ?? []).filter((s) => s && !s.endsWith("-placeholder")),
+    r
+  ].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ t(
+    n.Input,
+    {
+      ...e,
+      className: c(e.className, o["tedi-select__input"]),
+      isHidden: e.selectProps.inputIsHidden !== void 0 ? e.selectProps.inputIsHidden : e.isHidden,
+      "aria-required": e.selectProps.required,
+      required: e.selectProps.required,
+      "aria-describedby": d,
+      inputMode: e.selectProps.softKeyboardSuppressed ? "none" : void 0
+    }
+  );
+};
 export {
-  o as SelectInput
+  b as SelectInput
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("../../../buttons/closing-button/closing-button.cjs.js"),n=require("../../../misc/separator/separator.cjs.js"),s=require("../select.module.scss.cjs.js"),u=require("../../../../providers/label-provider/use-labels.cjs.js"),d=({innerProps:l,data:a})=>{const{getLabel:r}=u.useLabels(),o=e=>{l.onClick&&l.onClick(e)},c=e=>{(e.key==="Enter"||e.key===" ")&&o(e)};return t.jsxs(t.Fragment,{children:[t.jsx(i.ClosingButton,{onMouseDown:e=>e.stopPropagation(),onClick:o,onKeyDown:c,className:s.default["tedi-select__multi-value-clear"],iconSize:18,title:`${r("clear")} ${a.label}`}),t.jsx(n.Separator,{color:"primary",axis:"vertical",className:s.default["tedi-select__separator"]})]})};exports.SelectMultiValueRemove=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("../../../buttons/closing-button/closing-button.cjs.js"),c=require("../../../misc/separator/separator.cjs.js"),r=require("../select.module.scss.cjs.js"),u=require("../../../../providers/label-provider/use-labels.cjs.js"),m=({innerProps:o,data:l})=>{const{getLabel:i}=u.useLabels(),s=e=>{o.onClick&&o.onClick(e)},n=e=>{(e.key==="Enter"||e.key===" ")&&s(e)};return t.jsxs(t.Fragment,{children:[t.jsx(a.ClosingButton,{onMouseDown:e=>e.stopPropagation(),onClick:s,onKeyDown:n,className:r.default["tedi-select__multi-value-clear"],iconSize:18,title:`${i("remove")} ${typeof l.label=="string"?l.label:l.value}`}),t.jsx(c.Separator,{color:"primary",axis:"vertical",className:r.default["tedi-select__separator"]})]})};exports.SelectMultiValueRemove=m;

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

@@ -1,14 +1,14 @@
-import { jsxs as s, Fragment as n, jsx as l } from "react/jsx-runtime";
+import { jsxs as a, Fragment as n, jsx as r } from "react/jsx-runtime";
 import { ClosingButton as c } from "../../../buttons/closing-button/closing-button.es.js";
 import { Separator as m } from "../../../misc/separator/separator.es.js";
-import r from "../select.module.scss.es.js";
+import i from "../select.module.scss.es.js";
 import { useLabels as p } from "../../../../providers/label-provider/use-labels.es.js";
-const g = ({ innerProps: o, data: a }) => {
-  const { getLabel: i } = p(), t = (e) => {
-    o.onClick && o.onClick(e);
+const b = ({ innerProps: l, data: o }) => {
+  const { getLabel: s } = p(), t = (e) => {
+    l.onClick && l.onClick(e);
   };
-  return /* @__PURE__ */ s(n, { children: [
-    /* @__PURE__ */ l(
+  return /* @__PURE__ */ a(n, { children: [
+    /* @__PURE__ */ r(
       c,
       {
         onMouseDown: (e) => e.stopPropagation(),
@@ -16,14 +16,14 @@ const g = ({ innerProps: o, data: a }) => {
         onKeyDown: (e) => {
           (e.key === "Enter" || e.key === " ") && t(e);
         },
-        className: r["tedi-select__multi-value-clear"],
+        className: i["tedi-select__multi-value-clear"],
         iconSize: 18,
-        title: `${i("clear")} ${a.label}`
+        title: `${s("remove")} ${typeof o.label == "string" ? o.label : o.value}`
       }
     ),
-    /* @__PURE__ */ l(m, { color: "primary", axis: "vertical", className: r["tedi-select__separator"] })
+    /* @__PURE__ */ r(m, { color: "primary", axis: "vertical", className: i["tedi-select__separator"] })
   ] });
 };
 export {
-  g as SelectMultiValueRemove
+  b as SelectMultiValueRemove
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),g=require("../../../../../../external/classnames/index.cjs.js"),x=require("../../../tags/tag/tag.cjs.js"),S=require("../select.module.scss.cjs.js"),c=require("./select-bulk-helpers.cjs.js"),M=require("./select-tags-context.cjs.js"),d=t=>l=>{if(l.type==="click"&&t.onClick){t.onClick(l);return}if(l.type==="keydown"){const n=l;(n.key==="Enter"||n.key===" ")&&t.onClick&&(n.preventDefault(),n.stopPropagation(),t.onClick(n))}},q=({isTagRemovable:t,tagsEllipsis:l=!1,children:n,removeProps:y,...o})=>{const{isSingleRow:C,visibleCount:a}=M.useSelectTagsContext();if(o.data.value===c.SELECT_ALL_VALUE||c.isGroupSentinel(o.data))return null;const s=o.selectProps.value??[],i=Array.isArray(s)?s.findIndex(e=>e.value===o.data.value):-1,f=C&&a!==null&&i!==-1&&i>=a,u=d(y),k=e=>{e.stopPropagation(),u(e)},p=e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),e.stopPropagation(),u(e))};return f?null:r.jsx("div",{onMouseDown:e=>e.stopPropagation(),"data-tedi-tag-index":i,className:g.default({[S.default["tedi-select__multi-value--ellipsis"]]:l!==!1}),children:r.jsx(x.Tag,{color:"primary",ellipsis:l,onClose:t?k:void 0,closeButtonProps:t?{tabIndex:0,onMouseDown:e=>e.stopPropagation(),onKeyDown:p}:void 0,children:n})})};exports.SelectMultiValue=q;exports.createMultiValueCloseHandler=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),b=require("../../../../../../external/classnames/index.cjs.js"),S=require("../../../tags/tag/tag.cjs.js"),p=require("../select.module.scss.cjs.js"),r=require("./select-bulk-helpers.cjs.js"),q=require("./select-tags-context.cjs.js"),L=require("../../../../providers/label-provider/use-labels.cjs.js"),d=t=>l=>{if(l.type==="click"&&t.onClick){t.onClick(l);return}if(l.type==="keydown"){const n=l;(n.key==="Enter"||n.key===" ")&&t.onClick&&(n.preventDefault(),n.stopPropagation(),t.onClick(n))}},M=({isTagRemovable:t,tagsEllipsis:l=!1,children:n,removeProps:y,...a})=>{const{getLabel:f}=L.useLabels(),{isSingleRow:C,visibleCount:i}=q.useSelectTagsContext();if(a.data.value===r.SELECT_ALL_VALUE||r.isGroupSentinel(a.data))return null;const s=a.selectProps.value??[],o=Array.isArray(s)?s.findIndex(e=>e.value===a.data.value):-1,g=C&&i!==null&&o!==-1&&o>=i,u=d(y),k=e=>{e.stopPropagation(),u(e)},x=e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),e.stopPropagation(),u(e))};return g?null:c.jsx("div",{onMouseDown:e=>e.stopPropagation(),"data-tedi-tag-index":o,className:b.default({[p.default["tedi-select__multi-value--ellipsis"]]:l!==!1}),children:c.jsx(S.Tag,{color:"primary",ellipsis:l,onClose:t?k:void 0,closeButtonProps:t?{tabIndex:0,title:`${f("remove")} ${typeof a.data.label=="string"?a.data.label:a.data.value}`,onMouseDown:e=>e.stopPropagation(),onKeyDown:x}:void 0,children:n})})};exports.SelectMultiValue=M;exports.createMultiValueCloseHandler=d;

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

@@ -1,49 +1,53 @@
 import { jsx as c } from "react/jsx-runtime";
 import C from "../../../../../../external/classnames/index.es.js";
 import { Tag as k } from "../../../tags/tag/tag.es.js";
-import m from "../select.module.scss.es.js";
-import { SELECT_ALL_VALUE as g, isGroupSentinel as x } from "./select-bulk-helpers.es.js";
+import g from "../select.module.scss.es.js";
+import { SELECT_ALL_VALUE as x, isGroupSentinel as b } from "./select-bulk-helpers.es.js";
 import { useSelectTagsContext as w } from "./select-tags-context.es.js";
-const D = (t) => (e) => {
-  if (e.type === "click" && t.onClick) {
-    t.onClick(e);
+import { useLabels as D } from "../../../../providers/label-provider/use-labels.es.js";
+const L = (e) => (o) => {
+  if (o.type === "click" && e.onClick) {
+    e.onClick(o);
     return;
   }
-  if (e.type === "keydown") {
-    const l = e;
-    (l.key === "Enter" || l.key === " ") && t.onClick && (l.preventDefault(), l.stopPropagation(), t.onClick(l));
+  if (o.type === "keydown") {
+    const l = o;
+    (l.key === "Enter" || l.key === " ") && e.onClick && (l.preventDefault(), l.stopPropagation(), e.onClick(l));
   }
-}, P = ({
-  isTagRemovable: t,
-  tagsEllipsis: e = !1,
+}, V = ({
+  isTagRemovable: e,
+  tagsEllipsis: o = !1,
   children: l,
-  removeProps: u,
-  ...n
+  removeProps: d,
+  ...a
 }) => {
-  const { isSingleRow: d, visibleCount: a } = w();
-  if (n.data.value === g || x(n.data))
+  const { getLabel: u } = D(), { isSingleRow: f, visibleCount: i } = w();
+  if (a.data.value === x || b(a.data))
     return null;
-  const s = n.selectProps.value ?? [], i = Array.isArray(s) ? s.findIndex((o) => o.value === n.data.value) : -1, f = d && a !== null && i !== -1 && i >= a, r = D(u), p = (o) => {
-    o.stopPropagation(), r(o);
-  }, y = (o) => {
-    (o.key === "Enter" || o.key === " ") && (o.preventDefault(), o.stopPropagation(), r(o));
+  const s = a.selectProps.value ?? [], n = Array.isArray(s) ? s.findIndex((t) => t.value === a.data.value) : -1, m = f && i !== null && n !== -1 && n >= i, r = L(d), y = (t) => {
+    t.stopPropagation(), r(t);
+  }, p = (t) => {
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), r(t));
   };
-  return f ? null : /* @__PURE__ */ c(
+  return m ? null : /* @__PURE__ */ c(
     "div",
     {
-      onMouseDown: (o) => o.stopPropagation(),
-      "data-tedi-tag-index": i,
-      className: C({ [m["tedi-select__multi-value--ellipsis"]]: e !== !1 }),
+      onMouseDown: (t) => t.stopPropagation(),
+      "data-tedi-tag-index": n,
+      className: C({ [g["tedi-select__multi-value--ellipsis"]]: o !== !1 }),
       children: /* @__PURE__ */ c(
         k,
         {
           color: "primary",
-          ellipsis: e,
-          onClose: t ? p : void 0,
-          closeButtonProps: t ? {
+          ellipsis: o,
+          onClose: e ? y : void 0,
+          closeButtonProps: e ? {
             tabIndex: 0,
-            onMouseDown: (o) => o.stopPropagation(),
-            onKeyDown: y
+            // Name the button "Remove <option>" so screen readers say which
+            // tag is removed, instead of a bare "Close".
+            title: `${u("remove")} ${typeof a.data.label == "string" ? a.data.label : a.data.value}`,
+            onMouseDown: (t) => t.stopPropagation(),
+            onKeyDown: p
           } : void 0,
           children: l
         }
@@ -52,6 +56,6 @@ const D = (t) => (e) => {
   );
 };
 export {
-  P as SelectMultiValue,
-  D as createMultiValueCloseHandler
+  V as SelectMultiValue,
+  L as createMultiValueCloseHandler
 };

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

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

@@ -7,6 +7,8 @@ import { TagEllipsis } from '../../tags/tag/tag';
 declare module '../../../../../node_modules/react-select/dist/declarations/src/Select' {
     interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
         inputIsHidden?: boolean;
+        /** When true, the search input is rendered with `inputMode="none"` so the mobile soft keyboard stays down. */
+        softKeyboardSuppressed?: boolean;
     }
 }
 export interface SelectProps extends Omit<FormLabelProps, 'id' | 'label'> {
@@ -250,6 +252,18 @@ export interface SelectProps extends Omit<FormLabelProps, 'id' | 'label'> {
      * @default true
      */
     isSearchable?: boolean;
+    /**
+     * Touch-only UX for searchable selects. When `false`, tapping the field on a
+     * touch or pen device opens the menu for browsing **without** raising the
+     * on-screen keyboard (the input is marked `inputMode="none"`). The keyboard
+     * appears only once the user explicitly taps the search input — so a
+     * quick-pick dropdown doesn't immediately cover the screen with a keyboard.
+     *
+     * Has no effect for mouse/keyboard users and never blocks hardware-keyboard
+     * typing, so the combobox stays fully operable (WCAG 2.1.1 Keyboard).
+     * @default true
+     */
+    openKeyboardOnTouch?: boolean;
     /**
      * In multi-select mode, render an "×" remove button on each selected tag
      * so the user can deselect single options without re-opening the menu.