@planningcenter/tapestry-react 2.1.1 → 2.2.0

package/dist/cjs/Combobox/index.js

@@ -7,5 +7,17 @@ exports["default"] = void 0;
 
 var _Combobox = _interopRequireDefault(require("./Combobox"));
 
+var _ComboboxInput = _interopRequireDefault(require("./ComboboxInput"));
+
+var _ComboboxItem = _interopRequireDefault(require("./ComboboxItem"));
+
+var _ComboboxItems = _interopRequireDefault(require("./ComboboxItems"));
+
+var _ComboboxPopover = _interopRequireDefault(require("./ComboboxPopover"));
+
+_Combobox["default"].Input = _ComboboxInput["default"];
+_Combobox["default"].Item = _ComboboxItem["default"];
+_Combobox["default"].Items = _ComboboxItems["default"];
+_Combobox["default"].Popover = _ComboboxPopover["default"];
 var _default = _Combobox["default"];
 exports["default"] = _default;

package/dist/cjs/DateField/DateField.js

@@ -11,12 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _dateFns = require("date-fns");
@@ -35,135 +29,122 @@ var _Popover = _interopRequireDefault(require("../Popover"));
 
 var _utils = require("../utils");
 
-var DateField = /*#__PURE__*/function (_Component) {
-  (0, _inheritsLoose2["default"])(DateField, _Component);
+var _system = require("../system");
+
+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 = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["formatValue", "defaultOpen", "keepInView", "lockScrollWhileOpen", "minDate", "maxDate", "onChange", "placement", "value"]);
+
+  var _useThemeProps = (0, _system.useThemeProps)('dateField', props),
+      calendarProps = _useThemeProps.calendarProps,
+      color = _useThemeProps.color,
+      popoverProps = _useThemeProps.popoverProps,
+      sizes = _useThemeProps.sizes,
+      sizeThickness = _useThemeProps.thickness,
+      trackColor = _useThemeProps.trackColor,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["calendarProps", "color", "popoverProps", "sizes", "thickness", "trackColor"]);
+
+  var canClosePopover = true;
+
+  var _useState = (0, _react.useState)(defaultOpen),
+      isPopoverOpen = _useState[0],
+      setIsPopoverOpen = _useState[1];
+
+  var id = (0, _utils.generateId)('datefield');
+  var popover = (0, _react.useRef)(null);
+  var inputWrapper = (0, _react.useRef)(null);
+  var openPopover = (0, _react.useCallback)(function () {
+    setIsPopoverOpen(true);
+  });
+  var closePopover = (0, _react.useCallback)(function () {
+    if (canClosePopover) {
+      setIsPopoverOpen(false);
+    }
+  });
+  var togglePopover = (0, _react.useCallback)(function () {
+    if (isPopoverOpen) {
+      closePopover();
+    } else {
+      openPopover();
+    }
+  });
+  var handleDateSelect = (0, _react.useCallback)(function (date) {
+    var input = inputWrapper.current.querySelector('input');
 
-  function DateField() {
-    var _this;
+    if (input.focus) {
+      input.focus();
+    }
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    if (onChange) {
+      onChange(date);
     }
 
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "canClosePopover", true);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
-      isPopoverOpen: _this.props.defaultOpen
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "id", (0, _utils.generateId)('datefield'));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "openPopover", function () {
-      _this.setState({
-        isPopoverOpen: true
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "closePopover", function () {
-      if (_this.canClosePopover) {
-        _this.setState({
-          isPopoverOpen: false
-        });
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "togglePopover", function () {
-      if (_this.state.isPopoverOpen) {
-        _this.closePopover();
-      } else {
-        _this.openPopover();
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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;
-
-    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 = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["formatValue", "defaultOpen", "keepInView", "lockScrollWhileOpen", "minDate", "maxDate", "onChange", "placement", "value", "popoverProps"]);
-    var isPopoverOpen = this.state.isPopoverOpen;
-    return /*#__PURE__*/_react["default"].createElement(_FocusGroup["default"], {
-      onBlur: this.closePopover
-    }, function (_ref) {
-      var requestBlur = _ref.requestBlur,
-          setRef = _ref.setRef;
-      return /*#__PURE__*/_react["default"].createElement(_Popover["default"], (0, _extends2["default"])({}, popoverProps, {
-        ref: function ref(component) {
-          _this2.popover = component;
-        },
+    closePopover();
+  });
+  return /*#__PURE__*/_react["default"].createElement(_FocusGroup["default"], {
+    onBlur: closePopover
+  }, function (_ref2) {
+    var requestBlur = _ref2.requestBlur,
+        setRef = _ref2.setRef;
+    return /*#__PURE__*/_react["default"].createElement(_Popover["default"], (0, _extends2["default"])({}, popoverProps, {
+      ref: function ref(component) {
+        popover.current = component;
+      },
+      innerRef: function innerRef(node) {
+        popover.current = node;
+        setRef(id + "-popover")(node);
+      },
+      as: _Card["default"],
+      tabIndex: -1,
+      elevation: 2,
+      onBlur: requestBlur,
+      keepInView: keepInView,
+      lockScrollWhileOpen: lockScrollWhileOpen,
+      placement: placement,
+      open: isPopoverOpen,
+      onRequestClose: closePopover,
+      anchorElement: /*#__PURE__*/_react["default"].createElement(_Input["default"], (0, _extends2["default"])({
         innerRef: function innerRef(node) {
-          setRef(_this2.id + "-popover")(node);
+          inputWrapper.current = node;
+          setRef(id + "-input")(node);
         },
-        as: _Card["default"],
-        tabIndex: -1,
-        elevation: 2,
+        readOnly: true,
+        value: value ? (0, _dateFns.format)(value, formatValue) : '',
+        renderRight: /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+          name: "general.calendar",
+          color: "foregroundTertiary"
+        }),
+        onClick: togglePopover,
         onBlur: requestBlur,
-        keepInView: keepInView,
-        lockScrollWhileOpen: lockScrollWhileOpen,
-        placement: placement,
-        open: isPopoverOpen,
-        onRequestClose: _this2.closePopover,
-        anchorElement: /*#__PURE__*/_react["default"].createElement(_Input["default"], (0, _extends2["default"])({
-          innerRef: function innerRef(node) {
-            _this2.inputWrapper = node;
-            setRef(_this2.id + "-input")(node);
-          },
-          readOnly: true,
-          value: value ? (0, _dateFns.format)(value, formatValue) : '',
-          renderRight: /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-            name: "general.calendar",
-            color: "foregroundTertiary"
-          }),
-          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["default"].createElement(_Calendar["default"], {
-        size: "sm",
-        initialDate: value,
-        selected: value,
-        minDate: minDate,
-        maxDate: maxDate,
-        onDateSelect: _this2.handleDateSelect
-      }));
-    });
-  };
-
-  return DateField;
-}(_react.Component);
-
-(0, _defineProperty2["default"])(DateField, "defaultProps", {
-  defaultOpen: false,
-  lockScrollWhileOpen: true,
-  formatValue: 'MMMM dd, yyyy'
-});
+        }
+      }, restProps))
+    }), /*#__PURE__*/_react["default"].createElement(_Calendar["default"], (0, _extends2["default"])({
+      size: "sm"
+    }, calendarProps, {
+      initialDate: value,
+      selected: value,
+      minDate: minDate,
+      maxDate: maxDate,
+      onDateSelect: handleDateSelect
+    })));
+  });
+}
+
 var _default = DateField;
 exports["default"] = _default;

package/dist/cjs/Field/Field.js

@@ -1,23 +1,15 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _Box = _interopRequireDefault(require("../Box"));
 
@@ -31,101 +23,83 @@ var _StackView = _interopRequireDefault(require("../StackView"));
 
 var _utils = require("../utils");
 
-var Field = /*#__PURE__*/function (_Component) {
-  (0, _inheritsLoose2["default"])(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;
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "helperDrawerId", (0, _utils.generateId)('field-helper-drawer'));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "fieldId", (0, _utils.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 = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["children", "compact", "distribution", "feedbackText", "helpContent", "icon", "inline", "innerRef", "label", "labelBasis", "labelColor", "labelGrow", "spacing", "state"]);
-    return /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
-      innerRef: innerRef,
-      width: "100%"
-    }, restProps), /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
-      axis: inline ? 'horizontal' : 'vertical',
-      wrap: true
-    }, label && /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
-      axis: "horizontal",
-      alignment: "center",
-      grow: labelGrow,
-      basis: labelBasis,
-      marginRight: inline ? 2 : undefined
-    }, icon, /*#__PURE__*/_react["default"].createElement(_Input["default"].InputLabel, {
-      controls: this.fieldId,
-      fontSize: compact ? 4 : 3,
-      color: labelColor
-    }, label), helpContent && /*#__PURE__*/_react["default"].createElement(_HelperDrawer["default"].Toggle, {
-      drawerId: this.helperDrawerId,
-      marginLeft: 0.25,
-      marginRight: inline ? 1 : undefined
-    })), helpContent && /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
-      axis: "horizontal",
-      order: inline ? 1 : 0,
-      width: "100%"
-    }, /*#__PURE__*/_react["default"].createElement(_HelperDrawer["default"], {
-      id: this.helperDrawerId,
-      marginTop: 1,
-      children: helpContent
-    })), /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
-      axis: "horizontal",
-      alignment: "center",
-      distribution: distribution,
-      order: inline ? 0 : 1,
-      grow: 1,
-      marginTop: inline || !label ? undefined : 1,
-      maxWidth: "100%",
-      spacing: spacing
-    }, (0, _utils.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["default"].createElement(_Text["default"], {
-      marginTop: 1,
-      color: state,
-      align: inline ? 'right' : 'left'
-    }, feedbackText));
-  };
-
-  return Field;
-}(_react.Component);
-
-(0, _defineProperty2["default"])(Field, "defaultProps", {
-  distribution: 'fill',
-  spacing: 1
-});
+var _system = require("../system");
+
+function Field(_ref) {
+  var props = (0, _extends2["default"])({}, _ref);
+
+  var _useThemeProps = (0, _system.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 = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["children", "compact", "distribution", "feedbackText", "helpContent", "icon", "inline", "innerRef", "label", "labelBasis", "labelColor", "labelGrow", "spacing", "state"]);
+
+  var helperDrawerId = (0, _utils.generateId)('field-helper-drawer');
+  var fieldId = (0, _utils.generateId)('field');
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
+    innerRef: innerRef,
+    width: "100%"
+  }, restProps), /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+    axis: inline ? 'horizontal' : 'vertical',
+    wrap: true
+  }, label && /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+    axis: "horizontal",
+    alignment: "center",
+    grow: labelGrow,
+    basis: labelBasis,
+    marginRight: inline ? 2 : undefined
+  }, icon, /*#__PURE__*/_react["default"].createElement(_Input["default"].InputLabel, {
+    controls: fieldId,
+    fontSize: compact ? 4 : 3,
+    color: labelColor
+  }, label), helpContent && /*#__PURE__*/_react["default"].createElement(_HelperDrawer["default"].Toggle, {
+    drawerId: helperDrawerId,
+    marginLeft: 0.25,
+    marginRight: inline ? 1 : undefined
+  })), helpContent && /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+    axis: "horizontal",
+    order: inline ? 1 : 0,
+    width: "100%"
+  }, /*#__PURE__*/_react["default"].createElement(_HelperDrawer["default"], {
+    id: helperDrawerId,
+    marginTop: 1,
+    children: helpContent
+  })), /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+    axis: "horizontal",
+    alignment: "center",
+    distribution: distribution,
+    order: inline ? 0 : 1,
+    grow: 1,
+    marginTop: inline || !label ? undefined : 1,
+    maxWidth: "100%",
+    spacing: spacing
+  }, (0, _utils.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["default"].createElement(_Text["default"], {
+    marginTop: 1,
+    color: state,
+    align: inline ? 'right' : 'left'
+  }, feedbackText));
+}
+
 var _default = Field;
 exports["default"] = _default;

package/dist/cjs/Menu/Item.js

@@ -86,5 +86,6 @@ function Item(_ref) {
   })));
 }
 
+Item.displayName = 'Menu.Item';
 var _default = Item;
 exports["default"] = _default;

package/dist/cjs/Pagination/Pagination.js

@@ -23,6 +23,8 @@ var _StackView = _interopRequireDefault(require("../StackView"));
 
 var _utils = require("../utils");
 
+var _utils2 = require("../system/utils");
+
 var _windowSize = require("@react-hook/window-size");
 
 var _system = require("../system");
@@ -100,28 +102,32 @@ function Pagination(_ref2) {
   }
 
   function renderPageLink(number) {
-    var isActive = currentPage === number;
+    var isCurrentPage = currentPage === number;
+    var activeBackgroundColor = (0, _utils2.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["default"].createElement(_Button["default"], (0, _extends2["default"])({
-      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/cjs/Popover/utils.js

@@ -29,6 +29,7 @@ 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;