@tedi-design-system/react 17.0.0 → 17.1.0-rc.10

package/src/tedi/components/form/select/components/select-group-bulk-context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext(null),u=()=>e.useContext(t);exports.SelectGroupBulkContext=t;exports.useSelectGroupBulkApi=u;

package/src/tedi/components/form/select/components/select-group-bulk-context.d.ts

@@ -0,0 +1,18 @@
+import { SetValueAction } from 'react-select';
+import { ISelectOption } from '../select';
+/**
+ * Exposes react-select's `getValue` / `setValue` helpers from the `Group`
+ * component down to `GroupHeading`. react-select only forwards `selectProps`
+ * + theme/styles to the heading at runtime, so the heading can't read these
+ * helpers from its own props — it has to grab them from this context.
+ *
+ * Using `selectProps.value` / `selectProps.onChange` instead would only work
+ * in fully controlled mode: in uncontrolled mode `value` is undefined and
+ * `onChange` bypasses react-select's internal state.
+ */
+export interface SelectGroupBulkApi {
+    getValue: () => ReadonlyArray<ISelectOption>;
+    setValue: (value: ReadonlyArray<ISelectOption>, action: SetValueAction) => void;
+}
+export declare const SelectGroupBulkContext: import('react').Context<SelectGroupBulkApi | null>;
+export declare const useSelectGroupBulkApi: () => SelectGroupBulkApi | null;

package/src/tedi/components/form/select/components/select-group-bulk-context.es.js

@@ -0,0 +1,6 @@
+import { useContext as t, createContext as e } from "react";
+const o = e(null), l = () => t(o);
+export {
+  o as SelectGroupBulkContext,
+  l as useSelectGroupBulkApi
+};

package/src/tedi/components/form/select/components/select-group-heading.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"),c=require("../../../base/typography/text/text.cjs.js"),u=require("../select.module.scss.cjs.js"),d=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),s=({optionGroupHeadingText:n,...e})=>{const r=e.data.text||n;return t.jsx(d.c.GroupHeading,{...e,className:i.default(u.default["tedi-select__group-heading"]),children:t.jsx(c.Text,{...r,children:e.data.label})})};exports.SelectGroupHeading=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),S=require("../../../../../../external/classnames/index.cjs.js"),q=require("react"),u=require("../../../base/typography/text/text.cjs.js"),G=require("../../checkbox/checkbox.cjs.js"),i=require("../select.module.scss.cjs.js"),s=require("./select-bulk-helpers.cjs.js"),f=require("./select-group-bulk-context.cjs.js"),j=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),g=({optionGroupHeadingText:x,...e})=>{const _=q.useId(),d=e.data.text||x,{selectableGroups:h,isMulti:b}=e.selectProps,t=f.useSelectGroupBulkApi(),l=!!b&&!!h&&!!t,c=l?s.getGroupEnabledOptions(e.data):[],o=(t==null?void 0:t.getValue())??[],r=l&&s.areAllSelected(o,c),p=l&&s.isIndeterminate(o,c),m=()=>{if(!l||!t||c.length===0)return;const a=s.toggleBulkSelection(o,c);t.setValue(a,r?"deselect-option":"select-option")};return n.jsx(j.c.GroupHeading,{...e,className:S.default(i.default["tedi-select__group-heading"],{[i.default["tedi-select__group-heading--selectable"]]:l}),children:l?n.jsx("div",{className:i.default["tedi-select__group-heading-toggle"],onMouseDown:a=>a.preventDefault(),children:n.jsx(G.Checkbox,{id:`${e.selectProps.instanceId??"tedi-select"}-group-${_}`,name:"tedi-select__group-toggle",value:`__group_${e.data.label}__`,label:n.jsx(u.Text,{...d,children:e.data.label}),checked:r,indeterminate:p,onChange:m})}):n.jsx(u.Text,{...d,children:e.data.label})})};g.displayName="SelectGroupHeading";exports.SelectGroupHeading=g;

package/src/tedi/components/form/select/components/select-group-heading.d.ts

@@ -5,5 +5,8 @@ import { IGroupedOptions, ISelectOption } from '../select';
 type GroupHeadingType = GroupHeadingProps<ISelectOption, boolean, IGroupedOptions<ISelectOption>> & {
     optionGroupHeadingText?: Pick<TextProps, 'modifiers' | 'color'>;
 };
-export declare const SelectGroupHeading: ({ optionGroupHeadingText, ...props }: GroupHeadingType) => ReactElement;
+export declare const SelectGroupHeading: {
+    ({ optionGroupHeadingText, ...props }: GroupHeadingType): ReactElement;
+    displayName: string;
+};
 export {};

package/src/tedi/components/form/select/components/select-group-heading.es.js

@@ -1,12 +1,47 @@
-import { jsx as e } from "react/jsx-runtime";
-import a from "../../../../../../external/classnames/index.es.js";
-import { Text as m } from "../../../base/typography/text/text.es.js";
+import { jsx as l } from "react/jsx-runtime";
+import f from "../../../../../../external/classnames/index.es.js";
+import { useId as b } from "react";
+import { Text as d } from "../../../base/typography/text/text.es.js";
+import { Checkbox as x } from "../../checkbox/checkbox.es.js";
 import i from "../select.module.scss.es.js";
-import { c as s } from "../../../../../../external/react-select/dist/index-641ee5b8.esm.es.js";
-const f = ({ optionGroupHeadingText: o, ...t }) => {
-  const r = t.data.text || o;
-  return /* @__PURE__ */ e(s.GroupHeading, { ...t, className: a(i["tedi-select__group-heading"]), children: /* @__PURE__ */ e(m, { ...r, children: t.data.label }) });
+import { getGroupEnabledOptions as S, areAllSelected as G, isIndeterminate as v, toggleBulkSelection as H } from "./select-bulk-helpers.es.js";
+import { useSelectGroupBulkApi as I } from "./select-group-bulk-context.es.js";
+import { c as N } from "../../../../../../external/react-select/dist/index-641ee5b8.esm.es.js";
+const k = ({ optionGroupHeadingText: g, ...e }) => {
+  const m = b(), s = e.data.text || g, { selectableGroups: u, isMulti: p } = e.selectProps, t = I(), o = !!p && !!u && !!t, n = o ? S(e.data) : [], a = (t == null ? void 0 : t.getValue()) ?? [], r = o && G(a, n), _ = o && v(a, n), h = () => {
+    if (!o || !t || n.length === 0) return;
+    const c = H(a, n);
+    t.setValue(c, r ? "deselect-option" : "select-option");
+  };
+  return /* @__PURE__ */ l(
+    N.GroupHeading,
+    {
+      ...e,
+      className: f(i["tedi-select__group-heading"], {
+        [i["tedi-select__group-heading--selectable"]]: o
+      }),
+      children: o ? (
+        // The Checkbox owns the toggle path through its own `onChange`;
+        // attaching another handler to the wrapper would fire `handleToggle`
+        // twice on a single user click. The wrapper stays only to swallow the
+        // mousedown that would otherwise close react-select's menu.
+        /* @__PURE__ */ l("div", { className: i["tedi-select__group-heading-toggle"], onMouseDown: (c) => c.preventDefault(), children: /* @__PURE__ */ l(
+          x,
+          {
+            id: `${e.selectProps.instanceId ?? "tedi-select"}-group-${m}`,
+            name: "tedi-select__group-toggle",
+            value: `__group_${e.data.label}__`,
+            label: /* @__PURE__ */ l(d, { ...s, children: e.data.label }),
+            checked: r,
+            indeterminate: _,
+            onChange: h
+          }
+        ) })
+      ) : /* @__PURE__ */ l(d, { ...s, children: e.data.label })
+    }
+  );
 };
+k.displayName = "SelectGroupHeading";
 export {
-  f as SelectGroupHeading
+  k as SelectGroupHeading
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("../../../../../../external/classnames/index.cjs.js"),u=require("../select.module.scss.cjs.js"),c=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),i=e=>t.jsx(c.c.Group,{...e,className:r.default(u.default["tedi-select__group"]),children:e.children});exports.SelectGroup=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("../../../../../../external/classnames/index.cjs.js"),i=require("react"),n=require("../select.module.scss.cjs.js"),s=require("./select-group-bulk-context.cjs.js"),a=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),u=e=>{const l=i.useMemo(()=>({getValue:()=>e.getValue(),setValue:(r,c)=>e.setValue(r,c)}),[e]);return t.jsx(s.SelectGroupBulkContext.Provider,{value:l,children:t.jsx(a.c.Group,{...e,className:o.default(n.default["tedi-select__group"]),children:e.children})})};u.displayName="SelectGroup";exports.SelectGroup=u;

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

@@ -1,3 +1,6 @@
 import { GroupProps } from 'react-select';
 import { IGroupedOptions, ISelectOption } from '../select';
-export declare const SelectGroup: (props: GroupProps<ISelectOption, boolean, IGroupedOptions<ISelectOption>>) => JSX.Element;
+export declare const SelectGroup: {
+    (props: GroupProps<ISelectOption, boolean, IGroupedOptions<ISelectOption>>): JSX.Element;
+    displayName: string;
+};

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

@@ -1,8 +1,20 @@
-import { jsx as o } from "react/jsx-runtime";
-import e from "../../../../../../external/classnames/index.es.js";
-import t from "../select.module.scss.es.js";
-import { c as m } from "../../../../../../external/react-select/dist/index-641ee5b8.esm.es.js";
-const p = (r) => /* @__PURE__ */ o(m.Group, { ...r, className: e(t["tedi-select__group"]), children: r.children });
+import { jsx as t } from "react/jsx-runtime";
+import m from "../../../../../../external/classnames/index.es.js";
+import { useMemo as u } from "react";
+import c from "../select.module.scss.es.js";
+import { SelectGroupBulkContext as i } from "./select-group-bulk-context.es.js";
+import { c as s } from "../../../../../../external/react-select/dist/index-641ee5b8.esm.es.js";
+const a = (e) => {
+  const o = u(
+    () => ({
+      getValue: () => e.getValue(),
+      setValue: (r, l) => e.setValue(r, l)
+    }),
+    [e]
+  );
+  return /* @__PURE__ */ t(i.Provider, { value: o, children: /* @__PURE__ */ t(s.Group, { ...e, className: m(c["tedi-select__group"]), children: e.children }) });
+};
+a.displayName = "SelectGroup";
 export {
-  p as SelectGroup
+  a as SelectGroup
 };

package/src/tedi/components/form/select/components/select-menu-list.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"),l=require("../select.module.scss.cjs.js"),c=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),n=({renderMessageListFooter:s,...e})=>t.jsxs("div",{className:l.default["tedi-select__menu-list-wrapper"],children:[t.jsx(c.c.MenuList,{...e,className:i.default(e.className,l.default["tedi-select__menu-list"]),children:e.children}),s&&t.jsx("div",{className:l.default["tedi-select__menu-list-footer"],children:s(e)})]});exports.SelectMenuList=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),u=require("../../../../../../external/classnames/index.cjs.js"),t=require("../select.module.scss.cjs.js"),a=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),d=({renderMessageListFooter:l,...e})=>{const{keyboardMode:s,exitKeyboardMode:c,dropdownType:n}=e.selectProps;return i.jsxs("div",{className:t.default["tedi-select__menu-list-wrapper"],onMouseMove:s?c:void 0,children:[i.jsx(a.c.MenuList,{...e,className:u.default(e.className,t.default["tedi-select__menu-list"],{[t.default["tedi-select__menu-list--keyboard"]]:s,[t.default["tedi-select__menu-list--grid"]]:n==="grid"}),children:e.children}),l&&i.jsx("div",{className:t.default["tedi-select__menu-list-footer"],children:l(e)})]})};d.displayName="SelectMenuList";exports.SelectMenuList=d;

package/src/tedi/components/form/select/components/select-menu-list.d.ts

@@ -1,7 +1,15 @@
 import { MenuListProps } from 'react-select';
 import { ISelectOption } from '../select';
 type MenuListType = MenuListProps<ISelectOption, boolean> & {
+    selectProps: MenuListProps<ISelectOption, boolean>['selectProps'] & {
+        keyboardMode?: boolean;
+        exitKeyboardMode?: () => void;
+        dropdownType?: 'menu' | 'grid';
+    };
     renderMessageListFooter?: (props: MenuListProps<ISelectOption, boolean>) => JSX.Element;
 };
-export declare const SelectMenuList: ({ renderMessageListFooter, ...props }: MenuListType) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectMenuList: {
+    ({ renderMessageListFooter, ...props }: MenuListType): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

package/src/tedi/components/form/select/components/select-menu-list.es.js

@@ -1,11 +1,25 @@
-import { jsxs as l, jsx as i } from "react/jsx-runtime";
+import { jsxs as o, jsx as l } from "react/jsx-runtime";
 import m from "../../../../../../external/classnames/index.es.js";
-import s from "../select.module.scss.es.js";
-import { c } from "../../../../../../external/react-select/dist/index-641ee5b8.esm.es.js";
-const d = ({ renderMessageListFooter: t, ...e }) => /* @__PURE__ */ l("div", { className: s["tedi-select__menu-list-wrapper"], children: [
-  /* @__PURE__ */ i(c.MenuList, { ...e, className: m(e.className, s["tedi-select__menu-list"]), children: e.children }),
-  t && /* @__PURE__ */ i("div", { className: s["tedi-select__menu-list-footer"], children: t(e) })
-] });
+import t from "../select.module.scss.es.js";
+import { c as n } from "../../../../../../external/react-select/dist/index-641ee5b8.esm.es.js";
+const r = ({ renderMessageListFooter: s, ...e }) => {
+  const { keyboardMode: i, exitKeyboardMode: c, dropdownType: d } = e.selectProps;
+  return /* @__PURE__ */ o("div", { className: t["tedi-select__menu-list-wrapper"], onMouseMove: i ? c : void 0, children: [
+    /* @__PURE__ */ l(
+      n.MenuList,
+      {
+        ...e,
+        className: m(e.className, t["tedi-select__menu-list"], {
+          [t["tedi-select__menu-list--keyboard"]]: i,
+          [t["tedi-select__menu-list--grid"]]: d === "grid"
+        }),
+        children: e.children
+      }
+    ),
+    s && /* @__PURE__ */ l("div", { className: t["tedi-select__menu-list-footer"], children: s(e) })
+  ] });
+};
+r.displayName = "SelectMenuList";
 export {
-  d as SelectMenuList
+  r as SelectMenuList
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("../../../../../../external/classnames/index.cjs.js"),s=require("../../checkbox/checkbox.cjs.js"),l=require("../select.module.scss.cjs.js"),u=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),o=({renderOption:i,...e})=>{const a=d.default(l.default["tedi-select__option"],{[l.default["tedi-select__option--disabled"]]:e.isDisabled},{[l.default["tedi-select__option--focused"]]:e.isFocused}),{tabIndex:n,...c}=e.innerProps;return t.jsx(u.c.Option,{...e,innerProps:{...c,tabIndex:n,role:"option","aria-selected":e.isSelected},className:a,children:i?i(e):t.jsxs(t.Fragment,{children:[t.jsx("span",{className:"sr-only",children:e.label}),t.jsx(s.Checkbox,{id:e.data.value,label:e.label,"aria-hidden":!0,className:l.default["tedi-select__checkbox"],value:e.data.value,name:e.data.value,checked:e.isSelected,onChange:()=>null,disabled:e.isDisabled,hover:e.isFocused})]})})};exports.SelectMultiOption=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),S=require("../../../../../../external/classnames/index.cjs.js"),x=require("../../checkbox/checkbox.cjs.js"),l=require("../select.module.scss.cjs.js"),t=require("./select-bulk-helpers.cjs.js"),g=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),A=({renderOption:f,...e})=>{var b;const u=e.data.value===t.SELECT_ALL_VALUE,r=t.isGroupSentinel(e.data),E=!!((b=e.data.customData)!=null&&b.__tediInGroup);let o=e.isSelected,_=!1;if(u){const i=t.getEnabledOptions(e.options).filter(n=>n.value!==t.SELECT_ALL_VALUE),a=(e.getValue()??[]).filter(n=>n.value!==t.SELECT_ALL_VALUE);o=t.areAllSelected(a,i),_=t.isIndeterminate(a,i)}else if(r){const i=e.options,L=i.findIndex(d=>d.value===e.data.value),a=[];for(let d=L+1;d<i.length;d++){const s=i[d];if(!s||typeof s.value=="string"&&(s.value.startsWith(t.GROUP_OPTION_PREFIX)||s.value===t.SELECT_ALL_VALUE))break;s.isDisabled||a.push(s)}const n=e.getValue()??[];o=t.areAllSelected(n,a),_=t.isIndeterminate(n,a)}const h=S.default(l.default["tedi-select__option"],{[l.default["tedi-select__option--disabled"]]:e.isDisabled},{[l.default["tedi-select__option--focused"]]:e.isFocused},{[l.default["tedi-select__option--select-all"]]:u},{[l.default["tedi-select__option--group"]]:r},{[l.default["tedi-select__option--indented"]]:E}),{tabIndex:m,...v}=e.innerProps;return c.jsx(g.c.Option,{...e,innerProps:{...v,tabIndex:m,role:"option","aria-selected":o},className:h,children:f&&!u&&!r?f(e):c.jsxs(c.Fragment,{children:[c.jsx("span",{className:"sr-only",children:e.label}),c.jsx(x.Checkbox,{id:e.data.value,label:e.label,"aria-hidden":!0,className:l.default["tedi-select__checkbox"],value:e.data.value,name:e.data.value,checked:o,indeterminate:_,onChange:()=>null,disabled:e.isDisabled,hover:e.isFocused})]})})};exports.SelectMultiOption=A;

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

@@ -1,24 +1,45 @@
-import { jsx as i, jsxs as c, Fragment as d } from "react/jsx-runtime";
-import o from "../../../../../../external/classnames/index.es.js";
-import { Checkbox as m } from "../../checkbox/checkbox.es.js";
+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 { c as r } from "../../../../../../external/react-select/dist/index-641ee5b8.esm.es.js";
-const x = ({ renderOption: a, ...e }) => {
-  const l = o(
+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))
+        break;
+      n.isDisabled || i.push(n);
+    }
+    const a = e.getValue() ?? [];
+    d = h(a, i), r = v(a, i);
+  }
+  const I = O(
     t["tedi-select__option"],
     { [t["tedi-select__option--disabled"]]: e.isDisabled },
-    { [t["tedi-select__option--focused"]]: e.isFocused }
-  ), { tabIndex: n, ...s } = e.innerProps;
-  return /* @__PURE__ */ i(
-    r.Option,
+    { [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;
+  return /* @__PURE__ */ m(
+    A.Option,
     {
       ...e,
-      innerProps: { ...s, tabIndex: n, role: "option", "aria-selected": e.isSelected },
-      className: l,
-      children: a ? a(e) : /* @__PURE__ */ c(d, { children: [
-        /* @__PURE__ */ i("span", { className: "sr-only", children: e.label }),
-        /* @__PURE__ */ i(
-          m,
+      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,
@@ -26,7 +47,8 @@ const x = ({ renderOption: a, ...e }) => {
             className: t["tedi-select__checkbox"],
             value: e.data.value,
             name: e.data.value,
-            checked: e.isSelected,
+            checked: d,
+            indeterminate: r,
             onChange: () => null,
             disabled: e.isDisabled,
             hover: e.isFocused
@@ -37,5 +59,5 @@ const x = ({ renderOption: a, ...e }) => {
   );
 };
 export {
-  x as SelectMultiOption
+  M 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 i=require("react/jsx-runtime"),a=require("../../../tags/tag/tag.cjs.js"),r=({isTagRemovable:n,children:l,removeProps:e})=>{const c=t=>{if(t.type==="click"&&e.onClick&&e.onClick(t),t.type==="keydown"){const o=t;(o.key==="Enter"||o.key===" ")&&e.onClick&&(o.preventDefault(),o.stopPropagation(),e.onClick(o))}};return i.jsx("div",{onMouseDown:t=>t.stopPropagation(),children:i.jsx(a.Tag,{color:"primary",onClose:n?c:void 0,children:l})})};exports.SelectMultiValue=r;
+"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;

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

@@ -3,5 +3,16 @@ import { ISelectOption } from '../select';
 type MultiValueType = MultiValueProps<ISelectOption> & {
     isTagRemovable?: boolean;
 };
-export declare const SelectMultiValue: ({ isTagRemovable, children, removeProps }: MultiValueType) => JSX.Element;
+type RemoveProps = MultiValueProps<ISelectOption>['removeProps'];
+/**
+ * Build the close handler that the rendered Tag passes to its inner button.
+ *
+ * Click activations forward straight to react-select's `removeProps.onClick`.
+ * Keyboard activations (Enter / Space) are also accepted as a defensive
+ * fallback for consumers who wire the handler directly to a custom keyboard
+ * trigger — Tag itself only invokes `onClose` from its click handler, so the
+ * 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 {};

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

@@ -1,11 +1,45 @@
-import { jsx as l } from "react/jsx-runtime";
-import { Tag as a } from "../../../tags/tag/tag.es.js";
-const p = ({ isTagRemovable: t, children: c, removeProps: n }) => /* @__PURE__ */ l("div", { onMouseDown: (o) => o.stopPropagation(), children: /* @__PURE__ */ l(a, { color: "primary", onClose: t ? (o) => {
-  if (o.type === "click" && n.onClick && n.onClick(o), o.type === "keydown") {
-    const i = o;
-    (i.key === "Enter" || i.key === " ") && n.onClick && (i.preventDefault(), i.stopPropagation(), n.onClick(i));
+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) => {
+  if (e.type === "click" && t.onClick) {
+    t.onClick(e);
+    return;
   }
-} : void 0, children: c }) });
+  if (e.type === "keydown") {
+    const n = e;
+    (n.key === "Enter" || n.key === " ") && t.onClick && (n.preventDefault(), n.stopPropagation(), t.onClick(n));
+  }
+}, S = ({
+  isTagRemovable: t,
+  children: e,
+  removeProps: n,
+  ...i
+}) => {
+  const { isSingleRow: d, visibleCount: a } = g();
+  if (i.data.value === C || k(i.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));
+  };
+  return u ? null : /* @__PURE__ */ c("div", { onMouseDown: (o) => o.stopPropagation(), "data-tedi-tag-index": l, children: /* @__PURE__ */ c(
+    y,
+    {
+      color: "primary",
+      onClose: t ? p : void 0,
+      closeButtonProps: t ? {
+        tabIndex: 0,
+        onMouseDown: (o) => o.stopPropagation(),
+        onKeyDown: f
+      } : void 0,
+      children: e
+    }
+  ) });
+};
 export {
-  p as SelectMultiValue
+  S as SelectMultiValue,
+  x 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 i=require("react/jsx-runtime"),c=require("../../../../../../external/classnames/index.cjs.js"),n=require("../../radio/radio.cjs.js"),t=require("../select.module.scss.cjs.js"),s=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),u=({showRadioButtons:a,renderOption:l,...e})=>{const d=c.default(t.default["tedi-select__option"],{[t.default["tedi-select__option--disabled"]]:e.isDisabled},{[t.default["tedi-select__option--selected"]]:e.isSelected},{[t.default["tedi-select__option--focused"]]:e.isFocused});return i.jsx(s.c.Option,{...e,innerProps:{role:"option","aria-selected":e.isSelected,"aria-disabled":e.isDisabled,...e.innerProps},className:d,children:a?i.jsxs(i.Fragment,{children:[i.jsx("span",{className:"sr-only",children:e.label}),i.jsx(n.Radio,{label:e.label,id:e.data.value,name:e.data.value,className:t.default["tedi-select__radio"],value:e.data.value,checked:e.isSelected,disabled:e.isDisabled})]}):l?l(e):e.children})};exports.SelectSingleOption=u;
+"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;

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

@@ -1,4 +1,4 @@
-import { jsx as l, jsxs as s, Fragment as c } from "react/jsx-runtime";
+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 i from "../select.module.scss.es.js";
@@ -7,7 +7,7 @@ const h = ({ showRadioButtons: a, renderOption: t, ...e }) => {
   const d = n(
     i["tedi-select__option"],
     { [i["tedi-select__option--disabled"]]: e.isDisabled },
-    { [i["tedi-select__option--selected"]]: e.isSelected },
+    { [i["tedi-select__option--selected"]]: e.isSelected && !a },
     { [i["tedi-select__option--focused"]]: e.isFocused }
   );
   return /* @__PURE__ */ l(
@@ -21,7 +21,7 @@ const h = ({ showRadioButtons: a, renderOption: t, ...e }) => {
         ...e.innerProps
       },
       className: d,
-      children: a ? /* @__PURE__ */ s(c, { children: [
+      children: a ? /* @__PURE__ */ c(s, { children: [
         /* @__PURE__ */ l("span", { className: "sr-only", children: e.label }),
         /* @__PURE__ */ l(
           o,
@@ -32,7 +32,8 @@ const h = ({ showRadioButtons: a, renderOption: t, ...e }) => {
             className: i["tedi-select__radio"],
             value: e.data.value,
             checked: e.isSelected,
-            disabled: e.isDisabled
+            disabled: e.isDisabled,
+            onChange: () => null
           }
         )
       ] }) : t ? t(e) : e.children

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),t=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),i=e=>{const{renderValue:l}=e.selectProps;return l?n.jsx(t.c.SingleValue,{...e,children:l(e.data)}):n.jsx(t.c.SingleValue,{...e,children:e.children})};exports.SelectSingleValue=i;

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

@@ -0,0 +1,3 @@
+import { SingleValueProps } from 'react-select';
+import { ISelectOption } from '../select';
+export declare const SelectSingleValue: (props: SingleValueProps<ISelectOption, boolean>) => JSX.Element;

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

@@ -0,0 +1,9 @@
+import { jsx as l } from "react/jsx-runtime";
+import { c as r } from "../../../../../../external/react-select/dist/index-641ee5b8.esm.es.js";
+const i = (e) => {
+  const { renderValue: n } = e.selectProps;
+  return n ? /* @__PURE__ */ l(r.SingleValue, { ...e, children: n(e.data) }) : /* @__PURE__ */ l(r.SingleValue, { ...e, children: e.children });
+};
+export {
+  i as SelectSingleValue
+};

package/src/tedi/components/form/select/components/select-tags-context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext({isSingleRow:!1,visibleCount:null}),o=()=>e.useContext(t);exports.SelectTagsContext=t;exports.useSelectTagsContext=o;

package/src/tedi/components/form/select/components/select-tags-context.d.ts

@@ -0,0 +1,11 @@
+export interface SelectTagsContextValue {
+    /** True when the parent Select is in `tagsDirection="row"` multi mode. */
+    isSingleRow: boolean;
+    /**
+     * Number of tags that fit on one row. `null` means "not yet measured" — render
+     * every tag so widths can be read; subsequent renders use the computed value.
+     */
+    visibleCount: number | null;
+}
+export declare const SelectTagsContext: import('react').Context<SelectTagsContextValue>;
+export declare const useSelectTagsContext: () => SelectTagsContextValue;

package/src/tedi/components/form/select/components/select-tags-context.es.js

@@ -0,0 +1,9 @@
+import { createContext as e, useContext as t } from "react";
+const o = e({
+  isSingleRow: !1,
+  visibleCount: null
+}), s = () => t(o);
+export {
+  o as SelectTagsContext,
+  s as useSelectTagsContext
+};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),r=require("../../../../../../external/classnames/index.cjs.js"),a=require("../select.module.scss.cjs.js"),l=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),u=({children:t,...e})=>n.jsx(l.c.ValueContainer,{...e,className:r.default(a.default["tedi-select__value-container"],e.className),children:t});exports.SelectValueContainer=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),D=require("../../../../../../external/classnames/index.cjs.js"),l=require("react"),F=require("../../../tags/tag/tag.cjs.js"),q=require("../select.module.scss.cjs.js"),k=require("./select-tags-context.cjs.js"),G=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),P=8,U=40,X=80,M=({children:A,...n})=>{const E=n.selectProps.tagsDirection,e=!!n.isMulti&&E==="row",a=!!n.selectProps.menuIsOpen||!!n.selectProps.isFocused,d=n.selectProps.inputValue??"",m=n.selectProps.value??[],o=Array.isArray(m)?m.length:0,S=l.useRef(null),_=l.useRef(0),[c,f]=l.useState(null),[v,w]=l.useState({isSingleRow:e,totalCount:o,isFocused:a,inputValue:d});(v.isSingleRow!==e||v.totalCount!==o||v.isFocused!==a||v.inputValue!==d)&&(w({isSingleRow:e,totalCount:o,isFocused:a,inputValue:d}),c!==null&&f(null)),l.useEffect(()=>{if(!e)return;const s=S.current;if(!s||typeof ResizeObserver>"u")return;const i=new ResizeObserver(t=>{var u;const h=((u=t[0])==null?void 0:u.contentRect.width)??0;h>0&&h!==_.current&&f(null)});return i.observe(s),()=>i.disconnect()},[e]),l.useLayoutEffect(()=>{if(!e||c!==null)return;const s=S.current;if(!s)return;const i=s.clientWidth;if(i===0)return;const t=s.querySelectorAll("[data-tedi-tag-index]");if(t.length===0){o===0&&(_.current=i,f(0));return}const h=s.querySelector(".select__input-container");let u=0;d&&h?u=h.offsetWidth:a&&(u=X);const y=i-u-P;let T=0;for(let r=0;r<t.length;r++)T+=t[r].offsetWidth+(r>0?P:0);if(T<=y){_.current=i,f(t.length);return}let W=0,g=0;for(let r=0;r<t.length;r++){const O=t[r].offsetWidth,j=r<t.length-1?U+P:0,V=W+O+(g>0?P:0);if(V+j<=y)W=V,g++;else break}g===0&&t.length>0&&(g=1),_.current=i,f(g)},[e,c,o,a,d]);const x=e&&c!==null?Math.max(0,o-c):0,I=l.useMemo(()=>({isSingleRow:e,visibleCount:c}),[e,c]),C=l.Children.toArray(A),R=C.length>0?C.length-1:-1,p=R>=0?C.slice(0,R):[],N=R>=0?C[R]:null;return b.jsx(k.SelectTagsContext.Provider,{value:I,children:b.jsxs(G.c.ValueContainer,{...n,innerProps:{...n.innerProps,ref:s=>{S.current=s}},className:D.default(q.default["tedi-select__value-container"],n.className),children:[p,x>0&&b.jsxs(F.Tag,{color:"primary",className:q.default["tedi-select__overflow-tag"],children:["+",x]}),N]})})};M.displayName="SelectValueContainer";exports.SelectValueContainer=M;

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

@@ -1,2 +1,12 @@
-import { UnknownType } from '../../../../types/commonTypes';
-export declare const SelectValueContainer: ({ children, ...props }: UnknownType) => import("react/jsx-runtime").JSX.Element;
+import { ValueContainerProps } from 'react-select';
+import { ISelectOption } from '../select';
+type Props = ValueContainerProps<ISelectOption, boolean> & {
+    selectProps: ValueContainerProps<ISelectOption, boolean>['selectProps'] & {
+        tagsDirection?: 'row' | 'stack';
+    };
+};
+export declare const SelectValueContainer: {
+    ({ children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

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

@@ -1,15 +1,78 @@
-import { jsx as o } from "react/jsx-runtime";
-import a from "../../../../../../external/classnames/index.es.js";
-import r from "../select.module.scss.es.js";
-import { c as s } from "../../../../../../external/react-select/dist/index-641ee5b8.esm.es.js";
-const i = ({ children: t, ...e }) => /* @__PURE__ */ o(
-  s.ValueContainer,
-  {
-    ...e,
-    className: a(r["tedi-select__value-container"], e.className),
-    children: t
-  }
-);
+import { jsx as k, jsxs as T } from "react/jsx-runtime";
+import G from "../../../../../../external/classnames/index.es.js";
+import U, { useRef as V, useState as x, useEffect as X, useLayoutEffect as j, useMemo as q } from "react";
+import { Tag as z } from "../../../tags/tag/tag.es.js";
+import A from "../select.module.scss.es.js";
+import { SelectTagsContext as H } from "./select-tags-context.es.js";
+import { c as L } from "../../../../../../external/react-select/dist/index-641ee5b8.esm.es.js";
+const v = 8, B = 40, J = 80, K = ({ children: E, ...n }) => {
+  const M = n.selectProps.tagsDirection, e = !!n.isMulti && M === "row", u = !!n.selectProps.menuIsOpen || !!n.selectProps.isFocused, a = n.selectProps.inputValue ?? "", P = n.selectProps.value ?? [], l = Array.isArray(P) ? P.length : 0, C = V(null), m = V(0), [o, f] = x(null), [g, w] = x({ isSingleRow: e, totalCount: l, isFocused: u, inputValue: a });
+  (g.isSingleRow !== e || g.totalCount !== l || g.isFocused !== u || g.inputValue !== a) && (w({ isSingleRow: e, totalCount: l, isFocused: u, inputValue: a }), o !== null && f(null)), X(() => {
+    if (!e) return;
+    const s = C.current;
+    if (!s || typeof ResizeObserver > "u") return;
+    const i = new ResizeObserver((t) => {
+      var c;
+      const d = ((c = t[0]) == null ? void 0 : c.contentRect.width) ?? 0;
+      d > 0 && d !== m.current && f(null);
+    });
+    return i.observe(s), () => i.disconnect();
+  }, [e]), j(() => {
+    if (!e || o !== null) return;
+    const s = C.current;
+    if (!s) return;
+    const i = s.clientWidth;
+    if (i === 0) return;
+    const t = s.querySelectorAll("[data-tedi-tag-index]");
+    if (t.length === 0) {
+      l === 0 && (m.current = i, f(0));
+      return;
+    }
+    const d = s.querySelector(".select__input-container");
+    let c = 0;
+    a && d ? c = d.offsetWidth : u && (c = J);
+    const y = i - c - v;
+    let W = 0;
+    for (let r = 0; r < t.length; r++)
+      W += t[r].offsetWidth + (r > 0 ? v : 0);
+    if (W <= y) {
+      m.current = i, f(t.length);
+      return;
+    }
+    let b = 0, h = 0;
+    for (let r = 0; r < t.length; r++) {
+      const D = t[r].offsetWidth, F = r < t.length - 1 ? B + v : 0, S = b + D + (h > 0 ? v : 0);
+      if (S + F <= y)
+        b = S, h++;
+      else
+        break;
+    }
+    h === 0 && t.length > 0 && (h = 1), m.current = i, f(h);
+  }, [e, o, l, u, a]);
+  const R = e && o !== null ? Math.max(0, l - o) : 0, I = q(() => ({ isSingleRow: e, visibleCount: o }), [e, o]), _ = U.Children.toArray(E), p = _.length > 0 ? _.length - 1 : -1, N = p >= 0 ? _.slice(0, p) : [], O = p >= 0 ? _[p] : null;
+  return /* @__PURE__ */ k(H.Provider, { value: I, children: /* @__PURE__ */ T(
+    L.ValueContainer,
+    {
+      ...n,
+      innerProps: {
+        ...n.innerProps,
+        ref: (s) => {
+          C.current = s;
+        }
+      },
+      className: G(A["tedi-select__value-container"], n.className),
+      children: [
+        N,
+        R > 0 && /* @__PURE__ */ T(z, { color: "primary", className: A["tedi-select__overflow-tag"], children: [
+          "+",
+          R
+        ] }),
+        O
+      ]
+    }
+  ) });
+};
+K.displayName = "SelectValueContainer";
 export {
-  i as SelectValueContainer
+  K as SelectValueContainer
 };