@simplybusiness/mobius 10.4.2 → 10.4.3

package/dist/cjs/components/Popover/useFloatingPosition.js

@@ -0,0 +1,128 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Popover/useFloatingPosition.ts
+var useFloatingPosition_exports = {};
+__export(useFloatingPosition_exports, {
+  useFloatingPosition: () => useFloatingPosition
+});
+module.exports = __toCommonJS(useFloatingPosition_exports);
+var import_react = require("react");
+var ABSOLUTE_FLOATING_STYLES = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "max-content"
+};
+var FIXED_FLOATING_STYLES = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "max-content"
+};
+var INITIAL_ARROW_STYLES = {
+  position: "absolute"
+};
+var VIEWPORT_PADDING = 0;
+var createsFixedContainingBlock = (el) => {
+  const style = window.getComputedStyle(el);
+  return style.transform !== "none" || style.filter !== "none" || style.backdropFilter !== "none" || style.perspective !== "none" || /\b(transform|filter|perspective)\b/.test(style.willChange);
+};
+var useFloatingPosition = ({
+  referenceRef,
+  floatingRef,
+  arrowRef,
+  isOpen,
+  offsetPx,
+  arrowWidth,
+  useFixedStrategy
+}) => {
+  const update = (0, import_react.useCallback)(() => {
+    const reference = referenceRef.current;
+    const floating = floatingRef.current;
+    if (!reference || !floating) return;
+    const refRect = reference.getBoundingClientRect();
+    const floatingWidth = floating.offsetWidth;
+    const floatingHeight = floating.offsetHeight;
+    const scrollX = useFixedStrategy ? 0 : window.scrollX;
+    const scrollY = useFixedStrategy ? 0 : window.scrollY;
+    const parent = floating.parentElement;
+    const parentIsCb = useFixedStrategy && !!parent && createsFixedContainingBlock(parent);
+    const boundsRect = parentIsCb ? parent.getBoundingClientRect() : {
+      left: 0,
+      top: 0,
+      right: window.innerWidth,
+      bottom: window.innerHeight
+    };
+    const bottomTopViewport = refRect.bottom + offsetPx;
+    const topTopViewport = refRect.top - floatingHeight - offsetPx;
+    const overflowsBottom = bottomTopViewport + floatingHeight > boundsRect.bottom;
+    const fitsTop = topTopViewport >= boundsRect.top;
+    const nextPlacement = overflowsBottom && fitsTop ? "top" : "bottom";
+    const topViewport = nextPlacement === "bottom" ? bottomTopViewport : topTopViewport;
+    const rawLeftViewport = refRect.left + refRect.width / 2 - floatingWidth / 2;
+    const minLeftViewport = boundsRect.left + VIEWPORT_PADDING;
+    const maxLeftViewport = Math.max(
+      minLeftViewport,
+      boundsRect.right - floatingWidth - VIEWPORT_PADDING
+    );
+    const leftViewport = Math.min(
+      Math.max(minLeftViewport, rawLeftViewport),
+      maxLeftViewport
+    );
+    const cbOffsetLeft = parentIsCb ? boundsRect.left : 0;
+    const cbOffsetTop = parentIsCb ? boundsRect.top : 0;
+    floating.style.top = `${topViewport + scrollY - cbOffsetTop}px`;
+    floating.style.left = `${leftViewport + scrollX - cbOffsetLeft}px`;
+    const arrow = arrowRef.current;
+    if (!arrow) return;
+    const arrowHalf = arrowWidth / 2;
+    const refCenterX = refRect.left + refRect.width / 2;
+    const rawArrowLeft = refCenterX - leftViewport - arrowHalf;
+    const maxArrowLeft = Math.max(0, floatingWidth - arrowWidth);
+    const arrowLeft = Math.min(Math.max(0, rawArrowLeft), maxArrowLeft);
+    arrow.style.left = `${arrowLeft}px`;
+    if (nextPlacement === "bottom") {
+      arrow.style.bottom = "100%";
+      arrow.style.top = "";
+      arrow.style.transform = "rotate(180deg)";
+    } else {
+      arrow.style.top = "100%";
+      arrow.style.bottom = "";
+      arrow.style.transform = "";
+    }
+  }, [
+    referenceRef,
+    floatingRef,
+    arrowRef,
+    offsetPx,
+    arrowWidth,
+    useFixedStrategy
+  ]);
+  (0, import_react.useLayoutEffect)(() => {
+    if (!isOpen) return;
+    update();
+  }, [isOpen, update]);
+  return {
+    initialFloatingStyles: useFixedStrategy ? FIXED_FLOATING_STYLES : ABSOLUTE_FLOATING_STYLES,
+    initialArrowStyles: INITIAL_ARROW_STYLES,
+    update
+  };
+};
+//# sourceMappingURL=useFloatingPosition.js.map

package/dist/cjs/components/Popover/useFloatingPosition.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Popover/useFloatingPosition.ts"],
+  "sourcesContent": ["import type { CSSProperties, RefObject } from \"react\";\nimport { useCallback, useLayoutEffect } from \"react\";\n\ntype Placement = \"bottom\" | \"top\";\n\ninterface UseFloatingPositionArgs {\n  referenceRef: RefObject<HTMLElement | null>;\n  floatingRef: RefObject<HTMLDivElement | null>;\n  arrowRef: RefObject<SVGSVGElement | null>;\n  isOpen: boolean;\n  offsetPx: number;\n  arrowWidth: number;\n  useFixedStrategy: boolean;\n}\n\ninterface UseFloatingPositionResult {\n  initialFloatingStyles: CSSProperties;\n  initialArrowStyles: CSSProperties;\n  update: () => void;\n}\n\n// Two positioning strategies:\n// - `absolute` + document-relative coords (viewport rect + window.scrollY/X)\n//   when portalled to document.body. The initial containing block is the\n//   document, so absolute coords pin to the trigger and scroll natively.\n// - `fixed` + viewport coords when portalled inside a <dialog> (top-layer).\n//   The dialog's own box would otherwise become the containing block for an\n//   `absolute` child, throwing off coordinates and triggering `overflow: hidden`\n//   clipping. `fixed` keeps the containing block as the viewport.\nconst ABSOLUTE_FLOATING_STYLES: CSSProperties = {\n  position: \"absolute\",\n  top: 0,\n  left: 0,\n  width: \"max-content\",\n};\n\nconst FIXED_FLOATING_STYLES: CSSProperties = {\n  position: \"fixed\",\n  top: 0,\n  left: 0,\n  width: \"max-content\",\n};\n\nconst INITIAL_ARROW_STYLES: CSSProperties = {\n  position: \"absolute\",\n};\n\nconst VIEWPORT_PADDING = 0;\n\n// Properties that make an ancestor the containing block for a `position: fixed`\n// descendant, overriding the initial viewport containing block. When the portal\n// target (dialog) has any of these, `position: fixed` coords are interpreted\n// relative to the dialog's box, not the viewport \u2014 we compensate by subtracting\n// the dialog's viewport offset.\nconst createsFixedContainingBlock = (el: HTMLElement): boolean => {\n  const style = window.getComputedStyle(el);\n  return (\n    style.transform !== \"none\" ||\n    style.filter !== \"none\" ||\n    style.backdropFilter !== \"none\" ||\n    style.perspective !== \"none\" ||\n    /\\b(transform|filter|perspective)\\b/.test(style.willChange)\n  );\n};\n\nexport const useFloatingPosition = ({\n  referenceRef,\n  floatingRef,\n  arrowRef,\n  isOpen,\n  offsetPx,\n  arrowWidth,\n  useFixedStrategy,\n}: UseFloatingPositionArgs): UseFloatingPositionResult => {\n  // Writes styles directly to the DOM (bypassing React state) so scroll/resize\n  // handlers can update position in the same event-frame the browser uses to\n  // paint the scroll, eliminating the re-render lag that shows up as a\n  // trigger-vs-popover parallax on fast scroll.\n  const update = useCallback(() => {\n    const reference = referenceRef.current;\n    const floating = floatingRef.current;\n    if (!reference || !floating) return;\n\n    const refRect = reference.getBoundingClientRect();\n    const floatingWidth = floating.offsetWidth;\n    const floatingHeight = floating.offsetHeight;\n    const scrollX = useFixedStrategy ? 0 : window.scrollX;\n    const scrollY = useFixedStrategy ? 0 : window.scrollY;\n\n    // Clamp to the portal target's bounds when the dialog is a containing\n    // block (its own `overflow: hidden` would clip the popover). Otherwise\n    // clamp to the viewport.\n    const parent = floating.parentElement;\n    const parentIsCb =\n      useFixedStrategy && !!parent && createsFixedContainingBlock(parent);\n    const boundsRect = parentIsCb\n      ? parent.getBoundingClientRect()\n      : {\n          left: 0,\n          top: 0,\n          right: window.innerWidth,\n          bottom: window.innerHeight,\n        };\n\n    const bottomTopViewport = refRect.bottom + offsetPx;\n    const topTopViewport = refRect.top - floatingHeight - offsetPx;\n    const overflowsBottom =\n      bottomTopViewport + floatingHeight > boundsRect.bottom;\n    const fitsTop = topTopViewport >= boundsRect.top;\n    const nextPlacement: Placement =\n      overflowsBottom && fitsTop ? \"top\" : \"bottom\";\n\n    const topViewport =\n      nextPlacement === \"bottom\" ? bottomTopViewport : topTopViewport;\n\n    const rawLeftViewport =\n      refRect.left + refRect.width / 2 - floatingWidth / 2;\n    const minLeftViewport = boundsRect.left + VIEWPORT_PADDING;\n    const maxLeftViewport = Math.max(\n      minLeftViewport,\n      boundsRect.right - floatingWidth - VIEWPORT_PADDING,\n    );\n    const leftViewport = Math.min(\n      Math.max(minLeftViewport, rawLeftViewport),\n      maxLeftViewport,\n    );\n\n    // Subtract containing-block offset when the dialog is the CB, so\n    // `position: fixed` coords land at the intended viewport position.\n    const cbOffsetLeft = parentIsCb ? boundsRect.left : 0;\n    const cbOffsetTop = parentIsCb ? boundsRect.top : 0;\n\n    floating.style.top = `${topViewport + scrollY - cbOffsetTop}px`;\n    floating.style.left = `${leftViewport + scrollX - cbOffsetLeft}px`;\n\n    const arrow = arrowRef.current;\n    if (!arrow) return;\n\n    // Arrow coords are relative to the floating element, so scroll cancels out.\n    const arrowHalf = arrowWidth / 2;\n    const refCenterX = refRect.left + refRect.width / 2;\n    const rawArrowLeft = refCenterX - leftViewport - arrowHalf;\n    const maxArrowLeft = Math.max(0, floatingWidth - arrowWidth);\n    const arrowLeft = Math.min(Math.max(0, rawArrowLeft), maxArrowLeft);\n\n    arrow.style.left = `${arrowLeft}px`;\n    if (nextPlacement === \"bottom\") {\n      arrow.style.bottom = \"100%\";\n      arrow.style.top = \"\";\n      arrow.style.transform = \"rotate(180deg)\";\n    } else {\n      arrow.style.top = \"100%\";\n      arrow.style.bottom = \"\";\n      arrow.style.transform = \"\";\n    }\n  }, [\n    referenceRef,\n    floatingRef,\n    arrowRef,\n    offsetPx,\n    arrowWidth,\n    useFixedStrategy,\n  ]);\n\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n    update();\n  }, [isOpen, update]);\n\n  return {\n    initialFloatingStyles: useFixedStrategy\n      ? FIXED_FLOATING_STYLES\n      : ABSOLUTE_FLOATING_STYLES,\n    initialArrowStyles: INITIAL_ARROW_STYLES,\n    update,\n  };\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/cjs/components/Popover/useOutsidePress.js

@@ -0,0 +1,46 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Popover/useOutsidePress.ts
+var useOutsidePress_exports = {};
+__export(useOutsidePress_exports, {
+  useOutsidePress: () => useOutsidePress
+});
+module.exports = __toCommonJS(useOutsidePress_exports);
+var import_react = require("react");
+var useOutsidePress = ({
+  referenceRef,
+  floatingRef,
+  enabled,
+  onOutsidePress
+}) => {
+  (0, import_react.useEffect)(() => {
+    if (!enabled) return;
+    const handler = (event) => {
+      const target = event.target;
+      if (!target) return;
+      if (referenceRef.current?.contains(target)) return;
+      if (floatingRef.current?.contains(target)) return;
+      onOutsidePress(event);
+    };
+    document.addEventListener("pointerdown", handler);
+    return () => document.removeEventListener("pointerdown", handler);
+  }, [enabled, onOutsidePress, referenceRef, floatingRef]);
+};
+//# sourceMappingURL=useOutsidePress.js.map

package/dist/cjs/components/Popover/useOutsidePress.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Popover/useOutsidePress.ts"],
+  "sourcesContent": ["import type { RefObject } from \"react\";\nimport { useEffect } from \"react\";\n\ninterface UseOutsidePressArgs {\n  referenceRef: RefObject<HTMLElement | null>;\n  floatingRef: RefObject<HTMLDivElement | null>;\n  enabled: boolean;\n  onOutsidePress: (event: PointerEvent) => void;\n}\n\nexport const useOutsidePress = ({\n  referenceRef,\n  floatingRef,\n  enabled,\n  onOutsidePress,\n}: UseOutsidePressArgs): void => {\n  useEffect(() => {\n    if (!enabled) return;\n\n    const handler = (event: PointerEvent) => {\n      const target = event.target as Node | null;\n      if (!target) return;\n      if (referenceRef.current?.contains(target)) return;\n      if (floatingRef.current?.contains(target)) return;\n      onOutsidePress(event);\n    };\n\n    document.addEventListener(\"pointerdown\", handler);\n    return () => document.removeEventListener(\"pointerdown\", handler);\n  }, [enabled, onOutsidePress, referenceRef, floatingRef]);\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA0B;AASnB,IAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAiC;AAC/B,8BAAU,MAAM;AACd,QAAI,CAAC,QAAS;AAEd,UAAM,UAAU,CAAC,UAAwB;AACvC,YAAM,SAAS,MAAM;AACrB,UAAI,CAAC,OAAQ;AACb,UAAI,aAAa,SAAS,SAAS,MAAM,EAAG;AAC5C,UAAI,YAAY,SAAS,SAAS,MAAM,EAAG;AAC3C,qBAAe,KAAK;AAAA,IACtB;AAEA,aAAS,iBAAiB,eAAe,OAAO;AAChD,WAAO,MAAM,SAAS,oBAAoB,eAAe,OAAO;AAAA,EAClE,GAAG,CAAC,SAAS,gBAAgB,cAAc,WAAW,CAAC;AACzD;",
+  "names": []
+}