@tedi-design-system/react 15.0.0 → 16.0.0-rc.10

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

@@ -88,6 +88,8 @@ export interface OverlayContextType {
     placement: Placement;
     context: FloatingContext<ReferenceType>;
     scrollLock?: boolean;
+    role?: UseRoleProps['role'];
+    contentId: string;
 }
 export declare const OverlayContext: import('react').Context<OverlayContextType>;
 export declare const Overlay: {

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

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

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

@@ -1 +1 @@
-"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;
+"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"),j=require("../overlay/overlay-content.cjs.js"),o=require("./popover.module.scss.cjs.js"),_=f=>{const{children:r,width:l="small",className:x,title:e,titleProps:d={element:"h4"},close:a,closeProps:n={size:"default"}}=f,{onOpenChange:h}=i.useContext(y.OverlayContext),c=i.useId(),u=!!r,p=i.useId();return t.jsxs(j.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=_;

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

@@ -1,10 +1,10 @@
 import { jsxs as v, jsx as i } from "react/jsx-runtime";
 import s from "../../../../../external/classnames/index.es.js";
 import { useContext as _, useId as f } from "react";
-import { Text as y } from "../../base/typography/text/text.es.js";
-import { ClosingButton as g } from "../../buttons/closing-button/closing-button.es.js";
-import { OverlayContext as u } from "../overlay/overlay.es.js";
-import { OverlayContent as B } from "../overlay/overlay-content.es.js";
+import { Text as u } from "../../base/typography/text/text.es.js";
+import { ClosingButton as y } from "../../buttons/closing-button/closing-button.es.js";
+import { OverlayContext as B } from "../overlay/overlay.es.js";
+import { OverlayContent as g } from "../overlay/overlay-content.es.js";
 import o from "./popover.module.scss.es.js";
 const P = (h) => {
   const {
@@ -14,10 +14,10 @@ const P = (h) => {
     title: e,
     titleProps: l = { element: "h4" },
     close: a,
-    closeProps: t = { size: "large" }
-  } = h, { onOpenChange: x } = _(u), d = f(), m = !!r, c = f();
+    closeProps: t = { size: "default" }
+  } = h, { onOpenChange: x } = _(B), d = f(), m = !!r, c = f();
   return /* @__PURE__ */ v(
-    B,
+    g,
     {
       classNames: {
         content: s(o["tedi-popover"], { [o[`tedi-popover--${n}`]]: n }, C),
@@ -27,9 +27,9 @@ const P = (h) => {
       describedBy: m ? c : void 0,
       children: [
         (e || a) && /* @__PURE__ */ v("div", { className: s(o["tedi-popover__header"], { [o["tedi-popover__header--no-title"]]: !e }), children: [
-          e && /* @__PURE__ */ i(y, { ...l, id: d, className: s("align-self-center", l.className), children: e }),
+          e && /* @__PURE__ */ i(u, { ...l, id: d, className: s("align-self-center", l.className), children: e }),
           a && /* @__PURE__ */ i(
-            g,
+            y,
             {
               ...t,
               onClick: (N) => {

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),n=require("../overlay/overlay.cjs.js"),s=require("./tooltip-content.cjs.js"),l=require("./tooltip-trigger.cjs.js"),u=7,c=14,e=t=>{const{openWith:o="hover",...r}=t;return i.jsx(n.Overlay,{arrowDimensions:{width:c,height:u},openWith:o,...r})};e.Trigger=l.TooltipTrigger;e.Content=s.TooltipContent;exports.Tooltip=e;exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),s=require("../overlay/overlay.cjs.js"),l=require("./tooltip-content.cjs.js"),u=require("./tooltip-trigger.cjs.js"),c=7,a=14,e=o=>{const{openWith:t="hover",focusManager:r,...n}=o;return i.jsx(s.Overlay,{arrowDimensions:{width:a,height:c},openWith:t,role:"tooltip",focusManager:{modal:!1,order:["reference","content"],returnFocus:!0,...r},...n})};e.Trigger=u.TooltipTrigger;e.Content=l.TooltipContent;exports.Tooltip=e;exports.default=e;

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

@@ -1,23 +1,30 @@
-import { jsx as e } from "react/jsx-runtime";
-import { Overlay as n } from "../overlay/overlay.es.js";
-import { TooltipContent as m } from "./tooltip-content.es.js";
-import { TooltipTrigger as p } from "./tooltip-trigger.es.js";
-const s = 7, T = 14, o = (t) => {
-  const { openWith: r = "hover", ...i } = t;
-  return /* @__PURE__ */ e(
-    n,
+import { jsx as i } from "react/jsx-runtime";
+import { Overlay as s } from "../overlay/overlay.es.js";
+import { TooltipContent as a } from "./tooltip-content.es.js";
+import { TooltipTrigger as m } from "./tooltip-trigger.es.js";
+const p = 7, c = 14, o = (r) => {
+  const { openWith: t = "hover", focusManager: e, ...n } = r;
+  return /* @__PURE__ */ i(
+    s,
     {
       arrowDimensions: {
-        width: T,
-        height: s
+        width: c,
+        height: p
       },
-      openWith: r,
-      ...i
+      openWith: t,
+      role: "tooltip",
+      focusManager: {
+        modal: !1,
+        order: ["reference", "content"],
+        returnFocus: !0,
+        ...e
+      },
+      ...n
     }
   );
 };
-o.Trigger = p;
-o.Content = m;
+o.Trigger = m;
+o.Content = a;
 export {
   o as Tooltip,
   o as default

package/src/tedi/components/tags/tag/tag.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("../../../../../external/classnames/index.cjs.js"),g=require("../../base/icon/icon.cjs.js"),p=require("../../buttons/closing-button/closing-button.cjs.js"),f=require("../../loaders/spinner/spinner.cjs.js"),e=require("./tag.module.scss.cjs.js"),_=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),m=i=>{const{getCurrentBreakpointProps:o}=_.useBreakpointProps(i.defaultServerBreakpoint),{children:n,className:l,onClose:a,isLoading:r=!1,color:s="primary",...c}=o(i),d=u.default(e.default["tedi-tag"],s&&e.default[`tedi-tag--color-${s}`],a&&!r&&e.default["tedi-tag__close"],l);return t.jsxs("div",{className:d,role:"status","aria-live":r?"polite":void 0,...c,children:[s==="danger"&&t.jsx("div",{className:e.default["tedi-tag__icon-wrapper"],children:t.jsx(g.Icon,{name:"info",color:"danger",size:16,className:e.default["tedi-tag__icon--error"]})}),t.jsx("div",{className:e.default["tedi-tag__content"],children:n}),r&&!a&&t.jsx("div",{className:e.default["tedi-tag__icon-wrapper"],children:t.jsx(f.Spinner,{className:e.default["tedi-tag__loader"]})}),!r&&a&&t.jsx(p.ClosingButton,{onClick:a})]})};exports.Tag=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("../../../../../external/classnames/index.cjs.js"),g=require("../../base/icon/icon.cjs.js"),p=require("../../buttons/closing-button/closing-button.cjs.js"),f=require("../../loaders/spinner/spinner.cjs.js"),e=require("./tag.module.scss.cjs.js"),_=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),m=s=>{const{getCurrentBreakpointProps:o}=_.useBreakpointProps(s.defaultServerBreakpoint),{children:n,className:l,onClose:a,isLoading:r=!1,color:i="primary",...c}=o(s),d=u.default(e.default["tedi-tag"],i&&e.default[`tedi-tag--color-${i}`],a&&!r&&e.default["tedi-tag__close"],l);return t.jsxs("div",{className:d,role:"status","aria-live":r?"polite":void 0,...c,children:[i==="danger"&&t.jsx("div",{className:e.default["tedi-tag__icon-wrapper"],children:t.jsx(g.Icon,{name:"info",color:"danger",size:16,className:e.default["tedi-tag__icon--error"]})}),t.jsx("div",{className:e.default["tedi-tag__content"],children:n}),r&&!a&&t.jsx("div",{className:e.default["tedi-tag__icon-wrapper"],children:t.jsx(f.Spinner,{className:e.default["tedi-tag__loader"]})}),!r&&a&&t.jsx(p.ClosingButton,{iconSize:18,onClick:a})]})};exports.Tag=m;

package/src/tedi/components/tags/tag/tag.es.js

@@ -1,31 +1,31 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
 import p from "../../../../../external/classnames/index.es.js";
 import { Icon as g } from "../../base/icon/icon.es.js";
 import { ClosingButton as _ } from "../../buttons/closing-button/closing-button.es.js";
 import { Spinner as f } from "../../loaders/spinner/spinner.es.js";
 import e from "./tag.module.scss.es.js";
 import { useBreakpointProps as N } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-const j = (i) => {
-  const { getCurrentBreakpointProps: s } = N(i.defaultServerBreakpoint), {
+const S = (a) => {
+  const { getCurrentBreakpointProps: s } = N(a.defaultServerBreakpoint), {
     children: n,
     className: c,
-    onClose: o,
+    onClose: r,
     isLoading: t = !1,
-    color: a = "primary",
+    color: i = "primary",
     ...l
-  } = s(i), m = p(
+  } = s(a), m = p(
     e["tedi-tag"],
-    a && e[`tedi-tag--color-${a}`],
-    o && !t && e["tedi-tag__close"],
+    i && e[`tedi-tag--color-${i}`],
+    r && !t && e["tedi-tag__close"],
     c
   );
   return /* @__PURE__ */ d("div", { className: m, role: "status", "aria-live": t ? "polite" : void 0, ...l, children: [
-    a === "danger" && /* @__PURE__ */ r("div", { className: e["tedi-tag__icon-wrapper"], children: /* @__PURE__ */ r(g, { name: "info", color: "danger", size: 16, className: e["tedi-tag__icon--error"] }) }),
-    /* @__PURE__ */ r("div", { className: e["tedi-tag__content"], children: n }),
-    t && !o && /* @__PURE__ */ r("div", { className: e["tedi-tag__icon-wrapper"], children: /* @__PURE__ */ r(f, { className: e["tedi-tag__loader"] }) }),
-    !t && o && /* @__PURE__ */ r(_, { onClick: o })
+    i === "danger" && /* @__PURE__ */ o("div", { className: e["tedi-tag__icon-wrapper"], children: /* @__PURE__ */ o(g, { name: "info", color: "danger", size: 16, className: e["tedi-tag__icon--error"] }) }),
+    /* @__PURE__ */ o("div", { className: e["tedi-tag__content"], children: n }),
+    t && !r && /* @__PURE__ */ o("div", { className: e["tedi-tag__icon-wrapper"], children: /* @__PURE__ */ o(f, { className: e["tedi-tag__loader"] }) }),
+    !t && r && /* @__PURE__ */ o(_, { iconSize: 18, onClick: r })
   ] });
 };
 export {
-  j as Tag
+  S as Tag
 };