@tedi-design-system/react 18.0.0-rc.2 → 18.0.0-rc.20

package/src/tedi/components/content/table/table.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-table":"tedi-table-f4707778","tedi-table__toolbar":"tedi-table__toolbar-7ccf8a04","tedi-table__scroll":"tedi-table__scroll-a9c9ce5f","tedi-table__table":"tedi-table__table-0c156cdb","tedi-table__caption":"tedi-table__caption-378edbc2","tedi-table__head":"tedi-table__head-549b3a97","tedi-table__header-cell":"tedi-table__header-cell-31f2955e","tedi-table__row":"tedi-table__row-bcd5867d","tedi-table__cell":"tedi-table__cell-95d3876c","tedi-table__cell--align-left":"tedi-table__cell--align-left-2fbf07e9","tedi-table__cell--align-center":"tedi-table__cell--align-center-7aae1b56","tedi-table__cell--align-right":"tedi-table__cell--align-right-ec62c9b8","tedi-table__cell--valign-top":"tedi-table__cell--valign-top-af74bcaa","tedi-table__cell--valign-middle":"tedi-table__cell--valign-middle-86b5d5c3","tedi-table__cell--valign-bottom":"tedi-table__cell--valign-bottom-17cd68db","tedi-table__cell--placeholder":"tedi-table__cell--placeholder-c015ed76","tedi-table--small":"tedi-table--small-63dad8b3","tedi-table__foot":"tedi-table__foot-81a5fd8a","tedi-table__cell--footer":"tedi-table__cell--footer-6db3119e","tedi-table__row--selected":"tedi-table__row--selected-4e592b36","tedi-table__row--dragging":"tedi-table__row--dragging-a5ef9418","tedi-table__row--drag-over":"tedi-table__row--drag-over-6d93e8b7","tedi-table__row--drag-preview":"tedi-table__row--drag-preview-47e2dd99","tedi-table__header-cell--dragging":"tedi-table__header-cell--dragging-06a46b18","tedi-table__header-cell--drag-over":"tedi-table__header-cell--drag-over-f252af8e","tedi-table__cell--drag-over":"tedi-table__cell--drag-over-cbc1dbfb","tedi-table__header-cell--drag-preview":"tedi-table__header-cell--drag-preview-9bb286ec","tedi-table__row--picked-up":"tedi-table__row--picked-up-d3b1dea5","tedi-table__header-cell--picked-up":"tedi-table__header-cell--picked-up-15995295","tedi-table__drag-handle--picked-up":"tedi-table__drag-handle--picked-up-f844be33","tedi-table__sr-only":"tedi-table__sr-only-63bcee78","tedi-table__header-cell-inner":"tedi-table__header-cell-inner-56364d8d","tedi-table__cell--drag-handle":"tedi-table__cell--drag-handle-d53d19c1","tedi-table__drag-handle":"tedi-table__drag-handle-9672fabe","tedi-table__row--clickable":"tedi-table__row--clickable-05139b72","tedi-table__row--sub-component":"tedi-table__row--sub-component-effed53b","tedi-table__row--sub-row":"tedi-table__row--sub-row-3d164bb0","tedi-table__cell--sub-component":"tedi-table__cell--sub-component-39f49de2","tedi-table__row--filter":"tedi-table__row--filter-549a00f2","tedi-table--striped":"tedi-table--striped-213db29e","tedi-table__body":"tedi-table__body-622a274c","tedi-table--row-hover":"tedi-table--row-hover-399b73a2","tedi-table__row--active":"tedi-table__row--active-3d6fa5fc","tedi-table--vertical-borders":"tedi-table--vertical-borders-7daec7da","tedi-table--borderless":"tedi-table--borderless-32051e6f","tedi-table--has-pagination":"tedi-table--has-pagination-1eb2a663","tedi-table__pagination":"tedi-table__pagination-2bb8beb7","tedi-table--sticky-first-column":"tedi-table--sticky-first-column-0b93c772","tedi-table--sticky-header":"tedi-table--sticky-header-d8ee7437"};exports.default=e;

package/src/tedi/components/content/table/table.module.scss.es.js

@@ -0,0 +1,54 @@
+const e = {
+  "tedi-table": "tedi-table-f4707778",
+  "tedi-table__toolbar": "tedi-table__toolbar-7ccf8a04",
+  "tedi-table__scroll": "tedi-table__scroll-a9c9ce5f",
+  "tedi-table__table": "tedi-table__table-0c156cdb",
+  "tedi-table__caption": "tedi-table__caption-378edbc2",
+  "tedi-table__head": "tedi-table__head-549b3a97",
+  "tedi-table__header-cell": "tedi-table__header-cell-31f2955e",
+  "tedi-table__row": "tedi-table__row-bcd5867d",
+  "tedi-table__cell": "tedi-table__cell-95d3876c",
+  "tedi-table__cell--align-left": "tedi-table__cell--align-left-2fbf07e9",
+  "tedi-table__cell--align-center": "tedi-table__cell--align-center-7aae1b56",
+  "tedi-table__cell--align-right": "tedi-table__cell--align-right-ec62c9b8",
+  "tedi-table__cell--valign-top": "tedi-table__cell--valign-top-af74bcaa",
+  "tedi-table__cell--valign-middle": "tedi-table__cell--valign-middle-86b5d5c3",
+  "tedi-table__cell--valign-bottom": "tedi-table__cell--valign-bottom-17cd68db",
+  "tedi-table__cell--placeholder": "tedi-table__cell--placeholder-c015ed76",
+  "tedi-table--small": "tedi-table--small-63dad8b3",
+  "tedi-table__foot": "tedi-table__foot-81a5fd8a",
+  "tedi-table__cell--footer": "tedi-table__cell--footer-6db3119e",
+  "tedi-table__row--selected": "tedi-table__row--selected-4e592b36",
+  "tedi-table__row--dragging": "tedi-table__row--dragging-a5ef9418",
+  "tedi-table__row--drag-over": "tedi-table__row--drag-over-6d93e8b7",
+  "tedi-table__row--drag-preview": "tedi-table__row--drag-preview-47e2dd99",
+  "tedi-table__header-cell--dragging": "tedi-table__header-cell--dragging-06a46b18",
+  "tedi-table__header-cell--drag-over": "tedi-table__header-cell--drag-over-f252af8e",
+  "tedi-table__cell--drag-over": "tedi-table__cell--drag-over-cbc1dbfb",
+  "tedi-table__header-cell--drag-preview": "tedi-table__header-cell--drag-preview-9bb286ec",
+  "tedi-table__row--picked-up": "tedi-table__row--picked-up-d3b1dea5",
+  "tedi-table__header-cell--picked-up": "tedi-table__header-cell--picked-up-15995295",
+  "tedi-table__drag-handle--picked-up": "tedi-table__drag-handle--picked-up-f844be33",
+  "tedi-table__sr-only": "tedi-table__sr-only-63bcee78",
+  "tedi-table__header-cell-inner": "tedi-table__header-cell-inner-56364d8d",
+  "tedi-table__cell--drag-handle": "tedi-table__cell--drag-handle-d53d19c1",
+  "tedi-table__drag-handle": "tedi-table__drag-handle-9672fabe",
+  "tedi-table__row--clickable": "tedi-table__row--clickable-05139b72",
+  "tedi-table__row--sub-component": "tedi-table__row--sub-component-effed53b",
+  "tedi-table__row--sub-row": "tedi-table__row--sub-row-3d164bb0",
+  "tedi-table__cell--sub-component": "tedi-table__cell--sub-component-39f49de2",
+  "tedi-table__row--filter": "tedi-table__row--filter-549a00f2",
+  "tedi-table--striped": "tedi-table--striped-213db29e",
+  "tedi-table__body": "tedi-table__body-622a274c",
+  "tedi-table--row-hover": "tedi-table--row-hover-399b73a2",
+  "tedi-table__row--active": "tedi-table__row--active-3d6fa5fc",
+  "tedi-table--vertical-borders": "tedi-table--vertical-borders-7daec7da",
+  "tedi-table--borderless": "tedi-table--borderless-32051e6f",
+  "tedi-table--has-pagination": "tedi-table--has-pagination-1eb2a663",
+  "tedi-table__pagination": "tedi-table__pagination-2bb8beb7",
+  "tedi-table--sticky-first-column": "tedi-table--sticky-first-column-0b93c772",
+  "tedi-table--sticky-header": "tedi-table--sticky-header-d8ee7437"
+};
+export {
+  e as default
+};

package/src/tedi/components/content/table/use-table-persistence.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),E=["columnVisibility","columnOrder"];function b(e){if(!e)return null;if(e.storage)return e.storage;if(typeof window>"u")return null;try{return window.localStorage}catch{return null}}function D(e,t){const n=b(e);if(!n||!e)return t;try{const o=n.getItem(e.key);if(!o)return t;const c=JSON.parse(o),u=e.include??E,i={};for(const s of u)c[s]!==void 0&&(i[s]=c[s]);return{...t,...i}}catch{return t}}function J(e){const{persist:t,controlled:n,defaultState:o,onStateChange:c}=e,[u,i]=r.useState(()=>D(t,o??{})),s=r.useMemo(()=>({...u,...n}),[u,n]),S=r.useRef(n);S.current=n;const l=r.useRef(c);l.current=c;const m=r.useRef(t);m.current=t;const N=r.useCallback(a=>{i(d=>{var P;const w=S.current,h={...d,...w},R=typeof a=="function"?a(h):a,k={...d,...R},g={...d,...w,...R},f=m.current,I=b(f);if(I&&f)try{const v=f.include??E,T={};for(const y of v)g[y]!==void 0&&(T[y]=g[y]);I.setItem(f.key,JSON.stringify(T))}catch{}return(P=l.current)==null||P.call(l,g),k})},[]);return[s,N]}exports.useTablePersistence=J;

package/src/tedi/components/content/table/use-table-persistence.d.ts

@@ -0,0 +1,13 @@
+import { TablePersistOptions, TableState } from './table';
+/**
+ * Owns the Table's internal state and (optionally) syncs it to a Storage backend.
+ * The hook always returns a fully-merged TableState so callers never have to
+ * reason about `undefined` slices.
+ */
+export type TableStatePatch = Partial<TableState> | ((prev: TableState) => Partial<TableState>);
+export declare function useTablePersistence(options: {
+    persist?: TablePersistOptions;
+    controlled?: Partial<TableState>;
+    defaultState?: Partial<TableState>;
+    onStateChange?: (state: TableState) => void;
+}): [TableState, (next: TableStatePatch) => void];

package/src/tedi/components/content/table/use-table-persistence.es.js

@@ -0,0 +1,53 @@
+import { useState as J, useMemo as _, useRef as y, useCallback as p } from "react";
+const R = ["columnVisibility", "columnOrder"];
+function T(t) {
+  if (!t) return null;
+  if (t.storage) return t.storage;
+  if (typeof window > "u") return null;
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+function v(t, e) {
+  const n = T(t);
+  if (!n || !t) return e;
+  try {
+    const o = n.getItem(t.key);
+    if (!o) return e;
+    const r = JSON.parse(o), s = t.include ?? R, u = {};
+    for (const c of s)
+      r[c] !== void 0 && (u[c] = r[c]);
+    return { ...e, ...u };
+  } catch {
+    return e;
+  }
+}
+function C(t) {
+  const { persist: e, controlled: n, defaultState: o, onStateChange: r } = t, [s, u] = J(() => v(e, o ?? {})), c = _(() => ({ ...s, ...n }), [s, n]), S = y(n);
+  S.current = n;
+  const i = y(r);
+  i.current = r;
+  const m = y(e);
+  m.current = e;
+  const h = p((f) => {
+    u((d) => {
+      var N;
+      const w = S.current, k = { ...d, ...w }, I = typeof f == "function" ? f(k) : f, x = { ...d, ...I }, a = { ...d, ...w, ...I }, l = m.current, E = T(l);
+      if (E && l)
+        try {
+          const D = l.include ?? R, P = {};
+          for (const g of D)
+            a[g] !== void 0 && (P[g] = a[g]);
+          E.setItem(l.key, JSON.stringify(P));
+        } catch {
+        }
+      return (N = i.current) == null || N.call(i, a), x;
+    });
+  }, []);
+  return [c, h];
+}
+export {
+  C as useTablePersistence
+};

package/src/tedi/components/filter/filter/filter-group-context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),e=t.createContext(null);exports.FilterGroupContext=e;

package/src/tedi/components/filter/filter/filter-group-context.d.ts

@@ -0,0 +1,8 @@
+export interface FilterGroupContextValue {
+    isManaged: boolean;
+    multiselect: boolean;
+    disabled: boolean;
+    isSelected: (value: string) => boolean;
+    selectFilter: (value: string) => void;
+}
+export declare const FilterGroupContext: import('react').Context<FilterGroupContextValue | null>;

package/src/tedi/components/filter/filter/filter-group-context.es.js

@@ -0,0 +1,5 @@
+import { createContext as t } from "react";
+const e = t(null);
+export {
+  e as FilterGroupContext
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),N=require("../../../../../external/classnames/index.cjs.js"),a=require("react"),P=require("./filter.module.scss.cjs.js"),C=require("./filter-group-context.cjs.js"),G=new Set,F=S=>{const{label:d,ariaLabelledBy:p,disabled:v=!1,className:g,children:q,multiselect:t=!1,value:l,defaultValue:f,onValueChange:o,values:s,defaultValues:x,onValuesChange:n}=S,u=l!==void 0||f!==void 0||o!==void 0||s!==void 0||x!==void 0||n!==void 0||!!d||t,[h,j]=a.useState(f??null),[w,k]=a.useState(x??[]),c=l!==void 0?l:h,r=s!==void 0?s:w,m=a.useCallback(e=>{if(t){const i=r.includes(e)?r.filter(M=>M!==e):[...r,e];s===void 0&&k(i),n==null||n(i)}else{const i=c===e?null:e;l===void 0&&j(i),o==null||o(i)}},[t,r,c,s,l,n,o]),V=a.useCallback(e=>t?r.includes(e):c===e,[t,r,c]),B=a.useMemo(()=>({isManaged:u,multiselect:t,disabled:v,isSelected:V,selectFilter:m}),[u,t,v,V,m]),b=u?t?"group":"radiogroup":void 0;if(u&&!d&&!p){const e=b+"|"+(l??f??"")+"|"+t;G.has(e)||(G.add(e),console.warn(`[FilterGroup] role="${b}" needs an accessible name. Pass either \`label\` or \`ariaLabelledBy\` so screen readers can announce the group with context.`))}return y.jsx(C.FilterGroupContext.Provider,{value:B,children:y.jsx("div",{className:N.default(P.default["tedi-filter-group"],g),role:b,"aria-label":d,"aria-labelledby":p,children:q})})};F.displayName="FilterGroup";exports.FilterGroup=F;

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

@@ -0,0 +1,94 @@
+import { default as React } from 'react';
+interface FilterGroupCommonProps {
+    /**
+     * Accessible label for the group, exposed as `aria-label` on the container.
+     *
+     * **Required when the group is managed** (single- or multi-select). The container then
+     * has `role="radiogroup"` / `role="group"`, and ARIA requires every role to carry an
+     * accessible name — otherwise screen readers announce e.g. "radio group" with no context.
+     * Use `ariaLabelledBy` instead if the name lives in an existing heading.
+     *
+     * Setting `label` also implicitly turns the group into managed mode.
+     */
+    label?: string;
+    /**
+     * ID of an existing element that labels the group (alternative to `label`). Useful when
+     * the group is preceded by a heading that should also act as the accessible name —
+     * avoids duplicating the text. Sets `aria-labelledby` on the container.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * When `true`, every `<Filter>` inside the group is disabled, regardless of their own
+     * `disabled` props. Useful for "this section isn't applicable yet" UX.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Extra class name appended to the group container `<div>`. Use this for spacing/layout;
+     * the per-filter radius and border-collapsing already comes from the group's own styles.
+     */
+    className?: string;
+    /**
+     * `<Filter>` children that participate in the group. Non-`<Filter>` nodes are rendered
+     * verbatim but do not contribute to the managed selection state.
+     */
+    children: React.ReactNode;
+}
+interface FilterGroupSingleProps extends FilterGroupCommonProps {
+    /**
+     * When `false` or omitted, the group enforces single-select (radio-like) semantics —
+     * picking a child deselects the others; re-clicking the active one toggles it to `null`.
+     *
+     * @default false
+     */
+    multiselect?: false;
+    /**
+     * **Controlled** selected value. The string identifier matches the `value` prop on the
+     * `<Filter>` child you want highlighted, or `null` for "nothing selected".
+     *
+     * Pair with `onValueChange` to fully own the state.
+     */
+    value?: string | null;
+    /**
+     * **Uncontrolled** initial selected value. Ignored once `value` is provided.
+     */
+    defaultValue?: string | null;
+    /**
+     * Fires whenever the selected value changes — when a child is clicked, or when the
+     * currently-active child is re-clicked to toggle it back to `null`.
+     */
+    onValueChange?: (value: string | null) => void;
+    values?: never;
+    defaultValues?: never;
+    onValuesChange?: never;
+}
+interface FilterGroupMultiProps extends FilterGroupCommonProps {
+    /**
+     * Set to `true` to switch the group into multi-select (toggle-group) semantics — multiple
+     * children can be active at once and `aria-pressed` is used in place of `aria-checked`.
+     */
+    multiselect: true;
+    /**
+     * **Controlled** selected values array. Each entry should match the `value` prop of one
+     * `<Filter>` child. Order is preserved as the user toggles entries.
+     */
+    values?: string[];
+    /**
+     * **Uncontrolled** initial selected values array. Ignored once `values` is provided.
+     */
+    defaultValues?: string[];
+    /**
+     * Fires whenever the selected values array changes (any child toggled on or off).
+     */
+    onValuesChange?: (values: string[]) => void;
+    value?: never;
+    defaultValue?: never;
+    onValueChange?: never;
+}
+export type FilterGroupProps = FilterGroupSingleProps | FilterGroupMultiProps;
+export declare const FilterGroup: {
+    (props: FilterGroupProps): JSX.Element;
+    displayName: string;
+};
+export {};

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

@@ -0,0 +1,64 @@
+import { jsx as y } from "react/jsx-runtime";
+import L from "../../../../../external/classnames/index.es.js";
+import n from "react";
+import M from "./filter.module.scss.es.js";
+import { FilterGroupContext as P } from "./filter-group-context.es.js";
+const F = /* @__PURE__ */ new Set(), _ = (G) => {
+  const {
+    label: d,
+    ariaLabelledBy: p,
+    disabled: b = !1,
+    className: h,
+    children: w,
+    multiselect: l = !1,
+    value: o,
+    defaultValue: f,
+    onValueChange: r,
+    values: s,
+    defaultValues: v,
+    onValuesChange: a
+  } = G, c = o !== void 0 || f !== void 0 || r !== void 0 || s !== void 0 || v !== void 0 || a !== void 0 || !!d || l, [N, S] = n.useState(f ?? null), [g, k] = n.useState(v ?? []), u = o !== void 0 ? o : N, t = s !== void 0 ? s : g, V = n.useCallback(
+    (e) => {
+      if (l) {
+        const i = t.includes(e) ? t.filter((I) => I !== e) : [...t, e];
+        s === void 0 && k(i), a == null || a(i);
+      } else {
+        const i = u === e ? null : e;
+        o === void 0 && S(i), r == null || r(i);
+      }
+    },
+    [l, t, u, s, o, a, r]
+  ), x = n.useCallback(
+    (e) => l ? t.includes(e) : u === e,
+    [l, t, u]
+  ), B = n.useMemo(
+    () => ({
+      isManaged: c,
+      multiselect: l,
+      disabled: b,
+      isSelected: x,
+      selectFilter: V
+    }),
+    [c, l, b, x, V]
+  ), m = c ? l ? "group" : "radiogroup" : void 0;
+  if (c && !d && !p) {
+    const e = m + "|" + (o ?? f ?? "") + "|" + l;
+    F.has(e) || (F.add(e), console.warn(
+      `[FilterGroup] role="${m}" needs an accessible name. Pass either \`label\` or \`ariaLabelledBy\` so screen readers can announce the group with context.`
+    ));
+  }
+  return /* @__PURE__ */ y(P.Provider, { value: B, children: /* @__PURE__ */ y(
+    "div",
+    {
+      className: L(M["tedi-filter-group"], h),
+      role: m,
+      "aria-label": d,
+      "aria-labelledby": p,
+      children: w
+    }
+  ) });
+};
+_.displayName = "FilterGroup";
+export {
+  _ as FilterGroup
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),oe=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),ce=require("../../base/icon/icon.cjs.js"),E=require("../../buttons/button/button.cjs.js"),de=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"),ue=v=>v==="large"?24:18,Qe=v=>{const b=l.useId();return v??`tedi-filter-${b.replace(/[^a-zA-Z0-9-]/g,"")}`},W=l.forwardRef((v,b)=>{const{getCurrentBreakpointProps:fe}=Je.useBreakpointProps(v.defaultServerBreakpoint),{text:g,value:_,disabled:he=!1,className:pe,id:Z,selected:k,defaultSelected:H=!1,onSelectedChange:C,selectedValue:j,defaultSelectedValue:me,onSelectedValueChange:u,multiselect:J=!1,selectedValues:f,defaultSelectedValues:be,onSelectedValuesChange:a,options:S=[],searchable:xe=!1,showSelectAll:ve=!1,selectAllLabel:ge,showClear:K=!1,clearLabel:je,preserveLabel:Q=!1,children:U,onClear:B,prepend:y,hidePrependWhenSelected:Se=!0,append:I,placement:we="bottom-start",variant:_e="primary",size:D="default",searchLabel:V}=fe(v),{getLabel:X}=Ke.useLabels(),ke=ge??X("filter.select-all"),Y=je??X("filter.clear-selection"),i=l.useContext(He.FilterGroupContext),L=Qe(Z),Ce=l.useRef(null),P=S.length>0,F=!!U,x=P||F,h=P&&!J,p=P&&J,N=!!(i!=null&&i.isManaged)&&_!==void 0&&!x,O=N&&!(i!=null&&i.multiselect),ee=he||((i==null?void 0:i.disabled)??!1),[Le,Fe]=l.useState(H),[Ne,te]=l.useState(me??""),[Be,T]=l.useState(be??[]);F&&(H||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 M=k!==void 0?k:Le,m=j!==void 0?j:Ne,r=f!==void 0?f:Be,w=l.useMemo(()=>N?i.isSelected(_):p?r.length>0:h?m!=="":M,[N,_,i,p,r,h,m,M]),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]),Me=l.useMemo(()=>h?q&&Q?`${g}: ${q}`:q??g:g,[h,q,Q,g]),[$,le]=l.useState(!1),[z,se]=l.useState("");l.useEffect(()=>{$||se("")},[$]);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]),ye=l.useCallback(e=>{Ce.current=e,typeof b=="function"?b(e):b&&(b.current=e)},[b]),Ie=l.useCallback(()=>{if(N){i.selectFilter(_);return}const e=!M;k===void 0&&Fe(e),C==null||C(e)},[N,i,_,M,k,C]),De=l.useCallback(e=>{const s=m===e?"":e;j===void 0&&te(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]),re=l.useCallback(()=>{F?B==null||B():p?(f===void 0&&T([]),a==null||a([])):h&&(j===void 0&&te(""),u==null||u("")),le(!1)},[F,B,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(ce.Icon,{className:n.default["tedi-filter__icon"],name:"check",size:ue(D),color:"inherit"}),y!=null&&t.jsx("span",{className:oe.default(n.default["tedi-filter__prepend"],{[n.default["tedi-filter__prepend--hidden"]]:Te}),children:y}),t.jsx("span",{className:n.default["tedi-filter__text"],children:Me}),I!=null&&t.jsx("span",{className:n.default["tedi-filter__append"],children:I}),p&&w&&r.length>0&&t.jsx(Ze.StatusBadge,{className:n.default["tedi-filter__count"],color:ee?"neutral":"brand",children:String(r.length)}),x&&t.jsx(ce.Icon,{className:n.default["tedi-filter__icon"],name:"arrow_drop_down",filled:!0,size:ue(D),color:"inherit"})]}),ne=oe.default(n.default["tedi-filter"],n.default[`tedi-filter--${_e}`],D==="large"&&n.default["tedi-filter--large"],w&&n.default["tedi-filter--selected"],pe),ie=t.jsx(E.Button,{ref:ye,id:Z,type:"button",disabled:ee,className:n.default["tedi-filter__button"],onClick:x?void 0:Ie,role:x?void 0:$e,"aria-checked":ze,"aria-pressed":Re,noStyle:!0,children:Ae});if(!x)return t.jsx("div",{className:ne,children:ie});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,ae=s+Ge;return p?t.jsx(d.Dropdown.Item,{index:ae,asChild:!0,disabled:e.disabled,closeOnSelect:!1,children:t.jsx(de.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:ae,disabled:e.disabled,active:c,onClick:()=>De(e.value),children:e.label},e.value)});return t.jsx("div",{className:ne,children:t.jsxs(d.Dropdown,{open:$,onOpenChange:le,placement:we,width:"auto",children:[t.jsx(d.Dropdown.Trigger,{children:ie}),t.jsx(d.Dropdown.Content,{children:F?t.jsxs(t.Fragment,{children:[t.jsx("div",{className:n.default["tedi-filter-dropdown__custom-content"],children:U}),K&&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:re,children:Y})})]})]}):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:V??g,hideLabel:!0,ariaLabel:V??g,value:z,onChange:se})}),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(de.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(),K&&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:re,children:Y})})]})]})})]})})});W.displayName="Filter";exports.Filter=W;exports.default=W;

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

@@ -0,0 +1,98 @@
+import { default as React } from 'react';
+import { BreakpointSupport } from '../../../helpers';
+import { Dropdown } from '../../overlays/dropdown/dropdown';
+export type FilterVariant = 'primary' | 'secondary';
+export type FilterSize = 'default' | 'large';
+export interface FilterOption {
+    /** Display label of the option. */
+    label: string;
+    /** Stable identifier returned via selection callbacks. */
+    value: string;
+    /** Whether the option cannot be selected. */
+    disabled?: boolean;
+}
+type FilterBreakpointProps = {
+    /**
+     * Visual variant of the filter.
+     * @default primary
+     */
+    variant?: FilterVariant;
+    /**
+     * Visual size of the filter.
+     * @default default
+     */
+    size?: FilterSize;
+};
+export interface FilterProps extends BreakpointSupport<FilterBreakpointProps> {
+    /** Trigger label. In single-select mode it's replaced by the picked option (or prefixed when `preserveLabel`). */
+    text: string;
+    /** Identifier for participating in a managed `<FilterGroup>`. Unused outside a group. */
+    value?: string;
+    /** @default false */
+    disabled?: boolean;
+    /** Class on the root wrapper `<div>` (not the inner `<button>`). */
+    className?: string;
+    /** Trigger `<button>` id. Auto-generated when omitted; also used as a prefix for sub-element ids. */
+    id?: string;
+    /**
+     * Selected appearance.
+     * - Toggle mode (no `options`, no `children`): controlled or uncontrolled (`defaultSelected`).
+     * - Custom-content mode (`children`): controlled-only — derive it from your own state.
+     * - Dropdown mode (`options`): ignored; derived from `selectedValue` / `selectedValues`.
+     */
+    selected?: boolean;
+    /** Toggle-mode initial state. Ignored when `selected` is set. @default false */
+    defaultSelected?: boolean;
+    /** Toggle-mode change callback. Not fired in custom-content or dropdown modes. */
+    onSelectedChange?: (selected: boolean) => void;
+    /** Single-select controlled value (`''` = nothing selected). Pair with `options`. */
+    selectedValue?: string;
+    /** Single-select initial value. Ignored when `selectedValue` is set. */
+    defaultSelectedValue?: string;
+    /** Single-select change callback — fires on commit or clear (`''`). */
+    onSelectedValueChange?: (value: string) => void;
+    /** Switch the dropdown to multi-select (checkboxes). Requires `options`. @default false */
+    multiselect?: boolean;
+    /** Multi-select controlled values. */
+    selectedValues?: string[];
+    /** Multi-select initial values. Ignored when `selectedValues` is set. */
+    defaultSelectedValues?: string[];
+    /** Multi-select change callback — fires on toggle, "Select all", or clear. */
+    onSelectedValuesChange?: (values: string[]) => void;
+    /** Dropdown options. Mutually exclusive with `children` (children wins if both). */
+    options?: FilterOption[];
+    /** Search input that filters `options` by label (case-insensitive substring). @default false */
+    searchable?: boolean;
+    /** Multi-select "Select all" toggle; targets enabled + visible options. @default false */
+    showSelectAll?: boolean;
+    /** Override the `filter.select-all` i18n label. */
+    selectAllLabel?: string;
+    /**
+     * "Clear selection" button below the panel. Dropdown modes clear automatically;
+     * custom-content mode delegates to `onClear`. @default false
+     */
+    showClear?: boolean;
+    /** Override the `filter.clear-selection` i18n label. */
+    clearLabel?: string;
+    /** Single-select: keep `text` as a prefix once a value is picked ("Teenus: …"). @default false */
+    preserveLabel?: boolean;
+    /** Custom dropdown content. Switches the filter into controlled custom-content mode. */
+    children?: React.ReactNode;
+    /** Fires when "Clear" is clicked in custom-content mode — reset your own state here. */
+    onClear?: () => void;
+    /**
+     * Slot before `text` (icon, status). Auto-replaced by a check icon when toggle-mode
+     * selected — disable via `hidePrependWhenSelected={false}`.
+     */
+    prepend?: React.ReactNode;
+    /** Hide `prepend` while selected so the check icon can take its place. @default true */
+    hidePrependWhenSelected?: boolean;
+    /** Slot after `text`. In multi-select sits alongside the built-in count badge. */
+    append?: React.ReactNode;
+    /** Floating UI placement; flips when room is tight. @default bottom-start */
+    placement?: React.ComponentProps<typeof Dropdown>['placement'];
+    /** Accessible label for the search input. Falls back to `text`. */
+    searchLabel?: string;
+}
+export declare const Filter: React.ForwardRefExoticComponent<FilterProps & React.RefAttributes<HTMLButtonElement>>;
+export default Filter;