FE-1350: fix popover point positioning

.changeset/solid-masks-wink.md

@@ -0,0 +1,5 @@
+---
+"@hashintel/ds-components": patch
+---
+
+Fix popover point positioning, improve autofocus for dialogs, drawers + tooltips, and export BaseTooltip

apps/hash-frontend/package.json

@@ -22,7 +22,7 @@
   "dependencies": {
     "@ai-sdk/openai": "3.0.63",
     "@apollo/client": "3.10.5",
-    "@ark-ui/react": "5.37.2",
+    "@ark-ui/react": "5.38.1",
     "@blockprotocol/core": "0.1.5",
     "@blockprotocol/graph": "workspace:*",
     "@blockprotocol/hook": "0.1.8",

libs/@hashintel/ds-components/package.json

@@ -73,11 +73,11 @@
     "test:unit:watch": "yarn build:buildinfo && vitest --exclude tests/snapshots.spec.ts"
   },
   "dependencies": {
-    "@ark-ui/react": "5.37.2",
+    "@ark-ui/react": "5.38.1",
     "@hashintel/ds-helpers": "workspace:^",
     "@pandacss/dev": "1.11.1",
     "@pandacss/preset-panda": "1.11.1",
-    "@zag-js/dom-query": "1.41.2",
+    "@zag-js/dom-query": "1.43.0",
     "use-callback-ref": "1.3.3"
   },
   "devDependencies": {
@@ -118,7 +118,7 @@
     "zod": "4.4.3"
   },
   "peerDependencies": {
-    "@ark-ui/react": "^5.37.2",
+    "@ark-ui/react": "^5.38.1",
     "@hashintel/ds-helpers": "workspace:^",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"

libs/@hashintel/ds-components/src/components/Button/button.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/destructuring-assignment, react/button-has-type, @typescript-eslint/prefer-nullish-coalescing */
 import { cx } from "@hashintel/ds-helpers/css";
 
+import { resolveAutoFocusProps } from "../../util/form-shared";
 import { Icon, type IconName } from "../Icon/icon";
 import { LoadingSpinner } from "../Loading/loading-spinner";
 import { Tooltip } from "../Tooltip/tooltip";
@@ -28,6 +29,8 @@ type SharedButtonProps<Element extends HTMLButtonElement | HTMLAnchorElement> =
     pressed?: boolean;
     disabled?: boolean;
     tabIndex?: number;
+    /** Set to true to make the element focused on mount or 'never' to prevent the item being auto-focused */
+    autoFocus?: boolean | "never";
     onClick?: React.ButtonHTMLAttributes<Element>["onClick"];
     onMouseDown?: React.ButtonHTMLAttributes<Element>["onMouseDown"];
     onMouseUp?: React.ButtonHTMLAttributes<Element>["onMouseUp"];
@@ -133,6 +136,7 @@ export const Button = (props: ButtonProps) => {
     onFocus,
     onBlur,
     tabIndex,
+    autoFocus,
     tooltipOptions,
     ...rest
   } = props;
@@ -207,6 +211,7 @@ export const Button = (props: ButtonProps) => {
     "aria-live": loading ? ("polite" as const) : undefined,
     "aria-disabled": disabled || loading || undefined,
     ...rest,
+    ...resolveAutoFocusProps(autoFocus),
   };
 
   // We split this out so that we can type the events properly

libs/@hashintel/ds-components/src/components/Checkbox/checkbox.tsx

@@ -2,6 +2,7 @@ import { Checkbox as BaseCheckbox } from "@ark-ui/react/checkbox";
 
 import { cx } from "@hashintel/ds-helpers/css";
 
+import { resolveAutoFocusProps } from "../../util/form-shared";
 import { styles } from "./checkbox.recipe";
 
 import type { SharedInputProps, Tone } from "../../util/form-shared";
@@ -97,7 +98,7 @@ export const Checkbox = ({
       )}
       <BaseCheckbox.HiddenInput
         ref={inputRef}
-        autoFocus={autoFocus}
+        {...resolveAutoFocusProps(autoFocus)}
         onFocus={onFocus}
         onBlur={onBlur}
       />

libs/@hashintel/ds-components/src/components/CheckboxGroup/checkbox-group.tsx

@@ -114,7 +114,9 @@ export const CheckboxGroup = <const ValueType extends string>({
                 );
               }
             }}
-            autoFocus={autoFocus && index === 0}
+            autoFocus={
+              autoFocus === "never" ? "never" : autoFocus && index === 0
+            }
           />
         );
       })}

libs/@hashintel/ds-components/src/components/Dialog/dialog.stories.tsx

@@ -127,6 +127,7 @@ const buildExampleEntries = (variant: DialogVariant): ExampleProps[] => [
               size="sm"
               iconName="externalLink"
               tooltip="Open docs"
+              autoFocus="never"
             />
           }
         />
@@ -308,6 +309,7 @@ const renderKitchenSink = (
           size="sm"
           iconName="externalLink"
           tooltip="Open docs"
+          autoFocus="never"
         />
       }
     />
@@ -444,13 +446,15 @@ const renderOverflowKitchenSink = (
             size="sm"
             iconName="externalLink"
             tooltip="Open docs"
+            autoFocus="never"
           />
           <Button
             variant="ghost"
             tone="neutral"
             size="sm"
             iconName="info"
             tooltip="More info"
+            autoFocus="never"
           />
         </>
       }

libs/@hashintel/ds-components/src/components/Drawer/drawer.stories.tsx

@@ -115,6 +115,7 @@ const buildExampleEntries = (variant: DrawerVariant): ExampleProps[] => [
               size="sm"
               iconName="externalLink"
               tooltip="Open docs"
+              autoFocus="never"
             />
           }
         />
@@ -336,6 +337,7 @@ const renderKitchenSink = (
           size="sm"
           iconName="externalLink"
           tooltip="Open docs"
+          autoFocus="never"
         />
       }
     />
@@ -515,13 +517,15 @@ const renderOverflowKitchenSink = (
             size="sm"
             iconName="externalLink"
             tooltip="Open docs"
+            autoFocus="never"
           />
           <Button
             variant="ghost"
             tone="neutral"
             size="sm"
             iconName="info"
             tooltip="More info"
+            autoFocus="never"
           />
         </>
       }

libs/@hashintel/ds-components/src/components/Popover/popover-parts.tsx

@@ -29,7 +29,7 @@ export const PopoverHeader = ({
   actions,
   hideCloseButton,
 }: PopoverHeaderProps) => {
-  const { onClose } = useOverlayContext();
+  const { onClose, closeOnInteractOutside } = useOverlayContext();
 
   const showCloseButton = !hideCloseButton && !!onClose;
 
@@ -47,6 +47,7 @@ export const PopoverHeader = ({
               iconName="close"
               tooltip="Close"
               onClick={() => onClose()}
+              autoFocus={closeOnInteractOutside === false ? undefined : "never"}
             />
           )}
         </div>

libs/@hashintel/ds-components/src/components/Popover/popover.recipe.ts

@@ -9,6 +9,7 @@ export const positionerStyles = css({
 });
 
 export const contentStyles = css({
+  transformOrigin: "var(--transform-origin)",
   _open: {
     animationName: "popoverIn",
     animationDuration: "faster",

libs/@hashintel/ds-components/src/components/Popover/popover.stories.tsx

@@ -266,8 +266,8 @@ const gridCells: Cell[] = [
   {
     kind: "point",
     label: "point: center",
-    position: "bottom",
-    getPoint: (rect) => ({ x: rect.width / 2, y: rect.height / 2 }),
+    position: "bottom-start",
+    getPoint: () => ({ x: 50, y: 30 }),
   },
   { kind: "position", position: "right-start" },
   { kind: "position", position: "left" },