@primer/components 32.1.0-rc.6f5d2b00 → 32.1.0

package/src/stories/Button.stories.tsx

@@ -1,92 +0,0 @@
-import React from 'react'
-import {Meta} from '@storybook/react'
-
-import {
-  BaseStyles,
-  Button,
-  ButtonClose,
-  ButtonDanger,
-  ButtonGroup,
-  ButtonInvisible,
-  ButtonOutline,
-  ButtonPrimary,
-  ButtonTableList,
-  ThemeProvider
-} from '..'
-import {ButtonStyleProps} from 'styled-system'
-import {ButtonBaseProps} from '../Button/ButtonBase'
-type StrictButtonStyleProps = ButtonStyleProps & {variant: ButtonBaseProps['variant']}
-
-export default {
-  title: 'Composite components/Button',
-
-  decorators: [
-    Story => {
-      return (
-        <ThemeProvider>
-          <BaseStyles>
-            <Story />
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    }
-  ],
-  argTypes: {
-    as: {
-      table: {
-        disable: true
-      }
-    },
-    theme: {
-      table: {
-        disable: true
-      }
-    },
-    sx: {
-      table: {
-        disable: true
-      }
-    },
-    variant: {
-      control: {
-        type: 'radio',
-        options: ['small', 'medium', 'large']
-      }
-    }
-  }
-} as Meta
-
-export const defaultButton = (args: StrictButtonStyleProps) => <Button {...args}>Default Button</Button>
-export const dangerButton = (args: StrictButtonStyleProps) => <ButtonDanger {...args}>Danger Button</ButtonDanger>
-export const outlineButton = (args: StrictButtonStyleProps) => <ButtonOutline {...args}>Outline Button</ButtonOutline>
-export const primaryButton = (args: StrictButtonStyleProps) => <ButtonPrimary {...args}>Primary Button</ButtonPrimary>
-export const invisibleButton = (args: StrictButtonStyleProps) => (
-  <ButtonInvisible {...args}>Invisible Button</ButtonInvisible>
-)
-
-export const closeButton = (args: ButtonStyleProps) => (
-  <ButtonClose {...args} onClick={() => alert('button clicked.')} />
-)
-export const buttonGroup = (args: StrictButtonStyleProps) => (
-  <ButtonGroup display="block" my={2}>
-    <Button {...args}>Button 1</Button>
-    <Button {...args}>Button 2</Button>
-    <Button {...args}>Button 3</Button>
-  </ButtonGroup>
-)
-export const buttonTableList = (args: ButtonStyleProps) => (
-  <ButtonTableList {...args}>Button Table List</ButtonTableList>
-)
-export const disabledButton = (args: StrictButtonStyleProps) => {
-  const props = {disabled: true, ...args}
-  return <Button {...props}>Disabled</Button>
-}
-
-defaultButton.args = {variant: 'medium'}
-dangerButton.args = {variant: 'medium'}
-outlineButton.args = {variant: 'medium'}
-primaryButton.args = {variant: 'medium'}
-invisibleButton.args = {variant: 'medium'}
-closeButton.args = {variant: 'medium'}
-buttonGroup.args = {variant: 'medium'}
-buttonTableList.args = {variant: 'medium'}

package/src/stories/Checkbox.stories.tsx

@@ -1,164 +0,0 @@
-import React, {useLayoutEffect, useRef, useState} from 'react'
-import {Meta} from '@storybook/react'
-import styled from 'styled-components'
-
-import {BaseStyles, Box, Checkbox, CheckboxProps, Text, ThemeProvider} from '..'
-import {action} from '@storybook/addon-actions'
-import {COMMON, get} from '../constants'
-
-export default {
-  title: 'Forms/Checkbox',
-  component: Checkbox,
-  decorators: [
-    Story => {
-      return (
-        <ThemeProvider>
-          <BaseStyles>
-            <Box paddingTop={5}>{Story()}</Box>
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    }
-  ],
-  argTypes: {
-    sx: {
-      table: {
-        disable: true
-      }
-    },
-    disabled: {
-      name: 'Disabled',
-      defaultValue: false,
-      control: {
-        type: 'boolean'
-      }
-    }
-  }
-} as Meta
-
-const StyledLabel = styled.label`
-  user-select: none;
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 18px;
-  margin-left: 16px;
-  ${COMMON}
-`
-
-const StyledSubLabel = styled(Text)`
-  color: ${get('colors.fg.muted')};
-  font-size: 13px;
-  ${COMMON}
-`
-
-export const Default = (args: CheckboxProps) => {
-  const [isChecked, setChecked] = useState<boolean>(false)
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setChecked(event.target.checked)
-    action('Change event triggered')
-  }
-
-  return (
-    <>
-      <Box as="form" sx={{p: 3, display: 'flex', alignItems: 'flex-start'}}>
-        <Checkbox id="controlled-checkbox" onChange={handleChange} checked={isChecked} {...args} />
-        <StyledLabel htmlFor="controlled-checkbox">
-          <Text sx={{display: 'block'}}>Default checkbox</Text>
-          <StyledSubLabel>controlled</StyledSubLabel>
-        </StyledLabel>
-      </Box>
-      <Box as="form" sx={{p: 3, display: 'flex', alignItems: 'flex-start'}}>
-        <Checkbox id="always-checked-checkbox" checked {...args} />
-        <StyledLabel htmlFor="always-checked-checkbox">
-          <Text sx={{display: 'block'}}>Always checked</Text>
-          <StyledSubLabel>checked=&quot;true&quot;</StyledSubLabel>
-        </StyledLabel>
-      </Box>
-      <Box as="form" sx={{p: 3, display: 'flex', alignItems: 'flex-start'}}>
-        <Checkbox id="always-unchecked-checkbox" checked={false} {...args} />
-        <StyledLabel htmlFor="always-unchecked-checkbox">
-          <Text sx={{display: 'block'}}>Always unchecked</Text>
-          <StyledSubLabel>checked=&quot;false&quot;</StyledSubLabel>
-        </StyledLabel>
-      </Box>
-      <Box as="form" sx={{p: 3, display: 'flex', alignItems: 'flex-start'}}>
-        <Checkbox id="disabled-checkbox" disabled checked={false} />
-        <StyledLabel htmlFor="disabled-checkbox">
-          <Text sx={{display: 'block'}}>Inactive</Text>
-          <StyledSubLabel>disabled=&quot;true&quot;</StyledSubLabel>
-        </StyledLabel>
-      </Box>
-    </>
-  )
-}
-
-export const Uncontrolled = (args: CheckboxProps) => {
-  const checkboxRef = useRef<HTMLInputElement | null>(null)
-
-  useLayoutEffect(() => {
-    if (checkboxRef.current) {
-      checkboxRef.current.checked = true
-    }
-  }, [])
-
-  return (
-    <Box as="form" sx={{p: 3, display: 'flex', alignItems: 'flex-start'}}>
-      <Checkbox id="uncontrolled-checkbox" ref={checkboxRef} {...args} />
-      <StyledLabel htmlFor="uncontrolled-checkbox">
-        <Text sx={{display: 'block'}}>Uncontrolled checkbox</Text>
-        <StyledSubLabel>Checked by default</StyledSubLabel>
-      </StyledLabel>
-    </Box>
-  )
-}
-
-export const Indeterminate = (args: CheckboxProps) => {
-  const [checkboxes, setCheckboxes] = useState<boolean[]>([false, false, false, false])
-
-  const handleChange = (_: React.ChangeEvent<HTMLInputElement>, index: number) => {
-    const newCheckboxes = [...checkboxes]
-    newCheckboxes[index] = !checkboxes[index]
-    setCheckboxes(newCheckboxes)
-  }
-
-  const handleIndeterminateChange = () => {
-    if (checkboxes.every(checkbox => checkbox)) {
-      return setCheckboxes(checkboxes.map(() => false))
-    }
-
-    const newCheckboxes = checkboxes.map(() => true)
-    setCheckboxes(newCheckboxes)
-  }
-
-  return (
-    <>
-      <Box as="form" sx={{p: 3, display: 'flex', alignItems: 'flex-start'}}>
-        <Checkbox
-          id="indeterminate-checkbox"
-          checked={checkboxes.every(Boolean)}
-          onChange={handleIndeterminateChange}
-          indeterminate={!checkboxes.every(Boolean)}
-        />
-        <StyledLabel htmlFor="controlled-checkbox">
-          <Text sx={{display: 'block'}}>Default checkbox</Text>
-          <StyledSubLabel>controlled</StyledSubLabel>
-        </StyledLabel>
-      </Box>
-
-      {checkboxes.map((field, index) => (
-        <Box key={`sub-checkbox-${index}`} as="form" sx={{p: 1, pl: 7, display: 'flex', alignItems: 'flex-start'}}>
-          <Checkbox
-            id={`sub-checkbox-${index}`}
-            checked={checkboxes[index]}
-            onChange={event => handleChange(event, index)}
-            {...args}
-          />
-          <StyledLabel htmlFor={`sub-checkbox-${index}`}>
-            <Text sx={{display: 'block'}}>Checkbox {index + 1}</Text>
-          </StyledLabel>
-        </Box>
-      ))}
-    </>
-  )
-}

package/src/stories/ConfirmationDialog.stories.tsx

@@ -1,105 +0,0 @@
-import React, {useState, useRef, useCallback} from 'react'
-import {Meta} from '@storybook/react'
-
-import {BaseStyles, Button, Box, ThemeProvider, useTheme} from '..'
-import {ConfirmationDialog, useConfirm} from '../Dialog/ConfirmationDialog'
-import {ActionMenu} from '../ActionMenu'
-
-export default {
-  title: 'Internal components/ConfirmationDialog',
-  component: ConfirmationDialog,
-  decorators: [
-    Story => {
-      // Since portal roots are registered globally, we need this line so that each storybook
-      // story works in isolation.
-      return (
-        <ThemeProvider>
-          <BaseStyles>
-            <Story />
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    }
-  ]
-} as Meta
-
-export const BasicConfirmationDialog = () => {
-  const [isOpen, setIsOpen] = useState(false)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-  const onDialogClose = useCallback(() => setIsOpen(false), [])
-  return (
-    <>
-      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
-        Show dialog
-      </Button>
-      {isOpen && (
-        <ConfirmationDialog
-          title="Delete universe?"
-          onClose={onDialogClose}
-          confirmButtonContent="Delete it!"
-          confirmButtonType="danger"
-        >
-          Deleting the universe could have disastrous effects, including but not limited to destroying all life on
-          Earth.
-        </ConfirmationDialog>
-      )}
-    </>
-  )
-}
-
-export const ShorthandHook = () => {
-  const confirm = useConfirm()
-  const {theme} = useTheme()
-  const onButtonClick = useCallback(
-    async (event: React.MouseEvent) => {
-      if (
-        (await confirm({title: 'Are you sure?', content: 'Do you really want to turn this button green?'})) &&
-        event.target instanceof HTMLElement
-      ) {
-        event.target.style.backgroundColor = theme?.colors.auto.green[3] ?? 'green'
-        event.target.textContent = "I'm green!"
-      }
-    },
-    [confirm, theme]
-  )
-  return (
-    <Box display="flex" flexDirection="column" alignItems="flex-start">
-      <Button onClick={onButtonClick} sx={{mb: 2}}>
-        Turn me green!
-      </Button>
-      <Button onClick={onButtonClick} sx={{mb: 2}}>
-        Turn me green!
-      </Button>
-      <Button onClick={onButtonClick} sx={{mb: 2}}>
-        Turn me green!
-      </Button>
-      <Button onClick={onButtonClick} sx={{mb: 2}}>
-        Turn me green!
-      </Button>
-    </Box>
-  )
-}
-
-export const ShorthandHookFromActionMenu = () => {
-  const confirm = useConfirm()
-  const [text, setText] = useState('open me')
-  const onButtonClick = useCallback(async () => {
-    if (await confirm({title: 'Are you sure?', content: 'Do you really want to do a trick?'})) {
-      setText('tada!')
-    }
-  }, [confirm])
-
-  return (
-    <Box display="flex" flexDirection="column" alignItems="flex-start">
-      <ActionMenu
-        renderAnchor={props => <Button {...props}>{text}</Button>}
-        items={[
-          {
-            text: 'Do a trick!',
-            onAction: onButtonClick
-          }
-        ]}
-      />
-    </Box>
-  )
-}

package/src/stories/Dialog.stories.tsx

@@ -1,240 +0,0 @@
-import React, {useState, useRef, useCallback} from 'react'
-import {Meta} from '@storybook/react'
-
-import {BaseStyles, Button, ThemeProvider, Box} from '..'
-import {Dialog, DialogProps, DialogWidth, DialogHeight} from '../Dialog/Dialog'
-
-export default {
-  title: 'Internal components/Dialog',
-  component: Dialog,
-  decorators: [
-    Story => {
-      // Since portal roots are registered globally, we need this line so that each storybook
-      // story works in isolation.
-      return (
-        <ThemeProvider>
-          <BaseStyles>
-            <Story />
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    }
-  ],
-  argTypes: {
-    width: {
-      defaultValue: 'xlarge',
-      control: {
-        type: 'radio',
-        options: ['small', 'medium', 'large', 'xlarge']
-      }
-    },
-    height: {
-      defaultValue: 'auto',
-      control: {
-        type: 'radio',
-        options: ['small', 'large', 'auto']
-      }
-    },
-    subtitle: {
-      name: 'show subtitle',
-      defaultValue: true,
-      control: {
-        type: 'boolean'
-      }
-    },
-    title: {table: {disable: true}},
-
-    renderHeader: {table: {disable: true}},
-    renderBody: {table: {disable: true}},
-    renderFooter: {table: {disable: true}},
-    onClose: {table: {disable: true}},
-    role: {table: {disable: true}},
-    ref: {table: {disable: true}},
-    key: {table: {disable: true}},
-    footerButtons: {table: {disable: true}}
-  }
-} as Meta
-
-const lipsum = (
-  <div style={{fontSize: '14px'}}>
-    <p style={{marginBlockStart: 0}}>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin mauris maximus elit sagittis, nec
-      lobortis ligula elementum. Nam iaculis, urna nec lobortis posuere, eros urna venenatis eros, vel accumsan turpis
-      nunc vitae enim. Maecenas et lorem lectus. Vivamus iaculis tortor eget ante placerat, nec posuere nisl tincidunt.
-      Cras condimentum ante in accumsan ultricies. Morbi quis porta est, sit amet congue augue. Lorem ipsum dolor sit
-      amet, consectetur adipiscing elit. Ut consequat nunc id quam tempus, id tincidunt neque venenatis. Mauris
-      fringilla tempor est, vitae fermentum enim elementum vitae. Nullam eleifend odio ut porta efficitur. Phasellus
-      luctus tempus posuere.
-    </p>
-
-    <p>
-      Curabitur scelerisque bibendum faucibus. Duis rhoncus nunc est, at pharetra eros tristique a. Nam sodales turpis
-      lectus, quis faucibus felis fermentum in. Curabitur vel velit vel eros laoreet pharetra. Aenean in facilisis
-      sapien, eu porttitor ex. Donec ultrices ac arcu ut lobortis. Pellentesque vitae rutrum orci. Etiam pretium et enim
-      sit amet scelerisque. Nulla sed odio nec lorem dapibus condimentum at sagittis quam. Sed in ornare ex, sed luctus
-      sem. Mauris a est tellus.
-    </p>
-
-    <p>
-      Sed fringilla est ac urna aliquet, eget condimentum felis vulputate. Sed sagittis eros non mauris sodales
-      molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam ante leo,
-      condimentum sed lectus non, rutrum octopodes urna. Mauris neque ante, interdum molestie tellus pharetra, eleifend
-      dapibus justo. Sed at diam ligula. Donec dapibus ipsum quis elit euismod, sed suscipit eros euismod. Aliquam
-      pretium felis quis risus luctus fringilla. Ut purus lacus, mattis a turpis eget, sollicitudin pellentesque neque.
-    </p>
-
-    <p>
-      Nunc sodales quis ante quis porttitor. Vestibulum ornare lacinia ante. Donec a nisi nec arcu aliquam pretium in
-      nec nunc. Donec fringilla erat vitae viverra feugiat. Sed non odio vel ipsum porttitor maximus. Donec id eleifend
-      lectus. Proin varius felis sit amet neque eleifend, vitae porttitor ligula commodo.
-    </p>
-
-    <p>
-      Vivamus felis quam, porttitor a justo sit amet, placerat ultricies nisl. Suspendisse potenti. Maecenas non
-      consequat lorem, eu porta ante. Pellentesque elementum diam sapien, nec ultrices risus convallis eget. Nam
-      pharetra dolor at dictum tempor. Quisque ut est a ligula hendrerit sodales. Curabitur ornare a nulla in laoreet.
-      Maecenas semper mi egestas, dignissim nisi et, elementum neque.
-    </p>
-  </div>
-)
-interface DialogStoryProps {
-  width: DialogWidth
-  height: DialogHeight
-  subtitle: boolean
-}
-export const BasicDialog = ({width, height, subtitle}: DialogStoryProps) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const [secondOpen, setSecondOpen] = useState(false)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-  const onDialogClose = useCallback(() => setIsOpen(false), [])
-  const onSecondDialogClose = useCallback(() => setSecondOpen(false), [])
-  const openSecondDialog = useCallback(() => setSecondOpen(true), [])
-  return (
-    <>
-      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
-        Show dialog
-      </Button>
-      {isOpen && (
-        <Dialog
-          title="My Dialog"
-          subtitle={subtitle ? 'This is a subtitle!' : undefined}
-          onClose={onDialogClose}
-          width={width}
-          height={height}
-          footerButtons={[
-            {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose},
-            {buttonType: 'primary', content: 'Proceed', onClick: openSecondDialog, autoFocus: true}
-          ]}
-        >
-          {lipsum}
-          {secondOpen && (
-            <Dialog title="Inner dialog!" onClose={onSecondDialogClose} width="small">
-              Hello world
-            </Dialog>
-          )}
-        </Dialog>
-      )}
-    </>
-  )
-}
-
-function CustomHeader({
-  title,
-  subtitle,
-  dialogLabelId,
-  dialogDescriptionId,
-  onClose
-}: React.PropsWithChildren<DialogProps & {dialogLabelId: string; dialogDescriptionId: string}>) {
-  const onCloseClick = useCallback(() => {
-    onClose('close-button')
-  }, [onClose])
-  if (typeof title === 'string' && typeof subtitle === 'string') {
-    return (
-      <Box bg="accent.subtle">
-        <h1 id={dialogLabelId}>{title.toUpperCase()}</h1>
-        <h2 id={dialogDescriptionId}>{subtitle.toLowerCase()}</h2>
-        <Dialog.CloseButton onClose={onCloseClick} />
-      </Box>
-    )
-  }
-  return null
-}
-function CustomBody({children}: React.PropsWithChildren<DialogProps>) {
-  return <Dialog.Body sx={{bg: 'danger.subtle'}}>{children}</Dialog.Body>
-}
-function CustomFooter({footerButtons}: React.PropsWithChildren<DialogProps>) {
-  return (
-    <Dialog.Footer sx={{bg: 'attention.subtle'}}>
-      {footerButtons ? <Dialog.Buttons buttons={footerButtons} /> : null}
-    </Dialog.Footer>
-  )
-}
-export const WithCustomRenderers = ({width, height, subtitle}: DialogStoryProps) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const onDialogClose = useCallback(() => setIsOpen(false), [])
-  return (
-    <>
-      <Button onClick={() => setIsOpen(!isOpen)}>Show dialog</Button>
-      {isOpen && (
-        <Dialog
-          title="My Dialog"
-          subtitle={subtitle ? 'This is a subtitle!' : undefined}
-          width={width}
-          height={height}
-          renderHeader={CustomHeader}
-          renderBody={CustomBody}
-          renderFooter={CustomFooter}
-          onClose={onDialogClose}
-          footerButtons={[
-            {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose},
-            {buttonType: 'primary', content: 'Proceed'}
-          ]}
-        >
-          {lipsum}
-        </Dialog>
-      )}
-    </>
-  )
-}
-
-export const StressTest = ({width, height, subtitle}: DialogStoryProps) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const [secondOpen, setSecondOpen] = useState(false)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-  const onDialogClose = useCallback(() => setIsOpen(false), [])
-  const onSecondDialogClose = useCallback(() => setSecondOpen(false), [])
-  const openSecondDialog = useCallback(() => setSecondOpen(true), [])
-  const manyButtons = new Array(10).fill(undefined).map((_, i) => ({content: `Button ${i}`}))
-  return (
-    <>
-      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
-        Show dialog
-      </Button>
-      {isOpen && (
-        <Dialog
-          title="This dialog has a really long title. So long, in fact, that it should cause wrapping, going to multiple lines!."
-          subtitle={
-            subtitle
-              ? "It's not a common scenario, sure, but what if the subtitle is generated from a really long value? Do we just break the dialog? Or do we handle it because we are pros?"
-              : undefined
-          }
-          onClose={onDialogClose}
-          width={width}
-          height={height}
-          footerButtons={[
-            ...manyButtons,
-            {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose},
-            {buttonType: 'primary', content: 'Proceed', onClick: openSecondDialog, autoFocus: true}
-          ]}
-        >
-          {lipsum}
-          {secondOpen && (
-            <Dialog title="Inner dialog!" onClose={onSecondDialogClose} width="small">
-              Hello world
-            </Dialog>
-          )}
-        </Dialog>
-      )}
-    </>
-  )
-}

package/src/stories/DropdownMenu.stories.tsx

@@ -1,84 +0,0 @@
-import {Meta} from '@storybook/react'
-import React from 'react'
-import {theme, ThemeProvider} from '..'
-import {ItemInput} from '../ActionList/List'
-import BaseStyles from '../BaseStyles'
-import Box from '../Box'
-import {DropdownMenu, DropdownButton} from '../DropdownMenu'
-import TextInput from '../TextInput'
-
-const meta: Meta = {
-  title: 'Composite components/DropdownMenu',
-  component: DropdownMenu,
-  decorators: [
-    (Story: React.ComponentType): JSX.Element => {
-      return (
-        <ThemeProvider theme={theme}>
-          <BaseStyles>
-            <Story />
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    }
-  ],
-  parameters: {
-    controls: {
-      disable: true
-    }
-  }
-}
-export default meta
-
-export function FavoriteColorStory(): JSX.Element {
-  const items = React.useMemo(() => [{text: '🔵 Cyan'}, {text: '🔴 Magenta'}, {text: '🟡 Yellow'}], [])
-  const [selectedItem, setSelectedItem] = React.useState<ItemInput | undefined>()
-
-  return (
-    <>
-      <h1>Favorite Color</h1>
-      <TextInput placeholder="Input for focus testing" sx={{mb: 2}} />
-      <div id="favorite-color-label">Please select your favorite color:</div>
-      <DropdownMenu
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <DropdownButton aria-labelledby={`favorite-color-label ${ariaLabelledBy}`} {...anchorProps}>
-            {children}
-          </DropdownButton>
-        )}
-        placeholder="🎨"
-        items={items}
-        selectedItem={selectedItem}
-        onChange={setSelectedItem}
-      />
-    </>
-  )
-}
-FavoriteColorStory.storyName = 'Favorite Color'
-
-export function ExternalAnchorStory(): JSX.Element {
-  const items = React.useMemo(() => [{text: '🔵 Cyan'}, {text: '🔴 Magenta'}, {text: '🟡 Yellow'}], [])
-  const [selectedItem, setSelectedItem] = React.useState<ItemInput | undefined>()
-  const anchorRef = React.useRef<HTMLDivElement>(null)
-  const [open, setOpen] = React.useState(false)
-
-  return (
-    <Box display="flex" flexDirection="column" alignItems="flex-start">
-      <Box display="flex" flexDirection="row">
-        <DropdownButton onClick={() => setOpen(true)}>Click me to open the dropdown</DropdownButton>
-        <Box ref={anchorRef} bg="papayawhip" p={4} ml={40} borderRadius={2} display="inline-block">
-          Anchored on me!
-        </Box>
-      </Box>
-      <DropdownMenu
-        renderAnchor={null}
-        anchorRef={anchorRef}
-        open={open}
-        onOpenChange={setOpen}
-        placeholder="🎨"
-        items={items}
-        selectedItem={selectedItem}
-        onChange={setSelectedItem}
-      />
-    </Box>
-  )
-}
-ExternalAnchorStory.storyName = 'DropdownMenu with External Anchor'