@primer/components 32.1.0 → 33.0.0-rc.b495ba4a

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

@@ -0,0 +1,226 @@
+"use strict";
+
+var _scrollIntoViewingArea = 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.
+
+
+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;
+
+    (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
+      });
+    });
+  });
+  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
+      });
+    });
+    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
+      });
+    });
+  });
+});

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

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

package/lib/__tests__/filterObject.test.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _theme = 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']
+      }
+    };
+    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);
+  });
+});

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

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

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

@@ -0,0 +1,54 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useAnchoredPosition = require("../../hooks/useAnchoredPosition");
+
+var _react2 = require("@testing-library/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Component = ({
+  callback
+}) => {
+  const floatingElementRef = _react.default.useRef(null);
+
+  const anchorElementRef = _react.default.useRef(null);
+
+  callback((0, _useAnchoredPosition.useAnchoredPosition)({
+    floatingElementRef,
+    anchorElementRef
+  }));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      position: 'absolute'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: '20px',
+      left: '20px',
+      height: '50px',
+      width: '50px'
+    },
+    ref: floatingElementRef
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    ref: anchorElementRef
+  }));
+};
+
+Component.displayName = "Component";
+it('should should return a position', () => {
+  const cb = jest.fn();
+  (0, _react2.render)( /*#__PURE__*/_react.default.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/__tests__/hooks/useOnEscapePress.test.d.ts

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

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

@@ -0,0 +1,32 @@
+"use strict";
+
+var _useOnEscapePress = require("../../hooks/useOnEscapePress");
+
+var _react = require("@testing-library/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+it('should call function when user presses escape', () => {
+  const functionToCall = jest.fn();
+
+  const Component = () => {
+    (0, _useOnEscapePress.useOnEscapePress)(functionToCall);
+    return /*#__PURE__*/_react2.default.createElement("div", null, "content");
+  };
+
+  const {
+    getByText
+  } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(Component, null));
+  const domNode = getByText('content');
+
+  _react.fireEvent.keyDown(domNode, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+
+  expect(functionToCall).toHaveBeenCalledTimes(1);
+});

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

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

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

@@ -0,0 +1,87 @@
+"use strict";
+
+var _useOnOutsideClick = require("../../hooks/useOnOutsideClick");
+
+var _react = require("@testing-library/react");
+
+var _react2 = _interopRequireWildcard(require("react"));
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Component = ({
+  callback
+}) => {
+  const containerRef = (0, _react2.useRef)(null);
+  const outerButton = (0, _react2.useRef)(null);
+  const secondButton = (0, _react2.useRef)(null);
+  (0, _useOnOutsideClick.useOnOutsideClick)({
+    ignoreClickRefs: [secondButton],
+    containerRef,
+    onClickOutside: callback
+  });
+  return /*#__PURE__*/_react2.default.createElement("div", null, /*#__PURE__*/_react2.default.createElement("button", {
+    ref: outerButton
+  }, "button"), /*#__PURE__*/_react2.default.createElement("button", {
+    ref: secondButton
+  }, "button two"), /*#__PURE__*/_react2.default.createElement("div", {
+    ref: containerRef
+  }, "content"));
+};
+
+Component.displayName = "Component";
+it('should call function when user clicks outside container', () => {
+  const mockFunction = jest.fn();
+  const {
+    getByText
+  } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(Component, {
+    callback: mockFunction
+  }));
+
+  _userEvent.default.click(getByText('button'));
+
+  expect(mockFunction).toHaveBeenCalledTimes(1);
+});
+it('should not call function when user right clicks', () => {
+  const mockFunction = jest.fn();
+  const {
+    getByText
+  } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(Component, {
+    callback: mockFunction
+  }));
+
+  _userEvent.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
+  } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(Component, {
+    callback: mockFunction
+  }));
+
+  _userEvent.default.click(getByText('button two'));
+
+  expect(mockFunction).toHaveBeenCalledTimes(0);
+});
+it('should not call function when clicking inside container', () => {
+  const mockFunction = jest.fn();
+  const {
+    getByText
+  } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(Component, {
+    callback: mockFunction
+  }));
+
+  _userEvent.default.click(getByText('content'));
+
+  expect(mockFunction).toHaveBeenCalledTimes(0);
+});

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

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

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

@@ -0,0 +1,60 @@
+"use strict";
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _useOpenAndCloseFocus = require("../../hooks/useOpenAndCloseFocus");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Component = () => {
+  const containerRef = (0, _react.useRef)(null);
+  const returnFocusRef = (0, _react.useRef)(null);
+  const noButtonRef = (0, _react.useRef)(null);
+  (0, _useOpenAndCloseFocus.useOpenAndCloseFocus)({
+    containerRef,
+    initialFocusRef: noButtonRef,
+    returnFocusRef
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    ref: returnFocusRef
+  }, "trigger"), /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef
+  }, /*#__PURE__*/_react.default.createElement("button", null, "yes"), /*#__PURE__*/_react.default.createElement("button", {
+    ref: noButtonRef
+  }, "no")));
+};
+
+const ComponentTwo = () => {
+  const buttonRef = (0, _react.useRef)(null);
+  const containerRef = (0, _react.useRef)(null);
+  (0, _useOpenAndCloseFocus.useOpenAndCloseFocus)({
+    containerRef,
+    returnFocusRef: buttonRef
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    ref: buttonRef
+  }, "button trigger"), /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef
+  }, /*#__PURE__*/_react.default.createElement("button", null, "yes"), /*#__PURE__*/_react.default.createElement("button", null, "no")));
+};
+
+it('should focus element passed into function', async () => {
+  const {
+    getByText
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Component, null));
+  await (0, _react2.waitFor)(() => getByText('no'));
+  const noButton = getByText('no');
+  expect(document.activeElement).toEqual(noButton);
+});
+it('should focus first element when nothing is passed', async () => {
+  const {
+    getByText
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(ComponentTwo, null));
+  await (0, _react2.waitFor)(() => getByText('yes'));
+  const yesButton = getByText('yes');
+  expect(document.activeElement).toEqual(yesButton);
+});

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

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

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

@@ -0,0 +1,45 @@
+"use strict";
+
+var _useProvidedStateOrCreate = require("../../hooks/useProvidedStateOrCreate");
+
+var _react = require("@testing-library/react");
+
+var _react2 = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+it('will use the provided state', () => {
+  const Component = () => {
+    const [state, setState] = (0, _react2.useState)('foo');
+    const [combinedState] = (0, _useProvidedStateOrCreate.useProvidedStateOrCreate)(state, setState, 'bar');
+    return /*#__PURE__*/_react2.default.createElement("div", null, combinedState);
+  };
+
+  const doc = (0, _react.render)( /*#__PURE__*/_react2.default.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] = (0, _react2.useState)('foo');
+    const [combinedState, setCombinedState] = (0, _useProvidedStateOrCreate.useProvidedStateOrCreate)(state, setState, 'bar');
+    if (combinedState !== 'baz') setCombinedState('baz');
+    return /*#__PURE__*/_react2.default.createElement("div", null, combinedState);
+  };
+
+  const doc = (0, _react.render)( /*#__PURE__*/_react2.default.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] = (0, _useProvidedStateOrCreate.useProvidedStateOrCreate)(state, setState, '');
+    if (combinedState !== 'bar') setCombinedState('bar');
+    return /*#__PURE__*/_react2.default.createElement("div", null, combinedState);
+  };
+
+  const doc = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(Component, null));
+  expect(doc.baseElement.textContent).toEqual('bar');
+});

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

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

package/lib/__tests__/theme.test.js

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

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

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

package/lib/__tests__/themeGet.test.js

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

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

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

package/lib/__tests__/themePreval.test.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _fs = _interopRequireDefault(require("fs"));
+
+var _path = _interopRequireDefault(require("path"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+test('snapshot theme-preval.js', () => {
+  // Snapshot test the build output of theme-preval.js to catch any unexpected changes
+  const themePrevalFile = _fs.default.readFileSync(_path.default.resolve(__dirname, '../../lib/theme-preval.js'), 'utf8');
+
+  expect(themePrevalFile).toMatchSnapshot();
+});

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

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