@simplybusiness/mobius 10.4.2 → 10.4.3

package/src/components/Popover/useAutoUpdate.ts

@@ -0,0 +1,43 @@
+import type { RefObject } from "react";
+import { useEffect } from "react";
+
+interface UseAutoUpdateArgs {
+  referenceRef: RefObject<HTMLElement | null>;
+  floatingRef: RefObject<HTMLDivElement | null>;
+  onUpdate: () => void;
+  enabled: boolean;
+}
+
+export const useAutoUpdate = ({
+  referenceRef,
+  floatingRef,
+  onUpdate,
+  enabled,
+}: UseAutoUpdateArgs): void => {
+  useEffect(() => {
+    if (!enabled) return;
+
+    const reference = referenceRef.current;
+    const floating = floatingRef.current;
+
+    const scrollOpts: AddEventListenerOptions = {
+      capture: true,
+      passive: true,
+    };
+    window.addEventListener("scroll", onUpdate, scrollOpts);
+    window.addEventListener("resize", onUpdate, { passive: true });
+
+    const observer =
+      typeof ResizeObserver === "function"
+        ? new ResizeObserver(onUpdate)
+        : null;
+    if (observer && reference) observer.observe(reference);
+    if (observer && floating) observer.observe(floating);
+
+    return () => {
+      window.removeEventListener("scroll", onUpdate, scrollOpts);
+      window.removeEventListener("resize", onUpdate);
+      observer?.disconnect();
+    };
+  }, [enabled, onUpdate, referenceRef, floatingRef]);
+};

package/src/components/Popover/useFloatingPosition.ts

@@ -0,0 +1,177 @@
+import type { CSSProperties, RefObject } from "react";
+import { useCallback, useLayoutEffect } from "react";
+
+type Placement = "bottom" | "top";
+
+interface UseFloatingPositionArgs {
+  referenceRef: RefObject<HTMLElement | null>;
+  floatingRef: RefObject<HTMLDivElement | null>;
+  arrowRef: RefObject<SVGSVGElement | null>;
+  isOpen: boolean;
+  offsetPx: number;
+  arrowWidth: number;
+  useFixedStrategy: boolean;
+}
+
+interface UseFloatingPositionResult {
+  initialFloatingStyles: CSSProperties;
+  initialArrowStyles: CSSProperties;
+  update: () => void;
+}
+
+// Two positioning strategies:
+// - `absolute` + document-relative coords (viewport rect + window.scrollY/X)
+//   when portalled to document.body. The initial containing block is the
+//   document, so absolute coords pin to the trigger and scroll natively.
+// - `fixed` + viewport coords when portalled inside a <dialog> (top-layer).
+//   The dialog's own box would otherwise become the containing block for an
+//   `absolute` child, throwing off coordinates and triggering `overflow: hidden`
+//   clipping. `fixed` keeps the containing block as the viewport.
+const ABSOLUTE_FLOATING_STYLES: CSSProperties = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "max-content",
+};
+
+const FIXED_FLOATING_STYLES: CSSProperties = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "max-content",
+};
+
+const INITIAL_ARROW_STYLES: CSSProperties = {
+  position: "absolute",
+};
+
+const VIEWPORT_PADDING = 0;
+
+// Properties that make an ancestor the containing block for a `position: fixed`
+// descendant, overriding the initial viewport containing block. When the portal
+// target (dialog) has any of these, `position: fixed` coords are interpreted
+// relative to the dialog's box, not the viewport — we compensate by subtracting
+// the dialog's viewport offset.
+const createsFixedContainingBlock = (el: HTMLElement): boolean => {
+  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)
+  );
+};
+
+export const useFloatingPosition = ({
+  referenceRef,
+  floatingRef,
+  arrowRef,
+  isOpen,
+  offsetPx,
+  arrowWidth,
+  useFixedStrategy,
+}: UseFloatingPositionArgs): UseFloatingPositionResult => {
+  // Writes styles directly to the DOM (bypassing React state) so scroll/resize
+  // handlers can update position in the same event-frame the browser uses to
+  // paint the scroll, eliminating the re-render lag that shows up as a
+  // trigger-vs-popover parallax on fast scroll.
+  const update = 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;
+
+    // Clamp to the portal target's bounds when the dialog is a containing
+    // block (its own `overflow: hidden` would clip the popover). Otherwise
+    // clamp to the viewport.
+    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: Placement =
+      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,
+    );
+
+    // Subtract containing-block offset when the dialog is the CB, so
+    // `position: fixed` coords land at the intended viewport position.
+    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;
+
+    // Arrow coords are relative to the floating element, so scroll cancels out.
+    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,
+  ]);
+
+  useLayoutEffect(() => {
+    if (!isOpen) return;
+    update();
+  }, [isOpen, update]);
+
+  return {
+    initialFloatingStyles: useFixedStrategy
+      ? FIXED_FLOATING_STYLES
+      : ABSOLUTE_FLOATING_STYLES,
+    initialArrowStyles: INITIAL_ARROW_STYLES,
+    update,
+  };
+};

package/src/components/Popover/useOutsidePress.ts

@@ -0,0 +1,31 @@
+import type { RefObject } from "react";
+import { useEffect } from "react";
+
+interface UseOutsidePressArgs {
+  referenceRef: RefObject<HTMLElement | null>;
+  floatingRef: RefObject<HTMLDivElement | null>;
+  enabled: boolean;
+  onOutsidePress: (event: PointerEvent) => void;
+}
+
+export const useOutsidePress = ({
+  referenceRef,
+  floatingRef,
+  enabled,
+  onOutsidePress,
+}: UseOutsidePressArgs): void => {
+  useEffect(() => {
+    if (!enabled) return;
+
+    const handler = (event: PointerEvent) => {
+      const target = event.target as Node | null;
+      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]);
+};

package/dist/esm/chunk-O5YEU5TG.js

@@ -1,155 +0,0 @@
-import {
-  Button
-} from "./chunk-FD3JTY5L.js";
-import {
-  Icon
-} from "./chunk-TKIP5Q5H.js";
-
-// src/components/Popover/Popover.tsx
-import {
-  FloatingArrow,
-  arrow,
-  autoUpdate,
-  flip,
-  offset,
-  shift,
-  useDismiss,
-  useFloating,
-  useInteractions
-} from "@floating-ui/react";
-import { cross } from "@simplybusiness/icons";
-import classNames from "classnames/dedupe";
-import { cloneElement, useCallback, useEffect, useRef, useState } from "react";
-import { useWindowEvent } from "@simplybusiness/mobius-hooks";
-import "@simplybusiness/mobius/src/components/Popover/Popover.css";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var OFFSET_FROM_CONTENT_DEFAULT = 10;
-var Popover = (props) => {
-  const { trigger, children, onOpen, onClose, className } = props;
-  const arrowRef = useRef(null);
-  const floatingContainerRef = useRef(null);
-  const [isOpen, setIsOpen] = useState(false);
-  const { refs, floatingStyles, context } = useFloating({
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    whileElementsMounted: autoUpdate,
-    middleware: [
-      arrow({
-        element: arrowRef
-      }),
-      offset(OFFSET_FROM_CONTENT_DEFAULT),
-      shift(),
-      flip()
-    ]
-  });
-  const dismiss = useDismiss(context, {
-    bubbles: true,
-    outsidePress: (event) => {
-      const toggle = refs.reference.current;
-      const isToggleClick = !toggle?.contains(event.target);
-      if (isToggleClick) {
-        onClose?.();
-      }
-      return true;
-    }
-  });
-  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);
-  const containerClasses = classNames(
-    "mobius",
-    "mobius-popover__container",
-    className
-  );
-  const setFloatingRef = useCallback(
-    (node) => {
-      refs.setFloating(node);
-      floatingContainerRef.current = node;
-    },
-    [refs]
-  );
-  useEffect(() => {
-    const el = floatingContainerRef.current;
-    if (!el) return;
-    const preventLabelActivation = (e) => {
-      const target = e.target;
-      if (!target.closest("a[href], input, select, textarea")) {
-        e.preventDefault();
-      }
-    };
-    el.addEventListener("click", preventLabelActivation);
-    return () => el.removeEventListener("click", preventLabelActivation);
-  }, [isOpen]);
-  const toggleVisibility = () => {
-    if (isOpen) {
-      setIsOpen(false);
-      onClose?.();
-      return;
-    }
-    setIsOpen(true);
-    onOpen?.();
-  };
-  const triggerComponent = cloneElement(trigger, {
-    ref: refs.setReference,
-    className: classNames(
-      trigger.props.className,
-      "mobius-popover__toggle"
-    ),
-    onClick: toggleVisibility,
-    ...getReferenceProps()
-  });
-  useWindowEvent("keydown", (e) => {
-    if (e.key === "Escape") {
-      onClose?.();
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    triggerComponent,
-    isOpen && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: containerClasses,
-        ref: setFloatingRef,
-        style: floatingStyles,
-        ...getFloatingProps(),
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "mobius-popover", children: [
-            /* @__PURE__ */ jsx("header", { className: "mobius-popover__header", children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                type: "button",
-                className: "mobius-popover__close-button",
-                onClick: toggleVisibility,
-                "aria-label": "Close",
-                variant: "ghost",
-                children: /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    icon: cross,
-                    size: "md",
-                    className: "mobius-popover__close-icon"
-                  }
-                )
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { className: "mobius-popover__body", children })
-          ] }),
-          /* @__PURE__ */ jsx(
-            FloatingArrow,
-            {
-              ref: arrowRef,
-              context,
-              width: 20,
-              className: "mobius-popover__arrow-icon"
-            }
-          )
-        ]
-      }
-    )
-  ] });
-};
-
-export {
-  Popover
-};
-//# sourceMappingURL=chunk-O5YEU5TG.js.map

package/dist/esm/chunk-O5YEU5TG.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/Popover/Popover.tsx"],
-  "sourcesContent": ["import {\n  FloatingArrow,\n  arrow,\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { cross } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport type { ReactElement, ReactNode, RefAttributes } from \"react\";\nimport { cloneElement, useCallback, useEffect, useRef, useState } from \"react\";\nimport { useWindowEvent } from \"@simplybusiness/mobius-hooks\";\nimport type { DOMProps } from \"../../types\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport \"./Popover.css\";\n\nexport type PopoverElementType = HTMLDivElement;\n\nexport interface PopoverProps\n  extends DOMProps, RefAttributes<PopoverElementType> {\n  children?: ReactNode;\n  trigger: ReactElement;\n  /** Callback that fires each time the accordion is opened */\n  onOpen?: () => void;\n  /** Callback that fires each time the accordion is closed */\n  onClose?: () => void;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n}\n\nconst OFFSET_FROM_CONTENT_DEFAULT = 10;\n\nexport const Popover = (props: PopoverProps) => {\n  const { trigger, children, onOpen, onClose, className } = props;\n  const arrowRef = useRef(null);\n  const floatingContainerRef = useRef<HTMLDivElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      arrow({\n        element: arrowRef,\n      }),\n      offset(OFFSET_FROM_CONTENT_DEFAULT),\n      shift(),\n      flip(),\n    ],\n  });\n  const dismiss = useDismiss(context, {\n    bubbles: true,\n    outsidePress: (event: MouseEvent) => {\n      // Prevent 'onClose' from firing when clicking the toggle to close\n      const toggle = refs.reference.current as HTMLElement;\n      const isToggleClick = !toggle?.contains(event.target as HTMLElement);\n      if (isToggleClick) {\n        onClose?.();\n      }\n      return true;\n    },\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);\n\n  const containerClasses = classNames(\n    \"mobius\",\n    \"mobius-popover__container\",\n    className,\n  );\n\n  const setFloatingRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      refs.setFloating(node);\n      floatingContainerRef.current = node;\n    },\n    [refs],\n  );\n\n  // Native listener to prevent clicks inside the popover from activating\n  // interactive ancestors. Must be native because React's onClick fires\n  // too late via delegation.\n  useEffect(() => {\n    const el = floatingContainerRef.current;\n    if (!el) return;\n\n    const preventLabelActivation = (e: Event) => {\n      const target = e.target as HTMLElement;\n      // Allow default behavior for interactive elements (links, inputs, etc.)\n      // so they remain functional inside the popover.\n      if (!target.closest(\"a[href], input, select, textarea\")) {\n        e.preventDefault();\n      }\n    };\n    el.addEventListener(\"click\", preventLabelActivation);\n    return () => el.removeEventListener(\"click\", preventLabelActivation);\n  }, [isOpen]);\n\n  const toggleVisibility = () => {\n    if (isOpen) {\n      setIsOpen(false);\n      onClose?.();\n      return;\n    }\n\n    setIsOpen(true);\n    onOpen?.();\n  };\n\n  const triggerComponent = cloneElement(trigger, {\n    ref: refs.setReference,\n    className: classNames(\n      (trigger.props as { className?: string }).className,\n      \"mobius-popover__toggle\",\n    ),\n    onClick: toggleVisibility,\n    ...getReferenceProps(),\n  } as Record<string, unknown>);\n\n  useWindowEvent(\"keydown\", e => {\n    if (e.key === \"Escape\") {\n      onClose?.();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  });\n\n  return (\n    <>\n      {triggerComponent}\n      {isOpen && (\n        <div\n          className={containerClasses}\n          ref={setFloatingRef}\n          style={floatingStyles}\n          {...getFloatingProps()}\n        >\n          <div className=\"mobius-popover\">\n            <header className=\"mobius-popover__header\">\n              <Button\n                type=\"button\"\n                className=\"mobius-popover__close-button\"\n                onClick={toggleVisibility}\n                aria-label=\"Close\"\n                variant=\"ghost\"\n              >\n                <Icon\n                  icon={cross}\n                  size=\"md\"\n                  className=\"mobius-popover__close-icon\"\n                />\n              </Button>\n            </header>\n            <div className=\"mobius-popover__body\">{children}</div>\n          </div>\n          <FloatingArrow\n            ref={arrowRef}\n            context={context}\n            width={20}\n            className=\"mobius-popover__arrow-icon\"\n          />\n        </div>\n      )}\n    </>\n  );\n};\n"],
-  "mappings": "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",
-  "names": []
-}