[popover] Support detached triggers and multiple triggers per popover

docs/src/app/(private)/experiments/popover-detached-trigger.module.css

@@ -0,0 +1,254 @@
+.Container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+}
+
+.IconButton {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  margin: 0;
+  outline: 0;
+  border: 1px solid var(--color-gray-200);
+  border-radius: 0.375rem;
+  background-color: var(--color-gray-50);
+  color: var(--color-gray-900);
+  user-select: none;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--color-gray-100);
+    }
+  }
+
+  &:active {
+    background-color: var(--color-gray-100);
+  }
+
+  &[data-popup-open] {
+    background-color: var(--color-gray-100);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+}
+
+.Icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.Positioner {
+  transition: transform 0.5s;
+
+  &[data-instant] {
+    transition: none;
+  }
+}
+
+.Popup {
+  box-sizing: border-box;
+  padding: 1rem 1.5rem;
+  border-radius: 0.5rem;
+  background-color: canvas;
+  color: var(--color-gray-900);
+  transform-origin: var(--transform-origin);
+
+  width: var(--popup-width, auto);
+  height: var(--popup-height, auto);
+
+  overflow: hidden;
+
+  transition:
+    width 0.2s cubic-bezier(0.165, 0.84, 0.44, 1),
+    height 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
+
+  &[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);
+  }
+}
+
+.Title {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 500;
+}
+
+.Description {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  color: var(--color-gray-600);
+}
+
+.Actions {
+  display: flex;
+  justify-content: end;
+  gap: 1rem;
+}
+
+.PopoverSection {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+
+  &:not(:last-child) {
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--color-gray-200);
+  }
+
+  & button {
+    padding: 0.25rem 0.75rem;
+    background-color: var(--color-gray-200);
+    border-radius: 4px;
+    margin-top: 0.5rem;
+
+    &:hover {
+      background-color: var(--color-gray-300);
+    }
+  }
+}
+
+.content-switcher {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden; /* This is the viewport */
+}
+
+.slide-item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: translateX(0); /* Start in the center */
+}
+
+/* --- Forward Animation --- */
+.slide-item.exit-forward {
+  animation: slideOutToLeft 0.4s ease-in-out forwards;
+}
+
+.slide-item.enter-forward {
+  animation: slideInFromRight 0.4s ease-in-out forwards;
+}
+
+@keyframes slideOutToLeft {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+@keyframes slideInFromRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* --- Backward Animation --- */
+.slide-item.exit-backward {
+  animation: slideOutToRight 0.4s ease-in-out forwards;
+}
+
+.slide-item.enter-backward {
+  animation: slideInFromLeft 0.4s ease-in-out forwards;
+}
+
+@keyframes slideOutToRight {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+
+@keyframes slideInFromLeft {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}

docs/src/app/(private)/experiments/popover-detached-trigger.tsx

@@ -0,0 +1,133 @@
+'use client';
+import * as React from 'react';
+import { Popover } from '@base-ui-components/react/popover';
+
+// eslint-disable-next-line no-restricted-imports
+import { PopoverHandle } from '@base-ui-components/react/popover/handle/createPopover';
+import {
+  SettingsMetadata,
+  useExperimentSettings,
+} from 'docs/src/components/Experiments/SettingsPanel';
+import styles from './popover-detached-trigger.module.css';
+
+const popover1 = new PopoverHandle<unknown>();
+
+interface Settings {
+  openOnHover: boolean;
+}
+
+export default function PopoverDetachedTrigger() {
+  return (
+    <div className={styles.Container}>
+      <StyledPopover handle={popover1} />
+      <StyledTrigger handle={popover1} payload={1} />
+      <StyledTrigger handle={popover1} payload={2} />
+      <StyledTrigger handle={popover1} payload={3} />
+      <StyledTrigger handle={popover1} payload={4} />
+      <StyledTrigger handle={popover1} payload={5} />
+    </div>
+  );
+}
+
+interface StyledPopoverProps {
+  handle: PopoverHandle<unknown>;
+}
+
+function StyledTrigger<Payload>(props: { handle: PopoverHandle<Payload>; payload: Payload }) {
+  const { settings } = useExperimentSettings<Settings>();
+  return (
+    <Popover.DetachedTrigger
+      className={styles.IconButton}
+      handle={props.handle as PopoverHandle<unknown>}
+      payload={props.payload}
+      openOnHover={settings.openOnHover}
+      delay={50}
+    >
+      <PopupIcon aria-label="Notifications" className={styles.Icon} />
+    </Popover.DetachedTrigger>
+  );
+}
+
+function StyledPopover(props: StyledPopoverProps) {
+  const { handle } = props;
+
+  return (
+    <Popover.Root handle={handle}>
+      {({ payload }) => (
+        <Popover.Portal>
+          <Popover.Positioner sideOffset={8} className={styles.Positioner}>
+            <Popover.Popup className={styles.Popup}>
+              <Popover.Arrow className={styles.Arrow}>
+                <ArrowSvg />
+              </Popover.Arrow>
+              <Popover.Title className={styles.Title}>Popover {payload}</Popover.Title>
+              <Content payload={payload as number} />
+            </Popover.Popup>
+          </Popover.Positioner>
+        </Popover.Portal>
+      )}
+    </Popover.Root>
+  );
+}
+
+function Content({ payload }: { payload: number }) {
+  const [localState, setLocalState] = React.useState(0);
+
+  return (
+    <div>
+      <div className={styles.PopoverSection}>
+        {Array.from({ length: payload }).map((_, i) => (
+          <p key={i}>Lorem ipsum dolor sit amet.</p>
+        ))}
+      </div>
+
+      <div className={styles.PopoverSection}>
+        <p>Local state: {localState}</p>
+        <button type="button" onClick={() => setLocalState((s) => s + 1)}>
+          Increment local state
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export const settingsMetadata: SettingsMetadata<Settings> = {
+  openOnHover: {
+    type: 'boolean',
+    label: 'Open on hover',
+  },
+};
+
+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>
+  );
+}
+
+function PopupIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      height="24px"
+      viewBox="0 -960 960 960"
+      width="24px"
+      fill="#606060"
+    >
+      <path d="M480-80 373-240H160q-33 0-56.5-23.5T80-320v-480q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H587L480-80Zm0-144 64-96h256v-480H160v480h256l64 96Zm0-336Z" />
+    </svg>
+  );
+}