@planningcenter/tapestry-react 3.0.0 → 4.0.0-rc.2

package/src/DataTable/hooks/useColumnWidths.js

@@ -1,86 +0,0 @@
-import { useLayoutEffect, useRef } from 'react'
-
-import useRefManager from './useRefManager'
-
-function useColumnWidths({ columns, data, loading, bodyRef }) {
-  const [columnRefs, getColumnRef] = useRefManager()
-  const columnWidths = useRef([])
-
-  useLayoutEffect(() => {
-    const nextColumnWidths = []
-    const cells = []
-    let paddingDelta = 0
-
-    // build cells collection
-    for (let key in columnRefs.current) {
-      const [columnIndex, rowIndex, parentRowIndex] = key.split('.')
-      const column = columns[columnIndex]
-      const node = columnRefs.current[key]
-      const isSubColumn = parentRowIndex !== undefined
-
-      // skip sub columns unless specifically enabled
-      if (!column.includeSubCellWidth && isSubColumn) {
-        continue
-      }
-
-      // this is a naive padding calculation, but getComputedStyle is expensive
-      // and all cells should use the same padding so it should be ok
-      // alternatively, we could use a first-class padding API to avoid getComputedStyle
-      if (!paddingDelta) {
-        const computedStyle = getComputedStyle(node)
-        paddingDelta =
-          parseInt(computedStyle.paddingLeft, 10) +
-          parseInt(computedStyle.paddingRight, 10)
-      }
-
-      // only collect widths for undefined column.width
-      if (column.width) {
-        node.style.width = column.width + 'px'
-        if (!nextColumnWidths[columnIndex]) {
-          nextColumnWidths[columnIndex] = column.width
-        }
-      } else {
-        // set cell widths to "auto" so we can take an accurate measurement
-        node.style.width = 'auto'
-
-        // store cell data so it's easier to work with below
-        cells.push({ column, columnIndex, node })
-      }
-    }
-
-    // collect the largest width from the header and body cells
-    for (let index = 0; index < cells.length; index++) {
-      const { column, columnIndex, node } = cells[index]
-      let width = Math.max(
-        Math.ceil(node.getBoundingClientRect().width) - paddingDelta,
-        nextColumnWidths[columnIndex] || 0
-      )
-      if (column.minWidth) {
-        width = Math.max(width, column.minWidth)
-      }
-      if (column.maxWidth) {
-        width = Math.min(width, column.maxWidth)
-      }
-      nextColumnWidths[columnIndex] = width
-    }
-
-    // apply widths back to cells
-    for (let index = 0; index < cells.length; index++) {
-      const { columnIndex, node } = cells[index]
-      node.style.width = nextColumnWidths[columnIndex] + 'px'
-    }
-
-    // apply row widths
-    const minRowWidth = bodyRef.current.scrollWidth
-    for (let index = 0; index < bodyRef.current.children.length; index++) {
-      bodyRef.current.children[index].style.minWidth = minRowWidth + 'px'
-    }
-
-    // update column widths for sub rows
-    columnWidths.current = nextColumnWidths
-  }, [columns, data, loading])
-
-  return { columnWidths, getColumnRef }
-}
-
-export default useColumnWidths

package/src/DataTable/hooks/useHoverFocus.js

@@ -1,16 +0,0 @@
-import { useState } from 'react'
-
-function useHoverFocus() {
-  const [isHoverFocus, setHoverFocus] = useState()
-  return {
-    isHoverFocus,
-    bind: {
-      onFocus: () => setHoverFocus(true),
-      onBlur: () => setHoverFocus(false),
-      onMouseEnter: () => setHoverFocus(true),
-      onMouseLeave: () => setHoverFocus(false),
-    },
-  }
-}
-
-export default useHoverFocus

package/src/DataTable/hooks/useRefManager.js

@@ -1,21 +0,0 @@
-import { useCallback, useRef } from 'react'
-
-function useRefManager() {
-  const storedRefs = useRef({})
-  const refCallbacks = useRef({})
-  const getRef = useCallback((id) => {
-    if (!refCallbacks.current[id]) {
-      refCallbacks.current[id] = (ref) => {
-        if (!storedRefs.current[id] && ref) {
-          storedRefs.current[id] = ref
-        } else if (!ref) {
-          delete storedRefs.current[id]
-        }
-      }
-    }
-    return refCallbacks.current[id]
-  }, [])
-  return [storedRefs, getRef]
-}
-
-export default useRefManager

package/src/DataTable/hooks/useScrollShadows.js

@@ -1,82 +0,0 @@
-import React, { Fragment, useLayoutEffect, useRef, useState } from 'react'
-import { interpolate } from '@popmotion/popcorn'
-
-import { useMeasure } from '../../hooks'
-import { supportsPassiveEvents } from '../../utils'
-
-const getLeftScrollShadow = interpolate([0, 0.2], [0, 1])
-const getRightScrollShadow = interpolate([0.8, 1], [1, 0])
-const listenerOptions = supportsPassiveEvents
-  ? { capture: true, passive: false }
-  : true
-const shadowStyle = {
-  width: 10,
-  position: 'absolute',
-  top: 0,
-  bottom: 0,
-  zIndex: 30,
-  pointerEvents: 'none',
-}
-
-function getProgress(offset, maxOffset) {
-  return !offset || !maxOffset ? 0 : offset / maxOffset
-}
-
-function getBackground(direction) {
-  const rotate = 90 * direction
-  return `linear-gradient(${rotate}deg, transparent 4px, rgba(125, 125, 125, 0.15))`
-}
-
-function setShadowStyles({ leftNode, rightNode, offset, progress }) {
-  leftNode.style.left = offset + 'px'
-  leftNode.style.background = getBackground(-1)
-  leftNode.style.opacity = getLeftScrollShadow(progress)
-  rightNode.style.right = offset + 'px'
-  rightNode.style.background = getBackground(1)
-  rightNode.style.opacity = getRightScrollShadow(progress)
-}
-
-function useScrollShadows(ref) {
-  const leftShadow = useRef()
-  const rightShadow = useRef()
-  const [canScroll, setCanScroll] = useState(false)
-  const [maxOffset, setMaxOffset] = useState(null)
-  const [useMeasureRef, useMeasureEffect] = useMeasure()
-
-  useMeasureRef(ref)
-
-  useMeasureEffect(([node]) => {
-    setCanScroll(node.scrollWidth > node.offsetWidth)
-    setMaxOffset(node.scrollWidth - node.offsetWidth)
-  }, [])
-
-  useLayoutEffect(() => {
-    if (leftShadow.current && rightShadow.current) {
-      const node = ref.current
-      function handleScroll() {
-        setShadowStyles({
-          leftNode: leftShadow.current,
-          rightNode: rightShadow.current,
-          progress: getProgress(node.scrollLeft, maxOffset),
-          offset: 0,
-        })
-      }
-      handleScroll()
-      node.addEventListener('scroll', handleScroll, listenerOptions)
-      return () => {
-        node.removeEventListener('scroll', handleScroll, listenerOptions)
-      }
-    }
-  }, [maxOffset])
-
-  return (
-    canScroll && (
-      <Fragment>
-        <div ref={leftShadow} style={shadowStyle} aria-hidden />
-        <div ref={rightShadow} style={shadowStyle} aria-hidden />
-      </Fragment>
-    )
-  )
-}
-
-export default useScrollShadows

package/src/DataTable/hooks/useScrollSync.js

@@ -1,55 +0,0 @@
-import { useCallback, useLayoutEffect, useRef } from 'react'
-
-function useScrollSync(...refs) {
-  const timeoutId = useRef()
-  const handleScroll = useCallback(
-    (event) => {
-      const syncedRefs = refs.filter((ref) => ref.current !== event.target)
-      const targetScrollLeft = event.target.scrollLeft
-
-      clearTimeout(timeoutId.current)
-
-      syncedRefs.forEach((ref) => {
-        removeEvent(ref)
-        ref.current.style.willChange = 'scroll-position'
-        ref.current.scrollLeft = targetScrollLeft
-      })
-
-      timeoutId.current = setTimeout(() => {
-        syncedRefs.forEach((ref) => {
-          addEvent(ref)
-          ref.current.style.willChange = ''
-        })
-      }, 120)
-    },
-    [refs]
-  )
-
-  const addEvent = useCallback(
-    (ref) => {
-      ref.current.addEventListener('scroll', handleScroll, {
-        passive: true,
-      })
-    },
-    [handleScroll]
-  )
-
-  const removeEvent = useCallback(
-    (ref) => {
-      ref.current.removeEventListener('scroll', handleScroll, {
-        passive: true,
-      })
-    },
-    [handleScroll]
-  )
-
-  useLayoutEffect(() => {
-    refs.forEach(addEvent)
-    return () => {
-      clearTimeout(timeoutId.current)
-      refs.forEach(removeEvent)
-    }
-  }, [])
-}
-
-export default useScrollSync

package/src/DataTable/hooks/useVariants.js

@@ -1,13 +0,0 @@
-import { defaultVariant } from '../utils/variants'
-
-export default function useVariants(variants) {
-  const parsedVariants = [
-    defaultVariant,
-    ...(Array.isArray(variants) ? variants : [variants]).filter(Boolean),
-  ]
-  return (key, context) => {
-    return parsedVariants.map((variant) =>
-      typeof variant[key] === 'function' ? variant[key](context) : variant[key]
-    )
-  }
-}

package/src/DataTable/index.js

@@ -1,15 +0,0 @@
-import React, { forwardRef } from 'react'
-
-import { CheckboxCell, ColumnPicker } from './components'
-import DataTable from './DataTable'
-import { variants } from './utils'
-
-const ForwardRefDataTable = forwardRef((props, ref) => (
-  <DataTable dataTableRef={ref} {...props} />
-))
-
-ForwardRefDataTable.CheckboxCell = CheckboxCell
-ForwardRefDataTable.ColumnPicker = ColumnPicker
-ForwardRefDataTable.variants = variants
-
-export default ForwardRefDataTable

package/src/DataTable/utils/getCell.js

@@ -1,9 +0,0 @@
-function getCell(cell, { rowData, rowIndex, columnIndex, _dragHandleProps }) {
-  if (typeof cell === 'string') {
-    return rowData[cell]
-  } else if (cell) {
-    return cell(rowData, { rowIndex, columnIndex, _dragHandleProps })
-  }
-}
-
-export default getCell

package/src/DataTable/utils/getParsedColumns.js

@@ -1,142 +0,0 @@
-import React from 'react'
-
-import Box from '../../Box'
-import Tooltip from '../../Tooltip'
-import {
-  useCollapsibleRowsStore,
-  useSubRowOpen,
-  useAnySubRowsOpen,
-} from '../hooks/useCollapsibleRows'
-
-import Icon from '../../Icon'
-
-const buttonStyles = {
-  appearance: 'none',
-  display: 'flex',
-  alignSelf: 'center',
-  alignItems: 'center',
-  justifyContent: 'center',
-  padding: 1,
-  margin: 0,
-  border: 'none',
-  borderRadius: 3,
-  backgroundColor: 'hsla(0, 0%, 0%, 0)',
-  fill: 'foreground',
-  cursor: 'pointer',
-  ' &:focus ': {
-    outline: 0,
-  },
-  ' &:hover ': {
-    backgroundColor: 'highlight',
-  },
-}
-
-function CollapseHeader({ accessibility }) {
-  const callbacks = useCollapsibleRowsStore((state) => state.callbacks)
-  const anySubRowsOpen = useAnySubRowsOpen()
-  const tooltipTitle = accessibility.toggleAllSubRowsTooltipTitle(
-    anySubRowsOpen
-  )
-  return (
-    <Tooltip title={tooltipTitle} placement="bottom-start">
-      <Box
-        as="button"
-        display="flex"
-        aria-label={tooltipTitle}
-        css={buttonStyles}
-        onClick={(event) => {
-          event.preventDefault()
-          callbacks.toggleAllSubRows()
-        }}
-      >
-        <Icon
-          name="general.downCaret"
-          size="sm"
-          style={{
-            transform: anySubRowsOpen ? undefined : 'rotate(-90deg)',
-            transition: 'transform 180ms ease',
-          }}
-        />
-      </Box>
-    </Tooltip>
-  )
-}
-
-function CollapseCell({ rowIndex }) {
-  const callbacks = useCollapsibleRowsStore((state) => state.callbacks)
-  const isSubRowOpen = useSubRowOpen(rowIndex)
-  return (
-    <Box
-      as="button"
-      css={buttonStyles}
-      onClick={(event) => {
-        event.preventDefault()
-        callbacks.toggleSubRowAtIndex(rowIndex)
-      }}
-    >
-      <Icon
-        name="general.downCaret"
-        size="sm"
-        style={{
-          transform: isSubRowOpen ? undefined : 'rotate(-90deg)',
-          transition: 'transform 180ms ease',
-        }}
-      />
-    </Box>
-  )
-}
-
-function getParsedColumns({
-  accessibility,
-  columns,
-  hasSubRows,
-  hiddenColumnIds,
-  draggable,
-}) {
-  const nextColumns = columns.filter(
-    (column) =>
-      column !== null &&
-      column !== false &&
-      column !== undefined &&
-      (column.alwaysVisible || hiddenColumnIds.indexOf(column.id) === -1)
-  )
-  if (hasSubRows) {
-    nextColumns.unshift({
-      header: <CollapseHeader accessibility={accessibility} />,
-      cell: (_, { rowIndex }) => <CollapseCell rowIndex={rowIndex} />,
-      subCell: null,
-      width: 32,
-      css: {
-        paddingLeft: draggable ? 0 : undefined,
-        '@media print': { display: 'none !important' },
-      },
-    })
-  }
-  if (draggable) {
-    nextColumns.unshift({
-      cell: (_, { _dragHandleProps }) => (
-        <Box
-          css={buttonStyles}
-          onClick={(event) => event.preventDefault()}
-          {..._dragHandleProps}
-        >
-          <Icon
-            name="general.dragHandle"
-            size="sm"
-            color="foregroundTertiary"
-            style={{ cursor: 'grab' }}
-          />
-        </Box>
-      ),
-      subCell: null,
-      width: 32,
-      css: {
-        paddingRight: hasSubRows ? 0 : undefined,
-        '@media print': { display: 'none !important' },
-      },
-    })
-  }
-  return nextColumns
-}
-
-export default getParsedColumns

package/src/DataTable/utils/getRowLinkProps.js

@@ -1,5 +0,0 @@
-function getRowLinkProps({ getRowLink, data, isSubRow }) {
-  return getRowLink ? { href: getRowLink(data, isSubRow) } : {}
-}
-
-export default getRowLinkProps

package/src/DataTable/utils/index.js

@@ -1,4 +0,0 @@
-export { default as getCell } from './getCell'
-export { default as getParsedColumns } from './getParsedColumns'
-export { default as getRowLinkProps } from './getRowLinkProps'
-export { variants } from './variants'

package/src/DataTable/utils/variants.js

@@ -1,146 +0,0 @@
-const scrollStyles = {
-  overflowX: 'auto',
-  scrollbarWidth: 'none',
-  msOverflowStyle: 'none',
-  '@media print': {
-    position: 'relative',
-    overflowX: 'visible',
-  },
-  '::-webkit-scrollbar': {
-    width: 0,
-    height: 0,
-  },
-}
-
-export const defaultVariant = {
-  header: {
-    backgroundColor: 'surfaceSecondary',
-    borderBottomColor: 'separatorTertiary',
-    borderBottomStyle: 'solid',
-    borderBottomWidth: 1,
-    position: 'sticky',
-    top: 0,
-    zIndex: 10,
-    ...scrollStyles,
-  },
-  headerRow: {
-    display: 'flex',
-    minHeight: '48px',
-    backgroundColor: 'inherit',
-  },
-  headerCell: ({ isSortable }) => ({
-    boxSizing: 'content-box',
-    display: 'flex',
-    alignItems: 'center',
-    flexGrow: 0,
-    flexShrink: 0,
-    flexBasis: 'auto',
-    padding: '0 16px',
-    backgroundColor: 'inherit',
-    cursor: isSortable ? 'pointer' : 'default',
-    outline: 0,
-  }),
-  footer: {
-    backgroundColor: 'surfaceSecondary',
-    borderTopColor: 'separatorTertiary',
-    borderTopStyle: 'solid',
-    borderTopWidth: 1,
-    ...scrollStyles,
-  },
-  footerRow: {
-    display: 'flex',
-    backgroundColor: 'inherit',
-  },
-  footerCell: {
-    boxSizing: 'content-box',
-    display: 'flex',
-    alignItems: 'center',
-    flexGrow: 0,
-    flexShrink: 0,
-    flexBasis: 'auto',
-    padding: '0 16px',
-    whiteSpace: 'nowrap',
-    backgroundColor: 'inherit',
-    fontSize: 14,
-  },
-  body: {
-    overflowX: 'auto',
-    WebkitOverflowScrolling: 'touch',
-    '@media print': {
-      overflowX: 'visible',
-    },
-  },
-  bodyRow: ({ firstRow, isLink }) => ({
-    display: 'flex',
-    minHeight: '64px',
-    color: 'inherit',
-    backgroundColor: 'surface',
-    borderTopColor: firstRow ? undefined : 'separatorTertiary',
-    borderTopStyle: firstRow ? undefined : 'solid',
-    borderTopWidth: firstRow ? undefined : 1,
-    cursor: isLink ? 'pointer' : undefined,
-    '&:focus': { outline: 'none' },
-    '&:hover': isLink ? { backgroundColor: 'linkBackground' } : undefined,
-  }),
-  bodyCell: {
-    boxSizing: 'content-box',
-    display: 'flex',
-    alignItems: 'center',
-    flexGrow: 0,
-    flexShrink: 0,
-    flexBasis: 'auto',
-    padding: '0 16px',
-    whiteSpace: 'nowrap',
-    backgroundColor: 'inherit',
-    fontSize: 14,
-  },
-  bodySubRow: ({ isLink }) => ({
-    display: 'flex',
-    minHeight: '44px',
-    color: 'inherit',
-    borderTopColor: 'separatorTertiary',
-    borderTopStyle: 'solid',
-    borderTopWidth: 1,
-    backgroundColor: 'surfaceSecondary',
-    cursor: isLink ? 'pointer' : undefined,
-    '&:focus': { outline: 'none' },
-    '&:hover': isLink ? { backgroundColor: 'linkBackground' } : {},
-  }),
-  bodySubCell: ({
-    firstRow,
-    lastCell,
-    rowIndex,
-    columnIndex,
-    columnWidth,
-  }) => ({
-    boxSizing: 'content-box',
-    display: 'flex',
-    flexGrow: 0,
-    flexShrink: 0,
-    flexBasis: 'auto',
-    width: columnWidth + 'px',
-    padding: '12px 16px',
-    backgroundColor: 'inherit',
-    fontSize: 14,
-  }),
-}
-
-export const variants = {
-  condensed: {
-    headerCell: {
-      padding: '0 8px',
-    },
-    bodyRow: {
-      minHeight: '40px',
-    },
-    bodyCell: {
-      padding: '0 8px',
-    },
-    bodySubRow: {
-      minHeight: '28px',
-    },
-    bodySubCell: {
-      padding: '4px 8px',
-    },
-  },
-}

package/src/DateField/DateField.mdx

@@ -1,34 +0,0 @@
----
-title: DateField
-category: Forms
-propsSummary: Accepts [Input](/input) props.
-themeKey: dateField
----
-
-```jsx live
-render(() => {
-  const [date, setDate] = React.useState(Calendar.TODAY)
-  return (
-    <DateField
-      minDate={Calendar.TODAY}
-      value={date}
-      onChange={(date) => setDate(date)}
-    />
-  )
-})
-```
-
-### Example with day/month/year format
-
-```jsx live
-render(() => {
-  const [date, setDate] = React.useState(Calendar.TODAY)
-  return (
-    <DateField
-      value={date}
-      formatValue="dd/MM/yyyy"
-      onChange={(date) => setDate(date)}
-    />
-  )
-})
-```