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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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