@primer/components 32.1.0 → 33.0.0-rc.b3e4ccee

package/src/stories/Button.stories.tsx

@@ -0,0 +1,92 @@
+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

@@ -0,0 +1,164 @@
+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

@@ -0,0 +1,105 @@
+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

@@ -0,0 +1,240 @@
+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

@@ -0,0 +1,84 @@
+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'