@primer/components 31.2.0-rc.5ccefd7d → 31.2.0-rc.5e503f97

package/lib/__tests__/ActionList2.test.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+require("babel-polyfill");
+
+var _jestAxe = require("jest-axe");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _theme = _interopRequireDefault(require("../theme"));
+
+var _ActionList = require("../ActionList2");
+
+var _testing = require("../utils/testing");
+
+var _ = require("..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+
+function SimpleActionList() {
+  return /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+    theme: _theme.default
+  }, /*#__PURE__*/_react2.default.createElement(_.SSRProvider, null, /*#__PURE__*/_react2.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList, null, /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Item, null, "New file"), /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Divider, null), /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Item, null, "Copy link"), /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Item, null, "Edit file"), /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList.Item, {
+    variant: "danger"
+  }, "Delete file")))));
+}
+
+SimpleActionList.displayName = "SimpleActionList";
+describe('ActionList', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _ActionList.ActionList,
+    options: {
+      skipAs: true,
+      skipSx: true
+    },
+    toRender: () => /*#__PURE__*/_react2.default.createElement(_ActionList.ActionList, null)
+  });
+  (0, _testing.checkExports)('ActionList2', {
+    default: undefined,
+    ActionList: _ActionList.ActionList
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(SimpleActionList, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react.cleanup)();
+  });
+});

package/lib/__tests__/AnchoredOverlay.test.js

@@ -152,9 +152,11 @@ describe('AnchoredOverlay', () => {
     expect(mockCloseCallback).toHaveBeenCalledWith('escape');
   });
   it('should render consistently when open', () => {
-    const anchoredOverlay = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(AnchoredOverlayTestComponent, {
       initiallyOpen: true
     }));
-    expect(anchoredOverlay).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 });

package/lib/__tests__/TextInputWithTokens.test.js

@@ -58,16 +58,7 @@ const LabelledTextInputWithTokens = ({
   tokens: tokens,
   onTokenRemove: onTokenRemove,
   id: "tokenInput"
-}, rest))); // describe('axe test', () => {
-//   it('should have no axe violations', async () => {
-//     const onRemoveMock = jest.fn()
-//     const {container} = HTMLRender(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />)
-//     const results = await axe(container)
-//     expect(results).toHaveNoViolations()
-//     cleanup()
-//   })
-// })
-
+}, rest)));
 
 jest.useFakeTimers();
 describe('TextInputWithTokens', () => {

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

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

package/lib/__tests__/utils/createSlots.test.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+require("babel-polyfill");
+
+var _react2 = require("@testing-library/react");
+
+var _createSlots = _interopRequireDefault(require("../../utils/create-slots"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// setup a component with slots
+const {
+  Slots,
+  Slot
+} = (0, _createSlots.default)(['One', 'Two', 'Three']);
+
+const ComponentWithSlots = ({
+  salutation,
+  children
+}) => {
+  return /*#__PURE__*/_react.default.createElement(Slots, {
+    context: {
+      salutation
+    }
+  }, slots => /*#__PURE__*/_react.default.createElement("div", null, slots.One, /*#__PURE__*/_react.default.createElement("span", null, children, " ", slots.Two, " ", slots.Three)));
+};
+
+ComponentWithSlots.displayName = "ComponentWithSlots";
+
+const SlotItem1 = ({
+  children
+}) => /*#__PURE__*/_react.default.createElement(Slot, {
+  name: "One"
+}, children);
+
+SlotItem1.displayName = "SlotItem1";
+
+const SlotItem2 = ({
+  children
+}) => /*#__PURE__*/_react.default.createElement(Slot, {
+  name: "Two"
+}, children);
+
+SlotItem2.displayName = "SlotItem2";
+
+const SlotItem3 = ({
+  children
+}) => /*#__PURE__*/_react.default.createElement(Slot, {
+  name: "Three"
+}, context => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, context.salutation, " ", children));
+
+SlotItem3.displayName = "SlotItem3";
+describe('ComponentWithSlots', () => {
+  it('renders all slots', async () => {
+    const component = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(ComponentWithSlots, null, /*#__PURE__*/_react.default.createElement(SlotItem1, null, "first"), /*#__PURE__*/_react.default.createElement(SlotItem2, null, "second"), "free form"));
+    await (0, _react2.waitFor)(() => component.getByText('first'));
+    expect(component.container).toMatchSnapshot();
+  });
+  it('renders without any slots', async () => {
+    const component = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(ComponentWithSlots, null, "free form"));
+    expect(component.container).toMatchSnapshot();
+  });
+  it('renders with just one slot', async () => {
+    const component = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(ComponentWithSlots, null, /*#__PURE__*/_react.default.createElement(SlotItem1, null, "first"), "free form"));
+    expect(component.container).toMatchSnapshot();
+  });
+  it('renders with context passed to children', async () => {
+    const component = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(ComponentWithSlots, {
+      salutation: "hi"
+    }, /*#__PURE__*/_react.default.createElement(SlotItem3, null, "third"), "free form"));
+    expect(component.container).toMatchSnapshot();
+  });
+});

package/lib/drafts.d.ts

@@ -0,0 +1,7 @@
+/** This is the place where we keep components that are not part of the public
+ *  api yet (not in main bundle). We don't recommend using it in production.
+ *
+ *  But, they are published on npm and you can import them for experimentation/feedback.
+ *  example: import {ActionList} from '@primer/components/drafts
+ */
+export * from './ActionList2';

package/lib/drafts.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _ActionList = require("./ActionList2");
+
+Object.keys(_ActionList).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ActionList[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ActionList[key];
+    }
+  });
+});

package/lib/hooks/useAnchoredPosition.js

@@ -13,6 +13,8 @@ var _useProvidedRefOrCreate = require("./useProvidedRefOrCreate");
 
 var _useResizeObserver = require("./useResizeObserver");
 
+var _useIsomorphicLayoutEffect = _interopRequireDefault(require("../utils/useIsomorphicLayoutEffect"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -39,8 +41,7 @@ function useAnchoredPosition(settings, dependencies = []) {
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
   [floatingElementRef, anchorElementRef, ...dependencies]);
 
-  _react.default.useLayoutEffect(updatePosition, [updatePosition]);
-
+  (0, _useIsomorphicLayoutEffect.default)(updatePosition, [updatePosition]);
   (0, _useResizeObserver.useResizeObserver)(updatePosition);
   return {
     floatingElementRef,

package/lib/hooks/useCombinedRefs.d.ts

@@ -1,4 +1,4 @@
-import React, { ForwardedRef } from 'react';
+import { ForwardedRef } from 'react';
 /**
  * Creates a ref by combining multiple constituent refs. The ref returned by this hook
  * should be passed as the ref for the element that needs to be shared. This is
@@ -7,4 +7,4 @@ import React, { ForwardedRef } from 'react';
  * though, as it breaks encapsulation.
  * @param refs
  */
-export declare function useCombinedRefs<T>(...refs: (ForwardedRef<T> | null | undefined)[]): React.MutableRefObject<T | null>;
+export declare function useCombinedRefs<T>(...refs: (ForwardedRef<T> | null | undefined)[]): import("react").MutableRefObject<T | null>;

package/lib/hooks/useCombinedRefs.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useCombinedRefs = useCombinedRefs;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = 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); }
+var _useIsomorphicLayoutEffect = _interopRequireDefault(require("../utils/useIsomorphicLayoutEffect"));
 
-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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
  * Creates a ref by combining multiple constituent refs. The ref returned by this hook
@@ -21,8 +21,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 function useCombinedRefs(...refs) {
   const combinedRef = (0, _react.useRef)(null);
-
-  _react.default.useLayoutEffect(() => {
+  (0, _useIsomorphicLayoutEffect.default)(() => {
     function setRefs(current = null) {
       for (const ref of refs) {
         if (!ref) {
@@ -44,6 +43,5 @@ function useCombinedRefs(...refs) {
       setRefs(combinedRef.current);
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [...refs, combinedRef.current]);
-
   return combinedRef;
 }

package/lib/hooks/useResizeObserver.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useResizeObserver = useResizeObserver;
 
-var _react = _interopRequireDefault(require("react"));
+var _useIsomorphicLayoutEffect = _interopRequireDefault(require("../utils/useIsomorphicLayoutEffect"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function useResizeObserver(callback) {
-  _react.default.useLayoutEffect(() => {
+  (0, _useIsomorphicLayoutEffect.default)(() => {
     const observer = new window.ResizeObserver(() => callback());
     observer.observe(document.documentElement);
     return () => {