@primer/components 31.0.2-rc.c7dafefb → 31.2.0-rc.a53b3afb

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "31.0.2-rc.c7dafefb",
+  "version": "31.2.0-rc.a53b3afb",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -132,6 +132,7 @@
     "rollup-plugin-visualizer": "5.5.0",
     "semver": "7.3.5",
     "size-limit": "5.0.2",
+    "storybook-addon-performance": "0.16.1",
     "styled-components": "4.4.1",
     "typescript": "4.2.2"
   },

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,7 @@ 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
@@ -48,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>(
   {
@@ -71,6 +83,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     minWidth: minWidthProp,
     maxWidth: maxWidthProp,
     variant: variantProp,
+    visibleTokenCount,
     ...rest
   }: TextInputWithTokensInternalProps<TokenComponentType> & {
     selectedTokenIndex: number | undefined
@@ -78,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',
@@ -144,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)
@@ -187,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}
@@ -199,6 +247,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       minWidth={minWidthProp}
       maxWidth={maxWidthProp}
       variant={variantProp}
+      onClick={focusInput}
       sx={{
         ...(block
           ? {
@@ -251,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)
@@ -275,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>
   )

package/src/_TextInputWrapper.tsx

@@ -45,6 +45,7 @@ const TextInputWrapper = styled.span<StyledWrapperProps>`
   border-radius: ${get('radii.2')};
   outline: none;
   box-shadow: ${get('shadows.primer.shadow.inset')};
+  cursor: text;
 
   ${props => {
     if (props.hasIcon) {

package/src/__tests__/KeyPaths.types.test.ts

@@ -0,0 +1,13 @@
+import {KeyPaths} from '../utils/types/KeyPaths'
+
+type NestedObject = {
+  a: string
+  b: {
+    b1: string
+    b2: string
+  }
+}
+
+export function generatesKeyPathsFromObject(x: KeyPaths<NestedObject>): 'a' | 'b.b1' | 'b.b2' {
+  return x
+}

package/src/__tests__/TextInputWithTokens.test.tsx

@@ -1,6 +1,6 @@
 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 {TokenSizeKeys, tokenSizes} from '../Token/TokenBase'
@@ -29,6 +29,18 @@ const LabelledTextInputWithTokens: React.FC<TextInputWithTokensProps> = ({onToke
   </>
 )
 
+// 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()
@@ -85,6 +97,13 @@ describe('TextInputWithTokens', () => {
     ).toMatchSnapshot()
   })
 
+  it('renders a truncated set of tokens', () => {
+    const onRemoveMock = jest.fn()
+    expect(
+      render(<TextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} visibleTokenCount={2} />)
+    ).toMatchSnapshot()
+  })
+
   it('focuses the previous token when keying ArrowLeft', () => {
     const onRemoveMock = jest.fn()
     const {getByLabelText, getByText} = HTMLRender(
@@ -165,6 +184,119 @@ describe('TextInputWithTokens', () => {
     expect(document.activeElement?.id).toEqual(inputNode.id)
   })
 
+  it('does not focus the input when clicking a token', () => {
+    const onRemoveMock = jest.fn()
+    const {getByLabelText, getByText} = HTMLRender(
+      <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.activeElement?.id).not.toEqual(inputNode.id)
+  })
+
+  it('focuses the input when clicking somewhere in the component besides the tokens', () => {
+    const onRemoveMock = jest.fn()
+    const {getByLabelText, getByText} = HTMLRender(
+      <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.activeElement?.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(
+      <>
+        <LabelledTextInputWithTokens
+          tokens={mockTokens}
+          onTokenRemove={onRemoveMock}
+          visibleTokenCount={visibleTokenCount}
+        />
+        <button id="focusableOutsideComponent">Focus me</button>
+      </>
+    )
+    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(
+      <>
+        <LabelledTextInputWithTokens
+          tokens={mockTokens}
+          onTokenRemove={onRemoveMock}
+          visibleTokenCount={visibleTokenCount}
+        />
+        <button id="focusableOutsideComponent">Focus me</button>
+      </>
+    )
+    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', () => {
     const onRemoveMock = jest.fn()
     const {getByLabelText, getByText} = HTMLRender(

package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap

@@ -36,6 +36,7 @@ Array [
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 
@@ -148,6 +149,7 @@ Array [
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 
@@ -295,6 +297,7 @@ Array [
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 
@@ -1040,6 +1043,7 @@ Array [
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 
@@ -1708,6 +1712,7 @@ Array [
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 
@@ -2376,6 +2381,7 @@ Array [
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 
@@ -3337,6 +3343,7 @@ Array [
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 

package/src/__tests__/__snapshots__/TextInput.test.tsx.snap

@@ -35,6 +35,7 @@ exports[`TextInput renders 1`] = `
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 
@@ -106,6 +107,7 @@ exports[`TextInput renders block 1`] = `
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
   display: block;
   width: 100%;
@@ -179,6 +181,7 @@ exports[`TextInput renders consistently 1`] = `
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }
 
@@ -249,6 +252,7 @@ exports[`TextInput renders large 1`] = `
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
   padding-left: 8px;
   padding-right: 8px;
@@ -325,6 +329,7 @@ exports[`TextInput renders small 1`] = `
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
   min-height: 28px;
   padding-left: 8px;
@@ -403,6 +408,7 @@ exports[`TextInput should render a password input 1`] = `
   border-radius: 6px;
   outline: none;
   box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
+  cursor: text;
   padding: 6px 12px;
 }