react-bounded-overlay-manager 1.0.0-beta.1

package/dist/src/api/BoundedOverlayManagerApi.d.ts

@@ -0,0 +1,14 @@
+import TimedEventManager from "../timer/TimedEventManager";
+export type BoundedOverlayManagerApiOptions = {
+    timedEventManager: TimedEventManager | null;
+    updateOverlaysContainerBoundingBox: () => void;
+};
+declare class BoundedOverlayManagerApi {
+    private timedEventManager;
+    private _updateOverlaysContainerBoundingBox;
+    constructor({ timedEventManager, updateOverlaysContainerBoundingBox }: BoundedOverlayManagerApiOptions);
+    renderOverlays(): void;
+    clearOverlays(): void;
+    updateOverlaysContainerBoundingBox(): void;
+}
+export default BoundedOverlayManagerApi;

package/dist/src/api/BoundedOverlayManagerApi.js

@@ -0,0 +1,24 @@
+var r = Object.defineProperty;
+var i = (t, e, a) => e in t ? r(t, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[e] = a;
+var n = (t, e, a) => (i(t, typeof e != "symbol" ? e + "" : e, a), a);
+class s {
+  constructor({ timedEventManager: e, updateOverlaysContainerBoundingBox: a }) {
+    n(this, "timedEventManager");
+    n(this, "_updateOverlaysContainerBoundingBox");
+    this.timedEventManager = e, this._updateOverlaysContainerBoundingBox = a;
+  }
+  renderOverlays() {
+    var e;
+    (e = this.timedEventManager) == null || e.requestStart();
+  }
+  clearOverlays() {
+    var e;
+    (e = this.timedEventManager) == null || e.requestStop();
+  }
+  updateOverlaysContainerBoundingBox() {
+    this._updateOverlaysContainerBoundingBox();
+  }
+}
+export {
+  s as default
+};

package/dist/src/components/BoundedOverlayManager.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import BoundedOverlayManagerContent from './BoundedOverlayManagerContent';
+type Props = React.ComponentProps<typeof BoundedOverlayManagerContent> & {
+    boundingComponentRef: React.RefObject<HTMLElement>;
+};
+declare const BoundedOverlayManager: React.FC<Props>;
+export default BoundedOverlayManager;

package/dist/src/components/BoundedOverlayManager.js

@@ -0,0 +1,17 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useState as m, useCallback as s } from "react";
+import u from "react-dom";
+import d from "../hooks/useFullscreenChange.js";
+import { OverlayManagerContextProvider as i } from "../context/OverlayManagerContext.js";
+import f from "./BoundedOverlayManagerContent.js";
+const r = () => document.fullscreenElement || document.body, M = ({ boundingComponentRef: o, ...n }) => {
+  const [a, e] = m(r), l = s(() => {
+    e(r());
+  }, [e]);
+  d({ handleFullscreenChange: l });
+  const c = /* @__PURE__ */ t(i, { boundingComponentRef: o, children: /* @__PURE__ */ t(f, { ...n }) });
+  return u.createPortal(c, a);
+};
+export {
+  M as default
+};

package/dist/src/components/BoundedOverlayManagerContent.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement } from "react";
+import Overlay from "./Overlay";
+import BoundedOverlayManagerApi from "../api/BoundedOverlayManagerApi";
+type Props = {
+    children: ReactElement<typeof Overlay>[] | ReactElement<typeof Overlay>;
+    overlaysShowTimeout?: number;
+    persistentlyShowOverlays?: boolean;
+    hideOverlaysOnMouseLeave?: boolean;
+    showOverlaysOnMouseMove?: boolean;
+    skipAllSystemEvents?: boolean;
+    unmountContentWhenHidden?: boolean;
+    onApiUpdated?: (api: BoundedOverlayManagerApi) => void;
+};
+declare const BoundedOverlayManagerContent: React.FC<Props>;
+export default BoundedOverlayManagerContent;

package/dist/src/components/BoundedOverlayManagerContent.js

@@ -0,0 +1,46 @@
+import { jsx as v } from "react/jsx-runtime";
+import { useState as L, useRef as T, useEffect as A, useCallback as a, useLayoutEffect as l } from "react";
+import R from "../hooks/useResizeObserver.js";
+import { copyComponentBoundingBox as U } from "../util/bbox.js";
+import D from "./OverlaysContainer.js";
+import N from "../hooks/useOverlayManagerEvents.js";
+import C from "../hooks/useForwardBoundingComponentEvents.js";
+import g from "../hooks/useTimedEventManager.js";
+import { useOverlayManagerContext as F } from "../context/OverlayManagerContext.js";
+import H from "../hooks/useApiUpdateHandler.js";
+import V from "../hooks/useWindowResize.js";
+import { DEFAULT_OVERLAYS_SHOW_TIMEOUT as B, DEFAULT_PERSISTANTLY_SHOW_OVERLAYS as Y, DEFAULT_SKIP_ALL_SYSTEM_EVENTS as w, DEFAULT_HIDE_OVERLAYS_ON_MOUSE_LEAVE as x, DEFAULT_SHOW_OVERLAYS_ON_MOUSE_MOVE as y, DEFAULT_UNMOUNT_CONTENT_WHEN_HIDDEN as I } from "../config.js";
+const Z = ({
+  children: i,
+  overlaysShowTimeout: m = B,
+  persistentlyShowOverlays: o = Y,
+  skipAllSystemEvents: s = w,
+  hideOverlaysOnMouseLeave: E = x,
+  showOverlaysOnMouseMove: f = y,
+  unmountContentWhenHidden: O = I,
+  onApiUpdated: _
+}) => {
+  const { boundingComponentRef: t } = F(), [d, n] = L(o), r = T(null);
+  A(() => {
+    n(o);
+  }, [o]);
+  const p = a(() => n(!0), []), M = a(() => n(!1), []), u = g({ onStart: p, onStop: M, timeoutDuration: m, returnNull: o }), S = f && !s, c = E && !s, e = a(() => {
+    window.requestAnimationFrame(() => {
+      U(t, r);
+    });
+  }, [t, r]);
+  return C(), H({
+    timedEventManager: u,
+    onApiUpdated: _,
+    updateOverlaysContainerBoundingBox: e
+  }), N({
+    timedEventManager: u,
+    requestStartOnMouseMove: S,
+    requestStopOnMouseMove: c
+  }), V({ handleResize: e }), R(t, { handleResize: e }), l(() => {
+    e();
+  }, [e]), /* @__PURE__ */ v(D, { ref: r, show: d, unmountContentWhenHidden: O, children: i });
+};
+export {
+  Z as default
+};

package/dist/src/components/Overlay.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import PredefinedPosition from "../enum/PredefinedPosition";
+import { BottomCenterOffsetProps, BottomLeftOffsetProps, BottomRightOffsetProps, CenterOffsetProps, MidLeftOffsetProps, MidRightOffsetProps, TopCenterOffsetProps, TopLeftOffsetProps, TopRightOffsetProps } from "../types/OffsetProps";
+export declare const overlayClassName: string;
+type PositionOffsetMapping = {
+    [PredefinedPosition.TOP_LEFT]: TopLeftOffsetProps;
+    [PredefinedPosition.BOTTOM_CENTER]: BottomCenterOffsetProps;
+    [PredefinedPosition.TOP_RIGHT]: TopRightOffsetProps;
+    [PredefinedPosition.BOTTOM_LEFT]: BottomLeftOffsetProps;
+    [PredefinedPosition.BOTTOM_RIGHT]: BottomRightOffsetProps;
+    [PredefinedPosition.TOP_CENTER]: TopCenterOffsetProps;
+    [PredefinedPosition.MID_LEFT]: MidLeftOffsetProps;
+    [PredefinedPosition.MID_RIGHT]: MidRightOffsetProps;
+    [PredefinedPosition.CENTER]: CenterOffsetProps;
+};
+type OverlayPositionProps = {
+    [P in keyof PositionOffsetMapping]: {
+        position: P;
+        offset?: PositionOffsetMapping[P];
+    };
+}[keyof PositionOffsetMapping];
+type Props = OverlayPositionProps & {
+    children?: React.ReactNode;
+};
+declare const Overlay: React.FC<Props>;
+export default Overlay;

package/dist/src/components/Overlay.js

@@ -0,0 +1,43 @@
+import "../../assets/Overlay.css";
+import { jsx as y } from "react/jsx-runtime";
+import { useRef as T, useCallback as u, useState as v, useEffect as O } from "react";
+import t from "../enum/PredefinedPosition.js";
+import P from "../hooks/useForwardOverlayEvents.js";
+import { useOverlayManagerContext as E } from "../context/OverlayManagerContext.js";
+const _ = "_overlay_ractj_1", C = {
+  overlay: _
+}, I = C.overlay, R = {
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+  topInPercent: 0,
+  leftInPercent: 0
+}, d = (s, a) => {
+  if (!s.current)
+    return {};
+  const { position: f, offset: l } = a, { top: o, bottom: e, left: r, right: n, topInPercent: m, leftInPercent: p } = {
+    ...R,
+    ...l
+  }, c = `${50 + p}%`, i = `${50 + m}%`;
+  return {
+    [t.BOTTOM_CENTER]: { bottom: e, left: c, transform: "translateX(-50%)" },
+    [t.TOP_LEFT]: { top: o, left: r },
+    [t.TOP_RIGHT]: { top: o, right: n },
+    [t.CENTER]: { top: i, left: c, transform: "translate(-50%, -50%)" },
+    [t.BOTTOM_LEFT]: { bottom: e, left: r },
+    [t.BOTTOM_RIGHT]: { bottom: e, right: n },
+    [t.TOP_CENTER]: { top: o, left: c, transform: "translateX(-50%)" },
+    [t.MID_LEFT]: { top: i, left: r, transform: "translateY(-50%)" },
+    [t.MID_RIGHT]: { top: i, right: n, transform: "translateY(-50%)" }
+  }[f] || {};
+}, h = ({ offset: s, position: a, children: f }) => {
+  const l = T(null), { boundingComponentRef: o } = E(), e = u(() => d(o, { position: a, offset: s }), [o, a, s]), [r, n] = v(e);
+  return P({ overlayRef: l }), O(() => {
+    n(e());
+  }, [e]), /* @__PURE__ */ y("div", { ref: l, className: I, role: "overlay", style: r, children: f });
+};
+export {
+  h as default,
+  I as overlayClassName
+};

package/dist/src/components/OverlaysContainer.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactElement } from 'react';
+import Overlay from './Overlay';
+export declare const overlaysContainerClassName: string;
+export declare const overlaysContainerContentClassName: string;
+type Props = {
+    children: ReactElement<typeof Overlay>[] | ReactElement<typeof Overlay>;
+    show: boolean;
+    unmountContentWhenHidden: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/dist/src/components/OverlaysContainer.js

@@ -0,0 +1,12 @@
+import "../../assets/OverlaysContainer.css";
+import { jsx as o } from "react/jsx-runtime";
+import s from "react";
+const l = "_overlaysContainer_wi19r_1", i = "_overlaysContainerContent_wi19r_6", t = {
+  overlaysContainer: l,
+  overlaysContainerContent: i
+}, C = t.overlaysContainer, c = t.overlaysContainerContent, y = ({ children: e, show: n, unmountContentWhenHidden: a }, r) => /* @__PURE__ */ o("div", { role: "overlays-container", className: C, ref: r, children: a && !n ? null : /* @__PURE__ */ o("div", { role: "overlays-container-content", className: c, style: { display: n ? "block" : "none" }, children: e }) }), f = s.forwardRef(y);
+export {
+  f as default,
+  C as overlaysContainerClassName,
+  c as overlaysContainerContentClassName
+};

package/dist/src/components/test/BoundedOverlayManager.test.js

@@ -0,0 +1,37 @@
+import { jsx as r } from "react/jsx-runtime";
+import { s as i, a as m } from "../../../react.esm-GKFzux-6.js";
+import u from "../BoundedOverlayManager.js";
+import "../../../index-7ofMxoL9.js";
+jest.mock("../../context/OverlayManagerContext", () => ({
+  OverlayManagerContextProvider: ({ children: t, boundingComponentRef: e }) => (e == null || e(), t)
+}));
+jest.mock("../BoundedOverlayManagerContent", () => ({
+  __esModule: !0,
+  default: ({ children: t }) => /* @__PURE__ */ r("div", { children: t })
+}));
+describe("BoundedOverlayManager", () => {
+  let t, e;
+  const o = "mock-test-id", d = () => /* @__PURE__ */ r("div", { "data-testid": o }), c = () => i.queryByTestId(o), s = () => {
+    t = document.fullscreenElement, e = document.createElement("div"), document.body.appendChild(e), Object.defineProperty(document, "fullscreenElement", {
+      value: e,
+      writable: !0
+    });
+  }, a = () => {
+    Object.defineProperty(document, "fullscreenElement", {
+      value: t,
+      writable: !0
+    }), document.body.removeChild(e);
+  }, l = (n) => {
+    n = n || jest.fn(), m(
+      /* @__PURE__ */ r(u, { boundingComponentRef: n, children: /* @__PURE__ */ r(d, {}) })
+    );
+  };
+  it("renders content into the fullscreen element when in fullscreen mode", () => {
+    s(), l(), expect(e).toContainElement(c()), a();
+  }), it("renders the content into document.body when not in fullscreen mode", () => {
+    l(), expect(document.body).toContainElement(c());
+  }), it("boudingComponentRef is passed to the provider", () => {
+    const n = jest.fn();
+    l(n), expect(n).toHaveBeenCalled();
+  });
+});

package/dist/src/components/test/BoundedOverlayManagerContent.test.js

@@ -0,0 +1,92 @@
+import { jsx as e } from "react/jsx-runtime";
+import c from "react";
+import { a as s } from "../../../react.esm-GKFzux-6.js";
+import "../../../index-7ofMxoL9.js";
+import n from "../BoundedOverlayManagerContent.js";
+import { useOverlayManagerContext as v } from "../../context/OverlayManagerContext.js";
+import d from "../../hooks/useTimedEventManager.js";
+import u from "../../hooks/useForwardBoundingComponentEvents.js";
+import h from "../../hooks/useOverlayManagerEvents.js";
+import m from "../../hooks/useResizeObserver.js";
+import { makeEventOnlyMockComponentRef as p } from "../../hooks/test/util.js";
+import O from "../../hooks/useApiUpdateHandler.js";
+jest.mock("../../hooks/useTimedEventManager");
+jest.mock("../../hooks/useForwardBoundingComponentEvents");
+jest.mock("../../hooks/useOverlayManagerEvents");
+jest.mock("../../hooks/useResizeObserver");
+jest.mock("../../hooks/useApiUpdateHandler");
+jest.mock("../../util/bbox", () => ({ copyComponentBoundingBox: jest.fn() }));
+jest.mock("../OverlaysContainer", () => c.forwardRef(({ children: a, show: t }, r) => /* @__PURE__ */ e("div", { ref: r, "data-testid": "overlays-container", "data-show": t, children: a })));
+jest.mock("../../context/OverlayManagerContext");
+describe("BoundedOverlayManagerContent", () => {
+  let a;
+  beforeEach(() => {
+    a = p(), v.mockReturnValue({
+      boundingComponentRef: a
+    });
+  }), afterEach(() => {
+    jest.clearAllMocks();
+  }), it("calls useTimedEventManager with the correct arguments", () => {
+    s(
+      /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("div", { children: "Mock Children" }) })
+    ), expect(d).toHaveBeenCalledWith(expect.objectContaining({
+      onStart: expect.any(Function),
+      onStop: expect.any(Function),
+      timeoutDuration: 2e3,
+      returnNull: !1
+    }));
+  }), it("calls useForwardBoundingComponentEvents", () => {
+    s(
+      /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("div", { children: "Mock Children" }) })
+    ), expect(u).toHaveBeenCalled();
+  }), it.each([
+    {
+      showOverlaysOnMouseMove: !0,
+      hideOverlaysOnMouseLeave: !1,
+      skipAllSystemEvents: !1
+    },
+    {
+      showOverlaysOnMouseMove: !1,
+      hideOverlaysOnMouseLeave: !0,
+      skipAllSystemEvents: !1
+    },
+    {
+      showOverlaysOnMouseMove: !0,
+      hideOverlaysOnMouseLeave: !0,
+      skipAllSystemEvents: !0
+    },
+    {
+      showOverlaysOnMouseMove: !1,
+      hideOverlaysOnMouseLeave: !1,
+      skipAllSystemEvents: !0
+    }
+  ])("calls useOverlayManagerEvents with the correct arguments when showOverlaysOnMouseMove is $showOverlaysOnMouseMove, hideOverlaysOnMouseLeave is $hideOverlaysOnMouseLeave and skipAllSystemEvents is $skipAllSystemEvents", ({ showOverlaysOnMouseMove: t, hideOverlaysOnMouseLeave: r, skipAllSystemEvents: o }) => {
+    const i = t && !o, l = r && !o;
+    s(
+      /* @__PURE__ */ e(n, { showOverlaysOnMouseMove: t, hideOverlaysOnMouseLeave: r, skipAllSystemEvents: o, children: /* @__PURE__ */ e("div", { children: "Mock Children" }) })
+    ), expect(h).toHaveBeenCalledWith(expect.objectContaining({
+      requestStartOnMouseMove: i,
+      requestStopOnMouseMove: l
+    }));
+  }), it("calls useResizeObserver with the correct arguments", () => {
+    s(
+      /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("div", { children: "Mock Children" }) })
+    ), expect(m).toHaveBeenCalledWith(a, expect.objectContaining({
+      handleResize: expect.any(Function)
+    }));
+  }), it("renders OverlaysContainer with the correct props and children", () => {
+    const { getByTestId: t, rerender: r } = s(
+      /* @__PURE__ */ e(n, { persistentlyShowOverlays: !0, children: /* @__PURE__ */ e("div", { children: "Test Overlay" }) })
+    ), o = t("overlays-container");
+    expect(o).toHaveAttribute("data-show", "true"), expect(o).toHaveTextContent("Test Overlay"), r(
+      /* @__PURE__ */ e(n, { persistentlyShowOverlays: !1, children: /* @__PURE__ */ e("div", { children: "Test Overlay" }) })
+    ), expect(o).toHaveAttribute("data-show", "false");
+  }), it("calls useApiUpdateHandler with the correct arguments", () => {
+    const t = jest.fn();
+    s(
+      /* @__PURE__ */ e(n, { onApiUpdated: t, children: /* @__PURE__ */ e("div", { children: "Test Overlay" }) })
+    ), expect(O).toHaveBeenCalledWith(expect.objectContaining({
+      onApiUpdated: t
+    }));
+  });
+});

package/dist/src/components/test/Overlay.test.js

@@ -0,0 +1,245 @@
+import { jsx as o } from "react/jsx-runtime";
+import { a as r } from "../../../react.esm-GKFzux-6.js";
+import "../../../index-7ofMxoL9.js";
+import n, { overlayClassName as c } from "../Overlay.js";
+import t from "../../enum/PredefinedPosition.js";
+import { useOverlayManagerContext as f } from "../../context/OverlayManagerContext.js";
+import d from "../../hooks/useForwardOverlayEvents.js";
+const T = [
+  {
+    positionProps: {
+      position: t.TOP_LEFT
+    },
+    expectedStyle: {
+      top: 0,
+      left: 0
+    }
+  },
+  {
+    positionProps: {
+      position: t.TOP_LEFT,
+      offset: { top: "10%", left: "10%" }
+    },
+    expectedStyle: {
+      top: "10%",
+      left: "10%"
+    }
+  },
+  {
+    positionProps: {
+      position: t.BOTTOM_CENTER
+    },
+    expectedStyle: {
+      bottom: 0,
+      left: "50%",
+      transform: "translateX(-50%)"
+    }
+  },
+  {
+    positionProps: {
+      position: t.TOP_RIGHT
+    },
+    expectedStyle: {
+      top: 0,
+      right: 0
+    }
+  },
+  {
+    positionProps: {
+      position: t.TOP_RIGHT,
+      offset: { top: "10%", right: "10%" }
+    },
+    expectedStyle: {
+      top: "10%",
+      right: "10%"
+    }
+  },
+  {
+    positionProps: {
+      position: t.BOTTOM_LEFT
+    },
+    expectedStyle: {
+      bottom: 0,
+      left: 0
+    }
+  },
+  {
+    positionProps: {
+      position: t.BOTTOM_LEFT,
+      offset: { bottom: "10%", left: "10%" }
+    },
+    expectedStyle: {
+      bottom: "10%",
+      left: "10%"
+    }
+  },
+  {
+    positionProps: {
+      position: t.BOTTOM_RIGHT
+    },
+    expectedStyle: {
+      bottom: 0,
+      right: 0
+    }
+  },
+  {
+    positionProps: {
+      position: t.BOTTOM_RIGHT,
+      offset: { bottom: "10%", right: "10%" }
+    },
+    expectedStyle: {
+      bottom: "10%",
+      right: "10%"
+    }
+  },
+  {
+    positionProps: {
+      position: t.TOP_CENTER
+    },
+    expectedStyle: {
+      top: 0,
+      left: "50%",
+      transform: "translateX(-50%)"
+    }
+  },
+  {
+    positionProps: {
+      position: t.TOP_CENTER,
+      offset: { leftInPercent: 10 }
+    },
+    expectedStyle: {
+      top: 0,
+      left: "60%",
+      transform: "translateX(-50%)"
+    }
+  },
+  {
+    positionProps: {
+      position: t.BOTTOM_CENTER,
+      offset: { leftInPercent: 10 }
+    },
+    expectedStyle: {
+      bottom: 0,
+      left: "60%",
+      transform: "translateX(-50%)"
+    }
+  },
+  {
+    positionProps: {
+      position: t.CENTER
+    },
+    expectedStyle: {
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)"
+    }
+  },
+  {
+    positionProps: {
+      position: t.CENTER,
+      offset: { topInPercent: 10, leftInPercent: 10 }
+    },
+    expectedStyle: {
+      top: "60%",
+      left: "60%",
+      transform: "translate(-50%, -50%)"
+    }
+  },
+  {
+    positionProps: {
+      position: t.MID_LEFT
+    },
+    expectedStyle: {
+      top: "50%",
+      left: 0,
+      transform: "translateY(-50%)"
+    }
+  },
+  {
+    positionProps: {
+      position: t.MID_LEFT,
+      offset: { topInPercent: 10, left: "10%" }
+    },
+    expectedStyle: {
+      top: "60%",
+      left: "10%",
+      transform: "translateY(-50%)"
+    }
+  },
+  {
+    positionProps: {
+      position: t.MID_RIGHT
+    },
+    expectedStyle: {
+      top: "50%",
+      right: 0,
+      transform: "translateY(-50%)"
+    }
+  },
+  {
+    positionProps: {
+      position: t.MID_RIGHT,
+      offset: { topInPercent: 10, right: "10%" }
+    },
+    expectedStyle: {
+      top: "60%",
+      right: "10%",
+      transform: "translateY(-50%)"
+    }
+  }
+];
+jest.mock("../../context/OverlayManagerContext");
+jest.mock("../../hooks/useForwardBoundingComponentEvents");
+jest.mock("../../hooks/useResizeObserver");
+jest.mock("../../hooks/useForwardOverlayEvents", () => ({
+  __esModule: !0,
+  // This property is needed for mocking default exports
+  default: jest.fn()
+}));
+describe("Overlay Component", () => {
+  const a = { current: document.createElement("div") };
+  beforeEach(() => {
+    f.mockReturnValue({
+      boundingComponentRef: a
+    });
+  }), it.each(T)("applies correct styles for position $positionProps.position and offset $positionProps.offset", ({ positionProps: e, expectedStyle: i }) => {
+    const { getByRole: s } = r(
+      /* @__PURE__ */ o(n, { ...e, children: "Test Content" })
+    ), p = s("overlay");
+    expect(p).toHaveStyle(i);
+  }), it("useForwardOverlayEvents is called with correct arguments", () => {
+    r(
+      /* @__PURE__ */ o(n, { position: t.TOP_LEFT, children: "Test Content" })
+    ), expect(d).toHaveBeenCalledWith(expect.objectContaining({
+      overlayRef: expect.anything()
+    }));
+  }), it("renders children", () => {
+    const e = "child-testid", i = /* @__PURE__ */ o("div", { "data-testid": e, children: "Test Child" }), { getByTestId: s } = r(
+      /* @__PURE__ */ o(n, { position: t.TOP_LEFT, children: i })
+    );
+    expect(s(e)).toBeInTheDocument();
+  }), it("overlay element has the correct class name", () => {
+    const { getByRole: e } = r(
+      /* @__PURE__ */ o(n, { position: t.TOP_LEFT, children: "Test Content" })
+    );
+    expect(e("overlay")).toHaveClass(c);
+  }), it("updates as expected when position prop is updated", () => {
+    const { rerender: e, getByRole: i } = r(
+      /* @__PURE__ */ o(n, { position: t.TOP_CENTER, children: "Test Content" })
+    );
+    let s = i("overlay");
+    expect(s).toHaveStyle({ top: 0, left: "50%" }), e(
+      /* @__PURE__ */ o(n, { position: t.CENTER, children: "Test Content" })
+    ), expect(s).toHaveStyle({ top: "50%", left: "50%" });
+  }), it("updates as expected when offset prop is updated", () => {
+    const e = { top: "10%", left: "10%" }, { rerender: i, getByRole: s } = r(
+      /* @__PURE__ */ o(n, { position: t.TOP_LEFT, offset: e, children: "Test Content" })
+    );
+    let p = s("overlay");
+    expect(p).toHaveStyle(e);
+    const l = { top: "20%", left: "20%" };
+    i(
+      /* @__PURE__ */ o(n, { position: t.TOP_LEFT, offset: l, children: "Test Content" })
+    ), expect(p).toHaveStyle(l);
+  });
+});

package/dist/src/components/test/OverlaysContainer.test.js

@@ -0,0 +1,36 @@
+import { jsx as t } from "react/jsx-runtime";
+import r, { overlaysContainerClassName as d, overlaysContainerContentClassName as h } from "../OverlaysContainer.js";
+import "../../../index-7ofMxoL9.js";
+import { a as i } from "../../../react.esm-GKFzux-6.js";
+const u = (s) => s.querySelector("[role='overlays-container']"), l = (s) => s.querySelector("[role='overlays-container-content']");
+describe("OverlaysContainer", () => {
+  const s = "Mock Child", c = "mock-child-id", o = /* @__PURE__ */ t("div", { "data-testid": c, children: s });
+  it("renders children", () => {
+    const { getByTestId: e } = i(
+      /* @__PURE__ */ t(r, { show: !0, unmountContentWhenHidden: !1, children: o })
+    );
+    expect(e(c)).toBeInTheDocument();
+  }), it("toggles visibility of content based on show prop", () => {
+    const { rerender: e, container: a } = i(
+      /* @__PURE__ */ t(r, { show: !1, unmountContentWhenHidden: !1, children: o })
+    );
+    let n = l(a);
+    expect(n).toHaveStyle("display: none"), e(
+      /* @__PURE__ */ t(r, { show: !0, unmountContentWhenHidden: !1, children: o })
+    ), expect(n).toHaveStyle("display: block");
+  }), it("unmounts content when hidden and unmountContentWhenHidden prop is true", () => {
+    const { rerender: e, container: a } = i(
+      /* @__PURE__ */ t(r, { show: !0, unmountContentWhenHidden: !0, children: o })
+    );
+    let n = l(a);
+    expect(n).toBeInTheDocument(), e(
+      /* @__PURE__ */ t(r, { show: !1, unmountContentWhenHidden: !0, children: o })
+    ), expect(n).not.toBeInTheDocument();
+  }), it("overlays container and the content divs has correct class name", () => {
+    const { container: e } = i(
+      /* @__PURE__ */ t(r, { show: !0, unmountContentWhenHidden: !1, children: o })
+    );
+    let a = u(e), n = l(e);
+    expect(a).toHaveClass(d), expect(n).toHaveClass(h);
+  });
+});

package/dist/src/config.d.ts

@@ -0,0 +1,6 @@
+export declare const DEFAULT_OVERLAYS_SHOW_TIMEOUT = 2000;
+export declare const DEFAULT_PERSISTANTLY_SHOW_OVERLAYS = false;
+export declare const DEFAULT_SKIP_ALL_SYSTEM_EVENTS = false;
+export declare const DEFAULT_HIDE_OVERLAYS_ON_MOUSE_LEAVE = true;
+export declare const DEFAULT_SHOW_OVERLAYS_ON_MOUSE_MOVE = true;
+export declare const DEFAULT_UNMOUNT_CONTENT_WHEN_HIDDEN = false;

package/dist/src/config.js

@@ -0,0 +1,9 @@
+const E = 2e3, _ = !1, O = !1, S = !0, T = !0, L = !1;
+export {
+  S as DEFAULT_HIDE_OVERLAYS_ON_MOUSE_LEAVE,
+  E as DEFAULT_OVERLAYS_SHOW_TIMEOUT,
+  _ as DEFAULT_PERSISTANTLY_SHOW_OVERLAYS,
+  T as DEFAULT_SHOW_OVERLAYS_ON_MOUSE_MOVE,
+  O as DEFAULT_SKIP_ALL_SYSTEM_EVENTS,
+  L as DEFAULT_UNMOUNT_CONTENT_WHEN_HIDDEN
+};