@primer/components 31.0.0-rc.c90c1dae → 31.0.0

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

@@ -1,394 +0,0 @@
-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',
-      trailingIcon: ArrowLeftIcon,
-      showDivider: true
-    }, {
-      leadingVisual: ArrowRightIcon,
-      text: 'Inline Description',
-      description: 'This description gets truncated because it is inline',
-      trailingIcon: ArrowLeftIcon,
-      showDivider: true
-    }, {
-      leadingVisual: ArrowRightIcon,
-      text: 'Really long text without a description should wrap',
-      trailingIcon: ArrowLeftIcon,
-      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

@@ -1,293 +0,0 @@
-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',
-      trailingText: '⌘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)),
-      trailingText: '⌘S',
-      trailingIcon: ArrowRightIcon
-    }, {
-      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';