@tedi-design-system/react 18.0.0-rc.3 → 18.0.0-rc.30

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

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

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

@@ -1,8 +1,8 @@
 import { jsxs as L, jsx as c } from "react/jsx-runtime";
 import _ from "../../../../../external/classnames/index.es.js";
 import { useCallback as D, useRef as W, useState as S, useEffect as se } from "react";
-import { Text as de } from "../../base/typography/text/text.es.js";
-import { Button as oe } from "../../buttons/button/button.es.js";
+import { Text as oe } from "../../base/typography/text/text.es.js";
+import { Button as de } from "../../buttons/button/button.es.js";
 import { FeedbackText as ue } from "../feedback-text/feedback-text.es.js";
 import { FormLabel as ce } from "../form-label/form-label.es.js";
 import n from "./number-field.module.scss.es.js";
@@ -23,7 +23,7 @@ const pe = (T) => {
     max: s,
     step: x = 1,
     defaultValue: O,
-    value: o,
+    value: d,
     onChange: i,
     suffix: h,
     fullWidth: Q = !1,
@@ -34,16 +34,16 @@ const pe = (T) => {
   } = A(T), X = K ?? (f && f > 0 || I === "," ? "decimal" : "numeric"), m = D(
     (e) => e === void 0 ? "" : I === "," ? String(e).replace(".", ",") : String(e),
     [I]
-  ), v = W(null), M = W(!1), [$, g] = S(""), [Y, k] = S(O), [Z, N] = S(() => m(o ?? O)), a = i && typeof o < "u" ? o : Y;
+  ), v = W(null), M = W(!1), [$, g] = S(""), [Y, k] = S(O), [Z, N] = S(() => m(d ?? O)), a = i && typeof d < "u" ? d : Y;
   se(() => {
-    !M.current && typeof o < "u" && N(m(o));
-  }, [o, m]);
+    !M.current && typeof d < "u" && N(m(d));
+  }, [d, m]);
   const z = r ? `${y}-helper` : void 0, P = D(
     (e) => {
       if (e === void 0)
         return F || (r == null ? void 0 : r.type) === "error";
-      const t = l !== void 0 && e < l, d = s !== void 0 && e > s;
-      return F || t || d || (r == null ? void 0 : r.type) === "error";
+      const t = l !== void 0 && e < l, o = s !== void 0 && e > s;
+      return F || t || o || (r == null ? void 0 : r.type) === "error";
     },
     [F, r, s, l]
   ), j = (e) => Math.min(s ?? 1 / 0, Math.max(l ?? -1 / 0, e)), ee = (e) => {
@@ -62,26 +62,26 @@ const pe = (T) => {
     const t = e.replace(",", ".");
     if (!/^-?(\d+(\.\d*)?|\.\d+)$/.test(t))
       return;
-    const d = parseFloat(t);
-    if (Number.isNaN(d)) return;
-    const u = j(d), V = q(u);
+    const o = parseFloat(t);
+    if (Number.isNaN(o)) return;
+    const u = j(o), V = q(u);
     V !== a && (i == null || i(V), k(V));
   }, ie = () => {
     M.current = !0;
   }, re = () => {
     M.current = !1, N(m(a));
   }, C = (e) => {
-    const t = a !== void 0 && (e === "increment" ? s !== void 0 && a >= s : l !== void 0 && a <= l), d = _(n["tedi-number-field__button"], n[`tedi-number-field__button--${e}`], {
+    const t = a !== void 0 && (e === "increment" ? s !== void 0 && a >= s : l !== void 0 && a <= l), o = _(n["tedi-number-field__button"], n[`tedi-number-field__button--${e}`], {
       [n["tedi-number-field__button--disabled"]]: t || p
     }), u = w(`numberField.${e}`, x);
     return /* @__PURE__ */ c(
-      oe,
+      de,
       {
         "aria-label": u,
         onClick: () => te(e),
         disabled: t || p,
         visualType: "secondary",
-        className: d,
+        className: o,
         icon: { name: e === "increment" ? "add" : "remove" },
         size: B === "small" ? "small" : void 0,
         children: e === "increment" ? "+" : "-"
@@ -119,7 +119,7 @@ const pe = (T) => {
           ...b
         }
       ),
-      h && /* @__PURE__ */ c(de, { element: "span", modifiers: "small", color: "tertiary", className: n["tedi-number-field__suffix"], children: h })
+      h && /* @__PURE__ */ c(oe, { element: "span", modifiers: "small", color: "tertiary", className: n["tedi-number-field__suffix"], children: h })
     ] });
   }, le = _(
     n["tedi-number-field"],
@@ -141,6 +141,5 @@ const pe = (T) => {
 };
 pe.displayName = "NumberField";
 export {
-  pe as NumberField,
-  pe as default
+  pe as NumberField
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("../../../../../external/classnames/index.cjs.js"),j=require("react"),v=require("../../buttons/button/button.cjs.js"),L=require("../textfield/textfield.cjs.js"),s=require("./search.module.scss.cjs.js"),N=require("../../../providers/label-provider/use-labels.cjs.js"),u=j.forwardRef(({placeholder:c,isClearable:d=!0,searchIcon:n="search",onSearch:a,onChange:o,button:e,ariaLabel:f,className:h,...t},_)=>{const{getLabel:l}=N.useLabels(),m=y=>{y.key==="Enter"&&(a==null||a(t.value))},x=()=>{a==null||a(t.value)},b={...t,ref:_,inputClassName:i.default(s.default["tedi-search__input"],e&&s.default["tedi-search__input--has-button"],h),placeholder:c,isClearable:d,onKeyDown:m,onChange:o,...e?{}:{icon:n}},p=c||l("search"),q=f??p;return r.jsxs("div",{className:i.default(s.default["tedi-search__wrapper"]),role:"search","aria-label":q,children:[r.jsx(L.TextField,{...b}),e&&r.jsx(v.Button,{...e,onClick:x,className:i.default(s.default["tedi-search__button"],e.className),"aria-label":e.children?void 0:l("search"),children:e.children??l("search")})]})});u.displayName="Search";exports.Search=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),i=require("../../../../../external/classnames/index.cjs.js"),v=require("react"),L=require("../../buttons/button/button.cjs.js"),N=require("../textfield/textfield.cjs.js"),s=require("./search.module.scss.cjs.js"),w=require("../../../providers/label-provider/use-labels.cjs.js"),u=v.forwardRef(({placeholder:c,isClearable:d=!0,searchIcon:n="search",onSearch:a,onChange:o,button:e,ariaLabel:f,className:h,input:x,...t},_)=>{const{getLabel:r}=w.useLabels(),b=j=>{j.key==="Enter"&&(a==null||a(t.value))},m=()=>{a==null||a(t.value)},p={...t,ref:_,inputClassName:i.default(s.default["tedi-search__input"],e&&s.default["tedi-search__input--has-button"],h),placeholder:c,isClearable:d,onKeyDown:b,onChange:o,input:{...x,role:"searchbox"},...e?{}:{icon:n}},q=c||r("search"),y=f??q;return l.jsxs("div",{className:i.default(s.default["tedi-search__wrapper"]),role:"search","aria-label":y,children:[l.jsx(N.TextField,{...p}),e&&l.jsx(L.Button,{...e,onClick:m,className:i.default(s.default["tedi-search__button"],e.className),"aria-label":e.children?void 0:r("search"),children:e.children??r("search")})]})});u.displayName="Search";exports.Search=u;

package/src/tedi/components/form/search/search.es.js

@@ -1,40 +1,42 @@
-import { jsxs as v, jsx as c } from "react/jsx-runtime";
+import { jsxs as w, jsx as c } from "react/jsx-runtime";
 import l from "../../../../../external/classnames/index.es.js";
-import { forwardRef as w } from "react";
-import { Button as L } from "../../buttons/button/button.es.js";
+import { forwardRef as L } from "react";
+import { Button as b } from "../../buttons/button/button.es.js";
 import { TextField as k } from "../textfield/textfield.es.js";
 import a from "./search.module.scss.es.js";
 import { useLabels as C } from "../../../providers/label-provider/use-labels.es.js";
-const b = w(
+const j = L(
   ({
     placeholder: t,
-    isClearable: m = !0,
-    searchIcon: o = "search",
+    isClearable: o = !0,
+    searchIcon: m = "search",
     onSearch: s,
     onChange: d,
     button: e,
     ariaLabel: p,
     className: n,
+    input: f,
     ...r
-  }, f) => {
-    const { getLabel: i } = C(), h = (y) => {
-      y.key === "Enter" && (s == null || s(r.value));
+  }, h) => {
+    const { getLabel: i } = C(), u = (v) => {
+      v.key === "Enter" && (s == null || s(r.value));
     }, _ = () => {
       s == null || s(r.value);
-    }, u = {
+    }, x = {
       ...r,
-      ref: f,
+      ref: h,
       inputClassName: l(a["tedi-search__input"], e && a["tedi-search__input--has-button"], n),
       placeholder: t,
-      isClearable: m,
-      onKeyDown: h,
+      isClearable: o,
+      onKeyDown: u,
       onChange: d,
-      ...e ? {} : { icon: o }
-    }, N = t || i("search"), x = p ?? N;
-    return /* @__PURE__ */ v("div", { className: l(a["tedi-search__wrapper"]), role: "search", "aria-label": x, children: [
-      /* @__PURE__ */ c(k, { ...u }),
+      input: { ...f, role: "searchbox" },
+      ...e ? {} : { icon: m }
+    }, N = t || i("search"), y = p ?? N;
+    return /* @__PURE__ */ w("div", { className: l(a["tedi-search__wrapper"]), role: "search", "aria-label": y, children: [
+      /* @__PURE__ */ c(k, { ...x }),
       e && /* @__PURE__ */ c(
-        L,
+        b,
         {
           ...e,
           onClick: _,
@@ -46,7 +48,7 @@ const b = w(
     ] });
   }
 );
-b.displayName = "Search";
+j.displayName = "Search";
 export {
-  b as Search
+  j as Search
 };

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

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

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

@@ -1,3 +1,3 @@
-import { MenuPortalProps } from 'react-select/dist/declarations/src/components/Menu';
+import { MenuPortalProps } from '../../../../../../node_modules/react-select/dist/declarations/src/components/Menu';
 import { IGroupedOptions, ISelectOption } from '../select';
 export declare const SelectMenuPortal: (props: MenuPortalProps<ISelectOption, boolean, IGroupedOptions<ISelectOption>>) => JSX.Element;

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

@@ -1 +1 @@
-"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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react/jsx-runtime"),I=require("../../../../../../external/classnames/index.cjs.js"),E=require("../../../misc/option-content/option-content.cjs.js"),a=require("../select.module.scss.cjs.js"),t=require("./select-bulk-helpers.cjs.js"),O=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),g=({renderOption:f,...e})=>{var L;const o=e.data.value===t.SELECT_ALL_VALUE,u=t.isGroupSentinel(e.data),S=!!((L=e.data.customData)!=null&&L.__tediInGroup);let c=e.isSelected,r=!1;if(o){const i=t.getEnabledOptions(e.options).filter(n=>n.value!==t.SELECT_ALL_VALUE),l=(e.getValue()??[]).filter(n=>n.value!==t.SELECT_ALL_VALUE);c=t.areAllSelected(l,i),r=t.isIndeterminate(l,i)}else if(u){const i=e.options,b=i.findIndex(d=>d.value===e.data.value),l=[];for(let d=b+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||l.push(s)}const n=e.getValue()??[];c=t.areAllSelected(n,l),r=t.isIndeterminate(n,l)}const m=I.default(a.default["tedi-select__option"],{[a.default["tedi-select__option--disabled"]]:e.isDisabled},{[a.default["tedi-select__option--focused"]]:e.isFocused},{[a.default["tedi-select__option--select-all"]]:o},{[a.default["tedi-select__option--group"]]:u},{[a.default["tedi-select__option--indented"]]:S}),{tabIndex:A,...x}=e.innerProps;return _.jsx(O.c.Option,{...e,innerProps:{...x,tabIndex:A,role:"option","aria-selected":c},className:m,children:f&&!o&&!u?f(e):_.jsx(E.OptionContent,{type:"checkbox",indicatorSemantics:"control",selected:c,indeterminate:r,disabled:e.isDisabled,children:_.jsx(E.OptionContent.Label,{children:e.children})})})};exports.SelectMultiOption=g;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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