@primer/components 31.0.2-rc.1e80de40 → 31.0.2-rc.95622264

package/docs/content/TextInputWithTokens.mdx

@@ -48,6 +48,7 @@ render(BasicExample)
 | preventTokenWrapping   | `boolean`                             |   `false`    | Optional. Whether tokens should render inline horizontally. By default, tokens wrap to new lines.                         |
 | size                   | `TokenSizeKeys`                       | `extralarge` | Optional. The size of the tokens                                                                                          |
 | hideTokenRemoveButtons | `boolean`                             |   `false`    | Optional. Whether the remove buttons should be rendered in the tokens                                                     |
+| visibleTokenCount      | `number`                              | `undefined`  | Optional. The number of tokens to display before truncating                                                               |
 
 ## Adding and removing tokens
 
@@ -95,3 +96,116 @@ const UsingIssueLabelTokens = () => {
 
 render(<UsingIssueLabelTokens />)
 ```
+
+## Dealing with long lists of tokens
+
+By default, all tokens will be visible when the component is rendered.
+
+If the component is being used in an area where it's height needs to be constrained, there are options to limit the height of the input.
+
+### Hide and show tokens
+
+```javascript live noinline
+const VisibleTokenCountExample = () => {
+  const [tokens, setTokens] = React.useState([
+    {text: 'zero', id: 0},
+    {text: 'one', id: 1},
+    {text: 'two', id: 2},
+    {text: 'three', id: 3}
+  ])
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId))
+  }
+
+  return (
+    <Box maxWidth="500px">
+      <Box as="label" display="block" htmlFor="inputWithTokens-basic">
+        Tokens truncated after 2
+      </Box>
+      <TextInputWithTokens
+        visibleTokenCount={2}
+        block
+        tokens={tokens}
+        onTokenRemove={onTokenRemove}
+        id="inputWithTokens-basic"
+      />
+    </Box>
+  )
+}
+
+render(VisibleTokenCountExample)
+```
+
+### Render tokens on a single line
+
+```javascript live noinline
+const PreventTokenWrappingExample = () => {
+  const [tokens, setTokens] = React.useState([
+    {text: 'zero', id: 0},
+    {text: 'one', id: 1},
+    {text: 'two', id: 2},
+    {text: 'three', id: 3},
+    {text: 'four', id: 4},
+    {text: 'five', id: 5},
+    {text: 'six', id: 6},
+    {text: 'seven', id: 7}
+  ])
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId))
+  }
+
+  return (
+    <Box maxWidth="500px">
+      <Box as="label" display="block" htmlFor="inputWithTokens-basic">
+        Tokens on one line
+      </Box>
+      <TextInputWithTokens
+        preventTokenWrapping
+        block
+        tokens={tokens}
+        onTokenRemove={onTokenRemove}
+        id="inputWithTokens-basic"
+      />
+    </Box>
+  )
+}
+
+render(PreventTokenWrappingExample)
+```
+
+### Set a maximum height for the input
+
+```javascript live noinline
+const MaxHeightExample = () => {
+  const [tokens, setTokens] = React.useState([
+    {text: 'zero', id: 0},
+    {text: 'one', id: 1},
+    {text: 'two', id: 2},
+    {text: 'three', id: 3},
+    {text: 'four', id: 4},
+    {text: 'five', id: 5},
+    {text: 'six', id: 6},
+    {text: 'seven', id: 7}
+  ])
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId))
+  }
+
+  return (
+    <Box maxWidth="500px">
+      <Box as="label" display="block" htmlFor="inputWithTokens-basic">
+        Tokens restricted to a max height
+      </Box>
+      <TextInputWithTokens
+        maxHeight="50px"
+        block
+        tokens={tokens}
+        onTokenRemove={onTokenRemove}
+        id="inputWithTokens-basic"
+      />
+    </Box>
+  )
+}
+
+render(MaxHeightExample)
+```

package/lib/TextInputWithTokens.d.ts

@@ -32,6 +32,10 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
      * Whether the remove buttons should be rendered in the tokens
      */
     hideTokenRemoveButtons?: boolean | undefined;
+    /**
+     * The number of tokens to display before truncating
+     */
+    visibleTokenCount?: number | undefined;
 } & Pick<Omit<Pick<{
     [x: string]: any;
     [x: number]: any;

package/lib/TextInputWithTokens.js

@@ -25,6 +25,10 @@ var _TextInputWrapper = _interopRequireDefault(require("./_TextInputWrapper"));
 
 var _Box = _interopRequireDefault(require("./Box"));
 
+var _Text = _interopRequireDefault(require("./Text"));
+
+var _iterateFocusableElements = require("./utils/iterateFocusableElements");
+
 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); }
@@ -33,7 +37,13 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-// using forwardRef is important so that other components (ex. Autocomplete) can use the ref
+const overflowCountFontSizeMap = {
+  small: 0,
+  medium: 1,
+  large: 1,
+  extralarge: 2
+}; // using forwardRef is important so that other components (ex. Autocomplete) can use the ref
+
 function TextInputWithTokensInnerComponent({
   icon: IconComponent,
   contrast,
@@ -53,9 +63,11 @@ function TextInputWithTokensInnerComponent({
   minWidth: minWidthProp,
   maxWidth: maxWidthProp,
   variant: variantProp,
+  visibleTokenCount,
   ...rest
 }, externalRef) {
   const {
+    onBlur,
     onFocus,
     onKeyDown,
     ...inputPropsRest
@@ -64,6 +76,7 @@ function TextInputWithTokensInnerComponent({
   const localInputRef = (0, _react.useRef)(null);
   const combinedInputRef = (0, _useCombinedRefs.useCombinedRefs)(localInputRef, ref);
   const [selectedTokenIndex, setSelectedTokenIndex] = (0, _react.useState)();
+  const [tokensAreTruncated, setTokensAreTruncated] = (0, _react.useState)(Boolean(visibleTokenCount));
   const {
     containerRef
   } = (0, _useFocusZone.useFocusZone)({
@@ -98,14 +111,25 @@ function TextInputWithTokensInnerComponent({
   }, [selectedTokenIndex]);
 
   const handleTokenRemove = tokenId => {
-    onTokenRemove(tokenId);
+    onTokenRemove(tokenId); // HACK: wait a tick for the the token node to be removed from the DOM
 
-    if (selectedTokenIndex) {
-      var _containerRef$current2;
+    setTimeout(() => {
+      var _containerRef$current2, _containerRef$current3;
 
-      const nextElementToFocus = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.children[selectedTokenIndex];
-      nextElementToFocus.focus();
-    }
+      const nextElementToFocus = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.children[selectedTokenIndex || 0]; // when removing the first token by keying "Backspace" or "Delete",
+      // `nextFocusableElement` is the div that wraps the input
+
+      const firstFocusable = nextElementToFocus && (0, _iterateFocusableElements.isFocusable)(nextElementToFocus) ? nextElementToFocus : Array.from(((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.children) || []).find(el => (0, _iterateFocusableElements.isFocusable)(el));
+
+      if (firstFocusable) {
+        firstFocusable.focus();
+      } else {
+        var _ref$current;
+
+        // if there are no tokens left, focus the input
+        (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+      }
+    }, 0);
   };
 
   const handleTokenFocus = tokenIndex => () => {
@@ -113,30 +137,55 @@ function TextInputWithTokensInnerComponent({
   };
 
   const handleTokenBlur = () => {
-    setSelectedTokenIndex(undefined);
+    setSelectedTokenIndex(undefined); // HACK: wait a tick and check the focused element before hiding truncated tokens
+    // this prevents the tokens from hiding when the user is moving focus between tokens,
+    // but still hides the tokens when the user blurs the token by tabbing out or clicking somewhere else on the page
+
+    setTimeout(() => {
+      var _containerRef$current4;
+
+      if (!((_containerRef$current4 = containerRef.current) !== null && _containerRef$current4 !== void 0 && _containerRef$current4.contains(document.activeElement)) && visibleTokenCount) {
+        setTokensAreTruncated(true);
+      }
+    }, 0);
   };
 
-  const handleTokenKeyUp = e => {
-    if (e.key === 'Escape') {
-      var _ref$current;
+  const handleTokenKeyUp = event => {
+    if (event.key === 'Escape') {
+      var _ref$current2;
 
-      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+      (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus();
     }
   };
 
-  const handleInputFocus = e => {
-    onFocus && onFocus(e);
+  const handleInputFocus = event => {
+    onFocus && onFocus(event);
     setSelectedTokenIndex(undefined);
+    visibleTokenCount && setTokensAreTruncated(false);
+  };
+
+  const handleInputBlur = event => {
+    onBlur && onBlur(event); // HACK: wait a tick and check the focused element before hiding truncated tokens
+    // this prevents the tokens from hiding when the user is moving focus from the input to a token,
+    // but still hides the tokens when the user blurs the input by tabbing out or clicking somewhere else on the page
+
+    setTimeout(() => {
+      var _containerRef$current5;
+
+      if (!((_containerRef$current5 = containerRef.current) !== null && _containerRef$current5 !== void 0 && _containerRef$current5.contains(document.activeElement)) && visibleTokenCount) {
+        setTokensAreTruncated(true);
+      }
+    }, 0);
   };
 
   const handleInputKeyDown = e => {
-    var _ref$current2;
+    var _ref$current3;
 
     if (onKeyDown) {
       onKeyDown(e);
     }
 
-    if ((_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.value) {
+    if ((_ref$current3 = ref.current) !== null && _ref$current3 !== void 0 && _ref$current3.value) {
       return;
     }
 
@@ -157,13 +206,24 @@ function TextInputWithTokensInnerComponent({
 
 
       setTimeout(() => {
-        var _ref$current3;
+        var _ref$current4;
 
-        (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.select();
+        (_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.select();
       }, 0);
     }
   };
 
+  const focusInput = () => {
+    var _combinedInputRef$cur;
+
+    (_combinedInputRef$cur = combinedInputRef.current) === null || _combinedInputRef$cur === void 0 ? void 0 : _combinedInputRef$cur.focus();
+  };
+
+  const preventTokenClickPropagation = event => {
+    event.stopPropagation();
+  };
+
+  const visibleTokens = tokensAreTruncated ? tokens.slice(0, visibleTokenCount) : tokens;
   return /*#__PURE__*/_react.default.createElement(_TextInputWrapper.default, {
     block: block,
     className: className,
@@ -175,6 +235,7 @@ function TextInputWithTokensInnerComponent({
     minWidth: minWidthProp,
     maxWidth: maxWidthProp,
     variant: variantProp,
+    onClick: focusInput,
     sx: { ...(block ? {
         display: 'flex',
         width: '100%'
@@ -214,12 +275,13 @@ function TextInputWithTokensInnerComponent({
     ref: combinedInputRef,
     disabled: disabled,
     onFocus: handleInputFocus,
+    onBlur: handleInputBlur,
     onKeyDown: handleInputKeyDown,
     type: "text",
     sx: {
       height: '100%'
     }
-  }, inputPropsRest))), tokens.length && TokenComponent ? tokens.map(({
+  }, inputPropsRest))), TokenComponent ? visibleTokens.map(({
     id,
     ...tokenRest
   }, i) => /*#__PURE__*/_react.default.createElement(TokenComponent, _extends({
@@ -227,6 +289,7 @@ function TextInputWithTokensInnerComponent({
     onFocus: handleTokenFocus(i),
     onBlur: handleTokenBlur,
     onKeyUp: handleTokenKeyUp,
+    onClick: preventTokenClickPropagation,
     isSelected: selectedTokenIndex === i,
     onRemove: () => {
       handleTokenRemove(id);
@@ -234,7 +297,10 @@ function TextInputWithTokensInnerComponent({
     hideRemoveButton: hideTokenRemoveButtons,
     size: size,
     tabIndex: 0
-  }, tokenRest))) : null));
+  }, tokenRest))) : null, tokensAreTruncated ? /*#__PURE__*/_react.default.createElement(_Text.default, {
+    color: "fg.muted",
+    fontSize: size && overflowCountFontSizeMap[size]
+  }, "+", tokens.length - visibleTokens.length) : null));
 }
 
 TextInputWithTokensInnerComponent.displayName = "TextInputWithTokensInnerComponent";

package/lib/_TextInputWrapper.js

@@ -39,7 +39,7 @@ const sizeVariants = (0, _styledSystem.variant)({
 const TextInputWrapper = _styledComponents.default.span.withConfig({
   displayName: "_TextInputWrapper__TextInputWrapper",
   componentId: "sc-5vfcis-0"
-})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.primer.shadow.inset'), props => {
+})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";cursor:text;", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.primer.shadow.inset'), props => {
   if (props.hasIcon) {
     return (0, _styledComponents.css)(["padding:0;"]);
   } else {

package/lib/__tests__/TextInputWithTokens.test.js

@@ -58,8 +58,18 @@ const LabelledTextInputWithTokens = ({
   tokens: tokens,
   onTokenRemove: onTokenRemove,
   id: "tokenInput"
-}, rest)));
-
+}, 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()
+//   })
+// })
+
+
+jest.useFakeTimers();
 describe('TextInputWithTokens', () => {
   it('renders without tokens', () => {
     const onRemoveMock = jest.fn();
@@ -127,6 +137,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 +268,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 +411,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();
@@ -353,6 +493,58 @@ describe('TextInputWithTokens', () => {
 
     expect(onRemoveMock).toHaveBeenCalledWith(mockTokens[4].id);
   });
+  it('moves focus to the next token when removing the first token', () => {
+    jest.useFakeTimers();
+    const onRemoveMock = jest.fn();
+    const {
+      getByText
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_TextInputWithTokens.default, {
+      tokens: [...mockTokens].slice(0, 2),
+      onTokenRemove: onRemoveMock
+    }));
+    const tokenNode = getByText(mockTokens[0].text);
+
+    _react2.fireEvent.focus(tokenNode);
+
+    _react2.fireEvent.keyDown(tokenNode, {
+      key: 'Backspace'
+    });
+
+    jest.runAllTimers();
+    setTimeout(() => {
+      var _document$activeEleme14;
+
+      expect((_document$activeEleme14 = document.activeElement) === null || _document$activeEleme14 === void 0 ? void 0 : _document$activeEleme14.textContent).toBe(mockTokens[1].text);
+    }, 0);
+    jest.useRealTimers();
+  });
+  it('moves focus to the input when the last token is removed', () => {
+    jest.useFakeTimers();
+    const onRemoveMock = jest.fn();
+    const {
+      getByText,
+      getByLabelText
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(LabelledTextInputWithTokens, {
+      tokens: [mockTokens[0]],
+      onTokenRemove: onRemoveMock
+    }));
+    const tokenNode = getByText(mockTokens[0].text);
+    const inputNode = getByLabelText('Tokens');
+
+    _react2.fireEvent.focus(tokenNode);
+
+    _react2.fireEvent.keyDown(tokenNode, {
+      key: 'Backspace'
+    });
+
+    jest.runAllTimers();
+    setTimeout(() => {
+      var _document$activeEleme15;
+
+      expect((_document$activeEleme15 = document.activeElement) === null || _document$activeEleme15 === void 0 ? void 0 : _document$activeEleme15.id).toBe(inputNode.id);
+    }, 0);
+    jest.useRealTimers();
+  });
   it('calls onKeyDown', () => {
     const onRemoveMock = jest.fn();
     const onKeyDownMock = jest.fn();

package/lib/stories/TextInputWithTokens.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Unstyled = exports.TokenRemoveButtonsHidden = exports.TokenWrappingPrevented = exports.MaxHeight = exports.TokenSizeVariants = exports.UsingIssueLabelTokens = exports.Default = exports.default = void 0;
+exports.Unstyled = exports.WithVisibleTokenCount = exports.TokenRemoveButtonsHidden = exports.TokenWrappingPrevented = exports.MaxHeight = exports.TokenSizeVariants = exports.UsingIssueLabelTokens = exports.Default = exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -72,7 +72,7 @@ const mockTokens = [{
 }];
 
 const Default = () => {
-  const [tokens, setTokens] = (0, _react.useState)([...mockTokens].slice(0, 2));
+  const [tokens, setTokens] = (0, _react.useState)([...mockTokens].slice(0, 3));
 
   const onTokenRemove = tokenId => {
     setTokens(tokens.filter(token => token.id !== tokenId));
@@ -208,6 +208,23 @@ const TokenRemoveButtonsHidden = () => {
 exports.TokenRemoveButtonsHidden = TokenRemoveButtonsHidden;
 TokenRemoveButtonsHidden.displayName = "TokenRemoveButtonsHidden";
 
+const WithVisibleTokenCount = () => {
+  const [tokens, setTokens] = (0, _react.useState)([...mockTokens].slice(0, 5));
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_TextInputWithTokens.default, {
+    tokens: tokens,
+    onTokenRemove: onTokenRemove,
+    visibleTokenCount: 2
+  });
+};
+
+exports.WithVisibleTokenCount = WithVisibleTokenCount;
+WithVisibleTokenCount.displayName = "WithVisibleTokenCount";
+
 const Unstyled = () => {
   const [tokens, setTokens] = (0, _react.useState)([...mockTokens].slice(0, 2));
 

package/lib-esm/TextInputWithTokens.d.ts

@@ -32,6 +32,10 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
      * Whether the remove buttons should be rendered in the tokens
      */
     hideTokenRemoveButtons?: boolean | undefined;
+    /**
+     * The number of tokens to display before truncating
+     */
+    visibleTokenCount?: number | undefined;
 } & Pick<Omit<Pick<{
     [x: string]: any;
     [x: number]: any;