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

package/src/ActionList2/index.ts

@@ -0,0 +1,39 @@
+import {List} from './List'
+import {Group} from './Group'
+import {Item} from './Item'
+import {LinkItem} from './LinkItem'
+import {Divider} from './Divider'
+import {Description} from './Description'
+import {LeadingVisual, TrailingVisual} from './Visuals'
+
+export type {ListProps as ActionListProps} from './List'
+export type {GroupProps} from './Group'
+export type {ItemProps} from './Item'
+export type {DescriptionProps} from './Description'
+export type {LeadingVisualProps, TrailingVisualProps} from './Visuals'
+
+/**
+ * Collection of list-related components.
+ */
+export const ActionList = Object.assign(List, {
+  /** Collects related `Items` in an `ActionList`. */
+  Group,
+
+  /** An actionable or selectable `Item` */
+  Item,
+
+  /** A `Item` that renders a full-size anchor inside ListItem */
+  LinkItem,
+
+  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+  Divider,
+
+  /** Secondary text which provides additional information about an `Item`. */
+  Description,
+
+  /** Icon (or similar) positioned before `Item` text. */
+  LeadingVisual,
+
+  /** Icon (or similar) positioned after `Item` text. */
+  TrailingVisual
+})

package/src/Overlay.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components'
-import React, {ReactElement, useEffect, useLayoutEffect, useRef} from 'react'
+import React, {ReactElement, useEffect, useRef} from 'react'
 import {get, COMMON, SystemPositionProps, SystemCommonProps} from './constants'
 import {ComponentProps} from './utils/types'
+import useLayoutEffect from './utils/useIsomorphicLayoutEffect'
 import {useOverlay, TouchOrMouseEvent} from './hooks'
 import Portal from './Portal'
 import sx, {SxProp} from './sx'

package/src/Portal/Portal.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {createPortal} from 'react-dom'
+import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__'
 const DEFAULT_PORTAL_CONTAINER_NAME = '__default__'
@@ -69,7 +70,7 @@ export const Portal: React.FC<PortalProps> = ({children, onMount, containerName:
   hostElement.style.zIndex = '1'
   const elementRef = React.useRef(hostElement)
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     let containerName = _containerName
     if (containerName === undefined) {
       containerName = DEFAULT_PORTAL_CONTAINER_NAME

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) {
@@ -90,6 +91,13 @@ const TextInputWrapper = styled.span<StyledWrapperProps>`
       display: block;
       width: 100%;
     `}
+
+    ${props =>
+    props.block &&
+    props.hasIcon &&
+    css`
+      display: flex;
+    `}
   
     // Ensures inputs don't zoom on mobile but are body-font size on desktop
     @media (min-width: ${get('breakpoints.1')}) {

package/src/__tests__/ActionList2.test.tsx

@@ -0,0 +1,47 @@
+import {cleanup, render as HTMLRender} from '@testing-library/react'
+import 'babel-polyfill'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import React from 'react'
+import theme from '../theme'
+import {ActionList} from '../ActionList2'
+import {behavesAsComponent, checkExports} from '../utils/testing'
+import {BaseStyles, ThemeProvider, SSRProvider} from '..'
+expect.extend(toHaveNoViolations)
+
+function SimpleActionList(): JSX.Element {
+  return (
+    <ThemeProvider theme={theme}>
+      <SSRProvider>
+        <BaseStyles>
+          <ActionList>
+            <ActionList.Item>New file</ActionList.Item>
+            <ActionList.Divider />
+            <ActionList.Item>Copy link</ActionList.Item>
+            <ActionList.Item>Edit file</ActionList.Item>
+            <ActionList.Item variant="danger">Delete file</ActionList.Item>
+          </ActionList>
+        </BaseStyles>
+      </SSRProvider>
+    </ThemeProvider>
+  )
+}
+
+describe('ActionList', () => {
+  behavesAsComponent({
+    Component: ActionList,
+    options: {skipAs: true, skipSx: true},
+    toRender: () => <ActionList />
+  })
+
+  checkExports('ActionList2', {
+    default: undefined,
+    ActionList
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<SimpleActionList />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+})

package/src/__tests__/AnchoredOverlay.test.tsx

@@ -144,7 +144,7 @@ describe('AnchoredOverlay', () => {
   })
 
   it('should render consistently when open', () => {
-    const anchoredOverlay = HTMLRender(<AnchoredOverlayTestComponent initiallyOpen={true} />)
-    expect(anchoredOverlay).toMatchSnapshot()
+    const {container} = HTMLRender(<AnchoredOverlayTestComponent initiallyOpen={true} />)
+    expect(container).toMatchSnapshot()
   })
 })

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

@@ -0,0 +1,14 @@
+import {Union} from 'ts-toolbelt'
+import {KeyPaths} from '../utils/types/KeyPaths'
+
+type NestedObject = {
+  a: string
+  b: {
+    b1: string
+    b2: string
+  }
+}
+
+export function generatesKeyPathsFromObject(x: Union.Diff<KeyPaths<NestedObject>, 'a' | 'b.b1' | 'b.b2'>): never {
+  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,8 @@ const LabelledTextInputWithTokens: React.FC<TextInputWithTokensProps> = ({onToke
   </>
 )
 
+jest.useFakeTimers()
+
 describe('TextInputWithTokens', () => {
   it('renders without tokens', () => {
     const onRemoveMock = jest.fn()
@@ -85,6 +87,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 +174,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__/ActionList2.test.tsx.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActionList renders consistently 1`] = `
+.c0 {
+  margin: 0;
+  padding-inline-start: 0;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+<ul
+  className="c0"
+/>
+`;

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

@@ -94,9 +94,7 @@ exports[`AnchoredOverlay renders consistently 1`] = `
 `;
 
 exports[`AnchoredOverlay should render consistently when open 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": .c0 {
+.c0 {
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   line-height: 1.5;
   color: #24292f;
@@ -187,146 +185,48 @@ Object {
   outline: none;
 }
 
-<body>
-    <div>
-      <div
-        class="c0"
-        color="fg.default"
-        data-portal-root="true"
-        font-family="normal"
-      >
-        <button
-          aria-haspopup="true"
-          aria-labelledby="react-aria-1"
-          class="c1"
-          id="react-aria-1"
-          tabindex="0"
-        >
-          Anchor Button
-        </button>
-        <div
-          id="__primerPortalRoot__"
-          style="position: absolute; top: 0px; left: 0px;"
-        >
-          <div
-            style="position: relative; z-index: 1;"
-          >
-            <div
-              class="c2"
-              data-focus-trap="active"
-              height="auto"
-              role="none"
-              style="top: 4px; left: 0px; --styled-overlay-visibility: visible;"
-              width="auto"
-            >
-              <button
-                class="focus-visible"
-                data-focus-visible-added=""
-                tabindex="0"
-                type="button"
-              >
-                Focusable Child
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
+<div>
+  <div
+    class="c0"
+    color="fg.default"
+    data-portal-root="true"
+    font-family="normal"
+  >
+    <button
+      aria-haspopup="true"
+      aria-labelledby="react-aria-1"
+      class="c1"
+      id="react-aria-1"
+      tabindex="0"
+    >
+      Anchor Button
+    </button>
     <div
-      class="BaseStyles__Base-qvuaww-0 ihFkAM"
-      color="fg.default"
-      data-portal-root="true"
-      font-family="normal"
+      id="__primerPortalRoot__"
+      style="position: absolute; top: 0px; left: 0px;"
     >
-      <button
-        aria-haspopup="true"
-        aria-labelledby="react-aria-1"
-        class="ButtonBase-sc-181ps9o-0 Button-xjtz72-0 iRqJHc"
-        id="react-aria-1"
-        tabindex="0"
-      >
-        Anchor Button
-      </button>
       <div
-        id="__primerPortalRoot__"
-        style="position: absolute; top: 0px; left: 0px;"
+        style="position: relative; z-index: 1;"
       >
         <div
-          style="position: relative; z-index: 1;"
+          class="c2"
+          data-focus-trap="active"
+          height="auto"
+          role="none"
+          style="top: 4px; left: 0px; --styled-overlay-visibility: visible;"
+          width="auto"
         >
-          <div
-            class="Overlay__StyledOverlay-jhwkzw-0 jFTKwM"
-            data-focus-trap="active"
-            height="auto"
-            role="none"
-            style="top: 4px; left: 0px; --styled-overlay-visibility: visible;"
-            width="auto"
+          <button
+            class="focus-visible"
+            data-focus-visible-added=""
+            tabindex="0"
+            type="button"
           >
-            <button
-              class="focus-visible"
-              data-focus-visible-added=""
-              tabindex="0"
-              type="button"
-            >
-              Focusable Child
-            </button>
-          </div>
+            Focusable Child
+          </button>
         </div>
       </div>
     </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+  </div>
+</div>
 `;