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

package/lib-esm/TextInputWithTokens.js

@@ -9,9 +9,17 @@ import Token from './Token/Token';
 import { useProvidedRefOrCreate } from './hooks';
 import UnstyledTextInput from './_UnstyledTextInput';
 import TextInputWrapper from './_TextInputWrapper';
-import Box from './Box'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import Box from './Box';
+import Text from './Text';
+import { isFocusable } from './utils/iterateFocusableElements'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+const overflowCountFontSizeMap = {
+  small: 0,
+  medium: 1,
+  large: 1,
+  extralarge: 2
+}; // using forwardRef is important so that other components (ex. Autocomplete) can use the ref
 
-// using forwardRef is important so that other components (ex. Autocomplete) can use the ref
 function TextInputWithTokensInnerComponent({
   icon: IconComponent,
   contrast,
@@ -31,9 +39,11 @@ function TextInputWithTokensInnerComponent({
   minWidth: minWidthProp,
   maxWidth: maxWidthProp,
   variant: variantProp,
+  visibleTokenCount,
   ...rest
 }, externalRef) {
   const {
+    onBlur,
     onFocus,
     onKeyDown,
     ...inputPropsRest
@@ -42,6 +52,7 @@ function TextInputWithTokensInnerComponent({
   const localInputRef = useRef(null);
   const combinedInputRef = useCombinedRefs(localInputRef, ref);
   const [selectedTokenIndex, setSelectedTokenIndex] = useState();
+  const [tokensAreTruncated, setTokensAreTruncated] = useState(Boolean(visibleTokenCount));
   const {
     containerRef
   } = useFocusZone({
@@ -76,14 +87,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 && isFocusable(nextElementToFocus) ? nextElementToFocus : Array.from(((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.children) || []).find(el => 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 => () => {
@@ -91,30 +113,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;
     }
 
@@ -135,13 +182,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.createElement(TextInputWrapper, {
     block: block,
     className: className,
@@ -153,6 +211,7 @@ function TextInputWithTokensInnerComponent({
     minWidth: minWidthProp,
     maxWidth: maxWidthProp,
     variant: variantProp,
+    onClick: focusInput,
     sx: { ...(block ? {
         display: 'flex',
         width: '100%'
@@ -192,12 +251,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.createElement(TokenComponent, _extends({
@@ -205,6 +265,7 @@ function TextInputWithTokensInnerComponent({
     onFocus: handleTokenFocus(i),
     onBlur: handleTokenBlur,
     onKeyUp: handleTokenKeyUp,
+    onClick: preventTokenClickPropagation,
     isSelected: selectedTokenIndex === i,
     onRemove: () => {
       handleTokenRemove(id);
@@ -212,7 +273,10 @@ function TextInputWithTokensInnerComponent({
     hideRemoveButton: hideTokenRemoveButtons,
     size: size,
     tabIndex: 0
-  }, tokenRest))) : null));
+  }, tokenRest))) : null, tokensAreTruncated ? /*#__PURE__*/React.createElement(Text, {
+    color: "fg.muted",
+    fontSize: size && overflowCountFontSizeMap[size]
+  }, "+", tokens.length - visibleTokens.length) : null));
 }
 
 TextInputWithTokensInnerComponent.displayName = "TextInputWithTokensInnerComponent";

package/lib-esm/_TextInputWrapper.js

@@ -21,7 +21,7 @@ const sizeVariants = variant({
 const TextInputWrapper = styled.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:", ";}", " ", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), 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:", ";}", " ", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('shadows.primer.shadow.inset'), props => {
   if (props.hasIcon) {
     return css(["padding:0;"]);
   } else {

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

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from 'react';
 import { render } from '../utils/testing';
-import { render as HTMLRender, cleanup, fireEvent } from '@testing-library/react';
+import { render as HTMLRender, fireEvent, act, cleanup } from '@testing-library/react';
 import { axe, toHaveNoViolations } from 'jest-axe';
 import 'babel-polyfill';
 import { tokenSizes } from '../Token/TokenBase';
@@ -46,8 +46,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();
@@ -115,6 +125,14 @@ describe('TextInputWithTokens', () => {
       onTokenRemove: onRemoveMock
     }))).toMatchSnapshot();
   });
+  it('renders a truncated set of tokens', () => {
+    const onRemoveMock = jest.fn();
+    expect(render( /*#__PURE__*/React.createElement(TextInputWithTokens, {
+      tokens: mockTokens,
+      onTokenRemove: onRemoveMock,
+      visibleTokenCount: 2
+    }))).toMatchSnapshot();
+  });
   it('focuses the previous token when keying ArrowLeft', () => {
     var _document$activeEleme, _document$activeEleme2;
 
@@ -220,8 +238,123 @@ 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
+    } = HTMLRender( /*#__PURE__*/React.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);
+    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
+    } = HTMLRender( /*#__PURE__*/React.createElement(LabelledTextInputWithTokens, {
+      tokens: mockTokens,
+      onTokenRemove: onRemoveMock,
+      visibleTokenCount: 2
+    }));
+    const inputNode = getByLabelText('Tokens');
+    const truncatedTokenCount = getByText('+6');
+    expect(document.activeElement).not.toEqual(inputNode.id);
+    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
+    } = HTMLRender( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabelledTextInputWithTokens, {
+      tokens: mockTokens,
+      onTokenRemove: onRemoveMock,
+      visibleTokenCount: visibleTokenCount
+    }), /*#__PURE__*/React.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');
+    act(() => {
+      jest.runAllTimers();
+      fireEvent.focus(inputNode);
+    });
+    setTimeout(() => {
+      for (const tokenLabel of allTokenLabels) {
+        const tokenNode = getByText(tokenLabel);
+        expect(tokenNode).toBeDefined();
+      }
+    }, 0);
+    act(() => {
+      jest.runAllTimers(); // onBlur isn't called on input unless we specifically fire the "blur" event
+      // eslint-disable-next-line github/no-blur
+
+      fireEvent.blur(inputNode);
+      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
+    } = HTMLRender( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabelledTextInputWithTokens, {
+      tokens: mockTokens,
+      onTokenRemove: onRemoveMock,
+      visibleTokenCount: visibleTokenCount
+    }), /*#__PURE__*/React.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');
+    act(() => {
+      fireEvent.focus(inputNode);
+      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 {
@@ -238,8 +371,8 @@ describe('TextInputWithTokens', () => {
     fireEvent.keyDown(inputNode, {
       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();
@@ -308,6 +441,52 @@ 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
+    } = HTMLRender( /*#__PURE__*/React.createElement(TextInputWithTokens, {
+      tokens: [...mockTokens].slice(0, 2),
+      onTokenRemove: onRemoveMock
+    }));
+    const tokenNode = getByText(mockTokens[0].text);
+    fireEvent.focus(tokenNode);
+    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
+    } = HTMLRender( /*#__PURE__*/React.createElement(LabelledTextInputWithTokens, {
+      tokens: [mockTokens[0]],
+      onTokenRemove: onRemoveMock
+    }));
+    const tokenNode = getByText(mockTokens[0].text);
+    const inputNode = getByLabelText('Tokens');
+    fireEvent.focus(tokenNode);
+    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-esm/stories/TextInputWithTokens.stories.js

@@ -53,7 +53,7 @@ const mockTokens = [{
   id: 21
 }];
 export const Default = () => {
-  const [tokens, setTokens] = useState([...mockTokens].slice(0, 2));
+  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3));
 
   const onTokenRemove = tokenId => {
     setTokens(tokens.filter(token => token.id !== tokenId));
@@ -171,6 +171,20 @@ export const TokenRemoveButtonsHidden = () => {
   });
 };
 TokenRemoveButtonsHidden.displayName = "TokenRemoveButtonsHidden";
+export const WithVisibleTokenCount = () => {
+  const [tokens, setTokens] = useState([...mockTokens].slice(0, 5));
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+  };
+
+  return /*#__PURE__*/React.createElement(TextInputWithTokens, {
+    tokens: tokens,
+    onTokenRemove: onTokenRemove,
+    visibleTokenCount: 2
+  });
+};
+WithVisibleTokenCount.displayName = "WithVisibleTokenCount";
 export const Unstyled = () => {
   const [tokens, setTokens] = useState([...mockTokens].slice(0, 2));
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "31.0.2-rc.1e80de40",
+  "version": "31.0.2-rc.95622264",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",

package/src/TextInputWithTokens.tsx

@@ -1,4 +1,4 @@
-import React, {FocusEventHandler, KeyboardEventHandler, RefObject, useRef, useState} from 'react'
+import React, {FocusEventHandler, KeyboardEventHandler, MouseEventHandler, RefObject, useRef, useState} from 'react'
 import {omit} from '@styled-system/props'
 import {FocusKeys} from './behaviors/focusZone'
 import {useCombinedRefs} from './hooks/useCombinedRefs'
@@ -11,6 +11,8 @@ import {useProvidedRefOrCreate} from './hooks'
 import UnstyledTextInput from './_UnstyledTextInput'
 import TextInputWrapper from './_TextInputWrapper'
 import Box from './Box'
+import Text from './Text'
+import {isFocusable} from './utils/iterateFocusableElements'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnyReactComponent = React.ComponentType<any>
@@ -47,8 +49,19 @@ type TextInputWithTokensInternalProps<TokenComponentType extends AnyReactCompone
    * Whether the remove buttons should be rendered in the tokens
    */
   hideTokenRemoveButtons?: boolean
+  /**
+   * The number of tokens to display before truncating
+   */
+  visibleTokenCount?: number
 } & TextInputProps
 
+const overflowCountFontSizeMap: Record<TokenSizeKeys, number> = {
+  small: 0,
+  medium: 1,
+  large: 1,
+  extralarge: 2
+}
+
 // using forwardRef is important so that other components (ex. Autocomplete) can use the ref
 function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactComponent>(
   {
@@ -70,6 +83,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     minWidth: minWidthProp,
     maxWidth: maxWidthProp,
     variant: variantProp,
+    visibleTokenCount,
     ...rest
   }: TextInputWithTokensInternalProps<TokenComponentType> & {
     selectedTokenIndex: number | undefined
@@ -77,11 +91,12 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
   },
   externalRef: React.ForwardedRef<HTMLInputElement>
 ) {
-  const {onFocus, onKeyDown, ...inputPropsRest} = omit(rest)
+  const {onBlur, onFocus, onKeyDown, ...inputPropsRest} = omit(rest)
   const ref = useProvidedRefOrCreate<HTMLInputElement>(externalRef as React.RefObject<HTMLInputElement>)
   const localInputRef = useRef<HTMLInputElement>(null)
   const combinedInputRef = useCombinedRefs(localInputRef, ref)
   const [selectedTokenIndex, setSelectedTokenIndex] = useState<number | undefined>()
+  const [tokensAreTruncated, setTokensAreTruncated] = useState<boolean>(Boolean(visibleTokenCount))
   const {containerRef} = useFocusZone(
     {
       focusOutBehavior: 'wrap',
@@ -117,10 +132,24 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
   const handleTokenRemove = (tokenId: string | number) => {
     onTokenRemove(tokenId)
 
-    if (selectedTokenIndex) {
-      const nextElementToFocus = containerRef.current?.children[selectedTokenIndex] as HTMLElement
-      nextElementToFocus.focus()
-    }
+    // HACK: wait a tick for the the token node to be removed from the DOM
+    setTimeout(() => {
+      const nextElementToFocus = containerRef.current?.children[selectedTokenIndex || 0] as HTMLElement | undefined
+
+      // when removing the first token by keying "Backspace" or "Delete",
+      // `nextFocusableElement` is the div that wraps the input
+      const firstFocusable =
+        nextElementToFocus && isFocusable(nextElementToFocus)
+          ? nextElementToFocus
+          : (Array.from(containerRef.current?.children || []) as HTMLElement[]).find(el => isFocusable(el))
+
+      if (firstFocusable) {
+        firstFocusable.focus()
+      } else {
+        // if there are no tokens left, focus the input
+        ref.current?.focus()
+      }
+    }, 0)
   }
 
   const handleTokenFocus: (tokenIndex: number) => FocusEventHandler = tokenIndex => () => {
@@ -129,18 +158,42 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
 
   const handleTokenBlur: FocusEventHandler = () => {
     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(() => {
+      if (!containerRef.current?.contains(document.activeElement) && visibleTokenCount) {
+        setTokensAreTruncated(true)
+      }
+    }, 0)
   }
 
-  const handleTokenKeyUp: KeyboardEventHandler = e => {
-    if (e.key === 'Escape') {
+  const handleTokenKeyUp: KeyboardEventHandler = event => {
+    if (event.key === 'Escape') {
       ref.current?.focus()
     }
   }
 
-  const handleInputFocus: FocusEventHandler = e => {
-    onFocus && onFocus(e)
+  const handleInputFocus: FocusEventHandler = event => {
+    onFocus && onFocus(event)
     setSelectedTokenIndex(undefined)
+    visibleTokenCount && setTokensAreTruncated(false)
   }
+
+  const handleInputBlur: FocusEventHandler = 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(() => {
+      if (!containerRef.current?.contains(document.activeElement) && visibleTokenCount) {
+        setTokensAreTruncated(true)
+      }
+    }, 0)
+  }
+
   const handleInputKeyDown: KeyboardEventHandler = e => {
     if (onKeyDown) {
       onKeyDown(e)
@@ -172,6 +225,16 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     }
   }
 
+  const focusInput: MouseEventHandler = () => {
+    combinedInputRef.current?.focus()
+  }
+
+  const preventTokenClickPropagation: MouseEventHandler = event => {
+    event.stopPropagation()
+  }
+
+  const visibleTokens = tokensAreTruncated ? tokens.slice(0, visibleTokenCount) : tokens
+
   return (
     <TextInputWrapper
       block={block}
@@ -184,6 +247,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       minWidth={minWidthProp}
       maxWidth={maxWidthProp}
       variant={variantProp}
+      onClick={focusInput}
       sx={{
         ...(block
           ? {
@@ -236,19 +300,21 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
             ref={combinedInputRef}
             disabled={disabled}
             onFocus={handleInputFocus}
+            onBlur={handleInputBlur}
             onKeyDown={handleInputKeyDown}
             type="text"
             sx={{height: '100%'}}
             {...inputPropsRest}
           />
         </Box>
-        {tokens.length && TokenComponent
-          ? tokens.map(({id, ...tokenRest}, i) => (
+        {TokenComponent
+          ? visibleTokens.map(({id, ...tokenRest}, i) => (
               <TokenComponent
                 key={id}
                 onFocus={handleTokenFocus(i)}
                 onBlur={handleTokenBlur}
                 onKeyUp={handleTokenKeyUp}
+                onClick={preventTokenClickPropagation}
                 isSelected={selectedTokenIndex === i}
                 onRemove={() => {
                   handleTokenRemove(id)
@@ -260,6 +326,11 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
               />
             ))
           : null}
+        {tokensAreTruncated ? (
+          <Text color="fg.muted" fontSize={size && overflowCountFontSizeMap[size]}>
+            +{tokens.length - visibleTokens.length}
+          </Text>
+        ) : null}
       </Box>
     </TextInputWrapper>
   )