@primer/components 31.0.2-rc.c7dafefb → 31.2.0-rc.25d7c83f

package/lib/__tests__/TextInputWithTokens.test.js

@@ -60,6 +60,7 @@ const LabelledTextInputWithTokens = ({
   id: "tokenInput"
 }, rest)));
 
+jest.useFakeTimers();
 describe('TextInputWithTokens', () => {
   it('renders without tokens', () => {
     const onRemoveMock = jest.fn();
@@ -127,6 +128,14 @@ describe('TextInputWithTokens', () => {
       onTokenRemove: onRemoveMock
     }))).toMatchSnapshot();
   });
+  it('renders a truncated set of tokens', () => {
+    const onRemoveMock = jest.fn();
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_TextInputWithTokens.default, {
+      tokens: mockTokens,
+      onTokenRemove: onRemoveMock,
+      visibleTokenCount: 2
+    }))).toMatchSnapshot();
+  });
   it('focuses the previous token when keying ArrowLeft', () => {
     var _document$activeEleme, _document$activeEleme2;
 
@@ -250,8 +259,130 @@ describe('TextInputWithTokens', () => {
     expect((_document$activeEleme8 = document.activeElement) === null || _document$activeEleme8 === void 0 ? void 0 : _document$activeEleme8.id).not.toEqual(lastTokenNode.id);
     expect((_document$activeEleme9 = document.activeElement) === null || _document$activeEleme9 === void 0 ? void 0 : _document$activeEleme9.id).toEqual(inputNode.id);
   });
+  it('does not focus the input when clicking a token', () => {
+    var _document$activeEleme10;
+
+    const onRemoveMock = jest.fn();
+    const {
+      getByLabelText,
+      getByText
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(LabelledTextInputWithTokens, {
+      tokens: mockTokens,
+      onTokenRemove: onRemoveMock,
+      visibleTokenCount: 2
+    }));
+    const inputNode = getByLabelText('Tokens');
+    const tokenNode = getByText(mockTokens[0].text);
+    expect(document.activeElement).not.toEqual(inputNode.id);
+
+    _react2.fireEvent.click(tokenNode);
+
+    expect((_document$activeEleme10 = document.activeElement) === null || _document$activeEleme10 === void 0 ? void 0 : _document$activeEleme10.id).not.toEqual(inputNode.id);
+  });
+  it('focuses the input when clicking somewhere in the component besides the tokens', () => {
+    var _document$activeEleme11;
+
+    const onRemoveMock = jest.fn();
+    const {
+      getByLabelText,
+      getByText
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(LabelledTextInputWithTokens, {
+      tokens: mockTokens,
+      onTokenRemove: onRemoveMock,
+      visibleTokenCount: 2
+    }));
+    const inputNode = getByLabelText('Tokens');
+    const truncatedTokenCount = getByText('+6');
+    expect(document.activeElement).not.toEqual(inputNode.id);
+
+    _react2.fireEvent.click(truncatedTokenCount);
+
+    expect((_document$activeEleme11 = document.activeElement) === null || _document$activeEleme11 === void 0 ? void 0 : _document$activeEleme11.id).toEqual(inputNode.id);
+  });
+  it('shows all tokens when the input is focused and hides them when it is blurred (when visibleTokenCount is set)', () => {
+    const onRemoveMock = jest.fn();
+    const visibleTokenCount = 2;
+    const {
+      getByLabelText,
+      getByText
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(LabelledTextInputWithTokens, {
+      tokens: mockTokens,
+      onTokenRemove: onRemoveMock,
+      visibleTokenCount: visibleTokenCount
+    }), /*#__PURE__*/_react.default.createElement("button", {
+      id: "focusableOutsideComponent"
+    }, "Focus me")));
+    const inputNode = getByLabelText('Tokens');
+    const focusableOutsideComponentNode = getByText('Focus me');
+    const allTokenLabels = mockTokens.map(token => token.text);
+    const truncatedTokenCountNode = getByText('+6');
+    (0, _react2.act)(() => {
+      jest.runAllTimers();
+
+      _react2.fireEvent.focus(inputNode);
+    });
+    setTimeout(() => {
+      for (const tokenLabel of allTokenLabels) {
+        const tokenNode = getByText(tokenLabel);
+        expect(tokenNode).toBeDefined();
+      }
+    }, 0);
+    (0, _react2.act)(() => {
+      jest.runAllTimers(); // onBlur isn't called on input unless we specifically fire the "blur" event
+      // eslint-disable-next-line github/no-blur
+
+      _react2.fireEvent.blur(inputNode);
+
+      _react2.fireEvent.focus(focusableOutsideComponentNode);
+    });
+    setTimeout(() => {
+      expect(truncatedTokenCountNode).toBeDefined();
+
+      for (const tokenLabel of allTokenLabels) {
+        const tokenNode = getByText(tokenLabel);
+
+        if (allTokenLabels.indexOf(tokenLabel) > visibleTokenCount) {
+          // eslint-disable-next-line jest/no-conditional-expect
+          expect(tokenNode).toBeDefined();
+        } else {
+          // eslint-disable-next-line jest/no-conditional-expect
+          expect(tokenNode).not.toBeDefined();
+        }
+      }
+    }, 0);
+    jest.useRealTimers();
+  });
+  it('does not hide tokens when blurring the input to focus within the component (when visibleTokenCount is set)', () => {
+    const onRemoveMock = jest.fn();
+    const visibleTokenCount = 2;
+    const {
+      getByLabelText,
+      getByText
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(LabelledTextInputWithTokens, {
+      tokens: mockTokens,
+      onTokenRemove: onRemoveMock,
+      visibleTokenCount: visibleTokenCount
+    }), /*#__PURE__*/_react.default.createElement("button", {
+      id: "focusableOutsideComponent"
+    }, "Focus me")));
+    const inputNode = getByLabelText('Tokens');
+    const firstTokenNode = getByText(mockTokens[visibleTokenCount - 1].text);
+    const allTokenLabels = mockTokens.map(token => token.text);
+    const truncatedTokenCountNode = getByText('+6');
+    (0, _react2.act)(() => {
+      _react2.fireEvent.focus(inputNode);
+
+      _react2.fireEvent.focus(firstTokenNode);
+    });
+    expect(truncatedTokenCountNode).toBeDefined();
+
+    for (const tokenLabel of allTokenLabels) {
+      const tokenNode = getByText(tokenLabel);
+      expect(tokenNode).toBeDefined();
+    }
+  });
   it('focuses the first token when keying ArrowRight in the input', () => {
-    var _document$activeEleme10, _document$activeEleme11;
+    var _document$activeEleme12, _document$activeEleme13;
 
     const onRemoveMock = jest.fn();
     const {
@@ -271,8 +402,8 @@ describe('TextInputWithTokens', () => {
       key: 'ArrowRight'
     });
 
-    expect((_document$activeEleme10 = document.activeElement) === null || _document$activeEleme10 === void 0 ? void 0 : _document$activeEleme10.id).not.toEqual(inputNode.id);
-    expect((_document$activeEleme11 = document.activeElement) === null || _document$activeEleme11 === void 0 ? void 0 : _document$activeEleme11.id).toEqual(firstTokenNode.id);
+    expect((_document$activeEleme12 = document.activeElement) === null || _document$activeEleme12 === void 0 ? void 0 : _document$activeEleme12.id).not.toEqual(inputNode.id);
+    expect((_document$activeEleme13 = document.activeElement) === null || _document$activeEleme13 === void 0 ? void 0 : _document$activeEleme13.id).toEqual(firstTokenNode.id);
   });
   it('calls onTokenRemove on the last token when keying Backspace in an empty input', () => {
     const onRemoveMock = jest.fn();
@@ -372,9 +503,9 @@ describe('TextInputWithTokens', () => {
 
     jest.runAllTimers();
     setTimeout(() => {
-      var _document$activeEleme12;
+      var _document$activeEleme14;
 
-      expect((_document$activeEleme12 = document.activeElement) === null || _document$activeEleme12 === void 0 ? void 0 : _document$activeEleme12.textContent).toBe(mockTokens[1].text);
+      expect((_document$activeEleme14 = document.activeElement) === null || _document$activeEleme14 === void 0 ? void 0 : _document$activeEleme14.textContent).toBe(mockTokens[1].text);
     }, 0);
     jest.useRealTimers();
   });
@@ -399,9 +530,9 @@ describe('TextInputWithTokens', () => {
 
     jest.runAllTimers();
     setTimeout(() => {
-      var _document$activeEleme13;
+      var _document$activeEleme15;
 
-      expect((_document$activeEleme13 = document.activeElement) === null || _document$activeEleme13 === void 0 ? void 0 : _document$activeEleme13.id).toBe(inputNode.id);
+      expect((_document$activeEleme15 = document.activeElement) === null || _document$activeEleme15 === void 0 ? void 0 : _document$activeEleme15.id).toBe(inputNode.id);
     }, 0);
     jest.useRealTimers();
   });

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/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 () => {