@primer/components 33.0.0-rc.cface7dc → 33.1.0

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

@@ -1,303 +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'
-    },
-    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';

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

@@ -1,376 +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 React from 'react';
-import { ThemeProvider } from '..';
-import BaseStyles from '../BaseStyles';
-import { ActionMenu } from '../ActionMenu2';
-import { ActionList } from '../ActionList2';
-import Button, { ButtonInvisible } from '../Button';
-import Box from '../Box';
-import Text from '../Text';
-import TextInput from '../TextInput';
-import StyledOcticon from '../StyledOcticon';
-import FormGroup from '../FormGroup';
-import { ServerIcon, PlusCircleIcon, TriangleDownIcon, KebabHorizontalIcon, PencilIcon, ArchiveIcon, TrashIcon, ProjectIcon, ListUnorderedIcon, ArrowDownIcon, SearchIcon, VersionsIcon, TableIcon } from '@primer/octicons-react';
-const meta = {
-  title: 'Composite components/ActionMenu2',
-  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;
-export function SimpleListStory() {
-  const [actionFired, fireAction] = React.useState('');
-
-  const onSelect = name => fireAction(name);
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Simple Menu"), /*#__PURE__*/React.createElement("h2", null, "Last option activated: ", actionFired), /*#__PURE__*/React.createElement(ActionMenu, null, /*#__PURE__*/React.createElement(ActionMenu.Button, null, "Menu"), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, {
-    onSelect: () => onSelect('Copy link')
-  }, "Copy link", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318C")), /*#__PURE__*/React.createElement(ActionList.Item, {
-    onSelect: () => onSelect('Quote reply')
-  }, "Quote reply", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318Q")), /*#__PURE__*/React.createElement(ActionList.Item, {
-    onSelect: () => onSelect('Edit comment')
-  }, "Edit comment", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318E")), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, {
-    variant: "danger",
-    onSelect: () => onSelect('Delete file')
-  }, "Delete file", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318D")))));
-}
-SimpleListStory.storyName = 'Simple Menu';
-export function ActionsStory() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Actions"), /*#__PURE__*/React.createElement(ActionMenu, {
-    overlayProps: {
-      width: 'medium'
-    }
-  }, /*#__PURE__*/React.createElement(ActionMenu.Button, {
-    "aria-label": "Open Actions Menu"
-  }, /*#__PURE__*/React.createElement(ServerIcon, null)), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(ServerIcon, null)), "Open current Codespace", /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "block"
-  }, "Your existing Codespace will be opened to its previous state, and you'll be asked to manually switch to new-branch."), /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318O")), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(PlusCircleIcon, null)), "Create new Codespace", /*#__PURE__*/React.createElement(ActionList.Description, {
-    variant: "block"
-  }, "Create a brand new Codespace with a fresh image and checkout this branch."), /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318C")))));
-}
-ActionsStory.storyName = 'Actions';
-export function ExternalAnchor() {
-  const [actionFired, fireAction] = React.useState('');
-
-  const onSelect = name => fireAction(name);
-
-  const [open, setOpen] = React.useState(false);
-  const triggerRef = /*#__PURE__*/React.createRef();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "External Anchor"), /*#__PURE__*/React.createElement("h2", null, "External Open State: ", open ? 'Open' : 'Closed'), /*#__PURE__*/React.createElement("h2", null, "Last option activated: ", actionFired), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
-    ref: triggerRef,
-    onClick: () => setOpen(!open)
-  }, open ? 'Close Menu' : 'Open Menu')), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(ActionMenu, {
-    open: open,
-    onOpenChange: setOpen,
-    anchorRef: triggerRef
-  }, /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, {
-    onSelect: () => onSelect('Copy link')
-  }, "Copy link", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318C")), /*#__PURE__*/React.createElement(ActionList.Item, {
-    onSelect: () => onSelect('Quote reply')
-  }, "Quote reply", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318Q")), /*#__PURE__*/React.createElement(ActionList.Item, {
-    onSelect: () => onSelect('Edit comment')
-  }, "Edit comment", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318E")), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, {
-    variant: "danger",
-    onSelect: () => onSelect('Delete file')
-  }, "Delete file", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318D")))));
-}
-ExternalAnchor.storyName = 'External Anchor';
-export function ControlledMenu() {
-  const [actionFired, fireAction] = React.useState('');
-
-  const onSelect = name => fireAction(name);
-
-  const [open, setOpen] = React.useState(false);
-  const triggerRef = /*#__PURE__*/React.createRef();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Controlled Menu"), /*#__PURE__*/React.createElement("h2", null, "External Open State: ", open ? 'Open' : 'Closed'), /*#__PURE__*/React.createElement("h2", null, "Last option activated: ", actionFired), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
-    ref: triggerRef,
-    onClick: () => setOpen(!open)
-  }, open ? 'Close Menu' : 'Open Menu')), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(ActionMenu, {
-    open: open,
-    onOpenChange: setOpen,
-    overlayProps: {
-      // Because the component is controlled from outside, but the anchor is still internal,
-      // clicking the external button should not be counted as "clicking outside"
-      ignoreClickRefs: [triggerRef]
-    }
-  }, /*#__PURE__*/React.createElement(ActionMenu.Button, null, "Anchor"), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, {
-    onSelect: () => onSelect('Copy link')
-  }, "Copy link", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318C")), /*#__PURE__*/React.createElement(ActionList.Item, {
-    onSelect: () => onSelect('Quote reply')
-  }, "Quote reply", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318Q")), /*#__PURE__*/React.createElement(ActionList.Item, {
-    onSelect: () => onSelect('Edit comment')
-  }, "Edit comment", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318E")), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, {
-    variant: "danger",
-    onSelect: () => onSelect('Delete file')
-  }, "Delete file", /*#__PURE__*/React.createElement(ActionList.TrailingVisual, null, "\u2318D")))));
-}
-ControlledMenu.storyName = 'Controlled Menu';
-export function CustomAnchor() {
-  const [actionFired, fireAction] = React.useState('');
-
-  const onSelect = name => fireAction(name);
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Custom Anchor"), /*#__PURE__*/React.createElement("h2", null, "Last option activated: ", actionFired), /*#__PURE__*/React.createElement(ActionMenu, null, /*#__PURE__*/React.createElement(ActionMenu.Anchor, null, /*#__PURE__*/React.createElement("summary", {
-    style: {
-      cursor: 'pointer'
-    },
-    "aria-label": "Open column options"
-  }, /*#__PURE__*/React.createElement(KebabHorizontalIcon, null))), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, {
-    onSelect: () => onSelect('Rename')
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(PencilIcon, null)), "Rename"), /*#__PURE__*/React.createElement(ActionList.Item, {
-    onSelect: () => onSelect('Archive')
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(ArchiveIcon, null)), "Archive all cards"), /*#__PURE__*/React.createElement(ActionList.Item, {
-    variant: "danger",
-    onSelect: () => onSelect('Delete file')
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(TrashIcon, null)), "Delete"))));
-}
-CustomAnchor.storyName = 'Custom Anchor';
-export function MemexTableMenu() {
-  const [name, setName] = React.useState('Estimate');
-  const inputRef = /*#__PURE__*/React.createRef();
-  /** To add custom components to the Menu,
-   *  you need to switch to a controlled menu
-   */
-
-  const [open, setOpen] = React.useState(false);
-
-  const handleKeyPress = event => {
-    if (event.key === 'Enter') {
-      setName(event.currentTarget.value);
-      setOpen(false);
-    }
-  };
-  /** This requires inside knowledge. If you to do this with onBlur
-   *  on the input, it doesn't work :(
-   */
-
-
-  const handleClickOutside = () => {
-    if (inputRef.current) setName(inputRef.current.value);
-    setOpen(false);
-  };
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Memex Table Menu"), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      width: 200,
-      display: 'flex',
-      justifyContent: 'space-between',
-      p: 2,
-      border: '1px solid',
-      borderColor: 'border.default'
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    sx: {
-      fontSize: 0,
-      fontWeight: 'bold'
-    }
-  }, name), /*#__PURE__*/React.createElement(ActionMenu, {
-    open: open,
-    onOpenChange: setOpen,
-    overlayProps: {
-      onClickOutside: handleClickOutside
-    }
-  }, /*#__PURE__*/React.createElement(ActionMenu.Button, {
-    "aria-label": "Open Estimate column options menu",
-    sx: {
-      p: 0,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }
-  }, /*#__PURE__*/React.createElement(TriangleDownIcon, null)), /*#__PURE__*/React.createElement(TextInput, {
-    ref: inputRef,
-    sx: {
-      m: 2
-    },
-    defaultValue: name,
-    onKeyPress: handleKeyPress
-  }), /*#__PURE__*/React.createElement(ActionMenu.Divider, {
-    sx: {
-      m: 0
-    }
-  }), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, null, "Sort ascending (123...)"), /*#__PURE__*/React.createElement(ActionList.Item, null, "Sort descending (123...)"), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, null, "Filter by values"), /*#__PURE__*/React.createElement(ActionList.Item, null, "Group by values"), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, {
-    disabled: true
-  }, "Hide field"), /*#__PURE__*/React.createElement(ActionList.Item, {
-    variant: "danger"
-  }, "Delete file")))));
-}
-MemexTableMenu.storyName = 'Memex Table Menu';
-/* copied from github/memex */
-
-const LayoutToggleItem = ({
-  selected,
-  children,
-  Icon,
-  ...props
-}) => {
-  return /*#__PURE__*/React.createElement(FormGroup, {
-    sx: {
-      flex: 'auto',
-      borderRadius: 2,
-      border: '1px solid',
-      borderColor: selected ? 'accent.emphasis' : 'border.default',
-      textAlign: 'center',
-      cursor: 'pointer',
-      backgroundColor: selected ? 'accent.subtle' : '',
-      boxShadow: selected ? theme => `inset 0 0 0 1px ${theme.colors.accent.emphasis}` : '',
-      mb: 2,
-      mt: 1,
-      '&:hover': {
-        backgroundColor: !selected ? 'canvas.subtle' : ''
-      },
-      '&:first-of-type': {
-        borderTopRightRadius: '0px',
-        borderBottomRightRadius: '0px',
-        borderRight: selected ? undefined : '0'
-      },
-      '&:last-of-type': {
-        borderTopLeftRadius: '0px',
-        borderBottomLeftRadius: '0px',
-        borderLeft: selected ? undefined : '0'
-      }
-    }
-  }, /*#__PURE__*/React.createElement(FormGroup.Label, _extends({
-    htmlFor: "layout-selector",
-    sx: {
-      fontWeight: 'normal',
-      cursor: 'pointer',
-      px: 3,
-      py: 2,
-      mb: 0
-    }
-  }, props), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      textAlign: 'center',
-      flexDirection: 'column',
-      m: 'auto',
-      alignItems: 'center',
-      display: 'flex'
-    }
-  }, /*#__PURE__*/React.createElement(Icon, {
-    size: "medium"
-  }), /*#__PURE__*/React.createElement(Text, {
-    sx: {
-      color: selected ? 'fg.default' : 'fg.muted',
-      fontSize: 0
-    }
-  }, children))));
-};
-
-LayoutToggleItem.displayName = "LayoutToggleItem";
-
-/* copied from github/memex */
-const ViewChangeButtons = ({
-  setOpen
-}) => /*#__PURE__*/React.createElement(Box, {
-  sx: {
-    display: 'flex'
-  }
-}, /*#__PURE__*/React.createElement(ButtonInvisible, {
-  onClick: () => setOpen(false),
-  sx: {
-    flex: 'auto',
-    minWidth: '50%',
-    borderRight: '1px solid',
-    borderColor: 'border.default',
-    borderRadius: 0,
-    mt: -2,
-    mb: -2,
-    py: 3,
-    '&:hover': {
-      bg: 'canvas.inset'
-    }
-  }
-}, "Save changes"), /*#__PURE__*/React.createElement(ButtonInvisible, {
-  onClick: () => setOpen(false),
-  sx: {
-    flex: 'auto',
-    color: 'fg.muted',
-    borderRadius: 0,
-    mt: -2,
-    mb: -2,
-    py: 3,
-    fontWeight: 'normal',
-    '&:hover': {
-      bg: 'canvas.inset'
-    }
-  }
-}, "Discard changes"));
-
-ViewChangeButtons.displayName = "ViewChangeButtons";
-export function MemexViewOptionsMenu() {
-  const [open, setOpen] = React.useState(false);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Memex View Options Menu"), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      display: 'flex',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    sx: {
-      fontSize: 1,
-      mr: 3
-    }
-  }, /*#__PURE__*/React.createElement(StyledOcticon, {
-    icon: ProjectIcon,
-    sx: {
-      mr: 2
-    }
-  }), "React"), /*#__PURE__*/React.createElement(ActionMenu, {
-    open: open,
-    onOpenChange: setOpen,
-    overlayProps: {
-      width: 'medium'
-    }
-  }, /*#__PURE__*/React.createElement(ActionMenu.Button, {
-    "aria-label": "Open View options menu",
-    sx: {
-      p: 0,
-      width: 18,
-      height: 18,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }
-  }, /*#__PURE__*/React.createElement(TriangleDownIcon, null)), /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Group, {
-    title: "Layout"
-  }, /*#__PURE__*/React.createElement("li", {
-    style: {
-      listStyle: 'none'
-    }
-  }, /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      mx: 3,
-      display: 'flex'
-    }
-  }, /*#__PURE__*/React.createElement(LayoutToggleItem, {
-    selected: true,
-    Icon: TableIcon
-  }, "Table"), /*#__PURE__*/React.createElement(LayoutToggleItem, {
-    selected: false,
-    Icon: ProjectIcon
-  }, "Board")))), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Group, {
-    title: "Configuration"
-  }, /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(ListUnorderedIcon, null)), "Title, Assignees, Status, Labels, Repositories"), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(ListUnorderedIcon, null)), "group: none"), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(ArrowDownIcon, null)), "sort: manual"), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(SearchIcon, null)), "Search or filter this view")), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(PencilIcon, null)), "Rename view"), /*#__PURE__*/React.createElement(ActionList.Item, null, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(VersionsIcon, null)), "Save changes to new view"), /*#__PURE__*/React.createElement(ActionList.Item, {
-    disabled: true
-  }, /*#__PURE__*/React.createElement(ActionList.LeadingVisual, null, /*#__PURE__*/React.createElement(TrashIcon, null)), "Delete view"), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement("li", {
-    style: {
-      listStyle: 'none'
-    }
-  }, /*#__PURE__*/React.createElement(ViewChangeButtons, {
-    setOpen: setOpen
-  }))))));
-}
-MemexViewOptionsMenu.storyName = 'Memex View Options Menu';
-export function UnexpectedSelectionVariant() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Expect error if selectionVariant is passed"), /*#__PURE__*/React.createElement(ActionMenu, null, /*#__PURE__*/React.createElement(ActionMenu.Button, null, "Menu"), /*#__PURE__*/React.createElement(ActionList, {
-    selectionVariant: "multiple"
-  }, /*#__PURE__*/React.createElement(ActionList.Item, null, "Copy link"), /*#__PURE__*/React.createElement(ActionList.Item, null, "Quote reply"), /*#__PURE__*/React.createElement(ActionList.Item, null, "Edit comment"), /*#__PURE__*/React.createElement(ActionList.Divider, null), /*#__PURE__*/React.createElement(ActionList.Item, {
-    variant: "danger"
-  }, "Delete file"))));
-}
-UnexpectedSelectionVariant.storyName = 'Unexpected selectionVariant';