@simplybusiness/mobius 10.4.2 → 10.4.4

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/src/components/TextField/TextField.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import classNames from "classnames/dedupe";
+import { memo } from "react";
 import type {
   HTMLInputTypeAttribute,
   ReactElement,
@@ -52,7 +53,7 @@ export interface TextFieldProps
 
 export type TextFieldRef = Ref<TextFieldElementType>;
 
-const TextField = ({ ref, ...props }: TextFieldProps) => {
+const TextFieldInner = ({ ref, ...props }: TextFieldProps) => {
   const {
     isDisabled,
     type = "text",
@@ -166,5 +167,6 @@ const TextField = ({ ref, ...props }: TextFieldProps) => {
   );
 };
 
+const TextField = memo(TextFieldInner);
 TextField.displayName = "TextField";
 export { TextField };

package/src/components/TextField/adornmentWithClassName.ts

@@ -9,11 +9,12 @@ export const adornmentWithClassName = (
 ) => {
   if (!component) return null;
 
-  return cloneElement(component, {
+  const typedComponent = component as ReactElement<{ className?: string }>;
+  return cloneElement(typedComponent, {
     className: classNames(
-      (component.props as { className?: string }).className,
+      typedComponent.props.className,
       validationClasses,
       className,
     ),
-  } as { className: string });
+  });
 };

package/src/hooks/useBreakpoint/useBreakpoint.test.tsx

@@ -139,7 +139,7 @@ describe("useBreakpoint", () => {
       it.each([...expected])(
         "it returns %s for breakpoint %s",
         (expectedResult, breakpoint) => {
-          setWindowWidth(value as number);
+          setWindowWidth(value);
 
           const { result } = renderHook(() => useBreakpoint());
           expect(result.current.up(breakpoint)).toBe(expectedResult);
@@ -222,7 +222,7 @@ describe("useBreakpoint", () => {
       it.each([...expected])(
         "it returns %s for breakpoint %s",
         (expectedResult, breakpoint) => {
-          setWindowWidth(value as number);
+          setWindowWidth(value);
 
           const { result } = renderHook(() => useBreakpoint());
           expect(result.current.down(breakpoint)).toBe(expectedResult);
@@ -340,7 +340,7 @@ describe("useBreakpoint", () => {
         it.each([...expected])(
           "it returns %s for breakpoint %s",
           (expectedResult, breakpoint) => {
-            setWindowWidth(value as number);
+            setWindowWidth(value);
 
             const { result } = renderHook(() =>
               useBreakpoint(customBreakpoints),
@@ -419,7 +419,7 @@ describe("useBreakpoint", () => {
         it.each([...expected])(
           "it returns %s for breakpoint %s",
           (expectedResult, breakpoint) => {
-            setWindowWidth(value as number);
+            setWindowWidth(value);
 
             const { result } = renderHook(() => useBreakpoint());
             expect(result.current.down(breakpoint)).toBe(expectedResult);

package/src/styles.d.ts

@@ -4,3 +4,5 @@ declare module "*.css" {
 }
 
 declare module "*.module.css";
+
+declare module "@simplybusiness/icons/iconfont";

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/TextField/TextField.tsx"],
-  "sourcesContent": ["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport type {\n  HTMLInputTypeAttribute,\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n} from \"react\";\nimport type { UseTextFieldProps } from \"../../hooks\";\nimport { useTextField, useValidationClasses } from \"../../hooks\";\nimport type { DOMProps, FocusEvents } from \"../../types\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Stack } from \"../Stack\";\nimport { adornmentWithClassName } from \"./adornmentWithClassName\";\nimport \"./TextField.css\";\n\nexport type TextFieldElementType = HTMLInputElement;\nexport interface TextFieldProps\n  extends\n    DOMProps,\n    FocusEvents,\n    UseTextFieldProps,\n    RefAttributes<TextFieldElementType> {\n  className?: string;\n  errorMessage?: string;\n  children?: ReactNode;\n  label?: string;\n  type?: Exclude<\n    HTMLInputTypeAttribute,\n    | \"button\"\n    | \"checkbox\"\n    | \"color\"\n    | \"date\"\n    | \"datetime-local\"\n    | \"file\"\n    | \"image\"\n    | \"month\"\n    | \"radio\"\n    | \"range\"\n    | \"reset\"\n    | \"submit\"\n    | \"week\"\n  >;\n  prefixInside?: ReactElement;\n  prefixOutside?: ReactElement;\n  suffixInside?: ReactElement;\n  suffixOutside?: ReactElement;\n}\n\nexport type TextFieldRef = Ref<TextFieldElementType>;\n\nconst TextField = ({ ref, ...props }: TextFieldProps) => {\n  const {\n    isDisabled,\n    type = \"text\",\n    isInvalid,\n    className,\n    label,\n    errorMessage,\n    children,\n    isRequired,\n    prefixInside,\n    prefixOutside,\n    suffixInside,\n    suffixOutside,\n    autoComplete,\n    isReadOnly,\n    ...otherProps\n  } = props;\n\n  const resolvedAutoComplete =\n    autoComplete ??\n    (type === \"email\" ? \"email\" : type === \"tel\" ? \"tel\" : undefined);\n\n  const { inputProps, labelProps, errorMessageProps } = useTextField({\n    ...props,\n    autoComplete: resolvedAutoComplete,\n    \"aria-errormessage\": errorMessage,\n  });\n\n  const hidden = type === \"hidden\";\n\n  const validationClasses = useValidationClasses({ isInvalid });\n\n  const textfieldClasses = {\n    \"--is-disabled\": isDisabled,\n    \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n    \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n    \"--is-hidden\": hidden,\n    [className || \"\"]: true,\n  };\n\n  const sharedClasses = classNames(validationClasses, textfieldClasses);\n\n  const labelClasses = classNames(\n    {\n      \"--is-disabled\": isDisabled,\n    },\n    validationClasses,\n  );\n\n  const containerClasses = classNames(\n    \"mobius\",\n    \"mobius-text-field\",\n    sharedClasses,\n  );\n\n  const inputClasses = classNames(\n    \"mobius\",\n    \"mobius-text-field__input\",\n    sharedClasses,\n  );\n\n  const inputWrapperClasses = classNames(\n    \"mobius-text-field__input-wrapper\",\n    sharedClasses,\n  );\n\n  return (\n    <Stack gap=\"xs\" className={containerClasses}>\n      {label && !hidden && (\n        <Label {...labelProps} className={labelClasses}>\n          {label}\n        </Label>\n      )}\n      <div className=\"mobius-text-field__inner-container\">\n        {adornmentWithClassName(\n          prefixOutside,\n          labelClasses,\n          \"mobius-text-field__prefix-outside\",\n        )}\n        <div className={inputWrapperClasses}>\n          {adornmentWithClassName(\n            prefixInside,\n            labelClasses,\n            \"mobius-text-field__prefix-inside\",\n          )}\n          <input\n            {...otherProps}\n            {...inputProps}\n            ref={ref}\n            type={type}\n            className={inputClasses}\n          />\n          {adornmentWithClassName(\n            suffixInside,\n            labelClasses,\n            \"mobius-text-field__suffix-inside\",\n          )}\n        </div>\n        {adornmentWithClassName(\n          suffixOutside,\n          labelClasses,\n          \"mobius-text-field__suffix-outside\",\n        )}\n      </div>\n      {children && (\n        <div className=\"mobius-text-field__children\">{children}</div>\n      )}\n\n      <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />\n    </Stack>\n  );\n};\n\nTextField.displayName = \"TextField\";\nexport { TextField };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAEA,OAAO,gBAAgB;AAevB,OAAO;AA2GC,cAUA,YAVA;AAtER,IAAM,YAAY,CAAC,EAAE,KAAK,GAAG,MAAM,MAAsB;AACvD,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,uBACJ,iBACC,SAAS,UAAU,UAAU,SAAS,QAAQ,QAAQ;AAEzD,QAAM,EAAE,YAAY,YAAY,kBAAkB,IAAI,aAAa;AAAA,IACjE,GAAG;AAAA,IACH,cAAc;AAAA,IACd,qBAAqB;AAAA,EACvB,CAAC;AAED,QAAM,SAAS,SAAS;AAExB,QAAM,oBAAoB,qBAAqB,EAAE,UAAU,CAAC;AAE5D,QAAM,mBAAmB;AAAA,IACvB,iBAAiB;AAAA,IACjB,iBAAiB,OAAO,eAAe,aAAa;AAAA,IACpD,iBAAiB,OAAO,eAAe,aAAa,CAAC;AAAA,IACrD,eAAe;AAAA,IACf,CAAC,aAAa,EAAE,GAAG;AAAA,EACrB;AAEA,QAAM,gBAAgB,WAAW,mBAAmB,gBAAgB;AAEpE,QAAM,eAAe;AAAA,IACnB;AAAA,MACE,iBAAiB;AAAA,IACnB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,eAAe;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,sBAAsB;AAAA,IAC1B;AAAA,IACA;AAAA,EACF;AAEA,SACE,qBAAC,SAAM,KAAI,MAAK,WAAW,kBACxB;AAAA,aAAS,CAAC,UACT,oBAAC,SAAO,GAAG,YAAY,WAAW,cAC/B,iBACH;AAAA,IAEF,qBAAC,SAAI,WAAU,sCACZ;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,qBAAC,SAAI,WAAW,qBACb;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAG;AAAA,YACJ;AAAA,YACA;AAAA,YACA,WAAW;AAAA;AAAA,QACb;AAAA,QACC;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,SACF;AAAA,MACC;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,OACF;AAAA,IACC,YACC,oBAAC,SAAI,WAAU,+BAA+B,UAAS;AAAA,IAGzD,oBAAC,gBAAc,GAAG,mBAAmB,cAA4B;AAAA,KACnE;AAEJ;AAEA,UAAU,cAAc;",
-  "names": []
-}

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": []
-}

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/Combobox/Combobox.tsx"],
-  "sourcesContent": ["import { useOnUnmount } from \"@simplybusiness/mobius-hooks\";\nimport classNames from \"classnames/dedupe\";\nimport type React from \"react\";\nimport type { FocusEvent } from \"react\";\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { useBreakpoint } from \"../../hooks\";\nimport { TextField } from \"../TextField\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport { Listbox } from \"./Listbox\"; // Import Listbox component\nimport type { ComboboxOption, ComboboxProps, ComboboxRef } from \"./types\";\nimport { useComboboxHighlight } from \"./useComboboxHighlight\";\nimport { useComboboxOptions } from \"./useComboboxOptions\";\nimport { getOptionLabel, getOptionValue, isOptionGroup } from \"./utils\";\nimport \"./Combobox.css\";\n\nconst ComboboxInner = <T extends ComboboxOption>({\n  ref,\n  ...props\n}: ComboboxProps<T>) => {\n  const {\n    id,\n    defaultValue,\n    value,\n    options,\n    asyncOptions,\n    delay,\n    minSearchLength,\n    onSelected,\n    className,\n    placeholder,\n    icon,\n    onBlur,\n    onFocus,\n    onChange,\n    // onSearched, // unused prop, consider removing\n    optionComponent,\n    optionTestIdPrefix,\n    errorMessage,\n    ...otherProps\n  } = props;\n  // Avoid re-fetching after selecting an option\n  const skipNextDebounceRef = useRef(false);\n  const fallbackRef = useRef<HTMLInputElement>(null);\n  const [inputValue, setInputValue] = useState(defaultValue || \"\");\n  const [isOpen, setIsOpen] = useState(false);\n  const [isChanging, setIsChanging] = useState(false);\n  const { filteredOptions, updateFilteredOptions, isLoading, error } =\n    useComboboxOptions({\n      options,\n      asyncOptions,\n      inputValue,\n      delay,\n      minSearchLength,\n      skipNextDebounceRef,\n    });\n  const [validationError, setValidationError] = useState(\n    error?.message || errorMessage,\n  );\n  const {\n    highlightedIndex,\n    highlightedGroupIndex,\n    highlightNextOption,\n    highlightPreviousOption,\n    highlightFirstOption,\n    highlightLastOption,\n    clearHighlight,\n  } = useComboboxHighlight(filteredOptions);\n\n  const inputRef = ref || fallbackRef;\n  const listboxId = useId();\n  const statusId = useId();\n  const blurTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n  const userInteractedRef = useRef(false);\n  const justSelectedRef = useRef(false);\n  const { down } = useBreakpoint();\n  const isMobile = down(\"md\");\n\n  useEffect(() => {\n    setValidationError(error?.message || errorMessage);\n  }, [error, errorMessage]);\n\n  // Helper to create properly-typed empty value based on option type\n  const getEmptyValue = (): T => {\n    // Check first available option to determine if we're using string or object options\n    const firstOption = filteredOptions\n      ? isOptionGroup(filteredOptions)\n        ? filteredOptions[0]?.options[0]\n        : filteredOptions[0]\n      : options\n        ? isOptionGroup(options)\n          ? options[0]?.options[0]\n          : options[0]\n        : undefined;\n\n    // If options are strings, return empty string\n    if (typeof firstOption === \"string\") {\n      return \"\" as T;\n    }\n\n    // If options are objects, return empty object with same shape\n    return { label: \"\", value: \"\" } as T;\n  };\n\n  const handleFocus = (e: FocusEvent) => {\n    onFocus?.(e);\n    if (!filteredOptions || filteredOptions.length === 0) return;\n    if (blurTimeoutRef.current) {\n      clearTimeout(blurTimeoutRef.current);\n      blurTimeoutRef.current = null;\n    }\n\n    // Check if this is natural focus (user click/Tab) or programmatic focus\n    const isNaturalFocus =\n      userInteractedRef.current || e.relatedTarget !== null;\n    if (userInteractedRef.current) {\n      userInteractedRef.current = false;\n    }\n\n    // Block opening only if programmatic focus right after selection\n    if (justSelectedRef.current && !isNaturalFocus) {\n      return;\n    }\n\n    // Open dropdown for natural focus\n    if (isNaturalFocus) {\n      setIsOpen(true);\n      justSelectedRef.current = false;\n    }\n  };\n\n  useEffect(() => {\n    if (!inputRef || typeof inputRef === \"function\") return;\n    const inputElement = inputRef.current;\n    if (!inputElement) return;\n\n    const handleMouseDown = () => {\n      // Track that user clicked/interacted with input\n      userInteractedRef.current = true;\n    };\n\n    inputElement.addEventListener(\"mousedown\", handleMouseDown);\n    return () => {\n      inputElement.removeEventListener(\"mousedown\", handleMouseDown);\n    };\n  }, [inputRef]);\n\n  useOnUnmount(() => {\n    if (blurTimeoutRef.current) {\n      clearTimeout(blurTimeoutRef.current);\n    }\n  });\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value;\n    setInputValue(newValue);\n    setValidationError(undefined);\n    justSelectedRef.current = false;\n    setIsChanging(true);\n    // Only open immediately for sync options; async options controlled by useEffect\n    if (!asyncOptions) {\n      setIsOpen(true);\n    }\n    clearHighlight();\n    onChange?.(e);\n  };\n\n  const handleOptionSelect = (option: T) => {\n    const val = getOptionValue(option);\n\n    // Allow empty values to pass through\n    if (!val && val !== \"\") return;\n\n    if (\n      typeof option === \"object\" &&\n      \"callback\" in option &&\n      option.callback &&\n      typeof option.callback === \"function\"\n    ) {\n      justSelectedRef.current = true;\n      setTimeout(() => {\n        if (inputRef && typeof inputRef !== \"function\" && inputRef.current) {\n          inputRef.current.focus();\n        }\n      }, 0);\n      const callbackPromise = option.callback();\n      updateFilteredOptions(callbackPromise);\n      callbackPromise\n        .then(() => {\n          setIsOpen(true);\n          setIsChanging(true);\n        })\n        .catch(() => {\n          // error handled inside updateFilteredOptions via setError\n        });\n      return;\n    }\n\n    // Prevent re-fetching options after selecting an option\n    skipNextDebounceRef.current = true;\n    justSelectedRef.current = true;\n\n    setIsChanging(false);\n    setValidationError(undefined);\n    setIsOpen(false);\n    setInputValue(val);\n    onSelected?.(option);\n  };\n\n  const getFirstOption = () => {\n    if (!filteredOptions) return undefined;\n    if (isOptionGroup(filteredOptions)) {\n      return filteredOptions[0]?.options[0];\n    }\n\n    return filteredOptions[0];\n  };\n\n  const getHighlightedOption = () => {\n    if (!filteredOptions) return undefined;\n    if (highlightedIndex === -1) return undefined;\n\n    if (isOptionGroup(filteredOptions)) {\n      const group = filteredOptions[highlightedGroupIndex];\n      return group?.options[highlightedIndex];\n    }\n\n    return filteredOptions[highlightedIndex];\n  };\n\n  const getHighlightedOptionId = () => {\n    const option = getHighlightedOption();\n    if (!option) return undefined;\n\n    if (isOptionGroup(filteredOptions)) {\n      return `${listboxId}-option-${highlightedGroupIndex}-${highlightedIndex}`;\n    }\n\n    return `${listboxId}-option-${highlightedIndex}`;\n  };\n\n  const handleBlur = (e: FocusEvent<Element, Element>) => {\n    // Force selection if user has matched an entry by typing (not already selected)\n    // Defer this to allow natural focus flow to complete first\n    if (!justSelectedRef.current) {\n      const typedText = inputValue.trim();\n      const typedTextLower = typedText.toLowerCase();\n      const highlightedOption = getHighlightedOption();\n      const label = getOptionLabel(highlightedOption);\n\n      if (typedTextLower === label?.toLowerCase()) {\n        // Exact match with an option\n        setTimeout(() => {\n          handleOptionSelect(highlightedOption as T);\n        }, 0);\n      } else if (typedText === \"\") {\n        // Allow empty values\n        setTimeout(() => {\n          handleOptionSelect(getEmptyValue());\n        }, 0);\n      } else {\n        // Invalid value (not in options and not empty)\n        setValidationError(\n          errorMessage || \"Please select an option from the list\",\n        );\n        setTimeout(() => {\n          setInputValue(\"\");\n        }, 0);\n      }\n    }\n\n    blurTimeoutRef.current = setTimeout(() => {\n      onBlur?.(e);\n      setIsOpen(false);\n      setIsChanging(false);\n    }, 150);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    switch (e.key) {\n      case \"ArrowDown\":\n        e.preventDefault();\n        justSelectedRef.current = false;\n        setIsOpen(true);\n        highlightNextOption();\n        break;\n      case \"ArrowUp\":\n        e.preventDefault();\n        justSelectedRef.current = false;\n        setIsOpen(true);\n        highlightPreviousOption();\n        break;\n      case \"Home\":\n        e.preventDefault();\n        justSelectedRef.current = false;\n        setIsOpen(true);\n        highlightFirstOption();\n        break;\n      case \"End\":\n        e.preventDefault();\n        justSelectedRef.current = false;\n        setIsOpen(true);\n        highlightLastOption();\n        break;\n      case \"Enter\":\n        e.preventDefault();\n        if (isOpen) {\n          const selectedOption = getHighlightedOption() || getFirstOption();\n          if (selectedOption) {\n            handleOptionSelect(selectedOption);\n          }\n        }\n        break;\n      case \"Escape\":\n        e.preventDefault();\n        setInputValue(\"\");\n        setIsOpen(false);\n        clearHighlight();\n        break;\n      default:\n      // Do nothing\n    }\n  };\n\n  useEffect(() => {\n    if (value) {\n      setInputValue(value);\n    }\n  }, [value]);\n\n  // Open and close the combobox based on async filtered options\n  useEffect(() => {\n    if (asyncOptions && isChanging) {\n      setIsOpen(!!filteredOptions && filteredOptions.length > 0);\n    }\n  }, [filteredOptions, asyncOptions, isChanging]);\n\n  const classes = classNames(\n    \"mobius mobius-combobox\",\n    {\n      \"mobius-combobox--is-expanded\": isOpen,\n      \"mobius-combobox--is-loading\": isLoading,\n      \"mobius-combobox--is-mobile\": isMobile,\n    },\n    className,\n  );\n\n  const getStatusMessage = () => {\n    if (isLoading) return \"Loading options\";\n    if (!filteredOptions || filteredOptions.length === 0) {\n      return isChanging ? \"No options found\" : \"\";\n    }\n    const count = isOptionGroup(filteredOptions)\n      ? filteredOptions.reduce((sum, group) => sum + group.options.length, 0)\n      : filteredOptions.length;\n    return isOpen && isChanging\n      ? `${count} option${count === 1 ? \"\" : \"s\"} available`\n      : \"\";\n  };\n\n  return (\n    <div id={id} data-testid=\"mobius-combobox__wrapper\" className={classes}>\n      <VisuallyHidden\n        role=\"status\"\n        aria-live=\"polite\"\n        id={statusId}\n        elementType=\"div\"\n        className=\"mobius-combobox__status\"\n      >\n        {getStatusMessage()}\n      </VisuallyHidden>\n      <TextField\n        {...otherProps}\n        className=\"mobius-combobox__input\"\n        role=\"combobox\"\n        value={inputValue}\n        placeholder={placeholder}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        onChange={handleInputChange}\n        autoComplete=\"off\"\n        aria-describedby={isLoading ? statusId : undefined}\n        aria-autocomplete=\"list\"\n        aria-haspopup=\"listbox\"\n        aria-controls={isOpen ? listboxId : undefined}\n        aria-expanded={isOpen}\n        aria-activedescendant={\n          highlightedIndex === -1 ? undefined : getHighlightedOptionId()\n        }\n        prefixInside={icon}\n        ref={inputRef}\n        errorMessage={errorMessage || validationError || error?.message}\n      />\n      <Listbox\n        id={listboxId}\n        isOpen={isOpen}\n        isLoading={isLoading}\n        options={filteredOptions}\n        highlightedIndex={highlightedIndex}\n        highlightedGroupIndex={highlightedGroupIndex}\n        onOptionSelect={handleOptionSelect}\n        optionComponent={optionComponent}\n        optionTestIdPrefix={optionTestIdPrefix}\n      />\n    </div>\n  );\n};\n\nexport const Combobox = ComboboxInner as <T extends ComboboxOption>(\n  props: ComboboxProps<T> & { ref?: ComboboxRef },\n) => React.JSX.Element;\n"],
-  "mappings": "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",
-  "names": []
-}