@primer/components 33.0.0-rc.b3e4ccee → 33.0.0

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

@@ -1,224 +0,0 @@
-import { scrollIntoViewingArea } from '../../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.
-
-
-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
-// 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
-  };
-}
-
-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;
-
-    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;
-
-      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(child, viewingArea, 'vertical', scrollMargin, scrollMargin, 'auto');
-      expect(scrollToMock).toHaveBeenCalledWith({
-        behavior: 'auto',
-        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;
-
-      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(child, viewingArea, 'horizontal', scrollMargin, scrollMargin, 'auto');
-      expect(scrollToMock).toHaveBeenCalledWith({
-        behavior: 'auto',
-        left: expectedScrollPosition
-      });
-    });
-  });
-});

package/lib-esm/__tests__/filterObject.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib-esm/__tests__/filterObject.test.js

@@ -1,27 +0,0 @@
-import { isColorValue, isShadowValue, filterObject } from '../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']
-      }
-    };
-    expect(filterObject(colors, value => isColorValue(value))).toEqual(expected);
-  });
-  it('filters out color values', () => {
-    const expected = {
-      btn: {
-        shadow: '0 1px 0 rgba(27,31,35,0.04)'
-      }
-    };
-    expect(filterObject(colors, value => isShadowValue(value))).toEqual(expected);
-  });
-});

package/lib-esm/__tests__/hooks/useAnchoredPosition.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib-esm/__tests__/hooks/useAnchoredPosition.test.js

@@ -1,46 +0,0 @@
-import React from 'react';
-import { useAnchoredPosition } from '../../hooks/useAnchoredPosition';
-import { render } from '@testing-library/react';
-
-const Component = ({
-  callback
-}) => {
-  const floatingElementRef = React.useRef(null);
-  const anchorElementRef = React.useRef(null);
-  callback(useAnchoredPosition({
-    floatingElementRef,
-    anchorElementRef
-  }));
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: 'absolute'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: 'absolute',
-      top: '20px',
-      left: '20px',
-      height: '50px',
-      width: '50px'
-    },
-    ref: floatingElementRef
-  }), /*#__PURE__*/React.createElement("div", {
-    ref: anchorElementRef
-  }));
-};
-
-Component.displayName = "Component";
-it('should should return a position', () => {
-  const cb = jest.fn();
-  render( /*#__PURE__*/React.createElement(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-esm/__tests__/hooks/useOnEscapePress.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib-esm/__tests__/hooks/useOnEscapePress.test.js

@@ -1,23 +0,0 @@
-import { useOnEscapePress } from '../../hooks/useOnEscapePress';
-import { render, fireEvent } from '@testing-library/react';
-import React from 'react';
-it('should call function when user presses escape', () => {
-  const functionToCall = jest.fn();
-
-  const Component = () => {
-    useOnEscapePress(functionToCall);
-    return /*#__PURE__*/React.createElement("div", null, "content");
-  };
-
-  const {
-    getByText
-  } = render( /*#__PURE__*/React.createElement(Component, null));
-  const domNode = getByText('content');
-  fireEvent.keyDown(domNode, {
-    key: 'Escape',
-    code: 'Escape',
-    keyCode: 27,
-    charCode: 27
-  });
-  expect(functionToCall).toHaveBeenCalledTimes(1);
-});

package/lib-esm/__tests__/hooks/useOnOutsideClick.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib-esm/__tests__/hooks/useOnOutsideClick.test.js

@@ -1,68 +0,0 @@
-import { useOnOutsideClick } from '../../hooks/useOnOutsideClick';
-import { render } from '@testing-library/react';
-import React, { useRef } from 'react';
-import userEvent from '@testing-library/user-event';
-
-const Component = ({
-  callback
-}) => {
-  const containerRef = useRef(null);
-  const outerButton = useRef(null);
-  const secondButton = useRef(null);
-  useOnOutsideClick({
-    ignoreClickRefs: [secondButton],
-    containerRef,
-    onClickOutside: callback
-  });
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
-    ref: outerButton
-  }, "button"), /*#__PURE__*/React.createElement("button", {
-    ref: secondButton
-  }, "button two"), /*#__PURE__*/React.createElement("div", {
-    ref: containerRef
-  }, "content"));
-};
-
-Component.displayName = "Component";
-it('should call function when user clicks outside container', () => {
-  const mockFunction = jest.fn();
-  const {
-    getByText
-  } = render( /*#__PURE__*/React.createElement(Component, {
-    callback: mockFunction
-  }));
-  userEvent.click(getByText('button'));
-  expect(mockFunction).toHaveBeenCalledTimes(1);
-});
-it('should not call function when user right clicks', () => {
-  const mockFunction = jest.fn();
-  const {
-    getByText
-  } = render( /*#__PURE__*/React.createElement(Component, {
-    callback: mockFunction
-  }));
-  userEvent.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
-  } = render( /*#__PURE__*/React.createElement(Component, {
-    callback: mockFunction
-  }));
-  userEvent.click(getByText('button two'));
-  expect(mockFunction).toHaveBeenCalledTimes(0);
-});
-it('should not call function when clicking inside container', () => {
-  const mockFunction = jest.fn();
-  const {
-    getByText
-  } = render( /*#__PURE__*/React.createElement(Component, {
-    callback: mockFunction
-  }));
-  userEvent.click(getByText('content'));
-  expect(mockFunction).toHaveBeenCalledTimes(0);
-});

package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.test.js

@@ -1,52 +0,0 @@
-import React, { useRef } from 'react';
-import { render, waitFor } from '@testing-library/react';
-import { useOpenAndCloseFocus } from '../../hooks/useOpenAndCloseFocus';
-
-const Component = () => {
-  const containerRef = useRef(null);
-  const returnFocusRef = useRef(null);
-  const noButtonRef = useRef(null);
-  useOpenAndCloseFocus({
-    containerRef,
-    initialFocusRef: noButtonRef,
-    returnFocusRef
-  });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
-    ref: returnFocusRef
-  }, "trigger"), /*#__PURE__*/React.createElement("div", {
-    ref: containerRef
-  }, /*#__PURE__*/React.createElement("button", null, "yes"), /*#__PURE__*/React.createElement("button", {
-    ref: noButtonRef
-  }, "no")));
-};
-
-const ComponentTwo = () => {
-  const buttonRef = useRef(null);
-  const containerRef = useRef(null);
-  useOpenAndCloseFocus({
-    containerRef,
-    returnFocusRef: buttonRef
-  });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
-    ref: buttonRef
-  }, "button trigger"), /*#__PURE__*/React.createElement("div", {
-    ref: containerRef
-  }, /*#__PURE__*/React.createElement("button", null, "yes"), /*#__PURE__*/React.createElement("button", null, "no")));
-};
-
-it('should focus element passed into function', async () => {
-  const {
-    getByText
-  } = render( /*#__PURE__*/React.createElement(Component, null));
-  await waitFor(() => getByText('no'));
-  const noButton = getByText('no');
-  expect(document.activeElement).toEqual(noButton);
-});
-it('should focus first element when nothing is passed', async () => {
-  const {
-    getByText
-  } = render( /*#__PURE__*/React.createElement(ComponentTwo, null));
-  await waitFor(() => getByText('yes'));
-  const yesButton = getByText('yes');
-  expect(document.activeElement).toEqual(yesButton);
-});

package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.test.js

@@ -1,36 +0,0 @@
-import { useProvidedStateOrCreate } from '../../hooks/useProvidedStateOrCreate';
-import { render } from '@testing-library/react';
-import React, { useState } from 'react';
-it('will use the provided state', () => {
-  const Component = () => {
-    const [state, setState] = useState('foo');
-    const [combinedState] = useProvidedStateOrCreate(state, setState, 'bar');
-    return /*#__PURE__*/React.createElement("div", null, combinedState);
-  };
-
-  const doc = render( /*#__PURE__*/React.createElement(Component, null));
-  expect(doc.baseElement.textContent).toEqual('foo');
-});
-it('will set state correctly when provided a set state method', () => {
-  const Component = () => {
-    const [state, setState] = useState('foo');
-    const [combinedState, setCombinedState] = useProvidedStateOrCreate(state, setState, 'bar');
-    if (combinedState !== 'baz') setCombinedState('baz');
-    return /*#__PURE__*/React.createElement("div", null, combinedState);
-  };
-
-  const doc = render( /*#__PURE__*/React.createElement(Component, null));
-  expect(doc.baseElement.textContent).toEqual('baz');
-});
-it('if not provided a state, will use an internal state', () => {
-  const Component = () => {
-    const state = undefined;
-    const setState = undefined;
-    const [combinedState, setCombinedState] = useProvidedStateOrCreate(state, setState, '');
-    if (combinedState !== 'bar') setCombinedState('bar');
-    return /*#__PURE__*/React.createElement("div", null, combinedState);
-  };
-
-  const doc = render( /*#__PURE__*/React.createElement(Component, null));
-  expect(doc.baseElement.textContent).toEqual('bar');
-});

package/lib-esm/__tests__/theme.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib-esm/__tests__/theme.test.js

@@ -1,33 +0,0 @@
-import { isShadowValue } from '../utils/theme';
-describe('isShadowValue', () => {
-  it('accepts transparent', () => {
-    expect(isShadowValue('0 0 0 transparent')).toBe(true);
-  });
-  it('accepts hex colors', () => {
-    expect(isShadowValue('0 0 0 #ff0000')).toBe(true);
-    expect(isShadowValue('0 0 0 #ff0')).toBe(true);
-  });
-  it('accepts rgba colors', () => {
-    expect(isShadowValue('0 0 0 rgb(255, 0, 0)')).toBe(true);
-    expect(isShadowValue('0 0 0 rgba(255,0,0,0.2)')).toBe(true);
-  });
-  it('accepts px values', () => {
-    expect(isShadowValue('12px 24px 0 #000')).toBe(true);
-  });
-  it('accepts em values', () => {
-    expect(isShadowValue('0.5em 1em 0 #000')).toBe(true);
-  });
-  it('accepts inset values', () => {
-    expect(isShadowValue('inset 12px 24px 0 #000')).toBe(true);
-  });
-  it('rejects individual colors', () => {
-    expect(isShadowValue('red')).toBe(false);
-    expect(isShadowValue('#f00')).toBe(false);
-    expect(isShadowValue('rgb(255, 0, 0)')).toBe(false);
-  });
-  it('rejects individual numeric values', () => {
-    expect(isShadowValue('0')).toBe(false);
-    expect(isShadowValue('12px')).toBe(false);
-    expect(isShadowValue('0.5em')).toBe(false);
-  });
-});

package/lib-esm/__tests__/themeGet.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib-esm/__tests__/themeGet.test.js

@@ -1,22 +0,0 @@
-import { themeGet } from '..';
-describe('themeGet', () => {
-  it('acccepts theme prop', () => {
-    expect(themeGet('example')({
-      theme: {
-        example: 'test'
-      }
-    })).toBe('test');
-  });
-  it('allows theme prop to override primer theme', () => {
-    expect(themeGet('colors.gray.0')({
-      theme: {
-        colors: {
-          gray: ['#f00']
-        }
-      }
-    })).toBe('#f00');
-  });
-  it('uses primer theme as fallback', () => {
-    expect(themeGet('space.1')({})).toBe('4px');
-  });
-});

package/lib-esm/__tests__/themePreval.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib-esm/__tests__/themePreval.test.js

@@ -1,7 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-test('snapshot theme-preval.js', () => {
-  // Snapshot test the build output of theme-preval.js to catch any unexpected changes
-  const themePrevalFile = fs.readFileSync(path.resolve(__dirname, '../../lib/theme-preval.js'), 'utf8');
-  expect(themePrevalFile).toMatchSnapshot();
-});

package/lib-esm/__tests__/useSafeTimeout.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib-esm/__tests__/useSafeTimeout.test.js

@@ -1,39 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks';
-import useSafeTimeout from '../hooks/useSafeTimeout';
-afterEach(() => {
-  jest.useRealTimers();
-});
-test('should call callback after time', async () => {
-  const {
-    result,
-    waitFor
-  } = renderHook(() => useSafeTimeout());
-  const mockFunction = jest.fn();
-  result.current.safeSetTimeout(mockFunction, 300);
-  await waitFor(() => expect(mockFunction).toHaveBeenCalled());
-});
-test('should clear timeouts when safeClearTimeout is called', () => {
-  jest.useFakeTimers();
-  jest.spyOn(global, 'clearTimeout');
-  const {
-    result
-  } = renderHook(() => useSafeTimeout());
-  const mockFunction = jest.fn();
-  const timeoutId = result.current.safeSetTimeout(mockFunction, 300);
-  result.current.safeClearTimeout(timeoutId);
-  expect(clearTimeout).toHaveBeenCalledTimes(1);
-  expect(clearTimeout).toHaveBeenLastCalledWith(timeoutId);
-});
-test('should clear timeouts when the component is unmounted', () => {
-  jest.useFakeTimers();
-  jest.spyOn(global, 'clearTimeout');
-  const {
-    result,
-    unmount
-  } = renderHook(() => useSafeTimeout());
-  const mockFunction = jest.fn();
-  const timeoutId = result.current.safeSetTimeout(mockFunction, 300);
-  unmount();
-  expect(clearTimeout).toHaveBeenCalledTimes(1);
-  expect(clearTimeout).toHaveBeenLastCalledWith(timeoutId);
-});

package/lib-esm/__tests__/utils/createSlots.test.d.ts

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