@primer/components 32.1.0 → 33.0.0-rc.b3e4ccee

package/lib-esm/stories/Checkbox.stories.js

@@ -0,0 +1,197 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { BaseStyles, Box, Checkbox, Text, ThemeProvider } from '..';
+import { action } from '@storybook/addon-actions';
+import { COMMON, get } from '../constants';
+export default {
+  title: 'Forms/Checkbox',
+  component: Checkbox,
+  decorators: [Story => {
+    return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Box, {
+      paddingTop: 5
+    }, Story())));
+  }],
+  argTypes: {
+    sx: {
+      table: {
+        disable: true
+      }
+    },
+    disabled: {
+      name: 'Disabled',
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    }
+  }
+};
+const StyledLabel = styled.label.withConfig({
+  displayName: "Checkboxstories__StyledLabel",
+  componentId: "sdupvr-0"
+})(["user-select:none;font-weight:600;font-size:14px;line-height:18px;margin-left:16px;", ""], COMMON);
+const StyledSubLabel = styled(Text).withConfig({
+  displayName: "Checkboxstories__StyledSubLabel",
+  componentId: "sdupvr-1"
+})(["color:", ";font-size:13px;", ""], get('colors.fg.muted'), COMMON);
+export const Default = args => {
+  const [isChecked, setChecked] = useState(false);
+
+  const handleChange = event => {
+    setChecked(event.target.checked);
+    action('Change event triggered');
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(Checkbox, _extends({
+    id: "controlled-checkbox",
+    onChange: handleChange,
+    checked: isChecked
+  }, args)), /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: "controlled-checkbox"
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Default checkbox"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "controlled"))), /*#__PURE__*/React.createElement(Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(Checkbox, _extends({
+    id: "always-checked-checkbox",
+    checked: true
+  }, args)), /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: "always-checked-checkbox"
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Always checked"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "checked=\"true\""))), /*#__PURE__*/React.createElement(Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(Checkbox, _extends({
+    id: "always-unchecked-checkbox",
+    checked: false
+  }, args)), /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: "always-unchecked-checkbox"
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Always unchecked"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "checked=\"false\""))), /*#__PURE__*/React.createElement(Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    id: "disabled-checkbox",
+    disabled: true,
+    checked: false
+  }), /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: "disabled-checkbox"
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Inactive"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "disabled=\"true\""))));
+};
+export const Uncontrolled = args => {
+  const checkboxRef = useRef(null);
+  useLayoutEffect(() => {
+    if (checkboxRef.current) {
+      checkboxRef.current.checked = true;
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(Checkbox, _extends({
+    id: "uncontrolled-checkbox",
+    ref: checkboxRef
+  }, args)), /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: "uncontrolled-checkbox"
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Uncontrolled checkbox"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "Checked by default")));
+};
+Uncontrolled.displayName = "Uncontrolled";
+export const Indeterminate = args => {
+  const [checkboxes, setCheckboxes] = useState([false, false, false, false]);
+
+  const handleChange = (_, index) => {
+    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 /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    as: "form",
+    sx: {
+      p: 3,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    id: "indeterminate-checkbox",
+    checked: checkboxes.every(Boolean),
+    onChange: handleIndeterminateChange,
+    indeterminate: !checkboxes.every(Boolean)
+  }), /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: "controlled-checkbox"
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Default checkbox"), /*#__PURE__*/React.createElement(StyledSubLabel, null, "controlled"))), checkboxes.map((field, index) => /*#__PURE__*/React.createElement(Box, {
+    key: `sub-checkbox-${index}`,
+    as: "form",
+    sx: {
+      p: 1,
+      pl: 7,
+      display: 'flex',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React.createElement(Checkbox, _extends({
+    id: `sub-checkbox-${index}`,
+    checked: checkboxes[index],
+    onChange: event => handleChange(event, index)
+  }, args)), /*#__PURE__*/React.createElement(StyledLabel, {
+    htmlFor: `sub-checkbox-${index}`
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      display: 'block'
+    }
+  }, "Checkbox ", index + 1)))));
+};

package/lib-esm/stories/ConfirmationDialog.stories.js

@@ -0,0 +1,94 @@
+import React, { useState, useRef, useCallback } from '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 /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)));
+  }]
+};
+export const BasicConfirmationDialog = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const buttonRef = useRef(null);
+  const onDialogClose = useCallback(() => setIsOpen(false), []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    ref: buttonRef,
+    onClick: () => setIsOpen(!isOpen)
+  }, "Show dialog"), isOpen && /*#__PURE__*/React.createElement(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."));
+};
+export const ShorthandHook = () => {
+  const confirm = useConfirm();
+  const {
+    theme
+  } = useTheme();
+  const onButtonClick = useCallback(async event => {
+    if ((await confirm({
+      title: 'Are you sure?',
+      content: 'Do you really want to turn this button green?'
+    })) && event.target instanceof HTMLElement) {
+      var _theme$colors$auto$gr;
+
+      event.target.style.backgroundColor = (_theme$colors$auto$gr = theme === null || theme === void 0 ? void 0 : theme.colors.auto.green[3]) !== null && _theme$colors$auto$gr !== void 0 ? _theme$colors$auto$gr : 'green';
+      event.target.textContent = "I'm green!";
+    }
+  }, [confirm, theme]);
+  return /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: onButtonClick,
+    sx: {
+      mb: 2
+    }
+  }, "Turn me green!"), /*#__PURE__*/React.createElement(Button, {
+    onClick: onButtonClick,
+    sx: {
+      mb: 2
+    }
+  }, "Turn me green!"), /*#__PURE__*/React.createElement(Button, {
+    onClick: onButtonClick,
+    sx: {
+      mb: 2
+    }
+  }, "Turn me green!"), /*#__PURE__*/React.createElement(Button, {
+    onClick: onButtonClick,
+    sx: {
+      mb: 2
+    }
+  }, "Turn me green!"));
+};
+ShorthandHook.displayName = "ShorthandHook";
+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 /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/React.createElement(ActionMenu, {
+    renderAnchor: props => /*#__PURE__*/React.createElement(Button, props, text),
+    items: [{
+      text: 'Do a trick!',
+      onAction: onButtonClick
+    }]
+  }));
+};
+ShorthandHookFromActionMenu.displayName = "ShorthandHookFromActionMenu";

package/lib-esm/stories/Dialog.stories.js

@@ -0,0 +1,244 @@
+import React, { useState, useRef, useCallback } from 'react';
+import { BaseStyles, Button, ThemeProvider, Box } from '..';
+import { Dialog } 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 /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)));
+  }],
+  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
+      }
+    }
+  }
+};
+const lipsum = /*#__PURE__*/React.createElement("div", {
+  style: {
+    fontSize: '14px'
+  }
+}, /*#__PURE__*/React.createElement("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."), /*#__PURE__*/React.createElement("p", null, "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."), /*#__PURE__*/React.createElement("p", null, "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."), /*#__PURE__*/React.createElement("p", null, "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."), /*#__PURE__*/React.createElement("p", null, "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."));
+export const BasicDialog = ({
+  width,
+  height,
+  subtitle
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [secondOpen, setSecondOpen] = useState(false);
+  const buttonRef = useRef(null);
+  const onDialogClose = useCallback(() => setIsOpen(false), []);
+  const onSecondDialogClose = useCallback(() => setSecondOpen(false), []);
+  const openSecondDialog = useCallback(() => setSecondOpen(true), []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    ref: buttonRef,
+    onClick: () => setIsOpen(!isOpen)
+  }, "Show dialog"), isOpen && /*#__PURE__*/React.createElement(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 && /*#__PURE__*/React.createElement(Dialog, {
+    title: "Inner dialog!",
+    onClose: onSecondDialogClose,
+    width: "small"
+  }, "Hello world")));
+};
+
+function CustomHeader({
+  title,
+  subtitle,
+  dialogLabelId,
+  dialogDescriptionId,
+  onClose
+}) {
+  const onCloseClick = useCallback(() => {
+    onClose('close-button');
+  }, [onClose]);
+
+  if (typeof title === 'string' && typeof subtitle === 'string') {
+    return /*#__PURE__*/React.createElement(Box, {
+      bg: "accent.subtle"
+    }, /*#__PURE__*/React.createElement("h1", {
+      id: dialogLabelId
+    }, title.toUpperCase()), /*#__PURE__*/React.createElement("h2", {
+      id: dialogDescriptionId
+    }, subtitle.toLowerCase()), /*#__PURE__*/React.createElement(Dialog.CloseButton, {
+      onClose: onCloseClick
+    }));
+  }
+
+  return null;
+}
+
+function CustomBody({
+  children
+}) {
+  return /*#__PURE__*/React.createElement(Dialog.Body, {
+    sx: {
+      bg: 'danger.subtle'
+    }
+  }, children);
+}
+
+CustomBody.displayName = "CustomBody";
+
+function CustomFooter({
+  footerButtons
+}) {
+  return /*#__PURE__*/React.createElement(Dialog.Footer, {
+    sx: {
+      bg: 'attention.subtle'
+    }
+  }, footerButtons ? /*#__PURE__*/React.createElement(Dialog.Buttons, {
+    buttons: footerButtons
+  }) : null);
+}
+
+CustomFooter.displayName = "CustomFooter";
+export const WithCustomRenderers = ({
+  width,
+  height,
+  subtitle
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const onDialogClose = useCallback(() => setIsOpen(false), []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: () => setIsOpen(!isOpen)
+  }, "Show dialog"), isOpen && /*#__PURE__*/React.createElement(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));
+};
+export const StressTest = ({
+  width,
+  height,
+  subtitle
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [secondOpen, setSecondOpen] = useState(false);
+  const buttonRef = useRef(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 /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    ref: buttonRef,
+    onClick: () => setIsOpen(!isOpen)
+  }, "Show dialog"), isOpen && /*#__PURE__*/React.createElement(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 && /*#__PURE__*/React.createElement(Dialog, {
+    title: "Inner dialog!",
+    onClose: onSecondDialogClose,
+    width: "small"
+  }, "Hello world")));
+};

package/lib-esm/stories/DropdownMenu.stories.js

@@ -0,0 +1,94 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { theme, ThemeProvider } from '..';
+import BaseStyles from '../BaseStyles';
+import Box from '../Box';
+import { DropdownMenu, DropdownButton } from '../DropdownMenu';
+import TextInput from '../TextInput';
+const meta = {
+  title: 'Composite components/DropdownMenu',
+  component: DropdownMenu,
+  decorators: [Story => {
+    return /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)));
+  }],
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+};
+export default meta;
+export function FavoriteColorStory() {
+  const items = React.useMemo(() => [{
+    text: '🔵 Cyan'
+  }, {
+    text: '🔴 Magenta'
+  }, {
+    text: '🟡 Yellow'
+  }], []);
+  const [selectedItem, setSelectedItem] = React.useState();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Favorite Color"), /*#__PURE__*/React.createElement(TextInput, {
+    placeholder: "Input for focus testing",
+    sx: {
+      mb: 2
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    id: "favorite-color-label"
+  }, "Please select your favorite color:"), /*#__PURE__*/React.createElement(DropdownMenu, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
+      "aria-labelledby": `favorite-color-label ${ariaLabelledBy}`
+    }, anchorProps), children),
+    placeholder: "\uD83C\uDFA8",
+    items: items,
+    selectedItem: selectedItem,
+    onChange: setSelectedItem
+  }));
+}
+FavoriteColorStory.storyName = 'Favorite Color';
+export function ExternalAnchorStory() {
+  const items = React.useMemo(() => [{
+    text: '🔵 Cyan'
+  }, {
+    text: '🔴 Magenta'
+  }, {
+    text: '🟡 Yellow'
+  }], []);
+  const [selectedItem, setSelectedItem] = React.useState();
+  const anchorRef = React.useRef(null);
+  const [open, setOpen] = React.useState(false);
+  return /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "row"
+  }, /*#__PURE__*/React.createElement(DropdownButton, {
+    onClick: () => setOpen(true)
+  }, "Click me to open the dropdown"), /*#__PURE__*/React.createElement(Box, {
+    ref: anchorRef,
+    bg: "papayawhip",
+    p: 4,
+    ml: 40,
+    borderRadius: 2,
+    display: "inline-block"
+  }, "Anchored on me!")), /*#__PURE__*/React.createElement(DropdownMenu, {
+    renderAnchor: null,
+    anchorRef: anchorRef,
+    open: open,
+    onOpenChange: setOpen,
+    placeholder: "\uD83C\uDFA8",
+    items: items,
+    selectedItem: selectedItem,
+    onChange: setSelectedItem
+  }));
+}
+ExternalAnchorStory.displayName = "ExternalAnchorStory";
+ExternalAnchorStory.storyName = 'DropdownMenu with External Anchor';