@tedi-design-system/react 18.0.0-rc.5 → 18.0.0-rc.7

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

@@ -0,0 +1,236 @@
+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 { 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), {
+    text: w,
+    value: k,
+    disabled: ve = !1,
+    className: be,
+    id: K,
+    selected: y,
+    defaultSelected: Q = !1,
+    onSelectedChange: I,
+    selectedValue: L,
+    defaultSelectedValue: ge,
+    onSelectedValueChange: d,
+    multiselect: U = !1,
+    selectedValues: u,
+    defaultSelectedValues: Se,
+    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(
+    "[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(() => {
+    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();
+    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(
+    (e) => {
+      Ie.current = e, typeof v == "function" ? v(e) : v && (v.current = e);
+    },
+    [v]
+  ), Ae = C(() => {
+    if (F) {
+      n.selectFilter(k);
+      return;
+    }
+    const e = !T;
+    y === void 0 && $e(e), I == null || I(e);
+  }, [F, n, k, T, y, I]), Re = C(
+    (e) => {
+      const l = h === e ? "" : e;
+      L === void 0 && ie(l), d == null || d(l);
+    },
+    [h, L, d]
+  ), Me = C(
+    (e) => {
+      const l = r.includes(e) ? r.filter((o) => o !== e) : [...r, e];
+      u === void 0 && j(l), s == null || s(l);
+    },
+    [r, u, s]
+  ), Ge = C(() => {
+    let e;
+    if (q) {
+      const l = new Set(a.map((o) => o.value));
+      e = r.filter((o) => !l.has(o));
+    } else {
+      const l = new Set(r);
+      a.forEach((o) => l.add(o.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);
+  }, [
+    $,
+    P,
+    m,
+    u,
+    s,
+    f,
+    L,
+    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(
+      "span",
+      {
+        className: ue(i["tedi-filter__prepend"], {
+          [i["tedi-filter__prepend--hidden"]]: De
+        }),
+        children: A
+      }
+    ),
+    /* @__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) }),
+    b && /* @__PURE__ */ t(
+      fe,
+      {
+        className: i["tedi-filter__icon"],
+        name: "arrow_drop_down",
+        filled: !0,
+        size: he(M),
+        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,
+    {
+      ref: ze,
+      id: K,
+      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,
+      noStyle: !0,
+      children: Ze
+    }
+  );
+  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,
+      {
+        id: `${B}-option-${l}`,
+        label: e.label,
+        value: e.value,
+        checked: o,
+        disabled: e.disabled,
+        onChange: () => Me(e.value),
+        name: `${B}-options`
+      }
+    ) }, e.value) : /* @__PURE__ */ t(
+      c.Item,
+      {
+        index: de,
+        disabled: e.disabled,
+        active: o,
+        onClick: () => Re(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: [
+        /* @__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__ */ p(g, { children: [
+      _e && /* @__PURE__ */ p(g, { children: [
+        /* @__PURE__ */ t("div", { className: i["tedi-filter-dropdown__search"], children: /* @__PURE__ */ t(
+          Xe,
+          {
+            id: `${B}-search`,
+            label: ee ?? w,
+            hideLabel: !0,
+            ariaLabel: ee ?? w,
+            value: W,
+            onChange: se
+          }
+        ) }),
+        /* @__PURE__ */ t(c.Separator, {})
+      ] }),
+      H !== null && /* @__PURE__ */ p(g, { children: [
+        /* @__PURE__ */ t(c.Item, { index: H, asChild: !0, closeOnSelect: !1, children: /* @__PURE__ */ t(
+          me,
+          {
+            id: `${B}-select-all`,
+            label: ye,
+            value: "select-all",
+            checked: q,
+            indeterminate: Te,
+            onChange: Ge,
+            name: `${B}-select-all`
+          }
+        ) }),
+        /* @__PURE__ */ t(c.Separator, {})
+      ] }),
+      He(),
+      V && /* @__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 }) })
+      ] })
+    ] }) })
+  ] }) });
+});
+it.displayName = "Filter";
+export {
+  it as Filter,
+  it as default
+};

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

@@ -0,0 +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;

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

@@ -0,0 +1,21 @@
+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"
+};
+export {
+  e as default
+};

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

@@ -0,0 +1,3 @@
+export * from './filter';
+export * from './filter-group';
+export * from './filter-group-context';

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

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

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

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

package/src/tedi/components/overlays/overlay/overlay-content.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),r=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),d=require("react"),j=require("./overlay.cjs.js"),F=s=>{const{children:u,classNames:e,labelledBy:y,describedBy:f}=s,{open:l,x:m,y:h,strategy:g,focusManager:o,floating:b,arrowRef:v,getFloatingProps:x,placement:w,context:i,arrow:t,scrollLock:c,contentId:p}=d.useContext(j.OverlayContext);return d.useEffect(()=>{c&&(l?(document.documentElement.style.overflow="hidden",document.documentElement.scrollHeight>window.innerHeight&&(document.body.style.overflow="scroll")):(document.documentElement.style.overflow="",document.body.style.overflow=""))},[l,c]),l?n.jsx(r.FloatingPortal,{children:n.jsx(r.FloatingFocusManager,{modal:(o==null?void 0:o.modal)||!1,...o,context:i,children:n.jsxs("div",{...x({ref:b,tabIndex:-1,id:p,"aria-labelledby":y,"aria-describedby":f,style:{position:g,left:m,top:h},className:e==null?void 0:e.content}),"data-placement":w,"data-testid":"overlay-content",children:[n.jsx(r.FloatingArrow,{ref:a=>v.current=a,context:i,className:e==null?void 0:e.arrow,height:t==null?void 0:t.height,width:t==null?void 0:t.width,"data-testid":"overlay-arrow"}),u]})})}):null};exports.OverlayContent=F;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),r=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),s=require("react"),q=require("./overlay.cjs.js"),C=u=>{const{children:y,classNames:e,labelledBy:f,describedBy:m}=u,{open:l,x:g,y:h,strategy:b,focusManager:o,floating:v,arrowRef:x,getFloatingProps:w,placement:p,context:i,arrow:t,scrollLock:c,contentId:j,role:F}=s.useContext(q.OverlayContext);if(s.useEffect(()=>{c&&(l?(document.documentElement.style.overflow="hidden",document.documentElement.scrollHeight>window.innerHeight&&(document.body.style.overflow="scroll")):(document.documentElement.style.overflow="",document.body.style.overflow=""))},[l,c]),!l)return null;const a=n.jsxs("div",{...w({ref:v,tabIndex:-1,id:j,"aria-labelledby":f,"aria-describedby":m,style:{position:b,left:g,top:h},className:e==null?void 0:e.content}),"data-placement":p,"data-testid":"overlay-content",children:[n.jsx(r.FloatingArrow,{ref:d=>x.current=d,context:i,className:e==null?void 0:e.arrow,height:t==null?void 0:t.height,width:t==null?void 0:t.width,"data-testid":"overlay-arrow"}),y]});return n.jsx(r.FloatingPortal,{children:F==="tooltip"?a:n.jsx(r.FloatingFocusManager,{modal:(o==null?void 0:o.modal)||!1,...o,context:i,children:a})})};exports.OverlayContent=C;

package/src/tedi/components/overlays/overlay/overlay-content.es.js

@@ -1,48 +1,50 @@
-import { jsx as n, jsxs as w } from "react/jsx-runtime";
-import { FloatingPortal as x, FloatingFocusManager as F, FloatingArrow as E } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
-import { useContext as C, useEffect as j } from "react";
-import { OverlayContext as B } from "./overlay.es.js";
-const S = (a) => {
-  const { children: c, classNames: e, labelledBy: s, describedBy: m } = a, {
+import { jsxs as F, jsx as n } from "react/jsx-runtime";
+import { FloatingArrow as E, FloatingPortal as C, FloatingFocusManager as j } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import { useContext as B, useEffect as H } from "react";
+import { OverlayContext as I } from "./overlay.es.js";
+const A = (c) => {
+  const { children: s, classNames: e, labelledBy: m, describedBy: f } = c, {
     open: l,
-    x: f,
-    y,
-    strategy: h,
+    x: y,
+    y: h,
+    strategy: u,
     focusManager: o,
-    floating: u,
-    arrowRef: b,
-    getFloatingProps: g,
-    placement: p,
+    floating: g,
+    arrowRef: p,
+    getFloatingProps: b,
+    placement: v,
     context: r,
     arrow: t,
-    scrollLock: d,
-    contentId: v
-  } = C(B);
-  return j(() => {
-    d && (l ? (document.documentElement.style.overflow = "hidden", document.documentElement.scrollHeight > window.innerHeight && (document.body.style.overflow = "scroll")) : (document.documentElement.style.overflow = "", document.body.style.overflow = ""));
-  }, [l, d]), l ? /* @__PURE__ */ n(x, { children: /* @__PURE__ */ n(F, { modal: (o == null ? void 0 : o.modal) || !1, ...o, context: r, children: /* @__PURE__ */ w(
+    scrollLock: i,
+    contentId: w,
+    role: x
+  } = B(I);
+  if (H(() => {
+    i && (l ? (document.documentElement.style.overflow = "hidden", document.documentElement.scrollHeight > window.innerHeight && (document.body.style.overflow = "scroll")) : (document.documentElement.style.overflow = "", document.body.style.overflow = ""));
+  }, [l, i]), !l) return null;
+  const d = /* @__PURE__ */ F(
     "div",
     {
-      ...g({
-        ref: u,
+      ...b({
+        ref: g,
         tabIndex: -1,
-        id: v,
-        "aria-labelledby": s,
-        "aria-describedby": m,
+        id: w,
+        "aria-labelledby": m,
+        "aria-describedby": f,
         style: {
-          position: h,
-          left: f,
-          top: y
+          position: u,
+          left: y,
+          top: h
         },
         className: e == null ? void 0 : e.content
       }),
-      "data-placement": p,
+      "data-placement": v,
       "data-testid": "overlay-content",
       children: [
         /* @__PURE__ */ n(
           E,
           {
-            ref: (i) => b.current = i,
+            ref: (a) => p.current = a,
             context: r,
             className: e == null ? void 0 : e.arrow,
             height: t == null ? void 0 : t.height,
@@ -50,11 +52,12 @@ const S = (a) => {
             "data-testid": "overlay-arrow"
           }
         ),
-        c
+        s
       ]
     }
-  ) }) }) : null;
+  );
+  return /* @__PURE__ */ n(C, { children: x === "tooltip" ? d : /* @__PURE__ */ n(j, { modal: (o == null ? void 0 : o.modal) || !1, ...o, context: r, children: d }) });
 };
 export {
-  S as OverlayContent
+  A as OverlayContent
 };

package/src/tedi/index.d.ts

@@ -47,6 +47,7 @@ export * from './components/form/time-picker/time-picker';
 export * from './components/form/checkbox/checkbox';
 export * from './components/form/slider/slider';
 export * from './components/form/date-field/date-field';
+export * from './components/filter/filter';
 export * from './components/form/input-group';
 export * from './components/form/field/field';
 export * from './components/overlays/tooltip';