@tedi-design-system/react 14.4.0-rc.3 → 14.4.0-rc.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "14.4.0-rc.3",
+  "version": "14.4.0-rc.5",
   "type": "module",
   "sideEffects": false,
   "exports": {

package/src/tedi/components/form/file-dropzone/file-dropzone.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),h=require("../../../../../external/classnames/index.cjs.js"),F=require("../../../../../external/react-dropzone/dist/es/index.cjs.js"),y=require("../../../helpers/hooks/use-file-upload.cjs.js"),u=require("../../base/icon/icon.cjs.js"),C=require("../../buttons/closing-button/closing-button.cjs.js"),f=require("../feedback-text/feedback-text.cjs.js"),D=require("../form-label/form-label.cjs.js"),t=require("./file-dropzone.module.scss.cjs.js"),N=require("../../cards/card/card.cjs.js"),S=require("../../cards/card/card-content/card-content.cjs.js"),k=require("../../../providers/label-provider/use-labels.cjs.js"),I=require("../../layout/vertical-spacing/vertical-spacing.cjs.js"),L=require("../../layout/grid/row.cjs.js"),m=require("../../layout/grid/col.cjs.js"),x=o=>{const{getLabel:a}=k.useLabels(),{label:p=a("file-dropzone.label"),className:z,disabled:s=!1,helper:i,id:d}=o,{innerFiles:r,uploadErrorHelper:n,onFileChange:g,onFileRemove:b}=y.useFileUpload(o),{getRootProps:j,getInputProps:v,isDragActive:q}=F.useDropzone({accept:o.accept?{"application/*":[o.accept]}:void 0,multiple:o.multiple,maxSize:o.maxSize?o.maxSize*1024**2:void 0,onDrop:l=>{g({target:{files:l}})}}),_=h.default(t.default["tedi-file-dropzone"],{[t.default["tedi-file-dropzone--disabled"]]:s},{[t.default["tedi-file-dropzone--invalid"]]:((n==null?void 0:n.type)||(i==null?void 0:i.type))==="error"},{[t.default["tedi-file-dropzone--valid"]]:((n==null?void 0:n.type)||(i==null?void 0:i.type))==="valid"},{[t.default["tedi-file-dropzone--drop-over"]]:q},z),c=i?(i==null?void 0:i.id)??`${d}-helper`:void 0;return e.jsxs(e.Fragment,{children:[e.jsxs("div",{...j(),className:_,children:[e.jsx("input",{...v()}),e.jsxs("div",{className:t.default["tedi-file-dropzone__label-wrapper"],children:[e.jsx(u.Icon,{color:s?"tertiary":"secondary",size:24,name:"attach_file"}),e.jsx(D.FormLabel,{id:d,label:p,className:t.default["tedi-file-dropzone__label"]})]})]}),i?e.jsx(f.FeedbackText,{...i,id:c}):n?e.jsx(f.FeedbackText,{...n,id:c}):null,!!r.length&&e.jsx(I.VerticalSpacing,{size:.5,className:t.default["tedi-file-dropzone__file-list"],children:r.map(l=>e.jsx(N.Card,{background:l.isValid===!1?"danger-primary":"tertiary",borderless:!0,className:t.default["tedi-file-dropzone__file-item"],children:e.jsx(S.CardContent,{padding:{bottom:.5,left:.5,right:.5,top:.5},children:e.jsxs(L.Row,{alignItems:"center",children:[e.jsxs(m.Col,{className:t.default["tedi-file-dropzone__file-name"],children:[l.name," ",l.isValid===!1&&e.jsx(u.Icon,{name:"info",color:"danger",display:"inline",size:18})]}),e.jsx(m.Col,{width:"auto",children:e.jsx(C.ClosingButton,{title:a("clear"),onClick:()=>b(l)})})]})})},l.id||l.name))})]})};exports.FileDropzone=x;exports.default=x;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),y=require("../../../../../external/classnames/index.cjs.js"),F=require("../../../../../external/react-dropzone/dist/es/index.cjs.js"),C=require("../../../helpers/hooks/use-file-upload.cjs.js"),u=require("../../base/icon/icon.cjs.js"),N=require("../../buttons/closing-button/closing-button.cjs.js"),f=require("../feedback-text/feedback-text.cjs.js"),D=require("../form-label/form-label.cjs.js"),t=require("./file-dropzone.module.scss.cjs.js"),I=require("../../cards/card/card.cjs.js"),L=require("../../cards/card/card-content/card-content.cjs.js"),k=require("../../../providers/label-provider/use-labels.cjs.js"),m=require("../../content/list/list.cjs.js"),S=require("../../layout/grid/row.cjs.js"),x=require("../../layout/grid/col.cjs.js"),p=o=>{const{getLabel:s}=k.useLabels(),{label:z=s("file-dropzone.label"),className:b,disabled:a=!1,helper:i,id:c}=o,{innerFiles:d,uploadErrorHelper:n,onFileChange:j,onFileRemove:g}=C.useFileUpload(o),{getRootProps:v,getInputProps:_,isDragActive:q}=F.useDropzone({disabled:a,accept:o.accept?{"application/*":[o.accept]}:void 0,multiple:o.multiple,maxSize:o.maxSize?o.maxSize*1024**2:void 0,onDrop:l=>{if(a)return;j({target:{files:l}})}}),h=y.default(t.default["tedi-file-dropzone"],{[t.default["tedi-file-dropzone--disabled"]]:a},{[t.default["tedi-file-dropzone--invalid"]]:((n==null?void 0:n.type)||(i==null?void 0:i.type))==="error"},{[t.default["tedi-file-dropzone--valid"]]:((n==null?void 0:n.type)||(i==null?void 0:i.type))==="valid"},{[t.default["tedi-file-dropzone--drop-over"]]:q},b),r=i?(i==null?void 0:i.id)??`${c}-helper`:void 0;return e.jsxs(e.Fragment,{children:[e.jsxs("div",{...v({tabIndex:a?-1:0,"aria-disabled":a,"aria-describedby":r}),className:h,children:[e.jsx("input",{..._(),disabled:a}),e.jsxs("div",{className:t.default["tedi-file-dropzone__label-wrapper"],children:[e.jsx(u.Icon,{color:a?"tertiary":"secondary",size:24,name:"attach_file"}),e.jsx(D.FormLabel,{id:c,label:z,className:t.default["tedi-file-dropzone__label"]})]})]}),i?e.jsx(f.FeedbackText,{...i,id:r}):n?e.jsx(f.FeedbackText,{...n,id:r}):null,!!d.length&&e.jsx(m.List,{className:t.default["tedi-file-dropzone__file-list"],style:"none","aria-label":s("file-dropzone.selected-files"),children:d.map(l=>e.jsx(m.List.Item,{className:t.default["tedi-file-dropzone__file-list-item"],children:e.jsx(I.Card,{background:l.isValid===!1?"danger-primary":"tertiary",borderless:!0,className:t.default["tedi-file-dropzone__file-item"],children:e.jsx(L.CardContent,{padding:.5,children:e.jsxs(S.Row,{alignItems:"center",children:[e.jsxs(x.Col,{className:t.default["tedi-file-dropzone__file-name"],children:[l.name," ",l.isValid===!1&&e.jsx(u.Icon,{name:"info",color:"danger",display:"inline",size:18})]}),e.jsx(x.Col,{width:"auto",children:e.jsx(N.ClosingButton,{title:s("remove")+" "+l.name,onClick:()=>g(l)})})]})})})},l.id||l.name))}),e.jsx("div",{className:"sr-only",role:"status","aria-live":"polite","aria-atomic":"true",children:d.length===0?s("file-dropzone.no-file"):s("file-dropzone.files-selected",d.length)})]})};exports.FileDropzone=p;exports.default=p;

package/src/tedi/components/form/file-dropzone/file-dropzone.es.js

@@ -1,73 +1,83 @@
-import { jsxs as r, Fragment as N, jsx as i } from "react/jsx-runtime";
-import x from "../../../../../external/classnames/index.es.js";
-import { useDropzone as C } from "../../../../../external/react-dropzone/dist/es/index.es.js";
+import { jsxs as d, Fragment as F, jsx as e } from "react/jsx-runtime";
+import C from "../../../../../external/classnames/index.es.js";
+import { useDropzone as I } from "../../../../../external/react-dropzone/dist/es/index.es.js";
 import { useFileUpload as D } from "../../../helpers/hooks/use-file-upload.es.js";
-import { Icon as p } from "../../base/icon/icon.es.js";
-import { ClosingButton as I } from "../../buttons/closing-button/closing-button.es.js";
-import { FeedbackText as f } from "../feedback-text/feedback-text.es.js";
-import { FormLabel as S } from "../form-label/form-label.es.js";
+import { Icon as f } from "../../base/icon/icon.es.js";
+import { ClosingButton as L } from "../../buttons/closing-button/closing-button.es.js";
+import { FeedbackText as p } from "../feedback-text/feedback-text.es.js";
+import { FormLabel as k } from "../form-label/form-label.es.js";
 import o from "./file-dropzone.module.scss.es.js";
-import { Card as k } from "../../cards/card/card.es.js";
-import { CardContent as w } from "../../cards/card/card-content/card-content.es.js";
-import { useLabels as L } from "../../../providers/label-provider/use-labels.es.js";
-import { VerticalSpacing as R } from "../../layout/vertical-spacing/vertical-spacing.es.js";
-import { Row as V } from "../../layout/grid/row.es.js";
-import { Col as z } from "../../layout/grid/col.es.js";
-const Y = (l) => {
-  const { getLabel: n } = L(), { label: g = n("file-dropzone.label"), className: b, disabled: d = !1, helper: e, id: m } = l, { innerFiles: s, uploadErrorHelper: t, onFileChange: v, onFileRemove: h } = D(l), { getRootProps: u, getInputProps: _, isDragActive: y } = C({
-    accept: l.accept ? { "application/*": [l.accept] } : void 0,
-    multiple: l.multiple,
-    maxSize: l.maxSize ? l.maxSize * 1024 ** 2 : void 0,
-    onDrop: (a) => {
-      v({
-        target: { files: a }
+import { Card as w } from "../../cards/card/card.es.js";
+import { CardContent as R } from "../../cards/card/card-content/card-content.es.js";
+import { useLabels as S } from "../../../providers/label-provider/use-labels.es.js";
+import { List as z } from "../../content/list/list.es.js";
+import { Row as j } from "../../layout/grid/row.es.js";
+import { Col as b } from "../../layout/grid/col.es.js";
+const Y = (a) => {
+  const { getLabel: n } = S(), { label: g = n("file-dropzone.label"), className: v, disabled: r = !1, helper: i, id: c } = a, { innerFiles: s, uploadErrorHelper: l, onFileChange: h, onFileRemove: u } = D(a), { getRootProps: y, getInputProps: _, isDragActive: N } = I({
+    disabled: r,
+    accept: a.accept ? { "application/*": [a.accept] } : void 0,
+    multiple: a.multiple,
+    maxSize: a.maxSize ? a.maxSize * 1024 ** 2 : void 0,
+    onDrop: (t) => {
+      if (r) return;
+      h({
+        target: { files: t }
       });
     }
-  }), F = x(
+  }), x = C(
     o["tedi-file-dropzone"],
-    { [o["tedi-file-dropzone--disabled"]]: d },
-    { [o["tedi-file-dropzone--invalid"]]: ((t == null ? void 0 : t.type) || (e == null ? void 0 : e.type)) === "error" },
-    { [o["tedi-file-dropzone--valid"]]: ((t == null ? void 0 : t.type) || (e == null ? void 0 : e.type)) === "valid" },
-    { [o["tedi-file-dropzone--drop-over"]]: y },
-    b
-  ), c = e ? (e == null ? void 0 : e.id) ?? `${m}-helper` : void 0;
-  return /* @__PURE__ */ r(N, { children: [
-    /* @__PURE__ */ r("div", { ...u(), className: F, children: [
-      /* @__PURE__ */ i("input", { ..._() }),
-      /* @__PURE__ */ r("div", { className: o["tedi-file-dropzone__label-wrapper"], children: [
-        /* @__PURE__ */ i(p, { color: d ? "tertiary" : "secondary", size: 24, name: "attach_file" }),
-        /* @__PURE__ */ i(S, { id: m, label: g, className: o["tedi-file-dropzone__label"] })
-      ] })
-    ] }),
-    e ? /* @__PURE__ */ i(f, { ...e, id: c }) : t ? /* @__PURE__ */ i(f, { ...t, id: c }) : null,
-    !!s.length && /* @__PURE__ */ i(R, { size: 0.5, className: o["tedi-file-dropzone__file-list"], children: s.map((a) => /* @__PURE__ */ i(
-      k,
+    { [o["tedi-file-dropzone--disabled"]]: r },
+    { [o["tedi-file-dropzone--invalid"]]: ((l == null ? void 0 : l.type) || (i == null ? void 0 : i.type)) === "error" },
+    { [o["tedi-file-dropzone--valid"]]: ((l == null ? void 0 : l.type) || (i == null ? void 0 : i.type)) === "valid" },
+    { [o["tedi-file-dropzone--drop-over"]]: N },
+    v
+  ), m = i ? (i == null ? void 0 : i.id) ?? `${c}-helper` : void 0;
+  return /* @__PURE__ */ d(F, { children: [
+    /* @__PURE__ */ d(
+      "div",
       {
-        background: a.isValid === !1 ? "danger-primary" : "tertiary",
-        borderless: !0,
-        className: o["tedi-file-dropzone__file-item"],
-        children: /* @__PURE__ */ i(
+        ...y({
+          tabIndex: r ? -1 : 0,
+          "aria-disabled": r,
+          "aria-describedby": m
+        }),
+        className: x,
+        children: [
+          /* @__PURE__ */ e("input", { ..._(), disabled: r }),
+          /* @__PURE__ */ d("div", { className: o["tedi-file-dropzone__label-wrapper"], children: [
+            /* @__PURE__ */ e(f, { color: r ? "tertiary" : "secondary", size: 24, name: "attach_file" }),
+            /* @__PURE__ */ e(k, { id: c, label: g, className: o["tedi-file-dropzone__label"] })
+          ] })
+        ]
+      }
+    ),
+    i ? /* @__PURE__ */ e(p, { ...i, id: m }) : l ? /* @__PURE__ */ e(p, { ...l, id: m }) : null,
+    !!s.length && /* @__PURE__ */ e(
+      z,
+      {
+        className: o["tedi-file-dropzone__file-list"],
+        style: "none",
+        "aria-label": n("file-dropzone.selected-files"),
+        children: s.map((t) => /* @__PURE__ */ e(z.Item, { className: o["tedi-file-dropzone__file-list-item"], children: /* @__PURE__ */ e(
           w,
           {
-            padding: {
-              bottom: 0.5,
-              left: 0.5,
-              right: 0.5,
-              top: 0.5
-            },
-            children: /* @__PURE__ */ r(V, { alignItems: "center", children: [
-              /* @__PURE__ */ r(z, { className: o["tedi-file-dropzone__file-name"], children: [
-                a.name,
+            background: t.isValid === !1 ? "danger-primary" : "tertiary",
+            borderless: !0,
+            className: o["tedi-file-dropzone__file-item"],
+            children: /* @__PURE__ */ e(R, { padding: 0.5, children: /* @__PURE__ */ d(j, { alignItems: "center", children: [
+              /* @__PURE__ */ d(b, { className: o["tedi-file-dropzone__file-name"], children: [
+                t.name,
                 " ",
-                a.isValid === !1 && /* @__PURE__ */ i(p, { name: "info", color: "danger", display: "inline", size: 18 })
+                t.isValid === !1 && /* @__PURE__ */ e(f, { name: "info", color: "danger", display: "inline", size: 18 })
               ] }),
-              /* @__PURE__ */ i(z, { width: "auto", children: /* @__PURE__ */ i(I, { title: n("clear"), onClick: () => h(a) }) })
-            ] })
+              /* @__PURE__ */ e(b, { width: "auto", children: /* @__PURE__ */ e(L, { title: n("remove") + " " + t.name, onClick: () => u(t) }) })
+            ] }) })
           }
-        )
-      },
-      a.id || a.name
-    )) })
+        ) }, t.id || t.name))
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: s.length === 0 ? n("file-dropzone.no-file") : n("file-dropzone.files-selected", s.length) })
   ] });
 };
 export {

package/src/tedi/components/form/file-dropzone/file-dropzone.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-file-dropzone":"tedi-file-dropzone-70698e52","tedi-file-dropzone__label-wrapper":"tedi-file-dropzone__label-wrapper-78360685","tedi-file-dropzone__label":"tedi-file-dropzone__label-5c15bc34","tedi-file-dropzone--disabled":"tedi-file-dropzone--disabled-0e01143d","tedi-file-dropzone--invalid":"tedi-file-dropzone--invalid-159cce6d","tedi-file-dropzone--valid":"tedi-file-dropzone--valid-d2d3ef3d","tedi-file-dropzone--drop-over":"tedi-file-dropzone--drop-over-3e31af77","tedi-file-dropzone__file-list":"tedi-file-dropzone__file-list-c1ededa3","tedi-file-dropzone__file-name":"tedi-file-dropzone__file-name-f9bf2a63"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-file-dropzone":"tedi-file-dropzone-70698e52","tedi-file-dropzone__label-wrapper":"tedi-file-dropzone__label-wrapper-78360685","tedi-file-dropzone__label":"tedi-file-dropzone__label-5c15bc34","tedi-file-dropzone--disabled":"tedi-file-dropzone--disabled-0e01143d","tedi-file-dropzone--invalid":"tedi-file-dropzone--invalid-159cce6d","tedi-file-dropzone--valid":"tedi-file-dropzone--valid-d2d3ef3d","tedi-file-dropzone--drop-over":"tedi-file-dropzone--drop-over-3e31af77","tedi-file-dropzone__file-list":"tedi-file-dropzone__file-list-c1ededa3","tedi-file-dropzone__file-list-item":"tedi-file-dropzone__file-list-item-3ad71621","tedi-file-dropzone__file-name":"tedi-file-dropzone__file-name-f9bf2a63"};exports.default=e;

package/src/tedi/components/form/file-dropzone/file-dropzone.module.scss.es.js

@@ -7,6 +7,7 @@ const e = {
   "tedi-file-dropzone--valid": "tedi-file-dropzone--valid-d2d3ef3d",
   "tedi-file-dropzone--drop-over": "tedi-file-dropzone--drop-over-3e31af77",
   "tedi-file-dropzone__file-list": "tedi-file-dropzone__file-list-c1ededa3",
+  "tedi-file-dropzone__file-list-item": "tedi-file-dropzone__file-list-item-3ad71621",
   "tedi-file-dropzone__file-name": "tedi-file-dropzone__file-name-f9bf2a63"
 };
 export {

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;

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("../../../../../external/classnames/index.cjs.js"),f=require("react"),m=require("../../base/typography/text/text.cjs.js"),x=require("../../buttons/closing-button/closing-button.cjs.js"),C=require("../overlay/overlay.cjs.js"),h=require("../overlay/overlay-content.cjs.js"),e=require("./popover.module.scss.cjs.js"),q=c=>{const{children:d,width:l="small",className:u,title:t,titleProps:s={element:"h4"},close:a,closeProps:o={size:"large"}}=c,{onOpenChange:p}=f.useContext(C.OverlayContext);return r.jsxs(h.OverlayContent,{classNames:{content:n.default(e.default["tedi-popover"],{[e.default[`tedi-popover--${l}`]]:l},u),arrow:e.default["tedi-popover__arrow"]},children:[(t||a)&&r.jsxs("div",{className:n.default(e.default["tedi-popover__header"],{[e.default["tedi-popover__header--no-title"]]:!t}),children:[t&&r.jsx(m.Text,{...s,className:n.default("align-self-center",s.className),children:t}),a&&r.jsx(x.ClosingButton,{...o,onClick:v=>{var i;p(!1),(i=o.onClick)==null||i.call(o,v)}})]}),d]})};exports.PopoverContent=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("../../../../../external/classnames/index.cjs.js"),i=require("react"),C=require("../../base/typography/text/text.cjs.js"),q=require("../../buttons/closing-button/closing-button.cjs.js"),y=require("../overlay/overlay.cjs.js"),g=require("../overlay/overlay-content.cjs.js"),o=require("./popover.module.scss.cjs.js"),j=f=>{const{children:r,width:l="small",className:x,title:e,titleProps:d={element:"h4"},close:a,closeProps:n={size:"large"}}=f,{onOpenChange:h}=i.useContext(y.OverlayContext),c=i.useId(),u=!!r,p=i.useId();return t.jsxs(g.OverlayContent,{classNames:{content:s.default(o.default["tedi-popover"],{[o.default[`tedi-popover--${l}`]]:l},x),arrow:o.default["tedi-popover__arrow"]},labelledBy:e?c:void 0,describedBy:u?p:void 0,children:[(e||a)&&t.jsxs("div",{className:s.default(o.default["tedi-popover__header"],{[o.default["tedi-popover__header--no-title"]]:!e}),children:[e&&t.jsx(C.Text,{...d,id:c,className:s.default("align-self-center",d.className),children:e}),a&&t.jsx(q.ClosingButton,{...n,onClick:m=>{var v;h(!1),(v=n.onClick)==null||v.call(n,m)}})]}),u?t.jsx("div",{id:p,children:r}):r]})};exports.PopoverContent=j;