@domicile-desktop/component-library 0.0.0-alpha-c9c67f4f5860 → 0.0.0-alpha-e63627fa3d07

package/package.json

@@ -2,8 +2,8 @@
   "dependencies": {
     "@base-ui/react": "^1.8.0",
     "@cprussin/option-result": "^2.0.1",
-    "@domicile-desktop/sdk": "0.0.0-alpha-c9c67f4f5860",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-c9c67f4f5860",
+    "@domicile-desktop/sdk": "0.0.0-alpha-e63627fa3d07",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-e63627fa3d07",
     "@phosphor-icons/react": "^2.1.10"
   },
   "description": "React components and the Panda CSS design system that Domicile's shells are built from.",
@@ -103,5 +103,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-c9c67f4f5860"
+  "version": "0.0.0-alpha-e63627fa3d07"
 }

package/src/Popover/Popover.tsx

@@ -1,6 +1,6 @@
 import { Popover as BasePopover } from "@base-ui/react/popover";
-import type { ReactElement, ReactNode, RefObject } from "react";
-import { useEffect, useRef } from "react";
+import type { ReactElement, ReactNode, RefCallback, RefObject } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { css, cva } from "../../styled-system/css";
 import { flex } from "../../styled-system/patterns";
 import { useStableRef } from "../_control/useStableRef";
@@ -49,6 +49,9 @@ type Props = ExtendProps<
  * A non-modal panel anchored to its trigger, for detail the trigger has no
  * room for. Use `ModalDialog` when the user must respond first.
  *
+ * Stays on its trigger's `<Screen>` region, so on a desktop of several
+ * monitors it never spans two.
+ *
  * Closes on an outside press, Escape, or focus leaving it. The focus check
  * catches presses inside out-of-process frames, which the document can't
  * see. Portaled content such as a `Select` list counts as inside.
@@ -69,16 +72,25 @@ const PopoverComponent = ({
   const actions = actionsRef ?? ownActions;
   const [popupRef, setPopupRef] = useStableRef<HTMLDivElement>();
   const [triggerRef, setTriggerRef] = useStableRef<HTMLElement>();
+  const [screen, setScreen] = useState<Element | undefined>(undefined);
+  const attachTrigger = useCallback<RefCallback<HTMLElement>>(
+    (element) => {
+      setScreen(element?.closest("[data-screen]") ?? undefined);
+      return setTriggerRef(element);
+    },
+    [setTriggerRef],
+  );
   const within = useRef<FocusEvent | undefined>(undefined);
   return (
     <BasePopover.Root actionsRef={actions} {...rootProps}>
       {trigger !== undefined && (
-        <BasePopover.Trigger ref={setTriggerRef} render={trigger} />
+        <BasePopover.Trigger ref={attachTrigger} render={trigger} />
       )}
       <BasePopover.Portal>
         <BasePopover.Positioner
           align={align}
           className={positionerStyles}
+          collisionBoundary={screen}
           onFocus={(event) => {
             within.current = event.nativeEvent;
           }}