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

package/lib/ActionMenu2.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ActionMenu = void 0;
+exports.ActionMenu = exports.MenuContext = void 0;
 
 var _Button = _interopRequireDefault(require("./Button"));
 
@@ -11,59 +11,60 @@ var _react = _interopRequireDefault(require("react"));
 
 var _AnchoredOverlay = require("./AnchoredOverlay");
 
-var _useProvidedStateOrCreate = require("./hooks/useProvidedStateOrCreate");
-
 var _hooks = require("./hooks");
 
 var _Divider = require("./ActionList2/Divider");
 
-var _MenuContext = require("./ActionList2/MenuContext");
+var _ActionListContainerContext = require("./ActionList2/ActionListContainerContext");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const ActionMenuBase = ({
+const MenuContext = /*#__PURE__*/_react.default.createContext({
+  renderAnchor: null,
+  open: false
+});
+
+exports.MenuContext = MenuContext;
+
+const Menu = ({
   anchorRef: externalAnchorRef,
   open,
   onOpenChange,
-  overlayProps,
   children
 }) => {
-  const [combinedOpenState, setCombinedOpenState] = (0, _useProvidedStateOrCreate.useProvidedStateOrCreate)(open, onOpenChange, false);
-  const anchorRef = (0, _hooks.useProvidedRefOrCreate)(externalAnchorRef);
+  const [combinedOpenState, setCombinedOpenState] = (0, _hooks.useProvidedStateOrCreate)(open, onOpenChange, false);
 
   const onOpen = _react.default.useCallback(() => setCombinedOpenState(true), [setCombinedOpenState]);
 
   const onClose = _react.default.useCallback(() => setCombinedOpenState(false), [setCombinedOpenState]);
 
-  let renderAnchor = null;
-  const contents = [];
+  const anchorRef = (0, _hooks.useProvidedRefOrCreate)(externalAnchorRef);
+  let renderAnchor = null; // 🚨 Hack for good API!
+  // we strip out Anchor from children and pass it to AnchoredOverlay to render
+  // with additional props for accessibility
 
-  _react.default.Children.map(children, child => {
+  const contents = _react.default.Children.map(children, child => {
     if (child.type === MenuButton || child.type === Anchor) {
       renderAnchor = anchorProps => /*#__PURE__*/_react.default.cloneElement(child, anchorProps);
-    } else {
-      contents.push(child);
+
+      return null;
     }
+
+    return child;
   });
 
-  return /*#__PURE__*/_react.default.createElement(_AnchoredOverlay.AnchoredOverlay, {
-    renderAnchor: renderAnchor,
-    anchorRef: anchorRef,
-    open: combinedOpenState,
-    onOpen: onOpen,
-    onClose: onClose,
-    overlayProps: overlayProps
-  }, /*#__PURE__*/_react.default.createElement(_MenuContext.MenuContext.Provider, {
+  return /*#__PURE__*/_react.default.createElement(MenuContext.Provider, {
     value: {
-      parent: 'ActionMenu',
-      listRole: 'menu',
-      itemRole: 'menuitem',
-      afterSelect: onClose
+      anchorRef,
+      renderAnchor,
+      open: combinedOpenState,
+      onOpen,
+      onClose
     }
-  }, contents));
+  }, contents);
 };
 
-ActionMenuBase.displayName = "ActionMenuBase";
+Menu.displayName = "Menu";
 
 const Anchor = /*#__PURE__*/_react.default.forwardRef(({
   children,
@@ -82,10 +83,43 @@ const MenuButton = /*#__PURE__*/_react.default.forwardRef((props, anchorRef) =>
   }, /*#__PURE__*/_react.default.createElement(_Button.default, props));
 });
 
-ActionMenuBase.displayName = 'ActionMenu';
-const ActionMenu = Object.assign(ActionMenuBase, {
+const Overlay = ({
+  children,
+  ...overlayProps
+}) => {
+  // we typecast anchorRef as required instead of optional
+  // because we know that we're setting it in context in Menu
+  const {
+    anchorRef,
+    renderAnchor,
+    open,
+    onOpen,
+    onClose
+  } = _react.default.useContext(MenuContext);
+
+  return /*#__PURE__*/_react.default.createElement(_AnchoredOverlay.AnchoredOverlay, {
+    anchorRef: anchorRef,
+    renderAnchor: renderAnchor,
+    open: open,
+    onOpen: onOpen,
+    onClose: onClose,
+    overlayProps: overlayProps
+  }, /*#__PURE__*/_react.default.createElement(_ActionListContainerContext.ActionListContainerContext.Provider, {
+    value: {
+      container: 'ActionMenu',
+      listRole: 'menu',
+      itemRole: 'menuitem',
+      afterSelect: onClose
+    }
+  }, children));
+};
+
+Overlay.displayName = "Overlay";
+Menu.displayName = 'ActionMenu';
+const ActionMenu = Object.assign(Menu, {
   Button: MenuButton,
   Anchor,
+  Overlay,
   Divider: _Divider.Divider
 });
 exports.ActionMenu = ActionMenu;

package/lib/BranchName.js

@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const BranchName = _styledComponents.default.a.withConfig({
   displayName: "BranchName",
   componentId: "sc-167ouzm-0"
-})(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:", ";background-color:", ";border-radius:", ";", ";"], (0, _constants.get)('fontSizes.0'), (0, _constants.get)('fonts.mono'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.accent.subtle'), (0, _constants.get)('radii.2'), _sx.default);
+})(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:", ";background-color:", ";border-radius:", ";text-decoration:none;", ";"], (0, _constants.get)('fontSizes.0'), (0, _constants.get)('fonts.mono'), (0, _constants.get)('colors.accent.fg'), (0, _constants.get)('colors.accent.subtle'), (0, _constants.get)('radii.2'), _sx.default);
 
 var _default = BranchName;
 exports.default = _default;

package/lib/Checkbox.d.ts

@@ -25,5 +25,5 @@ export declare type CheckboxProps = {
 /**
  * An accessible, native checkbox component
  */
-declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "indeterminate" | "validationStatus"> & React.RefAttributes<HTMLInputElement>>;
+declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "validationStatus" | "indeterminate"> & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

package/lib/Radio.d.ts

@@ -0,0 +1,38 @@
+import React, { InputHTMLAttributes } from 'react';
+import { SxProp } from './sx';
+export declare type RadioProps = {
+    /**
+     * A unique value that is never shown to the user.
+     * Used during form submission and to identify which radio button in a group is selected
+     */
+    value: string;
+    /**
+     * Name attribute of the input element. Required for grouping radio inputs
+     */
+    name: string;
+    /**
+     * Apply inactive visual appearance to the radio button
+     */
+    disabled?: boolean;
+    /**
+     * Indicates whether the radio button is selected
+     */
+    checked?: boolean;
+    /**
+     * Forward a ref to the underlying input element
+     */
+    ref?: React.RefObject<HTMLInputElement>;
+    /**
+     * Indicates whether the radio button must be checked before the form can be submitted
+     */
+    required?: boolean;
+    /**
+     * Indicates whether the radio button validation state is non-standard
+     */
+    validationStatus?: 'error' | 'success';
+} & InputHTMLAttributes<HTMLInputElement> & SxProp;
+/**
+ * An accessible, native radio component for selecting one option from a list.
+ */
+declare const Radio: React.ForwardRefExoticComponent<Pick<RadioProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "validationStatus"> & React.RefAttributes<HTMLInputElement>>;
+export default Radio;

package/lib/Radio.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _sx = _interopRequireDefault(require("./sx"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+const StyledRadio = _styledComponents.default.input.withConfig({
+  displayName: "Radio__StyledRadio",
+  componentId: "sc-1ak1fjg-0"
+})(["cursor:pointer;", " ", ""], props => props.disabled && `cursor: not-allowed;`, _sx.default);
+/**
+ * An accessible, native radio component for selecting one option from a list.
+ */
+
+
+const Radio = /*#__PURE__*/_react.default.forwardRef(({
+  checked,
+  disabled,
+  sx: sxProp,
+  required,
+  validationStatus,
+  value,
+  name,
+  ...rest
+}, ref) => {
+  return /*#__PURE__*/_react.default.createElement(StyledRadio, _extends({
+    type: "radio",
+    value: value,
+    name: name,
+    ref: ref,
+    disabled: disabled,
+    "aria-disabled": disabled ? 'true' : 'false',
+    checked: checked,
+    "aria-checked": checked ? 'true' : 'false',
+    required: required,
+    "aria-required": required ? 'true' : 'false',
+    "aria-invalid": validationStatus === 'error' ? 'true' : 'false',
+    sx: sxProp
+  }, rest));
+});
+
+Radio.displayName = 'Radio';
+var _default = Radio;
+exports.default = _default;

package/lib/__tests__/ActionList.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib/__tests__/ActionList.test.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+require("babel-polyfill");
+
+var _jestAxe = require("jest-axe");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _theme = _interopRequireDefault(require("../theme"));
+
+var _ActionList = require("../ActionList");
+
+var _testing = require("../utils/testing");
+
+var _ = require("..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+
+function SimpleActionList() {
+  return /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+    theme: _theme.default
+  }, /*#__PURE__*/_react2.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList, {
+    items: [{
+      text: 'New file'
+    }, _ActionList.ActionList.Divider, {
+      text: 'Copy link'
+    }, {
+      text: 'Edit file'
+    }, {
+      text: 'Delete file',
+      variant: 'danger'
+    }]
+  })));
+}
+
+SimpleActionList.displayName = "SimpleActionList";
+describe('ActionList', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _ActionList.ActionList,
+    options: {
+      skipAs: true,
+      skipSx: true
+    },
+    toRender: () => /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList, {
+      items: []
+    })
+  });
+  (0, _testing.checkExports)('ActionList', {
+    default: undefined,
+    ActionList: _ActionList.ActionList
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionList, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react.cleanup)();
+  });
+});
+describe('ActionList.Item', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _ActionList.ActionList.Item
+  });
+});

package/lib/__tests__/ActionList.types.test.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function emptyList(): JSX.Element;
+export declare function listWithSingleItem(): JSX.Element;
+export declare function canUseDivDOMProps(): JSX.Element;
+export declare function cannotUseAnchorDOMProps(): JSX.Element;
+export declare function cannotUseAsWithoutRenderProp(): JSX.Element;

package/lib/__tests__/ActionList.types.test.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emptyList = emptyList;
+exports.listWithSingleItem = listWithSingleItem;
+exports.canUseDivDOMProps = canUseDivDOMProps;
+exports.cannotUseAnchorDOMProps = cannotUseAnchorDOMProps;
+exports.cannotUseAsWithoutRenderProp = cannotUseAsWithoutRenderProp;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function emptyList() {
+  return /*#__PURE__*/_react.default.createElement(_.ActionList, {
+    items: []
+  });
+}
+
+emptyList.displayName = "emptyList";
+
+function listWithSingleItem() {
+  return /*#__PURE__*/_react.default.createElement(_.ActionList, {
+    items: [{
+      text: 'One'
+    }]
+  });
+}
+
+listWithSingleItem.displayName = "listWithSingleItem";
+
+function canUseDivDOMProps() {
+  return /*#__PURE__*/_react.default.createElement(_.ActionList, {
+    items: [{
+      text: 'One',
+      onMouseDown: () => undefined
+    }]
+  });
+}
+
+canUseDivDOMProps.displayName = "canUseDivDOMProps";
+
+function cannotUseAnchorDOMProps() {
+  return /*#__PURE__*/_react.default.createElement(_.ActionList, {
+    items: [{
+      text: 'One',
+      // @ts-expect-error href is not a div DOM prop
+      href: '#'
+    }]
+  });
+}
+
+cannotUseAnchorDOMProps.displayName = "cannotUseAnchorDOMProps";
+
+function cannotUseAsWithoutRenderProp() {
+  return /*#__PURE__*/_react.default.createElement(_.ActionList, {
+    items: [{
+      text: 'One',
+      // @ts-expect-error as is only available via manual rendering of items
+      as: 'a'
+    }]
+  });
+}
+
+cannotUseAsWithoutRenderProp.displayName = "cannotUseAsWithoutRenderProp";

package/lib/__tests__/ActionList2.test.d.ts

@@ -0,0 +1,2 @@
+import 'babel-polyfill';
+import '@testing-library/jest-dom';

package/lib/__tests__/ActionList2.test.js

@@ -0,0 +1,170 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+require("babel-polyfill");
+
+var _jestAxe = require("jest-axe");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _theme = _interopRequireDefault(require("../theme"));
+
+var _ActionList = require("../ActionList2");
+
+var _testing = require("../utils/testing");
+
+var _ = require("..");
+
+require("@testing-library/jest-dom");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+
+function SimpleActionList() {
+  return /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+    theme: _theme.default
+  }, /*#__PURE__*/_react2.default.createElement(_.SSRProvider, null, /*#__PURE__*/_react2.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList, null, /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Item, null, "New file"), /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Divider, null), /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Item, null, "Copy link"), /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Item, null, "Edit file"), /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Item, {
+    variant: "danger"
+  }, "Delete file")))));
+}
+
+SimpleActionList.displayName = "SimpleActionList";
+const projects = [{
+  name: 'Primer Backlog',
+  scope: 'GitHub'
+}, {
+  name: 'Primer React',
+  scope: 'github/primer'
+}, {
+  name: 'Disabled Project',
+  scope: 'github/primer',
+  disabled: true
+}];
+
+function SingleSelectListStory() {
+  const [selectedIndex, setSelectedIndex] = _react2.default.useState(0);
+
+  return /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList, {
+    selectionVariant: "single",
+    showDividers: true,
+    role: "listbox",
+    "aria-label": "Select a project"
+  }, projects.map((project, index) => /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Item, {
+    key: index,
+    role: "option",
+    selected: index === selectedIndex,
+    onSelect: () => setSelectedIndex(index),
+    disabled: project.disabled
+  }, project.name)));
+}
+
+SingleSelectListStory.displayName = "SingleSelectListStory";
+describe('ActionList', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _ActionList.ActionList,
+    options: {
+      skipAs: true,
+      skipSx: true
+    },
+    toRender: () => /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList, null)
+  });
+  (0, _testing.checkExports)('ActionList2', {
+    default: undefined,
+    ActionList: _ActionList.ActionList
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionList, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react.cleanup)();
+  });
+  it('should fire onSelect on click and keypress', async () => {
+    const component = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SingleSelectListStory, null));
+    const options = await (0, _react.waitFor)(() => component.getAllByRole('option'));
+    expect(options[0]).toHaveAttribute('aria-selected', 'true');
+    expect(options[1]).toHaveAttribute('aria-selected', 'false');
+
+    _react.fireEvent.click(options[1]);
+
+    expect(options[0]).toHaveAttribute('aria-selected', 'false');
+    expect(options[1]).toHaveAttribute('aria-selected', 'true'); // We pass keycode here to navigate a implementation detail in react-testing-library
+    // https://github.com/testing-library/react-testing-library/issues/269#issuecomment-455854112
+
+    _react.fireEvent.keyPress(options[0], {
+      key: 'Enter',
+      charCode: 13
+    });
+
+    expect(options[0]).toHaveAttribute('aria-selected', 'true');
+    expect(options[1]).toHaveAttribute('aria-selected', 'false');
+
+    _react.fireEvent.keyPress(options[1], {
+      key: ' ',
+      charCode: 32
+    });
+
+    expect(options[0]).toHaveAttribute('aria-selected', 'false');
+    expect(options[1]).toHaveAttribute('aria-selected', 'true');
+    (0, _react.cleanup)();
+  });
+  it('should skip onSelect on disabled items', async () => {
+    const component = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SingleSelectListStory, null));
+    const options = await (0, _react.waitFor)(() => component.getAllByRole('option'));
+    expect(options[0]).toHaveAttribute('aria-selected', 'true');
+    expect(options[2]).toHaveAttribute('aria-selected', 'false');
+
+    _react.fireEvent.click(options[2]);
+
+    expect(options[0]).toHaveAttribute('aria-selected', 'true');
+    expect(options[2]).toHaveAttribute('aria-selected', 'false');
+
+    _react.fireEvent.keyPress(options[2], {
+      key: 'Enter',
+      charCode: 13
+    });
+
+    expect(options[0]).toHaveAttribute('aria-selected', 'true');
+    expect(options[2]).toHaveAttribute('aria-selected', 'false');
+    (0, _react.cleanup)();
+  });
+  it('should throw when selected is provided without a selectionVariant on parent', async () => {
+    // we expect console.error to be called, so we suppress that in the test
+    const mockError = jest.spyOn(console, 'error').mockImplementation(() => jest.fn());
+    expect(() => {
+      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList, {
+        showDividers: true,
+        role: "listbox",
+        "aria-label": "Select a project"
+      }, /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Item, {
+        role: "option",
+        selected: true
+      }, "Primer React")));
+    }).toThrow('For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined');
+    (0, _react.cleanup)();
+    mockError.mockRestore();
+  });
+  it('should not crash when clicking an item without an onSelect', async () => {
+    const component = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList, {
+      role: "listbox"
+    }, /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Item, {
+      role: "option"
+    }, "Primer React")));
+    const option = await (0, _react.waitFor)(() => component.getByRole('option'));
+    expect(option).toBeInTheDocument();
+
+    _react.fireEvent.click(option);
+
+    _react.fireEvent.keyPress(option, {
+      key: 'Enter',
+      charCode: 13
+    });
+
+    expect(option).toBeInTheDocument();
+    (0, _react.cleanup)();
+  });
+  (0, _testing.checkStoriesForAxeViolations)('ActionList2');
+});

package/lib/__tests__/ActionMenu.test.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';