@tedi-design-system/react 18.1.0-rc.22 → 18.1.0-rc.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "18.1.0-rc.22",
+  "version": "18.1.0-rc.23",
   "type": "module",
   "sideEffects": false,
   "exports": {
@@ -25,6 +25,8 @@
     "lint:ci": "npx stylelint \"src/**/*.scss\" --quiet && npx eslint . --quiet",
     "test": "jest --config ./jest.config.ts --passWithNoTests",
     "test:coverage": "jest --config ./jest.config.ts --coverage",
+    "test-storybook": "test-storybook",
+    "test-storybook:ci": "concurrently -k -s first -n \"SB,A11Y\" -c \"magenta,blue\" \"http-server dist/storybook-static --port 6006 --silent\" \"wait-on tcp:127.0.0.1:6006 && test-storybook --index-json --url http://127.0.0.1:6006 --junit\"",
     "release": "npx semantic-release",
     "chromatic": "npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN"
   },
@@ -64,7 +66,6 @@
     "react-dom": "18.3.1 || ^19.0.0"
   },
   "devDependencies": {
-    "@etchteam/storybook-addon-status": "^8.1.0",
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
@@ -74,6 +75,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@etchteam/storybook-addon-status": "^8.1.0",
     "@faker-js/faker": "^10.3.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^13.0.1",
@@ -85,6 +87,7 @@
     "@storybook/builder-vite": "^10.4.6",
     "@storybook/react": "^10.4.6",
     "@storybook/react-vite": "^10.4.6",
+    "@storybook/test-runner": "^0.24.4",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "15.0.6",
@@ -102,7 +105,8 @@
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.3.4",
     "chromatic": "^13.3.4",
-    "dompurify": "^3.3.0",
+    "concurrently": "^10.0.3",
+    "dompurify": "^3.4.12",
     "eslint": "8.48.0",
     "eslint-config-next": "^13.4.6",
     "eslint-config-prettier": "10.1.8",
@@ -111,9 +115,10 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-simple-import-sort": "^14.0.0",
     "eslint-plugin-storybook": "^10.4.6",
     "eslint-plugin-unused-imports": "^4.1.4",
+    "http-server": "^14.1.1",
     "husky": "^9.0.11",
     "identity-obj-proxy": "^3.0.0",
     "jest": "29.7.0",
@@ -130,7 +135,7 @@
     "sass": "^1.83.1",
     "semantic-release": "^25.0.3",
     "showdown": "^2.1.0",
-    "storybook": "^10.4.6",
+    "storybook": "^10.5.5",
     "storybook-addon-pseudo-states": "^10.4.6",
     "stylelint": "^16.13.2",
     "stylelint-config-recess-order": "^7.7.0",
@@ -143,7 +148,8 @@
     "vite": "^5.4.11",
     "vite-plugin-checker": "^0.6.4",
     "vite-plugin-dts": "4.5.4",
-    "vite-plugin-static-copy": "^2.2.0"
+    "vite-plugin-static-copy": "^2.2.0",
+    "wait-on": "^9.0.10"
   },
   "commitlint": {
     "extends": "@commitlint/config-conventional",

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.