@tedi-design-system/react 19.1.0-rc.2 → 19.1.0-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "19.1.0-rc.2",
+  "version": "19.1.0-rc.3",
   "description": "TEDI Design System React component library — accessible, reusable UI components. Docs & live examples: https://storybook.tedi.ee/react/rc/",
   "type": "module",
   "sideEffects": false,

package/src/tedi/components/filter/filter/filter.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),ae=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),oe=require("../../base/icon/icon.cjs.js"),E=require("../../buttons/button/button.cjs.js"),ce=require("../../form/checkbox/checkbox.cjs.js"),We=require("../../form/search/search.cjs.js"),d=require("../../overlays/dropdown/dropdown.cjs.js"),Ze=require("../../tags/status-badge/status-badge.cjs.js"),n=require("./filter.module.scss.cjs.js"),He=require("./filter-group-context.cjs.js"),Je=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Ke=require("../../../providers/label-provider/use-labels.cjs.js"),de=v=>v==="large"?24:18,Qe=v=>{const b=l.useId();return v??`tedi-filter-${b.replace(/[^a-zA-Z0-9-]/g,"")}`},ue=l.forwardRef((v,b)=>{const{getCurrentBreakpointProps:fe}=Je.useBreakpointProps(v.defaultServerBreakpoint),{text:g,value:_,disabled:he=!1,className:pe,id:W,selected:k,defaultSelected:Z=!1,onSelectedChange:C,selectedValue:j,defaultSelectedValue:me,onSelectedValueChange:u,multiselect:H=!1,selectedValues:f,defaultSelectedValues:be,onSelectedValuesChange:a,options:S=[],searchable:xe=!1,showSelectAll:ve=!1,selectAllLabel:ge,showClear:J=!1,clearLabel:je,preserveLabel:K=!1,children:Q,onClear:y,prepend:I,hidePrependWhenSelected:Se=!0,append:M,placement:we="bottom-start",variant:_e="primary",size:D="default",searchLabel:U}=fe(v),{getLabel:V}=Ke.useLabels(),ke=ge??V("filter.select-all"),X=je??V("filter.clear-selection"),i=l.useContext(He.FilterGroupContext),L=Qe(W),Ce=l.useRef(null),P=S.length>0,F=!!Q,x=P||F,h=P&&!H,p=P&&H,N=!!(i!=null&&i.isManaged)&&_!==void 0&&!x,O=N&&!(i!=null&&i.multiselect),Y=he||((i==null?void 0:i.disabled)??!1),[Le,Fe]=l.useState(Z),[Ne,ee]=l.useState(me??""),[ye,T]=l.useState(be??[]);F&&(Z||C)&&k===void 0&&console.warn("[Filter] `defaultSelected` and `onSelectedChange` are not honoured in custom-content mode (when `children` is provided). Drive the selected state yourself via the controlled `selected` prop, e.g. `selected={Boolean(value)}`.");const B=k!==void 0?k:Le,m=j!==void 0?j:Ne,r=f!==void 0?f:ye,w=l.useMemo(()=>N?i.isSelected(_):p?r.length>0:h?m!=="":B,[N,_,i,p,r,h,m,B]),q=l.useMemo(()=>{var e;return!h||!m?null:((e=S.find(s=>s.value===m))==null?void 0:e.label)??null},[h,m,S]),Be=l.useMemo(()=>h?q&&K?`${g}: ${q}`:q??g:g,[h,q,K,g]),[$,te]=l.useState(!1),[z,le]=l.useState("");l.useEffect(()=>{$||le("")},[$]);const R=l.useMemo(()=>{const e=z.trim().toLowerCase();return e?S.filter(s=>s.label.toLowerCase().includes(e)):S},[z,S]),o=l.useMemo(()=>R.filter(e=>!e.disabled),[R]),A=l.useMemo(()=>o.length===0?!1:o.every(e=>r.includes(e.value)),[o,r]),qe=l.useMemo(()=>{if(o.length===0)return!1;const e=o.filter(s=>r.includes(s.value)).length;return e>0&&e<o.length},[o,r]),Ie=l.useCallback(e=>{Ce.current=e,typeof b=="function"?b(e):b&&(b.current=e)},[b]),Me=l.useCallback(()=>{if(N){i.selectFilter(_);return}const e=!B;k===void 0&&Fe(e),C==null||C(e)},[N,i,_,B,k,C]),De=l.useCallback(e=>{const s=m===e?"":e;j===void 0&&ee(s),u==null||u(s)},[m,j,u]),Pe=l.useCallback(e=>{const s=r.includes(e)?r.filter(c=>c!==e):[...r,e];f===void 0&&T(s),a==null||a(s)},[r,f,a]),Oe=l.useCallback(()=>{let e;if(A){const s=new Set(o.map(c=>c.value));e=r.filter(c=>!s.has(c))}else{const s=new Set(r);o.forEach(c=>s.add(c.value)),e=[...s]}f===void 0&&T(e),a==null||a(e)},[A,o,r,f,a]),se=l.useCallback(()=>{F?y==null||y():p?(f===void 0&&T([]),a==null||a([])):h&&(j===void 0&&ee(""),u==null||u("")),te(!1)},[F,y,p,f,a,h,j,u]),Te=w&&Se,$e=O?"radio":void 0,ze=O?w:void 0,Re=!x&&!O?w:void 0,Ae=t.jsxs(t.Fragment,{children:[!x&&w&&t.jsx(oe.Icon,{className:n.default["tedi-filter__icon"],name:"check",size:de(D),color:"inherit"}),I!=null&&t.jsx("span",{className:ae.default(n.default["tedi-filter__prepend"],{[n.default["tedi-filter__prepend--hidden"]]:Te}),children:I}),t.jsx("span",{className:n.default["tedi-filter__text"],children:Be}),M!=null&&t.jsx("span",{className:n.default["tedi-filter__append"],children:M}),p&&w&&r.length>0&&t.jsx(Ze.StatusBadge,{className:n.default["tedi-filter__count"],color:Y?"neutral":"brand",children:String(r.length)}),x&&t.jsx(oe.Icon,{className:n.default["tedi-filter__icon"],name:"arrow_drop_down",filled:!0,size:de(D),color:"inherit"})]}),re=ae.default(n.default["tedi-filter"],n.default[`tedi-filter--${_e}`],D==="large"&&n.default["tedi-filter--large"],w&&n.default["tedi-filter--selected"],pe),ne=t.jsx(E.Button,{ref:Ie,id:W,type:"button",disabled:Y,className:n.default["tedi-filter__button"],onClick:x?void 0:Me,role:x?void 0:$e,"aria-checked":ze,"aria-pressed":Re,noStyle:!0,children:Ae});if(!x)return t.jsx("div",{className:re,children:ne});const G=p&&ve?0:null,Ge=G!==null?1:0,Ee=()=>R.map((e,s)=>{const c=p?r.includes(e.value):m===e.value,ie=s+Ge;return p?t.jsx(d.Dropdown.Item,{index:ie,asChild:!0,disabled:e.disabled,closeOnSelect:!1,children:t.jsx(ce.Checkbox,{id:`${L}-option-${s}`,label:e.label,value:e.value,checked:c,disabled:e.disabled,onChange:()=>Pe(e.value),name:`${L}-options`})},e.value):t.jsx(d.Dropdown.Item,{index:ie,disabled:e.disabled,active:c,onClick:()=>De(e.value),children:e.label},e.value)});return t.jsx("div",{className:re,children:t.jsxs(d.Dropdown,{open:$,onOpenChange:te,placement:we,width:"auto",children:[t.jsx(d.Dropdown.Trigger,{children:ne}),t.jsx(d.Dropdown.Content,{children:F?t.jsxs(t.Fragment,{children:[t.jsx("div",{className:n.default["tedi-filter-dropdown__custom-content"],children:Q}),J&&t.jsxs(t.Fragment,{children:[t.jsx(d.Dropdown.Separator,{}),t.jsx("div",{className:n.default["tedi-filter-dropdown__clear"],children:t.jsx(E.Button,{visualType:"neutral",size:"small",type:"button",iconLeft:"refresh",onClick:se,children:X})})]})]}):t.jsxs(t.Fragment,{children:[xe&&t.jsxs(t.Fragment,{children:[t.jsx("div",{className:n.default["tedi-filter-dropdown__search"],children:t.jsx(We.Search,{id:`${L}-search`,label:U??g,hideLabel:!0,ariaLabel:U??g,value:z,onChange:le})}),t.jsx(d.Dropdown.Separator,{})]}),G!==null&&t.jsxs(t.Fragment,{children:[t.jsx(d.Dropdown.Item,{index:G,asChild:!0,closeOnSelect:!1,children:t.jsx(ce.Checkbox,{id:`${L}-select-all`,label:ke,value:"select-all",checked:A,indeterminate:qe,onChange:Oe,name:`${L}-select-all`})}),t.jsx(d.Dropdown.Separator,{})]}),Ee(),J&&t.jsxs(t.Fragment,{children:[t.jsx(d.Dropdown.Separator,{}),t.jsx("div",{className:n.default["tedi-filter-dropdown__clear"],children:t.jsx(E.Button,{visualType:"neutral",size:"small",type:"button",iconLeft:"refresh",onClick:se,children:X})})]})]})})]})})});ue.displayName="Filter";exports.Filter=ue;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),W=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),ue=require("../../base/icon/icon.cjs.js"),Z=require("../../buttons/button/button.cjs.js"),fe=require("../../form/checkbox/checkbox.cjs.js"),Ze=require("../../form/search/search.cjs.js"),c=require("../../overlays/dropdown/dropdown.cjs.js"),Je=require("../../tags/status-badge/status-badge.cjs.js"),r=require("./filter.module.scss.cjs.js"),Ke=require("./filter-group-context.cjs.js"),Qe=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Ue=require("../../../providers/label-provider/use-labels.cjs.js"),he=b=>b==="large"?24:18,Ve=b=>{const x=l.useId();return b??`tedi-filter-${x.replace(/[^a-zA-Z0-9-]/g,"")}`},pe=l.forwardRef((b,x)=>{const{getCurrentBreakpointProps:me}=Qe.useBreakpointProps(b.defaultServerBreakpoint),{text:g,value:_,disabled:xe=!1,className:ve,id:J,selected:k,defaultSelected:K=!1,onSelectedChange:C,selectedValue:j,defaultSelectedValue:be,onSelectedValueChange:u,multiselect:Q=!1,selectedValues:f,defaultSelectedValues:ge,onSelectedValuesChange:a,options:S=[],searchable:je=!1,showSelectAll:Se=!1,selectAllLabel:we,showClear:U=!1,clearLabel:_e,preserveLabel:V=!1,children:X,onClear:B,prepend:D,hidePrependWhenSelected:ke=!0,append:P,placement:Ce="bottom-start",variant:Le="primary",size:$="default",searchLabel:Y,maxHeight:M}=me(b),{getLabel:ee}=Ue.useLabels(),ye=we??ee("filter.select-all"),te=_e??ee("filter.clear-selection"),L=M===void 0?void 0:typeof M=="number"?`${M}px`:M,i=l.useContext(Ke.FilterGroupContext),y=Ve(J),Ne=l.useRef(null),O=S.length>0,N=!!X,v=O||N,h=O&&!Q,p=O&&Q,F=!!(i!=null&&i.isManaged)&&_!==void 0&&!v,T=F&&!(i!=null&&i.multiselect),le=xe||((i==null?void 0:i.disabled)??!1),[Fe,Be]=l.useState(K),[Me,se]=l.useState(be??""),[qe,z]=l.useState(ge??[]);N&&(K||C)&&k===void 0&&console.warn("[Filter] `defaultSelected` and `onSelectedChange` are not honoured in custom-content mode (when `children` is provided). Drive the selected state yourself via the controlled `selected` prop, e.g. `selected={Boolean(value)}`.");const q=k!==void 0?k:Fe,m=j!==void 0?j:Me,n=f!==void 0?f:qe,w=l.useMemo(()=>F?i.isSelected(_):p?n.length>0:h?m!=="":q,[F,_,i,p,n,h,m,q]),I=l.useMemo(()=>{var e;return!h||!m?null:((e=S.find(s=>s.value===m))==null?void 0:e.label)??null},[h,m,S]),Ie=l.useMemo(()=>h?I&&V?`${g}: ${I}`:I??g:g,[h,I,V,g]),[R,re]=l.useState(!1),[A,ne]=l.useState("");l.useEffect(()=>{R||ne("")},[R]);const G=l.useMemo(()=>{const e=A.trim().toLowerCase();return e?S.filter(s=>s.label.toLowerCase().includes(e)):S},[A,S]),o=l.useMemo(()=>G.filter(e=>!e.disabled),[G]),H=l.useMemo(()=>o.length===0?!1:o.every(e=>n.includes(e.value)),[o,n]),De=l.useMemo(()=>{if(o.length===0)return!1;const e=o.filter(s=>n.includes(s.value)).length;return e>0&&e<o.length},[o,n]),Pe=l.useCallback(e=>{Ne.current=e,typeof x=="function"?x(e):x&&(x.current=e)},[x]),$e=l.useCallback(()=>{if(F){i.selectFilter(_);return}const e=!q;k===void 0&&Be(e),C==null||C(e)},[F,i,_,q,k,C]),Oe=l.useCallback(e=>{const s=m===e?"":e;j===void 0&&se(s),u==null||u(s)},[m,j,u]),Te=l.useCallback(e=>{const s=n.includes(e)?n.filter(d=>d!==e):[...n,e];f===void 0&&z(s),a==null||a(s)},[n,f,a]),ze=l.useCallback(()=>{let e;if(H){const s=new Set(o.map(d=>d.value));e=n.filter(d=>!s.has(d))}else{const s=new Set(n);o.forEach(d=>s.add(d.value)),e=[...s]}f===void 0&&z(e),a==null||a(e)},[H,o,n,f,a]),ie=l.useCallback(()=>{N?B==null||B():p?(f===void 0&&z([]),a==null||a([])):h&&(j===void 0&&se(""),u==null||u("")),re(!1)},[N,B,p,f,a,h,j,u]),Re=w&&ke,Ae=T?"radio":void 0,Ge=T?w:void 0,He=!v&&!T?w:void 0,Ee=t.jsxs(t.Fragment,{children:[!v&&w&&t.jsx(ue.Icon,{className:r.default["tedi-filter__icon"],name:"check",size:he($),color:"inherit"}),D!=null&&t.jsx("span",{className:W.default(r.default["tedi-filter__prepend"],{[r.default["tedi-filter__prepend--hidden"]]:Re}),children:D}),t.jsx("span",{className:r.default["tedi-filter__text"],children:Ie}),P!=null&&t.jsx("span",{className:r.default["tedi-filter__append"],children:P}),p&&w&&n.length>0&&t.jsx(Je.StatusBadge,{className:r.default["tedi-filter__count"],color:le?"neutral":"brand",children:String(n.length)}),v&&t.jsx(ue.Icon,{className:r.default["tedi-filter__icon"],name:"arrow_drop_down",filled:!0,size:he($),color:"inherit"})]}),ae=W.default(r.default["tedi-filter"],r.default[`tedi-filter--${Le}`],$==="large"&&r.default["tedi-filter--large"],w&&r.default["tedi-filter--selected"],ve),oe=t.jsx(Z.Button,{ref:Pe,id:J,type:"button",disabled:le,className:r.default["tedi-filter__button"],onClick:v?void 0:$e,role:v?void 0:Ae,"aria-checked":Ge,"aria-pressed":He,noStyle:!0,children:Ee});if(!v)return t.jsx("div",{className:ae,children:oe});const E=p&&Se?0:null,We=E!==null?1:0,de=()=>G.map((e,s)=>{const d=p?n.includes(e.value):m===e.value,ce=s+We;return p?t.jsx(c.Dropdown.Item,{index:ce,asChild:!0,disabled:e.disabled,closeOnSelect:!1,children:t.jsx(fe.Checkbox,{id:`${y}-option-${s}`,label:e.label,value:e.value,checked:d,disabled:e.disabled,onChange:()=>Te(e.value),name:`${y}-options`})},e.value):t.jsx(c.Dropdown.Item,{index:ce,disabled:e.disabled,active:d,onClick:()=>Oe(e.value),children:e.label},e.value)});return t.jsx("div",{className:ae,children:t.jsxs(c.Dropdown,{open:R,onOpenChange:re,placement:Ce,width:"auto",children:[t.jsx(c.Dropdown.Trigger,{children:oe}),t.jsx(c.Dropdown.Content,{children:N?t.jsxs(t.Fragment,{children:[t.jsx("div",{className:W.default(r.default["tedi-filter-dropdown__custom-content"],{[r.default["tedi-filter-dropdown__options"]]:L!==void 0}),style:L!==void 0?{maxHeight:L}:void 0,children:X}),U&&t.jsxs(t.Fragment,{children:[t.jsx(c.Dropdown.Separator,{}),t.jsx("div",{className:r.default["tedi-filter-dropdown__clear"],children:t.jsx(Z.Button,{visualType:"neutral",size:"small",type:"button",iconLeft:"refresh",onClick:ie,children:te})})]})]}):t.jsxs(t.Fragment,{children:[je&&t.jsxs(t.Fragment,{children:[t.jsx("div",{className:r.default["tedi-filter-dropdown__search"],children:t.jsx(Ze.Search,{id:`${y}-search`,label:Y??g,hideLabel:!0,ariaLabel:Y??g,value:A,onChange:ne})}),t.jsx(c.Dropdown.Separator,{})]}),E!==null&&t.jsxs(t.Fragment,{children:[t.jsx(c.Dropdown.Item,{index:E,asChild:!0,closeOnSelect:!1,children:t.jsx(fe.Checkbox,{id:`${y}-select-all`,label:ye,value:"select-all",checked:H,indeterminate:De,onChange:ze,name:`${y}-select-all`})}),t.jsx(c.Dropdown.Separator,{})]}),L!==void 0?t.jsx("div",{className:r.default["tedi-filter-dropdown__options"],style:{maxHeight:L},children:de()}):de(),U&&t.jsxs(t.Fragment,{children:[t.jsx(c.Dropdown.Separator,{}),t.jsx("div",{className:r.default["tedi-filter-dropdown__clear"],children:t.jsx(Z.Button,{visualType:"neutral",size:"small",type:"button",iconLeft:"refresh",onClick:ie,children:te})})]})]})})]})})});pe.displayName="Filter";exports.Filter=pe;

package/src/tedi/components/filter/filter/filter.d.ts

@@ -93,6 +93,11 @@ export interface FilterProps extends BreakpointSupport<FilterBreakpointProps> {
     placement?: React.ComponentProps<typeof Dropdown>['placement'];
     /** Accessible label for the search input. Falls back to `text`. */
     searchLabel?: string;
+    /**
+     * Caps the height of the dropdown's option list. The list scrolls when it's taller, while the
+     * search and "Clear selection" stay pinned. `number` = px, `string` = any CSS length.
+     */
+    maxHeight?: React.ComponentProps<typeof Dropdown>['maxHeight'];
 }
 export declare const Filter: React.ForwardRefExoticComponent<FilterProps & React.RefAttributes<HTMLButtonElement>>;
 export default Filter;

package/src/tedi/components/filter/filter/filter.es.js

@@ -1,235 +1,245 @@
 import { jsxs as p, Fragment as g, jsx as t } from "react/jsx-runtime";
-import ue from "../../../../../external/classnames/index.es.js";
-import Je, { forwardRef as Ke, useContext as Qe, useRef as Ue, useState as O, useMemo as S, useEffect as Ve, useCallback as C } from "react";
-import { Icon as fe } from "../../base/icon/icon.es.js";
-import { Button as J } from "../../buttons/button/button.es.js";
-import { Checkbox as me } from "../../form/checkbox/checkbox.es.js";
-import { Search as Xe } from "../../form/search/search.es.js";
+import Q from "../../../../../external/classnames/index.es.js";
+import Qe, { forwardRef as Ue, useContext as Ve, useRef as Xe, useState as P, useMemo as _, useEffect as Ye, useCallback as y } from "react";
+import { Icon as pe } from "../../base/icon/icon.es.js";
+import { Button as U } from "../../buttons/button/button.es.js";
+import { Checkbox as ve } from "../../form/checkbox/checkbox.es.js";
+import { Search as et } from "../../form/search/search.es.js";
 import { Dropdown as c } from "../../overlays/dropdown/dropdown.es.js";
-import { StatusBadge as Ye } from "../../tags/status-badge/status-badge.es.js";
-import i from "./filter.module.scss.es.js";
-import { FilterGroupContext as et } from "./filter-group-context.es.js";
-import { useBreakpointProps as tt } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as lt } from "../../../providers/label-provider/use-labels.es.js";
-const he = (_) => _ === "large" ? 24 : 18, rt = (_) => {
-  const v = Je.useId();
-  return _ ?? `tedi-filter-${v.replace(/[^a-zA-Z0-9-]/g, "")}`;
-}, it = Ke((_, v) => {
-  const { getCurrentBreakpointProps: pe } = tt(_.defaultServerBreakpoint), {
+import { StatusBadge as tt } from "../../tags/status-badge/status-badge.es.js";
+import r from "./filter.module.scss.es.js";
+import { FilterGroupContext as lt } from "./filter-group-context.es.js";
+import { useBreakpointProps as rt } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as it } from "../../../providers/label-provider/use-labels.es.js";
+const be = (S) => S === "large" ? 24 : 18, nt = (S) => {
+  const v = Qe.useId();
+  return S ?? `tedi-filter-${v.replace(/[^a-zA-Z0-9-]/g, "")}`;
+}, st = Ue((S, v) => {
+  const { getCurrentBreakpointProps: ge } = rt(S.defaultServerBreakpoint), {
     text: w,
-    value: k,
-    disabled: ve = !1,
-    className: be,
-    id: K,
-    selected: y,
-    defaultSelected: Q = !1,
+    value: C,
+    disabled: _e = !1,
+    className: Se,
+    id: V,
+    selected: k,
+    defaultSelected: X = !1,
     onSelectedChange: I,
-    selectedValue: L,
-    defaultSelectedValue: ge,
+    selectedValue: x,
+    defaultSelectedValue: we,
     onSelectedValueChange: d,
-    multiselect: U = !1,
+    multiselect: Y = !1,
     selectedValues: u,
-    defaultSelectedValues: Se,
+    defaultSelectedValues: xe,
     onSelectedValuesChange: s,
     options: N = [],
-    searchable: _e = !1,
-    showSelectAll: we = !1,
-    selectAllLabel: Le,
-    showClear: V = !1,
-    clearLabel: Ne,
-    preserveLabel: X = !1,
-    children: Y,
-    onClear: P,
-    prepend: A,
-    hidePrependWhenSelected: xe = !0,
-    append: R,
-    placement: Ce = "bottom-start",
-    variant: ke = "primary",
-    size: M = "default",
-    searchLabel: ee
-  } = pe(_), { getLabel: te } = lt(), ye = Le ?? te("filter.select-all"), le = Ne ?? te("filter.clear-selection"), n = Qe(et), B = rt(K), Ie = Ue(null), G = N.length > 0, $ = !!Y, b = G || $, f = G && !U, m = G && U, F = !!(n != null && n.isManaged) && k !== void 0 && !b, D = F && !(n != null && n.multiselect), re = ve || ((n == null ? void 0 : n.disabled) ?? !1), [Be, $e] = O(Q), [Fe, ie] = O(ge ?? ""), [Oe, j] = O(Se ?? []);
-  $ && (Q || I) && y === void 0 && console.warn(
+    searchable: Ne = !1,
+    showSelectAll: Le = !1,
+    selectAllLabel: ye,
+    showClear: ee = !1,
+    clearLabel: Ce,
+    preserveLabel: te = !1,
+    children: le,
+    onClear: T,
+    prepend: R,
+    hidePrependWhenSelected: ke = !0,
+    append: G,
+    placement: Ie = "bottom-start",
+    variant: $e = "primary",
+    size: H = "default",
+    searchLabel: re,
+    maxHeight: z
+  } = ge(S), { getLabel: ie } = it(), Be = ye ?? ie("filter.select-all"), ne = Ce ?? ie("filter.clear-selection"), $ = z === void 0 ? void 0 : typeof z == "number" ? `${z}px` : z, n = Ve(lt), B = nt(V), Fe = Xe(null), D = N.length > 0, F = !!le, b = D || F, f = D && !Y, m = D && Y, O = !!(n != null && n.isManaged) && C !== void 0 && !b, j = O && !(n != null && n.multiselect), se = _e || ((n == null ? void 0 : n.disabled) ?? !1), [Oe, Pe] = P(X), [Te, oe] = P(we ?? ""), [ze, E] = P(xe ?? []);
+  F && (X || I) && k === void 0 && console.warn(
     "[Filter] `defaultSelected` and `onSelectedChange` are not honoured in custom-content mode (when `children` is provided). Drive the selected state yourself via the controlled `selected` prop, e.g. `selected={Boolean(value)}`."
   );
-  const T = y !== void 0 ? y : Be, h = L !== void 0 ? L : Fe, r = u !== void 0 ? u : Oe, x = S(() => F ? n.isSelected(k) : m ? r.length > 0 : f ? h !== "" : T, [F, k, n, m, r, f, h, T]), z = S(() => {
+  const A = k !== void 0 ? k : Oe, h = x !== void 0 ? x : Te, i = u !== void 0 ? u : ze, L = _(() => O ? n.isSelected(C) : m ? i.length > 0 : f ? h !== "" : A, [O, C, n, m, i, f, h, A]), M = _(() => {
     var e;
     return !f || !h ? null : ((e = N.find((l) => l.value === h)) == null ? void 0 : e.label) ?? null;
-  }, [f, h, N]), Pe = S(() => f ? z && X ? `${w}: ${z}` : z ?? w : w, [f, z, X, w]), [E, ne] = O(!1), [W, se] = O("");
-  Ve(() => {
-    E || se("");
-  }, [E]);
-  const Z = S(() => {
-    const e = W.trim().toLowerCase();
+  }, [f, h, N]), Ae = _(() => f ? M && te ? `${w}: ${M}` : M ?? w : w, [f, M, te, w]), [W, ae] = P(!1), [Z, ce] = P("");
+  Ye(() => {
+    W || ce("");
+  }, [W]);
+  const q = _(() => {
+    const e = Z.trim().toLowerCase();
     return e ? N.filter((l) => l.label.toLowerCase().includes(e)) : N;
-  }, [W, N]), a = S(() => Z.filter((e) => !e.disabled), [Z]), q = S(() => a.length === 0 ? !1 : a.every((e) => r.includes(e.value)), [a, r]), Te = S(() => {
-    if (a.length === 0) return !1;
-    const e = a.filter((l) => r.includes(l.value)).length;
-    return e > 0 && e < a.length;
-  }, [a, r]), ze = C(
+  }, [Z, N]), o = _(() => q.filter((e) => !e.disabled), [q]), J = _(() => o.length === 0 ? !1 : o.every((e) => i.includes(e.value)), [o, i]), Me = _(() => {
+    if (o.length === 0) return !1;
+    const e = o.filter((l) => i.includes(l.value)).length;
+    return e > 0 && e < o.length;
+  }, [o, i]), Re = y(
     (e) => {
-      Ie.current = e, typeof v == "function" ? v(e) : v && (v.current = e);
+      Fe.current = e, typeof v == "function" ? v(e) : v && (v.current = e);
     },
     [v]
-  ), Ae = C(() => {
-    if (F) {
-      n.selectFilter(k);
+  ), Ge = y(() => {
+    if (O) {
+      n.selectFilter(C);
       return;
     }
-    const e = !T;
-    y === void 0 && $e(e), I == null || I(e);
-  }, [F, n, k, T, y, I]), Re = C(
+    const e = !A;
+    k === void 0 && Pe(e), I == null || I(e);
+  }, [O, n, C, A, k, I]), He = y(
     (e) => {
       const l = h === e ? "" : e;
-      L === void 0 && ie(l), d == null || d(l);
+      x === void 0 && oe(l), d == null || d(l);
     },
-    [h, L, d]
-  ), Me = C(
+    [h, x, d]
+  ), De = y(
     (e) => {
-      const l = r.includes(e) ? r.filter((o) => o !== e) : [...r, e];
-      u === void 0 && j(l), s == null || s(l);
+      const l = i.includes(e) ? i.filter((a) => a !== e) : [...i, e];
+      u === void 0 && E(l), s == null || s(l);
     },
-    [r, u, s]
-  ), Ge = C(() => {
+    [i, u, s]
+  ), je = y(() => {
     let e;
-    if (q) {
-      const l = new Set(a.map((o) => o.value));
-      e = r.filter((o) => !l.has(o));
+    if (J) {
+      const l = new Set(o.map((a) => a.value));
+      e = i.filter((a) => !l.has(a));
     } else {
-      const l = new Set(r);
-      a.forEach((o) => l.add(o.value)), e = [...l];
+      const l = new Set(i);
+      o.forEach((a) => l.add(a.value)), e = [...l];
     }
-    u === void 0 && j(e), s == null || s(e);
-  }, [q, a, r, u, s]), ae = C(() => {
-    $ ? P == null || P() : m ? (u === void 0 && j([]), s == null || s([])) : f && (L === void 0 && ie(""), d == null || d("")), ne(!1);
+    u === void 0 && E(e), s == null || s(e);
+  }, [J, o, i, u, s]), de = y(() => {
+    F ? T == null || T() : m ? (u === void 0 && E([]), s == null || s([])) : f && (x === void 0 && oe(""), d == null || d("")), ae(!1);
   }, [
-    $,
-    P,
+    F,
+    T,
     m,
     u,
     s,
     f,
-    L,
+    x,
     d
-  ]), De = x && xe, je = D ? "radio" : void 0, Ee = D ? x : void 0, We = !b && !D ? x : void 0, Ze = /* @__PURE__ */ p(g, { children: [
-    !b && x && /* @__PURE__ */ t(fe, { className: i["tedi-filter__icon"], name: "check", size: he(M), color: "inherit" }),
-    A != null && /* @__PURE__ */ t(
+  ]), Ee = L && ke, We = j ? "radio" : void 0, Ze = j ? L : void 0, qe = !b && !j ? L : void 0, Je = /* @__PURE__ */ p(g, { children: [
+    !b && L && /* @__PURE__ */ t(pe, { className: r["tedi-filter__icon"], name: "check", size: be(H), color: "inherit" }),
+    R != null && /* @__PURE__ */ t(
       "span",
       {
-        className: ue(i["tedi-filter__prepend"], {
-          [i["tedi-filter__prepend--hidden"]]: De
+        className: Q(r["tedi-filter__prepend"], {
+          [r["tedi-filter__prepend--hidden"]]: Ee
         }),
-        children: A
+        children: R
       }
     ),
-    /* @__PURE__ */ t("span", { className: i["tedi-filter__text"], children: Pe }),
-    R != null && /* @__PURE__ */ t("span", { className: i["tedi-filter__append"], children: R }),
-    m && x && r.length > 0 && /* @__PURE__ */ t(Ye, { className: i["tedi-filter__count"], color: re ? "neutral" : "brand", children: String(r.length) }),
+    /* @__PURE__ */ t("span", { className: r["tedi-filter__text"], children: Ae }),
+    G != null && /* @__PURE__ */ t("span", { className: r["tedi-filter__append"], children: G }),
+    m && L && i.length > 0 && /* @__PURE__ */ t(tt, { className: r["tedi-filter__count"], color: se ? "neutral" : "brand", children: String(i.length) }),
     b && /* @__PURE__ */ t(
-      fe,
+      pe,
       {
-        className: i["tedi-filter__icon"],
+        className: r["tedi-filter__icon"],
         name: "arrow_drop_down",
         filled: !0,
-        size: he(M),
+        size: be(H),
         color: "inherit"
       }
     )
-  ] }), oe = ue(
-    i["tedi-filter"],
-    i[`tedi-filter--${ke}`],
-    M === "large" && i["tedi-filter--large"],
-    x && i["tedi-filter--selected"],
-    be
-  ), ce = /* @__PURE__ */ t(
-    J,
+  ] }), ue = Q(
+    r["tedi-filter"],
+    r[`tedi-filter--${$e}`],
+    H === "large" && r["tedi-filter--large"],
+    L && r["tedi-filter--selected"],
+    Se
+  ), fe = /* @__PURE__ */ t(
+    U,
     {
-      ref: ze,
-      id: K,
+      ref: Re,
+      id: V,
       type: "button",
-      disabled: re,
-      className: i["tedi-filter__button"],
-      onClick: b ? void 0 : Ae,
-      role: b ? void 0 : je,
-      "aria-checked": Ee,
-      "aria-pressed": We,
+      disabled: se,
+      className: r["tedi-filter__button"],
+      onClick: b ? void 0 : Ge,
+      role: b ? void 0 : We,
+      "aria-checked": Ze,
+      "aria-pressed": qe,
       noStyle: !0,
-      children: Ze
+      children: Je
     }
   );
   if (!b)
-    return /* @__PURE__ */ t("div", { className: oe, children: ce });
-  const H = m && we ? 0 : null, qe = H !== null ? 1 : 0, He = () => Z.map((e, l) => {
-    const o = m ? r.includes(e.value) : h === e.value, de = l + qe;
-    return m ? /* @__PURE__ */ t(c.Item, { index: de, asChild: !0, disabled: e.disabled, closeOnSelect: !1, children: /* @__PURE__ */ t(
-      me,
+    return /* @__PURE__ */ t("div", { className: ue, children: fe });
+  const K = m && Le ? 0 : null, Ke = K !== null ? 1 : 0, me = () => q.map((e, l) => {
+    const a = m ? i.includes(e.value) : h === e.value, he = l + Ke;
+    return m ? /* @__PURE__ */ t(c.Item, { index: he, asChild: !0, disabled: e.disabled, closeOnSelect: !1, children: /* @__PURE__ */ t(
+      ve,
       {
         id: `${B}-option-${l}`,
         label: e.label,
         value: e.value,
-        checked: o,
+        checked: a,
         disabled: e.disabled,
-        onChange: () => Me(e.value),
+        onChange: () => De(e.value),
         name: `${B}-options`
       }
     ) }, e.value) : /* @__PURE__ */ t(
       c.Item,
       {
-        index: de,
+        index: he,
         disabled: e.disabled,
-        active: o,
-        onClick: () => Re(e.value),
+        active: a,
+        onClick: () => He(e.value),
         children: e.label
       },
       e.value
     );
   });
-  return /* @__PURE__ */ t("div", { className: oe, children: /* @__PURE__ */ p(c, { open: E, onOpenChange: ne, placement: Ce, width: "auto", children: [
-    /* @__PURE__ */ t(c.Trigger, { children: ce }),
-    /* @__PURE__ */ t(c.Content, { children: $ ? /* @__PURE__ */ p(g, { children: [
-      /* @__PURE__ */ t("div", { className: i["tedi-filter-dropdown__custom-content"], children: Y }),
-      V && /* @__PURE__ */ p(g, { children: [
+  return /* @__PURE__ */ t("div", { className: ue, children: /* @__PURE__ */ p(c, { open: W, onOpenChange: ae, placement: Ie, width: "auto", children: [
+    /* @__PURE__ */ t(c.Trigger, { children: fe }),
+    /* @__PURE__ */ t(c.Content, { children: F ? /* @__PURE__ */ p(g, { children: [
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: Q(r["tedi-filter-dropdown__custom-content"], {
+            [r["tedi-filter-dropdown__options"]]: $ !== void 0
+          }),
+          style: $ !== void 0 ? { maxHeight: $ } : void 0,
+          children: le
+        }
+      ),
+      ee && /* @__PURE__ */ p(g, { children: [
         /* @__PURE__ */ t(c.Separator, {}),
-        /* @__PURE__ */ t("div", { className: i["tedi-filter-dropdown__clear"], children: /* @__PURE__ */ t(J, { visualType: "neutral", size: "small", type: "button", iconLeft: "refresh", onClick: ae, children: le }) })
+        /* @__PURE__ */ t("div", { className: r["tedi-filter-dropdown__clear"], children: /* @__PURE__ */ t(U, { visualType: "neutral", size: "small", type: "button", iconLeft: "refresh", onClick: de, children: ne }) })
       ] })
     ] }) : /* @__PURE__ */ p(g, { children: [
-      _e && /* @__PURE__ */ p(g, { children: [
-        /* @__PURE__ */ t("div", { className: i["tedi-filter-dropdown__search"], children: /* @__PURE__ */ t(
-          Xe,
+      Ne && /* @__PURE__ */ p(g, { children: [
+        /* @__PURE__ */ t("div", { className: r["tedi-filter-dropdown__search"], children: /* @__PURE__ */ t(
+          et,
           {
             id: `${B}-search`,
-            label: ee ?? w,
+            label: re ?? w,
             hideLabel: !0,
-            ariaLabel: ee ?? w,
-            value: W,
-            onChange: se
+            ariaLabel: re ?? w,
+            value: Z,
+            onChange: ce
           }
         ) }),
         /* @__PURE__ */ t(c.Separator, {})
       ] }),
-      H !== null && /* @__PURE__ */ p(g, { children: [
-        /* @__PURE__ */ t(c.Item, { index: H, asChild: !0, closeOnSelect: !1, children: /* @__PURE__ */ t(
-          me,
+      K !== null && /* @__PURE__ */ p(g, { children: [
+        /* @__PURE__ */ t(c.Item, { index: K, asChild: !0, closeOnSelect: !1, children: /* @__PURE__ */ t(
+          ve,
           {
             id: `${B}-select-all`,
-            label: ye,
+            label: Be,
             value: "select-all",
-            checked: q,
-            indeterminate: Te,
-            onChange: Ge,
+            checked: J,
+            indeterminate: Me,
+            onChange: je,
             name: `${B}-select-all`
           }
         ) }),
         /* @__PURE__ */ t(c.Separator, {})
       ] }),
-      He(),
-      V && /* @__PURE__ */ p(g, { children: [
+      $ !== void 0 ? /* @__PURE__ */ t("div", { className: r["tedi-filter-dropdown__options"], style: { maxHeight: $ }, children: me() }) : me(),
+      ee && /* @__PURE__ */ p(g, { children: [
         /* @__PURE__ */ t(c.Separator, {}),
-        /* @__PURE__ */ t("div", { className: i["tedi-filter-dropdown__clear"], children: /* @__PURE__ */ t(J, { visualType: "neutral", size: "small", type: "button", iconLeft: "refresh", onClick: ae, children: le }) })
+        /* @__PURE__ */ t("div", { className: r["tedi-filter-dropdown__clear"], children: /* @__PURE__ */ t(U, { visualType: "neutral", size: "small", type: "button", iconLeft: "refresh", onClick: de, children: ne }) })
       ] })
     ] }) })
   ] }) });
 });
-it.displayName = "Filter";
+st.displayName = "Filter";
 export {
-  it as Filter
+  st as Filter
 };

package/src/tedi/components/filter/filter/filter.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-filter":"tedi-filter-e3f2f618","tedi-filter__button":"tedi-filter__button-b7abc5ed","tedi-filter__text":"tedi-filter__text-2c4eaab6","tedi-filter__icon":"tedi-filter__icon-1b8e93f2","tedi-filter__prepend":"tedi-filter__prepend-68dc0007","tedi-filter__append":"tedi-filter__append-bdb27679","tedi-filter__prepend--hidden":"tedi-filter__prepend--hidden-5039af1e","tedi-filter__count":"tedi-filter__count-d72acead","tedi-filter--primary":"tedi-filter--primary-837108e8","tedi-filter--selected":"tedi-filter--selected-7273f310","tedi-filter--secondary":"tedi-filter--secondary-8aaf488e","tedi-filter--large":"tedi-filter--large-f7f46174","tedi-filter-group":"tedi-filter-group-9d16304d","tedi-filter-dropdown__custom-content":"tedi-filter-dropdown__custom-content-6e851b26","tedi-filter-dropdown__search":"tedi-filter-dropdown__search-dbb4e1a3","tedi-filter-dropdown__clear":"tedi-filter-dropdown__clear-fa4e6a11"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-filter":"tedi-filter-e3f2f618","tedi-filter__button":"tedi-filter__button-b7abc5ed","tedi-filter__text":"tedi-filter__text-2c4eaab6","tedi-filter__icon":"tedi-filter__icon-1b8e93f2","tedi-filter__prepend":"tedi-filter__prepend-68dc0007","tedi-filter__append":"tedi-filter__append-bdb27679","tedi-filter__prepend--hidden":"tedi-filter__prepend--hidden-5039af1e","tedi-filter__count":"tedi-filter__count-d72acead","tedi-filter--primary":"tedi-filter--primary-837108e8","tedi-filter--selected":"tedi-filter--selected-7273f310","tedi-filter--secondary":"tedi-filter--secondary-8aaf488e","tedi-filter--large":"tedi-filter--large-f7f46174","tedi-filter-group":"tedi-filter-group-9d16304d","tedi-filter-dropdown__custom-content":"tedi-filter-dropdown__custom-content-6e851b26","tedi-filter-dropdown__search":"tedi-filter-dropdown__search-dbb4e1a3","tedi-filter-dropdown__clear":"tedi-filter-dropdown__clear-fa4e6a11","tedi-filter-dropdown__options":"tedi-filter-dropdown__options-45f2e9a4"};exports.default=e;

package/src/tedi/components/filter/filter/filter.module.scss.es.js

@@ -14,7 +14,8 @@ const e = {
   "tedi-filter-group": "tedi-filter-group-9d16304d",
   "tedi-filter-dropdown__custom-content": "tedi-filter-dropdown__custom-content-6e851b26",
   "tedi-filter-dropdown__search": "tedi-filter-dropdown__search-dbb4e1a3",
-  "tedi-filter-dropdown__clear": "tedi-filter-dropdown__clear-fa4e6a11"
+  "tedi-filter-dropdown__clear": "tedi-filter-dropdown__clear-fa4e6a11",
+  "tedi-filter-dropdown__options": "tedi-filter-dropdown__options-45f2e9a4"
 };
 export {
   e as default

package/src/tedi/components/overlays/dropdown/dropdown.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),e=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),H=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),O=require("./dropdown.module.scss.cjs.js"),$=require("./dropdown-content/dropdown-content.cjs.js"),z=require("./dropdown-context.cjs.js"),G=require("./dropdown-helpers.cjs.js"),J=require("./dropdown-item/dropdown-item.cjs.js"),K=require("./dropdown-separator/dropdown-separator.cjs.js"),Q=require("./dropdown-trigger/dropdown-trigger.cjs.js"),V=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),X=require("../../../providers/label-provider/use-labels.cjs.js"),Y=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),m=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),Z=4,d=w=>{var I;const{getCurrentBreakpointProps:S}=V.useBreakpointProps(w.defaultServerBreakpoint),{children:F,modal:v=!1,divided:P=!1,width:R="auto",variant:u="default",open:p,defaultOpen:b=!1,onOpenChange:a,defaultActiveIndex:o,placement:f="bottom-start",className:j}=S(w),{getLabel:k}=X.useLabels(),y=e.useFloatingNodeId(),q=t.useRef([]),[l,g]=t.useState(o??null),[h,B]=t.useState(null),[N,T]=t.useState(b),n=p??N;t.useEffect(()=>{n||g(o??null)},[n,o]);const x=t.useCallback(i=>{p===void 0&&T(i),a==null||a(i)},[p,a]),U=e.useFloating({nodeId:y,open:n,placement:f,onOpenChange:x,middleware:[m.offset(Z),m.flip(),m.shift()],whileElementsMounted:Y.autoUpdate}),{context:r,refs:s,x:_,y:L,strategy:M}=U,D=e.useInteractions([e.useClick(r),e.useRole(r,{role:"menu"}),e.useDismiss(r),e.useListNavigation(r,{listRef:q,activeIndex:l,onNavigate:g,loop:!0,selectedIndex:o??null,focusItemOnOpen:o!==null?!0:"auto"})]),W={open:n,setOpen:x,refs:s,listItemsRef:q,activeIndex:l,setActiveIndex:g,placement:f,content:h,setContent:B,divided:P,variant:u,...D},E=(I=s.reference.current)==null?void 0:I.getBoundingClientRect().width,A=t.useMemo(()=>{const i=s.reference.current;if(!i)return;const C=i.offsetParent;if(C)return C.getBoundingClientRect().width},[s.reference.current]);return c.jsxs(z.DropdownContext.Provider,{value:W,children:[F,c.jsx(e.FloatingPortal,{children:n&&c.jsx(e.FloatingFocusManager,{context:r,modal:v,visuallyHiddenDismiss:v?k("close"):!1,children:c.jsx("div",{...D.getFloatingProps({ref:s.setFloating,className:H.default(O.default["tedi-dropdown"],{[O.default[`tedi-dropdown--${u}`]]:u==="tree"},j),style:{position:M,left:_??0,top:L??0,width:G.resolveDropdownWidth(R,E,A)},role:"menu","aria-orientation":"vertical","aria-activedescendant":l!==null?`dropdown-item-${l}`:void 0}),"data-placement":f,"data-state":n?"open":"closed",children:h})})})]})};d.Trigger=Q.DropdownTrigger;d.Content=$.DropdownContent;d.Item=J.DropdownItem;d.Separator=K.DropdownSeparator;exports.Dropdown=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),e=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),A=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),v=require("./dropdown.module.scss.cjs.js"),z=require("./dropdown-content/dropdown-content.cjs.js"),G=require("./dropdown-context.cjs.js"),J=require("./dropdown-helpers.cjs.js"),K=require("./dropdown-item/dropdown-item.cjs.js"),Q=require("./dropdown-separator/dropdown-separator.cjs.js"),V=require("./dropdown-trigger/dropdown-trigger.cjs.js"),X=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Y=require("../../../providers/label-provider/use-labels.cjs.js"),Z=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),h=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),ee=4,a=x=>{var O;const{getCurrentBreakpointProps:F}=X.useBreakpointProps(x.defaultServerBreakpoint),{children:P,modal:q=!1,divided:R=!1,width:b="auto",variant:p="default",open:f,defaultOpen:y=!1,onOpenChange:l,defaultActiveIndex:n,placement:g="bottom-start",maxHeight:c,className:j}=F(x),{getLabel:N}=Y.useLabels(),_=e.useFloatingNodeId(),D=t.useRef([]),[u,m]=t.useState(n??null),[w,k]=t.useState(null),[B,T]=t.useState(y),o=f??B;t.useEffect(()=>{o||m(n??null)},[o,n]);const I=t.useCallback(i=>{f===void 0&&T(i),l==null||l(i)},[f,l]),U=e.useFloating({nodeId:_,open:o,placement:g,onOpenChange:I,middleware:[h.offset(ee),h.flip(),h.shift()],whileElementsMounted:Z.autoUpdate}),{context:r,refs:s,x:H,y:L,strategy:M}=U,C=e.useInteractions([e.useClick(r),e.useRole(r,{role:"menu"}),e.useDismiss(r),e.useListNavigation(r,{listRef:D,activeIndex:u,onNavigate:m,loop:!0,selectedIndex:n??null,focusItemOnOpen:n!==null?!0:"auto"})]),W={open:o,setOpen:I,refs:s,listItemsRef:D,activeIndex:u,setActiveIndex:m,placement:g,content:w,setContent:k,divided:R,variant:p,...C},E=(O=s.reference.current)==null?void 0:O.getBoundingClientRect().width,$=t.useMemo(()=>{const i=s.reference.current;if(!i)return;const S=i.offsetParent;if(S)return S.getBoundingClientRect().width},[s.reference.current]);return d.jsxs(G.DropdownContext.Provider,{value:W,children:[P,d.jsx(e.FloatingPortal,{children:o&&d.jsx(e.FloatingFocusManager,{context:r,modal:q,visuallyHiddenDismiss:q?N("close"):!1,children:d.jsx("div",{...C.getFloatingProps({ref:s.setFloating,className:A.default(v.default["tedi-dropdown"],{[v.default[`tedi-dropdown--${p}`]]:p==="tree"},j),style:{position:M,left:H??0,top:L??0,width:J.resolveDropdownWidth(b,E,$)},role:"menu","aria-orientation":"vertical","aria-activedescendant":u!==null?`dropdown-item-${u}`:void 0}),"data-placement":g,"data-state":o?"open":"closed",children:c!==void 0?d.jsx("div",{className:v.default["tedi-dropdown__scroll"],style:{maxHeight:typeof c=="number"?`${c}px`:c},children:w}):w})})})]})};a.Trigger=V.DropdownTrigger;a.Content=z.DropdownContent;a.Item=K.DropdownItem;a.Separator=Q.DropdownSeparator;exports.Dropdown=a;

package/src/tedi/components/overlays/dropdown/dropdown.d.ts

@@ -34,6 +34,14 @@ type DropdownBreakpointProps = {
      * @default 'default'
      */
     variant?: 'default' | 'tree';
+    /**
+     * Restricts the height of the dropdown's scrollable body. When the content is taller,
+     * the body scrolls vertically while any sticky regions (e.g. a Filter search / clear) stay pinned.
+     * - `number` – fixed max height in pixels
+     * - `string` – any valid CSS length (e.g. `'20rem'`, `'50vh'`)
+     * @default undefined (no restriction)
+     */
+    maxHeight?: number | string;
 };
 export interface DropdownProps extends BreakpointSupport<DropdownBreakpointProps> {
     /**