@tedi-design-system/react 17.1.0-rc.1 → 17.1.0-rc.11

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),x=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),j=require("../../base/icon/icon.cjs.js"),w=require("../../buttons/closing-button/closing-button.cjs.js"),k=require("../../misc/separator/separator.cjs.js"),z=require("../../tags/tag/tag.cjs.js"),R=require("../form-label/form-label.cjs.js"),i=require("./multi-value-field.module.scss.cjs.js"),$=require("../../../providers/label-provider/use-labels.cjs.js"),c=_.forwardRef((h,O)=>{const{id:b,label:d,name:m,values:f,onChange:n,tagColor:q="primary",className:N,icon:t,onIconClick:v,iconButtonProps:s,isClearable:V=!0,required:p,disabled:u}=h,{getLabel:y}=$.useLabels(),[C,S]=_.useState(f??[]),a=f??C,g=l=>{S(l),n==null||n(l)},F=l=>{const r=a.filter((T,M)=>M!==l);g(r)},o=!u&&V&&a.length>0,I=()=>{g([])},L=()=>{if(!t)return null;const l=typeof t=="string"?{name:t}:t;return v?e.jsx("button",{...s,className:x.default(i.default["tedi-multi-value-field__icon-wrapper"],s==null?void 0:s.className),onClick:v,type:"button",children:e.jsx(j.Icon,{...l,size:18})}):e.jsx("div",{className:i.default["tedi-multi-value-field__icon-wrapper"],children:e.jsx(j.Icon,{...l,size:18})})};return e.jsxs("div",{className:x.default(i.default["tedi-multi-value-field"],N),children:[d&&e.jsx(R.FormLabel,{id:b,label:d,required:p}),e.jsxs("div",{className:i.default["tedi-multi-value-field__inner"],children:[a.length>0&&e.jsx("div",{className:i.default["tedi-multi-value-field__tags"],children:a.map((l,r)=>e.jsx(z.Tag,{color:q,onClose:u?void 0:()=>F(r),children:l},`${l}-${r}`))}),(o||t)&&e.jsxs("div",{className:i.default["tedi-multi-value-field__right-area"],children:[o&&e.jsx(w.ClosingButton,{onClick:I,title:y("clear"),className:i.default["tedi-multi-value-field__clear-button"],iconSize:18}),o&&t&&e.jsx(k.Separator,{color:"primary",axis:"vertical",height:1.5,spacing:.25}),t&&L()]})]}),m&&e.jsx("input",{type:"hidden",name:m,value:a.length?JSON.stringify(a):"",required:p,disabled:u})]})});c.displayName="MultiValueField";exports.MultiValueField=c;exports.default=c;

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

@@ -0,0 +1,73 @@
+import { default as React } from 'react';
+import { IconWithoutBackgroundProps } from '../../base/icon/icon';
+export interface MultiValueFieldProps {
+    /**
+     * Unique identifier for the field. Used to associate the label with the input.
+     */
+    id: string;
+    /**
+     * Optional label displayed above the field.
+     */
+    label?: string;
+    /**
+     * Name attribute for the hidden input. When provided, the field value
+     * will be submitted as a JSON string in forms.
+     */
+    name?: string;
+    /**
+     * List of values to display as tags.
+     * If provided, the component acts as a controlled component.
+     */
+    values?: string[];
+    /**
+     * Callback fired whenever the values change
+     * (e.g. removing a tag or clearing all values).
+     */
+    onChange?: (values: string[]) => void;
+    /**
+     * Visual style of the tags.
+     * @default 'primary'
+     */
+    tagColor?: 'primary' | 'secondary' | 'danger';
+    /**
+     * Additional CSS class names applied to the root element.
+     */
+    className?: string;
+    /**
+     * Optional icon displayed on the right side.
+     * Can be a string (icon name) or full icon props.
+     */
+    icon?: string | IconWithoutBackgroundProps;
+    /**
+     * Click handler for the icon.
+     * If provided, the icon will be rendered as a button.
+     */
+    onIconClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
+    /**
+     * Extra HTML attributes spread on the icon `<button>` element. Use this to
+     * wire ARIA state (e.g. `aria-expanded`, `aria-controls`) directly to the
+     * icon trigger when it opens a popover / dialog. Only applied when
+     * `onIconClick` is set.
+     */
+    iconButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    /**
+     * Whether the clear button should be shown when values exist.
+     * @default true
+     */
+    isClearable?: boolean;
+    /**
+     * Marks the field as required.
+     * Adds required indicator to label and applies native required validation to the hidden input.
+     */
+    required?: boolean;
+    /**
+     * Whether the input is disabled.
+     */
+    disabled?: boolean;
+}
+export interface MultiValueFieldRef {
+    input: HTMLInputElement | null;
+    wrapper: HTMLDivElement | null;
+}
+export declare const MultiValueField: React.ForwardRefExoticComponent<MultiValueFieldProps & React.RefAttributes<MultiValueFieldRef>>;
+export default MultiValueField;

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

@@ -0,0 +1,81 @@
+import { jsxs as m, jsx as l } from "react/jsx-runtime";
+import _ from "../../../../../external/classnames/index.es.js";
+import { forwardRef as L, useState as j } from "react";
+import { Icon as g } from "../../base/icon/icon.es.js";
+import { ClosingButton as M } from "../../buttons/closing-button/closing-button.es.js";
+import { Separator as $ } from "../../misc/separator/separator.es.js";
+import { Tag as q } from "../../tags/tag/tag.es.js";
+import { FormLabel as A } from "../form-label/form-label.es.js";
+import t from "./multi-value-field.module.scss.es.js";
+import { useLabels as J } from "../../../providers/label-provider/use-labels.es.js";
+const O = L((N, R) => {
+  const {
+    id: b,
+    label: d,
+    name: u,
+    values: f,
+    onChange: o,
+    tagColor: y = "primary",
+    className: C,
+    icon: i,
+    onIconClick: p,
+    iconButtonProps: a,
+    isClearable: V = !0,
+    required: v,
+    disabled: n
+  } = N, { getLabel: w } = J(), [x, I] = j(f ?? []), r = f ?? x, h = (e) => {
+    I(e), o == null || o(e);
+  }, S = (e) => {
+    const s = r.filter((T, F) => F !== e);
+    h(s);
+  }, c = !n && V && r.length > 0, k = () => {
+    h([]);
+  }, z = () => {
+    if (!i) return null;
+    const e = typeof i == "string" ? { name: i } : i;
+    return p ? /* @__PURE__ */ l(
+      "button",
+      {
+        ...a,
+        className: _(t["tedi-multi-value-field__icon-wrapper"], a == null ? void 0 : a.className),
+        onClick: p,
+        type: "button",
+        children: /* @__PURE__ */ l(g, { ...e, size: 18 })
+      }
+    ) : /* @__PURE__ */ l("div", { className: t["tedi-multi-value-field__icon-wrapper"], children: /* @__PURE__ */ l(g, { ...e, size: 18 }) });
+  };
+  return /* @__PURE__ */ m("div", { className: _(t["tedi-multi-value-field"], C), children: [
+    d && /* @__PURE__ */ l(A, { id: b, label: d, required: v }),
+    /* @__PURE__ */ m("div", { className: t["tedi-multi-value-field__inner"], children: [
+      r.length > 0 && /* @__PURE__ */ l("div", { className: t["tedi-multi-value-field__tags"], children: r.map((e, s) => /* @__PURE__ */ l(q, { color: y, onClose: n ? void 0 : () => S(s), children: e }, `${e}-${s}`)) }),
+      (c || i) && /* @__PURE__ */ m("div", { className: t["tedi-multi-value-field__right-area"], children: [
+        c && /* @__PURE__ */ l(
+          M,
+          {
+            onClick: k,
+            title: w("clear"),
+            className: t["tedi-multi-value-field__clear-button"],
+            iconSize: 18
+          }
+        ),
+        c && i && /* @__PURE__ */ l($, { color: "primary", axis: "vertical", height: 1.5, spacing: 0.25 }),
+        i && z()
+      ] })
+    ] }),
+    u && /* @__PURE__ */ l(
+      "input",
+      {
+        type: "hidden",
+        name: u,
+        value: r.length ? JSON.stringify(r) : "",
+        required: v,
+        disabled: n
+      }
+    )
+  ] });
+});
+O.displayName = "MultiValueField";
+export {
+  O as MultiValueField,
+  O as default
+};

package/src/tedi/components/form/multi-value-field/multi-value-field.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-multi-value-field__inner":"tedi-multi-value-field__inner-d00be7fe","tedi-multi-value-field__tags":"tedi-multi-value-field__tags-4f52450e","tedi-multi-value-field__right-area":"tedi-multi-value-field__right-area-2d533551","tedi-multi-value-field__icon-wrapper":"tedi-multi-value-field__icon-wrapper-d73d0e44"};exports.default=e;

package/src/tedi/components/form/multi-value-field/multi-value-field.module.scss.es.js

@@ -0,0 +1,9 @@
+const e = {
+  "tedi-multi-value-field__inner": "tedi-multi-value-field__inner-d00be7fe",
+  "tedi-multi-value-field__tags": "tedi-multi-value-field__tags-4f52450e",
+  "tedi-multi-value-field__right-area": "tedi-multi-value-field__right-area-2d533551",
+  "tedi-multi-value-field__icon-wrapper": "tedi-multi-value-field__icon-wrapper-d73d0e44"
+};
+export {
+  e as default
+};

package/src/tedi/components/form/number-field/number-field.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),v=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),J=require("../../base/typography/text/text.cjs.js"),K=require("../../buttons/button/button.cjs.js"),Q=require("../feedback-text/feedback-text.cjs.js"),X=require("../form-label/form-label.cjs.js"),n=require("./number-field.module.scss.cjs.js"),Y=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Z=require("../../../providers/label-provider/use-labels.cjs.js"),O=N=>{const{getCurrentBreakpointProps:P}=Y.useBreakpointProps(N.defaultServerBreakpoint),{id:x,label:S,hideLabel:U,required:I,className:q,size:_,inputMode:E="numeric",decimalPlaces:j,min:i,max:u,step:c=1,defaultValue:$,value:B,onChange:l,suffix:h,fullWidth:z=!1,disabled:m=!1,invalid:k=!1,helper:d,input:f}=P(N),{getLabel:F}=Z.useLabels(),b=o.useRef(null),[M,L]=o.useState(""),[T,V]=o.useState($??0),s=o.useMemo(()=>l&&typeof B<"u"?B:T,[l,B,T]),g=d?`${x}-helper`:void 0,w=o.useCallback(e=>{const t=i!==void 0&&e<i,r=u!==void 0&&e>u;return k||t||r||(d==null?void 0:d.type)==="error"},[k,d,u,i]),y=e=>Math.min(u??1/0,Math.max(i??-1/0,e)),R=e=>{const t=F("numberField.quantityUpdated",e);L(t),setTimeout(()=>{L("")},5e3)},W=e=>j!==void 0?parseFloat(e.toFixed(j)):e,A=e=>{let t=s;e==="increment"&&(t=t+c),e==="decrement"&&(t=t-c),t=y(t),t=W(t),R(t),l==null||l(t),V(t)},D=({currentTarget:{value:e}})=>{l==null||l(y(+e)),V(y(+e))},C=e=>{const t=e==="increment"?u!==void 0&&s>=u:i!==void 0&&s<=i,r=v.default(n.default["tedi-number-field__button"],n.default[`tedi-number-field__button--${e}`],{[n.default["tedi-number-field__button--disabled"]]:t||m}),p=F(`numberField.${e}`,c);return a.jsx(K.Button,{"aria-label":p,onClick:()=>A(e),disabled:t||m,visualType:"secondary",className:r,icon:{name:e==="increment"?"add":"remove"},size:_==="small"?"small":void 0,children:e==="increment"?"+":"-"})},G=()=>{const e=v.default(n.default["tedi-number-field__input-wrapper"],{[n.default["tedi-number-field__input-wrapper--with-suffix"]]:h,[n.default["tedi-number-field__input-wrapper--full-width"]]:z}),t=v.default(n.default["tedi-number-field__input"],f==null?void 0:f.className),r=()=>{var p;return(p=b==null?void 0:b.current)==null?void 0:p.focus()};return a.jsxs("div",{className:e,onClick:r,children:[a.jsx("input",{ref:b,id:x,"aria-describedby":g,"aria-invalid":w(s)?"true":"false",type:"number",inputMode:E,value:s,min:i,max:u,required:I,step:c,disabled:m,onChange:D,className:t,...f}),h&&a.jsx(J.Text,{element:"span",modifiers:"small",color:"tertiary",className:n.default["tedi-number-field__suffix"],children:h})]})},H=v.default(n.default["tedi-number-field"],{[n.default["tedi-number-field--invalid"]]:w(s)},{[n.default["tedi-number-field--disabled"]]:m},{[n.default["tedi-number-field--small"]]:_==="small"},q);return a.jsxs("div",{"data-name":"number-field",className:q,children:[a.jsx(X.FormLabel,{id:x,label:S,required:I,hideLabel:U,size:_}),a.jsxs("div",{className:H,children:[C("decrement"),G(),C("increment")]}),d&&a.jsx(Q.FeedbackText,{className:n.default["tedi-number-field__feedback"],...d,id:g}),M&&a.jsx("div",{"aria-live":"polite",className:"sr-only",children:M})]})};O.displayName="NumberField";exports.NumberField=O;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),v=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),J=require("../../base/typography/text/text.cjs.js"),K=require("../../buttons/button/button.cjs.js"),Q=require("../feedback-text/feedback-text.cjs.js"),X=require("../form-label/form-label.cjs.js"),n=require("./number-field.module.scss.cjs.js"),Y=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Z=require("../../../providers/label-provider/use-labels.cjs.js"),y=I=>{const{getCurrentBreakpointProps:P}=Y.useBreakpointProps(I.defaultServerBreakpoint),{id:x,label:S,hideLabel:U,required:q,className:j,size:_,inputMode:E="numeric",decimalPlaces:k,min:i,max:u,step:c=1,defaultValue:$,value:B,onChange:a,suffix:h,fullWidth:z=!1,disabled:m=!1,invalid:F=!1,helper:d,input:f}=P(I),{getLabel:M}=Z.useLabels(),b=o.useRef(null),[L,T]=o.useState(""),[V,g]=o.useState($??0),s=o.useMemo(()=>a&&typeof B<"u"?B:V,[a,B,V]),w=d?`${x}-helper`:void 0,C=o.useCallback(e=>{const t=i!==void 0&&e<i,r=u!==void 0&&e>u;return F||t||r||(d==null?void 0:d.type)==="error"},[F,d,u,i]),N=e=>Math.min(u??1/0,Math.max(i??-1/0,e)),R=e=>{const t=M("numberField.quantityUpdated",e);T(t),setTimeout(()=>{T("")},5e3)},W=e=>k!==void 0?parseFloat(e.toFixed(k)):e,A=e=>{let t=s;e==="increment"&&(t=t+c),e==="decrement"&&(t=t-c),t=N(t),t=W(t),R(t),a==null||a(t),g(t)},D=({currentTarget:{value:e}})=>{a==null||a(N(+e)),g(N(+e))},O=e=>{const t=e==="increment"?u!==void 0&&s>=u:i!==void 0&&s<=i,r=v.default(n.default["tedi-number-field__button"],n.default[`tedi-number-field__button--${e}`],{[n.default["tedi-number-field__button--disabled"]]:t||m}),p=M(`numberField.${e}`,c);return l.jsx(K.Button,{"aria-label":p,onClick:()=>A(e),disabled:t||m,visualType:"secondary",className:r,icon:{name:e==="increment"?"add":"remove"},size:_==="small"?"small":void 0,children:e==="increment"?"+":"-"})},G=()=>{const e=v.default(n.default["tedi-number-field__input-wrapper"],{[n.default["tedi-number-field__input-wrapper--with-suffix"]]:h,[n.default["tedi-number-field__input-wrapper--full-width"]]:z}),t=v.default(n.default["tedi-number-field__input"],f==null?void 0:f.className),r=()=>{var p;return(p=b==null?void 0:b.current)==null?void 0:p.focus()};return l.jsxs("div",{className:e,onClick:r,children:[l.jsx("input",{ref:b,id:x,"aria-describedby":w,"aria-invalid":C(s)?"true":"false",type:"number",inputMode:E,value:s,min:i,max:u,required:q,step:c,disabled:m,onChange:D,className:t,...f}),h&&l.jsx(J.Text,{element:"span",modifiers:"small",color:"tertiary",className:n.default["tedi-number-field__suffix"],children:h})]})},H=v.default(n.default["tedi-number-field"],{[n.default["tedi-number-field--invalid"]]:C(s)},{[n.default["tedi-number-field--disabled"]]:m},{[n.default["tedi-number-field--small"]]:_==="small"},j);return l.jsxs("div",{"data-name":"number-field",className:j,children:[l.jsx(X.FormLabel,{id:x,label:S,required:q,hideLabel:U,size:_}),l.jsxs("div",{className:H,children:[O("decrement"),G(),O("increment")]}),d&&l.jsx(Q.FeedbackText,{className:n.default["tedi-number-field__feedback"],...d,id:w}),L&&l.jsx("div",{"aria-live":"polite",className:"sr-only",children:L})]})};y.displayName="NumberField";exports.NumberField=y;exports.default=y;

package/src/tedi/components/form/number-field/number-field.es.js

@@ -20,13 +20,13 @@ const ie = (y) => {
     decimalPlaces: F,
     min: r,
     max: a,
-    step: o = 1,
+    step: u = 1,
     defaultValue: z,
     value: h,
     onChange: i,
     suffix: B,
     fullWidth: S = !1,
-    disabled: u = !1,
+    disabled: o = !1,
     invalid: M = !1,
     helper: l,
     input: m
@@ -46,19 +46,19 @@ const ie = (y) => {
     }, 5e3);
   }, A = (e) => F !== void 0 ? parseFloat(e.toFixed(F)) : e, D = (e) => {
     let t = s;
-    e === "increment" && (t = t + o), e === "decrement" && (t = t - o), t = I(t), t = A(t), W(t), i == null || i(t), C(t);
+    e === "increment" && (t = t + u), e === "decrement" && (t = t - u), t = I(t), t = A(t), W(t), i == null || i(t), C(t);
   }, G = ({ currentTarget: { value: e } }) => {
     i == null || i(I(+e)), C(I(+e));
   }, E = (e) => {
     const t = e === "increment" ? a !== void 0 && s >= a : r !== void 0 && s <= r, f = b(n["tedi-number-field__button"], n[`tedi-number-field__button--${e}`], {
-      [n["tedi-number-field__button--disabled"]]: t || u
-    }), p = V(`numberField.${e}`, o);
+      [n["tedi-number-field__button--disabled"]]: t || o
+    }), p = V(`numberField.${e}`, u);
     return /* @__PURE__ */ d(
       Y,
       {
         "aria-label": p,
         onClick: () => D(e),
-        disabled: t || u,
+        disabled: t || o,
         visualType: "secondary",
         className: f,
         icon: { name: e === "increment" ? "add" : "remove" },
@@ -88,8 +88,8 @@ const ie = (y) => {
           min: r,
           max: a,
           required: x,
-          step: o,
-          disabled: u,
+          step: u,
+          disabled: o,
           onChange: G,
           className: t,
           ...m
@@ -100,7 +100,7 @@ const ie = (y) => {
   }, J = b(
     n["tedi-number-field"],
     { [n["tedi-number-field--invalid"]]: g(s) },
-    { [n["tedi-number-field--disabled"]]: u },
+    { [n["tedi-number-field--disabled"]]: o },
     { [n["tedi-number-field--small"]]: _ === "small" },
     k
   );
@@ -117,5 +117,6 @@ const ie = (y) => {
 };
 ie.displayName = "NumberField";
 export {
-  ie as NumberField
+  ie as NumberField,
+  ie as default
 };

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;