@primer/components 31.0.1 → 31.0.2-rc.1e80de40

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

@@ -0,0 +1,395 @@
+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 { ServerIcon, PlusCircleIcon, TypographyIcon, VersionsIcon, SearchIcon, NoteIcon, ProjectIcon, FilterIcon, GearIcon, ArrowRightIcon, ArrowLeftIcon } from '@primer/octicons-react';
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { Label, ThemeProvider } from '..';
+import { ActionList as _ActionList } from '../ActionList';
+import { Header } from '../ActionList/Header';
+import BaseStyles from '../BaseStyles';
+import sx from '../sx';
+const ActionList = Object.assign(_ActionList, {
+  Header
+});
+const meta = {
+  title: 'Composite components/ActionList',
+  component: ActionList,
+  decorators: [Story => /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)))],
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+};
+export default meta;
+const ErsatzOverlay = styled.div.withConfig({
+  displayName: "ActionListstories__ErsatzOverlay",
+  componentId: "akdcn0-0"
+})(["border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 8px 24px rgba(149,157,165,0.2);overflow:hidden;max-width:", ";"], ({
+  maxWidth
+}) => maxWidth || 'none');
+export function ActionsStory() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Actions"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
+    showItemDividers: true,
+    items: [{
+      leadingVisual: ServerIcon,
+      text: 'Open current Codespace',
+      description: "Your existing Codespace will be opened to its previous state, and you'll be asked to manually switch to new-branch.",
+      descriptionVariant: 'block'
+    }, {
+      leadingVisual: PlusCircleIcon,
+      text: 'Create new Codespace',
+      description: 'Create a brand new Codespace with a fresh image and checkout this branch.',
+      descriptionVariant: 'block'
+    }]
+  })));
+}
+ActionsStory.storyName = 'Actions';
+export function SimpleListStory() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Simple List"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
+    items: [{
+      text: 'New file',
+      showDivider: true
+    }, ActionList.Divider, {
+      text: 'Copy link',
+      showDivider: true
+    }, {
+      text: 'Edit file',
+      showDivider: true
+    }, {
+      text: 'Delete file',
+      variant: 'danger',
+      showDivider: true
+    }]
+  })));
+}
+SimpleListStory.storyName = 'Simple List';
+const selectListItems = new Array(6).fill(undefined).map((_, i) => {
+  return {
+    text: `Item ${i}`,
+    id: i
+  };
+});
+export function SingleSelectListStory() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Single Select List"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
+    items: selectListItems.map((item, index) => ({ ...item,
+      selected: index === 1
+    }))
+  })));
+}
+SingleSelectListStory.storyName = 'Single Select';
+export function MultiSelectListStory() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Multi Select List"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
+    selectionVariant: "multiple",
+    items: selectListItems.map((item, index) => ({ ...item,
+      selected: index === 1 || index === 3
+    }))
+  })));
+}
+MultiSelectListStory.storyName = 'Multi Select';
+export function ComplexListInsetVariantStory() {
+  const StyledDiv = styled.div.withConfig({
+    displayName: "ActionListstories__StyledDiv",
+    componentId: "akdcn0-1"
+  })(["", ""], sx);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Complex List"), /*#__PURE__*/React.createElement("h2", null, "Inset Variant"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
+    groupMetadata: [{
+      groupId: '0'
+    }, {
+      groupId: '1',
+      header: {
+        title: 'Live query',
+        variant: 'filled'
+      }
+    }, {
+      groupId: '2',
+      header: {
+        title: 'Layout',
+        variant: 'subtle'
+      },
+      showItemDividers: true
+    }, {
+      groupId: '3',
+      renderItem: props => /*#__PURE__*/React.createElement(ActionList.Item, _extends({
+        style: {
+          fontWeight: 'bold'
+        }
+      }, props))
+    }, {
+      groupId: '4',
+      renderItem: ({
+        leadingVisual: LeadingVisual,
+        ...props
+      }) => /*#__PURE__*/React.createElement(ActionList.Item, _extends({}, props, {
+        leadingVisual: () => /*#__PURE__*/React.createElement(StyledDiv, {
+          sx: {
+            '&>svg': {
+              fill: 'white'
+            }
+          }
+        }, LeadingVisual && /*#__PURE__*/React.createElement(LeadingVisual, null))
+      })),
+      renderGroup: ({
+        sx: sxProps,
+        ...props
+      }) => /*#__PURE__*/React.createElement(ActionList.Group, _extends({}, props, {
+        sx: { ...sxProps,
+          backgroundColor: 'cornflowerblue',
+          color: 'white'
+        }
+      }))
+    }],
+    items: [{
+      leadingVisual: TypographyIcon,
+      text: 'Rename',
+      groupId: '0'
+    }, {
+      leadingVisual: VersionsIcon,
+      text: 'Duplicate',
+      description: 'Create a copy',
+      descriptionVariant: 'inline',
+      groupId: '0'
+    }, {
+      leadingVisual: SearchIcon,
+      text: 'repo:github/memex,github/github',
+      groupId: '1',
+      renderItem: props => /*#__PURE__*/React.createElement(ActionList.Item, _extends({
+        style: {
+          color: 'rebeccapurple'
+        }
+      }, props))
+    }, {
+      leadingVisual: NoteIcon,
+      text: 'Table',
+      description: 'Information-dense table optimized for operations across teams',
+      descriptionVariant: 'block',
+      groupId: '2'
+    }, {
+      leadingVisual: ProjectIcon,
+      text: 'Board',
+      description: 'Kanban-style board focused on visual states',
+      descriptionVariant: 'block',
+      groupId: '2'
+    }, {
+      leadingVisual: FilterIcon,
+      text: 'Save sort and filters to current view',
+      groupId: '3'
+    }, {
+      leadingVisual: FilterIcon,
+      text: 'Save sort and filters to new view',
+      groupId: '3'
+    }, {
+      leadingVisual: GearIcon,
+      text: 'View settings',
+      groupId: '4'
+    }]
+  })));
+}
+ComplexListInsetVariantStory.storyName = 'Complex List — Inset Variant';
+export function ComplexListFullVariantStory() {
+  const StyledDiv = styled.div.withConfig({
+    displayName: "ActionListstories__StyledDiv",
+    componentId: "akdcn0-2"
+  })(["", ""], sx);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Complex List"), /*#__PURE__*/React.createElement("h2", null, "Full Variant"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
+    variant: "full",
+    groupMetadata: [{
+      groupId: '0'
+    }, {
+      groupId: '1',
+      header: {
+        title: 'Live query',
+        variant: 'filled'
+      }
+    }, {
+      groupId: '2',
+      header: {
+        title: 'Layout',
+        variant: 'subtle'
+      }
+    }, {
+      groupId: '3',
+      renderItem: props => /*#__PURE__*/React.createElement(ActionList.Item, _extends({
+        style: {
+          fontWeight: 'bold'
+        }
+      }, props))
+    }, {
+      groupId: '4',
+      renderItem: ({
+        leadingVisual: LeadingVisual,
+        ...props
+      }) => /*#__PURE__*/React.createElement(ActionList.Item, _extends({}, props, {
+        leadingVisual: () => /*#__PURE__*/React.createElement(StyledDiv, {
+          sx: {
+            '&>svg': {
+              fill: 'white'
+            }
+          }
+        }, LeadingVisual && /*#__PURE__*/React.createElement(LeadingVisual, null))
+      })),
+      renderGroup: ({
+        sx: sxProps,
+        ...props
+      }) => /*#__PURE__*/React.createElement(ActionList.Group, _extends({}, props, {
+        sx: { ...sxProps,
+          backgroundColor: 'cornflowerblue',
+          color: 'white'
+        }
+      }))
+    }],
+    items: [{
+      leadingVisual: TypographyIcon,
+      text: 'Rename',
+      groupId: '0'
+    }, {
+      leadingVisual: VersionsIcon,
+      text: 'Duplicate',
+      groupId: '0'
+    }, {
+      leadingVisual: SearchIcon,
+      text: 'repo:github/memex,github/github',
+      groupId: '1',
+      renderItem: props => /*#__PURE__*/React.createElement(ActionList.Item, _extends({
+        style: {
+          color: 'rebeccapurple'
+        }
+      }, props))
+    }, {
+      leadingVisual: NoteIcon,
+      text: 'Table',
+      description: 'Information-dense table optimized for operations across teams',
+      descriptionVariant: 'block',
+      groupId: '2'
+    }, {
+      leadingVisual: ProjectIcon,
+      text: 'Board',
+      description: 'Kanban-style board focused on visual states',
+      descriptionVariant: 'block',
+      groupId: '2'
+    }, {
+      leadingVisual: FilterIcon,
+      text: 'Save sort and filters to current view',
+      groupId: '3'
+    }, {
+      leadingVisual: FilterIcon,
+      text: 'Save sort and filters to new view',
+      groupId: '3'
+    }, {
+      leadingVisual: GearIcon,
+      text: 'View settings',
+      groupId: '4'
+    }]
+  })));
+}
+ComplexListFullVariantStory.storyName = 'Complex List — Full Variant';
+export function HeaderStory() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Header"), /*#__PURE__*/React.createElement("h2", null, "Filled Variant"), /*#__PURE__*/React.createElement(ActionList.Header, {
+    title: "Layout",
+    variant: "filled"
+  }), /*#__PURE__*/React.createElement("h2", null, "Subtle Variant"), /*#__PURE__*/React.createElement(ActionList.Header, {
+    title: "Layout",
+    variant: "subtle"
+  }));
+}
+HeaderStory.storyName = 'Header';
+export function CustomItemChildren() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Custom Item Children"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
+    items: [{
+      leadingVisual: ArrowRightIcon,
+      children: /*#__PURE__*/React.createElement(Label, {
+        outline: true,
+        borderColor: "success.emphasis"
+      }, "Choose this one"),
+      trailingIcon: ArrowLeftIcon
+    }]
+  })));
+}
+CustomItemChildren.storyName = 'Custom Item Children';
+export function SizeStressTestingStory() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Size Stress Testing"), /*#__PURE__*/React.createElement(ErsatzOverlay, {
+    maxWidth: "300px"
+  }, /*#__PURE__*/React.createElement(ActionList, {
+    items: [{
+      leadingVisual: ArrowRightIcon,
+      text: 'Block Description.  Long text should wrap',
+      description: 'This description is long, but it is block so it wraps',
+      descriptionVariant: 'block',
+      trailingVisual: ArrowLeftIcon,
+      showDivider: true
+    }, {
+      leadingVisual: ArrowRightIcon,
+      text: 'Inline Description',
+      description: 'This description gets truncated because it is inline',
+      trailingVisual: ArrowLeftIcon,
+      showDivider: true
+    }, {
+      leadingVisual: ArrowRightIcon,
+      text: 'Really long text without a description should wrap',
+      trailingIcon: ArrowLeftIcon,
+      // backward compatible
+      showDivider: true
+    }]
+  })));
+}
+SizeStressTestingStory.storyName = 'Size Stress Testing';
+const ReactRouterLikeLink = /*#__PURE__*/forwardRef(({
+  to,
+  ...props
+}, ref) => {
+  // eslint-disable-next-line jsx-a11y/anchor-has-content
+  return /*#__PURE__*/React.createElement("a", _extends({
+    ref: ref,
+    href: to
+  }, props));
+});
+const NextJSLikeLink = /*#__PURE__*/forwardRef(({
+  href,
+  children
+}, ref) => {
+  const child = React.Children.only(children);
+  const childProps = {
+    ref,
+    href
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, childProps) : null);
+});
+export function LinkItemStory() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Simple List"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
+    items: [{
+      text: 'A. Vanilla action',
+      renderItem: props => /*#__PURE__*/React.createElement(ActionList.Item, _extends({
+        onAction: () => alert('hi?')
+      }, props))
+    }, {
+      text: 'B. Vanilla link',
+      renderItem: props => /*#__PURE__*/React.createElement(ActionList.Item, _extends({
+        as: "a",
+        href: "/about"
+      }, props))
+    }, {
+      text: 'C. React Router link',
+      renderItem: props => /*#__PURE__*/React.createElement(ActionList.Item, _extends({
+        as: ReactRouterLikeLink,
+        to: "/about"
+      }, props))
+    }, {
+      text: 'D. NextJS style',
+      renderItem: props => /*#__PURE__*/React.createElement(NextJSLikeLink, {
+        href: "/about"
+      }, /*#__PURE__*/React.createElement(ActionList.Item, _extends({
+        as: "a"
+      }, props)))
+    }]
+  })));
+}
+LinkItemStory.storyName = 'List with a link item';
+export function DOMPropsStory() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Simple List"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
+    items: [{
+      text: 'One',
+      onClick: () => alert('Hello')
+    }]
+  })));
+}
+DOMPropsStory.storyName = 'List an item input including DOM props';

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

@@ -0,0 +1,305 @@
+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 { ServerIcon, PlusCircleIcon, TypographyIcon, VersionsIcon, SearchIcon, NoteIcon, ProjectIcon, FilterIcon, GearIcon, ArrowRightIcon } from '@primer/octicons-react';
+import React, { useCallback, useState, useRef } from 'react';
+import styled from 'styled-components';
+import { ThemeProvider } from '..';
+import { ActionMenu } from '../ActionMenu';
+import Link from '../Link';
+import Button from '../Button';
+import { ActionList } from '../ActionList';
+import BaseStyles from '../BaseStyles';
+import { DropdownButton } from '../DropdownMenu';
+const meta = {
+  title: 'Composite components/ActionMenu',
+  component: ActionMenu,
+  decorators: [Story => /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)))],
+  parameters: {
+    controls: {
+      disabled: true
+    }
+  }
+};
+export default meta;
+const ErsatzOverlay = styled.div.withConfig({
+  displayName: "ActionMenustories__ErsatzOverlay",
+  componentId: "sc-1bfovxa-0"
+})(["border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 8px 24px rgba(149,157,165,0.2);padding:8px;"]);
+export function ActionsStory() {
+  const [option, setOption] = useState('Select an option');
+
+  const onAction = itemProps => {
+    var _itemProps$text;
+
+    setOption((_itemProps$text = itemProps.text) !== null && _itemProps$text !== void 0 ? _itemProps$text : '');
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Actions"), /*#__PURE__*/React.createElement("h2", null, "Last option activated: ", option), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionMenu, {
+    onAction: onAction,
+    anchorContent: /*#__PURE__*/React.createElement(ServerIcon, null),
+    items: [{
+      leadingVisual: ServerIcon,
+      text: 'Open current Codespace',
+      description: "Your existing Codespace will be opened to its previous state, and you'll be asked to manually switch to new-branch.",
+      descriptionVariant: 'block',
+      trailingText: '⌘O'
+    }, {
+      leadingVisual: PlusCircleIcon,
+      text: 'Create new Codespace',
+      description: 'Create a brand new Codespace with a fresh image and checkout this branch.',
+      descriptionVariant: 'block',
+      trailingText: '⌘C'
+    }]
+  })));
+}
+ActionsStory.storyName = 'Actions';
+export function SimpleListStory() {
+  const [option, setOption] = useState('Select an option');
+
+  const onAction = itemProps => {
+    setOption(itemProps.text || '');
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Simple List"), /*#__PURE__*/React.createElement("h2", null, "Last option activated: ", option), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionMenu, {
+    onAction: onAction,
+    anchorContent: "Menu",
+    overlayProps: {
+      'data-test-id': 'some_test_id',
+      onMouseDown: e => // eslint-disable-next-line no-console
+      console.log('onMouseDown in the internal Overlay can be useful for controlling event interactions', e)
+    },
+    items: [{
+      text: 'New file',
+      trailingText: '⌘O',
+      disabled: true,
+      leadingVisual: ProjectIcon
+    }, ActionList.Divider, {
+      text: 'Copy link',
+      trailingText: 'ctrl+C'
+    }, {
+      text: 'Edit file',
+      trailingText: '⌘E'
+    }, {
+      text: 'Delete file',
+      variant: 'danger',
+      trailingText: '⌘D'
+    }]
+  })));
+}
+SimpleListStory.storyName = 'Simple List';
+export function ExternalOpenState() {
+  const [option, setOption] = useState('Select an option');
+  const [open, setOpen] = useState(false);
+
+  const onAction = itemProps => {
+    setOption(itemProps.text);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Simple List"), /*#__PURE__*/React.createElement("h2", null, "Last option activated: ", option), /*#__PURE__*/React.createElement("h2", null, "External Open State: ", open ? 'Open' : 'Closed'), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    onClick: () => setOpen(!open)
+  }, "Toggle External State")), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionMenu, {
+    onAction: onAction,
+    anchorContent: "Menu",
+    open: open,
+    setOpen: setOpen,
+    items: [{
+      text: 'New file',
+      trailingText: '⌘O',
+      disabled: true,
+      leadingVisual: ProjectIcon
+    }, ActionList.Divider, {
+      text: 'Copy link',
+      trailingText: 'ctrl+C'
+    }, {
+      text: 'Edit file',
+      trailingText: '⌘E'
+    }, {
+      text: 'Delete file',
+      variant: 'danger',
+      trailingVisual: '⌘D'
+    }]
+  })));
+}
+ExternalOpenState.storyName = 'External Open State';
+export function ComplexListStory() {
+  const [option, setOption] = useState('Select an option');
+
+  const onAction = itemProps => {
+    setOption(itemProps.text || '');
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Complex List"), /*#__PURE__*/React.createElement("h2", null, "Last option activated: ", option), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionMenu, {
+    onAction: onAction,
+    anchorContent: "Menu",
+    groupMetadata: [{
+      groupId: '0'
+    }, {
+      groupId: '1',
+      header: {
+        title: 'Live query',
+        variant: 'subtle'
+      }
+    }, {
+      groupId: '2',
+      header: {
+        title: 'Layout',
+        variant: 'subtle'
+      }
+    }, {
+      groupId: '3',
+      renderItem: props => /*#__PURE__*/React.createElement(ActionList.Item, _extends({
+        style: {
+          fontWeight: 'bold'
+        }
+      }, props))
+    }, {
+      groupId: '4'
+    }],
+    items: [{
+      leadingVisual: TypographyIcon,
+      text: 'Rename',
+      groupId: '0'
+    }, {
+      leadingVisual: VersionsIcon,
+      text: 'Duplicate',
+      groupId: '0'
+    }, {
+      leadingVisual: SearchIcon,
+      text: 'repo:github/github',
+      groupId: '1',
+      renderItem: props => /*#__PURE__*/React.createElement(ActionList.Item, _extends({
+        style: {
+          color: 'rebeccapurple'
+        }
+      }, props)),
+      trailingVisual: () => /*#__PURE__*/React.createElement(React.Fragment, null, "\u2318S", /*#__PURE__*/React.createElement(ArrowRightIcon, null))
+    }, {
+      leadingVisual: SearchIcon,
+      text: 'repo:github/github',
+      groupId: '1',
+      renderItem: props => /*#__PURE__*/React.createElement(ActionList.Item, _extends({
+        style: {
+          color: 'rebeccapurple'
+        }
+      }, props)),
+      trailingText: '⌘S',
+      // backward compatible
+      trailingIcon: ArrowRightIcon // backward compatible
+
+    }, {
+      leadingVisual: NoteIcon,
+      text: 'Table',
+      description: 'Information-dense table optimized for operations across teams',
+      descriptionVariant: 'block',
+      groupId: '2'
+    }, {
+      leadingVisual: ProjectIcon,
+      text: 'Board',
+      description: 'Kanban-style board focused on visual states',
+      descriptionVariant: 'block',
+      groupId: '2'
+    }, {
+      leadingVisual: FilterIcon,
+      text: 'Save sort and filters to current view',
+      groupId: '3'
+    }, {
+      leadingVisual: FilterIcon,
+      text: 'Save sort and filters to new view',
+      groupId: '3'
+    }, {
+      leadingVisual: GearIcon,
+      text: 'View settings',
+      groupId: '4'
+    }]
+  })));
+}
+ComplexListStory.storyName = 'Complex List';
+export function CustomTrigger() {
+  const customAnchor = props => /*#__PURE__*/React.createElement(Link, _extends({}, props, {
+    sx: {
+      cursor: 'pointer'
+    }
+  }));
+
+  const [option, setOption] = useState('Select an option');
+  const onAction = useCallback(itemProps => {
+    setOption(itemProps.text || '');
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Custom Trigger"), /*#__PURE__*/React.createElement("h2", null, "Last option activated: ", option), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionMenu, {
+    onAction: onAction,
+    anchorContent: "Menu",
+    renderAnchor: customAnchor,
+    items: [{
+      text: 'New file'
+    }, ActionList.Divider, {
+      text: 'Copy link'
+    }, {
+      text: 'Edit file'
+    }, {
+      text: 'Delete file',
+      variant: 'danger'
+    }]
+  })));
+}
+CustomTrigger.storyName = 'Custom Trigger';
+export function ActionMenuWithExternalAnchor() {
+  const [isOpen, setIsOpen] = useState(false);
+  const buttonRef = useRef(null);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    ref: buttonRef,
+    onClick: () => setIsOpen(!isOpen)
+  }, "Open Menu"), /*#__PURE__*/React.createElement(ActionMenu, {
+    renderAnchor: null,
+    anchorRef: buttonRef,
+    open: isOpen,
+    setOpen: setIsOpen,
+    items: [{
+      text: 'New file'
+    }, ActionList.Divider, {
+      text: 'Copy link'
+    }, {
+      text: 'Edit file'
+    }, {
+      text: 'Delete file',
+      variant: 'danger'
+    }]
+  }));
+}
+
+const DoubleClickableAnchor = ({
+  onClick: callback,
+  ...rest
+}) => {
+  const onClick = useCallback(event => {
+    if (event.detail === 2) {
+      event.preventDefault();
+    }
+
+    callback === null || callback === void 0 ? void 0 : callback(event);
+  }, [callback]);
+  return /*#__PURE__*/React.createElement(DropdownButton, _extends({
+    onClick: onClick
+  }, rest));
+};
+
+DoubleClickableAnchor.displayName = "DoubleClickableAnchor";
+export function ActionMenuWithDoubleClickStory() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Actions"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionMenu, {
+    renderAnchor: DoubleClickableAnchor,
+    anchorContent: /*#__PURE__*/React.createElement(ServerIcon, null),
+    items: [{
+      leadingVisual: ServerIcon,
+      text: 'Open current Codespace',
+      description: "Your existing Codespace will be opened to its previous state, and you'll be asked to manually switch to new-branch.",
+      descriptionVariant: 'block',
+      trailingText: '⌘O'
+    }, {
+      leadingVisual: PlusCircleIcon,
+      text: 'Create new Codespace',
+      description: 'Create a brand new Codespace with a fresh image and checkout this branch.',
+      descriptionVariant: 'block',
+      trailingText: '⌘C'
+    }]
+  })));
+}
+ActionMenuWithDoubleClickStory.storyName = 'ActionMenu with double-clickable anchor';