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

package/dist/esm/DataTable/components/BodySubRows.js

@@ -1,90 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
-import BodyRow from './BodyRow';
-import Collapse from '../../Collapse';
-import { useCss } from '../../system';
-import { useCollapsibleRowsStore, useSubRowOpen } from '../hooks';
-import { getCell, getRowLinkProps } from '../utils';
-
-var BodySubRowsCollapse = function BodySubRowsCollapse(_ref) {
-  var children = _ref.children,
-      lazy = _ref.lazy,
-      rowIndex = _ref.rowIndex;
-  var instant = useCollapsibleRowsStore(function (state) {
-    return state.instant;
-  });
-  var isSubRowOpen = useSubRowOpen(rowIndex);
-  return /*#__PURE__*/React.createElement(Collapse, {
-    lazy: lazy,
-    instant: instant,
-    open: isSubRowOpen,
-    role: "row",
-    style: {
-      minWidth: 'min-content'
-    }
-  }, children);
-};
-
-var BodySubRows = function BodySubRows(_ref2) {
-  var columns = _ref2.columns,
-      columnWidths = _ref2.columnWidths,
-      data = _ref2.data,
-      getColumnRef = _ref2.getColumnRef,
-      getRowLink = _ref2.getRowLink,
-      getVariant = _ref2.getVariant,
-      keyboardShortcuts = _ref2.keyboardShortcuts,
-      onRowClick = _ref2.onRowClick,
-      parentRowIndex = _ref2.parentRowIndex;
-  var css = useCss();
-  return /*#__PURE__*/React.createElement(BodySubRowsCollapse, {
-    lazy: columns.some(function (column) {
-      return column.includeSubCellWidth;
-    }) === false,
-    rowIndex: parentRowIndex
-  }, data.map(function (rowData, rowIndex) {
-    var rowVariantClassName = getVariant('bodySubRow', {
-      rowData: rowData,
-      rowIndex: rowIndex,
-      parentRowIndex: parentRowIndex,
-      isLink: Boolean(getRowLink) || Boolean(onRowClick),
-      firstRow: rowIndex === 0,
-      lastRow: rowIndex === Math.max(0, data.length - 1),
-      evenRow: rowIndex % 2 === 0,
-      oddRow: Math.abs(rowIndex % 2) === 1
-    });
-    return /*#__PURE__*/React.createElement(BodyRow, _extends({
-      key: rowIndex,
-      rowData: rowData,
-      rowIndex: rowIndex,
-      keyboardShortcuts: keyboardShortcuts,
-      onRowClick: onRowClick,
-      className: "tapestry-react-reset " + css(rowVariantClassName)
-    }, getRowLinkProps({
-      getRowLink: getRowLink,
-      data: rowData,
-      isSubRow: true
-    })), columns.map(function (column, columnIndex) {
-      var cellVariantClassName = getVariant('bodySubCell', {
-        rowData: rowData,
-        rowIndex: rowIndex,
-        columnIndex: columnIndex,
-        columnWidth: columnWidths.current[columnIndex],
-        firstRow: rowIndex === 0,
-        lastRow: rowIndex === Math.max(0, data.length - 1),
-        firstCell: columnIndex === 0,
-        lastCell: columnIndex === Math.max(0, columns.length - 1)
-      });
-      return /*#__PURE__*/React.createElement("div", {
-        key: columnIndex,
-        ref: getColumnRef(columnIndex + "." + (parentRowIndex + 1) + "." + rowIndex),
-        className: "tapestry-react-reset " + css([].concat(cellVariantClassName, [column.css]))
-      }, getCell(column.subCell !== undefined ? column.subCell : column.cell, {
-        columnIndex: columnIndex,
-        rowData: rowData,
-        rowIndex: rowIndex
-      }));
-    }));
-  }));
-};
-
-export default BodySubRows;

package/dist/esm/DataTable/components/CheckboxCell.js

@@ -1,104 +0,0 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback } from 'react';
-import Icon from '../../Icon';
-var iconPaths = {
-  fill: 'tapestry.checkbox0',
-  minus: 'tapestry.checkbox1',
-  checked: 'tapestry.checkbox2'
-};
-var scaleStyles = {
-  visibility: 'visible',
-  transform: 'scale(1)',
-  transition: 'all 120ms ease-out'
-};
-var initialStyles = {
-  flexShrink: 0,
-  outline: 0,
-  cursor: 'pointer',
-  ' .tapestry-react-Checkbox-Fill ': {
-    transform: 'scale(1)',
-    transformOrigin: 'center center',
-    transition: 'all 180ms ease-out'
-  },
-  ' .tapestry-react-Checkbox-Minus, .tapestry-react-Checkbox-Checked ': {
-    fill: '#fff',
-    visibility: 'hidden',
-    transform: 'scale(0)',
-    transformOrigin: 'center center',
-    transition: 'all 180ms ease-out'
-  },
-  ' &:hover, &:focus ': {
-    ' .tapestry-react-Checkbox-Fill ': {
-      transform: 'scale(1.125)'
-    }
-  },
-  ' &:active ': {
-    ' .tapestry-react-Checkbox-Fill ': {
-      transform: 'scale(1)'
-    }
-  }
-};
-var checkedStyles = {
-  ' .tapestry-react-Checkbox-Checked ': scaleStyles
-};
-var indeterminateStyles = {
-  ' .tapestry-react-Checkbox-Minus ': scaleStyles
-};
-
-function CheckboxCell(_ref) {
-  var checked = _ref.checked,
-      disabled = _ref.disabled,
-      indeterminate = _ref.indeterminate,
-      onBlur = _ref.onBlur,
-      onChange = _ref.onChange,
-      onFocus = _ref.onFocus,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'md' : _ref$size,
-      props = _objectWithoutPropertiesLoose(_ref, ["checked", "disabled", "indeterminate", "onBlur", "onChange", "onFocus", "size"]);
-
-  var handleChange = useCallback(function (event) {
-    event.preventDefault();
-
-    if (onChange) {
-      onChange(event);
-    }
-  }, [onChange]);
-  var cssStyles = [initialStyles];
-
-  if (checked) {
-    cssStyles.push(checkedStyles);
-  }
-
-  if (indeterminate) {
-    cssStyles.push(indeterminateStyles);
-  }
-
-  return /*#__PURE__*/React.createElement(Icon, {
-    size: size,
-    tabIndex: 0,
-    role: "checkbox",
-    "aria-checked": indeterminate ? 'mixed' : checked,
-    "aria-disabled": disabled,
-    onBlur: onBlur,
-    onFocus: onFocus,
-    onClick: handleChange,
-    onKeyDown: function onKeyDown(event) {
-      return event.key === ' ' && handleChange(event);
-    },
-    className: "tapestry-react-reset tapestry-react-Checkbox",
-    css: cssStyles
-  }, /*#__PURE__*/React.createElement(Icon.Path, {
-    name: iconPaths.fill,
-    className: "tapestry-react-reset tapestry-react-Checkbox-Fill",
-    fill: checked || indeterminate ? 'primary' : 'surfaceTertiary',
-    stroke: checked || indeterminate ? 'primary' : 'separatorSecondary'
-  }), /*#__PURE__*/React.createElement(Icon.Path, {
-    name: iconPaths.minus,
-    className: "tapestry-react-reset tapestry-react-Checkbox-Fill"
-  }), /*#__PURE__*/React.createElement(Icon.Path, {
-    name: iconPaths.checked,
-    className: "tapestry-react-reset tapestry-react-Checkbox-Checked"
-  }));
-}
-
-export default CheckboxCell;

package/dist/esm/DataTable/components/ColumnPicker.js

@@ -1,63 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React from 'react';
-import Dropdown from '../../Dropdown';
-import Text from '../../Text';
-import Checkbox from '../../Checkbox';
-
-var noop = function noop() {
-  return null;
-};
-
-function ColumnPicker(_ref) {
-  var _ref$columns = _ref.columns,
-      columns = _ref$columns === void 0 ? [] : _ref$columns,
-      _ref$hiddenColumnIds = _ref.hiddenColumnIds,
-      hiddenColumnIds = _ref$hiddenColumnIds === void 0 ? [] : _ref$hiddenColumnIds,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["columns", "hiddenColumnIds", "onChange"]);
-
-  return /*#__PURE__*/React.createElement(Dropdown, _extends({
-    variant: "outline",
-    icon: {
-      name: 'general.threeVerticalBars'
-    },
-    tooltip: {
-      title: 'Filter Columns'
-    },
-    placement: "bottom-end",
-    closeOnSelect: false,
-    onSelect: function onSelect(columnId) {
-      var newHiddenColumnIds = [].concat(hiddenColumnIds);
-      var indexPosition = newHiddenColumnIds.indexOf(columnId);
-
-      if (indexPosition > -1) {
-        newHiddenColumnIds.splice(indexPosition, 1);
-      } else {
-        newHiddenColumnIds.push(columnId);
-      }
-
-      onChange({
-        columnId: columnId,
-        hiddenColumnIds: newHiddenColumnIds
-      });
-    }
-  }, restProps), columns.filter(function (column) {
-    return !column.alwaysVisible;
-  }).map(function (column) {
-    return /*#__PURE__*/React.createElement(Dropdown.Item, {
-      key: column.id,
-      value: column.id
-    }, /*#__PURE__*/React.createElement(Checkbox, {
-      checked: hiddenColumnIds.indexOf(column.id) === -1,
-      onChange: noop,
-      label: null,
-      size: "md"
-    }), /*#__PURE__*/React.createElement(Text, {
-      marginLeft: 1
-    }, column.label || column.header));
-  }));
-}
-
-export default ColumnPicker;

package/dist/esm/DataTable/components/HeaderCell.js

@@ -1,75 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React from 'react';
-import Icon from '../../Icon';
-import HeadingUppercase from '../../HeadingUppercase';
-import { getIconDirection, SORT_ASC } from '../hooks/useColumnSort';
-import useHoverFocus from '../hooks/useHoverFocus';
-
-var HeaderText = function HeaderText(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement(HeadingUppercase, {
-    truncate: true,
-    color: "foregroundSecondary",
-    cursor: "inherit"
-  }, children);
-};
-
-var HeaderSort = function HeaderSort(_ref2) {
-  var affordance = _ref2.affordance,
-      column = _ref2.column,
-      currentSort = _ref2.currentSort,
-      defaultSort = _ref2.defaultSort,
-      sorted = _ref2.sorted;
-  return /*#__PURE__*/React.createElement(Icon, {
-    size: "xs",
-    name: getIconDirection(currentSort.columnId === column.id ? currentSort.direction : column.defaultSortDirection || (defaultSort ? defaultSort.direction : SORT_ASC)),
-    opacity: sorted ? 1 : affordance ? 0.4 : 0
-  });
-};
-
-function HeaderCell(_ref3) {
-  var cellRef = _ref3.cellRef,
-      column = _ref3.column,
-      columnIndex = _ref3.columnIndex,
-      columnSort = _ref3.columnSort,
-      defaultSort = _ref3.defaultSort,
-      restProps = _objectWithoutPropertiesLoose(_ref3, ["cellRef", "column", "columnIndex", "columnSort", "defaultSort"]);
-
-  var currentSort = columnSort.currentSort,
-      sortColumnById = columnSort.sortColumnById;
-
-  var _useHoverFocus = useHoverFocus(),
-      isHoverFocus = _useHoverFocus.isHoverFocus,
-      bind = _useHoverFocus.bind;
-
-  if (column.sortable) {
-    restProps.tabIndex = 0;
-    restProps['aria-sort'] = currentSort.columnId === column.id ? currentSort.direction === 'ASC' ? 'ascending' : 'descending' : 'none';
-
-    restProps.onClick = function () {
-      sortColumnById(column);
-    };
-
-    restProps.onKeyDown = function (event) {
-      if (event.key === 'Enter') {
-        sortColumnById(column);
-      }
-    };
-  }
-
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: cellRef,
-    role: "columnheader"
-  }, restProps, bind), typeof column.header === 'string' ? /*#__PURE__*/React.createElement(HeaderText, null, column.header) : /*#__PURE__*/React.isValidElement(column.header) ? column.header : column.header ? /*#__PURE__*/React.createElement(column.header, {
-    columnIndex: columnIndex
-  }) : null, column.sortable && /*#__PURE__*/React.createElement(HeaderSort, {
-    defaultSort: defaultSort,
-    currentSort: currentSort,
-    column: column,
-    sorted: currentSort.columnId === column.id,
-    affordance: isHoverFocus
-  }));
-}
-
-export default HeaderCell;

package/dist/esm/DataTable/components/Icon.js

@@ -1,61 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-
-/** @jsxRuntime classic */
-
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-import { useThemeValue } from '../../system';
-var sizes = {
-  xxs: '8px',
-  xs: '10px',
-  sm: '12px',
-  md: '14px',
-  lg: '18px',
-  xl: '32px',
-  xxl: '48px'
-};
-
-function Icon(_ref) {
-  var as = _ref.as,
-      name = _ref.name,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'md' : _ref$size,
-      color = _ref.color,
-      children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, ["as", "name", "size", "color", "children"]);
-
-  var icons = useThemeValue('icons');
-  var themeColor = useThemeValue(['colors', color]);
-  var iconSize = sizes[size] || size;
-  var childrenToRender = name ? jsx("path", {
-    d: icons[name]
-  }) : children;
-  return jsx("svg", _extends({
-    viewBox: "0 0 16 16",
-    width: iconSize,
-    height: iconSize,
-    fill: themeColor,
-    className: "tapestry-react-reset",
-    children: childrenToRender
-  }, props));
-}
-
-function Path(_ref2) {
-  var name = _ref2.name,
-      fill = _ref2.fill,
-      stroke = _ref2.stroke,
-      restProps = _objectWithoutPropertiesLoose(_ref2, ["name", "fill", "stroke"]);
-
-  var themeFill = useThemeValue(['colors', fill]);
-  var themeStroke = useThemeValue(['colors', stroke]);
-  var icons = useThemeValue('icons');
-  return jsx("path", _extends({
-    d: icons[name],
-    fill: fill ? themeFill || fill : 'none',
-    stroke: stroke ? themeStroke || stroke : undefined
-  }, restProps));
-}
-
-Icon.Path = Path;
-export default Icon;

package/dist/esm/DataTable/components/index.js

@@ -1,4 +0,0 @@
-export { default as BodyRows } from './BodyRows';
-export { default as CheckboxCell } from './CheckboxCell';
-export { default as ColumnPicker } from './ColumnPicker';
-export { default as HeaderCell } from './HeaderCell';

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

@@ -1,6 +0,0 @@
-export * from './useCollapsibleRows';
-export { default as useColumnSort } from './useColumnSort';
-export { default as useColumnWidths } from './useColumnWidths';
-export { default as useScrollShadows } from './useScrollShadows';
-export { default as useScrollSync } from './useScrollSync';
-export { default as useVariants } from './useVariants';

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

@@ -1,107 +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; }
-
-import { createContext, useCallback, useContext, useEffect } from 'react';
-import useConstant from '../../hooks/useConstant';
-import { create } from 'zustand';
-import { range } from '../../utils';
-export var CollapsibleRowsContext = /*#__PURE__*/createContext(null);
-export function useCollapsibleRowsStore(selector) {
-  var _useContext = useContext(CollapsibleRowsContext),
-      useStore = _useContext.useStore;
-
-  return useStore(selector);
-}
-export function useSubRowOpen(index) {
-  return useCollapsibleRowsStore(useCallback(function (state) {
-    return state.allSubRowsOpen || state.openSubRows.indexOf(index) > -1;
-  }, [index]));
-}
-export function useAnySubRowsOpen() {
-  return useCollapsibleRowsStore(useCallback(function (state) {
-    return state.openSubRows.length > 0;
-  }, []));
-}
-export function useCollapsibleRows(data, defaultAllSubRowsOpen) {
-  if (defaultAllSubRowsOpen === void 0) {
-    defaultAllSubRowsOpen = false;
-  }
-
-  var useStore = useConstant(function () {
-    return create(function (set) {
-      return {
-        instant: false,
-        allSubRowsOpen: defaultAllSubRowsOpen,
-        openSubRows: [],
-        rowCountRange: [],
-        callbacks: {
-          openAllSubRows: function openAllSubRows() {
-            set(function (state) {
-              return {
-                instant: true,
-                allSubRowsOpen: true,
-                openSubRows: state.rowCountRange
-              };
-            });
-          },
-          closeAllSubRows: function closeAllSubRows() {
-            set({
-              instant: true,
-              allSubRowsOpen: false,
-              openSubRows: []
-            });
-          },
-          toggleAllSubRows: function toggleAllSubRows() {
-            set(function (state) {
-              var nextAllSubRowsOpen = state.openSubRows.length === 0;
-              return {
-                instant: true,
-                allSubRowsOpen: nextAllSubRowsOpen,
-                openSubRows: nextAllSubRowsOpen ? state.rowCountRange : []
-              };
-            });
-          },
-          toggleSubRowAtIndex: function toggleSubRowAtIndex(index) {
-            set(function (state) {
-              var nextOpenSubRows = [].concat(state.openSubRows);
-              var currentIndex = state.openSubRows.indexOf(index);
-
-              if (currentIndex > -1) {
-                nextOpenSubRows.splice(currentIndex, 1);
-              } else {
-                nextOpenSubRows.push(index);
-              }
-
-              return {
-                instant: false,
-                allSubRowsOpen: state.rowCountRange.every(function (index) {
-                  return nextOpenSubRows.indexOf(index) > -1;
-                }),
-                openSubRows: nextOpenSubRows
-              };
-            });
-          }
-        }
-      };
-    });
-  });
-  var callbacks = useStore(function (state) {
-    return state.callbacks;
-  });
-  useEffect(function () {
-    var rowCountRange = range(0, data.length);
-    useStore.setState(function (state) {
-      return {
-        instant: true,
-        openSubRows: state.allSubRowsOpen ? rowCountRange : [],
-        rowCountRange: rowCountRange
-      };
-    });
-  }, [data]);
-  return _objectSpread({
-    useStore: useStore
-  }, callbacks);
-}

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

@@ -1,85 +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; }
-
-import { useCallback, useState } from 'react';
-export var SORT_ASC = 'ASC';
-export var SORT_DESC = 'DESC';
-export function getIconDirection(direction) {
-  return direction === SORT_ASC ? 'general.upCaret' : 'general.downCaret';
-}
-export function getOppositeSortDirection(direction) {
-  return direction === SORT_ASC ? SORT_DESC : SORT_ASC;
-}
-
-function parseSortOrder(query) {
-  var isDescending = query[0] === '-';
-  return {
-    columnId: isDescending ? query.substring(1) : query,
-    direction: isDescending ? SORT_DESC : SORT_ASC
-  };
-}
-
-function getSortOrder(_ref) {
-  var columnId = _ref.columnId,
-      direction = _ref.direction;
-  return "" + (direction === SORT_ASC ? '' : '-') + columnId;
-}
-
-function getDefaultSort(_ref2) {
-  var columnId = _ref2.columnId,
-      direction = _ref2.direction,
-      order = _ref2.order;
-  var defaultSort = order ? parseSortOrder(order) : {
-    columnId: columnId,
-    direction: direction
-  };
-  return _objectSpread(_objectSpread({}, defaultSort), {}, {
-    order: getSortOrder(defaultSort)
-  });
-}
-
-export default function useColumnSort(_ref3) {
-  var _ref3$defaultSort = _ref3.defaultSort,
-      defaultSort = _ref3$defaultSort === void 0 ? {
-    columnId: null,
-    direction: SORT_ASC,
-    order: null
-  } : _ref3$defaultSort,
-      onColumnSort = _ref3.onColumnSort;
-
-  var _useState = useState(getDefaultSort(defaultSort)),
-      currentSort = _useState[0],
-      setCurrentSort = _useState[1];
-
-  var sortColumnById = useCallback(function (column) {
-    setCurrentSort(function (currentSort) {
-      var parsedDefaultSort = getDefaultSort(_objectSpread(_objectSpread({}, defaultSort), {}, {
-        direction: column.defaultSortDirection
-      }));
-      var nextSort = {
-        columnId: column.id
-      };
-
-      if (currentSort.columnId === column.id) {
-        nextSort.direction = getOppositeSortDirection(currentSort.direction);
-      } else {
-        nextSort.direction = column.defaultSortDirection || SORT_ASC;
-      }
-
-      nextSort.order = getSortOrder(nextSort);
-
-      if (onColumnSort) {
-        onColumnSort(nextSort.columnId ? nextSort : parsedDefaultSort);
-      }
-
-      return nextSort;
-    });
-  }, [defaultSort, onColumnSort]);
-  return {
-    currentSort: currentSort,
-    sortColumnById: sortColumnById
-  };
-}