@primer/components 31.2.0-rc.c7f73427 → 31.2.1-rc.0e01900c

package/lib/__tests__/behaviors/scrollIntoViewingArea.test.js

@@ -1,226 +1,155 @@
 "use strict";
-
-var _scrollIntoViewingArea = require("../../behaviors/scrollIntoViewingArea");
-
+Object.defineProperty(exports, "__esModule", { value: true });
+const scrollIntoViewingArea_1 = require("../../behaviors/scrollIntoViewingArea");
 function scrollPositionFormula(positionData, isChildAboveViewingArea) {
-  const {
-    viewingAreaEdgePosition,
-    childEdgePosition,
-    margin
-  } = positionData;
-  const marginOffset = margin * (isChildAboveViewingArea ? -1 : 1);
-  return childEdgePosition - viewingAreaEdgePosition + marginOffset;
-} // The DOMRect constructor isn't available in JSDOM, so we improvise here.
-
-
+    const { viewingAreaEdgePosition, childEdgePosition, margin } = positionData;
+    const marginOffset = margin * (isChildAboveViewingArea ? -1 : 1);
+    return childEdgePosition - viewingAreaEdgePosition + marginOffset;
+}
+// The DOMRect constructor isn't available in JSDOM, so we improvise here.
 function makeDOMRect(x, y, width, height) {
-  return {
-    x,
-    y,
-    width,
-    height,
-    top: y,
-    left: x,
-    right: x + width,
-    bottom: y + height,
-
-    toJSON() {
-      return this;
-    }
-
-  };
-} // Since Jest/JSDOM doesn't support layout, we can stub out getBoundingClientRect if we know the
+    return {
+        x,
+        y,
+        width,
+        height,
+        top: y,
+        left: x,
+        right: x + width,
+        bottom: y + height,
+        toJSON() {
+            return this;
+        }
+    };
+}
+// Since Jest/JSDOM doesn't support layout, we can stub out getBoundingClientRect if we know the
 // correct dimensions. JSDOM will handle the rest of the DOM API used by getAnchoredPosition.
-
-
 function createVirtualDOM(viewingAreaRect, childRect) {
-  const viewingArea = document.createElement('div');
-  viewingArea.style.overflow = 'auto';
-  viewingArea.id = 'viewingArea'; // eslint-disable-next-line github/unescaped-html-literal
-
-  viewingArea.innerHTML = '<div id="child"></div>';
-  const child = viewingArea.querySelector('#child');
-
-  child.getBoundingClientRect = () => childRect;
-
-  viewingArea.getBoundingClientRect = () => viewingAreaRect;
-
-  return {
-    viewingArea,
-    child
-  };
+    const viewingArea = document.createElement('div');
+    viewingArea.style.overflow = 'auto';
+    viewingArea.id = 'viewingArea';
+    // eslint-disable-next-line github/unescaped-html-literal
+    viewingArea.innerHTML = '<div id="child"></div>';
+    const child = viewingArea.querySelector('#child');
+    child.getBoundingClientRect = () => childRect;
+    viewingArea.getBoundingClientRect = () => viewingAreaRect;
+    return { viewingArea, child };
 }
-
 describe('scrollIntoViewingArea', () => {
-  it('scrolls the expected amount when only the viewingArea element and child element are passed to the function', () => {
-    const scrollToMock = jest.fn();
-    Object.defineProperty(window.Element.prototype, 'scrollTo', {
-      writable: true,
-      value: scrollToMock
-    });
-    const childHeight = 50;
-    const viewAreaHeight = 100;
-    const childStart = viewAreaHeight + 10;
-    const expectedScrollPosition = scrollPositionFormula({
-      viewingAreaEdgePosition: viewAreaHeight,
-      childEdgePosition: childStart + childHeight,
-      margin: 8
-    }, false);
-    const viewingAreaRect = makeDOMRect(0, 0, 100, viewAreaHeight);
-    const childRect = makeDOMRect(0, childStart, 100, childHeight);
-    const {
-      viewingArea,
-      child
-    } = createVirtualDOM(viewingAreaRect, childRect);
-
-    viewingArea.getBoundingClientRect = () => viewingAreaRect;
-
-    viewingArea.scrollTop = 0;
-
-    child.getBoundingClientRect = () => childRect;
-
-    (0, _scrollIntoViewingArea.scrollIntoViewingArea)(child, viewingArea);
-    expect(scrollToMock).toHaveBeenCalledWith({
-      behavior: 'smooth',
-      top: expectedScrollPosition
-    });
-  });
-  describe('y-axis', () => {
-    it('scrolls the child into the viewing area when it is AFTER the overflow cutoff point', () => {
-      const scrollToMock = jest.fn();
-      Object.defineProperty(window.Element.prototype, 'scrollTo', {
-        writable: true,
-        value: scrollToMock
-      });
-      const childHeight = 50;
-      const viewAreaHeight = 100;
-      const childStart = viewAreaHeight + 10;
-      const scrollMargin = 10;
-      const expectedScrollPosition = scrollPositionFormula({
-        viewingAreaEdgePosition: viewAreaHeight,
-        childEdgePosition: childStart + childHeight,
-        margin: scrollMargin
-      }, false);
-      const viewingAreaRect = makeDOMRect(0, 0, 100, viewAreaHeight);
-      const childRect = makeDOMRect(0, childStart, 100, childHeight);
-      const {
-        viewingArea,
-        child
-      } = createVirtualDOM(viewingAreaRect, childRect);
-
-      viewingArea.getBoundingClientRect = () => viewingAreaRect;
-
-      viewingArea.scrollTop = 0;
-
-      child.getBoundingClientRect = () => childRect;
-
-      (0, _scrollIntoViewingArea.scrollIntoViewingArea)(child, viewingArea, 'vertical', scrollMargin, scrollMargin, 'auto');
-      expect(scrollToMock).toHaveBeenCalledWith({
-        behavior: 'auto',
-        top: expectedScrollPosition
-      });
-    });
-    it('scrolls the child into the viewing area when it is BEFORE the overflow cutoff point', () => {
-      const scrollToMock = jest.fn();
-      Object.defineProperty(window.Element.prototype, 'scrollTo', {
-        writable: true,
-        value: scrollToMock
-      });
-      const childHeight = 50;
-      const childStart = childHeight * -1 - 10;
-      const scrollMargin = 10;
-      const expectedScrollPosition = scrollPositionFormula({
-        viewingAreaEdgePosition: 0,
-        childEdgePosition: childStart,
-        margin: scrollMargin
-      }, true);
-      const viewingAreaRect = makeDOMRect(0, 0, 100, 100);
-      const childRect = makeDOMRect(0, childStart, 100, childHeight);
-      const {
-        viewingArea,
-        child
-      } = createVirtualDOM(viewingAreaRect, childRect);
-
-      viewingArea.getBoundingClientRect = () => viewingAreaRect;
-
-      viewingArea.scrollTop = 0;
-
-      child.getBoundingClientRect = () => childRect;
-
-      (0, _scrollIntoViewingArea.scrollIntoViewingArea)(child, viewingArea, 'vertical', scrollMargin, scrollMargin, 'auto');
-      expect(scrollToMock).toHaveBeenCalledWith({
-        behavior: 'auto',
-        top: expectedScrollPosition
-      });
+    it('scrolls the expected amount when only the viewingArea element and child element are passed to the function', () => {
+        const scrollToMock = jest.fn();
+        Object.defineProperty(window.Element.prototype, 'scrollTo', {
+            writable: true,
+            value: scrollToMock
+        });
+        const childHeight = 50;
+        const viewAreaHeight = 100;
+        const childStart = viewAreaHeight + 10;
+        const expectedScrollPosition = scrollPositionFormula({ viewingAreaEdgePosition: viewAreaHeight, childEdgePosition: childStart + childHeight, margin: 8 }, false);
+        const viewingAreaRect = makeDOMRect(0, 0, 100, viewAreaHeight);
+        const childRect = makeDOMRect(0, childStart, 100, childHeight);
+        const { viewingArea, child } = createVirtualDOM(viewingAreaRect, childRect);
+        viewingArea.getBoundingClientRect = () => viewingAreaRect;
+        viewingArea.scrollTop = 0;
+        child.getBoundingClientRect = () => childRect;
+        scrollIntoViewingArea_1.scrollIntoViewingArea(child, viewingArea);
+        expect(scrollToMock).toHaveBeenCalledWith({
+            behavior: 'smooth',
+            top: expectedScrollPosition
+        });
     });
-  });
-  describe('x-axis', () => {
-    it('scrolls the child into the viewing area when it is AFTER the overflow cutoff point', () => {
-      const scrollToMock = jest.fn();
-      Object.defineProperty(window.Element.prototype, 'scrollTo', {
-        writable: true,
-        value: scrollToMock
-      });
-      const childWidth = 50;
-      const viewAreaWidth = 100;
-      const childStart = viewAreaWidth + 10;
-      const scrollMargin = 10;
-      const expectedScrollPosition = scrollPositionFormula({
-        viewingAreaEdgePosition: viewAreaWidth,
-        childEdgePosition: childStart + childWidth,
-        margin: scrollMargin
-      }, false);
-      const viewingAreaRect = makeDOMRect(0, 0, 100, viewAreaWidth);
-      const childRect = makeDOMRect(childStart, 0, childWidth, 100);
-      const {
-        viewingArea,
-        child
-      } = createVirtualDOM(viewingAreaRect, childRect);
-
-      viewingArea.getBoundingClientRect = () => viewingAreaRect;
-
-      viewingArea.scrollLeft = 0;
-
-      child.getBoundingClientRect = () => childRect;
-
-      (0, _scrollIntoViewingArea.scrollIntoViewingArea)(child, viewingArea, 'horizontal', scrollMargin, scrollMargin, 'auto');
-      expect(scrollToMock).toHaveBeenCalledWith({
-        behavior: 'auto',
-        left: expectedScrollPosition
-      });
+    describe('y-axis', () => {
+        it('scrolls the child into the viewing area when it is AFTER the overflow cutoff point', () => {
+            const scrollToMock = jest.fn();
+            Object.defineProperty(window.Element.prototype, 'scrollTo', {
+                writable: true,
+                value: scrollToMock
+            });
+            const childHeight = 50;
+            const viewAreaHeight = 100;
+            const childStart = viewAreaHeight + 10;
+            const scrollMargin = 10;
+            const expectedScrollPosition = scrollPositionFormula({ viewingAreaEdgePosition: viewAreaHeight, childEdgePosition: childStart + childHeight, margin: scrollMargin }, false);
+            const viewingAreaRect = makeDOMRect(0, 0, 100, viewAreaHeight);
+            const childRect = makeDOMRect(0, childStart, 100, childHeight);
+            const { viewingArea, child } = createVirtualDOM(viewingAreaRect, childRect);
+            viewingArea.getBoundingClientRect = () => viewingAreaRect;
+            viewingArea.scrollTop = 0;
+            child.getBoundingClientRect = () => childRect;
+            scrollIntoViewingArea_1.scrollIntoViewingArea(child, viewingArea, 'vertical', scrollMargin, scrollMargin, 'auto');
+            expect(scrollToMock).toHaveBeenCalledWith({
+                behavior: 'auto',
+                top: expectedScrollPosition
+            });
+        });
+        it('scrolls the child into the viewing area when it is BEFORE the overflow cutoff point', () => {
+            const scrollToMock = jest.fn();
+            Object.defineProperty(window.Element.prototype, 'scrollTo', {
+                writable: true,
+                value: scrollToMock
+            });
+            const childHeight = 50;
+            const childStart = childHeight * -1 - 10;
+            const scrollMargin = 10;
+            const expectedScrollPosition = scrollPositionFormula({ viewingAreaEdgePosition: 0, childEdgePosition: childStart, margin: scrollMargin }, true);
+            const viewingAreaRect = makeDOMRect(0, 0, 100, 100);
+            const childRect = makeDOMRect(0, childStart, 100, childHeight);
+            const { viewingArea, child } = createVirtualDOM(viewingAreaRect, childRect);
+            viewingArea.getBoundingClientRect = () => viewingAreaRect;
+            viewingArea.scrollTop = 0;
+            child.getBoundingClientRect = () => childRect;
+            scrollIntoViewingArea_1.scrollIntoViewingArea(child, viewingArea, 'vertical', scrollMargin, scrollMargin, 'auto');
+            expect(scrollToMock).toHaveBeenCalledWith({
+                behavior: 'auto',
+                top: expectedScrollPosition
+            });
+        });
     });
-    it('scrolls the child into the viewing area when it is BEFORE the overflow cutoff point', () => {
-      const scrollToMock = jest.fn();
-      Object.defineProperty(window.Element.prototype, 'scrollTo', {
-        writable: true,
-        value: scrollToMock
-      });
-      const childWidth = 50;
-      const childStart = childWidth * -1 - 10;
-      const scrollMargin = 10;
-      const expectedScrollPosition = scrollPositionFormula({
-        viewingAreaEdgePosition: 0,
-        childEdgePosition: childStart,
-        margin: scrollMargin
-      }, true);
-      const viewingAreaRect = makeDOMRect(0, 0, 100, 100);
-      const childRect = makeDOMRect(childStart, 0, childWidth, 100);
-      const {
-        viewingArea,
-        child
-      } = createVirtualDOM(viewingAreaRect, childRect);
-
-      viewingArea.getBoundingClientRect = () => viewingAreaRect;
-
-      viewingArea.scrollTop = 0;
-
-      child.getBoundingClientRect = () => childRect;
-
-      (0, _scrollIntoViewingArea.scrollIntoViewingArea)(child, viewingArea, 'horizontal', scrollMargin, scrollMargin, 'auto');
-      expect(scrollToMock).toHaveBeenCalledWith({
-        behavior: 'auto',
-        left: expectedScrollPosition
-      });
+    describe('x-axis', () => {
+        it('scrolls the child into the viewing area when it is AFTER the overflow cutoff point', () => {
+            const scrollToMock = jest.fn();
+            Object.defineProperty(window.Element.prototype, 'scrollTo', {
+                writable: true,
+                value: scrollToMock
+            });
+            const childWidth = 50;
+            const viewAreaWidth = 100;
+            const childStart = viewAreaWidth + 10;
+            const scrollMargin = 10;
+            const expectedScrollPosition = scrollPositionFormula({ viewingAreaEdgePosition: viewAreaWidth, childEdgePosition: childStart + childWidth, margin: scrollMargin }, false);
+            const viewingAreaRect = makeDOMRect(0, 0, 100, viewAreaWidth);
+            const childRect = makeDOMRect(childStart, 0, childWidth, 100);
+            const { viewingArea, child } = createVirtualDOM(viewingAreaRect, childRect);
+            viewingArea.getBoundingClientRect = () => viewingAreaRect;
+            viewingArea.scrollLeft = 0;
+            child.getBoundingClientRect = () => childRect;
+            scrollIntoViewingArea_1.scrollIntoViewingArea(child, viewingArea, 'horizontal', scrollMargin, scrollMargin, 'auto');
+            expect(scrollToMock).toHaveBeenCalledWith({
+                behavior: 'auto',
+                left: expectedScrollPosition
+            });
+        });
+        it('scrolls the child into the viewing area when it is BEFORE the overflow cutoff point', () => {
+            const scrollToMock = jest.fn();
+            Object.defineProperty(window.Element.prototype, 'scrollTo', {
+                writable: true,
+                value: scrollToMock
+            });
+            const childWidth = 50;
+            const childStart = childWidth * -1 - 10;
+            const scrollMargin = 10;
+            const expectedScrollPosition = scrollPositionFormula({ viewingAreaEdgePosition: 0, childEdgePosition: childStart, margin: scrollMargin }, true);
+            const viewingAreaRect = makeDOMRect(0, 0, 100, 100);
+            const childRect = makeDOMRect(childStart, 0, childWidth, 100);
+            const { viewingArea, child } = createVirtualDOM(viewingAreaRect, childRect);
+            viewingArea.getBoundingClientRect = () => viewingAreaRect;
+            viewingArea.scrollTop = 0;
+            child.getBoundingClientRect = () => childRect;
+            scrollIntoViewingArea_1.scrollIntoViewingArea(child, viewingArea, 'horizontal', scrollMargin, scrollMargin, 'auto');
+            expect(scrollToMock).toHaveBeenCalledWith({
+                behavior: 'auto',
+                left: expectedScrollPosition
+            });
+        });
     });
-  });
-});
+});

package/lib/__tests__/filterObject.test.js

@@ -1,30 +1,51 @@
 "use strict";
-
-var _theme = require("../utils/theme");
-
+Object.defineProperty(exports, "__esModule", { value: true });
+const theme_1 = require("../utils/theme");
 describe('filterObject', () => {
-  const colors = {
-    scale: {
-      gray: ['#fafbfc', '#f6f8fa', '#e1e4e8', '#d1d5da', '#959da5', '#6a737d', '#586069', '#444d56', '#2f363d', '#24292e']
-    },
-    btn: {
-      shadow: '0 1px 0 rgba(27,31,35,0.04)'
-    }
-  };
-  it('filters out shadow values', () => {
-    const expected = {
-      scale: {
-        gray: ['#fafbfc', '#f6f8fa', '#e1e4e8', '#d1d5da', '#959da5', '#6a737d', '#586069', '#444d56', '#2f363d', '#24292e']
-      }
+    const colors = {
+        scale: {
+            gray: [
+                '#fafbfc',
+                '#f6f8fa',
+                '#e1e4e8',
+                '#d1d5da',
+                '#959da5',
+                '#6a737d',
+                '#586069',
+                '#444d56',
+                '#2f363d',
+                '#24292e'
+            ]
+        },
+        btn: {
+            shadow: '0 1px 0 rgba(27,31,35,0.04)'
+        }
     };
-    expect((0, _theme.filterObject)(colors, value => (0, _theme.isColorValue)(value))).toEqual(expected);
-  });
-  it('filters out color values', () => {
-    const expected = {
-      btn: {
-        shadow: '0 1px 0 rgba(27,31,35,0.04)'
-      }
-    };
-    expect((0, _theme.filterObject)(colors, value => (0, _theme.isShadowValue)(value))).toEqual(expected);
-  });
-});
+    it('filters out shadow values', () => {
+        const expected = {
+            scale: {
+                gray: [
+                    '#fafbfc',
+                    '#f6f8fa',
+                    '#e1e4e8',
+                    '#d1d5da',
+                    '#959da5',
+                    '#6a737d',
+                    '#586069',
+                    '#444d56',
+                    '#2f363d',
+                    '#24292e'
+                ]
+            }
+        };
+        expect(theme_1.filterObject(colors, (value) => theme_1.isColorValue(value))).toEqual(expected);
+    });
+    it('filters out color values', () => {
+        const expected = {
+            btn: {
+                shadow: '0 1px 0 rgba(27,31,35,0.04)'
+            }
+        };
+        expect(theme_1.filterObject(colors, (value) => theme_1.isShadowValue(value))).toEqual(expected);
+    });
+});

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

@@ -0,0 +1,29 @@
+"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

@@ -0,0 +1,19 @@
+"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

@@ -0,0 +1,63 @@
+"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

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