@planningcenter/tapestry-react 2.10.0-rc.1 → 2.10.0-rc.2

package/src/utils.js

@@ -1,808 +0,0 @@
-import { Children, cloneElement } from 'react'
-import { tabbable } from 'tabbable'
-import kebabCase from 'lodash/kebabCase'
-
-/**
- * Returns true if user platform is an iOS device
- * https://stackoverflow.com/a/9039885/1461204
- * @return {Boolean}
- */
-const isIOS =
-  typeof window !== 'undefined'
-    ? !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
-    : false
-
-/**
- * Returns true if user platform supports passive events
- * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support
- * @return {Boolean}
- */
-let supportsPassiveEvents = false
-if (typeof window !== 'undefined') {
-  try {
-    const options = {
-      get passive() {
-        supportsPassiveEvents = true
-        return true
-      },
-    }
-    window.addEventListener('test', options, options)
-    window.removeEventListener('test', options, options)
-  } catch (err) {
-    supportsPassiveEvents = false
-  }
-}
-
-/**
- * Used to clone and apply props to children
- * @param {Function} children accepts valid React children
- * @param {Function} callback return the props that should be applied to the cloned child
- * @return {Function} the cloned set of children
- */
-function cloneChildren(children, callback) {
-  const childrenArray = Children.toArray(children).filter(
-    (child) => child === 0 || Boolean(child)
-  )
-  const childrenCount = childrenArray.length
-  return childrenArray.map((child, index) =>
-    typeof child === 'string' || typeof child === 'number'
-      ? child
-      : cloneElement(
-          child,
-          callback(child, {
-            index,
-            childrenCount,
-            firstChild: index === 0,
-            lastChild: index === Math.max(0, childrenCount - 1),
-            isEven: index % 2 === 0,
-            isOdd: Math.abs(index % 2) === 1,
-          })
-        )
-  )
-}
-
-/**
- * This is intended to be used to compose event handlers
- * @param {Function} internal the internal event handler
- * @param {Function} external the external event handler
- * @return {Function} the event handler to add to an element
- */
-function composeEvents(internal, external) {
-  return external
-    ? (event, ...args) => {
-        internal(event, ...args)
-        external(event, ...args)
-      }
-    : internal
-}
-
-/**
- * Similar to composeEvents, but allows an object of events to be composed together
- * @param {Function} internalEvents the internal event handlers
- * @param {Function} externalEvents the external event handlers
- * @return {Function} the event handler to add to an element
- */
-function composeMultipleEvents(internalEvents, externalEvents) {
-  return Object.keys(externalEvents).reduce((composedEvents, key) => {
-    const internal = internalEvents[key]
-    const external = externalEvents[key]
-    return {
-      ...composedEvents,
-      [key]: internal
-        ? (event, ...args) => {
-            internal(event, ...args)
-            external(event, ...args)
-          }
-        : external,
-    }
-  }, {})
-}
-
-/**
- * Deselects any currently selected text
- */
-function deselectCurrentTextRange() {
-  window.getSelection().removeAllRanges()
-}
-
-/**
- * Get the closest focusable element
- * @param {HTMLElement} node - the element to start searching from
- * @return {HTMLElement} the closest element that is focusable
- */
-function getClosestFocusableElement(node) {
-  if (node instanceof Element) {
-    if (node.getAttribute('tabindex') === '-1' || isElementInteractive(node)) {
-      return node
-    } else {
-      return getClosestFocusableElement(node.parentNode)
-    }
-  } else {
-    return document.body
-  }
-}
-
-/**
- * Get the closest element that scrolls
- * @param {HTMLElement} node - the element to start searching from
- * @return {HTMLElement} the closest parentNode that scrolls
- */
-function getClosestViewport(node, includeHidden) {
-  if (node) {
-    const { overflow, overflowX, overflowY } = getComputedStyle(node)
-    const canScroll = (includeHidden
-      ? /(auto|scroll|hidden)/
-      : /(auto|scroll)/
-    ).test(overflow + overflowX + overflowY)
-    if (node === document.body || canScroll) {
-      return node
-    } else {
-      return getClosestViewport(node.parentNode, includeHidden)
-    }
-  } else {
-    return document.body
-  }
-}
-
-/**
- * Determines which child elements are interactive according to:
- * https://html.spec.whatwg.org/dev/dom.html#interactive-content
- * @param parent The parent element used to determine which children are interactive
- */
-function getInteractiveChildElements(parent) {
-  const interactiveElements = []
-  parent.querySelectorAll('*').forEach((element) => {
-    if (isElementInteractive(element)) {
-      interactiveElements.push(element)
-    }
-  })
-  return interactiveElements
-}
-
-/**
- * Get element's bounding client rect with an option to get cloned dimensions
- */
-
-const getRectObject = (node) => {
-  const bounds = node.getBoundingClientRect()
-  return {
-    width: bounds.width,
-    height: bounds.height,
-    top: bounds.top,
-    right: bounds.right,
-    bottom: bounds.bottom,
-    left: bounds.left,
-    x: bounds.x,
-    y: bounds.y,
-  }
-}
-
-function getRect(node, { clone } = {}) {
-  if (clone) {
-    const context = document.createElement('div')
-    const nodeClone = node.cloneNode(true)
-    let rect
-    context.appendChild(nodeClone)
-    document.body.appendChild(context)
-    rect = getRectObject(nodeClone)
-    document.body.removeChild(context)
-    return rect
-  } else {
-    return node ? getRectObject(node) : {}
-  }
-}
-
-/**
- * Get scrollbar width
- */
-let scrollbarWidth
-function getScrollbarWidth() {
-  if (scrollbarWidth === undefined) {
-    const div = document.createElement('div')
-    div.setAttribute(
-      'style',
-      `
-      width: 100px;
-      height: 100px;
-      position: absolute;
-      opacity: 0;
-      overflow: scroll;
-    `
-    )
-    document.body.appendChild(div)
-    scrollbarWidth = div.offsetWidth - div.clientWidth
-    document.body.removeChild(div)
-  }
-  return scrollbarWidth
-}
-
-/**
- * Returns { previous, next } tabbable siblings
- */
-function getTabbableSiblings(node, _startNode) {
-  const tabbables = tabbable(node.parentNode)
-  const startNode = _startNode || node
-  const startIndex = tabbables.indexOf(startNode)
-  const previousTabbable = tabbables[startIndex - 1]
-  const nextTabbable = tabbables[startIndex + 1]
-  if (node !== document.body && (!previousTabbable || !nextTabbable)) {
-    return getTabbableSiblings(node.parentNode, startNode)
-  }
-  return {
-    previous: previousTabbable,
-    next: nextTabbable,
-  }
-}
-
-/**
- * Generates a simple unique ID
- * @return {String} the unique ID
- */
-let idCounter = 1
-function generateId(prefix) {
-  return `${prefix}-${idCounter++}`
-}
-
-/**
- * Get the width for a single line of text
- * @param {String} text - the string of text to be measured
- * @param {Object|HTMLElement} font - optional font styles or node to pull font styles from
- * @return {Number} the width of the text passed in
- */
-const expando = 'text-width' + new Date().getTime()
-const canvas =
-  typeof document === 'undefined' ? null : document.createElement('canvas')
-const context = canvas && canvas.getContext('2d')
-const fontDefaults = {
-  fontStyle: 'normal',
-  fontVariant: 'normal',
-  fontWeight: 'normal',
-  fontSize: 'medium',
-  fontFamily: 'sans-serif',
-}
-
-function getTextWidth(text, font) {
-  if (!context) {
-    return -1
-  }
-  if (font instanceof HTMLElement) {
-    font = font[expando] || (font[expando] = getComputedStyle(font))
-  } else {
-    font = { ...fontDefaults, ...font }
-  }
-  context.font = [
-    font.fontStyle,
-    font.fontVariant,
-    font.fontWeight,
-    font.fontSize,
-    font.fontFamily,
-  ].join(' ')
-  return context.measureText(text).width
-}
-
-/**
- * Inserts an item in a list at a specific index returning a new array
- */
-function insertAtIndex({ list, index, value }) {
-  const nextList = [...list]
-  nextList.splice(index, 0, value)
-  return nextList
-}
-
-/**
- * Determines if a given element is interactive according to:
- * https://html.spec.whatwg.org/dev/dom.html#interactive-content
- * @param element Element that may be interactive (focusable)
- */
-function isTypeOfElementNativelyFocusable(element) {
-  const nodeName = element.nodeName.toLowerCase()
-  const validInput = nodeName === 'input' && element.type !== 'hidden'
-  const validAnchor = nodeName === 'a' && element.hasAttribute('href')
-  const validAudioVideo =
-    ['audio', 'video'].includes(nodeName) && element.hasAttribute('controls')
-  const validImgObject =
-    ['img', 'object'].includes(nodeName) && element.hasAttribute('usemap')
-  const validNativelyFocusable = [
-    'button',
-    'details',
-    'embed',
-    'iframe',
-    'label',
-    'select',
-    'textarea',
-  ].includes(nodeName)
-  return (
-    validInput ||
-    validAnchor ||
-    validAudioVideo ||
-    validImgObject ||
-    validNativelyFocusable
-  )
-}
-
-function isElementInteractive(element) {
-  const hidden =
-    element.style.display === 'none' || element.style.visibility === 'hidden'
-  const disabled =
-    element.hasAttribute('disabled') &&
-    element.getAttribute('disabled') !== 'false'
-  // If the element is not visible or interactive, fail fast
-  if (hidden || disabled) {
-    return false
-  }
-  const hasTabIndex = element.hasAttribute('tabindex')
-  const tabIndexNonNegative = Number(element.getAttribute('tabindex')) >= 0
-  const tabbableElement = hasTabIndex && tabIndexNonNegative
-  const tabbableNativeElement =
-    isTypeOfElementNativelyFocusable(element) &&
-    (!hasTabIndex || tabIndexNonNegative)
-  return tabbableElement || tabbableNativeElement
-}
-
-/**
- * Determines if value is an array or not
- */
-function isArray(value) {
-  return value && value.constructor === Array
-}
-
-/**
- * Determines if value is a function or not
- */
-function isFunction(value) {
-  return value && value.constructor === Function
-}
-
-/**
- * Determines if a value is present in an array by
- * performing a shallow equal check on each item.
- */
-function isValueInArray(collection, value) {
-  let index = -1
-  collection.some((v, i) => (shallowEqual(v, value) ? (index = i) : false))
-  return index
-}
-
-/**
- * Joins React children using a separator.
- */
-function joinChildren(children, separator = ', ') {
-  const childrenArray = Children.toArray(children)
-  const lastChildIndex = childrenArray.length - 1
-  return childrenArray.reduce((result, child, index) => {
-    if (child.type === separator.type) {
-      const nextResult = [...result]
-      nextResult.pop()
-      return nextResult.concat(child)
-    } else if (index < lastChildIndex) {
-      return result.concat([
-        child,
-        typeof separator === 'string'
-          ? separator
-          : cloneElement(separator, { key: index + '-separator' }),
-      ])
-    } else {
-      return result.concat(child)
-    }
-  }, [])
-}
-
-/**
- * Lock all scrollbars by disabling mousewheel and locking scrollbars in position
- * Optionally provide an element to allow it to scroll when hovered
- */
-const listenerOptions = supportsPassiveEvents
-  ? { capture: true, passive: false }
-  : true
-let lockedScrolls = []
-
-function lockScroll(node) {
-  const scrollCoords = new WeakMap()
-  const preventDefault = (event) => event.preventDefault()
-  const mouseOver = () =>
-    window.removeEventListener('wheel', preventDefault, listenerOptions)
-  const mouseOut = () =>
-    window.addEventListener('wheel', preventDefault, listenerOptions)
-  const mouseDown = (event) => {
-    if (event.target !== node) {
-      scrollCoords.set(event.target, {
-        x: event.target.scrollLeft,
-        y: event.target.scrollTop,
-      })
-    }
-  }
-  const wheelLock = (event) => {
-    const scrollableDistance = node.scrollHeight - node.offsetHeight
-    if (
-      (event.deltaY > 0 && node.scrollTop >= scrollableDistance) ||
-      (event.deltaY < 0 && node.scrollTop <= 0)
-    ) {
-      event.preventDefault()
-    }
-  }
-  const scrollLock = (event) => {
-    const scrollElement =
-      event.target === document ? document.documentElement : event.target
-    const scrollElementCoords = scrollCoords.get(scrollElement)
-    if (scrollElementCoords) {
-      scrollElement.scrollLeft = scrollElementCoords.x
-      scrollElement.scrollTop = scrollElementCoords.y
-    }
-  }
-  const addListeners = () => {
-    if (node) {
-      node.addEventListener('mouseover', mouseOver, true)
-      node.addEventListener('mouseout', mouseOut, true)
-      mouseOut()
-    }
-    window.addEventListener('mousedown', mouseDown, true)
-    window.addEventListener('wheel', wheelLock, listenerOptions)
-    window.addEventListener('scroll', scrollLock, true)
-  }
-  const removeListeners = () => {
-    if (node) {
-      node.removeEventListener('mouseover', mouseOver, true)
-      node.removeEventListener('mouseout', mouseOut, true)
-      mouseOver()
-    }
-    window.removeEventListener('mousedown', mouseDown, true)
-    window.removeEventListener('wheel', wheelLock, listenerOptions)
-    window.removeEventListener('scroll', scrollLock, true)
-  }
-  if (lockedScrolls.length > 0) {
-    // check if we need to remove any current scroll locks
-    lockedScrolls[lockedScrolls.length - 1].removeListeners()
-
-    // filter any nodes that may be gone from the DOM now
-    lockedScrolls = lockedScrolls.filter((lockedScroll) =>
-      document.body.contains(lockedScroll.node)
-    )
-  }
-  // store the scroll lock enable/disable methods so we can disable them when
-  // new ones are created or enable them when old ones are destroyed
-  if (document.body.contains(node)) {
-    lockedScrolls.push({
-      node,
-      addListeners,
-      removeListeners,
-    })
-    addListeners()
-  }
-  return () => {
-    const index = lockedScrolls.findIndex((scroll) => scroll.node === node)
-
-    if (index > -1) {
-      removeListeners()
-
-      // remove this scroll lock from stored scroll locks
-      lockedScrolls.splice(index, 1)
-
-      // again, filter any nodes that may be gone from the DOM now
-      lockedScrolls = lockedScrolls.filter((lockedScroll) => {
-        const containsLockedScrollNode = document.body.contains(
-          lockedScroll.node
-        )
-        // as a side effect, make sure to remove listeners from this node
-        if (containsLockedScrollNode === false) {
-          lockedScroll.removeListeners()
-        }
-        return containsLockedScrollNode
-      })
-
-      // enable the previous scroll lock if any are left
-      if (lockedScrolls.length > 0) {
-        lockedScrolls[lockedScrolls.length - 1].addListeners()
-      }
-    }
-  }
-}
-
-/**
- * No op function used to stub function props
- */
-function noop() {
-  return null
-}
-
-/**
- * Pad a number with 0's
- */
-function padNumber(number, size) {
-  return Array(Math.max(size - String(number).length + 1, 0)).join(0) + number
-}
-
-/**
- * Listen for window visibility and focus/blur changes
- */
-function pageViewChange(callback) {
-  if (typeof window !== 'undefined') {
-    const handleFocus = () => callback(true)
-    const handleBlur = () => callback(false)
-    const handleVisibilityChange = () => callback(!document.hidden)
-    window.addEventListener('focus', handleFocus)
-    window.addEventListener('blur', handleBlur)
-    document.addEventListener('visibilitychange', handleVisibilityChange)
-    return () => {
-      window.removeEventListener('focus', handleFocus)
-      window.removeEventListener('blur', handleBlur)
-      document.removeEventListener('visibilitychange', handleVisibilityChange)
-    }
-  } else {
-    return () => {}
-  }
-}
-
-/**
- * Create a range of numbers
- */
-function range(start, stop) {
-  const arr = []
-  for (let i = start; i < stop; i++) {
-    arr.push(i)
-  }
-  return arr
-}
-
-/**
- * Removes an item in a list at a specific index returning a new array
- */
-function removeAtIndex({ list, index }) {
-  const nextList = [...list]
-  nextList.splice(index, 1)
-  return nextList
-}
-
-/**
- * Helps with rendering a nested group of data that needs an ordered index.
- */
-function renderIndexedGroup({
-  group,
-  renderGroup,
-  renderEmpty = 'No items found',
-}) {
-  return group.length > 0
-    ? group.reduce(
-        ({ collection, index }, data, dataIndex) => {
-          collection.push(renderGroup(data, () => index++))
-          return dataIndex === group.length - 1
-            ? collection
-            : { collection, index }
-        },
-        { collection: [], index: 0 }
-      )
-    : renderEmpty
-}
-
-/**
- * Reorder a result in an array by its index
- */
-function reorderArray({ list, startIndex, endIndex }) {
-  const result = Array.from(list)
-  const [removed] = result.splice(startIndex, 1)
-  result.splice(endIndex, 0, removed)
-  return result
-}
-
-/**
- * Shallow compare two items
- */
-function shallowEqual(a, b) {
-  return JSON.stringify(a) === JSON.stringify(b)
-}
-
-/**
- * Selects the full text range including number inputs
- */
-function selectFullTextRange(node) {
-  if (node.type === 'number') {
-    node.select()
-  } else {
-    node.setSelectionRange(0, 9999)
-  }
-}
-
-/**
- * Stop an event from propagating
- */
-function stopImmediatePropagation(e) {
-  e.nativeEvent.stopImmediatePropagation()
-}
-
-/**
- * Adds event.stopPropagation() to a component's onClick event.
- * Used to prevent element's onClick from bubbling up the tree.
- */
-function stopPropagationClick(onClick) {
-  return (event) => {
-    event.stopPropagation()
-    if (onClick) {
-      onClick(event)
-    }
-  }
-}
-
-/**
- * Simple focus trap that only traps focus when focused on first/last elements.
- * This allows focus traps to work with third-party modals.
- */
-const TAB_KEY = 9
-
-function trapFocus(node) {
-  function handleKeyDown(event) {
-    const tabbables = tabbable(node)
-    const [firstTabbable] = tabbables
-    const [lastTabbable] = tabbables.reverse()
-    if (
-      event.shiftKey &&
-      event.target === firstTabbable &&
-      event.keyCode === TAB_KEY
-    ) {
-      event.preventDefault()
-      lastTabbable.focus()
-    }
-    if (
-      !event.shiftKey &&
-      event.target === lastTabbable &&
-      event.keyCode === TAB_KEY
-    ) {
-      event.preventDefault()
-      firstTabbable.focus()
-    }
-  }
-  const tabbables = tabbable(node)
-  let [currentTabbable] = tabbables
-  let currentIndex = 0
-
-  // skip over HelperDrawer toggles and move to the first interactive element
-  while (currentTabbable?.hasAttribute('data-helper-drawer-toggle')) {
-    currentTabbable = tabbables[currentIndex++]
-  }
-
-  let lastActiveElement = document.activeElement
-  if (currentTabbable) {
-    currentTabbable.focus()
-  }
-
-  node.addEventListener('keydown', handleKeyDown)
-
-  return () => {
-    if (lastActiveElement) {
-      lastActiveElement.focus()
-    }
-    node.removeEventListener('keydown', handleKeyDown)
-  }
-}
-
-/**
- * Utilities to create and manage CSS properties
- */
-const createdCSSProperties = new Set()
-
-function createCSSProperty(key, value) {
-  if (!createdCSSProperties.has(key)) {
-    createdCSSProperties.add(key)
-  }
-  return `--${kebabCase(key)}-${kebabCase(value)}`
-}
-
-function getCSSProperty(key, value) {
-  return key && value
-    ? `var(--${kebabCase(key)}-${kebabCase(value)})`
-    : undefined
-}
-
-function objectToCSSProperties(themeKey, props) {
-  const properties = {}
-  for (let propKey in props) {
-    const propValue = props[propKey]
-    properties[createCSSProperty(themeKey, propKey)] =
-      typeof propValue === 'number'
-        ? `${propValue}px`
-        : createdCSSProperties.has(propValue)
-        ? getCSSProperty(themeKey, propValue)
-        : propValue
-  }
-  return properties
-}
-
-function callRef(ref, node) {
-  if (ref.current === undefined) {
-    if (typeof ref === 'function') {
-      ref(node)
-    }
-  } else {
-    ref.current = node
-  }
-}
-
-function pushProp(
-  target,
-  key,
-  value,
-  mergeValue = (nextValue, currentValue) => nextValue
-) {
-  if (key === 'className') {
-    target.className = [target.className, value].join(' ').trim()
-  } else if (key === 'style') {
-    target.style = { ...target.style, ...value }
-  } else if (key === 'ref' || key === 'innerRef') {
-    const oldRef = target[key]
-    target[key] = oldRef
-      ? (node) => {
-          callRef(oldRef, node)
-          callRef(value, node)
-        }
-      : value
-  } else if (typeof value === 'function') {
-    const oldFn = target[key]
-    target[key] = oldFn
-      ? (...args) => {
-          oldFn(...args)
-          value(...args)
-        }
-      : value
-  } else if (!(key in target)) {
-    target[key] = value
-  } else {
-    target[key] = mergeValue(value, target[key])
-  }
-}
-
-/**
- * Merges sets of props together:
- *  - duplicate `className` props get concatenated
- *  - duplicate `style` props get shallow merged (later props have precedence for conflicting rules)
- *  - duplicate refs or functions (to be used for event handlers) get called in order from left to right
- * @param propGroup Sets of props to merge together. Later props have precedence.
- */
-function mergeProps(...propGroup) {
-  if (propGroup.length === 1) {
-    return propGroup[0]
-  }
-  return propGroup.reduce((mergedProps, props) => {
-    for (const key in props) {
-      pushProp(mergedProps, key, props[key])
-    }
-    return mergedProps
-  }, {})
-}
-
-export {
-  cloneChildren,
-  composeEvents,
-  composeMultipleEvents,
-  createCSSProperty,
-  deselectCurrentTextRange,
-  generateId,
-  getCSSProperty,
-  getClosestFocusableElement,
-  getClosestViewport,
-  getInteractiveChildElements,
-  getRect,
-  getScrollbarWidth,
-  getTabbableSiblings,
-  getTextWidth,
-  insertAtIndex,
-  isArray,
-  isElementInteractive,
-  isFunction,
-  isIOS,
-  isValueInArray,
-  joinChildren,
-  lockScroll,
-  mergeProps,
-  noop,
-  objectToCSSProperties,
-  padNumber,
-  pageViewChange,
-  range,
-  removeAtIndex,
-  renderIndexedGroup,
-  reorderArray,
-  shallowEqual,
-  selectFullTextRange,
-  stopImmediatePropagation,
-  stopPropagationClick,
-  supportsPassiveEvents,
-  trapFocus,
-}