@primer/components 31.2.0-rc.a2a8604e → 31.2.0-rc.c53cfd9e

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()
+  })
+})

package/src/hooks/useAnchoredPosition.ts

@@ -2,6 +2,7 @@ import React from 'react'
 import {PositionSettings, getAnchoredPosition, AnchorPosition} from '../behaviors/anchoredPosition'
 import {useProvidedRefOrCreate} from './useProvidedRefOrCreate'
 import {useResizeObserver} from './useResizeObserver'
+import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 export interface AnchoredPositionHookSettings extends Partial<PositionSettings> {
   floatingElementRef?: React.RefObject<Element>
@@ -41,7 +42,7 @@ export function useAnchoredPosition(
     [floatingElementRef, anchorElementRef, ...dependencies]
   )
 
-  React.useLayoutEffect(updatePosition, [updatePosition])
+  useLayoutEffect(updatePosition, [updatePosition])
 
   useResizeObserver(updatePosition)
 

package/src/hooks/useCombinedRefs.ts

@@ -1,4 +1,5 @@
-import React, {ForwardedRef, useRef} from 'react'
+import {ForwardedRef, useRef} from 'react'
+import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 /**
  * Creates a ref by combining multiple constituent refs. The ref returned by this hook
@@ -11,7 +12,7 @@ import React, {ForwardedRef, useRef} from 'react'
 export function useCombinedRefs<T>(...refs: (ForwardedRef<T> | null | undefined)[]) {
   const combinedRef = useRef<T | null>(null)
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     function setRefs(current: T | null = null) {
       for (const ref of refs) {
         if (!ref) {
@@ -32,7 +33,6 @@ export function useCombinedRefs<T>(...refs: (ForwardedRef<T> | null | undefined)
       // eslint-disable-next-line react-hooks/exhaustive-deps
       setRefs(combinedRef.current)
     }
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [...refs, combinedRef.current])
 

package/src/hooks/useResizeObserver.ts

@@ -1,7 +1,7 @@
-import React from 'react'
+import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 export function useResizeObserver(callback: () => void) {
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     const observer = new window.ResizeObserver(() => callback())
     observer.observe(document.documentElement)
     return () => {