@primer/components 33.0.0-rc.cface7dc → 33.1.0

package/lib/__tests__/Overlay.test.js

@@ -1,145 +0,0 @@
-"use strict";
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _ = require("..");
-
-var _react2 = require("@testing-library/react");
-
-var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-
-var _jestAxe = require("jest-axe");
-
-var _theme = _interopRequireDefault(require("../theme"));
-
-var _BaseStyles = _interopRequireDefault(require("../BaseStyles"));
-
-var _ThemeProvider = require("../ThemeProvider");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-expect.extend(_jestAxe.toHaveNoViolations);
-
-const TestComponent = ({
-  initialFocus,
-  callback
-}) => {
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  const buttonRef = (0, _react.useRef)(null);
-  const confirmButtonRef = (0, _react.useRef)(null);
-  const anchorRef = (0, _react.useRef)(null);
-
-  const closeOverlay = () => {
-    setIsOpen(false);
-
-    if (callback) {
-      callback();
-    }
-  };
-
-  return /*#__PURE__*/_react.default.createElement(_ThemeProvider.ThemeProvider, {
-    theme: _theme.default
-  }, /*#__PURE__*/_react.default.createElement(_BaseStyles.default, null, /*#__PURE__*/_react.default.createElement(_.Box, {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
-    ref: anchorRef
-  }, /*#__PURE__*/_react.default.createElement(_.Button, {
-    ref: buttonRef,
-    onClick: () => setIsOpen(!isOpen)
-  }, "open overlay"), /*#__PURE__*/_react.default.createElement(_.Button, null, "outside"), isOpen ? /*#__PURE__*/_react.default.createElement(_.Overlay, {
-    initialFocusRef: initialFocus === 'button' ? confirmButtonRef : undefined,
-    returnFocusRef: buttonRef,
-    ignoreClickRefs: [buttonRef],
-    onEscape: closeOverlay,
-    onClickOutside: closeOverlay,
-    width: "small"
-  }, /*#__PURE__*/_react.default.createElement(_.Box, {
-    display: "flex",
-    flexDirection: "column",
-    p: 2
-  }, /*#__PURE__*/_react.default.createElement(_.Text, null, "Are you sure?"), /*#__PURE__*/_react.default.createElement(_.ButtonDanger, {
-    onClick: closeOverlay
-  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_.Button, {
-    onClick: closeOverlay,
-    ref: confirmButtonRef
-  }, "Confirm"))) : null)));
-};
-
-TestComponent.displayName = "TestComponent";
-describe('Overlay', () => {
-  it('should have no axe violations', async () => {
-    const {
-      container
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(TestComponent, null));
-    const results = await (0, _jestAxe.axe)(container);
-    expect(results).toHaveNoViolations();
-    (0, _react2.cleanup)();
-  });
-  it('should focus element passed into function', async () => {
-    const {
-      getByText
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(TestComponent, {
-      initialFocus: "button"
-    }));
-
-    _userEvent.default.click(getByText('open overlay'));
-
-    await (0, _react2.waitFor)(() => getByText('Confirm'));
-    const confirmButton = getByText('Confirm');
-    expect(document.activeElement).toEqual(confirmButton);
-  });
-  it('should focus first element when nothing is passed', async () => {
-    const {
-      getByText
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(TestComponent, null));
-
-    _userEvent.default.click(getByText('open overlay'));
-
-    await (0, _react2.waitFor)(() => getByText('Cancel'));
-    const cancelButton = getByText('Cancel');
-    expect(document.activeElement).toEqual(cancelButton);
-  });
-  it('should call function when user clicks outside container', () => {
-    const mockFunction = jest.fn();
-    const {
-      getByText,
-      queryAllByText
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(TestComponent, {
-      callback: mockFunction
-    }));
-    (0, _react2.act)(() => _userEvent.default.click(getByText('open overlay')));
-    (0, _react2.act)(() => _userEvent.default.click(getByText('outside')));
-    expect(mockFunction).toHaveBeenCalledTimes(1);
-    const cancelButtons = queryAllByText('Cancel');
-    expect(cancelButtons).toHaveLength(0);
-  });
-  it('should call function when user presses escape', () => {
-    const mockFunction = jest.fn();
-    const {
-      getByText,
-      queryAllByText
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(TestComponent, {
-      callback: mockFunction
-    }));
-    (0, _react2.act)(() => _userEvent.default.click(getByText('open overlay')));
-    const domNode = getByText('Are you sure?');
-
-    _react2.fireEvent.keyDown(domNode, {
-      key: 'Escape',
-      code: 'Escape',
-      keyCode: 27,
-      charCode: 27
-    });
-
-    expect(mockFunction).toHaveBeenCalledTimes(1);
-    const cancelButtons = queryAllByText('Cancel');
-    expect(cancelButtons).toHaveLength(0);
-  });
-});

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

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare function shouldAcceptCallWithNoProps(ref: React.RefObject<HTMLElement>): JSX.Element;
-export declare function shouldAcceptCallWithDOMProps(ref: React.RefObject<HTMLElement>): JSX.Element;
-export declare function shouldNotAcceptCallWithDOMPropsThatDontMatchElement(ref: React.RefObject<HTMLElement>): JSX.Element;
-export declare function shouldAcceptCallWithAsAndDOMProps(ref: React.RefObject<HTMLElement>): JSX.Element;
-export declare function shouldNotAcceptSystemProps(ref: React.RefObject<HTMLElement>): JSX.Element;

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

@@ -1,73 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.shouldAcceptCallWithNoProps = shouldAcceptCallWithNoProps;
-exports.shouldAcceptCallWithDOMProps = shouldAcceptCallWithDOMProps;
-exports.shouldNotAcceptCallWithDOMPropsThatDontMatchElement = shouldNotAcceptCallWithDOMPropsThatDontMatchElement;
-exports.shouldAcceptCallWithAsAndDOMProps = shouldAcceptCallWithAsAndDOMProps;
-exports.shouldNotAcceptSystemProps = shouldNotAcceptSystemProps;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Overlay = _interopRequireDefault(require("../Overlay"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function shouldAcceptCallWithNoProps(ref) {
-  return /*#__PURE__*/_react.default.createElement(_Overlay.default, {
-    returnFocusRef: ref,
-    onClickOutside: () => null,
-    onEscape: () => null
-  });
-}
-
-shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
-
-function shouldAcceptCallWithDOMProps(ref) {
-  return /*#__PURE__*/_react.default.createElement(_Overlay.default, {
-    returnFocusRef: ref,
-    onClickOutside: () => null,
-    onEscape: () => null,
-    onMouseDown: () => null
-  });
-}
-
-shouldAcceptCallWithDOMProps.displayName = "shouldAcceptCallWithDOMProps";
-
-function shouldNotAcceptCallWithDOMPropsThatDontMatchElement(ref) {
-  // @ts-expect-error href should not be allowed on a <div>
-  return /*#__PURE__*/_react.default.createElement(_Overlay.default, {
-    returnFocusRef: ref,
-    onClickOutside: () => null,
-    onEscape: () => null,
-    href: "//primer.style/"
-  });
-}
-
-shouldNotAcceptCallWithDOMPropsThatDontMatchElement.displayName = "shouldNotAcceptCallWithDOMPropsThatDontMatchElement";
-
-function shouldAcceptCallWithAsAndDOMProps(ref) {
-  return /*#__PURE__*/_react.default.createElement(_Overlay.default, {
-    as: "a",
-    returnFocusRef: ref,
-    onClickOutside: () => null,
-    onEscape: () => null,
-    href: "//primer.style/"
-  });
-}
-
-shouldAcceptCallWithAsAndDOMProps.displayName = "shouldAcceptCallWithAsAndDOMProps";
-
-function shouldNotAcceptSystemProps(ref) {
-  return /*#__PURE__*/_react.default.createElement(_Overlay.default, {
-    returnFocusRef: ref,
-    onClickOutside: () => null,
-    onEscape: () => null // @ts-expect-error system props should not be accepted
-    ,
-    backgroundColor: "olivedrab"
-  });
-}
-
-shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";

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

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

package/lib/__tests__/Pagehead.test.js

@@ -1,37 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ = require("..");
-
-var _theme = _interopRequireDefault(require("../theme"));
-
-var _testing = require("../utils/testing");
-
-var _react2 = require("@testing-library/react");
-
-var _jestAxe = require("jest-axe");
-
-require("babel-polyfill");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-expect.extend(_jestAxe.toHaveNoViolations);
-describe('Pagehead', () => {
-  (0, _testing.behavesAsComponent)({
-    Component: _.Pagehead
-  });
-  (0, _testing.checkExports)('Pagehead', {
-    default: _.Pagehead
-  });
-  it('should have no axe violations', async () => {
-    const {
-      container
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Pagehead, {
-      theme: _theme.default
-    }, "Pagehead"));
-    const results = await (0, _jestAxe.axe)(container);
-    expect(results).toHaveNoViolations();
-    (0, _react2.cleanup)();
-  });
-});

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

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare function shouldAcceptCallWithNoProps(): JSX.Element;
-export declare function shouldNotAcceptSystemProps(): JSX.Element;

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

@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.shouldAcceptCallWithNoProps = shouldAcceptCallWithNoProps;
-exports.shouldNotAcceptSystemProps = shouldNotAcceptSystemProps;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Pagehead = _interopRequireDefault(require("../Pagehead"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function shouldAcceptCallWithNoProps() {
-  return /*#__PURE__*/_react.default.createElement(_Pagehead.default, null);
-}
-
-shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
-
-function shouldNotAcceptSystemProps() {
-  // @ts-expect-error system props should not be accepted
-  return /*#__PURE__*/_react.default.createElement(_Pagehead.default, {
-    backgroundColor: "orchid"
-  });
-}
-
-shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";

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

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

package/lib/__tests__/Pagination/Pagination.test.js

@@ -1,47 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Pagination = _interopRequireDefault(require("../../Pagination"));
-
-var _testing = require("../../utils/testing");
-
-var _react2 = require("@testing-library/react");
-
-var _jestAxe = require("jest-axe");
-
-require("babel-polyfill");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-expect.extend(_jestAxe.toHaveNoViolations);
-const reqProps = {
-  pageCount: 10,
-  currentPage: 1
-};
-
-const comp = /*#__PURE__*/_react.default.createElement(_Pagination.default, reqProps);
-
-describe('Pagination', () => {
-  (0, _testing.behavesAsComponent)({
-    Component: _Pagination.default,
-    toRender: () => comp
-  });
-  it('should have no axe violations', async () => {
-    const {
-      container
-    } = (0, _react2.render)(comp);
-    const results = await (0, _jestAxe.axe)(container, {
-      rules: {
-        // The skip-link rule has to do with entire documents
-        // and is not relevant to this component.
-        // See https://dequeuniversity.com/rules/axe/3.3/skip-link?application=axeAPI
-        'skip-link': {
-          enabled: false
-        }
-      }
-    });
-    expect(results).toHaveNoViolations();
-    (0, _react2.cleanup)();
-  });
-});

package/lib/__tests__/Pagination/PaginationModel.test.d.ts

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

package/lib/__tests__/Pagination/PaginationModel.test.js

@@ -1,186 +0,0 @@
-"use strict";
-
-require("babel-polyfill");
-
-var _model = require("../../Pagination/model");
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function first(array, count = 1) {
-  const slice = array.slice(0, count);
-  return count === 1 ? slice[0] : slice;
-} // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-
-function last(array, count = 1) {
-  const len = array.length;
-  const slice = array.slice(len - count, len);
-  return count === 1 ? slice[0] : slice;
-}
-
-describe('Pagination model', () => {
-  it('sets disabled on prev links', () => {
-    const model1 = (0, _model.buildPaginationModel)(10, 1, true, 1, 2);
-    expect(first(model1).type).toEqual('PREV');
-    expect(first(model1).disabled).toBe(true);
-    const model2 = (0, _model.buildPaginationModel)(10, 2, true, 1, 2);
-    expect(first(model2).type).toEqual('PREV');
-    expect(first(model2).disabled).toBe(false);
-  });
-  it('sets disabled on next links', () => {
-    const model1 = (0, _model.buildPaginationModel)(10, 10, true, 1, 2);
-    expect(last(model1).type).toEqual('NEXT');
-    expect(last(model1).disabled).toBe(true);
-    const model2 = (0, _model.buildPaginationModel)(10, 9, true, 1, 2);
-    expect(last(model2).type).toEqual('NEXT');
-    expect(last(model2).disabled).toBe(false);
-  });
-  it('sets the page number for prev and next links', () => {
-    const model = (0, _model.buildPaginationModel)(10, 5, true, 1, 2);
-    expect(first(model).num).toEqual(4);
-    expect(last(model).num).toEqual(6);
-  });
-  it('ensures margin pages on the left', () => {
-    const model = (0, _model.buildPaginationModel)(10, 10, true, 2, 0);
-    const slice = first(model, 5);
-    const expected = [{
-      type: 'PREV',
-      num: 9
-    }, {
-      type: 'NUM',
-      num: 1
-    }, {
-      type: 'NUM',
-      num: 2
-    }, {
-      type: 'BREAK'
-    }, {
-      type: 'NUM'
-    }];
-    expect(slice).toMatchObject(expected);
-  });
-  it('ensures margin pages on the right', () => {
-    const model = (0, _model.buildPaginationModel)(10, 1, true, 2, 0);
-    const slice = last(model, 5);
-    const expected = [{
-      type: 'NUM'
-    }, {
-      type: 'BREAK'
-    }, {
-      type: 'NUM',
-      num: 9
-    }, {
-      type: 'NUM',
-      num: 10
-    }, {
-      type: 'NEXT',
-      num: 2
-    }];
-    expect(slice).toMatchObject(expected);
-  });
-  it('ensures that the current page is surrounded by the right number of pages', () => {
-    const model = (0, _model.buildPaginationModel)(10, 5, true, 1, 1);
-    const expected = [{
-      type: 'PREV',
-      num: 4
-    }, {
-      type: 'NUM',
-      num: 1
-    }, {
-      type: 'BREAK'
-    }, {
-      type: 'NUM',
-      num: 4
-    }, {
-      type: 'NUM',
-      num: 5,
-      selected: true
-    }, {
-      type: 'NUM',
-      num: 6
-    }, {
-      type: 'BREAK'
-    }, {
-      type: 'NUM',
-      num: 10
-    }, {
-      type: 'NEXT',
-      num: 6
-    }];
-    expect(model).toMatchObject(expected);
-  });
-  it('adds items to the right if it hits bounds to the left', () => {
-    const model = (0, _model.buildPaginationModel)(15, 2, true, 1, 1);
-    const expected = [{
-      type: 'PREV',
-      num: 1
-    }, {
-      type: 'NUM',
-      num: 1
-    }, {
-      type: 'NUM',
-      num: 2,
-      selected: true
-    }, {
-      type: 'NUM',
-      num: 3
-    }, // normally with a surround of 1, only 1 and 3 would be shown
-    // however, since 1 was already shown, we extend to 4
-    {
-      type: 'NUM',
-      num: 4
-    }, {
-      type: 'BREAK'
-    }];
-    expect(first(model, 6)).toMatchObject(expected);
-  });
-  it('adds items to the left if it hits bounds to the right', () => {
-    const model = (0, _model.buildPaginationModel)(15, 14, true, 1, 1);
-    const expected = [// normally with a surround of 1, only 13 and 15 would be shown
-    // however, since 15 was already shown, we extend to 12
-    {
-      type: 'BREAK'
-    }, {
-      type: 'NUM',
-      num: 12
-    }, {
-      type: 'NUM',
-      num: 13
-    }, {
-      type: 'NUM',
-      num: 14,
-      selected: true
-    }, {
-      type: 'NUM',
-      num: 15
-    }, {
-      type: 'NEXT',
-      num: 15
-    }];
-    expect(last(model, 6)).toMatchObject(expected);
-  });
-  it('correctly creates breaks next to the next/prev links when margin is 0', () => {
-    const model = (0, _model.buildPaginationModel)(10, 5, true, 0, 1);
-    const expected = [{
-      type: 'PREV'
-    }, {
-      type: 'BREAK',
-      num: 1
-    }, {
-      type: 'NUM',
-      num: 4
-    }, {
-      type: 'NUM',
-      num: 5,
-      selected: true
-    }, {
-      type: 'NUM',
-      num: 6
-    }, {
-      type: 'BREAK',
-      num: 10
-    }, {
-      type: 'NEXT'
-    }];
-    expect(model).toMatchObject(expected);
-  });
-});

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

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare function shouldAcceptCallWithNoProps(): JSX.Element;
-export declare function shouldNotAcceptSystemProps(): JSX.Element;

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

@@ -1,33 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.shouldAcceptCallWithNoProps = shouldAcceptCallWithNoProps;
-exports.shouldNotAcceptSystemProps = shouldNotAcceptSystemProps;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Pagination = _interopRequireDefault(require("../Pagination"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function shouldAcceptCallWithNoProps() {
-  return /*#__PURE__*/_react.default.createElement(_Pagination.default, {
-    currentPage: 1,
-    pageCount: 2
-  });
-}
-
-shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
-
-function shouldNotAcceptSystemProps() {
-  // @ts-expect-error system props should not be accepted
-  return /*#__PURE__*/_react.default.createElement(_Pagination.default, {
-    currentPage: 1,
-    pageCount: 2,
-    backgroundColor: "palegoldenrod"
-  });
-}
-
-shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";

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

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

package/lib/__tests__/PointerBox.test.js

@@ -1,46 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ = require("..");
-
-var _testing = require("../utils/testing");
-
-var _react2 = require("@testing-library/react");
-
-var _jestAxe = require("jest-axe");
-
-require("babel-polyfill");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-expect.extend(_jestAxe.toHaveNoViolations);
-describe('PointerBox', () => {
-  (0, _testing.behavesAsComponent)({
-    Component: _.PointerBox
-  });
-  (0, _testing.checkExports)('PointerBox', {
-    default: _.PointerBox
-  });
-  it('renders a <Caret> in <BorderBox> with relative positioning', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.PointerBox, null))).toMatchSnapshot();
-  });
-  it('should have no axe violations', async () => {
-    const {
-      container
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.PointerBox, null));
-    const results = await (0, _jestAxe.axe)(container);
-    expect(results).toHaveNoViolations();
-    (0, _react2.cleanup)();
-  });
-  it('passes the "borderColor" prop to both <BorderBox> and <Caret>', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.PointerBox, {
-      borderColor: "danger.emphasis"
-    }))).toMatchSnapshot();
-  });
-  it('passes the "bg" prop to both <BorderBox> and <Caret>', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.PointerBox, {
-      bg: "danger.subtle"
-    }))).toMatchSnapshot();
-  });
-});

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

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