mui · atomiks · Jun 6, 2025
@@ -0,0 +1,122 @@
+.Paragraph {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  color: var(--color-gray-900);
+  text-wrap: balance;
+  max-width: 20rem;
+  margin-top: 10rem;
+}
+
+.Link {
+  outline: 0;
+  color: var(--color-blue);
+  text-decoration-line: none;
+  text-decoration-thickness: 1px;
+  text-decoration-color: color-mix(in oklab, var(--color-blue), transparent 40%);
+  text-underline-offset: 2px;
+
+  @media (hover: hover) {
+    &:hover {
+      text-decoration-line: underline;
+    }
+  }
+
+  &[data-popup-open] {
+    text-decoration-line: underline;
+  }
+
+  &:focus-visible {
+    border-radius: 0.125rem;
+    outline: 2px solid var(--color-blue);
+    text-decoration-line: none;
+  }
+}
+
+.Popup {
+  box-sizing: border-box;
+  width: 240px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  background-color: canvas;
+  transform-origin: var(--transform-origin);
+  transition:
+    transform 150ms,
+    opacity 150ms;
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+
+  @media (prefers-color-scheme: light) {
+    outline: 1px solid var(--color-gray-200);
+    box-shadow:
+      0 10px 15px -3px var(--color-gray-200),
+      0 4px 6px -4px var(--color-gray-200);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    outline: 1px solid var(--color-gray-300);
+    outline-offset: -1px;
+  }
+}
+
+.Arrow {
+  display: flex;
+
+  &[data-side='top'] {
+    bottom: -8px;
+    rotate: 180deg;
+  }
+
+  &[data-side='bottom'] {
+    top: -8px;
+    rotate: 0deg;
+  }
+
+  &[data-side='left'] {
+    right: -13px;
+    rotate: 90deg;
+  }
+
+  &[data-side='right'] {
+    left: -13px;
+    rotate: -90deg;
+  }
+}
+
+.ArrowFill {
+  fill: canvas;
+}
+
+.ArrowOuterStroke {
+  @media (prefers-color-scheme: light) {
+    fill: var(--color-gray-200);
+  }
+}
+
+.ArrowInnerStroke {
+  @media (prefers-color-scheme: dark) {
+    fill: var(--color-gray-300);
+  }
+}
+
+.Image {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 0.25rem;
+}
+
+.Summary {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--color-gray-900);
+  text-wrap: pretty;
+}
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { PreviewCard } from '@base-ui-components/react/preview-card';
+import styles from './inline-positioning.module.css';
+
+export default function ExamplePreviewCard() {
+  return (
+    <PreviewCard.Root>
+      <p className={styles.Paragraph}>
+        The principles of good{' '}
+        <PreviewCard.Trigger
+          className={styles.Link}
+          href="https://en.wikipedia.org/wiki/Typography"
+        >
+          typography that remain into
+        </PreviewCard.Trigger>{' '}
+        the digital age.
+      </p>
+
+      <PreviewCard.Portal>
+        <PreviewCard.Positioner sideOffset={8}>
+          <PreviewCard.Popup className={styles.Popup}>
+            <PreviewCard.Arrow className={styles.Arrow}>
+              <ArrowSvg />
+            </PreviewCard.Arrow>
+            <img
+              width="448"
+              height="300"
+              className={styles.Image}
+              src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
+              alt="Station Hofplein signage in Rotterdam, Netherlands"
+            />
+            <p className={styles.Summary}>
+              <strong>Typography</strong> is the art and science of arranging type to
+              make written language clear, visually appealing, and effective in
+              communication.
+            </p>
+          </PreviewCard.Popup>
+        </PreviewCard.Positioner>
+      </PreviewCard.Portal>
+    </PreviewCard.Root>
+  );
+}
+
+function ArrowSvg(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
+      <path
+        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
+        className={styles.ArrowFill}
+      />
+      <path
+        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
+        className={styles.ArrowOuterStroke}
+      />
+      <path
+        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
+        className={styles.ArrowInnerStroke}
+      />
+    </svg>
+  );
+}
@@ -1,5 +1,7 @@
 'use client';
 import * as React from 'react';
+import { inline } from '@floating-ui/react';
+import { isHTMLElement } from '@floating-ui/utils/dom';
 import { usePreviewCardRootContext } from '../root/PreviewCardContext';
 import { usePreviewCardPositioner } from './usePreviewCardPositioner';
 import { PreviewCardPositionerContext } from './PreviewCardPositionerContext';
@@ -38,7 +40,8 @@ export const PreviewCardPositioner = React.forwardRef(function PreviewCardPositi
     ...elementProps
   } = componentProps;
 
-  const { open, mounted, floatingRootContext, setPositionerElement } = usePreviewCardRootContext();
+  const { open, mounted, floatingRootContext, setPositionerElement, coordsRef } =
+    usePreviewCardRootContext();
   const keepMounted = usePreviewCardPortalContext();
 
   const positioning = useAnchorPositioning({
@@ -57,6 +60,24 @@ export const PreviewCardPositioner = React.forwardRef(function PreviewCardPositi
     trackAnchor,
     keepMounted,
     collisionAvoidance,
+    inline: inline((state) => {
+      const trigger = state.elements.reference;
+      if (!isHTMLElement(trigger) || !coordsRef.current) {
+        return {};
+      }
+
+      const rects = Array.from(trigger.getClientRects());
+      const rect = rects[coordsRef.current.rectIndex];
+
+      if (!rect) {
+        return {};
+      }
+
+      return {
+        x: rect.left + coordsRef.current.x,
+        y: rect.top + coordsRef.current.y,
+      };
+    }),
   });
 
   const defaultProps: HTMLProps = React.useMemo(() => {

@@ -21,6 +21,7 @@ export interface PreviewCardRootContext {
   transitionStatus: TransitionStatus;
   popupRef: React.RefObject<HTMLElement | null>;
   onOpenChangeComplete: ((open: boolean) => void) | undefined;
+  coordsRef: React.RefObject<{ x: number; y: number; rectIndex: number } | undefined>;
 }
 
 export const PreviewCardRootContext = React.createContext<PreviewCardRootContext | undefined>(

@@ -43,6 +43,7 @@ export function PreviewCardRoot(props: PreviewCardRoot.Props) {
   const [triggerElement, setTriggerElement] = React.useState<Element | null>(null);
   const [positionerElement, setPositionerElement] = React.useState<HTMLElement | null>(null);
   const [instantTypeState, setInstantTypeState] = React.useState<'dismiss' | 'focus'>();
+  const coordsRef: PreviewCardRootContext['coordsRef'] = React.useRef(undefined);
 
   const popupRef = React.useRef<HTMLDivElement | null>(null);
 
@@ -148,6 +149,7 @@ export function PreviewCardRoot(props: PreviewCardRoot.Props) {
       onOpenChangeComplete,
       delay: delayWithDefault,
       closeDelay: closeDelayWithDefault,
+      coordsRef,
     }),
     [
       open,

@@ -17,14 +17,50 @@ export const PreviewCardTrigger = React.forwardRef(function PreviewCardTrigger(
 ) {
   const { render, className, ...elementProps } = componentProps;
 
-  const { open, triggerProps, setTriggerElement } = usePreviewCardRootContext();
+  const { open, triggerProps, setTriggerElement, coordsRef } = usePreviewCardRootContext();
 
   const state: PreviewCardTrigger.State = React.useMemo(() => ({ open }), [open]);
 
   const element = useRenderElement('a', componentProps, {
     ref: [setTriggerElement, forwardedRef],
     state,
-    props: [triggerProps, elementProps],
+    props: [
+      triggerProps,
+      {
+        onFocus() {
+          coordsRef.current = undefined;
+        },
+        onMouseMove(event) {
+          if (open) {
+            return;
+          }
+
+          const rects = Array.from(event.currentTarget.getClientRects());
+
+          if (rects.length < 2) {
+            return;
+          }
+
+          const hovered = rects.reduce(
+            (best, rect, i) => {
+              const d = Math.hypot(
+                event.clientX - (rect.left + rect.width / 2),
+                event.clientY - (rect.top + rect.height / 2),
+              );
+              return d < best.d ? { i, rect, d } : best;
+            },
+            { i: 0, rect: rects[0], d: Number.POSITIVE_INFINITY },
+          );
+
+          coordsRef.current = {
+            rectIndex: hovered.i,
+            x: event.clientX - hovered.rect.left,
+            y: event.clientY - hovered.rect.top,
+          };
+        },
+      },
+      elementProps,
+    ],
     customStyleHookMapping: triggerOpenStateMapping,
   });
 

@@ -117,6 +117,7 @@ export function useAnchorPositioning(
     sticky = false,
     arrowPadding = 5,
     trackAnchor = true,
+    inline: inlineMiddleware,
     // Private parameters
     keepMounted = false,
     floatingRootContext,
@@ -168,7 +169,13 @@ export function useAnchorPositioning(
   const sideOffsetDep = typeof sideOffset !== 'function' ? sideOffset : 0;
   const alignOffsetDep = typeof alignOffset !== 'function' ? alignOffset : 0;
 
-  const middleware: UseFloatingOptions['middleware'] = [
+  const middleware: UseFloatingOptions['middleware'] = [];
+
+  if (inlineMiddleware) {
+    middleware.push(inlineMiddleware);
+  }
+
+  middleware.push(
     offset(
       (state) => {
         const data = getOffsetData(state, sideParam, isRtl);
@@ -190,7 +197,7 @@ export function useAnchorPositioning(
       },
       [sideOffsetDep, alignOffsetDep, isRtl, sideParam],
     ),
-  ];
+  );
 
   const shiftDisabled = collisionAvoidanceAlign === 'none' && collisionAvoidanceSide !== 'shift';
   const crossAxisShiftEnabled =
@@ -555,6 +562,7 @@ export namespace useAnchorPositioning {
     adaptiveOrigin?: Middleware;
     collisionAvoidance: CollisionAvoidance;
     shiftCrossAxis?: boolean;
+    inline?: Middleware;
   }
 
   export interface ReturnValue {