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

package/src/Popover/Popover.tsx

@@ -1,271 +0,0 @@
-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

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

package/src/Popover/rewireTabOrder.ts

@@ -1,106 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,159 +0,0 @@
-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

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

package/src/Progress/Progress.mdx

@@ -1,23 +0,0 @@
----
-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

@@ -1,49 +0,0 @@
-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

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