@tedi-design-system/react 14.4.0-rc.1 → 14.4.0-rc.11

package/src/tedi/components/layout/sidenav/components/sidenav-item/sidenav-item.es.js

@@ -1,159 +1,181 @@
-import { jsx as s, jsxs as n, Fragment as E } from "react/jsx-runtime";
-import J, { useState as M, createElement as K } from "react";
-import l from "../../../../../../../external/classnames/index.es.js";
-import { Icon as O } from "../../../../base/icon/icon.es.js";
-import { Collapse as P } from "../../../../buttons/collapse/collapse.es.js";
-import { Link as C } from "../../../../navigation/link/link.es.js";
+import { jsx as s, jsxs as l, Fragment as M } from "react/jsx-runtime";
+import Q, { useState as O, createElement as R } from "react";
+import o from "../../../../../../../external/classnames/index.es.js";
+import { Icon as P } from "../../../../base/icon/icon.es.js";
+import { Collapse as B } from "../../../../buttons/collapse/collapse.es.js";
+import { Link as w } from "../../../../navigation/link/link.es.js";
 import e from "../../sidenav.module.scss.es.js";
-import { SideNavDropdown as Q } from "../sidenav-dropdown/sidenav-dropdown.es.js";
-import { Tooltip as N } from "../../../../overlays/tooltip/tooltip.es.js";
-const R = (B) => {
+import { SideNavDropdown as U } from "../sidenav-dropdown/sidenav-dropdown.es.js";
+import { Tooltip as f } from "../../../../overlays/tooltip/tooltip.es.js";
+import { useLabels as V } from "../../../../../providers/label-provider/use-labels.es.js";
+const X = (j) => {
   const {
-    icon: a,
-    children: t,
-    isActive: u,
-    onClick: f,
-    subItems: b,
-    subItemGroups: j,
-    as: x,
-    onItemClick: v,
-    className: z,
-    level: o = 1,
-    isCollapsed: c = !1,
-    isDefaultOpen: H = !1,
-    sideNavItemSize: L = "default",
-    ...m
-  } = B, [g, $] = M(H ?? !1), [T, A] = M(!1), w = J.useId(), _ = j ?? (b ? [{ subItems: b }] : null), d = !!_, F = l(
+    icon: i,
+    children: n,
+    isActive: b,
+    onClick: I,
+    subItems: y,
+    subItemGroups: z,
+    as: S,
+    onItemClick: h,
+    className: H,
+    level: c = 1,
+    isCollapsed: m = !1,
+    isDefaultOpen: K = !1,
+    sideNavItemSize: $ = "default",
+    ..._
+  } = j, { getLabel: T } = V(), [d, D] = O(K ?? !1), [L, A] = O(!1), u = Q.useId(), p = z ?? (y ? [{ subItems: y }] : null), r = !!p, F = o(
     e["tedi-sidenav__item"],
-    e[`tedi-sidenav__item--${L}`],
+    e[`tedi-sidenav__item--${$}`],
     {
-      [e[`tedi-sidenav__item--level-${o}`]]: o > 1,
-      [e["tedi-sidenav__item--current"]]: u,
-      [e["tedi-sidenav__item--has-children"]]: d
+      [e[`tedi-sidenav__item--level-${c}`]]: c > 1,
+      [e["tedi-sidenav__item--current"]]: b,
+      [e["tedi-sidenav__item--has-children"]]: r
     },
-    z
-  ), p = (i) => {
-    const r = {
+    H
+  ), v = (a) => {
+    const t = {
       color: "white",
-      className: l(e["tedi-sidenav__icon"])
-    }, h = typeof i == "string" ? { ...r, name: i } : {
-      ...r,
-      ...i,
-      className: l(r.className, i == null ? void 0 : i.className)
+      className: o(e["tedi-sidenav__icon"])
+    }, N = typeof a == "string" ? { ...t, name: a } : {
+      ...t,
+      ...a,
+      className: o(t.className, a == null ? void 0 : a.className)
     };
-    return /* @__PURE__ */ s(O, { ...h });
-  }, G = (i) => {
-    f == null || f(i), d || v == null || v();
-  }, S = (i) => {
-    $(i);
-  }, W = d && (m.href || m.to), I = {
-    ...m,
-    as: x,
+    return /* @__PURE__ */ s(P, { ...N });
+  }, G = (a) => {
+    I == null || I(a), r || h == null || h();
+  }, k = (a) => {
+    D(a);
+  }, W = (a) => {
+    (a.key === "Enter" || a.key === " ") && (a.preventDefault(), D((g) => {
+      const t = !g;
+      return k(t), t;
+    }));
+  }, q = r && (_.href || _.to), C = {
+    ..._,
+    as: S,
     onClick: G,
-    className: l(e["tedi-sidenav__link"], W && e["tedi-sidenav__link--has-children-link"]),
+    className: o(e["tedi-sidenav__link"], q && e["tedi-sidenav__link--has-children-link"]),
     noStyle: !0,
     role: "menuitem",
-    "aria-current": u ? "page" : void 0,
-    "aria-label": c && typeof t == "string" ? t : void 0
-  }, k = () => !c && (_ == null ? void 0 : _.map((i, D) => {
-    var r;
-    return /* @__PURE__ */ n("div", { children: [
-      (i == null ? void 0 : i.subHeading) && /* @__PURE__ */ s("div", { className: e["tedi-sidenav__subheading"], children: i.subHeading }),
-      /* @__PURE__ */ s("ul", { className: e["tedi-sidenav__list"], role: "menubar", children: (r = i.subItems) == null ? void 0 : r.map((h, q) => /* @__PURE__ */ K(
-        R,
+    "aria-current": b ? "page" : void 0,
+    "aria-label": m && typeof n == "string" ? n : void 0,
+    ...r ? {
+      "aria-haspopup": "true",
+      "aria-expanded": d,
+      "aria-controls": u
+    } : {}
+  }, x = () => !m && (p == null ? void 0 : p.map((a, g) => {
+    var t;
+    return /* @__PURE__ */ l("div", { children: [
+      (a == null ? void 0 : a.subHeading) && /* @__PURE__ */ s("div", { className: e["tedi-sidenav__subheading"], children: a.subHeading }),
+      /* @__PURE__ */ s("ul", { className: e["tedi-sidenav__list"], role: "menu", children: (t = a.subItems) == null ? void 0 : t.map((N, J) => /* @__PURE__ */ R(
+        X,
         {
-          as: x,
-          ...h,
-          key: q,
-          level: o + 1,
-          onItemClick: v,
-          isCollapsed: c,
-          className: l(e["tedi-sidenav__sub-item"], h.className)
+          as: S,
+          ...N,
+          key: J,
+          level: c + 1,
+          onItemClick: h,
+          isCollapsed: m,
+          className: o(e["tedi-sidenav__sub-item"], N.className)
         }
       )) })
-    ] }, D);
-  })), y = /* @__PURE__ */ s("li", { "data-name": "sidenav-item", className: F, role: "presentation", children: d && c ? /* @__PURE__ */ s(
-    Q,
+    ] }, g);
+  })), E = /* @__PURE__ */ s("li", { "data-name": "sidenav-item", className: F, children: r && m ? /* @__PURE__ */ s(
+    U,
     {
-      trigger: /* @__PURE__ */ s(N.Trigger, { children: /* @__PURE__ */ n(
+      trigger: /* @__PURE__ */ s(f.Trigger, { children: /* @__PURE__ */ l(
         "span",
         {
-          className: l(e["tedi-sidenav__link"], T && e["tedi-sidenav__link--active"]),
+          className: o(e["tedi-sidenav__link"], L && e["tedi-sidenav__link--active"]),
           children: [
-            a && p(a),
+            i && v(i),
             /* @__PURE__ */ s(
-              O,
+              P,
               {
-                name: T ? "chevron_right" : "expand_more",
+                name: L ? "chevron_right" : "expand_more",
                 color: "white",
                 className: e["tedi-sidenav__toggle-icon"],
                 size: 18
               }
             ),
-            /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: t })
+            /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: n })
           ]
         }
       ) }),
-      groups: _,
+      groups: p,
       onOpenChange: A
     }
-  ) : d && o === 1 ? m.href || m.to ? /* @__PURE__ */ n(E, { children: [
-    /* @__PURE__ */ n(C, { ...I, children: [
-      a && p(a),
-      /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: t })
+  ) : r && c === 1 ? _.href || _.to ? /* @__PURE__ */ l(M, { children: [
+    /* @__PURE__ */ l(w, { ...C, children: [
+      i && v(i),
+      /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: n })
     ] }),
     /* @__PURE__ */ s("div", { className: e["tedi-sidenav__link-collapse-wrapper"], children: /* @__PURE__ */ s(
-      P,
+      B,
       {
-        id: w,
+        id: u,
         hideCollapseText: !0,
-        open: g,
-        onToggle: S,
+        open: d,
+        onToggle: k,
+        toggleLabel: T("sidenav.toggleSubmenuChildren", {
+          isCollapsedInternal: d,
+          children: n
+        }),
         className: e["tedi-sidenav__collapse"],
-        children: k()
+        children: x()
       }
     ) })
   ] }) : /* @__PURE__ */ s(
-    P,
+    B,
     {
-      id: w,
+      id: u,
       hideCollapseText: !0,
-      open: g,
-      onToggle: S,
+      open: d,
+      onToggle: k,
       className: e["tedi-sidenav__collapse"],
-      title: /* @__PURE__ */ n(
+      toggleLabel: T("sidenav.toggleSubmenuChildren", {
+        isCollapsedInternal: d,
+        children: n
+      }),
+      title: /* @__PURE__ */ l(
         "span",
         {
-          className: l(
+          className: o(
             e["tedi-sidenav__link"],
-            g && e["tedi-sidenav__link--active"]
+            d && e["tedi-sidenav__link--active"]
           ),
-          role: "menuitem",
-          "aria-current": u ? "page" : void 0,
+          role: "button",
+          "aria-expanded": d,
+          "aria-controls": u,
+          "aria-current": b ? "page" : void 0,
+          onKeyDown: W,
           children: [
-            a && p(a),
-            /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: t })
+            i && v(i),
+            /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: n })
           ]
         }
       ),
-      children: k()
+      children: x()
     }
-  ) : d ? /* @__PURE__ */ n(E, { children: [
-    /* @__PURE__ */ n(C, { ...I, children: [
-      a && p(a),
-      /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: t }),
+  ) : r ? /* @__PURE__ */ l(M, { children: [
+    /* @__PURE__ */ l(w, { ...C, children: [
+      i && v(i),
+      /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: n }),
       /* @__PURE__ */ s("i", { className: e["tedi-sidenav__bullet"] })
     ] }),
-    k()
-  ] }) : /* @__PURE__ */ s(N.Trigger, { children: /* @__PURE__ */ n(C, { ...I, children: [
-    a && p(a),
-    /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: t })
+    x()
+  ] }) : /* @__PURE__ */ s(f.Trigger, { children: /* @__PURE__ */ l(w, { ...C, children: [
+    i && v(i),
+    /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: n })
   ] }) }) });
-  return o === 1 && c ? /* @__PURE__ */ n(N, { placement: "right", focusManager: { order: ["content"] }, children: [
-    /* @__PURE__ */ s(N.Content, { maxWidth: "medium", children: t }),
-    y
-  ] }) : y;
+  return c === 1 && m ? /* @__PURE__ */ l(f, { placement: "right", focusManager: { order: ["content"] }, children: [
+    /* @__PURE__ */ s(f.Content, { maxWidth: "medium", children: n }),
+    E
+  ] }) : E;
 };
 export {
-  R as SideNavItem
+  X as SideNavItem
 };

package/src/tedi/components/layout/sidenav/components/sidenav-toggle/sidenav-toggle.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react/jsx-runtime"),r=require("../../../../../../../external/classnames/index.cjs.js"),p=require("../../../../buttons/button/button.cjs.js"),f=require("../../../../buttons/floating-button/floating-button.cjs.js"),o=require("./sidenav-toggle.module.scss.cjs.js"),b=require("../../../../../providers/label-provider/use-labels.cjs.js"),t=({menuOpen:l,toggleMenu:s,referenceRef:i,getReferenceProps:n=()=>({}),variant:e="mobile"})=>{const{getLabel:a}=b.useLabels(),c=a("header.toggle",l),u=r.default(o.default["tedi-sidenav-toggle"],{[o.default["tedi-sidenav-toggle--open"]]:l,[o.default[`tedi-sidenav-toggle--${e}`]]:!0}),d=e==="collapse"?f.FloatingButton:p.Button;return g.jsx(d,{...n(),ref:i,icon:{name:e==="collapse"?l?"right_panel_open":"left_panel_open":l?"close":"menu",className:o.default["tedi-sidenav-toggle__icon"],size:e==="collapse"?18:24},visualType:e==="collapse"?"secondary":"primary",className:u,onClick:s,position:e==="collapse"?"absolute":"static",size:e==="collapse"?"small":"",children:c})};exports.SidenavToggle=t;exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react/jsx-runtime"),p=require("../../../../../../../external/classnames/index.cjs.js"),b=require("../../../../buttons/button/button.cjs.js"),_=require("../../../../buttons/floating-button/floating-button.cjs.js"),o=require("./sidenav-toggle.module.scss.cjs.js"),y=require("../../../../../providers/label-provider/use-labels.cjs.js"),i=({menuOpen:l,toggleMenu:s,referenceRef:n,getReferenceProps:a=()=>({}),variant:e="mobile"})=>{const{getLabel:c}=y.useLabels(),d=c("header.toggle",l),u=p.default(o.default["tedi-sidenav-toggle"],{[o.default["tedi-sidenav-toggle--open"]]:l,[o.default[`tedi-sidenav-toggle--${e}`]]:!0}),r=e==="collapse"?_.FloatingButton:b.Button,g=t=>{(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),s(!l))};return f.jsx(r,{...a(),ref:n,icon:{name:e==="collapse"?l?"right_panel_open":"left_panel_open":l?"close":"menu",className:o.default["tedi-sidenav-toggle__icon"],size:e==="collapse"?18:24},visualType:e==="collapse"?"secondary":"primary",className:u,onClick:()=>s(!l),onKeyDown:g,position:e==="collapse"?"absolute":"static",size:e==="collapse"?"small":"",children:d})};exports.SidenavToggle=i;exports.default=i;

package/src/tedi/components/layout/sidenav/components/sidenav-toggle/sidenav-toggle.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { UnknownType } from '../../../../../../tedi/types/commonTypes';
+import { UnknownType } from '../../../../../types/commonTypes';
 export type SidenavToggleVariant = 'mobile' | 'collapse';
 export type SidenavToggleProps = {
     /**

package/src/tedi/components/layout/sidenav/components/sidenav-toggle/sidenav-toggle.es.js

@@ -1,36 +1,39 @@
-import { jsx as p } from "react/jsx-runtime";
-import g from "../../../../../../../external/classnames/index.es.js";
-import { Button as n } from "../../../../buttons/button/button.es.js";
-import { FloatingButton as r } from "../../../../buttons/floating-button/floating-button.es.js";
+import { jsx as g } from "react/jsx-runtime";
+import d from "../../../../../../../external/classnames/index.es.js";
+import { Button as f } from "../../../../buttons/button/button.es.js";
+import { FloatingButton as y } from "../../../../buttons/floating-button/floating-button.es.js";
 import l from "./sidenav-toggle.module.scss.es.js";
-import { useLabels as d } from "../../../../../providers/label-provider/use-labels.es.js";
+import { useLabels as _ } from "../../../../../providers/label-provider/use-labels.es.js";
 const E = ({
   menuOpen: o,
-  toggleMenu: s,
-  referenceRef: t,
-  getReferenceProps: i = () => ({}),
+  toggleMenu: t,
+  referenceRef: i,
+  getReferenceProps: a = () => ({}),
   variant: e = "mobile"
 }) => {
-  const { getLabel: a } = d(), c = a("header.toggle", o), m = g(l["tedi-sidenav-toggle"], {
+  const { getLabel: c } = _(), r = c("header.toggle", o), n = d(l["tedi-sidenav-toggle"], {
     [l["tedi-sidenav-toggle--open"]]: o,
     [l[`tedi-sidenav-toggle--${e}`]]: !0
-  });
-  return /* @__PURE__ */ p(
-    e === "collapse" ? r : n,
+  }), p = e === "collapse" ? y : f, m = (s) => {
+    (s.key === "Enter" || s.key === " ") && (s.preventDefault(), t(!o));
+  };
+  return /* @__PURE__ */ g(
+    p,
     {
-      ...i(),
-      ref: t,
+      ...a(),
+      ref: i,
       icon: {
         name: e === "collapse" ? o ? "right_panel_open" : "left_panel_open" : o ? "close" : "menu",
         className: l["tedi-sidenav-toggle__icon"],
         size: e === "collapse" ? 18 : 24
       },
       visualType: e === "collapse" ? "secondary" : "primary",
-      className: m,
-      onClick: s,
+      className: n,
+      onClick: () => t(!o),
+      onKeyDown: m,
       position: e === "collapse" ? "absolute" : "static",
       size: e === "collapse" ? "small" : "",
-      children: c
+      children: r
     }
   );
 };

package/src/tedi/components/layout/sidenav/sidenav.d.ts

@@ -84,15 +84,7 @@ export declare const SideNav: (<C extends React.ElementType = "a">(props: SideNa
     Item: <C extends React.ElementType = "a">(props: SideNavItemProps<C> & {
         onItemClick?: () => void;
         level?: number;
-        isCollapsed
-        /**
-         * Show dividers between navigation items
-         * @default true
-         */
-        ? /**
-         * Show dividers between navigation items
-         * @default true
-         */: boolean;
+        isCollapsed?: boolean;
     }) => import("react/jsx-runtime").JSX.Element;
     Dropdown: <C extends React.ElementType = "a">({ trigger, groups, onOpenChange, }: {
         trigger: React.ReactNode;

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

package/src/tedi/components/overlays/overlay/overlay-content.d.ts

@@ -1,15 +1,40 @@
 import { ReactNode } from 'react';
 export interface OverlayContentProps {
     /**
-     * Content.
+     * Overlay content.
+     * Can contain any valid React nodes (text, elements, components).
      */
     children: ReactNode | ReactNode[];
     /**
-     * Additional class names.
+     * Additional class names for styling overlay elements.
      */
     classNames?: {
+        /**
+         * Class name applied to the floating content container.
+         */
         content: string;
+        /**
+         * Class name applied to the overlay arrow element.
+         */
         arrow: string;
     };
+    /**
+     * ID of the element that labels the overlay content.
+     *
+     * This is used to set the `aria-labelledby` attribute on the overlay container,
+     * providing an accessible name for screen readers.
+     *
+     * Typically points to a heading element inside the overlay (e.g. a title).
+     */
+    labelledBy?: string;
+    /**
+     * ID of the element that describes the overlay content.
+     *
+     * This is used to set the `aria-describedby` attribute on the overlay container,
+     * allowing screen readers to announce additional descriptive text.
+     *
+     * Useful for longer explanations or supporting content that complements the title.
+     */
+    describedBy?: string;
 }
 export declare const OverlayContent: (props: OverlayContentProps) => import("react/jsx-runtime").JSX.Element | null;

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const L=require("react/jsx-runtime"),t=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),s=require("react"),W=require("./overlay-content.cjs.js"),A=require("./overlay-trigger.cjs.js"),G=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),c=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),H=require("../../../helpers/hooks/use-is-touch-device.cjs.js"),z=require("../../../helpers/hooks/use-is-mounted.cjs.js"),B=3,y=s.createContext({open:!1,onOpenChange:()=>{},isMounted:!1,openWith:"hover",reference:()=>{},floating:()=>{},focusManager:{},arrowRef:{current:null},x:0,y:0,strategy:"absolute",getReferenceProps:()=>({}),getFloatingProps:()=>({}),arrow:{width:0,height:0,x:0,y:0,centerOffset:0},placement:"top",context:{},scrollLock:void 0}),l=O=>{const m=H.useIsTouchDevice(),{children:M,placement:x="top",openWith:a=m?"click":"hover",defaultOpen:C=!1,open:r,onToggle:o,role:q="tooltip",arrowDimensions:e,offset:w=B+((e==null?void 0:e.height)??0),focusManager:P,dismissible:i,scrollLock:R}=O,{order:b=["reference","content"],initialFocus:F=-1,...k}=P??{},[u,f]=s.useState(C),d=s.useRef(null),T=z.useIsMounted(),g=s.useMemo(()=>o&&typeof r<"u"?r:u,[o,r,u]),p=s.useCallback(v=>{typeof r>"u"&&f(v),o==null||o(v)},[r,f,o]),{x:I,y:_,refs:h,strategy:U,context:n,middlewareData:j,placement:S}=t.useFloating({placement:x,open:g,onOpenChange:p,middleware:[c.offset(w),c.flip(),c.shift({padding:8}),c.arrow({element:d,padding:4})],whileElementsMounted:G.autoUpdate}),{getReferenceProps:D,getFloatingProps:E}=t.useInteractions([t.useHover(n,{enabled:a==="hover",handleClose:t.safePolygon()}),t.useClick(n,{toggle:i}),t.useFocus(n,{enabled:a==="hover"}),t.useRole(n,{role:q}),t.useDismiss(n,{enabled:i,outsidePressEvent:a==="click"?"mousedown":"pointerdown"})]);return L.jsx(y.Provider,{value:{open:g,onOpenChange:p,isMounted:T,openWith:a,reference:h.setReference,floating:h.setFloating,arrowRef:d,focusManager:{order:b,initialFocus:F,...k},x:I,y:_,strategy:U,getReferenceProps:D,getFloatingProps:E,arrow:{width:e==null?void 0:e.width,height:e==null?void 0:e.height,...j.arrow},context:n,placement:S,scrollLock:R},children:M})};l.Trigger=A.OverlayTrigger;l.Content=W.OverlayContent;exports.Overlay=l;exports.OverlayContext=y;exports.default=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const A=require("react/jsx-runtime"),t=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),s=require("react"),G=require("./overlay-content.cjs.js"),H=require("./overlay-trigger.cjs.js"),z=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),a=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),B=require("../../../helpers/hooks/use-is-touch-device.cjs.js"),J=require("../../../helpers/hooks/use-is-mounted.cjs.js"),K=3,M=s.createContext({open:!1,onOpenChange:()=>{},isMounted:!1,openWith:"hover",reference:()=>{},floating:()=>{},focusManager:{},arrowRef:{current:null},x:0,y:0,strategy:"absolute",getReferenceProps:()=>({}),getFloatingProps:()=>({}),arrow:{width:0,height:0,x:0,y:0,centerOffset:0},placement:"top",context:{},scrollLock:void 0}),c=x=>{const C=B.useIsTouchDevice(),{children:q,placement:w="top",openWith:i=C?"click":"hover",defaultOpen:F=!1,open:r,onToggle:o,role:P="tooltip",arrowDimensions:e,offset:R=K+((e==null?void 0:e.height)??0),focusManager:l,dismissible:u,scrollLock:b}=x,{order:k=["reference","content"],initialFocus:d,modal:f,...I}=l??{},T=d!==void 0?d:f?0:void 0,[g,p]=s.useState(F),h=s.useRef(null),_=J.useIsMounted(),v=s.useMemo(()=>o&&typeof r<"u"?r:g,[o,r,g]),y=s.useCallback(m=>{typeof r>"u"&&p(m),o==null||o(m)},[r,p,o]),{x:U,y:j,refs:O,strategy:S,context:n,middlewareData:D,placement:E}=t.useFloating({placement:w,open:v,onOpenChange:y,middleware:[a.offset(R),a.flip(),a.shift({padding:8}),a.arrow({element:h,padding:4})],whileElementsMounted:z.autoUpdate}),{getReferenceProps:L,getFloatingProps:W}=t.useInteractions([t.useHover(n,{enabled:i==="hover",handleClose:t.safePolygon()}),t.useClick(n,{toggle:u}),t.useFocus(n,{enabled:i==="hover"}),t.useRole(n,{role:P}),t.useDismiss(n,{enabled:u,outsidePressEvent:i==="click"?"mousedown":"pointerdown"})]);return A.jsx(M.Provider,{value:{open:v,onOpenChange:y,isMounted:_,openWith:i,reference:O.setReference,floating:O.setFloating,arrowRef:h,focusManager:l?{order:k,modal:f,initialFocus:T,...I}:void 0,x:U,y:j,strategy:S,getReferenceProps:L,getFloatingProps:W,arrow:{width:e==null?void 0:e.width,height:e==null?void 0:e.height,...D.arrow},context:n,placement:E,scrollLock:b},children:q})};c.Trigger=H.OverlayTrigger;c.Content=G.OverlayContent;exports.Overlay=c;exports.OverlayContext=M;exports.default=c;