@planningcenter/tapestry-react 2.1.2 → 2.2.0

package/dist/cjs/Wizard/Wizard.js

@@ -9,14 +9,10 @@ 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 _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _Button = _interopRequireDefault(require("../Button"));
@@ -33,7 +29,7 @@ var _StepperProgress = _interopRequireDefault(require("../StepperProgress"));
 
 var _Text = _interopRequireDefault(require("../Text"));
 
-var _Step = _interopRequireDefault(require("./Step"));
+var _system = require("../system");
 
 var _WizardContext = _interopRequireDefault(require("./WizardContext"));
 
@@ -41,199 +37,153 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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) { (0, _defineProperty2["default"])(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 Wizard = /*#__PURE__*/function (_Component) {
-  (0, _inheritsLoose2["default"])(Wizard, _Component);
-
-  function Wizard() {
-    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), "state", {
-      activeStepIndex: 0,
-      payload: _this.props.initialPayload,
-      steps: [],
-      totalSteps: -1,
-      sendingPayload: false
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setPayload", function (newPayload, cb) {
-      _this.setState(function (state) {
-        return {
-          payload: _objectSpread(_objectSpread({}, state.payload), newPayload)
-        };
-      }, cb);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setSteps", function (getSteps) {
-      _this.setState(function (state) {
-        var nextSteps = getSteps(state.steps);
-        return {
-          steps: nextSteps,
-          totalSteps: nextSteps.length
-        };
-      });
+function Wizard(props) {
+  var _useThemeProps = (0, _system.useThemeProps)('wizard', props),
+      _useThemeProps$autoFo = _useThemeProps.autoFocus,
+      autoFocus = _useThemeProps$autoFo === void 0 ? true : _useThemeProps$autoFo,
+      backButtonProps = _useThemeProps.backButtonProps,
+      buttonProps = _useThemeProps.buttonProps,
+      cancelButtonProps = _useThemeProps.cancelButtonProps,
+      children = _useThemeProps.children,
+      footerProps = _useThemeProps.footerProps,
+      _useThemeProps$initia = _useThemeProps.initialPayload,
+      initialPayload = _useThemeProps$initia === void 0 ? {} : _useThemeProps$initia,
+      nextButtonProps = _useThemeProps.nextButtonProps,
+      _useThemeProps$nextBu = _useThemeProps.nextButtonTitle,
+      nextButtonTitle = _useThemeProps$nextBu === void 0 ? function (_ref) {
+    var activeStepIndex = _ref.activeStepIndex,
+        steps = _ref.steps,
+        totalSteps = _ref.totalSteps;
+    return activeStepIndex >= totalSteps - 1 ? 'Finish' : 'Next';
+  } : _useThemeProps$nextBu,
+      onCancel = _useThemeProps.onCancel,
+      onSubmit = _useThemeProps.onSubmit,
+      renderProgress = _useThemeProps.renderProgress,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["autoFocus", "backButtonProps", "buttonProps", "cancelButtonProps", "children", "footerProps", "initialPayload", "nextButtonProps", "nextButtonTitle", "onCancel", "onSubmit", "renderProgress"]);
+
+  var _useState = (0, _react.useState)(0),
+      activeStepIndex = _useState[0],
+      setActiveStepIndex = _useState[1];
+
+  var _useState2 = (0, _react.useState)([]),
+      steps = _useState2[0],
+      setSteps = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      sendingPayload = _useState3[0],
+      setSendingPayload = _useState3[1];
+
+  var totalSteps = steps.length;
+
+  var _useReducer = (0, _react.useReducer)(function (prevState, updatedProperty) {
+    return _objectSpread(_objectSpread({}, prevState), updatedProperty);
+  }, initialPayload),
+      payload = _useReducer[0],
+      setPayload = _useReducer[1];
+
+  var addStep = (0, _react.useCallback)(function (step) {
+    setSteps(function (steps) {
+      return [].concat(steps, [step]);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "addStep", function (step) {
-      _this.setSteps(function (steps) {
-        return [].concat(steps, [step]);
-      });
-
-      return function () {
-        _this.setSteps(function (steps) {
-          return steps.filter(function (previousStep) {
-            return previousStep.name !== step.name;
-          });
+    return function () {
+      setSteps(function (steps) {
+        return steps.filter(function (previousStep) {
+          return previousStep.name !== step.name;
         });
+      });
+    };
+  }, [steps]);
+  var isCurrentStepValid = (0, _react.useCallback)(function () {
+    var currentStep = steps[activeStepIndex];
+    return currentStep && currentStep.valid ? currentStep.valid(payload) : true;
+  }, [activeStepIndex, steps, payload]);
+  var handleSubmit = (0, _react.useCallback)(function () {
+    if (onSubmit) {
+      var _complete = function _complete() {
+        return setSendingPayload(false);
       };
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSubmit", function () {
-      if (_this.props.onSubmit) {
-        var _complete = function _complete() {
-          return _this.setState({
-            sendingPayload: false
-          });
-        };
-
-        _this.setState({
-          sendingPayload: true
-        });
 
-        _this.props.onSubmit(_this.state.payload, _complete);
-      }
+      setSendingPayload(true);
+      onSubmit(payload, _complete);
+    }
+  }, [payload]);
+  return /*#__PURE__*/_react["default"].createElement(_WizardContext["default"].Provider, {
+    value: {
+      activeStepIndex: activeStepIndex,
+      addStep: addStep,
+      setPayload: setPayload,
+      payload: payload,
+      totalSteps: totalSteps
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    alignment: "center",
+    minWidth: 48,
+    maxWidth: 96
+  }, restProps), renderProgress ? renderProgress({
+    activeStepIndex: activeStepIndex,
+    steps: steps,
+    totalSteps: totalSteps
+  }) : /*#__PURE__*/_react["default"].createElement(_StepperProgress["default"], {
+    width: "80%",
+    paddingTop: 6,
+    paddingBottom: 4,
+    activeStepIndex: activeStepIndex
+  }, steps.map(function (step, index) {
+    return /*#__PURE__*/_react["default"].createElement(_StepperProgress["default"].Step, {
+      key: index,
+      renderEnd: /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+        align: "center",
+        marginTop: 2
+      }, step.name)
     });
-    return _this;
-  }
-
-  var _proto = Wizard.prototype;
-
-  _proto.isCurrentStepValid = function isCurrentStepValid() {
-    var _this$state = this.state,
-        activeStepIndex = _this$state.activeStepIndex,
-        payload = _this$state.payload,
-        steps = _this$state.steps;
-    var currentStep = steps[activeStepIndex];
-    return currentStep && currentStep.valid ? currentStep.valid(payload) : true;
-  };
-
-  _proto.render = function render() {
-    var _this2 = this;
-
-    var _this$props = this.props,
-        autoFocus = _this$props.autoFocus,
-        backButtonProps = _this$props.backButtonProps,
-        buttonProps = _this$props.buttonProps,
-        cancelButtonProps = _this$props.cancelButtonProps,
-        children = _this$props.children,
-        footerProps = _this$props.footerProps,
-        initialPayload = _this$props.initialPayload,
-        nextButtonProps = _this$props.nextButtonProps,
-        nextButtonTitle = _this$props.nextButtonTitle,
-        onCancel = _this$props.onCancel,
-        onSubmit = _this$props.onSubmit,
-        renderProgress = _this$props.renderProgress,
-        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["autoFocus", "backButtonProps", "buttonProps", "cancelButtonProps", "children", "footerProps", "initialPayload", "nextButtonProps", "nextButtonTitle", "onCancel", "onSubmit", "renderProgress"]);
-    var _this$state2 = this.state,
-        activeStepIndex = _this$state2.activeStepIndex,
-        sendingPayload = _this$state2.sendingPayload,
-        steps = _this$state2.steps,
-        totalSteps = _this$state2.totalSteps;
-    return /*#__PURE__*/_react["default"].createElement(_WizardContext["default"].Provider, {
-      value: {
-        activeStepIndex: this.state.activeStepIndex,
-        addStep: this.addStep,
-        setPayload: this.setPayload,
-        payload: this.state.payload,
-        totalSteps: this.state.totalSteps
-      }
-    }, /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
-      alignment: "center",
-      minWidth: 48,
-      maxWidth: 96
-    }, restProps), renderProgress ? renderProgress({
+  })), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+    spacing: /*#__PURE__*/_react["default"].createElement(_Divider["default"], null),
+    elevation: 1
+  }, /*#__PURE__*/_react["default"].createElement(_PagerView["default"], {
+    activeViewIndex: activeStepIndex,
+    autoFocus: autoFocus
+  }, _react.Children.map(children, function (child, index) {
+    return /*#__PURE__*/_react["default"].createElement(_PagerView["default"].View, {
+      key: index
+    }, child);
+  })), /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    axis: "horizontal",
+    distribution: activeStepIndex > 0 ? 'space-between' : 'end',
+    padding: 1,
+    spacing: 1
+  }, footerProps), activeStepIndex === 0 && onCancel && /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+    disabled: sendingPayload,
+    onClick: onCancel,
+    size: "lg",
+    title: "Cancel",
+    variant: "naked"
+  }, buttonProps, cancelButtonProps)), activeStepIndex > 0 && /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+    disabled: sendingPayload,
+    iconLeft: {
+      name: 'general.leftChevron',
+      size: 'sm'
+    },
+    onClick: function onClick() {
+      return setActiveStepIndex(activeStepIndex - 1);
+    },
+    size: "lg",
+    title: "Back",
+    variant: "naked"
+  }, buttonProps, backButtonProps)), /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+    disabled: !isCurrentStepValid(),
+    onClick: function onClick() {
+      return activeStepIndex >= totalSteps - 1 ? handleSubmit() : setActiveStepIndex(activeStepIndex + 1);
+    },
+    size: "lg",
+    spinner: sendingPayload,
+    theme: "primary",
+    title: nextButtonTitle({
       activeStepIndex: activeStepIndex,
       steps: steps,
       totalSteps: totalSteps
-    }) : /*#__PURE__*/_react["default"].createElement(_StepperProgress["default"], {
-      width: "80%",
-      paddingTop: 6,
-      paddingBottom: 4,
-      activeStepIndex: activeStepIndex
-    }, steps.map(function (step, index) {
-      return /*#__PURE__*/_react["default"].createElement(_StepperProgress["default"].Step, {
-        key: index,
-        renderEnd: /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-          align: "center",
-          marginTop: 2
-        }, step.name)
-      });
-    })), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
-      spacing: /*#__PURE__*/_react["default"].createElement(_Divider["default"], null),
-      elevation: 1
-    }, /*#__PURE__*/_react["default"].createElement(_PagerView["default"], {
-      activeViewIndex: activeStepIndex,
-      autoFocus: autoFocus
-    }, _react.Children.map(children, function (child, index) {
-      return /*#__PURE__*/_react["default"].createElement(_PagerView["default"].View, {
-        key: index
-      }, child);
-    })), /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
-      axis: "horizontal",
-      distribution: activeStepIndex > 0 ? 'space-between' : 'end',
-      padding: 1,
-      spacing: 1
-    }, footerProps), activeStepIndex === 0 && onCancel && /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
-      disabled: sendingPayload,
-      onClick: onCancel,
-      size: "lg",
-      title: "Cancel",
-      variant: "naked"
-    }, buttonProps, cancelButtonProps)), activeStepIndex > 0 && /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
-      disabled: sendingPayload,
-      iconLeft: {
-        name: 'general.leftChevron',
-        size: 'sm'
-      },
-      onClick: function onClick() {
-        return _this2.setState({
-          activeStepIndex: activeStepIndex - 1
-        });
-      },
-      size: "lg",
-      title: "Back",
-      variant: "naked"
-    }, buttonProps, backButtonProps)), /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
-      disabled: !this.isCurrentStepValid(),
-      onClick: function onClick() {
-        return activeStepIndex >= totalSteps - 1 ? _this2.handleSubmit() : _this2.setState({
-          activeStepIndex: activeStepIndex + 1
-        });
-      },
-      size: "lg",
-      spinner: sendingPayload,
-      theme: "primary",
-      title: nextButtonTitle({
-        activeStepIndex: activeStepIndex,
-        steps: steps,
-        totalSteps: totalSteps
-      })
-    }, buttonProps, nextButtonProps))))));
-  };
-
-  return Wizard;
-}(_react.Component);
-
-(0, _defineProperty2["default"])(Wizard, "Step", _Step["default"]);
-(0, _defineProperty2["default"])(Wizard, "defaultProps", {
-  autoFocus: true,
-  initialPayload: {},
-  nextButtonTitle: function nextButtonTitle(_ref) {
-    var activeStepIndex = _ref.activeStepIndex,
-        steps = _ref.steps,
-        totalSteps = _ref.totalSteps;
-    return activeStepIndex >= totalSteps - 1 ? 'Finish' : 'Next';
-  }
-});
+    })
+  }, buttonProps, nextButtonProps))))));
+}
+
 var _default = Wizard;
 exports["default"] = _default;

package/dist/cjs/Wizard/index.js

@@ -7,5 +7,8 @@ exports["default"] = void 0;
 
 var _Wizard = _interopRequireDefault(require("./Wizard"));
 
+var _Step = _interopRequireDefault(require("./Step"));
+
+_Wizard["default"].Step = _Step["default"];
 var _default = _Wizard["default"];
 exports["default"] = _default;

package/dist/esm/Badge/Badge.js

@@ -73,7 +73,11 @@ function Badge(_ref) {
   }
 
   badgeProps.paddingLeft = renderLeft ? boxSize + 0.5 : badgeProps.radius === 'pill' ? paddingHorizontal : paddingHorizontalDense;
-  badgeProps.paddingRight = renderRight ? boxSize + 0.5 : badgeProps.radius === 'pill' ? paddingHorizontal : paddingHorizontalDense;
+  badgeProps.paddingRight = renderRight ? boxSize + 0.5 : badgeProps.radius === 'pill' ? paddingHorizontal : paddingHorizontalDense; // The `square` prop is no longer needed and should not get
+  // passed to `<StackView>` since it's not one of its props
+  // or a standard HTML attribute.
+
+  delete badgeProps.square;
   return /*#__PURE__*/React.createElement(StackView, _extends({
     inline: true,
     axis: "horizontal",

package/dist/esm/Card/Card.js

@@ -12,7 +12,10 @@ export function Card(_ref) {
       radius = _ref$radius === void 0 ? 3 : _ref$radius,
       restProps = _objectWithoutPropertiesLoose(_ref, ["children", "subdued", "radius"]);
 
-  var cardTheme = useThemeValue('card');
+  var cardTheme = useThemeValue('card'); // List of component types to ignore when setting the radius
+  // for first & last child elements
+
+  var ignoreRadiusTypes = ['Avatar', 'Badge', 'Button', 'Calendar', 'ChurchCenterStatus', 'Group', 'Inline', 'Input', 'InputBox', 'Modal', 'Progress', 'Spinner', 'Status', 'Tab', 'Tooltip'];
   return /*#__PURE__*/React.createElement(StackView, _extends({
     width: "100%",
     lineHeight: 2.5,
@@ -27,7 +30,7 @@ export function Card(_ref) {
 
     var firstChild = _ref2.firstChild,
         lastChild = _ref2.lastChild;
-    return child.props.radius === undefined ? firstChild ? (_ref3 = {}, _ref3["radius" + (restProps.axis === 'horizontal' ? 'Left' : 'Top')] = radius - 1, _ref3) : lastChild ? (_ref4 = {}, _ref4["radius" + (restProps.axis === 'horizontal' ? 'Right' : 'Bottom')] = radius - 1, _ref4) : {} : {};
+    return child.props.radius === undefined && !ignoreRadiusTypes.includes(child.type.name) ? firstChild ? (_ref3 = {}, _ref3["radius" + (restProps.axis === 'horizontal' ? 'Left' : 'Top')] = radius - 1, _ref3) : lastChild ? (_ref4 = {}, _ref4["radius" + (restProps.axis === 'horizontal' ? 'Right' : 'Bottom')] = radius - 1, _ref4) : {} : {};
   }) : children);
 }
 Card.Section = Section;

package/dist/esm/Combobox/Combobox.js

@@ -1,48 +1,23 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React, { Component } from 'react';
+import React from 'react';
 import Box from '../Box';
 import { ItemList } from '../ItemList';
-import ComboboxInput from './ComboboxInput';
-import ComboboxItem from './ComboboxItem';
-import ComboboxItems from './ComboboxItems';
-import ComboboxPopover from './ComboboxPopover';
-
-var Combobox = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(Combobox, _Component);
-
-  function Combobox() {
-    return _Component.apply(this, arguments) || this;
-  }
-
-  var _proto = Combobox.prototype;
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        children = _this$props.children,
-        multiple = _this$props.multiple,
-        onSelect = _this$props.onSelect,
-        selectedValue = _this$props.selectedValue,
-        restProps = _objectWithoutPropertiesLoose(_this$props, ["children", "multiple", "onSelect", "selectedValue"]);
-
-    return /*#__PURE__*/React.createElement(ItemList, {
-      selected: function selected(item) {
-        return item.value === selectedValue;
-      },
-      onSelect: onSelect
-    }, /*#__PURE__*/React.createElement(Box, restProps, children));
-  };
-
-  return Combobox;
-}(Component);
-
-_defineProperty(Combobox, "Input", ComboboxInput);
-
-_defineProperty(Combobox, "Item", ComboboxItem);
-
-_defineProperty(Combobox, "Items", ComboboxItems);
-
-_defineProperty(Combobox, "Popover", ComboboxPopover);
+import { useThemeProps } from '../system';
+
+function Combobox(props) {
+  var _useThemeProps = useThemeProps('combobox', props),
+      children = _useThemeProps.children,
+      multiple = _useThemeProps.multiple,
+      onSelect = _useThemeProps.onSelect,
+      selectedValue = _useThemeProps.selectedValue,
+      restProps = _objectWithoutPropertiesLoose(_useThemeProps, ["children", "multiple", "onSelect", "selectedValue"]);
+
+  return /*#__PURE__*/React.createElement(ItemList, {
+    selected: function selected(item) {
+      return item.value === selectedValue;
+    },
+    onSelect: onSelect
+  }, /*#__PURE__*/React.createElement(Box, restProps, children));
+}
 
 export default Combobox;