@tedi-design-system/react 17.1.0-rc.8 → 17.1.0-rc.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "17.1.0-rc.8",
+  "version": "17.1.0-rc.9",
   "type": "module",
   "sideEffects": false,
   "exports": {

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

@@ -1,19 +1,19 @@
-import s from "../../../../../../../external/classnames/index.es.js";
-import t from "react";
-import { useInputGroup as m } from "../../input-group.es.js";
+import t from "../../../../../../../external/classnames/index.es.js";
+import s from "react";
+import { useInputGroup as u } from "../../input-group.es.js";
 import o from "../../input-group.module.scss.es.js";
 const f = ({ children: p }) => {
-  const { disabled: r, inputId: e } = m();
-  if (!t.isValidElement(p)) return p;
+  const { disabled: r, inputId: e } = u();
+  if (!s.isValidElement(p)) return p;
   const a = typeof p.type == "string", i = {
     disabled: r || p.props.disabled,
     id: p.props.id ?? e,
-    className: s(p.props.className, o["tedi-input-group__input"]),
+    className: t(p.props.className, o["tedi-input-group__input"]),
     ...!a && {
-      wrapperClassName: s(p.props.wrapperClassName, o["tedi-input-group__input"])
+      wrapperClassName: t(p.props.wrapperClassName, o["tedi-input-group__input"])
     }
   };
-  return t.cloneElement(p, i);
+  return s.cloneElement(p, i);
 };
 export {
   f as Input

package/src/tedi/components/form/input-group/components/prefix/prefix.es.js

@@ -1,22 +1,22 @@
-import { jsx as m } from "react/jsx-runtime";
-import n from "../../../../../../../external/classnames/index.es.js";
-import { useEffect as u } from "react";
+import { jsx as u } from "react/jsx-runtime";
+import m from "../../../../../../../external/classnames/index.es.js";
+import { useEffect as n } from "react";
 import { useInputGroup as a } from "../../input-group.es.js";
 import i from "../../input-group.module.scss.es.js";
-const b = ({ children: r, className: o, ...s }) => {
-  const { registerPrefix: e, unregisterPrefix: t, disabled: p } = a();
-  u(() => (e(), () => t()), [e, t]);
+const b = ({ children: r, className: o, ...p }) => {
+  const { registerPrefix: e, unregisterPrefix: t, disabled: s } = a();
+  n(() => (e(), () => t()), [e, t]);
   const f = typeof r == "string" || typeof r == "number";
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ u(
     "div",
     {
-      ...s,
-      className: n(
+      ...p,
+      className: m(
         i["tedi-input-group__prefix"],
         { [i["tedi-input-group__prefix--no-inner-div"]]: f },
         o
       ),
-      "aria-disabled": p,
+      "aria-disabled": s,
       children: r
     }
   );

package/src/tedi/components/form/input-group/components/suffix/suffix.es.js

@@ -2,18 +2,18 @@ import { jsx as p } from "react/jsx-runtime";
 import m from "../../../../../../../external/classnames/index.es.js";
 import { useEffect as n } from "react";
 import { useInputGroup as a } from "../../input-group.es.js";
-import s from "../../input-group.module.scss.es.js";
-const b = ({ children: r, className: e, ...o }) => {
+import o from "../../input-group.module.scss.es.js";
+const _ = ({ children: r, className: e, ...s }) => {
   const { registerSuffix: t, unregisterSuffix: i, disabled: f } = a();
   n(() => (t(), () => i()), [t, i]);
   const u = typeof r == "string" || typeof r == "number";
   return /* @__PURE__ */ p(
     "div",
     {
-      ...o,
+      ...s,
       className: m(
-        s["tedi-input-group__suffix"],
-        { [s["tedi-input-group__suffix--no-inner-div"]]: u },
+        o["tedi-input-group__suffix"],
+        { [o["tedi-input-group__suffix--no-inner-div"]]: u },
         e
       ),
       "aria-disabled": f,
@@ -22,5 +22,5 @@ const b = ({ children: r, className: e, ...o }) => {
   );
 };
 export {
-  b as Suffix
+  _ as Suffix
 };

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

@@ -7,13 +7,13 @@ import { Input as B } from "./components/input/input.es.js";
 import { Prefix as M } from "./components/prefix/prefix.es.js";
 import { Suffix as O } from "./components/suffix/suffix.es.js";
 import t from "./input-group.module.scss.es.js";
-const p = j(null), U = () => {
-  const u = G(p);
+const a = j(null), U = () => {
+  const u = G(a);
   if (!u) throw new Error("InputGroupContext missing");
   return u;
-}, W = () => G(p), P = H(
-  ({ className: u, addons: S = !0, helper: r, label: o, children: h, disabled: s, id: y, ...v }, C) => {
-    const m = g.useRef(null), N = g.useId(), i = y ?? N, [n, d] = l(!1), [a, c] = l(!1);
+}, W = () => G(a), S = H(
+  ({ className: u, addons: P = !0, helper: r, label: o, children: h, disabled: s, id: y, ...v }, C) => {
+    const m = g.useRef(null), N = g.useId(), i = y ?? N, [n, d] = l(!1), [p, c] = l(!1);
     E(C, () => ({
       get root() {
         return m.current;
@@ -22,7 +22,7 @@ const p = j(null), U = () => {
     const w = L(
       () => ({
         hasPrefix: n,
-        hasSuffix: a,
+        hasSuffix: p,
         disabled: s,
         hasExternalLabel: !!o,
         inputId: i,
@@ -31,31 +31,31 @@ const p = j(null), U = () => {
         registerSuffix: () => c(!0),
         unregisterSuffix: () => c(!1)
       }),
-      [i, n, a, s, o]
+      [i, n, p, s, o]
     ), A = F(
       t["tedi-input-group"],
       {
-        [t["tedi-input-group--addons"]]: S,
+        [t["tedi-input-group--addons"]]: P,
         [t["tedi-input-group--has-prefix"]]: n,
-        [t["tedi-input-group--has-suffix"]]: a,
+        [t["tedi-input-group--has-suffix"]]: p,
         [t["tedi-input-group--disabled"]]: s
       },
       u
     ), R = () => !r || Array.isArray(r) && r.length === 0 ? null : /* @__PURE__ */ e("div", { className: t["tedi-input-group__feedback-wrapper"], children: Array.isArray(r) ? r.map((_, x) => /* @__PURE__ */ e(I, { ..._, id: `group-helper-${x}` }, x)) : /* @__PURE__ */ e(I, { ...r, id: "group-helper" }) });
-    return /* @__PURE__ */ k(p.Provider, { value: w, children: [
+    return /* @__PURE__ */ k(a.Provider, { value: w, children: [
       o && /* @__PURE__ */ e(b, { ...v, label: o, id: i }),
       /* @__PURE__ */ e("div", { ref: m, className: A, "data-name": "tedi-input-group", "aria-disabled": s, children: h }),
       R()
     ] });
   }
 );
-P.displayName = "InputGroup";
-const f = P;
+S.displayName = "InputGroup";
+const f = S;
 f.Prefix = M;
 f.Suffix = O;
 f.Input = B;
 export {
-  P as InputGroupBase,
+  S as InputGroupBase,
   f as default,
   U as useInputGroup,
   W as useOptionalInputGroup

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i="__tedi_select_all__",r="__tedi_select_group__:",u=e=>!!e&&typeof e.value=="string"&&e.value.startsWith(r),a=e=>{if(!e||e.length===0)return[];const t=[];for(const s of e)if(s&&typeof s=="object"&&Array.isArray(s.options))for(const n of s.options)n.isDisabled||t.push(n);else{const n=s;n&&!n.isDisabled&&t.push(n)}return t},f=e=>!e||!Array.isArray(e.options)?[]:e.options.filter(t=>!t.isDisabled),l=(e,t)=>t.length===0?!1:t.every(s=>e.some(n=>n.value===s.value)),c=(e,t)=>{if(t.length===0)return!1;const s=t.filter(n=>e.some(o=>o.value===n.value)).length;return s>0&&s<t.length},_=(e,t)=>{if(l(e,t))return e.filter(n=>!t.some(o=>o.value===n.value));const s=[...e];for(const n of t)s.some(o=>o.value===n.value)||s.push(n);return s};exports.GROUP_OPTION_PREFIX=r;exports.SELECT_ALL_VALUE=i;exports.areAllSelected=l;exports.getEnabledOptions=a;exports.getGroupEnabledOptions=f;exports.isGroupSentinel=u;exports.isIndeterminate=c;exports.toggleBulkSelection=_;

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

@@ -0,0 +1,55 @@
+import { GroupBase, OptionsOrGroups } from 'react-select';
+import { ISelectOption } from '../select';
+/**
+ * Sentinel value used by the "Select all" option when it is injected into
+ * react-select's option list. The sentinel is stripped from the value before
+ * it is exposed to consumers via onChange — it never leaks outside the
+ * component.
+ */
+export declare const SELECT_ALL_VALUE = "__tedi_select_all__";
+export declare const isSelectAllSentinel: (option: {
+    value?: string;
+} | null | undefined) => boolean;
+/**
+ * Prefix for group sentinel options. When `selectableGroups + multiple` is on,
+ * each group is flattened into the option list with a sentinel option at the
+ * top of its run; toggling the sentinel toggles every enabled child of that
+ * group. The label after the prefix is the original group's label.
+ */
+export declare const GROUP_OPTION_PREFIX = "__tedi_select_group__:";
+export declare const isGroupSentinel: (option: {
+    value?: string;
+} | null | undefined) => boolean;
+/**
+ * Returns true when `options` is a grouped tree (i.e. each top-level entry
+ * has its own `options` array).
+ */
+export declare const isGroupedOptions: (options: OptionsOrGroups<ISelectOption, GroupBase<ISelectOption>>) => options is ReadonlyArray<GroupBase<ISelectOption>>;
+/**
+ * Flattens grouped/non-grouped options into a single list of enabled
+ * `ISelectOption`s. Used by Select All and group toggles to decide which
+ * options to flip on/off.
+ *
+ * Handles a mixed input where a flat option (e.g. the injected Select-all
+ * sentinel) sits alongside groups in the same top-level array, by checking
+ * each item individually rather than only inspecting `options[0]`.
+ */
+export declare const getEnabledOptions: (options: OptionsOrGroups<ISelectOption, GroupBase<ISelectOption>>) => ISelectOption[];
+/**
+ * Returns the enabled options of a specific group. Pass the group object
+ * directly (e.g. `GroupHeadingProps.data` from react-select) — looking groups
+ * up by label is unsafe because duplicate labels would always resolve to the
+ * first match, mutating the wrong group.
+ */
+export declare const getGroupEnabledOptions: (group: GroupBase<ISelectOption> | null | undefined) => ISelectOption[];
+/** True iff every enabled option is currently in the selection. */
+export declare const areAllSelected: (selected: ReadonlyArray<ISelectOption>, enabled: ReadonlyArray<ISelectOption>) => boolean;
+/** True when some — but not all — enabled options are selected. */
+export declare const isIndeterminate: (selected: ReadonlyArray<ISelectOption>, enabled: ReadonlyArray<ISelectOption>) => boolean;
+/**
+ * Toggle behaviour for both Select All and group toggle: when every enabled
+ * option in `target` is selected, remove them all; otherwise add the missing
+ * ones to the existing selection. Other selected values (e.g. options
+ * outside `target`) are preserved.
+ */
+export declare const toggleBulkSelection: (selected: ReadonlyArray<ISelectOption>, target: ReadonlyArray<ISelectOption>) => ISelectOption[];

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

@@ -0,0 +1,34 @@
+const i = "__tedi_select_all__", o = "__tedi_select_group__:", u = (t) => !!t && typeof t.value == "string" && t.value.startsWith(o), f = (t) => {
+  if (!t || t.length === 0) return [];
+  const e = [];
+  for (const n of t)
+    if (n && typeof n == "object" && Array.isArray(n.options))
+      for (const s of n.options)
+        s.isDisabled || e.push(s);
+    else {
+      const s = n;
+      s && !s.isDisabled && e.push(s);
+    }
+  return e;
+}, a = (t) => !t || !Array.isArray(t.options) ? [] : t.options.filter((e) => !e.isDisabled), l = (t, e) => e.length === 0 ? !1 : e.every((n) => t.some((s) => s.value === n.value)), c = (t, e) => {
+  if (e.length === 0) return !1;
+  const n = e.filter((s) => t.some((r) => r.value === s.value)).length;
+  return n > 0 && n < e.length;
+}, _ = (t, e) => {
+  if (l(t, e))
+    return t.filter((s) => !e.some((r) => r.value === s.value));
+  const n = [...t];
+  for (const s of e)
+    n.some((r) => r.value === s.value) || n.push(s);
+  return n;
+};
+export {
+  o as GROUP_OPTION_PREFIX,
+  i as SELECT_ALL_VALUE,
+  l as areAllSelected,
+  f as getEnabledOptions,
+  a as getGroupEnabledOptions,
+  u as isGroupSentinel,
+  c as isIndeterminate,
+  _ as toggleBulkSelection
+};

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 {};