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

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

@@ -1,63 +1,55 @@
-import { jsx as m, jsxs as k, Fragment as E } from "react/jsx-runtime";
-import O from "../../../../../../external/classnames/index.es.js";
-import { Checkbox as P } from "../../checkbox/checkbox.es.js";
-import t from "../select.module.scss.es.js";
-import { SELECT_ALL_VALUE as o, isGroupSentinel as y, getEnabledOptions as G, areAllSelected as h, isIndeterminate as v, GROUP_OPTION_PREFIX as N } from "./select-bulk-helpers.es.js";
-import { c as A } from "../../../../../../external/react-select/dist/index-641ee5b8.esm.es.js";
-const M = ({ renderOption: _, ...e }) => {
-  var f;
-  const c = e.data.value === o, u = y(e.data), g = !!((f = e.data.customData) != null && f.__tediInGroup);
-  let d = e.isSelected, r = !1;
-  if (c) {
-    const l = G(e.options).filter((a) => a.value !== o), i = (e.getValue() ?? []).filter((a) => a.value !== o);
-    d = h(i, l), r = v(i, l);
-  } else if (u) {
-    const l = e.options, b = l.findIndex((s) => s.value === e.data.value), i = [];
-    for (let s = b + 1; s < l.length; s++) {
-      const n = l[s];
-      if (!n || typeof n.value == "string" && (n.value.startsWith(N) || n.value === o))
+import { jsx as m } from "react/jsx-runtime";
+import E from "../../../../../../external/classnames/index.es.js";
+import { OptionContent as h } from "../../../misc/option-content/option-content.es.js";
+import s from "../select.module.scss.es.js";
+import { SELECT_ALL_VALUE as c, isGroupSentinel as P, getEnabledOptions as y, areAllSelected as I, isIndeterminate as v, GROUP_OPTION_PREFIX as G } from "./select-bulk-helpers.es.js";
+import { c as L } from "../../../../../../external/react-select/dist/index-641ee5b8.esm.es.js";
+const V = ({ renderOption: f, ...e }) => {
+  var _;
+  const d = e.data.value === c, r = P(e.data), S = !!((_ = e.data.customData) != null && _.__tediInGroup);
+  let a = e.isSelected, u = !1;
+  if (d) {
+    const t = y(e.options).filter((l) => l.value !== c), i = (e.getValue() ?? []).filter((l) => l.value !== c);
+    a = I(i, t), u = v(i, t);
+  } else if (r) {
+    const t = e.options, b = t.findIndex((o) => o.value === e.data.value), i = [];
+    for (let o = b + 1; o < t.length; o++) {
+      const n = t[o];
+      if (!n || typeof n.value == "string" && (n.value.startsWith(G) || n.value === c))
         break;
       n.isDisabled || i.push(n);
     }
-    const a = e.getValue() ?? [];
-    d = h(a, i), r = v(a, i);
+    const l = e.getValue() ?? [];
+    a = I(l, i), u = v(l, i);
   }
-  const I = O(
-    t["tedi-select__option"],
-    { [t["tedi-select__option--disabled"]]: e.isDisabled },
-    { [t["tedi-select__option--focused"]]: e.isFocused },
-    { [t["tedi-select__option--select-all"]]: c },
-    { [t["tedi-select__option--group"]]: u },
-    { [t["tedi-select__option--indented"]]: g }
-  ), { tabIndex: x, ...S } = e.innerProps;
+  const g = E(
+    s["tedi-select__option"],
+    { [s["tedi-select__option--disabled"]]: e.isDisabled },
+    { [s["tedi-select__option--focused"]]: e.isFocused },
+    { [s["tedi-select__option--select-all"]]: d },
+    { [s["tedi-select__option--group"]]: r },
+    { [s["tedi-select__option--indented"]]: S }
+  ), { tabIndex: O, ...x } = e.innerProps;
   return /* @__PURE__ */ m(
-    A.Option,
+    L.Option,
     {
       ...e,
-      innerProps: { ...S, tabIndex: x, role: "option", "aria-selected": d },
-      className: I,
-      children: _ && !c && !u ? _(e) : /* @__PURE__ */ k(E, { children: [
-        /* @__PURE__ */ m("span", { className: "sr-only", children: e.label }),
-        /* @__PURE__ */ m(
-          P,
-          {
-            id: e.data.value,
-            label: e.label,
-            "aria-hidden": !0,
-            className: t["tedi-select__checkbox"],
-            value: e.data.value,
-            name: e.data.value,
-            checked: d,
-            indeterminate: r,
-            onChange: () => null,
-            disabled: e.isDisabled,
-            hover: e.isFocused
-          }
-        )
-      ] })
+      innerProps: { ...x, tabIndex: O, role: "option", "aria-selected": a },
+      className: g,
+      children: f && !d && !r ? f(e) : /* @__PURE__ */ m(
+        h,
+        {
+          type: "checkbox",
+          indicatorSemantics: "control",
+          selected: a,
+          indeterminate: u,
+          disabled: e.isDisabled,
+          children: /* @__PURE__ */ m(h.Label, { children: e.children })
+        }
+      )
     }
   );
 };
 export {
-  M as SelectMultiOption
+  V as SelectMultiOption
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),p=require("../../../tags/tag/tag.cjs.js"),c=require("./select-bulk-helpers.cjs.js"),f=require("./select-tags-context.cjs.js"),d=t=>o=>{if(o.type==="click"&&t.onClick){t.onClick(o);return}if(o.type==="keydown"){const n=o;(n.key==="Enter"||n.key===" ")&&t.onClick&&(n.preventDefault(),n.stopPropagation(),t.onClick(n))}},x=({isTagRemovable:t,children:o,removeProps:n,...l})=>{const{isSingleRow:y,visibleCount:a}=f.useSelectTagsContext();if(l.data.value===c.SELECT_ALL_VALUE||c.isGroupSentinel(l.data))return null;const s=l.selectProps.value??[],i=Array.isArray(s)?s.findIndex(e=>e.value===l.data.value):-1,C=y&&a!==null&&i!==-1&&i>=a,r=d(n),k=e=>{e.stopPropagation(),r(e)},g=e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),e.stopPropagation(),r(e))};return C?null:u.jsx("div",{onMouseDown:e=>e.stopPropagation(),"data-tedi-tag-index":i,children:u.jsx(p.Tag,{color:"primary",onClose:t?k:void 0,closeButtonProps:t?{tabIndex:0,onMouseDown:e=>e.stopPropagation(),onKeyDown:g}:void 0,children:o})})};exports.SelectMultiValue=x;exports.createMultiValueCloseHandler=d;
+"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;

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

@@ -1,7 +1,9 @@
 import { MultiValueProps } from 'react-select';
+import { TagEllipsis } from '../../../tags/tag/tag';
 import { ISelectOption } from '../select';
 type MultiValueType = MultiValueProps<ISelectOption> & {
     isTagRemovable?: boolean;
+    tagsEllipsis?: TagEllipsis;
 };
 type RemoveProps = MultiValueProps<ISelectOption>['removeProps'];
 /**
@@ -14,5 +16,5 @@ type RemoveProps = MultiValueProps<ISelectOption>['removeProps'];
  * keyboard branch only fires when the handler is reused outside Tag.
  */
 export declare const createMultiValueCloseHandler: (removeProps: RemoveProps) => React.MouseEventHandler<HTMLButtonElement> & React.KeyboardEventHandler<HTMLButtonElement>;
-export declare const SelectMultiValue: ({ isTagRemovable, children, removeProps, ...props }: MultiValueType) => JSX.Element | null;
+export declare const SelectMultiValue: ({ isTagRemovable, tagsEllipsis, children, removeProps, ...props }: MultiValueType) => JSX.Element | null;
 export {};

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

@@ -1,45 +1,57 @@
 import { jsx as c } from "react/jsx-runtime";
-import { Tag as y } from "../../../tags/tag/tag.es.js";
-import { SELECT_ALL_VALUE as C, isGroupSentinel as k } from "./select-bulk-helpers.es.js";
-import { useSelectTagsContext as g } from "./select-tags-context.es.js";
-const x = (t) => (e) => {
+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 { useSelectTagsContext as w } from "./select-tags-context.es.js";
+const D = (t) => (e) => {
   if (e.type === "click" && t.onClick) {
     t.onClick(e);
     return;
   }
   if (e.type === "keydown") {
-    const n = e;
-    (n.key === "Enter" || n.key === " ") && t.onClick && (n.preventDefault(), n.stopPropagation(), t.onClick(n));
+    const l = e;
+    (l.key === "Enter" || l.key === " ") && t.onClick && (l.preventDefault(), l.stopPropagation(), t.onClick(l));
   }
-}, S = ({
+}, P = ({
   isTagRemovable: t,
-  children: e,
-  removeProps: n,
-  ...i
+  tagsEllipsis: e = !1,
+  children: l,
+  removeProps: u,
+  ...n
 }) => {
-  const { isSingleRow: d, visibleCount: a } = g();
-  if (i.data.value === C || k(i.data))
+  const { isSingleRow: d, visibleCount: a } = w();
+  if (n.data.value === g || x(n.data))
     return null;
-  const r = i.selectProps.value ?? [], l = Array.isArray(r) ? r.findIndex((o) => o.value === i.data.value) : -1, u = d && a !== null && l !== -1 && l >= a, s = x(n), p = (o) => {
-    o.stopPropagation(), s(o);
-  }, f = (o) => {
-    (o.key === "Enter" || o.key === " ") && (o.preventDefault(), o.stopPropagation(), s(o));
+  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));
   };
-  return u ? null : /* @__PURE__ */ c("div", { onMouseDown: (o) => o.stopPropagation(), "data-tedi-tag-index": l, children: /* @__PURE__ */ c(
-    y,
+  return f ? null : /* @__PURE__ */ c(
+    "div",
     {
-      color: "primary",
-      onClose: t ? p : void 0,
-      closeButtonProps: t ? {
-        tabIndex: 0,
-        onMouseDown: (o) => o.stopPropagation(),
-        onKeyDown: f
-      } : void 0,
-      children: e
+      onMouseDown: (o) => o.stopPropagation(),
+      "data-tedi-tag-index": i,
+      className: C({ [m["tedi-select__multi-value--ellipsis"]]: e !== !1 }),
+      children: /* @__PURE__ */ c(
+        k,
+        {
+          color: "primary",
+          ellipsis: e,
+          onClose: t ? p : void 0,
+          closeButtonProps: t ? {
+            tabIndex: 0,
+            onMouseDown: (o) => o.stopPropagation(),
+            onKeyDown: y
+          } : void 0,
+          children: l
+        }
+      )
     }
-  ) });
+  );
 };
 export {
-  S as SelectMultiValue,
-  x as createMultiValueCloseHandler
+  P as SelectMultiValue,
+  D as createMultiValueCloseHandler
 };

package/src/tedi/components/form/select/components/select-single-option.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),n=require("../../../../../../external/classnames/index.cjs.js"),c=require("../../radio/radio.cjs.js"),i=require("../select.module.scss.cjs.js"),s=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),u=({showRadioButtons:t,renderOption:a,...e})=>{const d=n.default(i.default["tedi-select__option"],{[i.default["tedi-select__option--disabled"]]:e.isDisabled},{[i.default["tedi-select__option--selected"]]:e.isSelected&&!t},{[i.default["tedi-select__option--focused"]]:e.isFocused});return l.jsx(s.c.Option,{...e,innerProps:{role:"option","aria-selected":e.isSelected,"aria-disabled":e.isDisabled,...e.innerProps},className:d,children:t?l.jsxs(l.Fragment,{children:[l.jsx("span",{className:"sr-only",children:e.label}),l.jsx(c.Radio,{label:e.label,id:e.data.value,name:e.data.value,className:i.default["tedi-select__radio"],value:e.data.value,checked:e.isSelected,disabled:e.isDisabled,onChange:()=>null})]}):a?a(e):e.children})};exports.SelectSingleOption=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),s=require("../../../../../../external/classnames/index.cjs.js"),d=require("../../../misc/option-content/option-content.cjs.js"),t=require("../select.module.scss.cjs.js"),o=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),a=({showRadioButtons:n,renderOption:l,...e})=>{const c=s.default(t.default["tedi-select__option"],{[t.default["tedi-select__option--disabled"]]:e.isDisabled},{[t.default["tedi-select__option--selected"]]:e.isSelected&&!n},{[t.default["tedi-select__option--focused"]]:e.isFocused});return i.jsx(o.c.Option,{...e,innerProps:{role:"option","aria-selected":e.isSelected,"aria-disabled":e.isDisabled,...e.innerProps},className:c,children:n?i.jsx(d.OptionContent,{type:"radio",indicatorSemantics:"control",selected:e.isSelected,disabled:e.isDisabled,children:i.jsx(d.OptionContent.Label,{children:e.children})}):l?l(e):e.children})};exports.SelectSingleOption=a;

package/src/tedi/components/form/select/components/select-single-option.es.js

@@ -1,17 +1,17 @@
-import { jsx as l, jsxs as c, Fragment as s } from "react/jsx-runtime";
-import n from "../../../../../../external/classnames/index.es.js";
-import { Radio as o } from "../../radio/radio.es.js";
+import { jsx as t } from "react/jsx-runtime";
+import o from "../../../../../../external/classnames/index.es.js";
+import { OptionContent as d } from "../../../misc/option-content/option-content.es.js";
 import i from "../select.module.scss.es.js";
-import { c as m } from "../../../../../../external/react-select/dist/index-641ee5b8.esm.es.js";
-const h = ({ showRadioButtons: a, renderOption: t, ...e }) => {
-  const d = n(
+import { c as s } from "../../../../../../external/react-select/dist/index-641ee5b8.esm.es.js";
+const f = ({ showRadioButtons: l, renderOption: c, ...e }) => {
+  const n = o(
     i["tedi-select__option"],
     { [i["tedi-select__option--disabled"]]: e.isDisabled },
-    { [i["tedi-select__option--selected"]]: e.isSelected && !a },
+    { [i["tedi-select__option--selected"]]: e.isSelected && !l },
     { [i["tedi-select__option--focused"]]: e.isFocused }
   );
-  return /* @__PURE__ */ l(
-    m.Option,
+  return /* @__PURE__ */ t(
+    s.Option,
     {
       ...e,
       innerProps: {
@@ -20,26 +20,20 @@ const h = ({ showRadioButtons: a, renderOption: t, ...e }) => {
         "aria-disabled": e.isDisabled,
         ...e.innerProps
       },
-      className: d,
-      children: a ? /* @__PURE__ */ c(s, { children: [
-        /* @__PURE__ */ l("span", { className: "sr-only", children: e.label }),
-        /* @__PURE__ */ l(
-          o,
-          {
-            label: e.label,
-            id: e.data.value,
-            name: e.data.value,
-            className: i["tedi-select__radio"],
-            value: e.data.value,
-            checked: e.isSelected,
-            disabled: e.isDisabled,
-            onChange: () => null
-          }
-        )
-      ] }) : t ? t(e) : e.children
+      className: n,
+      children: l ? /* @__PURE__ */ t(
+        d,
+        {
+          type: "radio",
+          indicatorSemantics: "control",
+          selected: e.isSelected,
+          disabled: e.isDisabled,
+          children: /* @__PURE__ */ t(d.Label, { children: e.children })
+        }
+      ) : c ? c(e) : e.children
     }
   );
 };
 export {
-  h as SelectSingleOption
+  f as SelectSingleOption
 };

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

@@ -1,3 +1,3 @@
-import { StoryFn } from '@storybook/react';
+import { StoryFn } from '@storybook/react-vite';
 import { default as Select } from '../select';
 export declare const AsyncSelectTemplate: StoryFn<typeof Select>;

package/src/tedi/components/form/select/examples/custom-option.d.ts

@@ -1,3 +1,3 @@
-import { StoryFn } from '@storybook/react';
+import { StoryFn } from '@storybook/react-vite';
 import { default as Select } from '../select';
 export declare const CustomOptionSelectTemplate: StoryFn<typeof Select>;

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

@@ -1,3 +1,3 @@
-import { StoryFn } from '@storybook/react';
+import { StoryFn } from '@storybook/react-vite';
 import { default as Select } from '../select';
 export declare const EditableSelectTemplate: StoryFn<typeof Select>;

package/src/tedi/components/form/select/examples/multiple-handled.d.ts

@@ -1,4 +1,4 @@
-import { StoryFn } from '@storybook/react';
+import { StoryFn } from '@storybook/react-vite';
 import { default as Select, ISelectOption } from '../select';
 export declare const colourOptions: ISelectOption[];
 export declare const MultipleHandledTemplate: StoryFn<typeof Select>;

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

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

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

@@ -3,7 +3,8 @@ import { GroupBase, InputActionMeta, MenuListProps, OptionProps, OptionsOrGroups
 import { FeedbackTextProps } from '../../../../tedi/components/form/feedback-text/feedback-text';
 import { FormLabelProps } from '../../../../tedi/components/form/form-label/form-label';
 import { TextProps } from '../../base/typography/text/text';
-declare module 'react-select/dist/declarations/src/Select' {
+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;
     }
@@ -143,6 +144,14 @@ export interface SelectProps extends Omit<FormLabelProps, 'id' | 'label'> {
      * @default 'stack'
      */
     tagsDirection?: 'stack' | 'row';
+    /**
+     * Truncate each selected tag's label when it is width-constrained, revealing
+     * the full text in a popover on hover/focus. `end` shows a trailing ellipsis
+     * (`Long label…`); `start` a leading one (`…label`). `false` never truncates —
+     * long labels wrap. Forwarded to each tag's `ellipsis` prop.
+     * @default false
+     */
+    tagsEllipsis?: TagEllipsis;
     /**
      * Layout for the dropdown menu.
      * - `"menu"` (default): vertical list of options.