@planningcenter/tapestry-react 2.10.0-rc.4 → 2.10.0-rc.6

package/src/Tooltip/Tooltip.js

@@ -1,275 +0,0 @@
-// @flow
-import React, {
-  Children,
-  cloneElement,
-  forwardRef,
-  useRef,
-  useState,
-  useImperativeHandle,
-  useEffect,
-} from 'react'
-import mitt from 'mitt'
-
-import Popover from '../Popover'
-import { composeEvents, pageViewChange } from '../utils'
-import { useThemeProps } from '../system'
-
-export type Props = {
-  /**
-   * The child becomes the trigger for the tooltip, unless it is overridden with `popoverProps={{relativeTo: ref}}`.
-   */
-  children?: any,
-  /**
-   * The amount of time in milliseconds before the tooltip closes.
-   */
-  closeDelay: number,
-
-  /**
-   * Controls whether the Popover is rendered as open or closed.
-   */
-  defaultOpen: boolean,
-
-  /**
-   * The amount of time in milliseconds before the tooltip opens.
-   */
-  openDelay: number,
-
-  /**
-   * The title of the tooltip. Accepts a string or a React element.
-   */
-  title: any,
-
-  /**
-   * Reveals the tooltip when the cloned child receives focus.
-   */
-  triggerOnFocus: boolean,
-
-  /**
-   * Reveals the tooltip when the cloned child is hovered.
-   */
-  triggerOnHover: boolean,
-
-  /**
-   * Attempts to keep popover in view clipping edges if too large.
-   */
-  keepInView?: boolean,
-
-  /** 
-   * `'top-start'
-    | 'top'
-    | 'top-end'
-    | 'right-start'
-    | 'right'
-    | 'right-end'
-    | 'bottom-start'
-    | 'bottom'
-    | 'bottom-end'
-    | 'left-start'
-    | 'left'
-    | 'left-end'`
-
-   * Where to place the popover. 
-  */
-  placement?: string,
-
-  /**
-   * Where to render the composed popover into. Accepts an HTML element or selector.
-   * Uses the closest fixed parent or `document.body` by default. This will only
-   * be computed once on initial render.
-   */
-  renderTo?: HTMLElement | string,
-
-  /**
-   * Accepts any valid [Popover](/popover) props.
-   */
-  popoverProps?: object,
-
-  /**
-   * Set a specific z-index for Tooltip. (defaults to `9999`)
-   * This option can be helpful in adjusting elements that overlap visually.
-   */
-  zIndex: number,
-
-  /**
-   * Passes props to [Popover](/popover)'s `anchorElement`.
-   */
-  childProps?: object,
-}
-
-const emitter = mitt()
-let globalTimeoutId = null
-let instantDelay = false
-
-function startGlobalTimeout() {
-  instantDelay = true
-  globalTimeoutId = setTimeout(() => {
-    instantDelay = false
-  }, 500)
-}
-
-function clearGlobalTimeout() {
-  clearTimeout(globalTimeoutId)
-}
-
-function Tooltip(props: Props, ref) {
-  const {
-    children,
-    openDelay = 500,
-    closeDelay = 300,
-    defaultOpen = false,
-    keepInView = true,
-    placement,
-    popoverProps,
-    renderTo,
-    title,
-    triggerOnFocus = true,
-    triggerOnHover = true,
-    zIndex = 9999,
-    ...childProps
-  } = useThemeProps('tooltip', props)
-
-  let isPageInView = useRef(true)
-  let isMouseDown = useRef(false)
-  let openTimeoutId = useRef(null)
-  let closeTimeoutId = useRef(null)
-
-  const [isPopoverOpen, setIsPopoverOpen] = useState(defaultOpen)
-
-  useEffect(() => {
-    // prevents tooltips showing when focused and navigating back to a page after leaving
-    const cleanupPageViewChange = pageViewChange((inView) =>
-      setTimeout(() => (isPageInView.current = inView))
-    )
-    emitter.on('CLOSE_OPEN_TOOLTIPS', close)
-    return () => {
-      emitter.off('CLOSE_OPEN_TOOLTIPS', close)
-      clearTimeout(openTimeoutId.current)
-      clearTimeout(closeTimeoutId.current)
-      cleanupPageViewChange()
-    }
-  }, [])
-
-  const open = () => {
-    clearTimeout(closeTimeoutId.current)
-    closeTimeoutId.current = null
-    setIsPopoverOpen(true)
-  }
-
-  const close = () => {
-    clearTimeout(openTimeoutId.current)
-    openTimeoutId.current = null
-    setIsPopoverOpen(false)
-  }
-
-  const toggle = () => {
-    setIsPopoverOpen(!isPopoverOpen)
-  }
-
-  useImperativeHandle(ref, () => ({
-    open,
-    close,
-    toggle,
-  }))
-
-  useEffect(() => {
-    if (triggerOnFocus === false) {
-      close()
-    }
-  }, [triggerOnFocus])
-
-  useEffect(() => {
-    if (triggerOnHover === false) {
-      close()
-    }
-  }, [triggerOnHover])
-
-  const createOpenTimeout = () => {
-    clearGlobalTimeout()
-    if (openTimeoutId.current === null) {
-      clearTimeout(closeTimeoutId.current)
-      closeTimeoutId.current = null
-      if (isPopoverOpen === false) {
-        emitter.emit('CLOSE_OPEN_TOOLTIPS')
-        openTimeoutId.current = setTimeout(
-          () => open(),
-          instantDelay ? 0 : openDelay
-        )
-      }
-    }
-  }
-
-  const createCloseTimeout = () => {
-    startGlobalTimeout()
-    if (closeTimeoutId.current === null) {
-      clearTimeout(openTimeoutId.current)
-      openTimeoutId.current = null
-      closeTimeoutId.current = setTimeout(() => close(), closeDelay)
-    }
-  }
-
-  const handleFocus = () => {
-    if (isPageInView.current && !isMouseDown.current) {
-      open()
-    }
-  }
-
-  const handleMouseDown = () => {
-    isMouseDown.current = true
-    close()
-  }
-
-  const handleMouseUp = () => {
-    isMouseDown.current = false
-  }
-
-  const child = Children.only(children)
-  const {
-    onFocus,
-    onBlur,
-    onMouseEnter,
-    onMouseLeave,
-    onMouseDown,
-    onMouseUp,
-  } = child.props
-
-  if (!title) {
-    return cloneElement(child, childProps)
-  }
-
-  if (triggerOnFocus) {
-    childProps.onFocus = composeEvents(handleFocus, onFocus)
-    childProps.onBlur = composeEvents(close, onBlur)
-    childProps.onMouseDown = composeEvents(handleMouseDown, onMouseDown)
-    childProps.onMouseUp = composeEvents(handleMouseUp, onMouseUp)
-  }
-
-  if (triggerOnHover) {
-    childProps.onMouseEnter = composeEvents(createOpenTimeout, onMouseEnter)
-    childProps.onMouseLeave = composeEvents(createCloseTimeout, onMouseLeave)
-  }
-
-  return (
-    <Popover
-      shouldFlip
-      paddingHorizontal={0.75}
-      paddingVertical={0.25}
-      fontSize={5}
-      textAlign="center"
-      radius={2}
-      backgroundColor="grey-9"
-      color="rgba(255,255,255,0.94)"
-      zIndex={zIndex}
-      {...popoverProps}
-      anchorElement={cloneElement(child, childProps)}
-      onMouseEnter={createOpenTimeout}
-      onMouseLeave={createCloseTimeout}
-      keepInView={keepInView}
-      placement={placement}
-      renderTo={renderTo}
-      children={title}
-      open={isPopoverOpen}
-    />
-  )
-}
-Tooltip = forwardRef(Tooltip)
-export default Tooltip

package/src/Tooltip/Tooltip.mdx

@@ -1,79 +0,0 @@
----
-title: Tooltip
-category: Overlays
-summary: Used to display a minimal amount of helpful information.
-propsSummary: Accepts [Popover](/popover) props.
-themeKey: tooltip
----
-
-```jsx live
-render(
-  <StackView
-    axis="horizontal"
-    alignment="center"
-    distribution="center"
-    spacing={8}
-  >
-    <Tooltip placement="left" title="Tooltip">
-      <Box>Left</Box>
-    </Tooltip>
-    <Tooltip placement="top" title="Tooltip">
-      <Box>Top</Box>
-    </Tooltip>
-    <Tooltip placement="bottom" title="Tooltip">
-      <Box>Bottom</Box>
-    </Tooltip>
-    <Tooltip placement="right" title="Tooltip">
-      <Box>Right</Box>
-    </Tooltip>
-    <Button icon={{ name: 'general.search' }} tooltip={{ title: 'search' }} />
-  </StackView>
-)
-```
-
-```jsx live
-render(
-  <Tooltip
-    title={
-      <StackView width={24} spacing={1} cursor="default">
-        <StackView axis="horizontal" alignment="center" spacing={1}>
-          <Icon name="general.exclamationCircle" size="md" color="error" />
-          <Text fontSize={3} weight={500} color="error">
-            Error
-          </Text>
-        </StackView>
-        <Text fontSize={3} lineHeight={3}>
-          This action is not permitted.
-        </Text>
-      </StackView>
-    }
-    openDelay={0}
-    closeDelay={300}
-    popoverProps={{
-      textAlign: 'left',
-      paddingHorizontal: 2,
-      paddingVertical: 2,
-      backgroundColor: 'surface',
-      color: 'foreground',
-      stroke: 'separator',
-      strokeWeight: 1,
-      elevation: 2,
-    }}
-  >
-    <Text>Custom Tooltip</Text>
-  </Tooltip>
-)
-```
-
-```jsx live
-render(() => {
-  const ref = React.useRef()
-  return (
-    <StackView innerRef={ref} padding={4} backgroundColor="surfaceSecondary">
-      <Tooltip title="Hello tooltip" popoverProps={{ relativeTo: ref }}>
-        <Box>Tooltip relative to the parent view.</Box>
-      </Tooltip>
-    </StackView>
-  )
-})
-```

package/src/Tooltip/Tooltip.test.tsx

@@ -1,136 +0,0 @@
-import React from 'react'
-import { act, render, screen, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import '@testing-library/jest-dom/extend-expect'
-import { Button, Link, StackView, Text, Tooltip, hooks } from '..'
-
-describe('Tooltip', () => {
-  test('does not render string when closed', () => {
-    const string = 'Test Text'
-    render(
-      <Tooltip title={string}>
-        <Text>Tooltip anchor</Text>
-      </Tooltip>
-    )
-    expect(screen.queryByText(string)).toBeNull()
-  })
-
-  test('renders string on hover', async () => {
-    const string = 'Test Text'
-    render(
-      <Tooltip title={string}>
-        <Text>Tooltip anchor</Text>
-      </Tooltip>
-    )
-    userEvent.hover(screen.getByText('Tooltip anchor'))
-    const tooltip = await screen.findByText(string)
-    expect(tooltip).toBeInTheDocument()
-  })
-
-  test('renders string on focus', async () => {
-    const string = 'Test Text'
-    render(
-      <Tooltip title={string} triggerOnFocus={true}>
-        <Button>Tooltip anchor</Button>
-      </Tooltip>
-    )
-    userEvent.tab()
-    const tooltip = await screen.findByText(string)
-    expect(tooltip).toBeInTheDocument()
-  })
-
-  test('removes string after timeout', async () => {
-    const string = 'Test Text'
-    render(
-      <Tooltip title={string}>
-        <Text>Tooltip anchor</Text>
-      </Tooltip>
-    )
-    const anchor = screen.getByText('Tooltip anchor')
-    expect(screen.queryByText(string)).toBeNull()
-
-    userEvent.hover(anchor)
-
-    const tooltip = await screen.findByText(string)
-    expect(tooltip).toBeInTheDocument()
-
-    userEvent.unhover(anchor)
-    await waitFor(() => {
-      expect(screen.queryByText(string)).not.toBeInTheDocument()
-    })
-  })
-
-  test('stays open when hovering a custom tooltip', () => {
-    const CustomTooltip = function () {
-      const { hover, hoverProps } = hooks.useHover()
-
-      return (
-        <Tooltip
-          title={
-            <Link to="#">
-              <StackView>
-                <Text data-hover={hover}>{string}</Text>
-              </StackView>
-            </Link>
-          }
-        >
-          <Button {...hoverProps}>Tooltip anchor</Button>
-        </Tooltip>
-      )
-    }
-    const string = 'Test Text'
-    render(<CustomTooltip />)
-    const anchor = screen.getByText('Tooltip anchor')
-
-    userEvent.hover(anchor)
-    act(() => {
-      jest.runAllTimers()
-    })
-    const tooltip = screen.getByText(string)
-    expect(tooltip).toBeInTheDocument()
-
-    userEvent.unhover(anchor)
-    userEvent.hover(tooltip)
-    act(() => {
-      jest.runAllTimers()
-    })
-    expect(tooltip).toBeInTheDocument()
-
-    userEvent.unhover(tooltip)
-    act(() => {
-      jest.runAllTimers()
-    })
-    expect(tooltip).not.toBeInTheDocument()
-  })
-
-  test('cleans up pageViewChange listeners', () => {
-    window.removeEventListener = jest
-      .fn()
-      .mockImplementation((event, callback) => {})
-    document.removeEventListener = jest
-      .fn()
-      .mockImplementation((event, callback) => {})
-
-    const { unmount } = render(
-      <Tooltip title="Test Text">
-        <Text>Tooltip anchor</Text>
-      </Tooltip>
-    )
-    unmount()
-
-    expect(window.removeEventListener).toBeCalledWith(
-      'focus',
-      expect.any(Function)
-    )
-
-    expect(window.removeEventListener).toBeCalledWith(
-      'blur',
-      expect.any(Function)
-    )
-
-    expect(document.removeEventListener).toBeCalledWith(
-      'visibilitychange',
-      expect.any(Function)
-    )
-  })
-})

package/src/Tooltip/index.js

@@ -1,2 +0,0 @@
-import Tooltip from './Tooltip'
-export default Tooltip

package/src/VariantProvider/VariantProvider.js

@@ -1,15 +0,0 @@
-import React, { createContext, useContext } from 'react'
-
-const VariantContext = createContext()
-
-export function useVariant() {
-  const variant = useContext(VariantContext)
-  return variant ? Object.keys(variant).filter((key) => variant[key]) : null
-}
-
-export function VariantProvider({ children, ...props }) {
-  const parentVariant = useVariant()
-  return (
-    <VariantContext.Provider value={props}>{children}</VariantContext.Provider>
-  )
-}

package/src/VariantProvider/index.js

@@ -1 +0,0 @@
-export { VariantProvider as default, useVariant } from './VariantProvider'

package/src/Wizard/Step.js

@@ -1,11 +0,0 @@
-import { useContext, useEffect } from 'react'
-
-import WizardContext from './WizardContext'
-
-function Step({ children, name, valid }) {
-  const { addStep, ...wizard } = useContext(WizardContext)
-  useEffect(() => addStep({ name, valid }), [])
-  return children(wizard)
-}
-
-export default Step

package/src/Wizard/Wizard.mdx

@@ -1,105 +0,0 @@
----
-title: Wizard
-category: General
-propsSummary: Accepts [StackView](/stackview) props.
-themeKey: wizard
----
-
-```jsx live
-function Step({ name }) {
-  return (
-    <Wizard.Step name={name}>
-      {(wizard) => (
-        <Box padding={4}>
-          <Input
-            value={wizard.payload[name]}
-            placeholder={name}
-            onChange={(event) => {
-              wizard.setPayload({
-                [name]: event.target.value,
-              })
-            }}
-          />
-        </Box>
-      )}
-    </Wizard.Step>
-  )
-}
-
-function sendPayload(payload, complete) {
-  new Promise((resolve, reject) => {
-    console.log('Sending payload...', payload)
-    setTimeout(() => {
-      if (Math.random() > 0.5) {
-        resolve()
-      } else {
-        reject()
-      }
-      complete()
-    }, 2500)
-  })
-    .then(() => {
-      console.log('Payload was successful')
-    })
-    .catch(() => {
-      console.log('Payload failed to send')
-    })
-}
-
-render(
-  <Wizard
-    width="100%"
-    padding={8}
-    nextButtonTitle={({ activeStepIndex, steps, totalSteps }) =>
-      activeStepIndex >= totalSteps - 1
-        ? 'Finish'
-        : `Next: ${steps[activeStepIndex + 1].name}`
-    }
-    initialPayload={{ 'Step 1': 'Initial wizard content' }}
-    onSubmit={sendPayload}
-  >
-    <Step name="Step 1" />
-    <Step name="Step 2" />
-    <Step name="Step 3" />
-  </Wizard>
-)
-```
-
-```jsx live
-render(
-  <Wizard
-    buttonProps={{ size: 'sm' }}
-    cancelButtonProps={{ theme: 'error', variant: 'fill' }}
-    backButtonProps={{
-      theme: 'dark',
-      variant: 'outline',
-      iconLeft: { name: 'general.leftChevron', size: 'xxs' }
-    }}
-    footerProps={{ backgroundColor: 'grey-2' }}
-    nextButtonProps={{ iconRight: { name: 'general.rightChevron', size: 'xxs' } }}
-    onCancel={() => console.log('cancel')}
-    onSubmit={() => console.log('submit')}
-    padding={8}
-    renderProgress={({ activeStepIndex, totalSteps }) => {
-      const value = ((activeStepIndex + 1) / totalSteps) * 100
-
-      return (
-        <Box padding={4} width="100%">
-          <Progress value={value} />
-        </Box>
-      )
-    }}
-    width="100%"
-  >
-    {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].map((n) => (
-      <Wizard.Step name={`Step ${n}`}>
-        {() => (
-          <Box padding={4}>
-            <Text align="center">This is step number {n}.</Text>
-          </Box>
-        )}
-      </Wizard.Step>
-    ))}
-  </Wizard>
-)
-```