@primer/components 32.0.0 → 32.0.2-rc.859381a1

package/lib/Pagination/index.js

@@ -1,7 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const Pagination_1 = __importDefault(require("./Pagination"));
-exports.default = Pagination_1.default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Pagination = _interopRequireDefault(require("./Pagination"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _Pagination.default;
+exports.default = _default;

package/lib/Portal/index.js

@@ -1,6 +1,17 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.registerPortalRoot = void 0;
-const Portal_1 = require("./Portal");
-Object.defineProperty(exports, "registerPortalRoot", { enumerable: true, get: function () { return Portal_1.registerPortalRoot; } });
-exports.default = Portal_1.Portal;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "registerPortalRoot", {
+  enumerable: true,
+  get: function () {
+    return _Portal.registerPortalRoot;
+  }
+});
+exports.default = void 0;
+
+var _Portal = require("./Portal");
+
+var _default = _Portal.Portal;
+exports.default = _default;

package/lib/SelectMenu/hooks/useKeyboardNav.js

@@ -1,85 +1,101 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
 // adapted from details-menu web component https://github.com/github/details-menu-element
 function useKeyboardNav(details, open, setOpen) {
-    const handleKeyDown = react_1.useCallback(event => {
-        const closeDetails = () => {
-            setOpen(false);
-            const summary = details.current.querySelector('summary');
-            if (summary)
-                summary.focus();
-        };
-        const openDetails = () => {
-            setOpen(true);
-        };
-        const focusItem = next => {
-            const options = Array.from(details.current.querySelectorAll('[role^="menuitem"]:not([hidden]):not([disabled]):not([aria-disabled="true"])'));
-            const selected = document.activeElement;
-            const index = options.indexOf(selected);
-            const found = next ? options[index + 1] : options[index - 1];
-            const def = next ? options[0] : options[options.length - 1];
-            return found || def;
-        };
-        const isMenuItem = el => {
-            const role = el.getAttribute('role');
-            return role === 'menuitem' || role === 'menuitemcheckbox' || role === 'menuitemradio';
-        };
-        if (!(event instanceof KeyboardEvent))
-            return;
-        const isSummaryFocused = event.target instanceof Element && event.target.tagName === 'SUMMARY';
-        switch (event.key) {
-            case 'Escape':
-                if (open) {
-                    closeDetails(details);
-                    event.preventDefault();
-                    event.stopPropagation();
-                }
-                break;
-            case 'ArrowDown':
-                {
-                    if (isSummaryFocused && !open) {
-                        openDetails(details);
-                    }
-                    const target = focusItem(true);
-                    if (target)
-                        target.focus();
-                    event.preventDefault();
-                }
-                break;
-            case 'ArrowUp':
-                {
-                    if (isSummaryFocused && !open) {
-                        openDetails();
-                    }
-                    const target = focusItem(false);
-                    if (target)
-                        target.focus();
-                    event.preventDefault();
-                }
-                break;
-            case ' ':
-            case 'Enter':
-                {
-                    const selected = document.activeElement;
-                    if (selected && isMenuItem(selected) && selected.closest('details') === details) {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        selected.click();
-                    }
-                }
-                break;
-            default:
+  const handleKeyDown = (0, _react.useCallback)(event => {
+    const closeDetails = () => {
+      setOpen(false);
+      const summary = details.current.querySelector('summary');
+      if (summary) summary.focus();
+    };
+
+    const openDetails = () => {
+      setOpen(true);
+    };
+
+    const focusItem = next => {
+      const options = Array.from(details.current.querySelectorAll('[role^="menuitem"]:not([hidden]):not([disabled]):not([aria-disabled="true"])'));
+      const selected = document.activeElement;
+      const index = options.indexOf(selected);
+      const found = next ? options[index + 1] : options[index - 1];
+      const def = next ? options[0] : options[options.length - 1];
+      return found || def;
+    };
+
+    const isMenuItem = el => {
+      const role = el.getAttribute('role');
+      return role === 'menuitem' || role === 'menuitemcheckbox' || role === 'menuitemradio';
+    };
+
+    if (!(event instanceof KeyboardEvent)) return;
+    const isSummaryFocused = event.target instanceof Element && event.target.tagName === 'SUMMARY';
+
+    switch (event.key) {
+      case 'Escape':
+        if (open) {
+          closeDetails(details);
+          event.preventDefault();
+          event.stopPropagation();
         }
-    }, [details, open, setOpen]);
-    react_1.useEffect(() => {
-        const current = details.current;
-        if (!current)
-            return;
-        current.addEventListener('keydown', handleKeyDown);
-        return () => {
-            current.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [details, handleKeyDown]);
+
+        break;
+
+      case 'ArrowDown':
+        {
+          if (isSummaryFocused && !open) {
+            openDetails(details);
+          }
+
+          const target = focusItem(true);
+          if (target) target.focus();
+          event.preventDefault();
+        }
+        break;
+
+      case 'ArrowUp':
+        {
+          if (isSummaryFocused && !open) {
+            openDetails();
+          }
+
+          const target = focusItem(false);
+          if (target) target.focus();
+          event.preventDefault();
+        }
+        break;
+
+      case ' ':
+      case 'Enter':
+        {
+          const selected = document.activeElement;
+
+          if (selected && isMenuItem(selected) && selected.closest('details') === details) {
+            event.preventDefault();
+            event.stopPropagation();
+            selected.click();
+          }
+        }
+        break;
+
+      default:
+    }
+  }, [details, open, setOpen]);
+  (0, _react.useEffect)(() => {
+    const current = details.current;
+    if (!current) return;
+    current.addEventListener('keydown', handleKeyDown);
+    return () => {
+      current.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [details, handleKeyDown]);
 }
-exports.default = useKeyboardNav;
+
+var _default = useKeyboardNav;
+exports.default = _default;

package/lib/SelectMenu/index.js

@@ -1,8 +1,15 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var SelectMenu_1 = require("./SelectMenu");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SelectMenu_1).default; } });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _SelectMenu.default;
+  }
+});
+
+var _SelectMenu = _interopRequireDefault(require("./SelectMenu"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/SelectPanel/index.js

@@ -1,5 +1,13 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectPanel = void 0;
-var SelectPanel_1 = require("./SelectPanel");
-Object.defineProperty(exports, "SelectPanel", { enumerable: true, get: function () { return SelectPanel_1.SelectPanel; } });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SelectPanel", {
+  enumerable: true,
+  get: function () {
+    return _SelectPanel.SelectPanel;
+  }
+});
+
+var _SelectPanel = require("./SelectPanel");

package/lib/Token/index.js

@@ -1,12 +1,31 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AvatarToken = exports.IssueLabelToken = exports.default = void 0;
-var Token_1 = require("./Token");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Token_1).default; } });
-var IssueLabelToken_1 = require("./IssueLabelToken");
-Object.defineProperty(exports, "IssueLabelToken", { enumerable: true, get: function () { return __importDefault(IssueLabelToken_1).default; } });
-var AvatarToken_1 = require("./AvatarToken");
-Object.defineProperty(exports, "AvatarToken", { enumerable: true, get: function () { return __importDefault(AvatarToken_1).default; } });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Token.default;
+  }
+});
+Object.defineProperty(exports, "IssueLabelToken", {
+  enumerable: true,
+  get: function () {
+    return _IssueLabelToken.default;
+  }
+});
+Object.defineProperty(exports, "AvatarToken", {
+  enumerable: true,
+  get: function () {
+    return _AvatarToken.default;
+  }
+});
+
+var _Token = _interopRequireDefault(require("./Token"));
+
+var _IssueLabelToken = _interopRequireDefault(require("./IssueLabelToken"));
+
+var _AvatarToken = _interopRequireDefault(require("./AvatarToken"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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 @@
+import 'babel-polyfill';

package/lib/__tests__/ActionList2.test.js

@@ -0,0 +1,53 @@
+"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("..");
+
+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";
+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)();
+  });
+});

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

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

package/lib/__tests__/ActionMenu.test.js

@@ -0,0 +1,151 @@
+"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 _ActionMenu = require("../ActionMenu");
+
+var _testing = require("../utils/testing");
+
+var _ = require("..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+const items = [{
+  text: 'New file'
+}, {
+  text: 'Copy link'
+}, {
+  text: 'Edit file'
+}, {
+  text: 'Delete file',
+  variant: 'danger'
+}];
+const mockOnActivate = jest.fn();
+
+function SimpleActionMenu() {
+  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("div", {
+    id: "something-else"
+  }, "X"), /*#__PURE__*/_react2.default.createElement(_ActionMenu.ActionMenu, {
+    onAction: mockOnActivate,
+    anchorContent: "Menu",
+    items: items
+  }), /*#__PURE__*/_react2.default.createElement("div", {
+    id: "portal-root"
+  }))));
+}
+
+SimpleActionMenu.displayName = "SimpleActionMenu";
+describe('ActionMenu', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  (0, _testing.behavesAsComponent)({
+    Component: _ActionMenu.ActionMenu,
+    options: {
+      skipAs: true,
+      skipSx: true
+    },
+    toRender: () => /*#__PURE__*/_react2.default.createElement(_.SSRProvider, null, /*#__PURE__*/_react2.default.createElement(_ActionMenu.ActionMenu, {
+      items: []
+    }))
+  });
+  (0, _testing.checkExports)('ActionMenu', {
+    default: undefined,
+    ActionMenu: _ActionMenu.ActionMenu
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionMenu, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react.cleanup)();
+  });
+  it('should trigger the overlay on trigger click', async () => {
+    var _portalRoot, _portalRoot$textConte;
+
+    const menu = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionMenu, null));
+    let portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeNull();
+    const anchor = await menu.findByText('Menu');
+    (0, _react.act)(() => {
+      _react.fireEvent.click(anchor);
+    });
+    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeTruthy();
+    const itemText = items.map(i => {
+      if (i.hasOwnProperty('text')) {
+        return i.text;
+      }
+    }).join('');
+    expect((_portalRoot = portalRoot) === null || _portalRoot === void 0 ? void 0 : (_portalRoot$textConte = _portalRoot.textContent) === null || _portalRoot$textConte === void 0 ? void 0 : _portalRoot$textConte.trim()).toEqual(itemText);
+  });
+  it('should dismiss the overlay on menuitem click', async () => {
+    var _portalRoot2;
+
+    const menu = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionMenu, null));
+    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeNull();
+    const anchor = await menu.findByText('Menu');
+    (0, _react.act)(() => {
+      _react.fireEvent.click(anchor);
+    });
+    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeTruthy();
+    const menuItem = await menu.queryByText(items[0].text);
+    (0, _react.act)(() => {
+      _react.fireEvent.click(menuItem);
+    });
+    expect((_portalRoot2 = portalRoot) === null || _portalRoot2 === void 0 ? void 0 : _portalRoot2.textContent).toEqual(''); // menu items are hidden
+  });
+  it('should dismiss the overlay on clicking outside overlay', async () => {
+    var _portalRoot3;
+
+    const menu = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionMenu, null));
+    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeNull();
+    const anchor = await menu.findByText('Menu');
+    (0, _react.act)(() => {
+      _react.fireEvent.click(anchor);
+    });
+    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeTruthy();
+    const somethingElse = await menu.baseElement.querySelector('#something-else');
+    (0, _react.act)(() => {
+      _react.fireEvent.mouseDown(somethingElse);
+    });
+    expect((_portalRoot3 = portalRoot) === null || _portalRoot3 === void 0 ? void 0 : _portalRoot3.textContent).toEqual(''); // menu items are hidden
+  });
+  it('should pass correct values to onAction on menu click', async () => {
+    var _portalRoot4;
+
+    const menu = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionMenu, null));
+    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeNull();
+    const anchor = await menu.findByText('Menu');
+    (0, _react.act)(() => {
+      _react.fireEvent.click(anchor);
+    });
+    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+    expect(portalRoot).toBeTruthy();
+    const menuItem = await ((_portalRoot4 = portalRoot) === null || _portalRoot4 === void 0 ? void 0 : _portalRoot4.querySelector("[role='menuitem']"));
+    (0, _react.act)(() => {
+      _react.fireEvent.click(menuItem);
+    }); // onAction has been called with correct argument
+
+    expect(mockOnActivate).toHaveBeenCalledTimes(1);
+    const arg = mockOnActivate.mock.calls[0][0];
+    expect(arg.text).toEqual(items[0].text);
+  });
+});