@primer/components 33.0.0 → 33.1.0-rc.6856bcf5

package/src/__tests__/behaviors/scrollIntoViewingArea.test.ts

@@ -0,0 +1,195 @@
+import {scrollIntoViewingArea} from '../../behaviors/scrollIntoViewingArea'
+
+function scrollPositionFormula(
+  positionData: {viewingAreaEdgePosition: number; childEdgePosition: number; margin: number},
+  isChildAboveViewingArea: boolean
+) {
+  const {viewingAreaEdgePosition, childEdgePosition, margin} = positionData
+  const marginOffset = margin * (isChildAboveViewingArea ? -1 : 1)
+
+  return childEdgePosition - viewingAreaEdgePosition + marginOffset
+}
+
+// The DOMRect constructor isn't available in JSDOM, so we improvise here.
+function makeDOMRect(x: number, y: number, width: number, height: number): DOMRect {
+  return {
+    x,
+    y,
+    width,
+    height,
+    top: y,
+    left: x,
+    right: x + width,
+    bottom: y + height,
+    toJSON() {
+      return this
+    }
+  }
+}
+
+// Since Jest/JSDOM doesn't support layout, we can stub out getBoundingClientRect if we know the
+// correct dimensions. JSDOM will handle the rest of the DOM API used by getAnchoredPosition.
+function createVirtualDOM(viewingAreaRect: DOMRect, childRect: DOMRect) {
+  const viewingArea = document.createElement('div')
+  viewingArea.style.overflow = 'auto'
+  viewingArea.id = 'viewingArea'
+  // eslint-disable-next-line github/unescaped-html-literal
+  viewingArea.innerHTML = '<div id="child"></div>'
+  const child = viewingArea.querySelector('#child')!
+  child.getBoundingClientRect = () => childRect
+  viewingArea.getBoundingClientRect = () => viewingAreaRect
+  return {viewingArea, child}
+}
+
+describe('scrollIntoViewingArea', () => {
+  it('scrolls the expected amount when only the viewingArea element and child element are passed to the function', () => {
+    const scrollToMock = jest.fn()
+    Object.defineProperty(window.Element.prototype, 'scrollTo', {
+      writable: true,
+      value: scrollToMock
+    })
+    const childHeight = 50
+    const viewAreaHeight = 100
+    const childStart = viewAreaHeight + 10
+    const expectedScrollPosition = scrollPositionFormula(
+      {viewingAreaEdgePosition: viewAreaHeight, childEdgePosition: childStart + childHeight, margin: 8},
+      false
+    )
+
+    const viewingAreaRect = makeDOMRect(0, 0, 100, viewAreaHeight)
+    const childRect = makeDOMRect(0, childStart, 100, childHeight)
+    const {viewingArea, child} = createVirtualDOM(viewingAreaRect, childRect)
+
+    viewingArea.getBoundingClientRect = () => viewingAreaRect
+    viewingArea.scrollTop = 0
+    child.getBoundingClientRect = () => childRect
+
+    scrollIntoViewingArea(child as HTMLDivElement, viewingArea)
+    expect(scrollToMock).toHaveBeenCalledWith({
+      behavior: 'smooth',
+      top: expectedScrollPosition
+    })
+  })
+
+  describe('y-axis', () => {
+    it('scrolls the child into the viewing area when it is AFTER the overflow cutoff point', () => {
+      const scrollToMock = jest.fn()
+      Object.defineProperty(window.Element.prototype, 'scrollTo', {
+        writable: true,
+        value: scrollToMock
+      })
+      const childHeight = 50
+      const viewAreaHeight = 100
+      const childStart = viewAreaHeight + 10
+      const scrollMargin = 10
+      const expectedScrollPosition = scrollPositionFormula(
+        {viewingAreaEdgePosition: viewAreaHeight, childEdgePosition: childStart + childHeight, margin: scrollMargin},
+        false
+      )
+
+      const viewingAreaRect = makeDOMRect(0, 0, 100, viewAreaHeight)
+      const childRect = makeDOMRect(0, childStart, 100, childHeight)
+      const {viewingArea, child} = createVirtualDOM(viewingAreaRect, childRect)
+
+      viewingArea.getBoundingClientRect = () => viewingAreaRect
+      viewingArea.scrollTop = 0
+      child.getBoundingClientRect = () => childRect
+
+      scrollIntoViewingArea(child as HTMLDivElement, viewingArea, 'vertical', scrollMargin, scrollMargin, 'auto')
+      expect(scrollToMock).toHaveBeenCalledWith({
+        behavior: 'auto',
+        top: expectedScrollPosition
+      })
+    })
+
+    it('scrolls the child into the viewing area when it is BEFORE the overflow cutoff point', () => {
+      const scrollToMock = jest.fn()
+      Object.defineProperty(window.Element.prototype, 'scrollTo', {
+        writable: true,
+        value: scrollToMock
+      })
+      const childHeight = 50
+      const childStart = childHeight * -1 - 10
+      const scrollMargin = 10
+      const expectedScrollPosition = scrollPositionFormula(
+        {viewingAreaEdgePosition: 0, childEdgePosition: childStart, margin: scrollMargin},
+        true
+      )
+
+      const viewingAreaRect = makeDOMRect(0, 0, 100, 100)
+      const childRect = makeDOMRect(0, childStart, 100, childHeight)
+      const {viewingArea, child} = createVirtualDOM(viewingAreaRect, childRect)
+
+      viewingArea.getBoundingClientRect = () => viewingAreaRect
+      viewingArea.scrollTop = 0
+      child.getBoundingClientRect = () => childRect
+
+      scrollIntoViewingArea(child as HTMLDivElement, viewingArea, 'vertical', scrollMargin, scrollMargin, 'auto')
+      expect(scrollToMock).toHaveBeenCalledWith({
+        behavior: 'auto',
+        top: expectedScrollPosition
+      })
+    })
+  })
+
+  describe('x-axis', () => {
+    it('scrolls the child into the viewing area when it is AFTER the overflow cutoff point', () => {
+      const scrollToMock = jest.fn()
+      Object.defineProperty(window.Element.prototype, 'scrollTo', {
+        writable: true,
+        value: scrollToMock
+      })
+      const childWidth = 50
+      const viewAreaWidth = 100
+      const childStart = viewAreaWidth + 10
+      const scrollMargin = 10
+      const expectedScrollPosition = scrollPositionFormula(
+        {viewingAreaEdgePosition: viewAreaWidth, childEdgePosition: childStart + childWidth, margin: scrollMargin},
+        false
+      )
+
+      const viewingAreaRect = makeDOMRect(0, 0, 100, viewAreaWidth)
+      const childRect = makeDOMRect(childStart, 0, childWidth, 100)
+      const {viewingArea, child} = createVirtualDOM(viewingAreaRect, childRect)
+
+      viewingArea.getBoundingClientRect = () => viewingAreaRect
+      viewingArea.scrollLeft = 0
+      child.getBoundingClientRect = () => childRect
+
+      scrollIntoViewingArea(child as HTMLDivElement, viewingArea, 'horizontal', scrollMargin, scrollMargin, 'auto')
+      expect(scrollToMock).toHaveBeenCalledWith({
+        behavior: 'auto',
+        left: expectedScrollPosition
+      })
+    })
+
+    it('scrolls the child into the viewing area when it is BEFORE the overflow cutoff point', () => {
+      const scrollToMock = jest.fn()
+      Object.defineProperty(window.Element.prototype, 'scrollTo', {
+        writable: true,
+        value: scrollToMock
+      })
+      const childWidth = 50
+      const childStart = childWidth * -1 - 10
+      const scrollMargin = 10
+      const expectedScrollPosition = scrollPositionFormula(
+        {viewingAreaEdgePosition: 0, childEdgePosition: childStart, margin: scrollMargin},
+        true
+      )
+
+      const viewingAreaRect = makeDOMRect(0, 0, 100, 100)
+      const childRect = makeDOMRect(childStart, 0, childWidth, 100)
+      const {viewingArea, child} = createVirtualDOM(viewingAreaRect, childRect)
+
+      viewingArea.getBoundingClientRect = () => viewingAreaRect
+      viewingArea.scrollTop = 0
+      child.getBoundingClientRect = () => childRect
+
+      scrollIntoViewingArea(child as HTMLDivElement, viewingArea, 'horizontal', scrollMargin, scrollMargin, 'auto')
+      expect(scrollToMock).toHaveBeenCalledWith({
+        behavior: 'auto',
+        left: expectedScrollPosition
+      })
+    })
+  })
+})

package/src/__tests__/filterObject.test.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.test.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,
+}
+`)
+})

package/src/__tests__/hooks/useOnEscapePress.test.tsx

@@ -0,0 +1,16 @@
+import {useOnEscapePress} from '../../hooks/useOnEscapePress'
+import {render, fireEvent} from '@testing-library/react'
+import React from 'react'
+
+it('should call function when user presses escape', () => {
+  const functionToCall = jest.fn()
+  const Component = () => {
+    useOnEscapePress(functionToCall)
+    return <div>content</div>
+  }
+
+  const {getByText} = render(<Component />)
+  const domNode = getByText('content')
+  fireEvent.keyDown(domNode, {key: 'Escape', code: 'Escape', keyCode: 27, charCode: 27})
+  expect(functionToCall).toHaveBeenCalledTimes(1)
+})

package/src/__tests__/hooks/useOnOutsideClick.test.tsx

@@ -0,0 +1,48 @@
+import {useOnOutsideClick} from '../../hooks/useOnOutsideClick'
+import {render} from '@testing-library/react'
+import React, {useRef} from 'react'
+import userEvent from '@testing-library/user-event'
+
+type ComponentProps = {
+  callback: () => void
+}
+const Component = ({callback}: ComponentProps) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const outerButton = useRef<HTMLButtonElement>(null)
+  const secondButton = useRef<HTMLButtonElement>(null)
+  useOnOutsideClick({ignoreClickRefs: [secondButton], containerRef, onClickOutside: callback})
+  return (
+    <div>
+      <button ref={outerButton}>button</button>
+      <button ref={secondButton}>button two</button>
+      <div ref={containerRef}>content</div>
+    </div>
+  )
+}
+it('should call function when user clicks outside container', () => {
+  const mockFunction = jest.fn()
+  const {getByText} = render(<Component callback={mockFunction} />)
+  userEvent.click(getByText('button'))
+  expect(mockFunction).toHaveBeenCalledTimes(1)
+})
+
+it('should not call function when user right clicks', () => {
+  const mockFunction = jest.fn()
+  const {getByText} = render(<Component callback={mockFunction} />)
+  userEvent.click(getByText('button'), {button: 1})
+  expect(mockFunction).toHaveBeenCalledTimes(0)
+})
+
+it('should not call function when clicking on ignored refs', () => {
+  const mockFunction = jest.fn()
+  const {getByText} = render(<Component callback={mockFunction} />)
+  userEvent.click(getByText('button two'))
+  expect(mockFunction).toHaveBeenCalledTimes(0)
+})
+
+it('should not call function when clicking inside container', () => {
+  const mockFunction = jest.fn()
+  const {getByText} = render(<Component callback={mockFunction} />)
+  userEvent.click(getByText('content'))
+  expect(mockFunction).toHaveBeenCalledTimes(0)
+})

package/src/__tests__/hooks/useOpenAndCloseFocus.test.tsx

@@ -0,0 +1,48 @@
+import React, {useRef} from 'react'
+import {render, waitFor} from '@testing-library/react'
+import {useOpenAndCloseFocus} from '../../hooks/useOpenAndCloseFocus'
+
+const Component = () => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const returnFocusRef = useRef<HTMLButtonElement>(null)
+  const noButtonRef = useRef<HTMLButtonElement>(null)
+  useOpenAndCloseFocus({containerRef, initialFocusRef: noButtonRef, returnFocusRef})
+  return (
+    <>
+      <button ref={returnFocusRef}>trigger</button>
+      <div ref={containerRef}>
+        <button>yes</button>
+        <button ref={noButtonRef}>no</button>
+      </div>
+    </>
+  )
+}
+
+const ComponentTwo = () => {
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  useOpenAndCloseFocus({containerRef, returnFocusRef: buttonRef})
+  return (
+    <>
+      <button ref={buttonRef}>button trigger</button>
+      <div ref={containerRef}>
+        <button>yes</button>
+        <button>no</button>
+      </div>
+    </>
+  )
+}
+
+it('should focus element passed into function', async () => {
+  const {getByText} = render(<Component />)
+  await waitFor(() => getByText('no'))
+  const noButton = getByText('no')
+  expect(document.activeElement).toEqual(noButton)
+})
+
+it('should focus first element when nothing is passed', async () => {
+  const {getByText} = render(<ComponentTwo />)
+  await waitFor(() => getByText('yes'))
+  const yesButton = getByText('yes')
+  expect(document.activeElement).toEqual(yesButton)
+})

package/src/__tests__/hooks/useProvidedStateOrCreate.test.tsx

@@ -0,0 +1,39 @@
+import {useProvidedStateOrCreate} from '../../hooks/useProvidedStateOrCreate'
+import {render} from '@testing-library/react'
+import React, {useState} from 'react'
+
+it('will use the provided state', () => {
+  const Component = () => {
+    const [state, setState] = useState('foo')
+    const [combinedState] = useProvidedStateOrCreate(state, setState, 'bar')
+    return <div>{combinedState}</div>
+  }
+
+  const doc = render(<Component />)
+  expect(doc.baseElement.textContent).toEqual('foo')
+})
+
+it('will set state correctly when provided a set state method', () => {
+  const Component = () => {
+    const [state, setState] = useState('foo')
+    const [combinedState, setCombinedState] = useProvidedStateOrCreate(state, setState, 'bar')
+    if (combinedState !== 'baz') setCombinedState('baz')
+    return <div>{combinedState}</div>
+  }
+
+  const doc = render(<Component />)
+  expect(doc.baseElement.textContent).toEqual('baz')
+})
+
+it('if not provided a state, will use an internal state', () => {
+  const Component = () => {
+    const state = undefined
+    const setState = undefined
+    const [combinedState, setCombinedState] = useProvidedStateOrCreate(state, setState, '')
+    if (combinedState !== 'bar') setCombinedState('bar')
+    return <div>{combinedState}</div>
+  }
+
+  const doc = render(<Component />)
+  expect(doc.baseElement.textContent).toEqual('bar')
+})

package/src/__tests__/theme.test.ts

@@ -0,0 +1,41 @@
+import {isShadowValue} from '../utils/theme'
+
+describe('isShadowValue', () => {
+  it('accepts transparent', () => {
+    expect(isShadowValue('0 0 0 transparent')).toBe(true)
+  })
+
+  it('accepts hex colors', () => {
+    expect(isShadowValue('0 0 0 #ff0000')).toBe(true)
+    expect(isShadowValue('0 0 0 #ff0')).toBe(true)
+  })
+
+  it('accepts rgba colors', () => {
+    expect(isShadowValue('0 0 0 rgb(255, 0, 0)')).toBe(true)
+    expect(isShadowValue('0 0 0 rgba(255,0,0,0.2)')).toBe(true)
+  })
+
+  it('accepts px values', () => {
+    expect(isShadowValue('12px 24px 0 #000')).toBe(true)
+  })
+
+  it('accepts em values', () => {
+    expect(isShadowValue('0.5em 1em 0 #000')).toBe(true)
+  })
+
+  it('accepts inset values', () => {
+    expect(isShadowValue('inset 12px 24px 0 #000')).toBe(true)
+  })
+
+  it('rejects individual colors', () => {
+    expect(isShadowValue('red')).toBe(false)
+    expect(isShadowValue('#f00')).toBe(false)
+    expect(isShadowValue('rgb(255, 0, 0)')).toBe(false)
+  })
+
+  it('rejects individual numeric values', () => {
+    expect(isShadowValue('0')).toBe(false)
+    expect(isShadowValue('12px')).toBe(false)
+    expect(isShadowValue('0.5em')).toBe(false)
+  })
+})

package/src/__tests__/themeGet.test.ts

@@ -0,0 +1,15 @@
+import {themeGet} from '..'
+
+describe('themeGet', () => {
+  it('acccepts theme prop', () => {
+    expect(themeGet('example')({theme: {example: 'test'}})).toBe('test')
+  })
+
+  it('allows theme prop to override primer theme', () => {
+    expect(themeGet('colors.gray.0')({theme: {colors: {gray: ['#f00']}}})).toBe('#f00')
+  })
+
+  it('uses primer theme as fallback', () => {
+    expect(themeGet('space.1')({})).toBe('4px')
+  })
+})

package/src/__tests__/themePreval.test.ts

@@ -0,0 +1,8 @@
+import fs from 'fs'
+import path from 'path'
+
+test('snapshot theme-preval.js', () => {
+  // Snapshot test the build output of theme-preval.js to catch any unexpected changes
+  const themePrevalFile = fs.readFileSync(path.resolve(__dirname, '../../lib/theme-preval.js'), 'utf8')
+  expect(themePrevalFile).toMatchSnapshot()
+})

package/src/__tests__/useSafeTimeout.test.tsx

@@ -0,0 +1,36 @@
+import {renderHook} from '@testing-library/react-hooks'
+import useSafeTimeout from '../hooks/useSafeTimeout'
+
+afterEach(() => {
+  jest.useRealTimers()
+})
+
+test('should call callback after time', async () => {
+  const {result, waitFor} = renderHook(() => useSafeTimeout())
+  const mockFunction = jest.fn()
+  result.current.safeSetTimeout(mockFunction, 300)
+  await waitFor(() => expect(mockFunction).toHaveBeenCalled())
+})
+
+test('should clear timeouts when safeClearTimeout is called', () => {
+  jest.useFakeTimers()
+  jest.spyOn(global, 'clearTimeout')
+  const {result} = renderHook(() => useSafeTimeout())
+  const mockFunction = jest.fn()
+  const timeoutId = result.current.safeSetTimeout(mockFunction, 300)
+  result.current.safeClearTimeout(timeoutId)
+  expect(clearTimeout).toHaveBeenCalledTimes(1)
+  expect(clearTimeout).toHaveBeenLastCalledWith(timeoutId)
+})
+
+test('should clear timeouts when the component is unmounted', () => {
+  jest.useFakeTimers()
+  jest.spyOn(global, 'clearTimeout')
+  const {result, unmount} = renderHook(() => useSafeTimeout())
+  const mockFunction = jest.fn()
+  const timeoutId = result.current.safeSetTimeout(mockFunction, 300)
+
+  unmount()
+  expect(clearTimeout).toHaveBeenCalledTimes(1)
+  expect(clearTimeout).toHaveBeenLastCalledWith(timeoutId)
+})

package/src/__tests__/utils/__snapshots__/createSlots.test.tsx.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ComponentWithSlots renders all slots 1`] = `
+<div>
+  <div>
+    first
+    <span>
+      free form
+       
+      second
+       
+    </span>
+  </div>
+</div>
+`;
+
+exports[`ComponentWithSlots renders with context passed to children 1`] = `
+<div>
+  <div>
+    <span>
+      free form
+       
+       
+      hi
+       
+      third
+    </span>
+  </div>
+</div>
+`;
+
+exports[`ComponentWithSlots renders with just one slot 1`] = `
+<div>
+  <div>
+    first
+    <span>
+      free form
+       
+       
+    </span>
+  </div>
+</div>
+`;
+
+exports[`ComponentWithSlots renders without any slots 1`] = `
+<div>
+  <div>
+    <span>
+      free form
+       
+       
+    </span>
+  </div>
+</div>
+`;

package/src/__tests__/utils/createSlots.test.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import 'babel-polyfill'
+import {render, waitFor} from '@testing-library/react'
+import createSlots from '../../utils/create-slots'
+
+// setup a component with slots
+const {Slots, Slot} = createSlots(['One', 'Two', 'Three'])
+type ContextTypes = {salutation?: string}
+
+const ComponentWithSlots: React.FC<ContextTypes> = ({salutation, children}) => {
+  return (
+    <Slots context={{salutation}}>
+      {slots => (
+        <div>
+          {slots.One}
+          <span>
+            {children} {slots.Two} {slots.Three}
+          </span>
+        </div>
+      )}
+    </Slots>
+  )
+}
+const SlotItem1: React.FC = ({children}) => <Slot name="One">{children}</Slot>
+const SlotItem2: React.FC = ({children}) => <Slot name="Two">{children}</Slot>
+const SlotItem3: React.FC = ({children}) => (
+  <Slot name="Three">
+    {(context: ContextTypes) => (
+      <>
+        {context.salutation} {children}
+      </>
+    )}
+  </Slot>
+)
+
+describe('ComponentWithSlots', () => {
+  it('renders all slots', async () => {
+    const component = render(
+      <ComponentWithSlots>
+        <SlotItem1>first</SlotItem1>
+        <SlotItem2>second</SlotItem2>
+        free form
+      </ComponentWithSlots>
+    )
+
+    await waitFor(() => component.getByText('first'))
+    expect(component.container).toMatchSnapshot()
+  })
+
+  it('renders without any slots', async () => {
+    const component = render(<ComponentWithSlots>free form</ComponentWithSlots>)
+    expect(component.container).toMatchSnapshot()
+  })
+
+  it('renders with just one slot', async () => {
+    const component = render(
+      <ComponentWithSlots>
+        <SlotItem1>first</SlotItem1>
+        free form
+      </ComponentWithSlots>
+    )
+    expect(component.container).toMatchSnapshot()
+  })
+
+  it('renders with context passed to children', async () => {
+    const component = render(
+      <ComponentWithSlots salutation="hi">
+        <SlotItem3>third</SlotItem3>
+        free form
+      </ComponentWithSlots>
+    )
+    expect(component.container).toMatchSnapshot()
+  })
+})