From 798180a5c5f43f861fc28cc98a8178f877c2d36d Mon Sep 17 00:00:00 2001
From: Kazunari Hara <kz.route21@gmail.com>
Date: Thu, 13 Jun 2024 15:43:16 +0900
Subject: [PATCH 1/3] feat(spindle-ui): use Popover API, Anchor positioning API

---
 .../src/DropdownMenu/DropdownMenu.css         | 154 +++++++------
 .../src/DropdownMenu/DropdownMenu.test.tsx    |  10 +
 .../src/DropdownMenu/DropdownMenu.tsx         | 206 +++---------------
 3 files changed, 121 insertions(+), 249 deletions(-)

diff --git a/packages/spindle-ui/src/DropdownMenu/DropdownMenu.css b/packages/spindle-ui/src/DropdownMenu/DropdownMenu.css
index 017babcf2..28aa5fbce 100644
--- a/packages/spindle-ui/src/DropdownMenu/DropdownMenu.css
+++ b/packages/spindle-ui/src/DropdownMenu/DropdownMenu.css
@@ -3,8 +3,8 @@
  * NOTE: Styles can be overridden with "--DropdownMenu-*" variables
 */
 :root {
-  --DropdownMenu-z-index: 1;
   --DropdownMenu-onFocus-outlineColor: var(--color-focus-clarity);
+  --DropdownMenu-menu-gap: 8px;
 }
 
 .spui-DropdownMenu {
@@ -15,67 +15,107 @@
 .spui-DropdownMenu-menu {
   animation: 0.3s spui-DropdownMenu-fade-in;
   background-color: var(--color-surface-primary);
+  border: none;
   border-radius: 12px;
   box-shadow: 0px 11px 28px rgba(8, 18, 26, 0.12);
   box-sizing: border-box;
+  display: none;
   list-style: none;
   margin: 0;
+  opacity: 0;
   padding: 12px 0;
   position: absolute;
+  transition:
+    opacity 300ms,
+    display 300ms allow-discrete,
+    overlay 300ms allow-discrete;
   width: 256px;
-  z-index: var(--DropdownMenu-z-index);
 }
 
-/* stylelint-disable-next-line plugin/selector-bem-pattern */
-.spui-DropdownMenu-menu.is-fade-out {
-  animation: 0.3s spui-DropdownMenu-fade-out;
-  opacity: 0;
+.spui-DropdownMenu-menu:popover-open {
+  display: block;
+  opacity: 1;
+
+  @starting-style {
+    opacity: 0;
+  }
 }
 
-.spui-DropdownMenu-menu--topLeft,
-.spui-DropdownMenu-menu--topCenter,
 .spui-DropdownMenu-menu--topRight {
-  margin-bottom: 8px;
+  inset-area: top span-left;
+  margin: 0 0 var(--DropdownMenu-menu-gap);
 }
 
-.spui-DropdownMenu-menu--bottomLeft,
-.spui-DropdownMenu-menu--bottomCenter,
-.spui-DropdownMenu-menu--bottomRight {
-  margin-top: 8px;
+.spui-DropdownMenu-menu--topCenter {
+  inset-area: top;
+  margin: 0 0 var(--DropdownMenu-menu-gap);
 }
 
-.spui-DropdownMenu-menu--topLeft,
-.spui-DropdownMenu-menu--bottomLeft {
-  left: 0;
+.spui-DropdownMenu-menu--topLeft {
+  inset-area: top span-right;
+  margin: 0 0 var(--DropdownMenu-menu-gap);
 }
 
-.spui-DropdownMenu-menu--topRight,
-.spui-DropdownMenu-menu--bottomRight {
-  right: 0;
+.spui-DropdownMenu-menu--rightTop {
+  inset-area: right span-bottom;
+  margin: 0 0 0 var(--DropdownMenu-menu-gap);
+}
+
+.spui-DropdownMenu-menu--rightCenter {
+  inset-area: right center;
+  margin: 0 0 0 var(--DropdownMenu-menu-gap);
 }
 
-.spui-DropdownMenu-menu--rightTop,
-.spui-DropdownMenu-menu--rightCenter,
 .spui-DropdownMenu-menu--rightBottom {
-  /* Menuの横幅256px + margin8px */
-  right: -264px;
+  inset-area: right span-top;
+  margin: 0 0 0 var(--DropdownMenu-menu-gap);
 }
 
-.spui-DropdownMenu-menu--leftTop,
-.spui-DropdownMenu-menu--leftCenter,
-.spui-DropdownMenu-menu--leftBottom {
-  /* Menuの横幅256px + margin8px */
-  left: -264px;
+.spui-DropdownMenu-menu--bottomRight {
+  inset-area: bottom span-left;
+  margin: var(--DropdownMenu-menu-gap) 0 0;
+}
+
+.spui-DropdownMenu-menu--bottomCenter {
+  inset-area: bottom;
+  margin: var(--DropdownMenu-menu-gap) 0 0;
+}
+
+.spui-DropdownMenu-menu--bottomLeft {
+  inset-area: bottom span-right;
+  margin: var(--DropdownMenu-menu-gap) 0 0;
 }
 
-.spui-DropdownMenu-menu--rightTop,
 .spui-DropdownMenu-menu--leftTop {
-  top: 0;
+  inset-area: left span-bottom;
+  margin: 0 var(--DropdownMenu-menu-gap) 0 0;
+}
+
+.spui-DropdownMenu-menu--leftCenter {
+  inset-area: left center;
+  margin: 0 var(--DropdownMenu-menu-gap) 0 0;
 }
 
-.spui-DropdownMenu-menu--rightBottom,
 .spui-DropdownMenu-menu--leftBottom {
-  bottom: 0;
+  inset-area: left span-top;
+  margin: 0 var(--DropdownMenu-menu-gap) 0 0;
+}
+
+/* TODO: use position-try */
+@media screen and (max-width: 768px) {
+  .spui-DropdownMenu-menu--rightTop,
+  .spui-DropdownMenu-menu--rightCenter,
+  .spui-DropdownMenu-menu--rightBottom {
+    inset-area: bottom span-right;
+    margin: var(--DropdownMenu-menu-gap) 0 0;
+  }
+
+  .spui-DropdownMenu-menu--leftTop,
+  .spui-DropdownMenu-menu--leftCenter,
+  .spui-DropdownMenu-menu--leftBottom {
+    inset-area: bottom span-left;
+    margin: var(--DropdownMenu-menu-gap) 0 0;
+  }
 }
 
 .spui-DropdownMenu-menuButton {
@@ -107,8 +147,8 @@
 }
 
 .spui-DropdownMenu-menuButton:focus-visible {
-  outline: 2px solid var(--DropdownMenu-onFocus-outlineColor);
-  z-index: var(--DropdownMenu-z-index);
+  outline-color: var(--DropdownMenu-onFocus-outlineColor);
+  outline-width: 2px;
 }
 
 .spui-DropdownMenu-menuItem .spui-DropdownMenu-menuButton::before {
@@ -149,52 +189,8 @@
   margin: 4px 0 0;
 }
 
-@keyframes spui-DropdownMenu-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes spui-DropdownMenu-fade-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .spui-DropdownMenu-menu--rightTop,
-  .spui-DropdownMenu-menu--rightCenter,
-  .spui-DropdownMenu-menu--rightBottom {
-    bottom: auto;
-    left: 0;
-    margin-top: 8px;
-    top: auto !important;
-  }
-
-  .spui-DropdownMenu-menu--leftTop,
-  .spui-DropdownMenu-menu--leftCenter,
-  .spui-DropdownMenu-menu--leftBottom {
-    bottom: auto;
-    left: auto;
-    margin-top: 8px;
-    right: 0;
-    top: auto !important;
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
   .spui-DropdownMenu-menu {
-    animation: 0s spui-DropdownMenu-fade-in;
-  }
-
-  /* stylelint-disable-next-line plugin/selector-bem-pattern */
-  .spui-DropdownMenu-menu.is-fade-out {
-    animation: 0s spui-DropdownMenu-fade-out;
+    transition-duration: 0.1s;
   }
 }
diff --git a/packages/spindle-ui/src/DropdownMenu/DropdownMenu.test.tsx b/packages/spindle-ui/src/DropdownMenu/DropdownMenu.test.tsx
index ef28618b7..519922d96 100644
--- a/packages/spindle-ui/src/DropdownMenu/DropdownMenu.test.tsx
+++ b/packages/spindle-ui/src/DropdownMenu/DropdownMenu.test.tsx
@@ -50,6 +50,7 @@ describe('<DropdownMenu />', () => {
             triggerButton
           </Button>
           <DropdownMenu.List
+            id="dropdown-menu"
             onClose={onClose}
             open={result.current.open}
             triggerRef={triggerRef}
@@ -76,6 +77,7 @@ describe('<DropdownMenu />', () => {
             triggerButton
           </Button>
           <DropdownMenu.List
+            id="dropdown-menu"
             onClose={onClose}
             open={result.current.open}
             triggerRef={triggerRef}
@@ -109,6 +111,7 @@ describe('<DropdownMenu />', () => {
             triggerButton
           </Button>
           <DropdownMenu.List
+            id="dropdown-menu"
             onClose={result.current.onClose}
             open={result.current.open}
             triggerRef={triggerRef}
@@ -143,6 +146,7 @@ describe('<DropdownMenu />', () => {
             triggerButton
           </Button>
           <DropdownMenu.List
+            id="dropdown-menu"
             onClose={result.current.onClose}
             open={result.current.open}
             triggerRef={triggerRef}
@@ -177,6 +181,7 @@ describe('<DropdownMenu />', () => {
             triggerButton
           </Button>
           <DropdownMenu.List
+            id="dropdown-menu"
             onClose={result.current.onClose}
             open={result.current.open}
             triggerRef={triggerRef}
@@ -215,6 +220,7 @@ describe('<DropdownMenu />', () => {
             triggerButton
           </Button>
           <DropdownMenu.List
+            id="dropdown-menu"
             onClose={result.current.onClose}
             open={result.current.open}
             triggerRef={triggerRef}
@@ -248,6 +254,7 @@ describe('<DropdownMenu />', () => {
             triggerButton
           </Button>
           <DropdownMenu.List
+            id="dropdown-menu"
             onClose={result.current.onClose}
             open={result.current.open}
             triggerRef={triggerRef}
@@ -280,6 +287,7 @@ describe('<DropdownMenu />', () => {
             triggerButton
           </Button>
           <DropdownMenu.List
+            id="dropdown-menu"
             onClose={result.current.onClose}
             open={result.current.open}
             triggerRef={triggerRef}
@@ -313,6 +321,7 @@ describe('<DropdownMenu />', () => {
             triggerButton
           </Button>
           <DropdownMenu.List
+            id="dropdown-menu"
             onClose={result.current.onClose}
             open={result.current.open}
             triggerRef={triggerRef}
@@ -347,6 +356,7 @@ describe('<DropdownMenu />', () => {
             triggerButton
           </Button>
           <DropdownMenu.List
+            id="dropdown-menu"
             onClose={result.current.onClose}
             open={result.current.open}
             triggerRef={triggerRef}
diff --git a/packages/spindle-ui/src/DropdownMenu/DropdownMenu.tsx b/packages/spindle-ui/src/DropdownMenu/DropdownMenu.tsx
index d167d0e08..a56adb671 100644
--- a/packages/spindle-ui/src/DropdownMenu/DropdownMenu.tsx
+++ b/packages/spindle-ui/src/DropdownMenu/DropdownMenu.tsx
@@ -1,4 +1,13 @@
-import React, { useEffect, useCallback, useRef, useState } from 'react';
+/// <reference types="react/canary" />
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+declare module 'react' {
+  interface CSSProperties {
+    anchorName?: string;
+    positionAnchor?: string;
+  }
+}
 
 type Variant =
   | 'text'
@@ -30,18 +39,16 @@ interface ListItemProps extends DefaultProps {
 }
 
 interface ListProps extends DefaultProps {
-  id?: string;
-  onClose: () => void;
-  open: boolean;
+  id: string;
+  onClose?: (state: 'open' | 'closed') => void;
+  open?: boolean;
+  popover?: 'auto' | 'manual';
   position?: Position;
   triggerRef: React.RefObject<HTMLButtonElement>;
   variant?: Variant;
 }
 
 export const BLOCK_NAME = 'spui-DropdownMenu';
-const FADE_IN_ANIMATION = 'spui-DropdownMenu-fade-in';
-const CLOSE_KEY_LIST = ['ESCAPE', 'ESC'];
-const MENU_WIDTH = 256;
 
 const Caption = ({ children }: DefaultProps) => {
   return <p className={`${BLOCK_NAME}-caption`}>{children}</p>;
@@ -56,131 +63,53 @@ const List = ({
   id,
   onClose,
   open,
+  popover = 'auto',
   position = 'leftTop',
-  triggerRef,
   variant = 'text',
+  triggerRef,
 }: ListProps) => {
-  const menuEl = useRef<HTMLUListElement>(null);
-  const [fadeOut, setFadeOut] = useState(false);
-  const [triggerHeight, setTriggerHeight] = useState(0);
-  const [triggerWidth, setTriggerWidth] = useState(0);
-  const [menuHeight, setMenuHeight] = useState(0);
-
-  const onClickBody = useCallback(
-    (e: MouseEvent) => {
-      if (!open) return;
-      if (triggerRef.current && e.composedPath().includes(triggerRef.current))
-        return;
-      const menuEl = document.querySelector(`.${BLOCK_NAME}-menu`);
-      if (menuEl && e.composedPath().includes(menuEl)) return;
-
-      setFadeOut(true);
-    },
-    [open, setFadeOut, triggerRef],
-  );
-
-  const onClickCloser = useCallback(() => {
-    setFadeOut(true);
-    triggerRef.current?.focus();
-  }, [setFadeOut, triggerRef]);
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (CLOSE_KEY_LIST.includes(e.key.toUpperCase())) {
-        onClickCloser();
-      }
+  const menuEl = useRef<HTMLUListElement & { showPopover: () => void }>(null);
+  const [anchorName, setAnchorName] = useState('');
+
+  // TODO: close with menu item click
+  // NOTE: esc, backdrop click do not fire close event
+  const handleClose = useCallback(
+    (event: React.ToggleEvent) => {
+      onClose?.(event.newState);
     },
-    [onClickCloser],
+    [onClose],
   );
 
-  const handleAnimationEnd = useCallback(
-    (event: AnimationEvent) => {
-      if (event.animationName === FADE_IN_ANIMATION) return;
-
-      onClose();
-      setFadeOut(false);
-    },
-    [onClose, setFadeOut],
-  );
-
-  // Triggerボタンの縦横幅を取得
   useEffect(() => {
-    if (!triggerRef.current) return;
-
-    const { height, width } = triggerRef.current.getBoundingClientRect();
-    setTriggerHeight(height);
-    setTriggerWidth(width);
-  }, [triggerRef]);
-
-  // Menuの縦幅を取得
-  useEffect(() => {
-    if (!open) return;
-    if (!menuEl.current) return;
-
-    const { height } = menuEl.current.getBoundingClientRect();
-    setMenuHeight(height);
-  }, [open]);
-
-  useEffect(() => {
-    const menu = menuEl.current;
-    if (open) {
-      menu?.addEventListener('animationend', handleAnimationEnd, false);
+    // triggerRef is for backword compatibility, id string is more reliable
+    if (triggerRef.current) {
+      setAnchorName(triggerRef.current.id);
     }
-
-    return () =>
-      menu?.removeEventListener('animationend', handleAnimationEnd, false);
-  }, [menuEl, handleAnimationEnd, open]);
-
-  useEffect(() => {
-    if (open) {
-      window.addEventListener('click', onClickBody, false);
-    }
-
-    return () => window.removeEventListener('click', onClickBody, false);
-  }, [onClickBody, open]);
+  }, [triggerRef]);
 
   useEffect(() => {
+    // initial state
     if (open) {
-      window.addEventListener('keydown', handleKeyDown);
+      menuEl.current?.showPopover();
     }
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [handleKeyDown, open]);
-
-  if (!open) {
-    return <></>;
-  }
-
-  let top;
-  let bottom;
-  let left;
-  if (['topLeft', 'topCenter', 'topRight'].includes(position)) {
-    bottom = `${triggerHeight}px`;
-  }
-  if (['topCenter', 'bottomCenter'].includes(position)) {
-    left = `-${(MENU_WIDTH - triggerWidth) / 2}px`;
-  }
-  if (['rightCenter', 'leftCenter'].includes(position)) {
-    top = `-${(menuHeight - triggerHeight) / 2}px`;
-  }
-  if (['bottomLeft', 'bottomCenter', 'bottomRight'].includes(position)) {
-    top = `${triggerHeight}px`;
-  }
+  }, [menuEl, open]);
 
   return (
     <ul
       id={id}
-      onClick={onClickCloser}
       className={[
         `${BLOCK_NAME}-menu`,
         `${BLOCK_NAME}-menu--${variant}`,
         `${BLOCK_NAME}-menu--${position}`,
-        fadeOut && 'is-fade-out',
       ]
         .filter(Boolean)
         .join(' ')}
       ref={menuEl}
       role="menu"
-      style={{ bottom, left, top }}
+      // eslint-disable-next-line react/no-unknown-property
+      popover={popover}
+      style={{ positionAnchor: `--${anchorName}` }}
+      onToggle={handleClose}
     >
       {children}
     </ul>
@@ -198,68 +127,6 @@ const ListItem = ({ children, icon, onClick }: ListItemProps) => {
   );
 };
 
-// Storybookでのpositionプロパティのバリエーション確認用
-const Position = ({
-  children,
-  position = 'leftTop',
-  triggerRef,
-}: Omit<ListProps, 'onClose' | 'open'>) => {
-  const menuEl = useRef<HTMLUListElement>(null);
-  const [triggerHeight, setTriggerHeight] = useState(0);
-  const [triggerWidth, setTriggerWidth] = useState(0);
-  const [menuHeight, setMenuHeight] = useState(0);
-
-  // Triggerボタンの縦横幅を取得
-  useEffect(() => {
-    if (!triggerRef.current) return;
-
-    const { height, width } = triggerRef.current.getBoundingClientRect();
-    setTriggerHeight(height);
-    setTriggerWidth(width);
-  }, [triggerRef]);
-
-  // Menuの縦幅を取得
-  useEffect(() => {
-    if (!menuEl.current) return;
-
-    const { height } = menuEl.current.getBoundingClientRect();
-    setMenuHeight(height);
-  }, []);
-
-  let top;
-  let bottom;
-  let left;
-  if (['topLeft', 'topCenter', 'topRight'].includes(position)) {
-    bottom = `${triggerHeight}px`;
-  }
-  if (['topCenter', 'bottomCenter'].includes(position)) {
-    left = `-${(MENU_WIDTH - triggerWidth) / 2}px`;
-  }
-  if (['rightCenter', 'leftCenter'].includes(position)) {
-    top = `-${(menuHeight - triggerHeight) / 2}px`;
-  }
-  if (['bottomLeft', 'bottomCenter', 'bottomRight'].includes(position)) {
-    top = `${triggerHeight}px`;
-  }
-
-  return (
-    <ul
-      className={[
-        `${BLOCK_NAME}-menu`,
-        `${BLOCK_NAME}-menu--text`,
-        `${BLOCK_NAME}-menu--${position}`,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      ref={menuEl}
-      role="menu"
-      style={{ bottom, left, top }}
-    >
-      {children}
-    </ul>
-  );
-};
-
 const Title = ({ children }: DefaultProps) => {
   return <p className={`${BLOCK_NAME}-title`}>{children}</p>;
 };
@@ -269,6 +136,5 @@ export const DropdownMenu = {
   Frame,
   List,
   ListItem,
-  Position,
   Title,
 };

From c5e618ea7b1ad0d819f63e743d2f32a517973b38 Mon Sep 17 00:00:00 2001
From: Kazunari Hara <kz.route21@gmail.com>
Date: Thu, 13 Jun 2024 15:43:43 +0900
Subject: [PATCH 2/3] test(spindle-ui): update story

---
 .../DropdownMenu.stories.example.tsx          | 345 ++++++++++++------
 .../src/DropdownMenu/DropdownMenu.stories.mdx |   3 +
 2 files changed, 245 insertions(+), 103 deletions(-)

diff --git a/packages/spindle-ui/src/DropdownMenu/DropdownMenu.stories.example.tsx b/packages/spindle-ui/src/DropdownMenu/DropdownMenu.stories.example.tsx
index 7e3793be9..5e6c3ffb1 100644
--- a/packages/spindle-ui/src/DropdownMenu/DropdownMenu.stories.example.tsx
+++ b/packages/spindle-ui/src/DropdownMenu/DropdownMenu.stories.example.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useRef } from 'react';
 import { actions } from '@storybook/addon-actions';
 
 import { Button } from '../Button';
@@ -6,32 +6,23 @@ import { AllFill } from '../Icon';
 import { DropdownMenu } from './DropdownMenu';
 
 export function Text() {
-  const [open, setOpen] = useState(false);
   const triggerRef = useRef<HTMLButtonElement>(null);
-  const onClick = () => {
-    setOpen((prevOpen) => !prevOpen);
-  };
-  const onClose = () => {
-    setOpen(false);
-  };
 
   return (
-    <div style={{ ['--DropdownMenu-z-index']: 2 }}>
+    <div>
       <DropdownMenu.Frame>
         <Button
-          aria-controls="dropdown-menu-example1"
-          aria-expanded={open}
-          onClick={onClick}
           ref={triggerRef}
           size="medium"
           variant="neutral"
+          popoverTarget="dropdown-menu-example1"
+          id="dropdown-menu-example1-anchor"
+          style={{ anchorName: '--dropdown-menu-example1-anchor' }}
         >
           開く
         </Button>
         <DropdownMenu.List
           id="dropdown-menu-example1"
-          onClose={onClose}
-          open={open}
           position="rightTop"
           triggerRef={triggerRef}
           variant="text"
@@ -49,32 +40,23 @@ export function Text() {
 }
 
 export function TextWithIcon() {
-  const [open, setOpen] = useState(false);
   const triggerRef = useRef<HTMLButtonElement>(null);
-  const onClick = () => {
-    setOpen((prevOpen) => !prevOpen);
-  };
-  const onClose = () => {
-    setOpen(false);
-  };
 
   return (
-    <div style={{ ['--DropdownMenu-z-index']: 2 }}>
+    <div>
       <DropdownMenu.Frame>
         <Button
-          aria-controls="dropdown-menu-example2"
-          aria-expanded={open}
-          onClick={onClick}
           ref={triggerRef}
           size="medium"
           variant="neutral"
+          popoverTarget="dropdown-menu-example2"
+          id="dropdown-menu-example2-anchor"
+          style={{ anchorName: '--dropdown-menu-example2-anchor' }}
         >
           開く
         </Button>
         <DropdownMenu.List
           id="dropdown-menu-example2"
-          onClose={onClose}
-          open={open}
           position="rightTop"
           triggerRef={triggerRef}
           variant="textWithIcon"
@@ -98,32 +80,24 @@ export function TextWithIcon() {
 }
 
 export function HeadWithIcon() {
-  const [open, setOpen] = useState(false);
   const triggerRef = useRef<HTMLButtonElement>(null);
-  const onClick = () => {
-    setOpen((prevOpen) => !prevOpen);
-  };
-  const onClose = () => {
-    setOpen(false);
-  };
 
   return (
-    <div style={{ ['--DropdownMenu-z-index']: 2 }}>
+    <div>
       <DropdownMenu.Frame>
         <Button
-          aria-controls="dropdown-menu-example3"
-          aria-expanded={open}
-          onClick={onClick}
+          onClick={() => {}}
           ref={triggerRef}
           size="medium"
           variant="neutral"
+          popoverTarget="dropdown-menu-example3"
+          id="dropdown-menu-example3-anchor"
+          style={{ anchorName: '--dropdown-menu-example3-anchor' }}
         >
           開く
         </Button>
         <DropdownMenu.List
           id="dropdown-menu-example3"
-          onClose={onClose}
-          open={open}
           position="rightTop"
           triggerRef={triggerRef}
           variant="headWithIcon"
@@ -147,32 +121,24 @@ export function HeadWithIcon() {
 }
 
 export function HeadWithIconAndCaption() {
-  const [open, setOpen] = useState(false);
   const triggerRef = useRef<HTMLButtonElement>(null);
-  const onClick = () => {
-    setOpen((prevOpen) => !prevOpen);
-  };
-  const onClose = () => {
-    setOpen(false);
-  };
 
   return (
-    <div style={{ ['--DropdownMenu-z-index']: 2 }}>
+    <div>
       <DropdownMenu.Frame>
         <Button
-          aria-controls="dropdown-menu-example4"
-          aria-expanded={open}
-          onClick={onClick}
+          onClick={() => {}}
           ref={triggerRef}
           size="medium"
           variant="neutral"
+          popoverTarget="dropdown-menu-example4"
+          id="dropdown-menu-example4-anchor"
+          style={{ anchorName: '--dropdown-menu-example4-anchor' }}
         >
           開く
         </Button>
         <DropdownMenu.List
           id="dropdown-menu-example4"
-          onClose={onClose}
-          open={open}
           position="rightTop"
           triggerRef={triggerRef}
           variant="headWithIconAndCaption"
@@ -199,214 +165,387 @@ export function HeadWithIconAndCaption() {
 
 // Storybookでのpositionプロパティのバリエーション確認用
 export function Position() {
-  const triggerRef = useRef<HTMLButtonElement>(null);
+  const triggerRefTopRight = useRef<HTMLButtonElement>(null);
+  const triggerRefTopCenter = useRef<HTMLButtonElement>(null);
+  const triggerRefTopLeft = useRef<HTMLButtonElement>(null);
+  const triggerRefRightTop = useRef<HTMLButtonElement>(null);
+  const triggerRefRightCenter = useRef<HTMLButtonElement>(null);
+  const triggerRefRightBottom = useRef<HTMLButtonElement>(null);
+  const triggerRefBottomRight = useRef<HTMLButtonElement>(null);
+  const triggerRefBottomCenter = useRef<HTMLButtonElement>(null);
+  const triggerRefBottomLeft = useRef<HTMLButtonElement>(null);
+  const triggerRefLeftTop = useRef<HTMLButtonElement>(null);
+  const triggerRefLeftCenter = useRef<HTMLButtonElement>(null);
+  const triggerRefLeftBottom = useRef<HTMLButtonElement>(null);
 
   return (
     <>
       <div
         style={{
-          ['--DropdownMenu-z-index']: 2,
           marginTop: 80,
           marginLeft: 210,
         }}
       >
         <DropdownMenu.Frame>
-          <Button ref={triggerRef} size="medium" variant="neutral">
+          <Button
+            ref={triggerRefTopRight}
+            size="medium"
+            variant="neutral"
+            popoverTarget="dropdown-menu-example-topRight"
+            id="dropdown-menu-example-topRight-anchor"
+            style={{ anchorName: '--dropdown-menu-example-topRight-anchor' }}
+          >
             例
           </Button>
-          <DropdownMenu.Position position="topRight" triggerRef={triggerRef}>
+          <DropdownMenu.List
+            id="dropdown-menu-example-topRight"
+            position="topRight"
+            triggerRef={triggerRefTopRight}
+            open
+            popover="manual"
+          >
             <DropdownMenu.ListItem {...actions('onClick')}>
               <DropdownMenu.Title>position: topRightを指定</DropdownMenu.Title>
             </DropdownMenu.ListItem>
-          </DropdownMenu.Position>
+          </DropdownMenu.List>
         </DropdownMenu.Frame>
       </div>
       <div
         style={{
-          ['--DropdownMenu-z-index']: 2,
           marginTop: 90,
           marginLeft: 105,
         }}
       >
         <DropdownMenu.Frame>
-          <Button ref={triggerRef} size="medium" variant="neutral">
+          <Button
+            ref={triggerRefTopCenter}
+            size="medium"
+            variant="neutral"
+            popoverTarget="dropdown-menu-example-topCenter"
+            id="dropdown-menu-example-topCenter-anchor"
+            style={{
+              anchorName: '--dropdown-menu-example-topCenter-anchor',
+            }}
+          >
             例
           </Button>
-          <DropdownMenu.Position position="topCenter" triggerRef={triggerRef}>
+          <DropdownMenu.List
+            id="dropdown-menu-example-topCenter"
+            open
+            position="topCenter"
+            triggerRef={triggerRefTopCenter}
+            popover="manual"
+          >
             <DropdownMenu.ListItem {...actions('onClick')}>
               <DropdownMenu.Title>position: topCenterを指定</DropdownMenu.Title>
             </DropdownMenu.ListItem>
-          </DropdownMenu.Position>
+          </DropdownMenu.List>
         </DropdownMenu.Frame>
       </div>
-      <div style={{ ['--DropdownMenu-z-index']: 2, marginTop: 90 }}>
+      <div style={{ marginTop: 90 }}>
         <DropdownMenu.Frame>
-          <Button ref={triggerRef} size="medium" variant="neutral">
+          <Button
+            ref={triggerRefTopLeft}
+            size="medium"
+            variant="neutral"
+            popoverTarget="dropdown-menu-example-topLeft"
+            id="dropdown-menu-example-topLeft-anchor"
+            style={{ anchorName: '--dropdown-menu-example-topLeft-anchor' }}
+          >
             例
           </Button>
-          <DropdownMenu.Position position="topLeft" triggerRef={triggerRef}>
+          <DropdownMenu.List
+            id="dropdown-menu-example-topLeft"
+            position="topLeft"
+            triggerRef={triggerRefTopLeft}
+            open
+            popover="manual"
+          >
             <DropdownMenu.ListItem {...actions('onClick')}>
               <DropdownMenu.Title>position: topLeftを指定</DropdownMenu.Title>
             </DropdownMenu.ListItem>
-          </DropdownMenu.Position>
+          </DropdownMenu.List>
         </DropdownMenu.Frame>
       </div>
 
-      <div style={{ ['--DropdownMenu-z-index']: 2, marginTop: 20 }}>
+      <div style={{ marginTop: 20 }}>
         <DropdownMenu.Frame>
-          <Button ref={triggerRef} size="medium" variant="neutral">
+          <Button
+            ref={triggerRefRightTop}
+            size="medium"
+            variant="neutral"
+            popoverTarget="dropdown-menu-example-rightTop"
+            id="dropdown-menu-example-rightTop-anchor"
+            style={{ anchorName: '--dropdown-menu-example-rightTop-anchor' }}
+          >
             例
           </Button>
-          <DropdownMenu.Position position="rightTop" triggerRef={triggerRef}>
+          <DropdownMenu.List
+            id="dropdown-menu-example-rightTop"
+            open
+            position="rightTop"
+            triggerRef={triggerRefRightTop}
+            popover="manual"
+          >
             <DropdownMenu.ListItem {...actions('onClick')}>
               <DropdownMenu.Title>position: rightTopを指定</DropdownMenu.Title>
             </DropdownMenu.ListItem>
-          </DropdownMenu.Position>
+          </DropdownMenu.List>
         </DropdownMenu.Frame>
       </div>
-      <div style={{ ['--DropdownMenu-z-index']: 2, marginTop: 90 }}>
+      <div style={{ marginTop: 90 }}>
         <DropdownMenu.Frame>
-          <Button ref={triggerRef} size="medium" variant="neutral">
+          <Button
+            ref={triggerRefRightCenter}
+            size="medium"
+            variant="neutral"
+            popoverTarget="dropdown-menu-example-rightCenter"
+            id="dropdown-menu-example-rightCenter-anchor"
+            style={{
+              anchorName: '--dropdown-menu-example-rightCenter-anchor',
+            }}
+          >
             例
           </Button>
-          <DropdownMenu.Position position="rightCenter" triggerRef={triggerRef}>
+          <DropdownMenu.List
+            id="dropdown-menu-example-rightCenter"
+            open
+            position="rightCenter"
+            triggerRef={triggerRefRightCenter}
+            popover="manual"
+          >
             <DropdownMenu.ListItem {...actions('onClick')}>
               <DropdownMenu.Title>
                 position: rightCenterを指定
               </DropdownMenu.Title>
             </DropdownMenu.ListItem>
-          </DropdownMenu.Position>
+          </DropdownMenu.List>
         </DropdownMenu.Frame>
       </div>
-      <div style={{ ['--DropdownMenu-z-index']: 2, marginTop: 90 }}>
+      <div style={{ marginTop: 90 }}>
         <DropdownMenu.Frame>
-          <Button ref={triggerRef} size="medium" variant="neutral">
+          <Button
+            ref={triggerRefRightBottom}
+            size="medium"
+            variant="neutral"
+            popoverTarget="dropdown-menu-example-rightBottom"
+            id="dropdown-menu-example-rightBottom-anchor"
+            style={{
+              anchorName: '--dropdown-menu-example-rightBottom-anchor',
+            }}
+          >
             例
           </Button>
-          <DropdownMenu.Position position="rightBottom" triggerRef={triggerRef}>
+          <DropdownMenu.List
+            id="dropdown-menu-example-rightBottom-anchor"
+            open
+            position="rightBottom"
+            triggerRef={triggerRefRightBottom}
+            popover="manual"
+          >
             <DropdownMenu.ListItem {...actions('onClick')}>
               <DropdownMenu.Title>
                 position: rightBottomを指定
               </DropdownMenu.Title>
             </DropdownMenu.ListItem>
-          </DropdownMenu.Position>
+          </DropdownMenu.List>
         </DropdownMenu.Frame>
       </div>
 
       <div
         style={{
-          ['--DropdownMenu-z-index']: 2,
           marginTop: 90,
           marginLeft: 210,
         }}
       >
         <DropdownMenu.Frame>
-          <Button ref={triggerRef} size="medium" variant="neutral">
+          <Button
+            ref={triggerRefBottomRight}
+            size="medium"
+            variant="neutral"
+            popoverTarget="dropdown-menu-example-bottomRight"
+            id="dropdown-menu-example-bottomRight-anchor"
+            style={{
+              anchorName: '--dropdown-menu-example-bottomRight-anchor',
+            }}
+          >
             例
           </Button>
-          <DropdownMenu.Position position="bottomRight" triggerRef={triggerRef}>
+          <DropdownMenu.List
+            id="dropdown-menu-example-bottomRight"
+            open
+            position="bottomRight"
+            triggerRef={triggerRefBottomRight}
+            popover="manual"
+          >
             <DropdownMenu.ListItem {...actions('onClick')}>
               <DropdownMenu.Title>
                 position: bottomRightを指定
               </DropdownMenu.Title>
             </DropdownMenu.ListItem>
-          </DropdownMenu.Position>
+          </DropdownMenu.List>
         </DropdownMenu.Frame>
       </div>
       <div
         style={{
-          ['--DropdownMenu-z-index']: 2,
           marginTop: 90,
           marginLeft: 110,
         }}
       >
         <DropdownMenu.Frame>
-          <Button ref={triggerRef} size="medium" variant="neutral">
+          <Button
+            ref={triggerRefBottomCenter}
+            size="medium"
+            variant="neutral"
+            popoverTarget="dropdown-menu-example-bottomCenter"
+            id="dropdown-menu-example-bottomCenter-anchor"
+            style={{
+              anchorName: '--dropdown-menu-example-bottomCenter-anchor',
+            }}
+          >
             例
           </Button>
-          <DropdownMenu.Position
+          <DropdownMenu.List
+            id="dropdown-menu-example-bottomCenter-anchor"
+            open
             position="bottomCenter"
-            triggerRef={triggerRef}
+            triggerRef={triggerRefBottomCenter}
+            popover="manual"
           >
             <DropdownMenu.ListItem {...actions('onClick')}>
               <DropdownMenu.Title>
                 position: bottomCenterを指定
               </DropdownMenu.Title>
             </DropdownMenu.ListItem>
-          </DropdownMenu.Position>
+          </DropdownMenu.List>
         </DropdownMenu.Frame>
       </div>
-      <div style={{ ['--DropdownMenu-z-index']: 2, marginTop: 90 }}>
+      <div style={{ marginTop: 90 }}>
         <DropdownMenu.Frame>
-          <Button ref={triggerRef} size="medium" variant="neutral">
+          <Button
+            ref={triggerRefBottomLeft}
+            size="medium"
+            variant="neutral"
+            popoverTarget="dropdown-menu-example-bottomLeft"
+            id="dropdown-menu-example-bottomLeft-anchor"
+            style={{
+              anchorName: '--dropdown-menu-example-bottomLeft-anchor',
+            }}
+          >
             例
           </Button>
-          <DropdownMenu.Position position="bottomLeft" triggerRef={triggerRef}>
+          <DropdownMenu.List
+            id="dropdown-menu-example-bottomLeft"
+            open
+            position="bottomLeft"
+            triggerRef={triggerRefBottomLeft}
+            popover="manual"
+          >
             <DropdownMenu.ListItem {...actions('onClick')}>
               <DropdownMenu.Title>
                 position: bottomLeftを指定
               </DropdownMenu.Title>
             </DropdownMenu.ListItem>
-          </DropdownMenu.Position>
+          </DropdownMenu.List>
         </DropdownMenu.Frame>
       </div>
 
       <div
         style={{
-          ['--DropdownMenu-z-index']: 2,
           marginTop: 90,
           marginLeft: 265,
         }}
       >
         <DropdownMenu.Frame>
-          <Button ref={triggerRef} size="medium" variant="neutral">
+          <Button
+            ref={triggerRefLeftTop}
+            size="medium"
+            variant="neutral"
+            popoverTarget="dropdown-menu-example-leftTop"
+            id="dropdown-menu-example-leftTop-anchor"
+            style={{ anchorName: '--dropdown-menu-example-leftTop-anchor' }}
+          >
             例
           </Button>
-          <DropdownMenu.Position position="leftTop" triggerRef={triggerRef}>
+          <DropdownMenu.List
+            id="dropdown-menu-example-leftTop"
+            open
+            position="leftTop"
+            triggerRef={triggerRefLeftTop}
+            popover="manual"
+          >
             <DropdownMenu.ListItem {...actions('onClick')}>
               <DropdownMenu.Title>position: leftTopを指定</DropdownMenu.Title>
             </DropdownMenu.ListItem>
-          </DropdownMenu.Position>
+          </DropdownMenu.List>
         </DropdownMenu.Frame>
       </div>
       <div
         style={{
-          ['--DropdownMenu-z-index']: 2,
           marginTop: 90,
           marginLeft: 265,
         }}
       >
         <DropdownMenu.Frame>
-          <Button ref={triggerRef} size="medium" variant="neutral">
+          <Button
+            ref={triggerRefLeftCenter}
+            size="medium"
+            variant="neutral"
+            popoverTarget="dropdown-menu-example-leftCenter"
+            id="dropdown-menu-example-leftCenter-anchor"
+            style={{
+              anchorName: '--dropdown-menu-example-leftCenter-anchor',
+            }}
+          >
             例
           </Button>
-          <DropdownMenu.Position position="leftCenter" triggerRef={triggerRef}>
+          <DropdownMenu.List
+            id="dropdown-menu-example-leftCenter"
+            open
+            position="leftCenter"
+            triggerRef={triggerRefLeftCenter}
+            popover="manual"
+          >
             <DropdownMenu.ListItem {...actions('onClick')}>
               <DropdownMenu.Title>
                 position: leftCenterを指定
               </DropdownMenu.Title>
             </DropdownMenu.ListItem>
-          </DropdownMenu.Position>
+          </DropdownMenu.List>
         </DropdownMenu.Frame>
       </div>
       <div
         style={{
-          ['--DropdownMenu-z-index']: 2,
           marginTop: 90,
           marginLeft: 265,
         }}
       >
         <DropdownMenu.Frame>
-          <Button ref={triggerRef} size="medium" variant="neutral">
+          <Button
+            ref={triggerRefLeftBottom}
+            size="medium"
+            variant="neutral"
+            popoverTarget="dropdown-menu-example-leftBottom"
+            id="dropdown-menu-example-leftBottom-anchor"
+            style={{
+              anchorName: '--dropdown-menu-example-leftBottom-anchor',
+            }}
+          >
             例
           </Button>
-          <DropdownMenu.Position position="leftBottom" triggerRef={triggerRef}>
+          <DropdownMenu.List
+            id="dropdown-menu-example-leftBottom"
+            open
+            position="leftBottom"
+            triggerRef={triggerRefLeftBottom}
+            popover="manual"
+          >
             <DropdownMenu.ListItem {...actions('onClick')}>
               <DropdownMenu.Title>
                 position: leftBottomを指定
               </DropdownMenu.Title>
             </DropdownMenu.ListItem>
-          </DropdownMenu.Position>
+          </DropdownMenu.List>
         </DropdownMenu.Frame>
       </div>
     </>
diff --git a/packages/spindle-ui/src/DropdownMenu/DropdownMenu.stories.mdx b/packages/spindle-ui/src/DropdownMenu/DropdownMenu.stories.mdx
index 063782c86..384afea9a 100644
--- a/packages/spindle-ui/src/DropdownMenu/DropdownMenu.stories.mdx
+++ b/packages/spindle-ui/src/DropdownMenu/DropdownMenu.stories.mdx
@@ -27,6 +27,9 @@ import {
   code={`<link rel="stylesheet" href="https://unpkg.com/@openameba/spindle-ui/DropdownMenu/DropdownMenu.css">`}
 />
 
+## Polyfill
+DropdownMenuは[Popover API](https://developer.mozilla.org/docs/Web/API/Popover_API)と[Anchor Positioning API](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning)を利用して作られています。非対応ブラウザで表示したい場合には[Popover Polyfill](https://github.com/oddbird/popover-polyfill)、[Anchor Positionin Polyfill](https://github.com/oddbird/css-anchor-positioning)を併用してください。
+
 ## 指定できるプロパティ
 ### DropdownMenu.List
 <Description>

From 258dc65887e8c748832a91cb8a2d056ddd922d66 Mon Sep 17 00:00:00 2001
From: Kazunari Hara <kz.route21@gmail.com>
Date: Thu, 19 Sep 2024 09:59:55 +0900
Subject: [PATCH 3/3] chore(spindle-ui): load polyfull

---
 packages/spindle-ui/.storybook/preview-head.html | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/spindle-ui/.storybook/preview-head.html b/packages/spindle-ui/.storybook/preview-head.html
index cea073813..2e346eca7 100644
--- a/packages/spindle-ui/.storybook/preview-head.html
+++ b/packages/spindle-ui/.storybook/preview-head.html
@@ -12,4 +12,10 @@
     width: 1px;
   }
 </style>
+<script type="module">
+  if (!("anchorName" in document.documentElement.style)) {
+    const { default: polyfill } = await import("https://unpkg.com/@oddbird/css-anchor-positioning/dist/css-anchor-positioning-fn.js");
+    polyfill(true);
+  }
+</script>
 <script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\x2fscript>');</script>