@planningcenter/tapestry-react 2.1.1 → 2.2.0

package/dist/esm/Wizard/Wizard.js

@@ -1,14 +1,12 @@
 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 _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, Component } from 'react';
+import React, { Children, useCallback, useReducer, useState } from 'react';
 import Button from '../Button';
 import Card from '../Card';
 import Divider from '../Divider';
@@ -16,212 +14,157 @@ import StackView from '../StackView';
 import PagerView from '../PagerView';
 import StepperProgress from '../StepperProgress';
 import Text from '../Text';
-import Step from './Step';
+import { useThemeProps } from '../system';
 import WizardContext from './WizardContext';
 
-var _ref = /*#__PURE__*/React.createElement(Divider, null);
-
-var Wizard = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(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;
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      activeStepIndex: 0,
-      payload: _this.props.initialPayload,
-      steps: [],
-      totalSteps: -1,
-      sendingPayload: false
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "setPayload", function (newPayload, cb) {
-      _this.setState(function (state) {
-        return {
-          payload: _objectSpread(_objectSpread({}, state.payload), newPayload)
-        };
-      }, cb);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "setSteps", function (getSteps) {
-      _this.setState(function (state) {
-        var nextSteps = getSteps(state.steps);
-        return {
-          steps: nextSteps,
-          totalSteps: nextSteps.length
-        };
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_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;
-          });
-        });
-      };
+var _ref2 = /*#__PURE__*/React.createElement(Divider, null);
+
+function Wizard(props) {
+  var _useThemeProps = 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 = _objectWithoutPropertiesLoose(_useThemeProps, ["autoFocus", "backButtonProps", "buttonProps", "cancelButtonProps", "children", "footerProps", "initialPayload", "nextButtonProps", "nextButtonTitle", "onCancel", "onSubmit", "renderProgress"]);
+
+  var _useState = useState(0),
+      activeStepIndex = _useState[0],
+      setActiveStepIndex = _useState[1];
+
+  var _useState2 = useState([]),
+      steps = _useState2[0],
+      setSteps = _useState2[1];
+
+  var _useState3 = useState(false),
+      sendingPayload = _useState3[0],
+      setSendingPayload = _useState3[1];
+
+  var totalSteps = steps.length;
+
+  var _useReducer = useReducer(function (prevState, updatedProperty) {
+    return _objectSpread(_objectSpread({}, prevState), updatedProperty);
+  }, initialPayload),
+      payload = _useReducer[0],
+      setPayload = _useReducer[1];
+
+  var addStep = useCallback(function (step) {
+    setSteps(function (steps) {
+      return [].concat(steps, [step]);
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleSubmit", function () {
-      if (_this.props.onSubmit) {
-        var _complete = function _complete() {
-          return _this.setState({
-            sendingPayload: false
-          });
-        };
-
-        _this.setState({
-          sendingPayload: true
+    return function () {
+      setSteps(function (steps) {
+        return steps.filter(function (previousStep) {
+          return previousStep.name !== step.name;
         });
-
-        _this.props.onSubmit(_this.state.payload, _complete);
-      }
-    });
-
-    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;
+      });
+    };
+  }, [steps]);
+  var isCurrentStepValid = useCallback(function () {
     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 = _objectWithoutPropertiesLoose(_this$props, ["autoFocus", "backButtonProps", "buttonProps", "cancelButtonProps", "children", "footerProps", "initialPayload", "nextButtonProps", "nextButtonTitle", "onCancel", "onSubmit", "renderProgress"]);
+  }, [activeStepIndex, steps, payload]);
+  var handleSubmit = useCallback(function () {
+    if (onSubmit) {
+      var _complete = function _complete() {
+        return setSendingPayload(false);
+      };
 
-    var _this$state2 = this.state,
-        activeStepIndex = _this$state2.activeStepIndex,
-        sendingPayload = _this$state2.sendingPayload,
-        steps = _this$state2.steps,
-        totalSteps = _this$state2.totalSteps;
-    return /*#__PURE__*/React.createElement(WizardContext.Provider, {
-      value: {
-        activeStepIndex: this.state.activeStepIndex,
-        addStep: this.addStep,
-        setPayload: this.setPayload,
-        payload: this.state.payload,
-        totalSteps: this.state.totalSteps
-      }
-    }, /*#__PURE__*/React.createElement(StackView, _extends({
-      alignment: "center",
-      minWidth: 48,
-      maxWidth: 96
-    }, restProps), renderProgress ? renderProgress({
+      setSendingPayload(true);
+      onSubmit(payload, _complete);
+    }
+  }, [payload]);
+  return /*#__PURE__*/React.createElement(WizardContext.Provider, {
+    value: {
+      activeStepIndex: activeStepIndex,
+      addStep: addStep,
+      setPayload: setPayload,
+      payload: payload,
+      totalSteps: totalSteps
+    }
+  }, /*#__PURE__*/React.createElement(StackView, _extends({
+    alignment: "center",
+    minWidth: 48,
+    maxWidth: 96
+  }, restProps), renderProgress ? renderProgress({
+    activeStepIndex: activeStepIndex,
+    steps: steps,
+    totalSteps: totalSteps
+  }) : /*#__PURE__*/React.createElement(StepperProgress, {
+    width: "80%",
+    paddingTop: 6,
+    paddingBottom: 4,
+    activeStepIndex: activeStepIndex
+  }, steps.map(function (step, index) {
+    return /*#__PURE__*/React.createElement(StepperProgress.Step, {
+      key: index,
+      renderEnd: /*#__PURE__*/React.createElement(Text, {
+        align: "center",
+        marginTop: 2
+      }, step.name)
+    });
+  })), /*#__PURE__*/React.createElement(Card, {
+    spacing: _ref2,
+    elevation: 1
+  }, /*#__PURE__*/React.createElement(PagerView, {
+    activeViewIndex: activeStepIndex,
+    autoFocus: autoFocus
+  }, Children.map(children, function (child, index) {
+    return /*#__PURE__*/React.createElement(PagerView.View, {
+      key: index
+    }, child);
+  })), /*#__PURE__*/React.createElement(StackView, _extends({
+    axis: "horizontal",
+    distribution: activeStepIndex > 0 ? 'space-between' : 'end',
+    padding: 1,
+    spacing: 1
+  }, footerProps), activeStepIndex === 0 && onCancel && /*#__PURE__*/React.createElement(Button, _extends({
+    disabled: sendingPayload,
+    onClick: onCancel,
+    size: "lg",
+    title: "Cancel",
+    variant: "naked"
+  }, buttonProps, cancelButtonProps)), activeStepIndex > 0 && /*#__PURE__*/React.createElement(Button, _extends({
+    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.createElement(Button, _extends({
+    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.createElement(StepperProgress, {
-      width: "80%",
-      paddingTop: 6,
-      paddingBottom: 4,
-      activeStepIndex: activeStepIndex
-    }, steps.map(function (step, index) {
-      return /*#__PURE__*/React.createElement(StepperProgress.Step, {
-        key: index,
-        renderEnd: /*#__PURE__*/React.createElement(Text, {
-          align: "center",
-          marginTop: 2
-        }, step.name)
-      });
-    })), /*#__PURE__*/React.createElement(Card, {
-      spacing: _ref,
-      elevation: 1
-    }, /*#__PURE__*/React.createElement(PagerView, {
-      activeViewIndex: activeStepIndex,
-      autoFocus: autoFocus
-    }, Children.map(children, function (child, index) {
-      return /*#__PURE__*/React.createElement(PagerView.View, {
-        key: index
-      }, child);
-    })), /*#__PURE__*/React.createElement(StackView, _extends({
-      axis: "horizontal",
-      distribution: activeStepIndex > 0 ? 'space-between' : 'end',
-      padding: 1,
-      spacing: 1
-    }, footerProps), activeStepIndex === 0 && onCancel && /*#__PURE__*/React.createElement(Button, _extends({
-      disabled: sendingPayload,
-      onClick: onCancel,
-      size: "lg",
-      title: "Cancel",
-      variant: "naked"
-    }, buttonProps, cancelButtonProps)), activeStepIndex > 0 && /*#__PURE__*/React.createElement(Button, _extends({
-      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.createElement(Button, _extends({
-      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;
-}(Component);
-
-_defineProperty(Wizard, "Step", Step);
-
-_defineProperty(Wizard, "defaultProps", {
-  autoFocus: true,
-  initialPayload: {},
-  nextButtonTitle: function nextButtonTitle(_ref2) {
-    var activeStepIndex = _ref2.activeStepIndex,
-        steps = _ref2.steps,
-        totalSteps = _ref2.totalSteps;
-    return activeStepIndex >= totalSteps - 1 ? 'Finish' : 'Next';
-  }
-});
+    })
+  }, buttonProps, nextButtonProps))))));
+}
 
 export default Wizard;

package/dist/esm/Wizard/index.js

@@ -1,2 +1,4 @@
 import Wizard from './Wizard';
+import Step from './Step';
+Wizard.Step = Step;
 export default Wizard;

package/dist/esm/system/box-sizes.js

@@ -18,7 +18,7 @@ export var boxSizes = {
     radius: 3
   },
   md: {
-    boxSize: 4.5,
+    boxSize: 4,
     fontSize: 4,
     lineHeight: 3,
     paddingHorizontalDense: 1,
@@ -27,7 +27,7 @@ export var boxSizes = {
     radius: 4
   },
   lg: {
-    boxSize: 6,
+    boxSize: 5,
     fontSize: 3,
     lineHeight: 4,
     paddingHorizontalDense: 1,
@@ -36,7 +36,7 @@ export var boxSizes = {
     radius: 5
   },
   xl: {
-    boxSize: 9,
+    boxSize: 8,
     fontSize: 1,
     lineHeight: 5,
     paddingHorizontalDense: 2,

package/dist/types/Button/Button.d.ts

@@ -11,6 +11,10 @@ declare type ButtonProps = {
      * Opens the linked destination in a new window or tab.
      */
     external?: boolean;
+    /**
+     * Pass styles for when the button is active.
+     */
+    active?: object;
     /**
      * Pass styles for when the button is focused.
      */

package/dist/types/Popover/utils.d.ts

@@ -25,6 +25,7 @@ export declare function getModifiers({ matchWidths, offset, keepInView, shouldFl
     enabled: boolean;
     phase: string;
     requires: string[];
+    fn: () => void;
     effect: ({ state }: {
         state: any;
     }) => void;
@@ -37,12 +38,14 @@ export declare function getModifiers({ matchWidths, offset, keepInView, shouldFl
     enabled?: undefined;
     phase?: undefined;
     requires?: undefined;
+    fn?: undefined;
     effect?: undefined;
 } | {
     name: string;
     enabled: any;
     phase?: undefined;
     requires?: undefined;
+    fn?: undefined;
     effect?: undefined;
     options?: undefined;
 })[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
   "author": "Front End Systems Engineering <frontend@pco.bz>",
   "main": "dist/cjs/index.js",

package/src/Avatar/Avatar.tsx

@@ -1,7 +1,15 @@
 import React from 'react'
 
 import Box from '../Box'
-import { useBoxSize } from '../system'
+
+const avatarSizes = {
+  xs: 2.5,
+  sm: 3,
+  md: 4.5,
+  lg: 6,
+  xl: 9,
+  xxl: 14,
+}
 
 const borderSizes = {
   xs: 2,
@@ -16,15 +24,15 @@ type AvatarProps = {
   /**
    * Controls the size of the avatar.
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl',
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
   /**
    * The source of the image to display.
    */
-  source?: string,
+  source?: string
   /**
    * Adds a colored ring with padding around the avatar. Accepts a valid color string.
    */
-  status?: string,
+  status?: string
 }
 
 /**
@@ -36,14 +44,13 @@ export function Avatar({
   status,
   ...restProps
 }: AvatarProps) {
-  const { boxSize } = useBoxSize(size)
   return (
     <Box
       as="img"
       src={source}
-      width={boxSize}
-      height={boxSize}
-      flexBasis={boxSize}
+      width={avatarSizes[size]}
+      height={avatarSizes[size]}
+      flexBasis={avatarSizes[size]}
       flexShrink={0}
       flexGrow={0}
       objectFit="cover"

package/src/Badge/Badge.js

@@ -123,6 +123,11 @@ function Badge({
     ? 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 (
     <StackView
       inline

package/src/Button/Button.tsx

@@ -25,6 +25,11 @@ type ButtonProps = {
    */
   external?: boolean
 
+  /**
+   * Pass styles for when the button is active.
+   */
+  active?: object
+
   /**
    * Pass styles for when the button is focused.
    */

package/src/Card/Card.tsx

@@ -22,6 +22,27 @@ export function Card({
   ...restProps
 }: CardProps) {
   const cardTheme = useThemeValue('card')
+
+  // List of component types to ignore when setting the radius
+  // for first & last child elements
+  const ignoreRadiusTypes = [
+    'Avatar',
+    'Badge',
+    'Button',
+    'Calendar',
+    'ChurchCenterStatus',
+    'Group',
+    'Inline',
+    'Input',
+    'InputBox',
+    'Modal',
+    'Progress',
+    'Spinner',
+    'Status',
+    'Tab',
+    'Tooltip'
+  ]
+
   return (
     <StackView
       width="100%"
@@ -37,7 +58,7 @@ export function Card({
     >
       {radius > 0
         ? cloneChildren(children, (child, { firstChild, lastChild }) =>
-            child.props.radius === undefined
+            child.props.radius === undefined && !ignoreRadiusTypes.includes(child.type.name)
               ? firstChild
                 ? {
                     [`radius${

package/src/Combobox/Combobox.js

@@ -1,13 +1,9 @@
 // @flow
-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'
+import { useThemeProps } from '../system'
 
 type ComboboxProps = {
   /**
@@ -18,32 +14,22 @@ type ComboboxProps = {
   selectedValue: any,
 }
 
-class Combobox extends Component<ComboboxProps> {
-  static Input = ComboboxInput
-
-  static Item = ComboboxItem
-
-  static Items = ComboboxItems
-
-  static Popover = ComboboxPopover
-
-  render() {
-    const {
-      children,
-      multiple,
-      onSelect,
-      selectedValue,
-      ...restProps
-    } = this.props
-    return (
-      <ItemList
-        selected={(item) => item.value === selectedValue}
-        onSelect={onSelect}
-      >
-        <Box {...restProps}>{children}</Box>
-      </ItemList>
-    )
-  }
+function Combobox(props: ComboboxProps) {
+  const {
+    children,
+    multiple,
+    onSelect,
+    selectedValue,
+    ...restProps
+  } = useThemeProps('combobox', props)
+  return (
+    <ItemList
+      selected={(item) => item.value === selectedValue}
+      onSelect={onSelect}
+    >
+      <Box {...restProps}>{children}</Box>
+    </ItemList>
+  )
 }
 
 export default Combobox

package/src/Combobox/Combobox.mdx

@@ -3,6 +3,7 @@ title: Combobox
 category: Forms
 summary: Used for easily selecting a list of items that are paired with a text input. Composes [Combobox.Input](https://github.com/planningcenter/tapestry-react/blob/master/packages/tapestry-react/src/Combobox/ComboboxInput.js) and [Popover](/popover).
 propsSummary: Accepts [Box](/box) props.
+themeKey: combobox
 ---
 
 ### Combobox

package/src/Combobox/Combobox.test.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render, screen, fireEvent } from '@testing-library/react'
-import Combobox from './Combobox'
+import Combobox from '../Combobox'
 
 const people = [
   {