@primer/components 33.0.0-rc.b495ba4a → 33.1.0-rc.6856bcf5

package/lib-esm/__tests__/ThemeProvider.test.js

@@ -405,4 +405,118 @@ describe('useColorSchemeVar', () => {
     screen.getByRole('button').click();
     expect(screen.getByText('Hello')).toHaveStyleRule('background-color', 'blue');
   });
+});
+describe('useTheme().resolvedColorScheme', () => {
+  it('is undefined when not in a theme', () => {
+    const Component = () => {
+      const {
+        resolvedColorScheme
+      } = useTheme();
+      return /*#__PURE__*/React.createElement(Text, {
+        "data-testid": "text"
+      }, resolvedColorScheme);
+    };
+
+    render( /*#__PURE__*/React.createElement(Component, null));
+    expect(screen.getByTestId('text').textContent).toEqual('');
+  });
+  it('is undefined when the theme has no colorScheme object', () => {
+    const Component = () => {
+      const {
+        resolvedColorScheme
+      } = useTheme();
+      return /*#__PURE__*/React.createElement(Text, {
+        "data-testid": "text"
+      }, resolvedColorScheme);
+    };
+
+    render( /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: {
+        color: 'red'
+      }
+    }, /*#__PURE__*/React.createElement(Component, null)));
+    expect(screen.getByTestId('text').textContent).toEqual('');
+  });
+  it('is the same as the applied colorScheme, when that colorScheme is in the theme', () => {
+    const Component = () => {
+      const {
+        resolvedColorScheme
+      } = useTheme();
+      return /*#__PURE__*/React.createElement(Text, {
+        "data-testid": "text"
+      }, resolvedColorScheme);
+    };
+
+    const schemeToApply = 'dark';
+    render( /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: exampleTheme,
+      colorMode: "day",
+      dayScheme: schemeToApply
+    }, /*#__PURE__*/React.createElement(Component, null)));
+    expect(exampleTheme.colorSchemes).toHaveProperty(schemeToApply);
+    expect(screen.getByTestId('text').textContent).toEqual(schemeToApply);
+  });
+  it('is the value of the fallback colorScheme applied when attempting to apply an invalid colorScheme', () => {
+    const Component = () => {
+      const {
+        resolvedColorScheme
+      } = useTheme();
+      return /*#__PURE__*/React.createElement(Text, {
+        "data-testid": "text"
+      }, resolvedColorScheme);
+    };
+
+    const schemeToApply = 'totally-invalid-colorscheme';
+    render( /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: exampleTheme,
+      colorMode: "day",
+      dayScheme: schemeToApply
+    }, /*#__PURE__*/React.createElement(Component, null)));
+    const defaultThemeColorScheme = Object.keys(exampleTheme.colorSchemes)[0];
+    expect(defaultThemeColorScheme).not.toEqual(schemeToApply);
+    expect(exampleTheme.colorSchemes).not.toHaveProperty(schemeToApply);
+    expect(screen.getByTestId('text').textContent).toEqual('light');
+  });
+  describe('nested theme', () => {
+    it('is the same as the applied colorScheme, when that colorScheme is in the theme', () => {
+      const Component = () => {
+        const {
+          resolvedColorScheme
+        } = useTheme();
+        return /*#__PURE__*/React.createElement(Text, {
+          "data-testid": "text"
+        }, resolvedColorScheme);
+      };
+
+      const schemeToApply = 'dark';
+      render( /*#__PURE__*/React.createElement(ThemeProvider, {
+        theme: exampleTheme,
+        colorMode: "day",
+        dayScheme: schemeToApply
+      }, /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Component, null))));
+      expect(exampleTheme.colorSchemes).toHaveProperty(schemeToApply);
+      expect(screen.getByTestId('text').textContent).toEqual(schemeToApply);
+    });
+    it('is the value of the fallback colorScheme applied when attempting to apply an invalid colorScheme', () => {
+      const Component = () => {
+        const {
+          resolvedColorScheme
+        } = useTheme();
+        return /*#__PURE__*/React.createElement(Text, {
+          "data-testid": "text"
+        }, resolvedColorScheme);
+      };
+
+      const schemeToApply = 'totally-invalid-colorscheme';
+      render( /*#__PURE__*/React.createElement(ThemeProvider, {
+        theme: exampleTheme,
+        colorMode: "day",
+        dayScheme: schemeToApply
+      }, /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Component, null))));
+      const defaultThemeColorScheme = Object.keys(exampleTheme.colorSchemes)[0];
+      expect(defaultThemeColorScheme).not.toEqual(schemeToApply);
+      expect(exampleTheme.colorSchemes).not.toHaveProperty(schemeToApply);
+      expect(screen.getByTestId('text').textContent).toEqual('light');
+    });
+  });
 });

package/lib-esm/drafts.d.ts

@@ -6,3 +6,4 @@
  */
 export * from './ActionList2';
 export * from './NewButton';
+export * from './ActionMenu2';

package/lib-esm/drafts.js

@@ -6,4 +6,5 @@
  */
 // Components
 export * from './ActionList2';
-export * from './NewButton';
+export * from './NewButton';
+export * from './ActionMenu2';

package/lib-esm/hooks/index.d.ts

@@ -9,3 +9,4 @@ export { useAnchoredPosition } from './useAnchoredPosition';
 export { useOverlay } from './useOverlay';
 export type { UseOverlaySettings } from './useOverlay';
 export { useRenderForcingRef } from './useRenderForcingRef';
+export { useProvidedStateOrCreate } from './useProvidedStateOrCreate';

package/lib-esm/hooks/index.js

@@ -4,4 +4,5 @@ export { useOnEscapePress } from './useOnEscapePress';
 export { useOpenAndCloseFocus } from './useOpenAndCloseFocus';
 export { useAnchoredPosition } from './useAnchoredPosition';
 export { useOverlay } from './useOverlay';
-export { useRenderForcingRef } from './useRenderForcingRef';
+export { useRenderForcingRef } from './useRenderForcingRef';
+export { useProvidedStateOrCreate } from './useProvidedStateOrCreate';

package/lib-esm/index.d.ts

@@ -21,6 +21,8 @@ export { useOpenAndCloseFocus } from './hooks/useOpenAndCloseFocus';
 export { useOnEscapePress } from './hooks/useOnEscapePress';
 export { useOverlay } from './hooks/useOverlay';
 export { useConfirm } from './Dialog/ConfirmationDialog';
+export { default as Radio } from './Radio';
+export type { RadioProps } from './Radio';
 export { ActionList } from './ActionList';
 export { ActionMenu } from './ActionMenu';
 export type { ActionMenuProps } from './ActionMenu';

package/lib-esm/index.js

@@ -17,6 +17,7 @@ export { useOnEscapePress } from './hooks/useOnEscapePress';
 export { useOverlay } from './hooks/useOverlay';
 export { useConfirm } from './Dialog/ConfirmationDialog'; // Components
 
+export { default as Radio } from './Radio';
 export { ActionList } from './ActionList';
 export { ActionMenu } from './ActionMenu';
 export { default as Autocomplete } from './Autocomplete';

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

@@ -24,7 +24,7 @@ const meta = {
 export default meta;
 const ErsatzOverlay = styled.div.withConfig({
   displayName: "ActionListstories__ErsatzOverlay",
-  componentId: "akdcn0-0"
+  componentId: "sc-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');
@@ -90,7 +90,7 @@ MultiSelectListStory.storyName = 'Multi Select';
 export function ComplexListInsetVariantStory() {
   const StyledDiv = styled.div.withConfig({
     displayName: "ActionListstories__StyledDiv",
-    componentId: "akdcn0-1"
+    componentId: "sc-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: [{
@@ -189,7 +189,7 @@ ComplexListInsetVariantStory.storyName = 'Complex List — Inset Variant';
 export function ComplexListFullVariantStory() {
   const StyledDiv = styled.div.withConfig({
     displayName: "ActionListstories__StyledDiv",
-    componentId: "akdcn0-2"
+    componentId: "sc-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",

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

@@ -31,7 +31,7 @@ const meta = {
 export default meta;
 const ErsatzOverlay = styled.div.withConfig({
   displayName: "ActionList2stories__ErsatzOverlay",
-  componentId: "f9cezu-0"
+  componentId: "sc-f9cezu-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');

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

@@ -0,0 +1,393 @@
+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(ActionMenu.Overlay, null, /*#__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, null, /*#__PURE__*/React.createElement(ActionMenu.Button, {
+    "aria-label": "Open Actions Menu"
+  }, /*#__PURE__*/React.createElement(ServerIcon, null)), /*#__PURE__*/React.createElement(ActionMenu.Overlay, {
+    width: "medium"
+  }, /*#__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 anchorRef = /*#__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: anchorRef,
+    onClick: () => setOpen(!open)
+  }, open ? 'Close Menu' : 'Open Menu')), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(ActionMenu, {
+    open: open,
+    onOpenChange: setOpen,
+    anchorRef: anchorRef
+  }, /*#__PURE__*/React.createElement(ActionMenu.Overlay, null, /*#__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
+  }, /*#__PURE__*/React.createElement(ActionMenu.Button, null, "Anchor"), /*#__PURE__*/React.createElement(ActionMenu.Overlay, {
+    ignoreClickRefs: [// Because the component is controlled from outside, but the anchor is still internal,
+    // clicking the external button should not be counted as "clicking outside"
+    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"))))));
+}
+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(ActionMenu.Overlay, 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
+  }, /*#__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(ActionMenu.Overlay, {
+    onClickOutside: handleClickOutside
+  }, /*#__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
+  }, /*#__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(ActionMenu.Overlay, {
+    width: "medium"
+  }, /*#__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 OverlayProps() {
+  const [open, setOpen] = React.useState(false);
+  const inputRef = /*#__PURE__*/React.createRef();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "OverlayProps"), /*#__PURE__*/React.createElement("p", null, "Disable `onClickOutside` and `onEscape`. Only way to close is to select an action which takes focus on a TextInput"), /*#__PURE__*/React.createElement(ActionMenu, {
+    open: open,
+    onOpenChange: setOpen
+  }, /*#__PURE__*/React.createElement(ActionMenu.Button, null, "Menu"), /*#__PURE__*/React.createElement(ActionMenu.Overlay, {
+    width: "large",
+    onClickOutside: () => {
+      /* do nothing, keep it open*/
+    },
+    onEscape: () => {
+      /* do nothing, keep it open*/
+    },
+    returnFocusRef: inputRef
+  }, /*#__PURE__*/React.createElement(ActionList, null, /*#__PURE__*/React.createElement(ActionList.Item, null, "Option 1"), /*#__PURE__*/React.createElement(ActionList.Item, null, "Option 2"), /*#__PURE__*/React.createElement(ActionList.Item, null, "Option 2"), /*#__PURE__*/React.createElement(ActionList.Item, null, "Option 2"), /*#__PURE__*/React.createElement(ActionList.Item, null, "Option 2"), /*#__PURE__*/React.createElement(ActionList.Item, null, "Option 2"), /*#__PURE__*/React.createElement(ActionList.Item, null, "Option 2"), /*#__PURE__*/React.createElement(ActionList.Item, null, "Option 2")))), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(TextInput, {
+    type: "text",
+    ref: inputRef,
+    placeholder: "random input to return focus to"
+  }));
+}
+OverlayProps.storyName = 'Overlay Props';
+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(ActionMenu.Overlay, null, /*#__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';

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

@@ -4,7 +4,7 @@ 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';
+import { get } from '../constants';
 export default {
   title: 'Forms/Checkbox',
   component: Checkbox,
@@ -30,12 +30,12 @@ export default {
 };
 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);
+  componentId: "sc-sdupvr-0"
+})(["user-select:none;font-weight:600;font-size:14px;line-height:18px;margin-left:16px;"]);
 const StyledSubLabel = styled(Text).withConfig({
   displayName: "Checkboxstories__StyledSubLabel",
-  componentId: "sdupvr-1"
-})(["color:", ";font-size:13px;", ""], get('colors.fg.muted'), COMMON);
+  componentId: "sc-sdupvr-1"
+})(["color:", ";font-size:13px;"], get('colors.fg.muted'));
 export const Default = args => {
   const [isChecked, setChecked] = useState(false);