@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/src/__tests__/behaviors/focusZone.tsx

@@ -0,0 +1,549 @@
+import React from 'react'
+import {fireEvent, render} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {FocusKeys, focusZone, FocusZoneSettings} from '../../behaviors/focusZone'
+
+async function nextTick() {
+  return new Promise(resolve => setTimeout(resolve, 0))
+}
+
+const moveDown = () => userEvent.type(document.activeElement!, '{arrowdown}')
+const moveUp = () => userEvent.type(document.activeElement!, '{arrowup}')
+
+// Since we use strict `isTabbable` checks within focus trap, we need to mock these
+// properties that Jest does not populate.
+beforeAll(() => {
+  try {
+    Object.defineProperties(HTMLElement.prototype, {
+      offsetHeight: {
+        get: () => 42
+      },
+      offsetWidth: {
+        get: () => 42
+      },
+      getClientRects: {
+        get: () => () => [42]
+      }
+    })
+  } catch {
+    // ignore
+  }
+})
+
+it('Should allow arrow keys to move focus', () => {
+  const {container} = render(
+    <div>
+      <button tabIndex={0}>Bad Apple</button>
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+    </div>
+  )
+
+  const focusZoneContainer = container.querySelector<HTMLElement>('#focusZone')!
+  const [firstButton, secondButton] = focusZoneContainer.querySelectorAll('button')!
+  const controller = focusZone(focusZoneContainer)
+
+  firstButton.focus()
+  expect(document.activeElement).toEqual(firstButton)
+
+  userEvent.type(firstButton, '{arrowdown}')
+  expect(document.activeElement).toEqual(secondButton)
+
+  controller.abort()
+})
+
+it('Should have one tab-stop inside the focus zone when enabled', () => {
+  const {container} = render(
+    <div>
+      <button tabIndex={0}>Bad Apple</button>
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+      <button tabIndex={0}>Next Apple</button>
+    </div>
+  )
+
+  const focusZoneContainer = container.querySelector<HTMLElement>('#focusZone')!
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [one, two, three, four, five] = container.querySelectorAll('button')!
+  const controller = focusZone(focusZoneContainer)
+
+  one.focus()
+  userEvent.tab()
+  userEvent.tab()
+  expect(document.activeElement).toEqual(five)
+
+  controller.abort()
+  one.focus()
+  userEvent.tab()
+  userEvent.tab()
+  expect(document.activeElement).toEqual(three)
+
+  controller.abort()
+})
+
+it('Should prevent moving focus outside the zone', () => {
+  const {container} = render(
+    <div>
+      <button tabIndex={0}>Bad Apple</button>
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+    </div>
+  )
+
+  const focusZoneContainer = container.querySelector<HTMLElement>('#focusZone')!
+  const [firstButton, secondButton, thirdButton] = focusZoneContainer.querySelectorAll('button')!
+  const controller = focusZone(focusZoneContainer)
+
+  firstButton.focus()
+  expect(document.activeElement).toEqual(firstButton)
+
+  userEvent.type(firstButton, '{arrowup}')
+  expect(document.activeElement).toEqual(firstButton)
+
+  userEvent.type(firstButton, '{arrowdown}')
+  expect(document.activeElement).toEqual(secondButton)
+
+  userEvent.type(secondButton, '{arrowdown}')
+  expect(document.activeElement).toEqual(thirdButton)
+
+  userEvent.type(thirdButton, '{arrowdown}')
+  expect(document.activeElement).toEqual(thirdButton)
+
+  controller.abort()
+})
+
+it('Should do focus wrapping correctly', () => {
+  const {container} = render(
+    <div>
+      <button tabIndex={0}>Bad Apple</button>
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+    </div>
+  )
+
+  const focusZoneContainer = container.querySelector<HTMLElement>('#focusZone')!
+  const [firstButton, secondButton, thirdButton] = focusZoneContainer.querySelectorAll('button')!
+  const controller = focusZone(focusZoneContainer, {focusOutBehavior: 'wrap'})
+
+  firstButton.focus()
+  expect(document.activeElement).toEqual(firstButton)
+
+  userEvent.type(firstButton, '{arrowup}')
+  expect(document.activeElement).toEqual(thirdButton)
+
+  userEvent.type(thirdButton, '{arrowup}')
+  expect(document.activeElement).toEqual(secondButton)
+
+  userEvent.type(secondButton, '{arrowdown}')
+  expect(document.activeElement).toEqual(thirdButton)
+
+  userEvent.type(thirdButton, '{arrowdown}')
+  expect(document.activeElement).toEqual(firstButton)
+
+  controller.abort()
+})
+
+it('Should call custom getNextFocusable callback', () => {
+  const {container} = render(
+    <div>
+      <button tabIndex={0}>Bad Apple</button>
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+    </div>
+  )
+
+  const focusZoneContainer = container.querySelector<HTMLElement>('#focusZone')!
+  const [firstButton, secondButton] = focusZoneContainer.querySelectorAll('button')!
+  const getNextFocusableCallback = jest.fn()
+  const controller = focusZone(focusZoneContainer, {getNextFocusable: getNextFocusableCallback})
+
+  firstButton.focus()
+  expect(document.activeElement).toEqual(firstButton)
+
+  userEvent.type(firstButton, '{arrowdown}')
+  expect(getNextFocusableCallback).toHaveBeenCalledWith('next', firstButton, expect.anything())
+
+  userEvent.type(secondButton, '{home}')
+  expect(getNextFocusableCallback).toHaveBeenCalledWith('start', secondButton, expect.anything())
+
+  controller.abort()
+})
+
+it('Should focus-in to the most recently-focused element', () => {
+  const {container} = render(
+    <div>
+      <button tabIndex={0} id="outside">
+        Bad Apple
+      </button>
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+    </div>
+  )
+
+  const focusZoneContainer = container.querySelector<HTMLElement>('#focusZone')!
+  const outsideButton = container.querySelector<HTMLElement>('#outside')!
+  const [firstButton, secondButton] = focusZoneContainer.querySelectorAll('button')!
+  const controller = focusZone(focusZoneContainer)
+
+  firstButton.focus()
+  expect(document.activeElement).toEqual(firstButton)
+
+  userEvent.type(firstButton, '{arrowdown}')
+  expect(document.activeElement).toEqual(secondButton)
+
+  outsideButton.focus()
+  userEvent.tab()
+
+  expect(document.activeElement).toEqual(secondButton)
+
+  controller.abort()
+})
+
+it('Should focus-in to the first element when focusInStrategy is "first"', () => {
+  const {container} = render(
+    <div>
+      <button tabIndex={0} id="outside">
+        Bad Apple
+      </button>
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+    </div>
+  )
+
+  const focusZoneContainer = container.querySelector<HTMLElement>('#focusZone')!
+  const outsideButton = container.querySelector<HTMLElement>('#outside')!
+  const [firstButton, secondButton] = focusZoneContainer.querySelectorAll('button')!
+  const controller = focusZone(focusZoneContainer, {focusInStrategy: 'first'})
+
+  firstButton.focus()
+  expect(document.activeElement).toEqual(firstButton)
+
+  userEvent.type(firstButton, '{arrowdown}')
+  expect(document.activeElement).toEqual(secondButton)
+
+  outsideButton.focus()
+  userEvent.tab()
+
+  expect(document.activeElement).toEqual(firstButton)
+
+  controller.abort()
+})
+
+it('Should focus-in to the closest element when focusInStrategy is "closest"', () => {
+  const {container} = render(
+    <div>
+      <button tabIndex={0} id="outsideBefore">
+        Bad Apple
+      </button>
+      <div id="focusZone">
+        <button id="apple" tabIndex={0}>
+          Apple
+        </button>
+        <button id="banana" tabIndex={0}>
+          Banana
+        </button>
+        <button id="cantaloupe" tabIndex={0}>
+          Cantaloupe
+        </button>
+      </div>
+      <button tabIndex={0} id="outsideAfter">
+        Good Apple
+      </button>
+    </div>
+  )
+
+  const focusZoneContainer = container.querySelector<HTMLElement>('#focusZone')!
+  const outsideBefore = container.querySelector<HTMLElement>('#outsideBefore')!
+  const outsideAfter = container.querySelector<HTMLElement>('#outsideAfter')!
+  const [firstButton, secondButton, thirdButton] = focusZoneContainer.querySelectorAll('button')!
+  const controller = focusZone(focusZoneContainer, {focusInStrategy: 'closest'})
+
+  firstButton.focus()
+  expect(document.activeElement).toEqual(firstButton)
+
+  userEvent.type(firstButton, '{arrowdown}')
+  expect(document.activeElement).toEqual(secondButton)
+
+  outsideBefore.focus()
+  userEvent.tab()
+
+  expect(document.activeElement).toEqual(firstButton)
+
+  outsideAfter.focus()
+  userEvent.tab({shift: true})
+
+  expect(document.activeElement).toEqual(thirdButton)
+
+  controller.abort()
+})
+
+it('Should call the custom focusInStrategy callback', () => {
+  const {container} = render(
+    <div>
+      <button tabIndex={0} id="outside">
+        Bad Apple
+      </button>
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+    </div>
+  )
+
+  const focusZoneContainer = container.querySelector<HTMLElement>('#focusZone')!
+  const outsideButton = container.querySelector<HTMLElement>('#outside')!
+  const [, secondButton] = focusZoneContainer.querySelectorAll('button')!
+  const focusInCallback = jest.fn().mockReturnValue(secondButton)
+  const controller = focusZone(focusZoneContainer, {focusInStrategy: focusInCallback})
+
+  outsideButton.focus()
+  userEvent.tab()
+  expect(focusInCallback).toHaveBeenCalledWith<[HTMLElement]>(outsideButton)
+  expect(document.activeElement).toEqual(secondButton)
+
+  controller.abort()
+})
+
+it('Should respect inputs by not moving focus if key would have some other effect', () => {
+  const {container} = render(
+    <div>
+      <button tabIndex={0} id="outside">
+        Bad Apple
+      </button>
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <input type="text" defaultValue="Banana" tabIndex={0} />
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+    </div>
+  )
+
+  const focusZoneContainer = container.querySelector<HTMLElement>('#focusZone')!
+  const [firstButton, secondButton] = focusZoneContainer.querySelectorAll('button')!
+  const input = focusZoneContainer.querySelector<HTMLElement>('input')!
+  const controller = focusZone(focusZoneContainer, {bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd})
+
+  firstButton.focus()
+  userEvent.type(firstButton, '{arrowright}')
+  expect(document.activeElement).toEqual(input)
+  userEvent.type(input, '{arrowleft}')
+  expect(document.activeElement).toEqual(input)
+  userEvent.type(input, '{arrowright}')
+  expect(document.activeElement).toEqual(input)
+  userEvent.type(input, '{arrowright}')
+  expect(document.activeElement).toEqual(secondButton)
+
+  controller.abort()
+})
+
+it('Should focus-in to the first element if the last-focused element is removed', async () => {
+  const {container} = render(
+    <div>
+      <button tabIndex={0} id="outside">
+        Bad Apple
+      </button>
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+    </div>
+  )
+
+  const focusZoneContainer = container.querySelector<HTMLElement>('#focusZone')!
+  const [firstButton, secondButton, thirdButton] = focusZoneContainer.querySelectorAll('button')!
+  const outsideButton = container.querySelector<HTMLElement>('#outside')!
+  const controller = focusZone(focusZoneContainer)
+
+  firstButton.focus()
+  userEvent.type(firstButton, '{arrowdown}')
+  expect(document.activeElement).toEqual(secondButton)
+
+  outsideButton.focus()
+  focusZoneContainer.removeChild(secondButton)
+
+  // The mutation observer fires asynchronously
+  await nextTick()
+
+  userEvent.tab()
+  expect(document.activeElement).toEqual(firstButton)
+
+  userEvent.type(firstButton, '{arrowdown}')
+  expect(document.activeElement).toEqual(thirdButton)
+
+  controller.abort()
+})
+
+it('Should call onActiveDescendantChanged properly', () => {
+  const {container} = render(
+    <div>
+      <button tabIndex={0} id="outside">
+        Bad Apple
+      </button>
+      <input id="control" defaultValue="control input" tabIndex={0} />
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+    </div>
+  )
+
+  const focusZoneContainer = container.querySelector<HTMLElement>('#focusZone')!
+  const [firstButton, secondButton] = focusZoneContainer.querySelectorAll('button')!
+  const control = container.querySelector<HTMLElement>('#control')!
+  const activeDescendantChangedCallback = jest.fn()
+  const controller = focusZone(focusZoneContainer, {
+    activeDescendantControl: control,
+    onActiveDescendantChanged: activeDescendantChangedCallback
+  })
+  type ActiveDescendantChangedCallbackParameters = Parameters<
+    Exclude<FocusZoneSettings['onActiveDescendantChanged'], undefined>
+  >
+
+  control.focus()
+  expect(activeDescendantChangedCallback).toHaveBeenLastCalledWith<ActiveDescendantChangedCallbackParameters>(
+    firstButton,
+    undefined,
+    false
+  )
+  userEvent.type(control, '{arrowdown}')
+  expect(activeDescendantChangedCallback).toHaveBeenLastCalledWith<ActiveDescendantChangedCallbackParameters>(
+    secondButton,
+    firstButton,
+    true
+  )
+  userEvent.type(control, '{arrowup}')
+  expect(activeDescendantChangedCallback).toHaveBeenLastCalledWith<ActiveDescendantChangedCallbackParameters>(
+    firstButton,
+    secondButton,
+    true
+  )
+  fireEvent.mouseMove(secondButton)
+  expect(activeDescendantChangedCallback).toHaveBeenLastCalledWith<ActiveDescendantChangedCallbackParameters>(
+    secondButton,
+    firstButton,
+    false
+  )
+  userEvent.type(control, '{arrowup}')
+  expect(activeDescendantChangedCallback).toHaveBeenLastCalledWith<ActiveDescendantChangedCallbackParameters>(
+    firstButton,
+    secondButton,
+    true
+  )
+  userEvent.type(control, '{arrowUp}')
+  expect(activeDescendantChangedCallback).toHaveBeenLastCalledWith<ActiveDescendantChangedCallbackParameters>(
+    firstButton,
+    firstButton,
+    true
+  )
+  activeDescendantChangedCallback.mockReset()
+  fireEvent.mouseMove(firstButton)
+  expect(activeDescendantChangedCallback).not.toBeCalled()
+
+  controller.abort()
+})
+
+it('Should set aria-activedescendant correctly', () => {
+  const {container} = render(
+    <div>
+      <button tabIndex={0} id="outside">
+        Bad Apple
+      </button>
+      <input id="control" defaultValue="control input" tabIndex={0} />
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+      </div>
+    </div>
+  )
+
+  const focusZoneContainer = container.querySelector<HTMLElement>('#focusZone')!
+  const [firstButton, secondButton] = focusZoneContainer.querySelectorAll('button')!
+  const outsideButton = container.querySelector<HTMLElement>('#outside')!
+  const control = container.querySelector<HTMLElement>('#control')!
+  const controller = focusZone(focusZoneContainer, {activeDescendantControl: control})
+
+  control.focus()
+  expect(control.getAttribute('aria-activedescendant')).toEqual(firstButton.id)
+  userEvent.type(control, '{arrowdown}')
+  expect(control.getAttribute('aria-activedescendant')).toEqual(secondButton.id)
+  userEvent.type(control, '{arrowup}')
+  expect(control.getAttribute('aria-activedescendant')).toEqual(firstButton.id)
+  expect(document.activeElement).toEqual(control)
+  userEvent.type(control, '{arrowup}')
+  expect(control.getAttribute('aria-activedescendant')).toEqual(firstButton.id)
+  outsideButton.focus()
+  expect(control.hasAttribute('aria-activedescendant')).toBeFalsy()
+
+  controller.abort()
+})
+
+it('Should handle elements being reordered', async () => {
+  const {container} = render(
+    <div>
+      <div id="focusZone">
+        <button tabIndex={0}>Apple</button>
+        <button tabIndex={0}>Banana</button>
+        <button tabIndex={0}>Cantaloupe</button>
+        <button tabIndex={0}>Durian</button>
+      </div>
+    </div>
+  )
+
+  const focusZoneContainer = container.querySelector<HTMLElement>('#focusZone')!
+  const [firstButton, secondButton, thirdButton, fourthButton] = focusZoneContainer.querySelectorAll('button')
+  const controller = focusZone(focusZoneContainer)
+
+  firstButton.focus()
+  expect(document.activeElement).toEqual(firstButton)
+
+  moveDown()
+  expect(document.activeElement).toEqual(secondButton)
+
+  moveUp()
+  expect(document.activeElement).toEqual(firstButton)
+
+  // move secondButton and thirdButton to the end of the zone, in reverse order
+  focusZoneContainer.appendChild(thirdButton)
+  focusZoneContainer.appendChild(secondButton)
+
+  // The mutation observer fires asynchronously
+  await nextTick()
+
+  expect(document.activeElement).toEqual(firstButton)
+
+  moveDown()
+  expect(document.activeElement).toEqual(fourthButton)
+
+  moveDown()
+  expect(document.activeElement).toEqual(thirdButton)
+
+  moveDown()
+  expect(document.activeElement).toEqual(secondButton)
+
+  controller.abort()
+})

package/src/__tests__/behaviors/iterateFocusableElements.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import {iterateFocusableElements} from '../../utils/iterateFocusableElements'
+import {render} from '@testing-library/react'
+
+it('Should iterate through focusable elements only', () => {
+  const {container} = render(
+    <div>
+      <div>
+        <textarea></textarea>
+      </div>
+      <input />
+      <button>Hello</button>
+      <p>Not focusable</p>
+      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
+      <div tabIndex={0}>
+        <a tabIndex={-1} href="#boo">
+          Not focusable
+        </a>
+        <a href="#yah">Focusable</a>
+      </div>
+    </div>
+  )
+
+  const focusable = Array.from(iterateFocusableElements(container as HTMLElement, {onlyTabbable: true}))
+  expect(focusable.length).toEqual(5)
+  expect(focusable[0].tagName.toLowerCase()).toEqual('textarea')
+  expect(focusable[1].tagName.toLowerCase()).toEqual('input')
+  expect(focusable[2].tagName.toLowerCase()).toEqual('button')
+  expect(focusable[3].tagName.toLowerCase()).toEqual('div')
+  expect(focusable[4].tagName.toLowerCase()).toEqual('a')
+  expect(focusable[4].getAttribute('href')).toEqual('#yah')
+})
+
+it('Should iterate through focusable elements in reverse', () => {
+  const {container} = render(
+    <div>
+      <div>
+        <textarea></textarea>
+      </div>
+      <input />
+      <button>Hello</button>
+      <p>Not focusable</p>
+      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
+      <div tabIndex={0}>
+        <a tabIndex={-1} href="#boo">
+          Not focusable
+        </a>
+        <a href="#yah">Focusable</a>
+      </div>
+    </div>
+  )
+
+  const focusable = Array.from(iterateFocusableElements(container as HTMLElement, {reverse: true, onlyTabbable: true}))
+  expect(focusable.length).toEqual(5)
+  expect(focusable[0].tagName.toLowerCase()).toEqual('a')
+  expect(focusable[0].getAttribute('href')).toEqual('#yah')
+  expect(focusable[1].tagName.toLowerCase()).toEqual('div')
+  expect(focusable[2].tagName.toLowerCase()).toEqual('button')
+  expect(focusable[3].tagName.toLowerCase()).toEqual('input')
+  expect(focusable[4].tagName.toLowerCase()).toEqual('textarea')
+})

package/src/__tests__/filterObject.ts

@@ -0,0 +1,54 @@
+import {isColorValue, isShadowValue, filterObject} from '../utils/theme'
+
+describe('filterObject', () => {
+  const colors = {
+    scale: {
+      gray: [
+        '#fafbfc',
+        '#f6f8fa',
+        '#e1e4e8',
+        '#d1d5da',
+        '#959da5',
+        '#6a737d',
+        '#586069',
+        '#444d56',
+        '#2f363d',
+        '#24292e'
+      ]
+    },
+    btn: {
+      shadow: '0 1px 0 rgba(27,31,35,0.04)'
+    }
+  }
+
+  it('filters out shadow values', () => {
+    const expected = {
+      scale: {
+        gray: [
+          '#fafbfc',
+          '#f6f8fa',
+          '#e1e4e8',
+          '#d1d5da',
+          '#959da5',
+          '#6a737d',
+          '#586069',
+          '#444d56',
+          '#2f363d',
+          '#24292e'
+        ]
+      }
+    }
+
+    expect(filterObject(colors, (value: unknown) => isColorValue(value))).toEqual(expected)
+  })
+
+  it('filters out color values', () => {
+    const expected = {
+      btn: {
+        shadow: '0 1px 0 rgba(27,31,35,0.04)'
+      }
+    }
+
+    expect(filterObject(colors, (value: unknown) => isShadowValue(value))).toEqual(expected)
+  })
+})

package/src/__tests__/hooks/useAnchoredPosition.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import {useAnchoredPosition} from '../../hooks/useAnchoredPosition'
+import {render} from '@testing-library/react'
+
+const Component = ({callback}: {callback: (hookReturnValue: ReturnType<typeof useAnchoredPosition>) => void}) => {
+  const floatingElementRef = React.useRef<HTMLDivElement>(null)
+  const anchorElementRef = React.useRef<HTMLDivElement>(null)
+  callback(useAnchoredPosition({floatingElementRef, anchorElementRef}))
+  return (
+    <div style={{position: 'absolute'}}>
+      <div
+        style={{position: 'absolute', top: '20px', left: '20px', height: '50px', width: '50px'}}
+        ref={floatingElementRef}
+      />
+      <div ref={anchorElementRef} />
+    </div>
+  )
+}
+
+it('should should return a position', () => {
+  const cb = jest.fn()
+  render(<Component callback={cb} />)
+  expect(cb).toHaveBeenCalledTimes(2)
+  expect(cb.mock.calls[1][0]['position']).toMatchInlineSnapshot(`
+Object {
+  "anchorSide": "outside-bottom",
+  "left": 0,
+  "top": 4,
+}
+`)
+})