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

package/dist/esm/Page/PageHeader.js

@@ -1,33 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React from 'react';
-import { useThemeValue } from '../system';
-import StackView from '../StackView';
-
-function PageHeader(_ref) {
-  var children = _ref.children,
-      toolbar = _ref.toolbar,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["children", "toolbar"]);
-
-  var themeProps = useThemeValue('pageHeader');
-  return /*#__PURE__*/React.createElement(StackView, _extends({
-    as: "header",
-    axis: "vertical",
-    backgroundColor: "primary-light",
-    paddingHorizontal: 2,
-    minHeight: 8,
-    mediaQueries: {
-      sm: {
-        paddingHorizontal: 3
-      }
-    },
-    spacing: 0
-  }, themeProps, restProps), children && /*#__PURE__*/React.createElement(StackView, {
-    alignment: "center",
-    axis: "horizontal",
-    paddingTop: 2,
-    width: "100%"
-  }, children), toolbar);
-}
-
-export default PageHeader;

package/dist/esm/Page/PageTab.js

@@ -1,19 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
-import Tab from '../Tab';
-import { useThemeValue } from '../system';
-
-function PageTab(props) {
-  var themeProps = useThemeValue('pageTab');
-  return /*#__PURE__*/React.createElement(Tab, _extends({
-    mediaQueries: {
-      sm: {
-        paddingHorizontal: 3
-      }
-    },
-    paddingHorizontal: 1.5,
-    size: "lg"
-  }, themeProps, props));
-}
-
-export default PageTab;

package/dist/esm/Page/PageTabList.js

@@ -1,11 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
-import StackView from '../StackView';
-export default function PageTabList(props) {
-  return /*#__PURE__*/React.createElement(StackView, _extends({
-    axis: "horizontal",
-    paddingTop: 2,
-    spacing: 0.5,
-    alignSelf: "end"
-  }, props));
-}

package/dist/esm/Page/PageTitle.js

@@ -1,15 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
-import { useThemeValue } from '../system';
-import Heading from '../Heading';
-
-function PageTitle(props) {
-  var themeProps = useThemeValue('pageTitle');
-  return /*#__PURE__*/React.createElement(Heading, _extends({
-    color: "white",
-    fontSize: "25px",
-    level: 2
-  }, themeProps, props));
-}
-
-export default PageTitle;

package/dist/esm/Page/PageToolbar.js

@@ -1,36 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React from 'react';
-import StackView from '../StackView';
-import { useThemeValue } from '../system';
-
-function PageToolbar(_ref) {
-  var _mediaQueries;
-
-  var stackBelow = _ref.stackBelow,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["stackBelow"]);
-
-  var themeBreakpoints = useThemeValue('breakpoints');
-  var breakpoint = Object.keys(themeBreakpoints).includes(stackBelow) ? stackBelow : 'sm';
-  var stackProps = stackBelow ? {
-    axis: 'vertical',
-    alignment: 'stretch',
-    spacing: 2,
-    mediaQueries: (_mediaQueries = {}, _mediaQueries[breakpoint] = {
-      axis: 'horizontal',
-      alignment: 'center',
-      paddingBottom: 0,
-      spacing: 0
-    }, _mediaQueries)
-  } : null;
-  return /*#__PURE__*/React.createElement(StackView, _extends({
-    alignment: "center",
-    axis: "horizontal",
-    distribution: "space-between",
-    flex: 1,
-    spacing: 2,
-    width: "100%"
-  }, stackProps, restProps));
-}
-
-export default PageToolbar;

package/dist/esm/Page/index.js

@@ -1,10 +0,0 @@
-import PageActions from './PageActions';
-import PageBody from './PageBody';
-import PageButton from './PageButton';
-import PageDropdown from './PageDropdown';
-import PageHeader from './PageHeader';
-import PageTab from './PageTab';
-import PageTabList from './PageTabList';
-import PageTitle from './PageTitle';
-import PageToolbar from './PageToolbar';
-export { PageActions, PageBody, PageButton, PageDropdown, PageHeader, PageTab, PageTabList, PageTitle, PageToolbar };

package/dist/esm/PagerView/PagerView.js

@@ -1,209 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-
-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 React, { Children, createContext, useContext, useLayoutEffect, useRef } from 'react';
-import Spring from 'tiny-spring';
-import styler from 'stylefire';
-import { tabbable } from 'tabbable';
-import { clamp } from '@popmotion/popcorn';
-import GridView from '../GridView';
-import StackView from '../StackView';
-import { useMeasure } from '../hooks';
-import { range } from '../utils';
-
-function getRawTrackValue(_ref) {
-  var _ref$direction = _ref.direction,
-      direction = _ref$direction === void 0 ? 1 : _ref$direction,
-      _ref$multiplier = _ref.multiplier,
-      multiplier = _ref$multiplier === void 0 ? null : _ref$multiplier,
-      _ref$spacing = _ref.spacing,
-      spacing = _ref$spacing === void 0 ? 0 : _ref$spacing,
-      _ref$viewsToShow = _ref.viewsToShow,
-      viewsToShow = _ref$viewsToShow === void 0 ? 1 : _ref$viewsToShow;
-  spacing *= 8;
-  var viewSize = 100 / viewsToShow * direction;
-  var spacingSize = (spacing - spacing / viewsToShow) * direction;
-
-  if (multiplier !== null) {
-    viewSize *= multiplier;
-    spacingSize = spacingSize * multiplier - spacing * direction * multiplier;
-  }
-
-  if (viewsToShow === 1 && spacing === 0) {
-    spacingSize = 0;
-  }
-
-  return {
-    viewSize: viewSize,
-    spacingSize: spacingSize
-  };
-}
-
-function getTrackValue(_ref2) {
-  var viewSize = _ref2.viewSize,
-      spacingSize = _ref2.spacingSize;
-  return "calc(" + viewSize + "% - " + spacingSize + "px)";
-}
-
-function parseTrackValue(value) {
-  return parseFloat(value.includes('calc') ? value.split('(')[1].split('%')[0] : value);
-}
-
-var PageViewContext = /*#__PURE__*/createContext({});
-
-function PagerView(props) {
-  var _trackProps;
-
-  var _props$axis = props.axis,
-      axis = _props$axis === void 0 ? 'horizontal' : _props$axis,
-      activeViewIndex = props.activeViewIndex,
-      _props$viewsToShow = props.viewsToShow,
-      viewsToShow = _props$viewsToShow === void 0 ? 1 : _props$viewsToShow,
-      _props$viewsToMove = props.viewsToMove,
-      viewsToMove = _props$viewsToMove === void 0 ? 1 : _props$viewsToMove,
-      _props$spacing = props.spacing,
-      spacing = _props$spacing === void 0 ? 0 : _props$spacing,
-      _props$autoFocus = props.autoFocus,
-      autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
-      children = props.children,
-      restProps = _objectWithoutPropertiesLoose(props, ["axis", "activeViewIndex", "viewsToShow", "viewsToMove", "spacing", "autoFocus", "children"]);
-
-  var isHorizontal = axis === 'horizontal';
-  var childCount = Children.count(children);
-  var maxActiveIndex = childCount - viewsToShow;
-  var clampedIndex = clamp(0, maxActiveIndex, activeViewIndex * viewsToMove);
-  var visibleIndexes = range(0, viewsToShow).map(function (index) {
-    return clampedIndex + index;
-  });
-  var crossDimension = axis === 'horizontal' ? 'height' : 'width';
-  var frameRef = useRef();
-  var frameStyler = useRef();
-
-  var frameProps = _objectSpread({
-    innerRef: frameRef,
-    overflow: 'hidden'
-  }, restProps);
-
-  var trackRef = useRef();
-  var trackStyler = useRef();
-  var trackProps = (_trackProps = {
-    innerRef: trackRef,
-    alignment: isHorizontal ? 'start' : 'fill',
-    autoFlow: isHorizontal ? 'column' : 'row',
-    spacing: spacing
-  }, _trackProps[isHorizontal ? 'gridAutoColumns' : 'gridAutoRows'] = getTrackValue(getRawTrackValue({
-    spacing: spacing,
-    viewsToShow: viewsToShow
-  })), _trackProps);
-
-  var _useMeasure = useMeasure(),
-      useMeasureRef = _useMeasure[0],
-      useMeasureEffect = _useMeasure[1];
-
-  useMeasureEffect(function (viewNodes) {
-    var viewMeasurements = viewNodes.map(function (node) {
-      return node.getBoundingClientRect();
-    });
-    var nextFrameSize = Math.max.apply(Math, visibleIndexes.map(function (index) {
-      var measurements = viewMeasurements[index];
-      return measurements ? measurements[crossDimension] : -1;
-    }));
-
-    if (frameStyler.current) {
-      var spring = Spring(frameStyler.current.get(crossDimension), {
-        stiffness: 500,
-        damping: 50
-      });
-      spring.onUpdate(function (value) {
-        return frameStyler.current.set(crossDimension, value);
-      });
-      spring.transitionTo(nextFrameSize);
-      return function () {
-        return spring.destroy();
-      };
-    } else {
-      frameStyler.current = styler(frameRef.current);
-      frameStyler.current.set(crossDimension, nextFrameSize);
-      frameStyler.current.render();
-    }
-  }, [activeViewIndex, viewsToShow]);
-  useLayoutEffect(function () {
-    var trackAxis = isHorizontal ? 'x' : 'y';
-    var nextTrackValue = getRawTrackValue({
-      direction: -1,
-      multiplier: clampedIndex,
-      spacing: spacing,
-      viewsToShow: viewsToShow
-    });
-
-    if (trackStyler.current) {
-      var startValue = parseTrackValue(trackStyler.current.get(trackAxis));
-      var spring = Spring(startValue, {
-        stiffness: 500,
-        damping: 50
-      });
-      spring.onUpdate(function (value) {
-        trackStyler.current.set(trackAxis, getTrackValue({
-          viewSize: value,
-          spacingSize: nextTrackValue.spacingSize
-        }));
-      });
-      spring.transitionTo(nextTrackValue.viewSize);
-      return function () {
-        return spring.destroy();
-      };
-    } else {
-      trackStyler.current = styler(trackRef.current);
-      trackStyler.current.set(trackAxis, getTrackValue(nextTrackValue));
-      trackStyler.current.render();
-    }
-  }, [clampedIndex, spacing, viewsToShow]);
-  var lastTabbables = useRef([]);
-  useLayoutEffect(function () {
-    lastTabbables.current.forEach(function (node) {
-      return node.tabIndex = 0;
-    });
-    lastTabbables.current = [];
-
-    for (var index = 0; index < childCount; index++) {
-      var tabbables = tabbable(trackRef.current.children[index]);
-
-      if (autoFocus && index === clampedIndex) {
-        var firstTabbable = tabbables[0];
-
-        if (firstTabbable) {
-          firstTabbable.focus({
-            preventScroll: true
-          });
-        }
-      } // prevent tabbing to any outside views
-
-
-      if (!visibleIndexes.includes(index)) {
-        tabbables.forEach(function (node) {
-          return node.tabIndex = -1;
-        });
-      }
-
-      lastTabbables.current = [].concat(lastTabbables.current, tabbables);
-    }
-  }, [clampedIndex, viewsToShow]);
-  return /*#__PURE__*/React.createElement(StackView, frameProps, /*#__PURE__*/React.createElement(GridView, trackProps, /*#__PURE__*/React.createElement(PageViewContext.Provider, {
-    value: useMeasureRef
-  }, children)));
-}
-
-PagerView.View = function (props) {
-  var useMeasureRef = useContext(PageViewContext);
-  var viewRef = useMeasureRef();
-  return /*#__PURE__*/React.createElement(StackView, _extends({
-    innerRef: viewRef
-  }, props));
-};
-
-export default PagerView;

package/dist/esm/PagerView/index.js

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

package/dist/esm/Pagination/Pagination.js

@@ -1,162 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-
-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 React from 'react';
-import Box from '../Box';
-import Button from '../Button';
-import Group from '../Group';
-import StackView from '../StackView';
-import { range } from '../utils';
-import { parseColor } from '../system/utils';
-import { useWindowWidth } from '@react-hook/window-size';
-import { useThemeValue, useThemeProps } from '../system';
-
-function getVisiblePages(currentPage, totalPages, visiblePages) {
-  var start = Math.max(1, Math.min(totalPages - visiblePages + 1, Math.floor(currentPage - visiblePages / 2 + 1)));
-  var stop = Math.min(totalPages, start + visiblePages - 1);
-  var primaryWindow = range(start, stop + 1);
-  var showFirstPage = start > 1;
-  var showLastPage = stop < totalPages;
-
-  if (showFirstPage) {
-    primaryWindow.shift();
-    primaryWindow.shift();
-  }
-
-  if (showLastPage) {
-    primaryWindow.pop();
-    primaryWindow.pop();
-  }
-
-  var first = showFirstPage ? [1, '...'] : [];
-  var last = showLastPage ? ['...', totalPages] : [];
-  return first.concat(primaryWindow).concat(last);
-}
-
-var NavButton = function NavButton(_ref) {
-  var disabled = _ref.disabled,
-      iconName = _ref.iconName,
-      props = _objectWithoutPropertiesLoose(_ref, ["disabled", "iconName"]);
-
-  return /*#__PURE__*/React.createElement(Button, _extends({
-    backgroundColor: disabled ? '#f7f7f7' : '#f2f2f2',
-    disabled: disabled,
-    icon: {
-      color: disabled ? '#cfcfcf' : undefined,
-      name: iconName,
-      size: 'xs'
-    },
-    opacity: 1,
-    shrink: 0,
-    square: true,
-    variant: "fill"
-  }, props));
-};
-
-export default function Pagination(_ref2) {
-  var currentPage = _ref2.currentPage,
-      _ref2$onPageChange = _ref2.onPageChange,
-      onPageChange = _ref2$onPageChange === void 0 ? function () {
-    return null;
-  } : _ref2$onPageChange,
-      visiblePages = _ref2.visiblePages,
-      _ref2$totalPages = _ref2.totalPages,
-      totalPages = _ref2$totalPages === void 0 ? 0 : _ref2$totalPages,
-      restProps = _objectWithoutPropertiesLoose(_ref2, ["currentPage", "onPageChange", "visiblePages", "totalPages"]);
-
-  var _useThemeValue = useThemeValue('breakpoints'),
-      xsBreakpoint = _useThemeValue.xs;
-
-  var _useThemeProps = useThemeProps('pagination', _objectSpread({}, restProps)),
-      _useThemeProps$active = _useThemeProps.activeColor,
-      activeColor = _useThemeProps$active === void 0 ? '#5b8bf7' : _useThemeProps$active,
-      navButtonProps = _useThemeProps.navButtonProps,
-      pageLinkProps = _useThemeProps.pageLinkProps,
-      activePageLinkProps = _useThemeProps.activePageLinkProps,
-      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["activeColor", "navButtonProps", "pageLinkProps", "activePageLinkProps"]);
-
-  var currentWidth = useWindowWidth();
-
-  function renderGap(key) {
-    return /*#__PURE__*/React.createElement(Box, {
-      key: key,
-      userSelect: "none",
-      cursor: "default",
-      children: "\u2026"
-    });
-  }
-
-  function renderPageLink(number) {
-    var isCurrentPage = currentPage === number;
-    var activeBackgroundColor = parseColor({
-      base: activeColor,
-      alpha: 0.1
-    });
-    var outlineStyle = {
-      border: "1px solid " + activeColor,
-      color: isCurrentPage ? '#fff' : activeColor
-    };
-    return /*#__PURE__*/React.createElement(Button, _extends({
-      active: _objectSpread({
-        backgroundColor: isCurrentPage ? activeColor : activeBackgroundColor
-      }, outlineStyle),
-      key: number,
-      fontWeight: 500,
-      hover: _objectSpread({
-        backgroundColor: isCurrentPage ? activeColor : '#fff'
-      }, outlineStyle),
-      onClick: onPageChange.bind(null, number),
-      shrink: 0,
-      square: true,
-      title: number,
-      variant: isCurrentPage ? 'fill' : 'naked'
-    }, pageLinkProps, isCurrentPage && _objectSpread({
-      backgroundColor: activeColor,
-      color: '#fff'
-    }, activePageLinkProps)));
-  }
-
-  function renderPageLinks() {
-    var visiblePagesToShow = currentWidth <= xsBreakpoint ? visiblePages || 5 : visiblePages || 7;
-    var pages = getVisiblePages(currentPage, totalPages, visiblePagesToShow);
-    return pages.map(function (page, index) {
-      return page === '...' ? renderGap(page + index) : renderPageLink(page);
-    });
-  }
-
-  if (totalPages <= 1) {
-    return null;
-  } else {
-    return /*#__PURE__*/React.createElement(StackView, _extends({
-      alignment: "center",
-      axis: "horizontal",
-      distribution: "center",
-      overflow: "auto",
-      paddingVertical: 1,
-      shrink: 0,
-      spacing: 0.5,
-      width: "100%"
-    }, themeProps), /*#__PURE__*/React.createElement(Group, {
-      spacing: 0.5
-    }, /*#__PURE__*/React.createElement(NavButton, _extends({
-      disabled: currentPage === 1,
-      iconName: "general.leftChevron",
-      onClick: onPageChange.bind(null, currentPage - 1),
-      tooltip: {
-        title: 'Previous Page'
-      }
-    }, navButtonProps)), /*#__PURE__*/React.createElement(NavButton, _extends({
-      disabled: currentPage === totalPages,
-      iconName: "general.rightChevron",
-      onClick: onPageChange.bind(null, currentPage + 1),
-      tooltip: {
-        title: 'Next Page'
-      }
-    }, navButtonProps))), renderPageLinks());
-  }
-}

package/dist/esm/Pagination/index.js

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