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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "19.1.0-rc.2",
+  "version": "19.1.0-rc.4",
   "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/form/time-field/time-field.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),c=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),y=require("../../../../../external/classnames/index.cjs.js"),f=require("react"),A=require("../textfield/textfield.cjs.js"),ge=require("../time-picker/time-picker.cjs.js"),d=require("./time-field.module.scss.cjs.js"),H=require("./time-field-helpers.cjs.js"),ke=require("./time-picker-modal/time-picker-modal.cjs.js"),xe=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),K=require("../../../helpers/hooks/use-breakpoint.cjs.js"),F=require("../../overlays/dropdown/dropdown.cjs.js"),he=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),B=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),G=_=>{const{getCurrentBreakpointProps:J}=xe.useBreakpointProps(_.defaultServerBreakpoint),{id:L,label:Q,value:u,defaultValue:W,onChange:C,readOnly:h=!1,disabled:l=!1,required:X,placeholder:Y,inputProps:t,stepMinutes:M=1,className:O,availableTimes:a,modal:P=!1,modalProps:Z}=_,{useNativePicker:$=!1,timePickerTrigger:N="button",showPicker:n=!0,availableTimesVariant:w="grid-buttons",clearable:ee=!0}=J(_),D=u!==void 0,[te,R]=f.useState(u??W??""),m=D?u:te,[T,j]=f.useState(!1),[ie,U]=f.useState(!1),p=N==="input",s=$,ne=K.default(),g=!s&&n&&!h&&!l&&(P===!0||typeof P=="string"&&K.isBreakpointBelow(ne,P)),oe=c.useFloating({open:T,onOpenChange:j,placement:p?"bottom-start":"bottom-end",middleware:[B.offset(H.TIMEPICKER_OFFSET),B.flip(),B.shift()],whileElementsMounted:he.autoUpdate}),{refs:q,context:b,x:re,y:se,strategy:le}=oe,ae=c.useClick(b),de=c.useDismiss(b),ce=c.useRole(b,{role:"listbox"}),S=n&&p&&!h&&!l&&!s&&!g,V=c.useInteractions([...S?[ae]:[],de,ce]),k=e=>{const o=e.trim();D||R(o),C==null||C(o)},ue=e=>{var v;const o=e.target.value??"";(v=t==null?void 0:t.onBlur)==null||v.call(t,e);const r=H.normalizeTime(o);r!==null&&r!==o&&k(r)};f.useEffect(()=>{u!==void 0&&R(u)},[u]);const x=f.useRef(null);f.useEffect(()=>{var e;(e=x.current)!=null&&e.inner&&q.setReference(x.current.inner)},[q]);const fe=()=>{var o;const e=(o=x.current)==null?void 0:o.input;if(e){if(typeof e.showPicker=="function"){e.showPicker();return}e.focus()}},me=()=>j(e=>!e),E=()=>U(!0),pe=()=>{!n||l||(s?fe():g?E():N==="button"&&me())},z=g&&p&&!h?()=>{E()}:void 0,I={...t,id:L,label:Q,value:m,placeholder:Y,readOnly:h||!s&&p,disabled:l||(t==null?void 0:t.disabled),icon:n?"schedule":{name:"schedule",color:"inherit"},isClearable:ee,required:X,onIconClick:n?pe:void 0,onChange:k,onBlur:ue,className:y.default(d.default["tedi-time-field__textfield"],{[d.default["tedi-time-field__icon--disabled"]]:!n||l},{[d.default["tedi-time-field__textfield--disabled"]]:l||(t==null?void 0:t.disabled)},{[d.default["tedi-time-field--native"]]:s}),input:{...t==null?void 0:t.input,...s&&{type:"time"},...z&&{onClick:z}}};if(!s&&n&&!l&&w==="dropdown"&&!!(a!=null&&a.length)){const e=a.indexOf(m),o=e>=0?e:0;return i.jsxs(F.Dropdown,{width:"trigger",defaultActiveIndex:o,children:[i.jsx(F.Dropdown.Trigger,{children:i.jsx("div",{className:y.default(d.default["tedi-time-field__container"],O,{[d.default["tedi-time-field__container--native"]]:s}),children:i.jsx(A.TextField,{ref:x,...I,input:{...I.input,...!p&&{onClick:r=>r.stopPropagation()}}})})}),i.jsx(F.Dropdown.Content,{children:a.map((r,v)=>i.jsx(F.Dropdown.Item,{index:v,active:r===m,onClick:()=>k(r),children:r},r))})]})}return i.jsxs(i.Fragment,{children:[i.jsx("div",{className:y.default(d.default["tedi-time-field__container"],O),...S?V.getReferenceProps():{},"aria-haspopup":n?"listbox":void 0,tabIndex:-1,children:i.jsx(A.TextField,{ref:x,"aria-expanded":n?T:void 0,...I})}),g&&i.jsx(ke.TimePickerModal,{open:ie,onOpenChange:U,value:m,onConfirm:k,stepMinutes:M,availableTimes:a,gridVariant:w==="grid-radio"?"radio":"button",modalProps:Z}),!s&&n&&!l&&!g&&i.jsx(c.FloatingPortal,{children:T&&i.jsx(c.FloatingFocusManager,{context:b,modal:!1,initialFocus:-1,children:i.jsx("div",{ref:q.setFloating,...V.getFloatingProps({style:{position:le,top:se??0,left:re??0}}),children:i.jsx(ge.TimePicker,{value:m,stepMinutes:M,availableTimes:a,onChange:e=>{k(e),a&&j(!1)},gridVariant:w==="grid-radio"?"radio":"button",className:d.default["tedi-time-field__picker-wrapper"]})})})})]})};G.displayName="TimeField";exports.TimeField=G;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),u=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),M=require("../../../../../external/classnames/index.cjs.js"),m=require("react"),J=require("../textfield/textfield.cjs.js"),Pe=require("../time-picker/time-picker.cjs.js"),c=require("./time-field.module.scss.cjs.js"),Q=require("./time-field-helpers.cjs.js"),Ce=require("./time-picker-modal/time-picker-modal.cjs.js"),_e=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Te=require("../../../providers/label-provider/use-labels.cjs.js"),W=require("../../../helpers/hooks/use-breakpoint.cjs.js"),P=require("../../overlays/dropdown/dropdown.cjs.js"),je=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),N=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),X=C=>{const{getCurrentBreakpointProps:Y}=_e.useBreakpointProps(C.defaultServerBreakpoint),{getLabel:Z}=Te.useLabels(),{id:$,label:ee,value:f,defaultValue:te,onChange:_,readOnly:h=!1,disabled:a=!1,required:ie,placeholder:ne,inputProps:t,stepMinutes:R=1,className:D,availableTimes:l,modal:T=!1,modalProps:oe}=C,{useNativePicker:re=!1,timePickerTrigger:j="button",showPicker:o=!0,availableTimesVariant:q="grid-buttons",clearable:se=!0}=Y(C),E=f!==void 0,[ae,S]=m.useState(f??te??""),g=E?f:ae,[w,I]=m.useState(!1),[U,V]=m.useState(!1),p=j==="input",n=re,le=W.default(),d=!n&&o&&!h&&!a&&(T===!0||typeof T=="string"&&W.isBreakpointBelow(le,T)),de=u.useFloating({open:w,onOpenChange:I,placement:p?"bottom-start":"bottom-end",middleware:[N.offset(Q.TIMEPICKER_OFFSET),N.flip(),N.shift()],whileElementsMounted:je.autoUpdate}),{refs:B,context:v,x:ce,y:ue,strategy:fe}=de,pe=u.useClick(v),me=u.useDismiss(v),ge=u.useRole(v,{role:"listbox"}),L=o&&p&&!h&&!a&&!n&&!d,z=u.useInteractions([...L?[pe]:[],me,ge]),x=e=>{const r=e.trim();E||S(r),_==null||_(r)},xe=e=>{var F;const r=e.target.value??"";(F=t==null?void 0:t.onBlur)==null||F.call(t,e);const s=Q.normalizeTime(r);s!==null&&s!==r&&x(s)};m.useEffect(()=>{f!==void 0&&S(f)},[f]);const k=m.useRef(null);m.useEffect(()=>{var e;(e=k.current)!=null&&e.inner&&B.setReference(k.current.inner)},[B]);const ke=()=>{var r;const e=(r=k.current)==null?void 0:r.input;if(e){if(typeof e.showPicker=="function"){e.showPicker();return}e.focus()}},be=()=>I(e=>!e),A=()=>V(!0),he=()=>{!o||a||(n?ke():d?A():j==="button"&&be())},H=d&&p&&!h?()=>{A()}:void 0,y=!n&&o&&!a&&q==="dropdown"&&!!(l!=null&&l.length),K=d?"dialog":"listbox",G=d?U:w,ve=o&&!n&&!y&&(j==="button"||d),Fe=o&&p&&!n&&!y,O={...t,id:$,label:ee,value:g,placeholder:ne,readOnly:h||!n&&p,disabled:a||(t==null?void 0:t.disabled),icon:o?"schedule":{name:"schedule",color:"inherit"},isClearable:se,required:ie,onIconClick:o?he:void 0,iconButtonProps:{"aria-label":Z("time-field.open-picker"),...ve&&{"aria-haspopup":K,"aria-expanded":G},...t==null?void 0:t.iconButtonProps},onChange:x,onBlur:xe,className:M.default(c.default["tedi-time-field__textfield"],{[c.default["tedi-time-field__icon--disabled"]]:!o||a},{[c.default["tedi-time-field__textfield--disabled"]]:a||(t==null?void 0:t.disabled)},{[c.default["tedi-time-field--native"]]:n}),input:{...t==null?void 0:t.input,...n&&{type:"time"},...H&&{onClick:H},...Fe&&{role:"combobox","aria-haspopup":K,"aria-expanded":G}}};if(y){const e=l.indexOf(g),r=e>=0?e:0;return i.jsxs(P.Dropdown,{width:"trigger",defaultActiveIndex:r,children:[i.jsx(P.Dropdown.Trigger,{children:i.jsx("div",{role:"combobox",className:M.default(c.default["tedi-time-field__container"],D,{[c.default["tedi-time-field__container--native"]]:n}),children:i.jsx(J.TextField,{ref:k,...O,input:{...O.input,...!p&&{onClick:s=>s.stopPropagation()}}})})}),i.jsx(P.Dropdown.Content,{children:l.map((s,F)=>i.jsx(P.Dropdown.Item,{index:F,active:s===g,onClick:()=>x(s),children:s},s))})]})}const b={...L?z.getReferenceProps():{}};return delete b.role,delete b["aria-haspopup"],delete b["aria-expanded"],delete b["aria-controls"],i.jsxs(i.Fragment,{children:[i.jsx("div",{className:M.default(c.default["tedi-time-field__container"],D),...b,tabIndex:-1,children:i.jsx(J.TextField,{ref:k,...O})}),d&&i.jsx(Ce.TimePickerModal,{open:U,onOpenChange:V,value:g,onConfirm:x,stepMinutes:R,availableTimes:l,gridVariant:q==="grid-radio"?"radio":"button",modalProps:oe}),!n&&o&&!a&&!d&&i.jsx(u.FloatingPortal,{children:w&&i.jsx(u.FloatingFocusManager,{context:v,modal:!1,initialFocus:-1,children:i.jsx("div",{ref:B.setFloating,...z.getFloatingProps({style:{position:fe,top:ue??0,left:ce??0}}),children:i.jsx(Pe.TimePicker,{value:g,stepMinutes:R,availableTimes:l,onChange:e=>{x(e),l&&I(!1)},gridVariant:q==="grid-radio"?"radio":"button",className:c.default["tedi-time-field__picker-wrapper"]})})})})]})};X.displayName="TimeField";exports.TimeField=X;