@primer/components 31.2.1-rc.f73a0f8c → 32.0.1-rc.44e3df9b

package/lib/__tests__/behaviors/focusZone.test.jsx

@@ -1,406 +0,0 @@
-"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 react_2 = require("@testing-library/react");
-const user_event_1 = __importDefault(require("@testing-library/user-event"));
-const focusZone_1 = require("../../behaviors/focusZone");
-async function nextTick() {
-    return new Promise(resolve => setTimeout(resolve, 0));
-}
-const moveDown = () => user_event_1.default.type(document.activeElement, '{arrowdown}');
-const moveUp = () => user_event_1.default.type(document.activeElement, '{arrowup}');
-// Since we use strict `isTabbable` checks within focus trap, we need to mock these
-// properties that Jest does not populate.
-beforeAll(() => {
-    try {
-        Object.defineProperties(HTMLElement.prototype, {
-            offsetHeight: {
-                get: () => 42
-            },
-            offsetWidth: {
-                get: () => 42
-            },
-            getClientRects: {
-                get: () => () => [42]
-            }
-        });
-    }
-    catch {
-        // ignore
-    }
-});
-it('Should allow arrow keys to move focus', () => {
-    const { container } = react_2.render(<div>
-      <button tabIndex={0}>Bad Apple</button>
-      <div id="focusZone">
-        <button tabIndex={0}>Apple</button>
-        <button tabIndex={0}>Banana</button>
-        <button tabIndex={0}>Cantaloupe</button>
-      </div>
-    </div>);
-    const focusZoneContainer = container.querySelector('#focusZone');
-    const [firstButton, secondButton] = focusZoneContainer.querySelectorAll('button');
-    const controller = focusZone_1.focusZone(focusZoneContainer);
-    firstButton.focus();
-    expect(document.activeElement).toEqual(firstButton);
-    user_event_1.default.type(firstButton, '{arrowdown}');
-    expect(document.activeElement).toEqual(secondButton);
-    controller.abort();
-});
-it('Should have one tab-stop inside the focus zone when enabled', () => {
-    const { container } = react_2.render(<div>
-      <button tabIndex={0}>Bad Apple</button>
-      <div id="focusZone">
-        <button tabIndex={0}>Apple</button>
-        <button tabIndex={0}>Banana</button>
-        <button tabIndex={0}>Cantaloupe</button>
-      </div>
-      <button tabIndex={0}>Next Apple</button>
-    </div>);
-    const focusZoneContainer = container.querySelector('#focusZone');
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [one, two, three, four, five] = container.querySelectorAll('button');
-    const controller = focusZone_1.focusZone(focusZoneContainer);
-    one.focus();
-    user_event_1.default.tab();
-    user_event_1.default.tab();
-    expect(document.activeElement).toEqual(five);
-    controller.abort();
-    one.focus();
-    user_event_1.default.tab();
-    user_event_1.default.tab();
-    expect(document.activeElement).toEqual(three);
-    controller.abort();
-});
-it('Should prevent moving focus outside the zone', () => {
-    const { container } = react_2.render(<div>
-      <button tabIndex={0}>Bad Apple</button>
-      <div id="focusZone">
-        <button tabIndex={0}>Apple</button>
-        <button tabIndex={0}>Banana</button>
-        <button tabIndex={0}>Cantaloupe</button>
-      </div>
-    </div>);
-    const focusZoneContainer = container.querySelector('#focusZone');
-    const [firstButton, secondButton, thirdButton] = focusZoneContainer.querySelectorAll('button');
-    const controller = focusZone_1.focusZone(focusZoneContainer);
-    firstButton.focus();
-    expect(document.activeElement).toEqual(firstButton);
-    user_event_1.default.type(firstButton, '{arrowup}');
-    expect(document.activeElement).toEqual(firstButton);
-    user_event_1.default.type(firstButton, '{arrowdown}');
-    expect(document.activeElement).toEqual(secondButton);
-    user_event_1.default.type(secondButton, '{arrowdown}');
-    expect(document.activeElement).toEqual(thirdButton);
-    user_event_1.default.type(thirdButton, '{arrowdown}');
-    expect(document.activeElement).toEqual(thirdButton);
-    controller.abort();
-});
-it('Should do focus wrapping correctly', () => {
-    const { container } = react_2.render(<div>
-      <button tabIndex={0}>Bad Apple</button>
-      <div id="focusZone">
-        <button tabIndex={0}>Apple</button>
-        <button tabIndex={0}>Banana</button>
-        <button tabIndex={0}>Cantaloupe</button>
-      </div>
-    </div>);
-    const focusZoneContainer = container.querySelector('#focusZone');
-    const [firstButton, secondButton, thirdButton] = focusZoneContainer.querySelectorAll('button');
-    const controller = focusZone_1.focusZone(focusZoneContainer, { focusOutBehavior: 'wrap' });
-    firstButton.focus();
-    expect(document.activeElement).toEqual(firstButton);
-    user_event_1.default.type(firstButton, '{arrowup}');
-    expect(document.activeElement).toEqual(thirdButton);
-    user_event_1.default.type(thirdButton, '{arrowup}');
-    expect(document.activeElement).toEqual(secondButton);
-    user_event_1.default.type(secondButton, '{arrowdown}');
-    expect(document.activeElement).toEqual(thirdButton);
-    user_event_1.default.type(thirdButton, '{arrowdown}');
-    expect(document.activeElement).toEqual(firstButton);
-    controller.abort();
-});
-it('Should call custom getNextFocusable callback', () => {
-    const { container } = react_2.render(<div>
-      <button tabIndex={0}>Bad Apple</button>
-      <div id="focusZone">
-        <button tabIndex={0}>Apple</button>
-        <button tabIndex={0}>Banana</button>
-        <button tabIndex={0}>Cantaloupe</button>
-      </div>
-    </div>);
-    const focusZoneContainer = container.querySelector('#focusZone');
-    const [firstButton, secondButton] = focusZoneContainer.querySelectorAll('button');
-    const getNextFocusableCallback = jest.fn();
-    const controller = focusZone_1.focusZone(focusZoneContainer, { getNextFocusable: getNextFocusableCallback });
-    firstButton.focus();
-    expect(document.activeElement).toEqual(firstButton);
-    user_event_1.default.type(firstButton, '{arrowdown}');
-    expect(getNextFocusableCallback).toHaveBeenCalledWith('next', firstButton, expect.anything());
-    user_event_1.default.type(secondButton, '{home}');
-    expect(getNextFocusableCallback).toHaveBeenCalledWith('start', secondButton, expect.anything());
-    controller.abort();
-});
-it('Should focus-in to the most recently-focused element', () => {
-    const { container } = react_2.render(<div>
-      <button tabIndex={0} id="outside">
-        Bad Apple
-      </button>
-      <div id="focusZone">
-        <button tabIndex={0}>Apple</button>
-        <button tabIndex={0}>Banana</button>
-        <button tabIndex={0}>Cantaloupe</button>
-      </div>
-    </div>);
-    const focusZoneContainer = container.querySelector('#focusZone');
-    const outsideButton = container.querySelector('#outside');
-    const [firstButton, secondButton] = focusZoneContainer.querySelectorAll('button');
-    const controller = focusZone_1.focusZone(focusZoneContainer);
-    firstButton.focus();
-    expect(document.activeElement).toEqual(firstButton);
-    user_event_1.default.type(firstButton, '{arrowdown}');
-    expect(document.activeElement).toEqual(secondButton);
-    outsideButton.focus();
-    user_event_1.default.tab();
-    expect(document.activeElement).toEqual(secondButton);
-    controller.abort();
-});
-it('Should focus-in to the first element when focusInStrategy is "first"', () => {
-    const { container } = react_2.render(<div>
-      <button tabIndex={0} id="outside">
-        Bad Apple
-      </button>
-      <div id="focusZone">
-        <button tabIndex={0}>Apple</button>
-        <button tabIndex={0}>Banana</button>
-        <button tabIndex={0}>Cantaloupe</button>
-      </div>
-    </div>);
-    const focusZoneContainer = container.querySelector('#focusZone');
-    const outsideButton = container.querySelector('#outside');
-    const [firstButton, secondButton] = focusZoneContainer.querySelectorAll('button');
-    const controller = focusZone_1.focusZone(focusZoneContainer, { focusInStrategy: 'first' });
-    firstButton.focus();
-    expect(document.activeElement).toEqual(firstButton);
-    user_event_1.default.type(firstButton, '{arrowdown}');
-    expect(document.activeElement).toEqual(secondButton);
-    outsideButton.focus();
-    user_event_1.default.tab();
-    expect(document.activeElement).toEqual(firstButton);
-    controller.abort();
-});
-it('Should focus-in to the closest element when focusInStrategy is "closest"', () => {
-    const { container } = react_2.render(<div>
-      <button tabIndex={0} id="outsideBefore">
-        Bad Apple
-      </button>
-      <div id="focusZone">
-        <button id="apple" tabIndex={0}>
-          Apple
-        </button>
-        <button id="banana" tabIndex={0}>
-          Banana
-        </button>
-        <button id="cantaloupe" tabIndex={0}>
-          Cantaloupe
-        </button>
-      </div>
-      <button tabIndex={0} id="outsideAfter">
-        Good Apple
-      </button>
-    </div>);
-    const focusZoneContainer = container.querySelector('#focusZone');
-    const outsideBefore = container.querySelector('#outsideBefore');
-    const outsideAfter = container.querySelector('#outsideAfter');
-    const [firstButton, secondButton, thirdButton] = focusZoneContainer.querySelectorAll('button');
-    const controller = focusZone_1.focusZone(focusZoneContainer, { focusInStrategy: 'closest' });
-    firstButton.focus();
-    expect(document.activeElement).toEqual(firstButton);
-    user_event_1.default.type(firstButton, '{arrowdown}');
-    expect(document.activeElement).toEqual(secondButton);
-    outsideBefore.focus();
-    user_event_1.default.tab();
-    expect(document.activeElement).toEqual(firstButton);
-    outsideAfter.focus();
-    user_event_1.default.tab({ shift: true });
-    expect(document.activeElement).toEqual(thirdButton);
-    controller.abort();
-});
-it('Should call the custom focusInStrategy callback', () => {
-    const { container } = react_2.render(<div>
-      <button tabIndex={0} id="outside">
-        Bad Apple
-      </button>
-      <div id="focusZone">
-        <button tabIndex={0}>Apple</button>
-        <button tabIndex={0}>Banana</button>
-        <button tabIndex={0}>Cantaloupe</button>
-      </div>
-    </div>);
-    const focusZoneContainer = container.querySelector('#focusZone');
-    const outsideButton = container.querySelector('#outside');
-    const [, secondButton] = focusZoneContainer.querySelectorAll('button');
-    const focusInCallback = jest.fn().mockReturnValue(secondButton);
-    const controller = focusZone_1.focusZone(focusZoneContainer, { focusInStrategy: focusInCallback });
-    outsideButton.focus();
-    user_event_1.default.tab();
-    expect(focusInCallback).toHaveBeenCalledWith(outsideButton);
-    expect(document.activeElement).toEqual(secondButton);
-    controller.abort();
-});
-it('Should respect inputs by not moving focus if key would have some other effect', () => {
-    const { container } = react_2.render(<div>
-      <button tabIndex={0} id="outside">
-        Bad Apple
-      </button>
-      <div id="focusZone">
-        <button tabIndex={0}>Apple</button>
-        <input type="text" defaultValue="Banana" tabIndex={0}/>
-        <button tabIndex={0}>Cantaloupe</button>
-      </div>
-    </div>);
-    const focusZoneContainer = container.querySelector('#focusZone');
-    const [firstButton, secondButton] = focusZoneContainer.querySelectorAll('button');
-    const input = focusZoneContainer.querySelector('input');
-    const controller = focusZone_1.focusZone(focusZoneContainer, { bindKeys: focusZone_1.FocusKeys.ArrowHorizontal | focusZone_1.FocusKeys.HomeAndEnd });
-    firstButton.focus();
-    user_event_1.default.type(firstButton, '{arrowright}');
-    expect(document.activeElement).toEqual(input);
-    user_event_1.default.type(input, '{arrowleft}');
-    expect(document.activeElement).toEqual(input);
-    user_event_1.default.type(input, '{arrowright}');
-    expect(document.activeElement).toEqual(input);
-    user_event_1.default.type(input, '{arrowright}');
-    expect(document.activeElement).toEqual(secondButton);
-    controller.abort();
-});
-it('Should focus-in to the first element if the last-focused element is removed', async () => {
-    const { container } = react_2.render(<div>
-      <button tabIndex={0} id="outside">
-        Bad Apple
-      </button>
-      <div id="focusZone">
-        <button tabIndex={0}>Apple</button>
-        <button tabIndex={0}>Banana</button>
-        <button tabIndex={0}>Cantaloupe</button>
-      </div>
-    </div>);
-    const focusZoneContainer = container.querySelector('#focusZone');
-    const [firstButton, secondButton, thirdButton] = focusZoneContainer.querySelectorAll('button');
-    const outsideButton = container.querySelector('#outside');
-    const controller = focusZone_1.focusZone(focusZoneContainer);
-    firstButton.focus();
-    user_event_1.default.type(firstButton, '{arrowdown}');
-    expect(document.activeElement).toEqual(secondButton);
-    outsideButton.focus();
-    focusZoneContainer.removeChild(secondButton);
-    // The mutation observer fires asynchronously
-    await nextTick();
-    user_event_1.default.tab();
-    expect(document.activeElement).toEqual(firstButton);
-    user_event_1.default.type(firstButton, '{arrowdown}');
-    expect(document.activeElement).toEqual(thirdButton);
-    controller.abort();
-});
-it('Should call onActiveDescendantChanged properly', () => {
-    const { container } = react_2.render(<div>
-      <button tabIndex={0} id="outside">
-        Bad Apple
-      </button>
-      <input id="control" defaultValue="control input" tabIndex={0}/>
-      <div id="focusZone">
-        <button tabIndex={0}>Apple</button>
-        <button tabIndex={0}>Banana</button>
-        <button tabIndex={0}>Cantaloupe</button>
-      </div>
-    </div>);
-    const focusZoneContainer = container.querySelector('#focusZone');
-    const [firstButton, secondButton] = focusZoneContainer.querySelectorAll('button');
-    const control = container.querySelector('#control');
-    const activeDescendantChangedCallback = jest.fn();
-    const controller = focusZone_1.focusZone(focusZoneContainer, {
-        activeDescendantControl: control,
-        onActiveDescendantChanged: activeDescendantChangedCallback
-    });
-    control.focus();
-    expect(activeDescendantChangedCallback).toHaveBeenLastCalledWith(firstButton, undefined, false);
-    user_event_1.default.type(control, '{arrowdown}');
-    expect(activeDescendantChangedCallback).toHaveBeenLastCalledWith(secondButton, firstButton, true);
-    user_event_1.default.type(control, '{arrowup}');
-    expect(activeDescendantChangedCallback).toHaveBeenLastCalledWith(firstButton, secondButton, true);
-    react_2.fireEvent.mouseMove(secondButton);
-    expect(activeDescendantChangedCallback).toHaveBeenLastCalledWith(secondButton, firstButton, false);
-    user_event_1.default.type(control, '{arrowup}');
-    expect(activeDescendantChangedCallback).toHaveBeenLastCalledWith(firstButton, secondButton, true);
-    user_event_1.default.type(control, '{arrowUp}');
-    expect(activeDescendantChangedCallback).toHaveBeenLastCalledWith(firstButton, firstButton, true);
-    activeDescendantChangedCallback.mockReset();
-    react_2.fireEvent.mouseMove(firstButton);
-    expect(activeDescendantChangedCallback).not.toBeCalled();
-    controller.abort();
-});
-it('Should set aria-activedescendant correctly', () => {
-    const { container } = react_2.render(<div>
-      <button tabIndex={0} id="outside">
-        Bad Apple
-      </button>
-      <input id="control" defaultValue="control input" tabIndex={0}/>
-      <div id="focusZone">
-        <button tabIndex={0}>Apple</button>
-        <button tabIndex={0}>Banana</button>
-        <button tabIndex={0}>Cantaloupe</button>
-      </div>
-    </div>);
-    const focusZoneContainer = container.querySelector('#focusZone');
-    const [firstButton, secondButton] = focusZoneContainer.querySelectorAll('button');
-    const outsideButton = container.querySelector('#outside');
-    const control = container.querySelector('#control');
-    const controller = focusZone_1.focusZone(focusZoneContainer, { activeDescendantControl: control });
-    control.focus();
-    expect(control.getAttribute('aria-activedescendant')).toEqual(firstButton.id);
-    user_event_1.default.type(control, '{arrowdown}');
-    expect(control.getAttribute('aria-activedescendant')).toEqual(secondButton.id);
-    user_event_1.default.type(control, '{arrowup}');
-    expect(control.getAttribute('aria-activedescendant')).toEqual(firstButton.id);
-    expect(document.activeElement).toEqual(control);
-    user_event_1.default.type(control, '{arrowup}');
-    expect(control.getAttribute('aria-activedescendant')).toEqual(firstButton.id);
-    outsideButton.focus();
-    expect(control.hasAttribute('aria-activedescendant')).toBeFalsy();
-    controller.abort();
-});
-it('Should handle elements being reordered', async () => {
-    const { container } = react_2.render(<div>
-      <div id="focusZone">
-        <button tabIndex={0}>Apple</button>
-        <button tabIndex={0}>Banana</button>
-        <button tabIndex={0}>Cantaloupe</button>
-        <button tabIndex={0}>Durian</button>
-      </div>
-    </div>);
-    const focusZoneContainer = container.querySelector('#focusZone');
-    const [firstButton, secondButton, thirdButton, fourthButton] = focusZoneContainer.querySelectorAll('button');
-    const controller = focusZone_1.focusZone(focusZoneContainer);
-    firstButton.focus();
-    expect(document.activeElement).toEqual(firstButton);
-    moveDown();
-    expect(document.activeElement).toEqual(secondButton);
-    moveUp();
-    expect(document.activeElement).toEqual(firstButton);
-    // move secondButton and thirdButton to the end of the zone, in reverse order
-    focusZoneContainer.appendChild(thirdButton);
-    focusZoneContainer.appendChild(secondButton);
-    // The mutation observer fires asynchronously
-    await nextTick();
-    expect(document.activeElement).toEqual(firstButton);
-    moveDown();
-    expect(document.activeElement).toEqual(fourthButton);
-    moveDown();
-    expect(document.activeElement).toEqual(thirdButton);
-    moveDown();
-    expect(document.activeElement).toEqual(secondButton);
-    controller.abort();
-});

package/lib/__tests__/behaviors/iterateFocusableElements.test.jsx

@@ -1,58 +0,0 @@
-"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 iterateFocusableElements_1 = require("../../utils/iterateFocusableElements");
-const react_2 = require("@testing-library/react");
-it('Should iterate through focusable elements only', () => {
-    const { container } = react_2.render(<div>
-      <div>
-        <textarea></textarea>
-      </div>
-      <input />
-      <button>Hello</button>
-      <p>Not focusable</p>
-      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
-      <div tabIndex={0}>
-        <a tabIndex={-1} href="#boo">
-          Not focusable
-        </a>
-        <a href="#yah">Focusable</a>
-      </div>
-    </div>);
-    const focusable = Array.from(iterateFocusableElements_1.iterateFocusableElements(container, { onlyTabbable: true }));
-    expect(focusable.length).toEqual(5);
-    expect(focusable[0].tagName.toLowerCase()).toEqual('textarea');
-    expect(focusable[1].tagName.toLowerCase()).toEqual('input');
-    expect(focusable[2].tagName.toLowerCase()).toEqual('button');
-    expect(focusable[3].tagName.toLowerCase()).toEqual('div');
-    expect(focusable[4].tagName.toLowerCase()).toEqual('a');
-    expect(focusable[4].getAttribute('href')).toEqual('#yah');
-});
-it('Should iterate through focusable elements in reverse', () => {
-    const { container } = react_2.render(<div>
-      <div>
-        <textarea></textarea>
-      </div>
-      <input />
-      <button>Hello</button>
-      <p>Not focusable</p>
-      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
-      <div tabIndex={0}>
-        <a tabIndex={-1} href="#boo">
-          Not focusable
-        </a>
-        <a href="#yah">Focusable</a>
-      </div>
-    </div>);
-    const focusable = Array.from(iterateFocusableElements_1.iterateFocusableElements(container, { reverse: true, onlyTabbable: true }));
-    expect(focusable.length).toEqual(5);
-    expect(focusable[0].tagName.toLowerCase()).toEqual('a');
-    expect(focusable[0].getAttribute('href')).toEqual('#yah');
-    expect(focusable[1].tagName.toLowerCase()).toEqual('div');
-    expect(focusable[2].tagName.toLowerCase()).toEqual('button');
-    expect(focusable[3].tagName.toLowerCase()).toEqual('input');
-    expect(focusable[4].tagName.toLowerCase()).toEqual('textarea');
-});

package/lib/__tests__/hooks/useAnchoredPosition.test.jsx

@@ -1,29 +0,0 @@
-"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 useAnchoredPosition_1 = require("../../hooks/useAnchoredPosition");
-const react_2 = require("@testing-library/react");
-const Component = ({ callback }) => {
-    const floatingElementRef = react_1.default.useRef(null);
-    const anchorElementRef = react_1.default.useRef(null);
-    callback(useAnchoredPosition_1.useAnchoredPosition({ floatingElementRef, anchorElementRef }));
-    return (<div style={{ position: 'absolute' }}>
-      <div style={{ position: 'absolute', top: '20px', left: '20px', height: '50px', width: '50px' }} ref={floatingElementRef}/>
-      <div ref={anchorElementRef}/>
-    </div>);
-};
-it('should should return a position', () => {
-    const cb = jest.fn();
-    react_2.render(<Component callback={cb}/>);
-    expect(cb).toHaveBeenCalledTimes(2);
-    expect(cb.mock.calls[1][0]['position']).toMatchInlineSnapshot(`
-Object {
-  "anchorSide": "outside-bottom",
-  "left": 0,
-  "top": 4,
-}
-`);
-});

package/lib/__tests__/hooks/useOnEscapePress.test.jsx

@@ -1,19 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const useOnEscapePress_1 = require("../../hooks/useOnEscapePress");
-const react_1 = require("@testing-library/react");
-const react_2 = __importDefault(require("react"));
-it('should call function when user presses escape', () => {
-    const functionToCall = jest.fn();
-    const Component = () => {
-        useOnEscapePress_1.useOnEscapePress(functionToCall);
-        return <div>content</div>;
-    };
-    const { getByText } = react_1.render(<Component />);
-    const domNode = getByText('content');
-    react_1.fireEvent.keyDown(domNode, { key: 'Escape', code: 'Escape', keyCode: 27, charCode: 27 });
-    expect(functionToCall).toHaveBeenCalledTimes(1);
-});

package/lib/__tests__/hooks/useOnOutsideClick.test.jsx

@@ -1,63 +0,0 @@
-"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 useOnOutsideClick_1 = require("../../hooks/useOnOutsideClick");
-const react_1 = require("@testing-library/react");
-const react_2 = __importStar(require("react"));
-const user_event_1 = __importDefault(require("@testing-library/user-event"));
-const Component = ({ callback }) => {
-    const containerRef = react_2.useRef(null);
-    const outerButton = react_2.useRef(null);
-    const secondButton = react_2.useRef(null);
-    useOnOutsideClick_1.useOnOutsideClick({ ignoreClickRefs: [secondButton], containerRef, onClickOutside: callback });
-    return (<div>
-      <button ref={outerButton}>button</button>
-      <button ref={secondButton}>button two</button>
-      <div ref={containerRef}>content</div>
-    </div>);
-};
-it('should call function when user clicks outside container', () => {
-    const mockFunction = jest.fn();
-    const { getByText } = react_1.render(<Component callback={mockFunction}/>);
-    user_event_1.default.click(getByText('button'));
-    expect(mockFunction).toHaveBeenCalledTimes(1);
-});
-it('should not call function when user right clicks', () => {
-    const mockFunction = jest.fn();
-    const { getByText } = react_1.render(<Component callback={mockFunction}/>);
-    user_event_1.default.click(getByText('button'), { button: 1 });
-    expect(mockFunction).toHaveBeenCalledTimes(0);
-});
-it('should not call function when clicking on ignored refs', () => {
-    const mockFunction = jest.fn();
-    const { getByText } = react_1.render(<Component callback={mockFunction}/>);
-    user_event_1.default.click(getByText('button two'));
-    expect(mockFunction).toHaveBeenCalledTimes(0);
-});
-it('should not call function when clicking inside container', () => {
-    const mockFunction = jest.fn();
-    const { getByText } = react_1.render(<Component callback={mockFunction}/>);
-    user_event_1.default.click(getByText('content'));
-    expect(mockFunction).toHaveBeenCalledTimes(0);
-});

package/lib/__tests__/hooks/useOpenAndCloseFocus.test.jsx

@@ -1,61 +0,0 @@
-"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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const react_2 = require("@testing-library/react");
-const useOpenAndCloseFocus_1 = require("../../hooks/useOpenAndCloseFocus");
-const Component = () => {
-    const containerRef = react_1.useRef(null);
-    const returnFocusRef = react_1.useRef(null);
-    const noButtonRef = react_1.useRef(null);
-    useOpenAndCloseFocus_1.useOpenAndCloseFocus({ containerRef, initialFocusRef: noButtonRef, returnFocusRef });
-    return (<>
-      <button ref={returnFocusRef}>trigger</button>
-      <div ref={containerRef}>
-        <button>yes</button>
-        <button ref={noButtonRef}>no</button>
-      </div>
-    </>);
-};
-const ComponentTwo = () => {
-    const buttonRef = react_1.useRef(null);
-    const containerRef = react_1.useRef(null);
-    useOpenAndCloseFocus_1.useOpenAndCloseFocus({ containerRef, returnFocusRef: buttonRef });
-    return (<>
-      <button ref={buttonRef}>button trigger</button>
-      <div ref={containerRef}>
-        <button>yes</button>
-        <button>no</button>
-      </div>
-    </>);
-};
-it('should focus element passed into function', async () => {
-    const { getByText } = react_2.render(<Component />);
-    await react_2.waitFor(() => getByText('no'));
-    const noButton = getByText('no');
-    expect(document.activeElement).toEqual(noButton);
-});
-it('should focus first element when nothing is passed', async () => {
-    const { getByText } = react_2.render(<ComponentTwo />);
-    await react_2.waitFor(() => getByText('yes'));
-    const yesButton = getByText('yes');
-    expect(document.activeElement).toEqual(yesButton);
-});