@adyen/adyen-platform-experience-web 0.1.2 → 1.0.0-beta

package/dist/es/components/internal/Popover/Popover.js

@@ -1,112 +1,170 @@
-import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import I from "../Button/ButtonActions/ButtonActions.js";
-import { ButtonActionsLayoutBasic as x } from "../Button/ButtonActions/types.js";
-import { isFunction as q } from "../../../utils/common/index.js";
-import { DEFAULT_POPOVER_CLASSNAME as i, POPOVER_CONTAINER_CLASSNAME as K, POPOVER_HEADER_CLASSNAME as R, POPOVER_HEADER_TITLE_CLASSNAME as b, POPOVER_CONTENT_CLASSNAME as p, POPOVER_FOOTER_CLASSNAME as H } from "./constants.js";
-import U from "./PopoverDismissButton/PopoverDismissButton.js";
-import W from "./PopoverTitle/PopoverTitle.js";
-import { PopoverContainerPosition as j, PopoverContainerSize as M, PopoverContainerVariant as G } from "./types.js";
-import { InteractionKeyCode as J } from "../../types.js";
-import { useClickOutside as Q } from "../../../hooks/element/useClickOutside.js";
-import X from "../../../hooks/element/useFocusTrap.js";
-import Y from "../../../hooks/element/usePopoverPositioner.js";
-import { getModifierClasses as Z } from "../../../utils/class-name-utils.js";
-import { SELECTORS as z, isFocusable as g } from "../../../utils/tabbable.js";
-import oo from "classnames";
-import { useMemo as $, useRef as O, useCallback as P, useEffect as ro } from "../../../external/preact/hooks/dist/hooks.module.js";
-import "./Popover.scss.js";
-import "./PopoverContainer.scss.js";
-import eo from "../../../hooks/useReflex/hooks/useReflex.js";
-import { Fragment as no } from "../../../external/preact/dist/preact.module.js";
-const to = (u) => {
-  var m;
-  let s;
-  const f = (m = u.querySelector(`.${p}`)) == null ? void 0 : m.querySelectorAll(z);
-  return Array.prototype.some.call(f, (n) => {
-    if (g(n))
-      return s = n;
-  }), s;
+import '../../../../Popover.css';
+import { o } from "../../../../jsxRuntime.module-69493d81.mjs";
+import { B as ButtonActions, a as ButtonActionsLayoutBasic } from "../../../../ButtonActions-eb064f69.mjs";
+import { DEFAULT_POPOVER_CLASSNAME, DEFAULT_TOOLTIP_CLASSNAME, POPOVER_CONTAINER_CLASSNAME, TOOLTIP_CONTENT_CLASSNAME, POPOVER_CONTENT_CLASSNAME, POPOVER_HEADER_CLASSNAME, POPOVER_HEADER_TITLE_CLASSNAME, POPOVER_FOOTER_CLASSNAME } from "./constants.js";
+import PopoverDismissButton from "./PopoverDismissButton/PopoverDismissButton.js";
+import PopoverTitle from "./PopoverTitle/PopoverTitle.js";
+import { a as PopoverContainerVariant, u as usePopoverPositioner, P as PopoverContainerSize } from "../../../../usePopoverPositioner-882fea89.mjs";
+import { I as InteractionKeyCode } from "../../../../types-0aaff3aa.mjs";
+import { useClickOutside, ClickOutsideVariant } from "../../../hooks/element/useClickOutside.js";
+import useFocusTrap from "../../../hooks/element/useFocusTrap.js";
+import useUniqueIdentifier from "../../../hooks/element/useUniqueIdentifier.js";
+import useReflex from "../../../hooks/useReflex/hooks/useReflex.js";
+import { getModifierClasses } from "../../../utils/class-name-utils.js";
+import { isFunction } from "../../../utils/common/index.js";
+import { SELECTORS, isFocusable } from "../../../utils/tabbable.js";
+import cx from "classnames";
+import { z } from "../../../../compat.module-a4d537ff.mjs";
+import { F, _, T, p } from "../../../../hooks.module-8565d716.mjs";
+import { k } from "../../../../preact.module-38e5a571.mjs";
+const Popover$1 = "";
+const findFirstFocusableElement = (root) => {
+  var _a;
+  let focusable;
+  const elements = (_a = root.querySelector(`.${TOOLTIP_CONTENT_CLASSNAME}`)) == null ? void 0 : _a.querySelectorAll(SELECTORS);
+  if (elements) {
+    Array.prototype.some.call(elements, (elem) => {
+      if (isFocusable(elem))
+        return focusable = elem;
+    });
+    return focusable;
+  }
+  return null;
 };
-function Lo({
-  actions: u,
-  disableFocusTrap: s = !1,
-  actionsLayout: f = x.SPACE_BETWEEN,
-  variant: m = G.TOOLTIP,
-  title: n,
-  open: a,
-  dismissible: v,
-  modifiers: D,
-  divider: d,
-  fitContent: C,
-  withoutSpace: T,
-  containerSize: l,
-  position: co,
-  targetElement: r,
-  dismiss: o,
-  children: N,
-  withContentPadding: h,
-  ...S
+const getGapByVariant = (variant) => {
+  return variant === PopoverContainerVariant.TOOLTIP ? [10, 3, 5, 5] : [15, 15, 15, 15];
+};
+function Popover({
+  actions,
+  disableFocusTrap = false,
+  actionsLayout = ButtonActionsLayoutBasic.SPACE_BETWEEN,
+  variant = PopoverContainerVariant.TOOLTIP,
+  title,
+  open,
+  dismissible,
+  modifiers,
+  divider,
+  fitContent,
+  withoutSpace,
+  containerSize,
+  position,
+  targetElement,
+  setToTargetWidth,
+  dismiss,
+  children,
+  withContentPadding,
+  classNameModifiers,
+  showOverlay = false,
+  fitPosition,
+  ...uncontrolledProps
 }) {
-  const _ = $(() => q(o) && v !== !1, [o, v]), y = O(), w = P(
-    (t) => {
-      var c;
-      o && o(), t && ((c = r == null ? void 0 : r.current) == null || c.focus());
+  const isDismissible = F(() => isFunction(dismiss) && dismissible !== false, [dismiss, dismissible]);
+  const arrowRef = useUniqueIdentifier();
+  const popoverOpen = _();
+  const onCloseFocusTrap = T(
+    (interactionKeyPressed) => {
+      var _a;
+      dismiss && dismiss();
+      if (interactionKeyPressed) {
+        (_a = targetElement == null ? void 0 : targetElement.current) == null ? void 0 : _a.focus();
+      }
     },
-    [o, r]
-  ), E = P(
-    (t) => {
-      t.code === J.ESCAPE && (o && o(), (r == null ? void 0 : r.current).focus());
+    [dismiss, targetElement]
+  );
+  const onKeyDown = T(
+    (e) => {
+      if (e.code === InteractionKeyCode.ESCAPE) {
+        dismiss && dismiss();
+        (targetElement == null ? void 0 : targetElement.current).focus();
+      }
     },
-    [o, r]
-  ), A = O(E), F = O(), L = Q(
-    Y([0, 15], r, m, j.BOTTOM),
-    o
-  ), k = X(s ? null : L, w), V = eo(
-    P((t) => {
-      t instanceof Element && (cancelAnimationFrame(F.current), F.current = requestAnimationFrame(() => {
-        if (y.current === a || !(y.current = a))
-          return;
-        const c = to(t);
-        c == null || c.focus();
-      }));
-    }, []),
-    s ? L : k
-  ), B = $(
+    [dismiss, targetElement]
+  );
+  const cachedOnKeyDown = _(onKeyDown);
+  const autoFocusAnimFrame = _();
+  const popoverPositionAnchorElement = useClickOutside(
+    usePopoverPositioner(getGapByVariant(variant), targetElement, variant, position, arrowRef, setToTargetWidth, showOverlay, fitPosition),
+    dismiss,
+    variant === PopoverContainerVariant.TOOLTIP && !open,
+    ClickOutsideVariant.POPOVER
+  );
+  const popoverFocusTrapElement = useFocusTrap(disableFocusTrap ? null : popoverPositionAnchorElement, onCloseFocusTrap);
+  const popoverElement = useReflex(
+    T(
+      (current) => {
+        if (current instanceof Element) {
+          cancelAnimationFrame(autoFocusAnimFrame.current);
+          autoFocusAnimFrame.current = requestAnimationFrame(() => {
+            if (popoverOpen.current === open)
+              return;
+            if (!(popoverOpen.current = open))
+              return;
+            const focusable = findFirstFocusableElement(current);
+            focusable == null ? void 0 : focusable.focus();
+          });
+        }
+      },
+      [open]
+    ),
+    disableFocusTrap ? popoverPositionAnchorElement : popoverFocusTrapElement
+  );
+  const popoverElementWithId = useUniqueIdentifier(popoverElement);
+  const conditionalClasses = F(
     () => ({
-      [`${i}--medium`]: l === M.MEDIUM,
-      [`${i}--with-divider`]: !!d,
-      [`${i}--wide`]: l === M.WIDE,
-      [`${i}--fit-content`]: C,
-      [`${i}--without-space`]: T
+      [`${DEFAULT_POPOVER_CLASSNAME}--medium`]: containerSize === PopoverContainerSize.MEDIUM,
+      [`${DEFAULT_POPOVER_CLASSNAME}--with-divider`]: !!divider,
+      [`${DEFAULT_POPOVER_CLASSNAME}--wide`]: containerSize === PopoverContainerSize.WIDE,
+      [`${DEFAULT_POPOVER_CLASSNAME}--fit-content`]: fitContent,
+      [`${DEFAULT_POPOVER_CLASSNAME}--without-space`]: withoutSpace,
+      [`${DEFAULT_POPOVER_CLASSNAME}--auto-width`]: showOverlay
     }),
-    [l, d, T, C]
+    [containerSize, divider, withoutSpace, fitContent, showOverlay]
+  );
+  p(() => {
+    document.removeEventListener("keydown", cachedOnKeyDown.current);
+    document.addEventListener("keydown", cachedOnKeyDown.current = onKeyDown);
+    return () => document.removeEventListener("keydown", cachedOnKeyDown.current);
+  }, [onKeyDown]);
+  const classNamesByVariant = variant === PopoverContainerVariant.TOOLTIP ? DEFAULT_TOOLTIP_CLASSNAME : `${DEFAULT_POPOVER_CLASSNAME} ${POPOVER_CONTAINER_CLASSNAME}`;
+  const classNamesContentByVariant = variant === PopoverContainerVariant.TOOLTIP ? TOOLTIP_CONTENT_CLASSNAME : `${POPOVER_CONTENT_CLASSNAME}`;
+  return z(
+    /* @__PURE__ */ o(k, { children: open ? /* @__PURE__ */ o(k, { children: [
+      showOverlay && /* @__PURE__ */ o("div", { className: "adyen-pe-popover__overlay" }),
+      /* @__PURE__ */ o(
+        "div",
+        {
+          id: "popover",
+          ref: popoverElementWithId,
+          ...uncontrolledProps,
+          className: cx(classNamesByVariant, conditionalClasses, classNameModifiers),
+          style: { visibility: "hidden" },
+          role: uncontrolledProps.role ?? (variant === PopoverContainerVariant.POPOVER ? "dialog" : "tooltip"),
+          children: [
+            (title || isDismissible) && /* @__PURE__ */ o("div", { className: getModifierClasses(POPOVER_HEADER_CLASSNAME, modifiers, [POPOVER_HEADER_CLASSNAME]), children: [
+              title && /* @__PURE__ */ o("div", { className: POPOVER_HEADER_TITLE_CLASSNAME, children: /* @__PURE__ */ o(PopoverTitle, { title }) }),
+              isDismissible && /* @__PURE__ */ o(PopoverDismissButton, { onClick: dismiss })
+            ] }),
+            children && /* @__PURE__ */ o(k, { children: [
+              /* @__PURE__ */ o(
+                "div",
+                {
+                  className: cx(classNamesContentByVariant, {
+                    [`${POPOVER_CONTENT_CLASSNAME}--with-padding`]: withContentPadding,
+                    [`${POPOVER_CONTENT_CLASSNAME}--overlay`]: showOverlay
+                  }),
+                  children
+                }
+              ),
+              variant === PopoverContainerVariant.TOOLTIP && /* @__PURE__ */ o("span", { "data-popover-placement": "hidden", ref: arrowRef, className: "adyen-pe-tooltip__arrow" })
+            ] }),
+            actions && /* @__PURE__ */ o("div", { className: POPOVER_FOOTER_CLASSNAME, children: /* @__PURE__ */ o(ButtonActions, { actions, layout: actionsLayout }) })
+          ]
+        }
+      )
+    ] }) : null }),
+    document.getElementsByTagName("body")[0]
   );
-  return ro(() => (document.removeEventListener("keydown", A.current), document.addEventListener("keydown", A.current = E), () => document.removeEventListener("keydown", A.current)), [E]), /* @__PURE__ */ e(no, { children: a ? /* @__PURE__ */ e(
-    "div",
-    {
-      id: "popover",
-      ref: V,
-      ...S,
-      className: oo(`${i} ${K}`, B),
-      style: { display: "none" },
-      role: S.role ?? "dialog",
-      children: [
-        (n || _) && /* @__PURE__ */ e("div", { className: Z(R, D, [R]), children: [
-          n && /* @__PURE__ */ e("div", { className: b, children: /* @__PURE__ */ e(W, { title: n }) }),
-          _ && /* @__PURE__ */ e(U, { onClick: o })
-        ] }),
-        N && /* @__PURE__ */ e(
-          "div",
-          {
-            className: h ? `${p} ${p}--with-padding` : p,
-            children: N
-          }
-        ),
-        u && /* @__PURE__ */ e("div", { className: H, children: /* @__PURE__ */ e(I, { actions: u, layout: f }) })
-      ]
-    }
-  ) : null });
 }
 export {
-  Lo as default
+  Popover as default
 };

package/dist/es/components/internal/Popover/Popover.test.js

@@ -0,0 +1,119 @@
+import { o } from "../../../../jsxRuntime.module-69493d81.mjs";
+import { B as ButtonVariant } from "../../../../types-7ad6576a.mjs";
+import { a as PopoverContainerVariant, b as PopoverContainerPosition } from "../../../../usePopoverPositioner-882fea89.mjs";
+import { s as screen, w as waitForWrapper, r as render } from "../../../../index-2c0f6175.mjs";
+import { u as userEvent } from "../../../../index-944be685.mjs";
+import { _ } from "../../../../preact.module-38e5a571.mjs";
+import Popover from "./Popover.js";
+import { d as describe, b as beforeEach, t as test, g as globalExpect, v as vi } from "../../../../vendor-vi.a3ff54b1-5e924357.mjs";
+describe("Popover component", () => {
+  beforeEach((context) => {
+    const mockIntersectionObserver = vi.fn();
+    mockIntersectionObserver.mockReturnValue({
+      observe: () => null,
+      unobserve: () => null,
+      disconnect: () => null
+    });
+    context.dismiss = vi.fn();
+    context.applyAction = vi.fn();
+    window.IntersectionObserver = mockIntersectionObserver;
+    const buttonEl = _();
+    render(
+      /* @__PURE__ */ o("div", { children: [
+        /* @__PURE__ */ o("button", { ref: buttonEl, children: "Popover Controller" }),
+        buttonEl && /* @__PURE__ */ o(
+          Popover,
+          {
+            targetElement: buttonEl,
+            title: "Test Popover",
+            "aria-label": "popover-test",
+            open: true,
+            disableFocusTrap: true,
+            dismiss: context.dismiss,
+            dismissible: true,
+            variant: PopoverContainerVariant.TOOLTIP,
+            position: PopoverContainerPosition.BOTTOM,
+            actions: [
+              {
+                title: "apply",
+                variant: ButtonVariant.PRIMARY,
+                event: context.applyAction,
+                disabled: false
+              }
+            ],
+            children: /* @__PURE__ */ o("input", { "data-testid": "mock-textbox", type: "text" })
+          }
+        )
+      ] })
+    );
+  });
+  test("should automatically focus", async () => {
+    const inputEl = screen.getByTestId("mock-textbox");
+    await waitForWrapper(() => {
+      globalExpect(inputEl).toHaveFocus();
+    });
+  });
+  test("should call dismiss on click outside", async ({ dismiss }) => {
+    const titleEl = screen.getByText(/Test Popover/i);
+    const buttonEl = screen.getByRole("button", { name: "Popover Controller" });
+    const inputEl = screen.getByTestId("mock-textbox");
+    await waitForWrapper(() => {
+      globalExpect(inputEl).toHaveFocus();
+    });
+    await userEvent.click(inputEl);
+    globalExpect(titleEl).toBeInTheDocument();
+    globalExpect(dismiss).toBeCalledTimes(0);
+    await userEvent.click(buttonEl);
+    globalExpect(dismiss).toBeCalledTimes(1);
+  });
+  test("should call dismiss on esc keyboard action", async ({ dismiss }) => {
+    await userEvent.keyboard("[Escape]");
+    const buttonEl = screen.getByRole("button", { name: "Popover Controller" });
+    const popoverEl = screen.getByTestId("mock-textbox");
+    globalExpect(dismiss).toBeCalledTimes(1);
+    globalExpect(buttonEl).toHaveFocus();
+    globalExpect(popoverEl).not.toHaveFocus();
+  });
+  test("should have dismiss icon", async ({ dismiss }) => {
+    const closeButton = screen.getByLabelText(/close/i);
+    globalExpect(closeButton).toBeInTheDocument();
+    await userEvent.click(closeButton);
+    globalExpect(dismiss).toBeCalledTimes(1);
+  });
+  test("should have action button and call function on click", async ({ applyAction }) => {
+    const applyButton = screen.getByLabelText(/apply/i);
+    globalExpect(applyButton).toBeInTheDocument();
+    await userEvent.click(applyButton);
+    globalExpect(applyAction).toBeCalledTimes(1);
+  });
+  test.skip("should add tooltip class", async () => {
+    await waitForWrapper(
+      () => {
+        globalExpect(screen.getByRole("dialog")).toHaveClass("adyen-pe-tooltip");
+      },
+      { timeout: 5e3 }
+    );
+  });
+});
+describe("Popover component close", () => {
+  beforeEach(() => {
+    const mockIntersectionObserver = vi.fn();
+    mockIntersectionObserver.mockReturnValue({
+      observe: () => null,
+      unobserve: () => null,
+      disconnect: () => null
+    });
+    window.IntersectionObserver = mockIntersectionObserver;
+    const buttonEl = _();
+    render(
+      /* @__PURE__ */ o("div", { children: [
+        /* @__PURE__ */ o("button", { ref: buttonEl, children: "Popover Controller" }),
+        /* @__PURE__ */ o(Popover, { targetElement: buttonEl, "aria-label": "popover-test", children: /* @__PURE__ */ o("input", { "data-testid": "mock-textbox", type: "text" }) })
+      ] })
+    );
+  });
+  test("should not appear", () => {
+    const inputEl = screen.queryByRole("textbox");
+    globalExpect(inputEl).not.toBeInTheDocument();
+  });
+});

package/dist/es/components/internal/Popover/PopoverDismissButton/PopoverDismissButton.js

@@ -1,20 +1,24 @@
-import { jsx as o } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import n from "../../Button/Button.js";
-import { ButtonVariant as r } from "../../Button/types.js";
-import "./PopoverDismissButton.scss.js";
-import s from "../../../../core/Context/useCoreContext.js";
-import { memo as l } from "../../../../external/preact/compat/dist/compat.module.js";
-import { Fragment as m } from "../../../../external/preact/dist/preact.module.js";
-function a({ image: t = !0, onClick: e }) {
-  const { i18n: i } = s();
-  return /* @__PURE__ */ o(m, { children: /* @__PURE__ */ o(
-    n,
+import '../../../../../PopoverDismissButton.css';
+import { o } from "../../../../../jsxRuntime.module-69493d81.mjs";
+import Button from "../../Button/Button.js";
+import { B as ButtonVariant } from "../../../../../types-7ad6576a.mjs";
+import useCoreContext from "../../../../core/Context/useCoreContext.js";
+import { x } from "../../../../../compat.module-a4d537ff.mjs";
+import { k } from "../../../../../preact.module-38e5a571.mjs";
+const PopoverDismissButton$2 = "";
+function PopoverDismissButton({ image = true, onClick }) {
+  const { i18n } = useCoreContext();
+  const getConditionalClasses = () => {
+    return image ? "adyen-pe-popover-dismiss-button--on-image" : "";
+  };
+  return /* @__PURE__ */ o(k, { children: /* @__PURE__ */ o(
+    Button,
     {
-      className: (() => t ? "adyen-fp-popover-dismiss-button--on-image" : "")(),
-      iconButton: !0,
-      variant: r.TERTIARY,
-      onClick: e,
-      "aria-label": i.get("closeIconLabel"),
+      className: getConditionalClasses(),
+      iconButton: true,
+      variant: ButtonVariant.TERTIARY,
+      onClick,
+      "aria-label": i18n.get("closeIconLabel"),
       children: /* @__PURE__ */ o("svg", { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: [
         /* @__PURE__ */ o("title", { children: "dismiss" }),
         /* @__PURE__ */ o(
@@ -30,7 +34,7 @@ function a({ image: t = !0, onClick: e }) {
     }
   ) });
 }
-const L = l(a);
+const PopoverDismissButton$1 = x(PopoverDismissButton);
 export {
-  L as default
+  PopoverDismissButton$1 as default
 };

package/dist/es/components/internal/Popover/PopoverTitle/PopoverTitle.js

@@ -1,11 +1,13 @@
-import { jsx as a } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import e from "../../Typography/Typography.js";
-import { TypographyVariant as o } from "../../Typography/types.js";
-import { memo as n } from "../../../../external/preact/compat/dist/compat.module.js";
-function p({ title: t, isImageTitle: r = !1 }) {
-  return /* @__PURE__ */ a(e, { strongest: !r, variant: (() => r ? o.SUBTITLE : o.BODY)(), children: t });
+import { o } from "../../../../../jsxRuntime.module-69493d81.mjs";
+import { T as Typography, b as TypographyVariant } from "../../../../../Typography-11b95870.mjs";
+import { x } from "../../../../../compat.module-a4d537ff.mjs";
+function PopoverTitle({ title, isImageTitle = false }) {
+  const getVariant = () => {
+    return isImageTitle ? TypographyVariant.SUBTITLE : TypographyVariant.BODY;
+  };
+  return /* @__PURE__ */ o(Typography, { strongest: !isImageTitle, variant: getVariant(), children: title });
 }
-const c = n(p);
+const PopoverTitle$1 = x(PopoverTitle);
 export {
-  c as default
+  PopoverTitle$1 as default
 };

package/dist/es/components/internal/Popover/constants.js

@@ -1,9 +1,18 @@
-const E = "adyen-fp-popover", _ = `${E}-container`, A = `${E}__header`, O = `${E}__header-title`, o = `${E}__content`, t = `${E}__footer`;
+const DEFAULT_POPOVER_CLASSNAME = "adyen-pe-popover";
+const DEFAULT_TOOLTIP_CLASSNAME = "adyen-pe-tooltip";
+const POPOVER_CONTAINER_CLASSNAME = `${DEFAULT_POPOVER_CLASSNAME}-container`;
+const POPOVER_HEADER_CLASSNAME = `${DEFAULT_POPOVER_CLASSNAME}__header`;
+const POPOVER_HEADER_TITLE_CLASSNAME = `${DEFAULT_POPOVER_CLASSNAME}__header-title`;
+const POPOVER_CONTENT_CLASSNAME = `${DEFAULT_POPOVER_CLASSNAME}__content`;
+const TOOLTIP_CONTENT_CLASSNAME = `${DEFAULT_TOOLTIP_CLASSNAME}__content`;
+const POPOVER_FOOTER_CLASSNAME = `${DEFAULT_POPOVER_CLASSNAME}__footer`;
 export {
-  E as DEFAULT_POPOVER_CLASSNAME,
-  _ as POPOVER_CONTAINER_CLASSNAME,
-  o as POPOVER_CONTENT_CLASSNAME,
-  t as POPOVER_FOOTER_CLASSNAME,
-  A as POPOVER_HEADER_CLASSNAME,
-  O as POPOVER_HEADER_TITLE_CLASSNAME
+  DEFAULT_POPOVER_CLASSNAME,
+  DEFAULT_TOOLTIP_CLASSNAME,
+  POPOVER_CONTAINER_CLASSNAME,
+  POPOVER_CONTENT_CLASSNAME,
+  POPOVER_FOOTER_CLASSNAME,
+  POPOVER_HEADER_CLASSNAME,
+  POPOVER_HEADER_TITLE_CLASSNAME,
+  TOOLTIP_CONTENT_CLASSNAME
 };

package/dist/es/components/internal/Popover/utils/popoverUtil.js

@@ -0,0 +1,51 @@
+const popoverUtil = (() => {
+  let popoverRefs = [];
+  const closePopoversOutsideOfClick = (eventPath) => {
+    const index = eventPath.reduce((index2, path) => {
+      const pathMatchIndex = path instanceof Node ? popoverRefs.findIndex((popoverRef) => {
+        const popoverRefId = popoverRef.element.getAttribute("id");
+        const pathId = path && (path == null ? void 0 : path.getAttribute) ? path == null ? void 0 : path.getAttribute("id") : null;
+        return popoverRefId === pathId;
+      }) : -1;
+      if (index2 === -1 && pathMatchIndex !== -1)
+        return pathMatchIndex;
+      return index2;
+    }, -1);
+    if (index === -1) {
+      closeNestedPopovers(0);
+    } else {
+      index + 1 <= popoverRefs.length - 1 && closeNestedPopovers(index + 1);
+    }
+  };
+  const remove = (currentRef) => {
+    const index = popoverRefs.findIndex((refs) => refs.element.getAttribute("id") === currentRef.getAttribute("id"));
+    if (index >= 0) {
+      popoverRefs.splice(index, 1);
+    }
+  };
+  const add = (currentRef, callback) => {
+    const index = popoverRefs.findIndex((refs) => refs.element.getAttribute("id") === currentRef.getAttribute("id"));
+    if (index >= 0)
+      return;
+    popoverRefs.push({ element: currentRef, callback });
+  };
+  const closeNestedPopovers = (fromIndex) => {
+    var _a, _b;
+    const popoverLength = popoverRefs.length;
+    for (let i = fromIndex; i < popoverLength; i++) {
+      (_b = (_a = popoverRefs == null ? void 0 : popoverRefs[i]) == null ? void 0 : _a.callback) == null ? void 0 : _b.call(_a);
+    }
+    popoverRefs.splice(fromIndex);
+  };
+  const closeAll = () => {
+    popoverRefs.forEach((ref) => {
+      var _a;
+      return (_a = ref == null ? void 0 : ref.callback) == null ? void 0 : _a.call(ref);
+    });
+    popoverRefs = [];
+  };
+  return { add, remove, closeAll, closePopoversOutsideOfClick };
+})();
+export {
+  popoverUtil
+};

package/dist/es/components/internal/Popover/utils/utils.js

@@ -1,32 +1,38 @@
-import { struct as f, enumerable as o, structFrom as u } from "../../../../utils/common/index.js";
-const m = (() => {
-  const t = /* @__PURE__ */ new WeakMap(), s = f({
-    remove: o(function() {
-      i(this.observerCallback);
+import { struct, enumerable, structFrom } from "../../../../utils/common/index.js";
+const getIntersectionObserver = (() => {
+  const observerCallbackMap = /* @__PURE__ */ new WeakMap();
+  const withIntersectionObserver = struct({
+    remove: enumerable(function() {
+      remove(this.observerCallback);
     })
-  }), n = (e) => {
-    let r = t.get(e);
-    if (r === void 0) {
-      const v = new IntersectionObserver(
-        (b) => {
-          b.forEach((c) => {
-            e && e(c);
+  });
+  const findObserver = (callbackFn) => {
+    let observerInstance = observerCallbackMap.get(callbackFn);
+    if (observerInstance === void 0) {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (callbackFn)
+              callbackFn(entry);
           });
         },
         { root: null, rootMargin: "", threshold: [1] }
       );
-      r = u(s, {
-        observerCallback: o(e),
-        observer: o(v)
-      }), t.set(e, r);
+      observerInstance = structFrom(withIntersectionObserver, {
+        observerCallback: enumerable(callbackFn),
+        observer: enumerable(observer)
+      });
+      observerCallbackMap.set(callbackFn, observerInstance);
     }
-    return r;
-  }, i = (e) => {
-    const r = t.get(e);
-    r == null || r.observer.disconnect(), t.delete(e);
+    return observerInstance;
   };
-  return n;
+  const remove = (callbackFn) => {
+    const currentObserver = observerCallbackMap.get(callbackFn);
+    currentObserver == null ? void 0 : currentObserver.observer.disconnect();
+    observerCallbackMap.delete(callbackFn);
+  };
+  return findObserver;
 })();
 export {
-  m as default
+  getIntersectionObserver as default
 };

package/dist/es/components/internal/SVGIcons/CheckedBox.js

@@ -1,7 +1,7 @@
-import { jsx as o } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import h from "../../../utils/fixedForwardRef.js";
-const c = h(({ title: r, ...e }, t) => /* @__PURE__ */ o("svg", { ...e, ref: t, xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
-  r && /* @__PURE__ */ o("title", { children: r }),
+import { o } from "../../../../jsxRuntime.module-69493d81.mjs";
+import fixedForwardRef from "../../../utils/fixedForwardRef.js";
+const CheckedBox = fixedForwardRef(({ title, ...props }, ref) => /* @__PURE__ */ o("svg", { ...props, ref, xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
+  title && /* @__PURE__ */ o("title", { children: title }),
   /* @__PURE__ */ o(
     "path",
     {
@@ -11,5 +11,5 @@ const c = h(({ title: r, ...e }, t) => /* @__PURE__ */ o("svg", { ...e, ref: t,
   )
 ] }));
 export {
-  c as default
+  CheckedBox as default
 };