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

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.