@planningcenter/tapestry-react 2.10.0-rc.13 → 2.10.0-rc.15

package/src/Popover/Popover.tsx

@@ -0,0 +1,271 @@
+import * as React from 'react'
+import { createPopper } from '@popperjs/core'
+
+import Box from '../Box'
+import Portal from '../Portal'
+import { lockScroll } from '../utils'
+
+import rewireTabOrder from './rewireTabOrder'
+import { getFixedParent, getModifiers } from './utils'
+import { useThemeProps } from '../system'
+import { useTheme } from '@emotion/react'
+
+type anchorCallbackProps = {
+  innerRef(node: HTMLElement): void
+  onKeyDown(event: React.SyntheticEvent): void
+}
+
+export type PopoverProps = {
+  /**
+   * Controls the default component or tag being rendered.
+   */
+  as?: any
+
+  /**
+   * The element to attach the popover to. Clones the element's ref to calculate
+   * position relative to the optional `relativeTo` prop or the `renderTo` element.
+   */
+  anchorElement: React.ReactElement | ((anchorCallbackProps) => null)
+
+  /**
+   * Attempts to keep popover in view clipping edges if too large.
+   */
+  keepInView?: boolean
+
+  /**
+   * Locks external scrollbars when open.
+   */
+  lockScrollWhileOpen?: boolean
+
+  /**
+   * Matches anchor and popover widths.
+   */
+  matchWidths?: boolean | 'minimum'
+
+  /**
+   * Controls rendering of the popover.
+   */
+  open: boolean
+
+  /**
+   * Controls the space between the popover and its anchor.
+   */
+  offset: number
+
+  /**
+   * Called when the popover should close.
+   */
+  onRequestClose?: () => void
+
+  /**
+   * Where to place the popover.
+   */
+  placement?:
+    | '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 relative to. Uses `renderTo` by default.
+   */
+  relativeTo?: any
+
+  /**
+   * Where to render the 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
+
+  /**
+   * Determines if the popover should flip or not when it overflows.
+   */
+  shouldFlip?: boolean
+
+  /**
+   * Calls `as` `innerRef` to calculate popover's bounds.
+   */
+  innerRef?: any
+} & React.HTMLAttributes<any>
+
+export const Popover = React.forwardRef(
+  (
+    {
+      anchorElement,
+      as: Element = Box,
+      innerRef,
+      keepInView = true,
+      lockScrollWhileOpen,
+      matchWidths,
+      offset = 8,
+      open,
+      onKeyDown,
+      onRequestClose,
+      placement = 'bottom',
+      relativeTo,
+      renderTo,
+      shouldFlip = false,
+      ...restProps
+    }: PopoverProps,
+    ref
+  ) => {
+    const { zIndex = 10000, ...themeProps } = useThemeProps(
+      'popover',
+      restProps
+    )
+    const anchorRef = React.useRef(null)
+    const popperRef = React.useRef(null)
+    const unlockScroll = React.useRef(null)
+    const unwireTabOrder = React.useRef(null)
+    const [renderPopperTo, setRenderPopperTo] = React.useState(renderTo)
+    const setPopperInnerRef = (popperNode) => {
+      if (popperNode) {
+        if (popperRef.current === null) {
+          const anchorNode = relativeTo
+            ? relativeTo.current || relativeTo
+            : anchorRef.current
+          popperRef.current = createPopper(anchorNode, popperNode, {
+            placement,
+            // PopperJS is written in Flow and TS isn't playing nice :(
+            // @ts-ignore
+            modifiers: getModifiers({
+              matchWidths,
+              offset,
+              keepInView,
+              shouldFlip,
+            }),
+          })
+
+          if (unwireTabOrder.current) {
+            unwireTabOrder.current()
+          }
+          unwireTabOrder.current = rewireTabOrder(popperNode)
+
+          if (lockScrollWhileOpen) {
+            if (unlockScroll.current) {
+              unlockScroll.current()
+            }
+            unlockScroll.current = lockScroll(popperNode)
+          }
+        }
+      } else {
+        cleanup()
+      }
+      if (typeof innerRef === 'function') {
+        innerRef(popperNode)
+      } else if (innerRef?.current) {
+        innerRef.current = popperNode
+      }
+    }
+    const cleanup = () => {
+      if (popperRef.current) {
+        popperRef.current.destroy()
+        popperRef.current = null
+      }
+      if (unwireTabOrder.current) {
+        unwireTabOrder.current()
+        unwireTabOrder.current = null
+      }
+      if (unlockScroll.current) {
+        unlockScroll.current()
+        unlockScroll.current = null
+      }
+    }
+    const requestClose = (event) => {
+      if (event.key === 'Escape' && onRequestClose) {
+        if (open) {
+          event.nativeEvent.stopImmediatePropagation()
+        }
+        onRequestClose()
+      }
+      if (onKeyDown) {
+        onKeyDown(event)
+      }
+    }
+
+    // cleanup when open has changed to `false` and on component unmount
+    React.useEffect(() => {
+      return () => {
+        if (open === false) {
+          cleanup()
+        }
+      }
+    }, [open])
+
+    // reposition the popover if an update in React occured while open
+    // for instance this can happen when selecting multiple items in a menu and the anchor grows/shrinks
+    React.useEffect(() => {
+      if (open && popperRef.current) {
+        popperRef.current.update()
+      }
+    })
+
+    // by default this will make sure popovers render in the same fixed area as the anchor
+    React.useEffect(() => {
+      if (renderPopperTo === undefined && anchorElement) {
+        setRenderPopperTo(getFixedParent(anchorElement))
+      }
+    }, [anchorElement])
+
+    // carried over from previous implementation, used exclusively in Dropdown
+    React.useImperativeHandle(ref, () => ({
+      focusAnchor: () => {
+        if (anchorRef.current && anchorRef.current.focus) {
+          anchorRef.current.focus()
+        }
+      },
+    }))
+
+    return (
+      <Portal renderTo={renderPopperTo}>
+        {typeof anchorElement === 'function'
+          ? anchorElement({
+              innerRef: (node) => (anchorRef.current = node),
+              onKeyDown: requestClose,
+            })
+          : React.cloneElement(anchorElement, {
+              innerRef: (node) => {
+                anchorRef.current = node
+                if (typeof anchorElement.props.innerRef === 'function') {
+                  anchorElement.props.innerRef(node)
+                } else if (anchorElement.props.innerRef?.current) {
+                  anchorElement.props.innerRef.current = node
+                }
+              },
+              onKeyDown: (event) => {
+                requestClose(event)
+                if (anchorElement.props.onKeyDown) {
+                  anchorElement.props.onKeyDown(event)
+                }
+              },
+            })}
+        {open
+          ? React.createElement(Element as any, {
+              innerRef: setPopperInnerRef,
+              width: 'auto',
+              onKeyDown: (event) => {
+                requestClose(event)
+                if (onKeyDown) {
+                  onKeyDown(event)
+                }
+              },
+              // ideally this should be pulled out to something like ThemeProvider for predictable z indices
+              style: { zIndex },
+              ...themeProps,
+            })
+          : null}
+      </Portal>
+    )
+  }
+)
+
+Popover.displayName = 'Popover'

package/src/Popover/index.ts

@@ -0,0 +1,2 @@
+export * from './Popover'
+export { Popover as default } from './Popover'

package/src/Popover/rewireTabOrder.ts

@@ -0,0 +1,106 @@
+import { tabbable } from 'tabbable'
+
+const TAB_KEY = 9
+
+function getNextActiveElement(node, startNode = null) {
+  const tabbables = tabbable(node.parentNode)
+  const nodeToStartAt = startNode || node
+  const nextTabbable = tabbables[tabbables.indexOf(nodeToStartAt) + 1]
+  if (!nextTabbable && node !== document.body) {
+    return getNextActiveElement(node.parentNode, nodeToStartAt)
+  }
+  return nextTabbable
+}
+
+class RewireTabOrder {
+  tabbables = []
+  firstFocusableElement: HTMLElement = null
+  lastFocusableElement: HTMLElement = null
+  originalActiveElement: HTMLElement = null
+  nextActiveElement: HTMLElement = null
+
+  constructor(node) {
+    if (node) {
+      this.tabbables = tabbable(node)
+      if (this.tabbables.length > 0) {
+        this.init()
+      }
+    }
+  }
+
+  init() {
+    this.firstFocusableElement = this.tabbables[0]
+    this.lastFocusableElement = this.tabbables[this.tabbables.length - 1]
+    this.originalActiveElement = document.activeElement as HTMLElement
+    this.nextActiveElement = getNextActiveElement(this.originalActiveElement)
+
+    this.originalActiveElement.addEventListener(
+      'keydown',
+      this.moveFocusToTargetFromTriggerElement
+    )
+    this.firstFocusableElement.addEventListener(
+      'keydown',
+      this.moveFocusToTargetFromFirstElement
+    )
+    this.lastFocusableElement.addEventListener(
+      'keydown',
+      this.moveFocusToTargetFromLastElement
+    )
+  }
+
+  destroy() {
+    if (this.tabbables.length === 0) {
+      return
+    }
+    this.originalActiveElement.removeEventListener(
+      'keydown',
+      this.moveFocusToTargetFromTriggerElement
+    )
+    this.firstFocusableElement.removeEventListener(
+      'keydown',
+      this.moveFocusToTargetFromFirstElement
+    )
+    this.lastFocusableElement.removeEventListener(
+      'keydown',
+      this.moveFocusToTargetFromLastElement
+    )
+  }
+
+  moveFocusToTargetFromTriggerElement = (event) => {
+    if (!event.shiftKey && event.keyCode === TAB_KEY) {
+      event.preventDefault()
+      if (this.tabbables.includes(this.nextActiveElement)) {
+        this.nextActiveElement.focus()
+      } else {
+        this.firstFocusableElement.focus()
+      }
+    }
+  }
+
+  moveFocusToTargetFromFirstElement = (event) => {
+    if (
+      event.target === this.firstFocusableElement &&
+      event.shiftKey &&
+      event.keyCode === TAB_KEY
+    ) {
+      event.preventDefault()
+      this.lastFocusableElement.focus()
+    }
+  }
+
+  moveFocusToTargetFromLastElement = (event) => {
+    if (
+      event.target === this.lastFocusableElement &&
+      !event.shiftKey &&
+      event.keyCode === TAB_KEY
+    ) {
+      event.preventDefault()
+      this.firstFocusableElement.focus()
+    }
+  }
+}
+
+export default (node) => {
+  const unwireTabOrder = new RewireTabOrder(node)
+  return () => unwireTabOrder.destroy()
+}

package/src/Popover/utils.ts

@@ -0,0 +1,63 @@
+import maxSize from 'popper-max-size-modifier'
+
+export function getModifiers({ matchWidths, offset, keepInView, shouldFlip }) {
+  return [
+    // https://popper.js.org/docs/v2/modifiers/community-modifiers/
+    maxSize,
+    {
+      name: 'applyMaxSize',
+      enabled: true,
+      phase: 'beforeWrite',
+      requires: ['maxSize'],
+      fn({ state }) {
+        const { height } = state.modifiersData.maxSize
+        state.styles.popper.maxHeight = `${height}px`
+      },
+    },
+    {
+      name: 'matchWidths',
+      enabled: Boolean(matchWidths),
+      phase: 'write',
+      requires: ['computeStyles'],
+      fn: () => {},
+      effect: ({ state }) => {
+        const { offsetWidth } = state.elements.reference
+        if (matchWidths === 'minimum') {
+          if (offsetWidth > state.elements.popper.offsetWidth) {
+            state.elements.popper.style.minWidth = `${offsetWidth}px`
+          }
+        } else {
+          state.elements.popper.style.width = `${offsetWidth}px`
+        }
+      },
+    },
+    {
+      name: 'offset',
+      options: {
+        offset: [0, offset],
+      },
+    },
+    {
+      name: 'preventOverflow',
+      enabled: keepInView,
+    },
+    {
+      name: 'flip',
+      enabled: shouldFlip,
+    },
+  ]
+}
+
+export function getFixedParent(node) {
+  const { offsetParent } = node
+  if (offsetParent) {
+    const offsetParentStyles = getComputedStyle(offsetParent)
+    if (offsetParentStyles.position !== 'fixed') {
+      return getFixedParent(offsetParent)
+    } else {
+      return offsetParent
+    }
+  } else {
+    return null
+  }
+}

package/src/Portal/Portal.tsx

@@ -0,0 +1,159 @@
+import * as React from 'react'
+import { createPortal } from 'react-dom'
+import { getThemeDataAttribute } from '../ThemeProvider/styles'
+import { ThemeContext } from '@emotion/react'
+import { Theme } from '../index'
+
+export type PortalProps = {
+  children: any
+
+  /** Styles to apply to the portal root element. */
+  style?: React.CSSProperties
+
+  /** Where the portal is rendered into. */
+  renderTo?: HTMLElement | string
+
+  /** The HTML element to create. Defaults to `div`. */
+  renderTag?: string
+
+  /** Callback when Portal is updated. */
+  onUpdate?: () => void
+
+  /** Returns the rendered node similar to refs. */
+  getPortalNode?: (HTMLElement) => void
+}
+
+/** Accepts any additional HTML attributes. */
+class Portal extends React.Component<PortalProps> {
+  static defaultProps = {
+    renderTag: 'div',
+    renderTo: null,
+  }
+
+  static contextType = ThemeContext
+  // @ts-ignore error TS2612: Property 'context' will overwrite the base property in 'Component<PortalProps, {}, any>'. If this is intentional, add an initializer. Otherwise, add a 'declare' modifier or remove the redundant declaration.
+  context: React.ContextType<React.Context<Theme>>
+
+  _portalNode: HTMLElement = null
+  _needsUpdate = false
+  _updated = false
+
+  componentDidMount() {
+    const secondChild = this._getSecondChild()
+    if (secondChild) {
+      this._setupPortal()
+      this._updatePortal()
+    }
+  }
+
+  componentDidUpdate() {
+    const secondChild = this._getSecondChild()
+    if (secondChild && !this._portalNode) {
+      this._setupPortal()
+    } else if (!secondChild && this._portalNode) {
+      this._destroyPortal()
+    }
+    if (secondChild) {
+      this._updatePortal()
+    }
+    if (this._needsUpdate) {
+      if (this._updated) {
+        if (this.props.onUpdate) {
+          this.props.onUpdate()
+        }
+        this._updated = false
+        this._needsUpdate = false
+      } else {
+        this.forceUpdate()
+        this._updated = true
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    this._destroyPortal()
+  }
+
+  _getSecondChild() {
+    return React.Children.toArray(this.props.children)[1]
+  }
+
+  _getRenderToNode() {
+    const { renderTo } = this.props
+    if (typeof renderTo === 'string') {
+      return document.querySelector(renderTo)
+    } else {
+      return renderTo || document.body
+    }
+  }
+
+  _setupPortal() {
+    if (typeof document !== 'undefined') {
+      this._portalNode = document.createElement(this.props.renderTag)
+      this._getRenderToNode().appendChild(this._portalNode)
+      if (this.props.getPortalNode) {
+        this.props.getPortalNode(this._portalNode)
+      }
+    }
+    this.forceUpdate()
+    this._needsUpdate = true
+  }
+
+  _updatePortal() {
+    const {
+      renderTo,
+      renderTag,
+      onUpdate,
+      getPortalNode,
+      style,
+      children,
+      ...restProps
+    } = this.props
+    Object.keys(restProps).forEach((key) => {
+      this._portalNode.setAttribute(key, restProps[key])
+    })
+
+    this._portalNode.classList.add('tapestry-react-reset')
+
+    this._portalNode.setAttribute(
+      getThemeDataAttribute(this.context.id),
+      'true'
+    )
+
+    if (style) {
+      Object.keys(style).forEach((key) => {
+        this._portalNode.style[key] = style[key]
+      })
+    }
+  }
+
+  _renderPortal(component) {
+    return createPortal(component, this._portalNode)
+  }
+
+  _destroyPortal() {
+    if (this._portalNode) {
+      this._portalNode.parentNode.removeChild(this._portalNode)
+      if (this.props.getPortalNode) {
+        this.props.getPortalNode(null)
+      }
+    }
+    this._portalNode = null
+  }
+
+  render() {
+    const [firstChild, secondChild] = React.Children.toArray(
+      this.props.children
+    )
+    return this._portalNode ? (
+      <>
+        {firstChild}
+        {this._renderPortal(secondChild)}
+      </>
+    ) : (
+      firstChild
+    )
+  }
+}
+
+export { Portal }

package/src/Portal/index.ts

@@ -0,0 +1,2 @@
+export * from './Portal'
+export { Portal as default } from './Portal'

package/src/Progress/Progress.mdx

@@ -0,0 +1,23 @@
+---
+title: Progress
+category: Indicators
+summary: Display progress towards the completion of a task. Composes [Box](/box).
+propsSummary: Accepts [Box](/box) props.
+themeKey: progress
+---
+
+```jsx live
+render(<Progress value={50} />)
+```
+
+```jsx live
+render(
+  <Progress
+    value={20}
+    height={1}
+    radius={undefined}
+    backgroundColor="hsl(330, 100%, 92%)"
+    activeColor="hsl(330, 100%, 72%)"
+  />
+)
+```

package/src/Progress/Progress.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+
+import Box from '../Box'
+import { useThemeProps } from '../system'
+
+export type Props = {
+  /**
+   * The current value of the progress bar.
+   */
+  value?: number
+  /**
+   * Active color of the progress bar.
+   */
+  activeColor?: string
+}
+
+const Progress = ({ value, ...restProps }: Props): JSX.Element => {
+  const { activeColor = 'primary', ...themeProps } = useThemeProps(
+    'progress',
+    restProps
+  )
+
+  return (
+    <Box
+      role="progressbar"
+      aria-valuenow={value}
+      width="100%"
+      height={0.5}
+      radius={6}
+      position="relative"
+      overflow="hidden"
+      backgroundColor="grey-3"
+      {...themeProps}
+    >
+      <Box
+        position="absolute"
+        top={0}
+        right={0}
+        bottom={0}
+        left={0}
+        transformOrigin="center left"
+        backgroundColor={activeColor}
+        style={{ transform: `scaleX(${value / 100})` }}
+      />
+    </Box>
+  )
+}
+
+export default Progress

package/src/Progress/index.js

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