@planningcenter/tapestry-react 2.1.1 → 2.2.0

package/dist/esm/DateField/DateField.js

@@ -1,9 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React, { Component } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import { format } from 'date-fns';
 import Card from '../Card';
 import Calendar from '../Calendar';
@@ -12,147 +9,123 @@ import Icon from '../Icon';
 import Input from '../Input/Input';
 import Popover from '../Popover';
 import { generateId } from '../utils';
+import { useThemeProps } from '../system';
 
-var _ref2 = /*#__PURE__*/React.createElement(Icon, {
+var _ref3 = /*#__PURE__*/React.createElement(Icon, {
   name: "general.calendar",
   color: "foregroundTertiary"
 });
 
-var DateField = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(DateField, _Component);
-
-  function DateField() {
-    var _this;
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+function DateField(_ref) {
+  var _ref$formatValue = _ref.formatValue,
+      formatValue = _ref$formatValue === void 0 ? 'MMMM dd, yyyy' : _ref$formatValue,
+      _ref$defaultOpen = _ref.defaultOpen,
+      defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+      keepInView = _ref.keepInView,
+      _ref$lockScrollWhileO = _ref.lockScrollWhileOpen,
+      lockScrollWhileOpen = _ref$lockScrollWhileO === void 0 ? true : _ref$lockScrollWhileO,
+      minDate = _ref.minDate,
+      maxDate = _ref.maxDate,
+      onChange = _ref.onChange,
+      placement = _ref.placement,
+      value = _ref.value,
+      props = _objectWithoutPropertiesLoose(_ref, ["formatValue", "defaultOpen", "keepInView", "lockScrollWhileOpen", "minDate", "maxDate", "onChange", "placement", "value"]);
+
+  var _useThemeProps = useThemeProps('dateField', props),
+      calendarProps = _useThemeProps.calendarProps,
+      color = _useThemeProps.color,
+      popoverProps = _useThemeProps.popoverProps,
+      sizes = _useThemeProps.sizes,
+      sizeThickness = _useThemeProps.thickness,
+      trackColor = _useThemeProps.trackColor,
+      restProps = _objectWithoutPropertiesLoose(_useThemeProps, ["calendarProps", "color", "popoverProps", "sizes", "thickness", "trackColor"]);
+
+  var canClosePopover = true;
+
+  var _useState = useState(defaultOpen),
+      isPopoverOpen = _useState[0],
+      setIsPopoverOpen = _useState[1];
+
+  var id = generateId('datefield');
+  var popover = useRef(null);
+  var inputWrapper = useRef(null);
+  var openPopover = useCallback(function () {
+    setIsPopoverOpen(true);
+  });
+  var closePopover = useCallback(function () {
+    if (canClosePopover) {
+      setIsPopoverOpen(false);
     }
+  });
+  var togglePopover = useCallback(function () {
+    if (isPopoverOpen) {
+      closePopover();
+    } else {
+      openPopover();
+    }
+  });
+  var handleDateSelect = useCallback(function (date) {
+    var input = inputWrapper.current.querySelector('input');
 
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-
-    _defineProperty(_assertThisInitialized(_this), "canClosePopover", true);
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      isPopoverOpen: _this.props.defaultOpen
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "id", generateId('datefield'));
-
-    _defineProperty(_assertThisInitialized(_this), "openPopover", function () {
-      _this.setState({
-        isPopoverOpen: true
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "closePopover", function () {
-      if (_this.canClosePopover) {
-        _this.setState({
-          isPopoverOpen: false
-        });
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "togglePopover", function () {
-      if (_this.state.isPopoverOpen) {
-        _this.closePopover();
-      } else {
-        _this.openPopover();
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleDateSelect", function (date) {
-      var input = _this.inputWrapper.querySelector('input');
-
-      if (input.focus) {
-        input.focus();
-      }
-
-      if (_this.props.onChange) {
-        _this.props.onChange(date);
-      }
-
-      _this.closePopover();
-    });
-
-    return _this;
-  }
-
-  var _proto = DateField.prototype;
-
-  _proto.render = function render() {
-    var _this2 = this;
+    if (input.focus) {
+      input.focus();
+    }
 
-    var _this$props = this.props,
-        formatValue = _this$props.formatValue,
-        defaultOpen = _this$props.defaultOpen,
-        keepInView = _this$props.keepInView,
-        lockScrollWhileOpen = _this$props.lockScrollWhileOpen,
-        minDate = _this$props.minDate,
-        maxDate = _this$props.maxDate,
-        onChange = _this$props.onChange,
-        placement = _this$props.placement,
-        value = _this$props.value,
-        popoverProps = _this$props.popoverProps,
-        restProps = _objectWithoutPropertiesLoose(_this$props, ["formatValue", "defaultOpen", "keepInView", "lockScrollWhileOpen", "minDate", "maxDate", "onChange", "placement", "value", "popoverProps"]);
+    if (onChange) {
+      onChange(date);
+    }
 
-    var isPopoverOpen = this.state.isPopoverOpen;
-    return /*#__PURE__*/React.createElement(FocusGroup, {
-      onBlur: this.closePopover
-    }, function (_ref) {
-      var requestBlur = _ref.requestBlur,
-          setRef = _ref.setRef;
-      return /*#__PURE__*/React.createElement(Popover, _extends({}, popoverProps, {
-        ref: function ref(component) {
-          _this2.popover = component;
-        },
+    closePopover();
+  });
+  return /*#__PURE__*/React.createElement(FocusGroup, {
+    onBlur: closePopover
+  }, function (_ref2) {
+    var requestBlur = _ref2.requestBlur,
+        setRef = _ref2.setRef;
+    return /*#__PURE__*/React.createElement(Popover, _extends({}, popoverProps, {
+      ref: function ref(component) {
+        popover.current = component;
+      },
+      innerRef: function innerRef(node) {
+        popover.current = node;
+        setRef(id + "-popover")(node);
+      },
+      as: Card,
+      tabIndex: -1,
+      elevation: 2,
+      onBlur: requestBlur,
+      keepInView: keepInView,
+      lockScrollWhileOpen: lockScrollWhileOpen,
+      placement: placement,
+      open: isPopoverOpen,
+      onRequestClose: closePopover,
+      anchorElement: /*#__PURE__*/React.createElement(Input, _extends({
         innerRef: function innerRef(node) {
-          setRef(_this2.id + "-popover")(node);
+          inputWrapper.current = node;
+          setRef(id + "-input")(node);
         },
-        as: Card,
-        tabIndex: -1,
-        elevation: 2,
+        readOnly: true,
+        value: value ? format(value, formatValue) : '',
+        renderRight: _ref3,
+        onClick: togglePopover,
         onBlur: requestBlur,
-        keepInView: keepInView,
-        lockScrollWhileOpen: lockScrollWhileOpen,
-        placement: placement,
-        open: isPopoverOpen,
-        onRequestClose: _this2.closePopover,
-        anchorElement: /*#__PURE__*/React.createElement(Input, _extends({
-          innerRef: function innerRef(node) {
-            _this2.inputWrapper = node;
-            setRef(_this2.id + "-input")(node);
-          },
-          readOnly: true,
-          value: value ? format(value, formatValue) : '',
-          renderRight: _ref2,
-          onClick: _this2.togglePopover,
-          onBlur: requestBlur,
-          onKeyDown: function onKeyDown(event) {
-            if (event.key === ' ') {
-              event.preventDefault();
-
-              _this2.togglePopover();
-            }
+        onKeyDown: function onKeyDown(event) {
+          if (event.key === ' ') {
+            event.preventDefault();
+            togglePopover();
           }
-        }, restProps))
-      }), /*#__PURE__*/React.createElement(Calendar, {
-        size: "sm",
-        initialDate: value,
-        selected: value,
-        minDate: minDate,
-        maxDate: maxDate,
-        onDateSelect: _this2.handleDateSelect
-      }));
-    });
-  };
-
-  return DateField;
-}(Component);
-
-_defineProperty(DateField, "defaultProps", {
-  defaultOpen: false,
-  lockScrollWhileOpen: true,
-  formatValue: 'MMMM dd, yyyy'
-});
+        }
+      }, restProps))
+    }), /*#__PURE__*/React.createElement(Calendar, _extends({
+      size: "sm"
+    }, calendarProps, {
+      initialDate: value,
+      selected: value,
+      minDate: minDate,
+      maxDate: maxDate,
+      onDateSelect: handleDateSelect
+    })));
+  });
+}
 
 export default DateField;

package/dist/esm/Field/Field.js

@@ -1,115 +1,88 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React, { Component } from 'react';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
 import Box from '../Box';
 import HelperDrawer from '../HelperDrawer';
 import Input from '../Input';
 import Text from '../Text';
 import StackView from '../StackView';
 import { cloneChildren, generateId } from '../utils';
+import { useThemeProps } from '../system';
 
-var Field = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(Field, _Component);
-
-  function Field() {
-    var _this;
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-
-    _defineProperty(_assertThisInitialized(_this), "helperDrawerId", generateId('field-helper-drawer'));
-
-    _defineProperty(_assertThisInitialized(_this), "fieldId", generateId('field'));
-
-    return _this;
-  }
-
-  var _proto = Field.prototype;
-
-  _proto.render = function render() {
-    var _this2 = this;
-
-    var _this$props = this.props,
-        children = _this$props.children,
-        compact = _this$props.compact,
-        distribution = _this$props.distribution,
-        feedbackText = _this$props.feedbackText,
-        helpContent = _this$props.helpContent,
-        icon = _this$props.icon,
-        inline = _this$props.inline,
-        innerRef = _this$props.innerRef,
-        label = _this$props.label,
-        labelBasis = _this$props.labelBasis,
-        labelColor = _this$props.labelColor,
-        labelGrow = _this$props.labelGrow,
-        spacing = _this$props.spacing,
-        state = _this$props.state,
-        restProps = _objectWithoutPropertiesLoose(_this$props, ["children", "compact", "distribution", "feedbackText", "helpContent", "icon", "inline", "innerRef", "label", "labelBasis", "labelColor", "labelGrow", "spacing", "state"]);
-
-    return /*#__PURE__*/React.createElement(Box, _extends({
-      innerRef: innerRef,
-      width: "100%"
-    }, restProps), /*#__PURE__*/React.createElement(StackView, {
-      axis: inline ? 'horizontal' : 'vertical',
-      wrap: true
-    }, label && /*#__PURE__*/React.createElement(StackView, {
-      axis: "horizontal",
-      alignment: "center",
-      grow: labelGrow,
-      basis: labelBasis,
-      marginRight: inline ? 2 : undefined
-    }, icon, /*#__PURE__*/React.createElement(Input.InputLabel, {
-      controls: this.fieldId,
-      fontSize: compact ? 4 : 3,
-      color: labelColor
-    }, label), helpContent && /*#__PURE__*/React.createElement(HelperDrawer.Toggle, {
-      drawerId: this.helperDrawerId,
-      marginLeft: 0.25,
-      marginRight: inline ? 1 : undefined
-    })), helpContent && /*#__PURE__*/React.createElement(StackView, {
-      axis: "horizontal",
-      order: inline ? 1 : 0,
-      width: "100%"
-    }, /*#__PURE__*/React.createElement(HelperDrawer, {
-      id: this.helperDrawerId,
-      marginTop: 1,
-      children: helpContent
-    })), /*#__PURE__*/React.createElement(StackView, {
-      axis: "horizontal",
-      alignment: "center",
-      distribution: distribution,
-      order: inline ? 0 : 1,
-      grow: 1,
-      marginTop: inline || !label ? undefined : 1,
-      maxWidth: "100%",
-      spacing: spacing
-    }, cloneChildren(children, function (child, _ref) {
-      var firstChild = _ref.firstChild;
-      return firstChild ? {
-        id: _this2.fieldId,
-        size: child.props.size || (compact ? 'sm' : 'md')
-      } : {
-        size: child.props.size || (compact ? 'sm' : 'md')
-      };
-    }))), feedbackText && /*#__PURE__*/React.createElement(Text, {
-      marginTop: 1,
-      color: state,
-      align: inline ? 'right' : 'left'
-    }, feedbackText));
-  };
+function Field(_ref) {
+  var props = _extends({}, _ref);
 
-  return Field;
-}(Component);
+  var _useThemeProps = useThemeProps('field', props),
+      children = _useThemeProps.children,
+      compact = _useThemeProps.compact,
+      _useThemeProps$distri = _useThemeProps.distribution,
+      distribution = _useThemeProps$distri === void 0 ? 'fill' : _useThemeProps$distri,
+      feedbackText = _useThemeProps.feedbackText,
+      helpContent = _useThemeProps.helpContent,
+      icon = _useThemeProps.icon,
+      inline = _useThemeProps.inline,
+      innerRef = _useThemeProps.innerRef,
+      label = _useThemeProps.label,
+      labelBasis = _useThemeProps.labelBasis,
+      labelColor = _useThemeProps.labelColor,
+      labelGrow = _useThemeProps.labelGrow,
+      _useThemeProps$spacin = _useThemeProps.spacing,
+      spacing = _useThemeProps$spacin === void 0 ? 1 : _useThemeProps$spacin,
+      state = _useThemeProps.state,
+      restProps = _objectWithoutPropertiesLoose(_useThemeProps, ["children", "compact", "distribution", "feedbackText", "helpContent", "icon", "inline", "innerRef", "label", "labelBasis", "labelColor", "labelGrow", "spacing", "state"]);
 
-_defineProperty(Field, "defaultProps", {
-  distribution: 'fill',
-  spacing: 1
-});
+  var helperDrawerId = generateId('field-helper-drawer');
+  var fieldId = generateId('field');
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    innerRef: innerRef,
+    width: "100%"
+  }, restProps), /*#__PURE__*/React.createElement(StackView, {
+    axis: inline ? 'horizontal' : 'vertical',
+    wrap: true
+  }, label && /*#__PURE__*/React.createElement(StackView, {
+    axis: "horizontal",
+    alignment: "center",
+    grow: labelGrow,
+    basis: labelBasis,
+    marginRight: inline ? 2 : undefined
+  }, icon, /*#__PURE__*/React.createElement(Input.InputLabel, {
+    controls: fieldId,
+    fontSize: compact ? 4 : 3,
+    color: labelColor
+  }, label), helpContent && /*#__PURE__*/React.createElement(HelperDrawer.Toggle, {
+    drawerId: helperDrawerId,
+    marginLeft: 0.25,
+    marginRight: inline ? 1 : undefined
+  })), helpContent && /*#__PURE__*/React.createElement(StackView, {
+    axis: "horizontal",
+    order: inline ? 1 : 0,
+    width: "100%"
+  }, /*#__PURE__*/React.createElement(HelperDrawer, {
+    id: helperDrawerId,
+    marginTop: 1,
+    children: helpContent
+  })), /*#__PURE__*/React.createElement(StackView, {
+    axis: "horizontal",
+    alignment: "center",
+    distribution: distribution,
+    order: inline ? 0 : 1,
+    grow: 1,
+    marginTop: inline || !label ? undefined : 1,
+    maxWidth: "100%",
+    spacing: spacing
+  }, cloneChildren(children, function (child, _ref2) {
+    var firstChild = _ref2.firstChild;
+    return firstChild ? {
+      id: fieldId,
+      size: child.props.size || (compact ? 'sm' : 'md')
+    } : {
+      size: child.props.size || (compact ? 'sm' : 'md')
+    };
+  }))), feedbackText && /*#__PURE__*/React.createElement(Text, {
+    marginTop: 1,
+    color: state,
+    align: inline ? 'right' : 'left'
+  }, feedbackText));
+}
 
 export default Field;

package/dist/esm/Menu/Item.js

@@ -74,4 +74,5 @@ function Item(_ref) {
   })));
 }
 
+Item.displayName = 'Menu.Item';
 export default Item;

package/dist/esm/Pagination/Pagination.js

@@ -12,6 +12,7 @@ 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 } from '../system';
 
@@ -85,28 +86,32 @@ export default function Pagination(_ref2) {
   }
 
   function renderPageLink(number) {
-    var isActive = currentPage === number;
+    var isCurrentPage = currentPage === number;
+    var activeBackgroundColor = parseColor({
+      base: activeColor,
+      alpha: 0.1
+    });
     var outlineStyle = {
-      border: '1px solid #5b8bf7',
-      color: '#5b8bf7'
+      border: "1px solid " + activeColor,
+      color: isCurrentPage ? '#fff' : activeColor
     };
     return /*#__PURE__*/React.createElement(Button, _extends({
-      key: number,
-      focus: _objectSpread({
-        backgroundColor: '#f4f8fd'
+      active: _objectSpread({
+        backgroundColor: isCurrentPage ? activeColor : activeBackgroundColor
       }, outlineStyle),
+      key: number,
       fontWeight: 500,
       hover: _objectSpread({
-        backgroundColor: '#ffffff'
+        backgroundColor: isCurrentPage ? activeColor : '#fff'
       }, outlineStyle),
       onClick: onPageChange.bind(null, number),
       shrink: 0,
       square: true,
       title: number,
-      variant: isActive ? 'fill' : 'naked'
-    }, isActive && {
-      backgroundColor: '#5b8bf7',
-      color: 'white'
+      variant: isCurrentPage ? 'fill' : 'naked'
+    }, isCurrentPage && {
+      backgroundColor: activeColor,
+      color: '#fff'
     }));
   }
 

package/dist/esm/Popover/utils.js

@@ -20,6 +20,7 @@ export function getModifiers(_ref) {
     enabled: Boolean(matchWidths),
     phase: 'write',
     requires: ['computeStyles'],
+    fn: function fn() {},
     effect: function effect(_ref3) {
       var state = _ref3.state;
       var offsetWidth = state.elements.reference.offsetWidth;