@primer/components 31.2.0-rc.58429c9f → 31.2.0-rc.76ed571d

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

@@ -1,27 +1,21 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.canMergeTwoTypes = canMergeTwoTypes;
-exports.overridesAsExpected = overridesAsExpected;
-exports.optionalityIsPreservedInFirstParameter = optionalityIsPreservedInFirstParameter;
-exports.optionalityIsPreservedInSecondParameter = optionalityIsPreservedInSecondParameter;
-
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.optionalityIsPreservedInSecondParameter = exports.optionalityIsPreservedInFirstParameter = exports.overridesAsExpected = exports.canMergeTwoTypes = void 0;
 function canMergeTwoTypes(x) {
-  return x;
+    return x;
 }
-
+exports.canMergeTwoTypes = canMergeTwoTypes;
 function overridesAsExpected(x) {
-  return x;
+    return x;
 }
-
+exports.overridesAsExpected = overridesAsExpected;
 function optionalityIsPreservedInFirstParameter(x) {
-  // @ts-expect-error: d is optional
-  return x;
+    // @ts-expect-error: d is optional
+    return x;
 }
-
+exports.optionalityIsPreservedInFirstParameter = optionalityIsPreservedInFirstParameter;
 function optionalityIsPreservedInSecondParameter(x) {
-  // @ts-expect-error: d is optional
-  return x;
-}
+    // @ts-expect-error: d is optional
+    return x;
+}
+exports.optionalityIsPreservedInSecondParameter = optionalityIsPreservedInSecondParameter;

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

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

package/lib/__tests__/NewButton.test.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _NewButton = require("../NewButton");
+
+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); // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+function noop() {}
+
+describe('Button', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _NewButton.NewButton
+  });
+  it('renders a <button>', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_NewButton.NewButton, null, "Default")).type).toEqual('button');
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_NewButton.NewButton, null, "Click here"));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('preserves "onClick" prop', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_NewButton.NewButton, {
+      onClick: noop
+    }, "Noop")).props.onClick).toEqual(noop);
+  });
+  it('respects width props', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_NewButton.NewButton, {
+      sx: {
+        width: 200
+      }
+    }, "Block"))).toHaveStyleRule('width', '200px');
+  });
+  it('respects the "disabled" prop', () => {
+    const item = (0, _testing.render)( /*#__PURE__*/_react.default.createElement(_NewButton.NewButton, {
+      disabled: true
+    }, " Disabled"));
+    expect(item.props.disabled).toEqual(true);
+    expect(item).toMatchSnapshot();
+  });
+  it('respects the "variant" prop', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_NewButton.NewButton, {
+      size: "small"
+    }, "Smol"))).toHaveStyleRule('font-size', '12px');
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_NewButton.NewButton, {
+      size: "large"
+    }, "Large"))).toHaveStyleRule('font-size', '16px');
+  });
+  it('respects the "fontSize" prop over the "variant" prop', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_NewButton.NewButton, {
+      size: "small",
+      sx: {
+        fontSize: 20
+      }
+    }, "Big Smol"))).toHaveStyleRule('font-size', '20px');
+  });
+  it('styles primary button appropriately', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_NewButton.NewButton, {
+      variant: "primary"
+    }, "Primary"))).toHaveStyleRule('background-color', '#2da44e');
+  });
+  it('styles invisible button appropriately', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_NewButton.NewButton, {
+      variant: "invisible"
+    }, "Invisible"))).toHaveStyleRule('background-color', 'transparent');
+  });
+  it('styles danger button appropriately', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_NewButton.NewButton, {
+      variant: "danger"
+    }, "Danger"))).toHaveStyleRule('background-color', '#f6f8fa');
+  });
+});

package/lib/__tests__/NewButton.test.jsx

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const NewButton_1 = require("../NewButton");
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+function noop() { }
+describe('Button', () => {
+    testing_1.behavesAsComponent({ Component: NewButton_1.NewButton });
+    it('renders a <button>', () => {
+        expect(testing_1.render(<NewButton_1.NewButton>Default</NewButton_1.NewButton>).type).toEqual('button');
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<NewButton_1.NewButton>Click here</NewButton_1.NewButton>);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('preserves "onClick" prop', () => {
+        expect(testing_1.render(<NewButton_1.NewButton onClick={noop}>Noop</NewButton_1.NewButton>).props.onClick).toEqual(noop);
+    });
+    it('respects width props', () => {
+        expect(testing_1.render(<NewButton_1.NewButton sx={{ width: 200 }}>Block</NewButton_1.NewButton>)).toHaveStyleRule('width', '200px');
+    });
+    it('respects the "disabled" prop', () => {
+        const item = testing_1.render(<NewButton_1.NewButton disabled> Disabled</NewButton_1.NewButton>);
+        expect(item.props.disabled).toEqual(true);
+        expect(item).toMatchSnapshot();
+    });
+    it('respects the "variant" prop', () => {
+        expect(testing_1.render(<NewButton_1.NewButton size="small">Smol</NewButton_1.NewButton>)).toHaveStyleRule('font-size', '12px');
+        expect(testing_1.render(<NewButton_1.NewButton size="large">Large</NewButton_1.NewButton>)).toHaveStyleRule('font-size', '16px');
+    });
+    it('respects the "fontSize" prop over the "variant" prop', () => {
+        expect(testing_1.render(<NewButton_1.NewButton size="small" sx={{ fontSize: 20 }}>
+          Big Smol
+        </NewButton_1.NewButton>)).toHaveStyleRule('font-size', '20px');
+    });
+    it('styles primary button appropriately', () => {
+        expect(testing_1.render(<NewButton_1.NewButton variant="primary">Primary</NewButton_1.NewButton>)).toHaveStyleRule('background-color', '#2da44e');
+    });
+    it('styles invisible button appropriately', () => {
+        expect(testing_1.render(<NewButton_1.NewButton variant="invisible">Invisible</NewButton_1.NewButton>)).toHaveStyleRule('background-color', 'transparent');
+    });
+    it('styles danger button appropriately', () => {
+        expect(testing_1.render(<NewButton_1.NewButton variant="danger">Danger</NewButton_1.NewButton>)).toHaveStyleRule('background-color', '#f6f8fa');
+    });
+});

package/lib/__tests__/Overlay.test.jsx

@@ -0,0 +1,105 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const __1 = require("..");
+const react_2 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const jest_axe_1 = require("jest-axe");
+const theme_1 = __importDefault(require("../theme"));
+const BaseStyles_1 = __importDefault(require("../BaseStyles"));
+const ThemeProvider_1 = require("../ThemeProvider");
+expect.extend(jest_axe_1.toHaveNoViolations);
+const TestComponent = ({ initialFocus, callback }) => {
+    const [isOpen, setIsOpen] = react_1.useState(false);
+    const buttonRef = react_1.useRef(null);
+    const confirmButtonRef = react_1.useRef(null);
+    const anchorRef = react_1.useRef(null);
+    const closeOverlay = () => {
+        setIsOpen(false);
+        if (callback) {
+            callback();
+        }
+    };
+    return (<ThemeProvider_1.ThemeProvider theme={theme_1.default}>
+      <BaseStyles_1.default>
+        <__1.Box position="absolute" top={0} left={0} bottom={0} right={0} ref={anchorRef}>
+          <__1.Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
+            open overlay
+          </__1.Button>
+          <__1.Button>outside</__1.Button>
+          {isOpen ? (<__1.Overlay initialFocusRef={initialFocus === 'button' ? confirmButtonRef : undefined} returnFocusRef={buttonRef} ignoreClickRefs={[buttonRef]} onEscape={closeOverlay} onClickOutside={closeOverlay} width="small">
+              <__1.Box display="flex" flexDirection="column" p={2}>
+                <__1.Text>Are you sure?</__1.Text>
+                <__1.ButtonDanger onClick={closeOverlay}>Cancel</__1.ButtonDanger>
+                <__1.Button onClick={closeOverlay} ref={confirmButtonRef}>
+                  Confirm
+                </__1.Button>
+              </__1.Box>
+            </__1.Overlay>) : null}
+        </__1.Box>
+      </BaseStyles_1.default>
+    </ThemeProvider_1.ThemeProvider>);
+};
+describe('Overlay', () => {
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<TestComponent />);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('should focus element passed into function', async () => {
+        const { getByText } = react_2.render(<TestComponent initialFocus="button"/>);
+        user_event_1.default.click(getByText('open overlay'));
+        await react_2.waitFor(() => getByText('Confirm'));
+        const confirmButton = getByText('Confirm');
+        expect(document.activeElement).toEqual(confirmButton);
+    });
+    it('should focus first element when nothing is passed', async () => {
+        const { getByText } = react_2.render(<TestComponent />);
+        user_event_1.default.click(getByText('open overlay'));
+        await react_2.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 } = react_2.render(<TestComponent callback={mockFunction}/>);
+        react_2.act(() => user_event_1.default.click(getByText('open overlay')));
+        react_2.act(() => user_event_1.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 } = react_2.render(<TestComponent callback={mockFunction}/>);
+        react_2.act(() => user_event_1.default.click(getByText('open overlay')));
+        const domNode = getByText('Are you sure?');
+        react_2.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__/Pagehead.test.jsx

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const theme_1 = __importDefault(require("../theme"));
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+describe('Pagehead', () => {
+    testing_1.behavesAsComponent({ Component: __1.Pagehead });
+    testing_1.checkExports('Pagehead', {
+        default: __1.Pagehead
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.Pagehead theme={theme_1.default}>Pagehead</__1.Pagehead>);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+});

package/lib/__tests__/Pagination/Pagination.test.jsx

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Pagination_1 = __importDefault(require("../../Pagination"));
+const testing_1 = require("../../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+const reqProps = { pageCount: 10, currentPage: 1 };
+const comp = <Pagination_1.default {...reqProps}/>;
+describe('Pagination', () => {
+    testing_1.behavesAsComponent({ Component: Pagination_1.default, toRender: () => comp });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(comp);
+        const results = await jest_axe_1.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();
+        react_2.cleanup();
+    });
+});

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

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("babel-polyfill");
+const model_1 = 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 = model_1.buildPaginationModel(10, 1, true, 1, 2);
+        expect(first(model1).type).toEqual('PREV');
+        expect(first(model1).disabled).toBe(true);
+        const model2 = model_1.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 = model_1.buildPaginationModel(10, 10, true, 1, 2);
+        expect(last(model1).type).toEqual('NEXT');
+        expect(last(model1).disabled).toBe(true);
+        const model2 = model_1.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 = model_1.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 = model_1.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 = model_1.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 = model_1.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 = model_1.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 = model_1.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 = model_1.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__/PointerBox.test.jsx

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+describe('PointerBox', () => {
+    testing_1.behavesAsComponent({ Component: __1.PointerBox });
+    testing_1.checkExports('PointerBox', {
+        default: __1.PointerBox
+    });
+    it('renders a <Caret> in <BorderBox> with relative positioning', () => {
+        expect(testing_1.render(<__1.PointerBox />)).toMatchSnapshot();
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.PointerBox />);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('passes the "borderColor" prop to both <BorderBox> and <Caret>', () => {
+        expect(testing_1.render(<__1.PointerBox borderColor="danger.emphasis"/>)).toMatchSnapshot();
+    });
+    it('passes the "bg" prop to both <BorderBox> and <Caret>', () => {
+        expect(testing_1.render(<__1.PointerBox bg="danger.subtle"/>)).toMatchSnapshot();
+    });
+});

package/lib/__tests__/Popover.test.jsx

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Popover_1 = __importDefault(require("../Popover"));
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+const comp = (<Popover_1.default caret="top" open>
+    <Popover_1.default.Content>Hello!</Popover_1.default.Content>
+  </Popover_1.default>);
+describe('Popover', () => {
+    testing_1.behavesAsComponent({ Component: Popover_1.default, toRender: () => comp });
+    testing_1.checkExports('Popover', {
+        default: Popover_1.default
+    });
+    describe('Popover.Content', () => {
+        testing_1.behavesAsComponent({ Component: Popover_1.default.Content, toRender: () => comp });
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<Popover_1.default caret="top" open>
+        <Popover_1.default.Content>Hello!</Popover_1.default.Content>
+      </Popover_1.default>);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    const CARET_POSITIONS = [
+        'top',
+        'bottom',
+        'left',
+        'right',
+        'bottom-left',
+        'bottom-right',
+        'top-left',
+        'top-right',
+        'left-bottom',
+        'left-top',
+        'right-bottom',
+        'right-top'
+    ];
+    for (const pos of CARET_POSITIONS) {
+        it(`renders correctly for a caret position of ${pos}`, () => {
+            const element = (<Popover_1.default caret={pos} open>
+          <Popover_1.default.Content>Hello!</Popover_1.default.Content>
+        </Popover_1.default>);
+            expect(testing_1.render(element)).toMatchSnapshot();
+        });
+    }
+    it('renders both elements as a <div>', () => {
+        expect(testing_1.render(<Popover_1.default />).type).toEqual('div');
+        expect(testing_1.render(<Popover_1.default.Content />).type).toEqual('div');
+    });
+});

package/lib/__tests__/Portal.test.jsx

@@ -0,0 +1,102 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const index_1 = __importStar(require("../Portal/index"));
+const react_1 = require("@testing-library/react");
+const react_2 = __importDefault(require("react"));
+const BaseStyles_1 = __importDefault(require("../BaseStyles"));
+describe('Portal', () => {
+    it('renders a default portal into document.body (no BaseStyles present)', () => {
+        const { baseElement } = react_1.render(<index_1.default>123test123</index_1.default>);
+        const generatedRoot = baseElement.querySelector('#__primerPortalRoot__');
+        expect(generatedRoot).toBeInstanceOf(HTMLElement);
+        expect(generatedRoot?.textContent?.trim()).toEqual('123test123');
+        baseElement.innerHTML = '';
+    });
+    it('renders a default portal into nearest BaseStyles element', () => {
+        const toRender = (<div id="renderedRoot">
+        <BaseStyles_1.default>
+          <div id="baseStylesRoot">
+            <index_1.default>123test123</index_1.default>
+          </div>
+        </BaseStyles_1.default>
+      </div>);
+        const { baseElement } = react_1.render(toRender);
+        const baseStylesRoot = baseElement.querySelector('#baseStylesRoot');
+        const baseStylesElement = baseStylesRoot?.parentElement;
+        const generatedRoot = baseStylesElement?.querySelector('#__primerPortalRoot__');
+        expect(baseStylesRoot).toBeInstanceOf(HTMLElement);
+        expect(baseStylesElement).toBeInstanceOf(HTMLElement);
+        expect(generatedRoot).toBeInstanceOf(HTMLElement);
+        expect(generatedRoot?.textContent?.trim()).toEqual('123test123');
+        baseElement.innerHTML = '';
+    });
+    it('renders into the custom portal root (default root name - declarative)', () => {
+        const toRender = (<div id="renderedRoot">
+        <div id="__primerPortalRoot__"></div>
+        <index_1.default>123test123</index_1.default>
+      </div>);
+        const { baseElement } = react_1.render(toRender);
+        const renderedRoot = baseElement.querySelector('#renderedRoot');
+        const portalRoot = renderedRoot?.querySelector('#__primerPortalRoot__');
+        expect(portalRoot).toBeInstanceOf(HTMLElement);
+        expect(portalRoot?.textContent?.trim()).toEqual('123test123');
+        baseElement.innerHTML = '';
+    });
+    it('renders into the custom portal root (default root name - imperative)', () => {
+        const portalRootJSX = <div id="myPortalRoot"></div>;
+        let { baseElement } = react_1.render(portalRootJSX);
+        const portalRoot = baseElement.querySelector('#myPortalRoot');
+        expect(portalRoot).toBeInstanceOf(HTMLElement);
+        index_1.registerPortalRoot(baseElement.querySelector('#myPortalRoot'));
+        const toRender = <index_1.default>123test123</index_1.default>;
+        ({ baseElement } = react_1.render(toRender));
+        expect(portalRoot?.textContent?.trim()).toEqual('123test123');
+        baseElement.innerHTML = '';
+    });
+    it('renders into multiple custom portal roots (named)', () => {
+        const portalRootJSX = (<main>
+        <div id="myPortalRoot1"></div>
+        <div id="myPortalRoot2"></div>
+      </main>);
+        let { baseElement } = react_1.render(portalRootJSX);
+        const fancyPortalRoot1 = baseElement.querySelector('#myPortalRoot1');
+        const fancyPortalRoot2 = baseElement.querySelector('#myPortalRoot2');
+        expect(fancyPortalRoot1).toBeInstanceOf(HTMLElement);
+        expect(fancyPortalRoot2).toBeInstanceOf(HTMLElement);
+        index_1.registerPortalRoot(baseElement.querySelector('#myPortalRoot1'), 'fancyPortal1');
+        index_1.registerPortalRoot(baseElement.querySelector('#myPortalRoot2'), 'fancyPortal2');
+        const toRender = (<>
+        <index_1.default>123test123</index_1.default>
+        <index_1.default containerName="fancyPortal1">456test456</index_1.default>
+        <index_1.default containerName="fancyPortal2">789test789</index_1.default>
+      </>);
+        ({ baseElement } = react_1.render(toRender));
+        const generatedRoot = baseElement.querySelector('#__primerPortalRoot__');
+        expect(generatedRoot?.textContent?.trim()).toEqual('123test123');
+        expect(fancyPortalRoot1?.textContent?.trim()).toEqual('456test456');
+        expect(fancyPortalRoot2?.textContent?.trim()).toEqual('789test789');
+        baseElement.innerHTML = '';
+    });
+});