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

package/dist/esm/DataTable/hooks/useColumnWidths.js

@@ -1,104 +0,0 @@
-import { useLayoutEffect, useRef } from 'react';
-import useRefManager from './useRefManager';
-
-function useColumnWidths(_ref) {
-  var columns = _ref.columns,
-      data = _ref.data,
-      loading = _ref.loading,
-      bodyRef = _ref.bodyRef;
-
-  var _useRefManager = useRefManager(),
-      columnRefs = _useRefManager[0],
-      getColumnRef = _useRefManager[1];
-
-  var columnWidths = useRef([]);
-  useLayoutEffect(function () {
-    var nextColumnWidths = [];
-    var cells = [];
-    var paddingDelta = 0; // build cells collection
-
-    for (var key in columnRefs.current) {
-      var _key$split = key.split('.'),
-          columnIndex = _key$split[0],
-          rowIndex = _key$split[1],
-          parentRowIndex = _key$split[2];
-
-      var column = columns[columnIndex];
-      var node = columnRefs.current[key];
-      var 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) {
-        var 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: column,
-          columnIndex: columnIndex,
-          node: node
-        });
-      }
-    } // collect the largest width from the header and body cells
-
-
-    for (var index = 0; index < cells.length; index++) {
-      var _cells$index = cells[index],
-          _column = _cells$index.column,
-          _columnIndex = _cells$index.columnIndex,
-          _node = _cells$index.node;
-      var 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 (var _index = 0; _index < cells.length; _index++) {
-      var _cells$_index = cells[_index],
-          _columnIndex2 = _cells$_index.columnIndex,
-          _node2 = _cells$_index.node;
-      _node2.style.width = nextColumnWidths[_columnIndex2] + 'px';
-    } // apply row widths
-
-
-    var minRowWidth = bodyRef.current.scrollWidth;
-
-    for (var _index2 = 0; _index2 < bodyRef.current.children.length; _index2++) {
-      bodyRef.current.children[_index2].style.minWidth = minRowWidth + 'px';
-    } // update column widths for sub rows
-
-
-    columnWidths.current = nextColumnWidths;
-  }, [columns, data, loading]);
-  return {
-    columnWidths: columnWidths,
-    getColumnRef: getColumnRef
-  };
-}
-
-export default useColumnWidths;

package/dist/esm/DataTable/hooks/useHoverFocus.js

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

package/dist/esm/DataTable/hooks/useRefManager.js

@@ -1,22 +0,0 @@
-import { useCallback, useRef } from 'react';
-
-function useRefManager() {
-  var storedRefs = useRef({});
-  var refCallbacks = useRef({});
-  var getRef = useCallback(function (id) {
-    if (!refCallbacks.current[id]) {
-      refCallbacks.current[id] = function (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/dist/esm/DataTable/hooks/useScrollShadows.js

@@ -1,94 +0,0 @@
-import React, { Fragment, useLayoutEffect, useRef, useState } from 'react';
-import { interpolate } from '@popmotion/popcorn';
-import { useMeasure } from '../../hooks';
-import { supportsPassiveEvents } from '../../utils';
-var getLeftScrollShadow = interpolate([0, 0.2], [0, 1]);
-var getRightScrollShadow = interpolate([0.8, 1], [1, 0]);
-var listenerOptions = supportsPassiveEvents ? {
-  capture: true,
-  passive: false
-} : true;
-var 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) {
-  var rotate = 90 * direction;
-  return "linear-gradient(" + rotate + "deg, transparent 4px, rgba(125, 125, 125, 0.15))";
-}
-
-function setShadowStyles(_ref) {
-  var leftNode = _ref.leftNode,
-      rightNode = _ref.rightNode,
-      offset = _ref.offset,
-      progress = _ref.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) {
-  var leftShadow = useRef();
-  var rightShadow = useRef();
-
-  var _useState = useState(false),
-      canScroll = _useState[0],
-      setCanScroll = _useState[1];
-
-  var _useState2 = useState(null),
-      maxOffset = _useState2[0],
-      setMaxOffset = _useState2[1];
-
-  var _useMeasure = useMeasure(),
-      useMeasureRef = _useMeasure[0],
-      useMeasureEffect = _useMeasure[1];
-
-  useMeasureRef(ref);
-  useMeasureEffect(function (_ref2) {
-    var node = _ref2[0];
-    setCanScroll(node.scrollWidth > node.offsetWidth);
-    setMaxOffset(node.scrollWidth - node.offsetWidth);
-  }, []);
-  useLayoutEffect(function () {
-    if (leftShadow.current && rightShadow.current) {
-      var handleScroll = function handleScroll() {
-        setShadowStyles({
-          leftNode: leftShadow.current,
-          rightNode: rightShadow.current,
-          progress: getProgress(node.scrollLeft, maxOffset),
-          offset: 0
-        });
-      };
-
-      var node = ref.current;
-      handleScroll();
-      node.addEventListener('scroll', handleScroll, listenerOptions);
-      return function () {
-        node.removeEventListener('scroll', handleScroll, listenerOptions);
-      };
-    }
-  }, [maxOffset]);
-  return canScroll && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-    ref: leftShadow,
-    style: shadowStyle,
-    "aria-hidden": true
-  }), /*#__PURE__*/React.createElement("div", {
-    ref: rightShadow,
-    style: shadowStyle,
-    "aria-hidden": true
-  }));
-}
-
-export default useScrollShadows;

package/dist/esm/DataTable/hooks/useScrollSync.js

@@ -1,46 +0,0 @@
-import { useCallback, useLayoutEffect, useRef } from 'react';
-
-function useScrollSync() {
-  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
-    refs[_key] = arguments[_key];
-  }
-
-  var timeoutId = useRef();
-  var handleScroll = useCallback(function (event) {
-    var syncedRefs = refs.filter(function (ref) {
-      return ref.current !== event.target;
-    });
-    var targetScrollLeft = event.target.scrollLeft;
-    clearTimeout(timeoutId.current);
-    syncedRefs.forEach(function (ref) {
-      removeEvent(ref);
-      ref.current.style.willChange = 'scroll-position';
-      ref.current.scrollLeft = targetScrollLeft;
-    });
-    timeoutId.current = setTimeout(function () {
-      syncedRefs.forEach(function (ref) {
-        addEvent(ref);
-        ref.current.style.willChange = '';
-      });
-    }, 120);
-  }, [refs]);
-  var addEvent = useCallback(function (ref) {
-    ref.current.addEventListener('scroll', handleScroll, {
-      passive: true
-    });
-  }, [handleScroll]);
-  var removeEvent = useCallback(function (ref) {
-    ref.current.removeEventListener('scroll', handleScroll, {
-      passive: true
-    });
-  }, [handleScroll]);
-  useLayoutEffect(function () {
-    refs.forEach(addEvent);
-    return function () {
-      clearTimeout(timeoutId.current);
-      refs.forEach(removeEvent);
-    };
-  }, []);
-}
-
-export default useScrollSync;

package/dist/esm/DataTable/hooks/useVariants.js

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

package/dist/esm/DataTable/index.js

@@ -1,14 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { forwardRef } from 'react';
-import { CheckboxCell, ColumnPicker } from './components';
-import DataTable from './DataTable';
-import { variants } from './utils';
-var ForwardRefDataTable = /*#__PURE__*/forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(DataTable, _extends({
-    dataTableRef: ref
-  }, props));
-});
-ForwardRefDataTable.CheckboxCell = CheckboxCell;
-ForwardRefDataTable.ColumnPicker = ColumnPicker;
-ForwardRefDataTable.variants = variants;
-export default ForwardRefDataTable;

package/dist/esm/DataTable/utils/getCell.js

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

package/dist/esm/DataTable/utils/getParsedColumns.js

@@ -1,144 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
-import Box from '../../Box';
-import Tooltip from '../../Tooltip';
-import { useCollapsibleRowsStore, useSubRowOpen, useAnySubRowsOpen } from '../hooks/useCollapsibleRows';
-import Icon from '../../Icon';
-var 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(_ref) {
-  var accessibility = _ref.accessibility;
-  var callbacks = useCollapsibleRowsStore(function (state) {
-    return state.callbacks;
-  });
-  var anySubRowsOpen = useAnySubRowsOpen();
-  var tooltipTitle = accessibility.toggleAllSubRowsTooltipTitle(anySubRowsOpen);
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    title: tooltipTitle,
-    placement: "bottom-start"
-  }, /*#__PURE__*/React.createElement(Box, {
-    as: "button",
-    display: "flex",
-    "aria-label": tooltipTitle,
-    css: buttonStyles,
-    onClick: function onClick(event) {
-      event.preventDefault();
-      callbacks.toggleAllSubRows();
-    }
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "general.downCaret",
-    size: "sm",
-    style: {
-      transform: anySubRowsOpen ? undefined : 'rotate(-90deg)',
-      transition: 'transform 180ms ease'
-    }
-  })));
-}
-
-function CollapseCell(_ref2) {
-  var rowIndex = _ref2.rowIndex;
-  var callbacks = useCollapsibleRowsStore(function (state) {
-    return state.callbacks;
-  });
-  var isSubRowOpen = useSubRowOpen(rowIndex);
-  return /*#__PURE__*/React.createElement(Box, {
-    as: "button",
-    css: buttonStyles,
-    onClick: function onClick(event) {
-      event.preventDefault();
-      callbacks.toggleSubRowAtIndex(rowIndex);
-    }
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "general.downCaret",
-    size: "sm",
-    style: {
-      transform: isSubRowOpen ? undefined : 'rotate(-90deg)',
-      transition: 'transform 180ms ease'
-    }
-  }));
-}
-
-function getParsedColumns(_ref3) {
-  var accessibility = _ref3.accessibility,
-      columns = _ref3.columns,
-      hasSubRows = _ref3.hasSubRows,
-      hiddenColumnIds = _ref3.hiddenColumnIds,
-      draggable = _ref3.draggable;
-  var nextColumns = columns.filter(function (column) {
-    return column !== null && column !== false && column !== undefined && (column.alwaysVisible || hiddenColumnIds.indexOf(column.id) === -1);
-  });
-
-  if (hasSubRows) {
-    nextColumns.unshift({
-      header: /*#__PURE__*/React.createElement(CollapseHeader, {
-        accessibility: accessibility
-      }),
-      cell: function cell(_, _ref4) {
-        var rowIndex = _ref4.rowIndex;
-        return /*#__PURE__*/React.createElement(CollapseCell, {
-          rowIndex: rowIndex
-        });
-      },
-      subCell: null,
-      width: 32,
-      css: {
-        paddingLeft: draggable ? 0 : undefined,
-        '@media print': {
-          display: 'none !important'
-        }
-      }
-    });
-  }
-
-  if (draggable) {
-    nextColumns.unshift({
-      cell: function cell(_, _ref5) {
-        var _dragHandleProps = _ref5._dragHandleProps;
-        return /*#__PURE__*/React.createElement(Box, _extends({
-          css: buttonStyles,
-          onClick: function onClick(event) {
-            return event.preventDefault();
-          }
-        }, _dragHandleProps), /*#__PURE__*/React.createElement(Icon, {
-          name: "general.dragHandle",
-          size: "sm",
-          color: "foregroundTertiary",
-          style: {
-            cursor: 'grab'
-          }
-        }));
-      },
-      subCell: null,
-      width: 32,
-      css: {
-        paddingRight: hasSubRows ? 0 : undefined,
-        '@media print': {
-          display: 'none !important'
-        }
-      }
-    });
-  }
-
-  return nextColumns;
-}
-
-export default getParsedColumns;

package/dist/esm/DataTable/utils/getRowLinkProps.js

@@ -1,10 +0,0 @@
-function getRowLinkProps(_ref) {
-  var getRowLink = _ref.getRowLink,
-      data = _ref.data,
-      isSubRow = _ref.isSubRow;
-  return getRowLink ? {
-    href: getRowLink(data, isSubRow)
-  } : {};
-}
-
-export default getRowLinkProps;

package/dist/esm/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/dist/esm/DataTable/utils/variants.js

@@ -1,167 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-var scrollStyles = {
-  overflowX: 'auto',
-  scrollbarWidth: 'none',
-  msOverflowStyle: 'none',
-  '@media print': {
-    position: 'relative',
-    overflowX: 'visible'
-  },
-  '::-webkit-scrollbar': {
-    width: 0,
-    height: 0
-  }
-};
-export var defaultVariant = {
-  header: _objectSpread({
-    backgroundColor: 'surfaceSecondary',
-    borderBottomColor: 'separatorTertiary',
-    borderBottomStyle: 'solid',
-    borderBottomWidth: 1,
-    position: 'sticky',
-    top: 0,
-    zIndex: 10
-  }, scrollStyles),
-  headerRow: {
-    display: 'flex',
-    minHeight: '48px',
-    backgroundColor: 'inherit'
-  },
-  headerCell: function headerCell(_ref) {
-    var isSortable = _ref.isSortable;
-    return {
-      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: _objectSpread({
-    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: function bodyRow(_ref2) {
-    var firstRow = _ref2.firstRow,
-        isLink = _ref2.isLink;
-    return {
-      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: function bodySubRow(_ref3) {
-    var isLink = _ref3.isLink;
-    return {
-      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: function bodySubCell(_ref4) {
-    var firstRow = _ref4.firstRow,
-        lastCell = _ref4.lastCell,
-        rowIndex = _ref4.rowIndex,
-        columnIndex = _ref4.columnIndex,
-        columnWidth = _ref4.columnWidth;
-    return {
-      boxSizing: 'content-box',
-      display: 'flex',
-      flexGrow: 0,
-      flexShrink: 0,
-      flexBasis: 'auto',
-      width: columnWidth + 'px',
-      padding: '12px 16px',
-      backgroundColor: 'inherit',
-      fontSize: 14
-    };
-  }
-};
-export var variants = {
-  condensed: {
-    headerCell: {
-      padding: '0 8px'
-    },
-    bodyRow: {
-      minHeight: '40px'
-    },
-    bodyCell: {
-      padding: '0 8px'
-    },
-    bodySubRow: {
-      minHeight: '28px'
-    },
-    bodySubCell: {
-      padding: '4px 8px'
-    }
-  }
-};