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

package/dist/src/hooks/useForwardOverlayEvents.js

@@ -0,0 +1,21 @@
+import { useEffect as v } from "react";
+import { useOverlayManagerContext as a } from "../context/OverlayManagerContext.js";
+const l = ({ overlayRef: t }) => {
+  const { overlayManagerEventEmitter: o } = a();
+  v(() => {
+    const e = t.current;
+    if (!e)
+      return;
+    const r = (s) => {
+      o.emit("mouseleaveOnOverlay", s);
+    }, n = () => {
+      o.emit("mousemoveOnOverlay");
+    };
+    return e.addEventListener("mouseleave", r), e.addEventListener("mousemove", n), () => {
+      e.removeEventListener("mouseleave", r), e.removeEventListener("mousemove", n);
+    };
+  }, [t]);
+};
+export {
+  l as default
+};

package/dist/src/hooks/useFullscreenChange.d.ts

@@ -0,0 +1,5 @@
+type Options = {
+    handleFullscreenChange: () => void;
+};
+declare const useFullscreenChange: ({ handleFullscreenChange }: Options) => void;
+export default useFullscreenChange;

package/dist/src/hooks/useFullscreenChange.js

@@ -0,0 +1,16 @@
+import { useEffect as c } from "react";
+const o = ({ handleFullscreenChange: e }) => {
+  c(() => {
+    const n = ["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "MSFullscreenChange"];
+    return n.forEach((t) => {
+      document.addEventListener(t, e);
+    }), () => {
+      n.forEach((t) => {
+        document.removeEventListener(t, e);
+      });
+    };
+  }, [e]);
+};
+export {
+  o as default
+};

package/dist/src/hooks/useOverlayManagerEvents.d.ts

@@ -0,0 +1,8 @@
+import TimedEventManager from "../timer/TimedEventManager";
+type Options = {
+    timedEventManager: TimedEventManager | null;
+    requestStartOnMouseMove?: boolean;
+    requestStopOnMouseMove?: boolean;
+};
+declare const useOverlayManagerEvents: ({ timedEventManager, requestStartOnMouseMove, requestStopOnMouseMove, }: Options) => void;
+export default useOverlayManagerEvents;

package/dist/src/hooks/useOverlayManagerEvents.js

@@ -0,0 +1,34 @@
+import { useEffect as v } from "react";
+import { useOverlayManagerContext as i } from "../context/OverlayManagerContext.js";
+const d = ({
+  timedEventManager: e,
+  requestStartOnMouseMove: o = !0,
+  requestStopOnMouseMove: r = !0
+}) => {
+  const { overlayManagerEventEmitter: n, boundingComponentRef: u } = i();
+  v(() => {
+    if (e === null)
+      return;
+    const a = () => {
+      o && e.requestStart();
+    }, l = () => {
+      r && e.requestStop();
+    }, s = (O) => {
+      var m;
+      if (r) {
+        const t = O.relatedTarget;
+        if (t && ((m = u.current) != null && m.contains(t) || u.current === t))
+          return;
+        e.requestStop();
+      }
+    }, f = () => {
+      o && e.requestStart();
+    };
+    return n.on("mousemoveOnBoundingComponent", a), n.on("mouseleaveOnBoundingComponent", l), n.on("mouseleaveOnOverlay", s), n.on("mousemoveOnOverlay", f), () => {
+      n.off("mousemoveOnBoundingComponent", a), n.off("mouseleaveOnBoundingComponent", l), n.off("mouseleaveOnOverlay", s), n.off("mousemoveOnOverlay", f);
+    };
+  }, [e, o, r]);
+};
+export {
+  d as default
+};

package/dist/src/hooks/useResizeObserver.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type Options = {
+    handleResize: (entry: ResizeObserverEntry) => void;
+};
+declare function useResizeObserver(targetElement: React.RefObject<HTMLElement>, { handleResize }: Options): void;
+export default useResizeObserver;

package/dist/src/hooks/useResizeObserver.js

@@ -0,0 +1,19 @@
+import { useEffect as f } from "react";
+import { c as t } from "../../index.module-WXM1Xk0w.js";
+function b(e, { handleResize: s }) {
+  const r = t(s, 1);
+  f(() => {
+    if (!e.current)
+      return;
+    const o = new ResizeObserver((n) => {
+      for (const c of n)
+        r(c);
+    });
+    return o.observe(e.current), () => {
+      o.disconnect();
+    };
+  }, [e, r]);
+}
+export {
+  b as default
+};

package/dist/src/hooks/useScrollOnDocument.d.ts

@@ -0,0 +1,5 @@
+type Options = {
+    handleScroll: () => void;
+};
+declare const useScrollOnDocument: ({ handleScroll }: Options) => void;
+export default useScrollOnDocument;

package/dist/src/hooks/useScrollOnDocument.js

@@ -0,0 +1,11 @@
+import { useEffect as t } from "react";
+import { c as r } from "../../index.module-WXM1Xk0w.js";
+const l = ({ handleScroll: o }) => {
+  const e = r(o, 1);
+  t(() => (document.addEventListener("scroll", e), () => {
+    document.removeEventListener("scroll", e);
+  }), [e]);
+};
+export {
+  l as default
+};

package/dist/src/hooks/useTimedEventManager.d.ts

@@ -0,0 +1,6 @@
+import TimedEventManager, { TimeoutManagerOptions } from '../timer/TimedEventManager';
+type Options = TimeoutManagerOptions & {
+    returnNull?: boolean;
+};
+declare function useTimedEventManager({ onStart, onStop, timeoutDuration, returnNull }: Options): TimedEventManager | null;
+export default useTimedEventManager;

package/dist/src/hooks/useTimedEventManager.js

@@ -0,0 +1,15 @@
+import { useMemo as u, useEffect as t } from "react";
+import m from "../timer/TimedEventManager.js";
+function c({ onStart: r, onStop: f, timeoutDuration: n, returnNull: s = !1 }) {
+  const e = u(() => s ? null : new m({
+    onStart: r,
+    onStop: f,
+    timeoutDuration: n
+  }), [r, f, n, s]);
+  return t(() => () => {
+    e == null || e.requestStop();
+  }, [e]), e;
+}
+export {
+  c as default
+};

package/dist/src/hooks/useWindowResize.d.ts

@@ -0,0 +1,5 @@
+type Options = {
+    handleResize: () => void;
+};
+declare const useWindowResize: ({ handleResize }: Options) => void;
+export default useWindowResize;

package/dist/src/hooks/useWindowResize.js

@@ -0,0 +1,11 @@
+import { useEffect as o } from "react";
+import { c as r } from "../../index.module-WXM1Xk0w.js";
+const s = ({ handleResize: n }) => {
+  const e = r(n, 1);
+  o(() => (window.addEventListener("resize", e), () => {
+    window.removeEventListener("resize", e);
+  }), [e]);
+};
+export {
+  s as default
+};

package/dist/src/timer/TimedEventManager.d.ts

@@ -0,0 +1,16 @@
+export type TimeoutManagerOptions = {
+    onStart: () => void;
+    onStop: () => void;
+    timeoutDuration: number;
+};
+export declare const NO_TIMEOUT = -1;
+declare class TimedEventManager {
+    private onStart;
+    private onStop;
+    private timeoutDuration;
+    private timeoutId;
+    constructor({ onStart, onStop, timeoutDuration }: TimeoutManagerOptions);
+    requestStart(): void;
+    requestStop(): void;
+}
+export default TimedEventManager;

package/dist/src/timer/TimedEventManager.js

@@ -0,0 +1,25 @@
+var s = Object.defineProperty;
+var r = (e, t, i) => t in e ? s(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i;
+var o = (e, t, i) => (r(e, typeof t != "symbol" ? t + "" : t, i), i);
+const n = -1;
+class h {
+  constructor({ onStart: t, onStop: i, timeoutDuration: u }) {
+    o(this, "onStart");
+    o(this, "onStop");
+    o(this, "timeoutDuration");
+    o(this, "timeoutId", null);
+    this.onStart = t, this.onStop = i, this.timeoutDuration = u;
+  }
+  requestStart() {
+    this.timeoutId ? (clearTimeout(this.timeoutId), this.timeoutId = null) : this.onStart(), this.timeoutDuration === -1 ? this.timeoutId = -1 : this.timeoutId = setTimeout(() => {
+      this.requestStop();
+    }, this.timeoutDuration);
+  }
+  requestStop() {
+    this.timeoutId && (this.timeoutId !== -1 && clearTimeout(this.timeoutId), this.timeoutId = null, this.onStop());
+  }
+}
+export {
+  n as NO_TIMEOUT,
+  h as default
+};

package/dist/src/timer/test/TimedEventManager.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/timer/test/TimedEventManager.test.js

@@ -0,0 +1,26 @@
+import r, { NO_TIMEOUT as s } from "../TimedEventManager.js";
+describe("TimedEventManager", () => {
+  let a, t, e;
+  const o = ({ onStart: i, onStop: l, timeoutDuration: n } = {}) => new r({
+    onStart: i || a,
+    onStop: l || t,
+    timeoutDuration: n || 1e3
+  });
+  beforeEach(() => {
+    a = jest.fn(), t = jest.fn(), e = o(), jest.useFakeTimers(), jest.spyOn(global, "setTimeout"), jest.spyOn(global, "clearTimeout");
+  }), afterEach(() => {
+    jest.useRealTimers(), jest.restoreAllMocks();
+  }), it("should call onStart when requestStart is called", () => {
+    e.requestStart(), expect(a).toHaveBeenCalled();
+  }), it("should set a timeout and call onStop after the specified duration", () => {
+    e.requestStart(), expect(setTimeout).toHaveBeenCalledWith(expect.any(Function), 1e3), expect(a).toHaveBeenCalled(), jest.advanceTimersByTime(1e3), expect(t).toHaveBeenCalled();
+  }), it("should clear the timeout when requestStop is called", () => {
+    e.requestStart(), e.requestStop(), expect(clearTimeout).toHaveBeenCalledWith(expect.any(Number)), jest.advanceTimersByTime(1e3), expect(t).toHaveBeenCalled();
+  }), it("should handle NO_TIMEOUT case correctly", () => {
+    e = o({ timeoutDuration: s }), e.requestStart(), expect(setTimeout).not.toHaveBeenCalled(), expect(a).toHaveBeenCalled(), e.requestStop(), expect(clearTimeout).not.toHaveBeenCalled(), expect(t).toHaveBeenCalled();
+  }), it("should handle multiple requestStart calls before timeout clears", () => {
+    e.requestStart(), jest.advanceTimersByTime(1e3 / 2), e.requestStart(), expect(setTimeout).toHaveBeenCalledTimes(2), expect(clearTimeout).toHaveBeenCalledTimes(1), expect(a).toHaveBeenCalledTimes(1), jest.advanceTimersByTime(1e3), expect(t).toHaveBeenCalledTimes(1);
+  }), it("should not do anything on requestStop call without an active timeout", () => {
+    e.requestStop(), expect(t).not.toHaveBeenCalled();
+  });
+});

package/dist/src/types/OffsetProps.d.ts

@@ -0,0 +1,37 @@
+import { CSSProperties } from "react";
+export type TopLeftOffsetProps = {
+    top?: CSSProperties['top'];
+    left?: CSSProperties['left'];
+};
+export type TopRightOffsetProps = {
+    top?: CSSProperties['top'];
+    right?: CSSProperties['right'];
+};
+export type BottomLeftOffsetProps = {
+    bottom?: CSSProperties['bottom'];
+    left?: CSSProperties['left'];
+};
+export type BottomRightOffsetProps = {
+    bottom?: CSSProperties['bottom'];
+    right?: CSSProperties['right'];
+};
+export type TopCenterOffsetProps = {
+    top?: CSSProperties['top'];
+    leftInPercent?: number;
+};
+export type BottomCenterOffsetProps = {
+    bottom?: CSSProperties['bottom'];
+    leftInPercent?: number;
+};
+export type MidLeftOffsetProps = {
+    left?: CSSProperties['left'];
+    topInPercent?: number;
+};
+export type MidRightOffsetProps = {
+    right?: CSSProperties['right'];
+    topInPercent?: number;
+};
+export type CenterOffsetProps = {
+    topInPercent?: number;
+    leftInPercent?: number;
+};

package/dist/src/types/OffsetProps.js

@@ -0,0 +1 @@
+

package/dist/src/util/bbox.d.ts

@@ -0,0 +1,7 @@
+export declare const getComponentBoundingBoxRelativeToBody: (ref: React.RefObject<HTMLElement>) => {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+export declare const copyComponentBoundingBox: (sourceRef: React.RefObject<HTMLElement>, targetRef: React.RefObject<HTMLElement>) => void;

package/dist/src/util/bbox.js

@@ -0,0 +1,20 @@
+const i = (e) => {
+  if (!e.current)
+    throw new Error("The ref is not attached to any element");
+  const { top: t, left: n, width: o, height: c } = e.current.getBoundingClientRect(), r = window.pageYOffset || document.documentElement.scrollTop, l = window.pageXOffset || document.documentElement.scrollLeft;
+  return {
+    top: t + r,
+    left: n + l,
+    width: o,
+    height: c
+  };
+}, p = (e, t) => {
+  if (e.current && t.current) {
+    const { top: n, left: o, width: c, height: r } = i(e);
+    t.current.style.top = `${n}px`, t.current.style.left = `${o}px`, t.current.style.width = `${c}px`, t.current.style.height = `${r}px`;
+  }
+};
+export {
+  p as copyComponentBoundingBox,
+  i as getComponentBoundingBoxRelativeToBody
+};

package/dist/vite-env.d.js

@@ -0,0 +1 @@
+

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "react-bounded-overlay-manager",
+  "private": false,
+  "version": "1.0.0-beta.1",
+  "type": "module",
+  "main": "dist/main.js",
+  "types": "dist/main.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --p ./tsconfig-build.json && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "test": "jest",
+    "storybook": "storybook dev -p 6007",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@cypress/react18": "^2.0.0",
+    "@cypress/vite-dev-server": "^5.0.7",
+    "@storybook/addon-essentials": "^7.6.6",
+    "@storybook/addon-interactions": "^7.6.6",
+    "@storybook/addon-links": "^7.6.6",
+    "@storybook/addon-onboarding": "^1.0.10",
+    "@storybook/blocks": "^7.6.6",
+    "@storybook/react": "^7.6.6",
+    "@storybook/react-vite": "^7.6.6",
+    "@storybook/test": "^7.6.6",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@types/events": "^3.0.3",
+    "@types/jest": "^29.5.11",
+    "@types/node": "^20.10.5",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "cypress": "^13.6.2",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "eslint-plugin-storybook": "^0.6.15",
+    "glob": "^10.3.10",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-full-screen": "^1.1.1",
+    "react-fullscreen-crossbrowser": "^1.1.3",
+    "storybook": "^7.6.6",
+    "ts-jest": "^29.1.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8",
+    "vite-plugin-dts": "^3.6.4",
+    "vite-plugin-lib-inject-css": "^1.3.0"
+  },
+  "dependencies": {
+    "events": "^3.3.0",
+    "use-debounce": "^10.0.0"
+  }
+}