@planningcenter/tapestry-react 2.1.2 → 2.3.0

package/dist/esm/SegmentedControl/SegmentedControl.js

@@ -1,129 +1,105 @@
 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, { forwardRef, useCallback, useImperativeHandle, useRef, useState, useEffect } from 'react';
 import Button from '../Button';
 import InputBox from '../Input/InputBox';
 import { navigateSize } from '../system';
+import { useThemeProps } from '../system';
+
+function SegmentedControl(props, ref) {
+  var getActiveIndex = useCallback(function (props) {
+    return props.activeSegment === undefined ? 0 : props.segments.indexOf(props.activeSegment);
+  });
+  var inputBoxRef = useRef(null);
+
+  var _useThemeProps = useThemeProps('segmentedControl', props),
+      activeSegment = _useThemeProps.activeSegment,
+      _useThemeProps$color = _useThemeProps.color,
+      color = _useThemeProps$color === void 0 ? 'primary' : _useThemeProps$color,
+      disabled = _useThemeProps.disabled,
+      onChange = _useThemeProps.onChange,
+      segments = _useThemeProps.segments,
+      _useThemeProps$segmen = _useThemeProps.segmentBasis,
+      segmentBasis = _useThemeProps$segmen === void 0 ? 'auto' : _useThemeProps$segmen,
+      _useThemeProps$size = _useThemeProps.size,
+      size = _useThemeProps$size === void 0 ? 'md' : _useThemeProps$size,
+      restProps = _objectWithoutPropertiesLoose(_useThemeProps, ["activeSegment", "color", "disabled", "onChange", "segments", "segmentBasis", "size"]);
+
+  var _useState = useState(getActiveIndex(props)),
+      activeIndex = _useState[0],
+      setActiveIndex = _useState[1];
+
+  var handleKeyDown = useCallback(function (event) {
+    if (onChange && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+      var amountToMove = event.key === 'ArrowLeft' ? -1 : 1;
+      var nextIndex = activeIndex + amountToMove;
+      event.preventDefault();
+      changeSegment(nextIndex);
+    }
+  });
+  var changeSegment = useCallback(function (index) {
+    var nextSegment = segments[index];
 
-var SegmentedControl = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(SegmentedControl, _Component);
-
-  function SegmentedControl(_props) {
-    var _this;
-
-    _this = _Component.call(this, _props) || this;
-
-    _defineProperty(_assertThisInitialized(_this), "getActiveIndex", function (props) {
-      return props.activeSegment === undefined ? 0 : props.segments.indexOf(props.activeSegment);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "setInputBox", function (component) {
-      _this.inputBox = component;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
-      if (_this.props.onChange && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
-        var amountToMove = event.key === 'ArrowLeft' ? -1 : 1;
-        var nextIndex = _this.state.activeIndex + amountToMove;
-        event.preventDefault();
-
-        _this.changeSegment(nextIndex);
+    if (nextSegment) {
+      if (activeSegment === undefined) {
+        setActiveIndex(index);
       }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "changeSegment", function (index) {
-      var nextSegment = _this.props.segments[index];
-
-      if (nextSegment) {
-        if (_this.props.activeSegment === undefined) {
-          _this.setState({
-            activeIndex: index
-          });
-        }
-
-        if (_this.props.onChange) {
-          _this.props.onChange(nextSegment.title || nextSegment);
-        }
 
-        _this.focus(index);
+      if (onChange) {
+        onChange(nextSegment.title || nextSegment);
       }
-    });
 
-    _this.state = {
-      activeIndex: _this.getActiveIndex(_props)
+      focus(index);
+    }
+  });
+  var focus = useCallback(function (index) {
+    return inputBoxRef.current.focus(index);
+  });
+  var blur = useCallback(function () {
+    return inputBoxRef.current.blur();
+  });
+  useImperativeHandle(ref, function () {
+    return {
+      focus: focus,
+      blur: blur
     };
-    return _this;
-  }
-
-  var _proto = SegmentedControl.prototype;
+  });
+  useEffect(function () {
+    var newActiveIndex = getActiveIndex(props);
 
-  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
-    if (lastProps.activeSegment !== this.props.activeSegment) {
-      this.setState({
-        activeIndex: this.getActiveIndex(this.props)
-      });
+    if (activeIndex !== newActiveIndex) {
+      setActiveIndex(newActiveIndex);
     }
-  };
-
-  _proto.focus = function focus(index) {
-    this.inputBox.focus(index);
-  };
-
-  _proto.blur = function blur() {
-    this.inputBox.blur();
-  };
-
-  _proto.render = function render() {
-    var _this2 = this;
-
-    var _this$props = this.props,
-        activeSegment = _this$props.activeSegment,
-        _this$props$color = _this$props.color,
-        color = _this$props$color === void 0 ? 'primary' : _this$props$color,
-        disabled = _this$props.disabled,
-        onChange = _this$props.onChange,
-        segments = _this$props.segments,
-        _this$props$segmentBa = _this$props.segmentBasis,
-        segmentBasis = _this$props$segmentBa === void 0 ? 'auto' : _this$props$segmentBa,
-        _this$props$size = _this$props.size,
-        size = _this$props$size === void 0 ? 'md' : _this$props$size,
-        restProps = _objectWithoutPropertiesLoose(_this$props, ["activeSegment", "color", "disabled", "onChange", "segments", "segmentBasis", "size"]);
-
-    var activeIndex = this.state.activeIndex;
-    return /*#__PURE__*/React.createElement(InputBox, _extends({
-      ref: this.setInputBox,
-      size: size,
-      includeSpacing: true,
-      evenPadding: true,
-      role: "group",
-      cursor: "initial",
-      disabled: disabled
-    }, restProps), segments.map(function (segment, segmentIndex) {
-      var title = segment.title,
-          restSegmentProps = _objectWithoutPropertiesLoose(segment, ["title"]);
-
-      var buttonProps = title ? restSegmentProps : {};
-      return /*#__PURE__*/React.createElement(Button, _extends({
-        key: segmentIndex,
-        grow: 1,
-        size: navigateSize(size, -1),
-        basis: segmentBasis,
-        theme: segmentIndex === activeIndex ? color : undefined,
-        variant: segmentIndex === activeIndex ? 'fill' : 'naked',
-        title: title || segment,
-        disabled: disabled,
-        onKeyDown: _this2.handleKeyDown,
-        onClick: function onClick() {
-          return segmentIndex !== activeIndex && _this2.changeSegment(segmentIndex);
-        }
-      }, buttonProps));
-    }));
-  };
-
-  return SegmentedControl;
-}(Component);
+  }, [activeSegment]);
+  return /*#__PURE__*/React.createElement(InputBox, _extends({
+    ref: inputBoxRef,
+    size: size,
+    includeSpacing: true,
+    evenPadding: true,
+    role: "group",
+    cursor: "initial",
+    disabled: disabled
+  }, restProps), segments.map(function (segment, segmentIndex) {
+    var title = segment.title,
+        restSegmentProps = _objectWithoutPropertiesLoose(segment, ["title"]);
+
+    var buttonProps = title ? restSegmentProps : {};
+    return /*#__PURE__*/React.createElement(Button, _extends({
+      key: segmentIndex,
+      grow: 1,
+      size: navigateSize(size, -1),
+      basis: segmentBasis,
+      theme: segmentIndex === activeIndex ? color : undefined,
+      variant: segmentIndex === activeIndex ? 'fill' : 'naked',
+      title: title || segment,
+      disabled: disabled,
+      onKeyDown: handleKeyDown,
+      onClick: function onClick() {
+        return segmentIndex !== activeIndex && changeSegment(segmentIndex);
+      }
+    }, buttonProps));
+  }));
+}
 
+SegmentedControl = /*#__PURE__*/forwardRef(SegmentedControl);
 export default SegmentedControl;

package/dist/esm/SegmentedTabs/SegmentedTabs.js

@@ -1,11 +1,9 @@
-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 _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { Component } from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
 import Text from '../Text';
 import StackView from '../StackView';
+import { useThemeProps } from '../system';
 
 function Tab(_ref) {
   var isSelected = _ref.isSelected,
@@ -32,48 +30,21 @@ function Tab(_ref) {
   }, restProps));
 }
 
-var SegmentedTabs = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(SegmentedTabs, _Component);
-
-  function SegmentedTabs(props) {
-    var _this;
-
-    _this = _Component.call(this, props) || this;
-
-    _defineProperty(_assertThisInitialized(_this), "setIndex", function (index) {
-      if (_this.props.activeTab === undefined) {
-        _this.setState({
-          activeIndex: index
-        });
-      }
-
-      if (_this.props.onChange) {
-        _this.props.onChange(_this.props.tabs[index]);
-      }
-    });
-
-    _this.state = {
-      activeIndex: _this.getActiveIndex(props)
-    };
-    return _this;
-  }
-
-  var _proto = SegmentedTabs.prototype;
-
-  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
-    if (this.props.activeTab) {
-      var lastActiveIndex = this.getActiveIndex(lastProps);
-      var nextActiveIndex = this.getActiveIndex(this.props);
-
-      if (lastActiveIndex !== nextActiveIndex || this.state.activeIndex !== nextActiveIndex) {
-        this.setState({
-          activeIndex: nextActiveIndex
-        });
-      }
-    }
-  };
+function SegmentedTabs(props) {
+  var _useThemeProps = useThemeProps('segmentedTabs', props),
+      activeTab = _useThemeProps.activeTab,
+      _useThemeProps$color = _useThemeProps.color,
+      color = _useThemeProps$color === void 0 ? 'primary' : _useThemeProps$color,
+      _useThemeProps$getTab = _useThemeProps.getTabLabel,
+      getTabLabel = _useThemeProps$getTab === void 0 ? function (tab) {
+    return tab;
+  } : _useThemeProps$getTab,
+      onChange = _useThemeProps.onChange,
+      tabs = _useThemeProps.tabs,
+      tabProps = _useThemeProps.tabProps,
+      restProps = _objectWithoutPropertiesLoose(_useThemeProps, ["activeTab", "color", "getTabLabel", "onChange", "tabs", "tabProps"]);
 
-  _proto.getActiveIndex = function getActiveIndex(_ref2) {
+  var getActiveIndex = useCallback(function (_ref2) {
     var activeTab = _ref2.activeTab,
         tabs = _ref2.tabs;
     var index;
@@ -91,47 +62,44 @@ var SegmentedTabs = /*#__PURE__*/function (_Component) {
     }
 
     return index;
-  };
-
-  _proto.render = function render() {
-    var _this2 = this;
+  });
 
-    var _this$props = this.props,
-        activeTab = _this$props.activeTab,
-        color = _this$props.color,
-        getTabLabel = _this$props.getTabLabel,
-        onChange = _this$props.onChange,
-        tabs = _this$props.tabs,
-        tabProps = _this$props.tabProps,
-        restProps = _objectWithoutPropertiesLoose(_this$props, ["activeTab", "color", "getTabLabel", "onChange", "tabs", "tabProps"]);
+  var _useState = useState(getActiveIndex(props)),
+      activeIndex = _useState[0],
+      setActiveIndex = _useState[1];
 
-    var activeIndex = this.state.activeIndex;
-    return /*#__PURE__*/React.createElement(StackView, _extends({
-      role: "group",
-      axis: "horizontal",
-      distribution: "fill",
-      position: "relative"
-    }, restProps), tabs.map(function (tab, index) {
-      return /*#__PURE__*/React.createElement(Tab, _extends({
-        key: index,
-        index: index,
-        isSelected: index === activeIndex,
-        selectedColor: color,
-        onSelect: function onSelect() {
-          return _this2.setIndex(index);
-        }
-      }, tabProps), getTabLabel(tab));
-    }));
-  };
+  var setIndex = useCallback(function (index) {
+    if (activeTab === undefined) {
+      setActiveIndex(index);
+    }
 
-  return SegmentedTabs;
-}(Component);
+    if (onChange) {
+      onChange(tabs[index]);
+    }
+  });
+  useEffect(function () {
+    var newActiveIndex = getActiveIndex(props);
 
-_defineProperty(SegmentedTabs, "defaultProps", {
-  color: 'primary',
-  getTabLabel: function getTabLabel(tab) {
-    return tab;
-  }
-});
+    if (activeIndex !== newActiveIndex) {
+      setActiveIndex(newActiveIndex);
+    }
+  }, [activeTab]);
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    role: "group",
+    axis: "horizontal",
+    distribution: "fill",
+    position: "relative"
+  }, restProps), tabs.map(function (tab, index) {
+    return /*#__PURE__*/React.createElement(Tab, _extends({
+      key: index,
+      index: index,
+      isSelected: index === activeIndex,
+      selectedColor: color,
+      onSelect: function onSelect() {
+        return setIndex(index);
+      }
+    }, tabProps), getTabLabel(tab));
+  }));
+}
 
 export default SegmentedTabs;

package/dist/esm/Tabs/Tab.js

@@ -3,14 +3,16 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React from 'react';
 import StackView from '../StackView';
 import { useHover } from '../hooks';
+import { useThemeProps } from '../system';
 
 function Tab(props) {
-  var axis = props.axis,
-      children = props.children,
-      disabled = props.disabled,
-      id = props.id,
-      isActive = props.isActive,
-      restProps = _objectWithoutPropertiesLoose(props, ["axis", "children", "disabled", "id", "isActive"]);
+  var _useThemeProps = useThemeProps('tabs.tab', props),
+      axis = _useThemeProps.axis,
+      children = _useThemeProps.children,
+      disabled = _useThemeProps.disabled,
+      id = _useThemeProps.id,
+      isActive = _useThemeProps.isActive,
+      restProps = _objectWithoutPropertiesLoose(_useThemeProps, ["axis", "children", "disabled", "id", "isActive"]);
 
   var _useHover = useHover(),
       hover = _useHover.hover,

package/dist/esm/Tabs/TabList.js

@@ -1,78 +1,61 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 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, Children, cloneElement } from 'react';
+import React, { Children, cloneElement } from 'react';
 import StackView from '../StackView';
+import { useThemeProps } from '../system';
 export var TABLIST_DISPLAY_NAME = 'TabList';
 
-var TabList = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(TabList, _Component);
-
-  function TabList() {
-    return _Component.apply(this, arguments) || this;
-  }
-
-  var _proto = TabList.prototype;
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        activeIndex = _this$props.activeIndex,
-        axis = _this$props.axis,
-        children = _this$props.children,
-        id = _this$props.id,
-        moveTabFocus = _this$props.moveTabFocus,
-        setActiveIndex = _this$props.setActiveIndex,
-        restProps = _objectWithoutPropertiesLoose(_this$props, ["activeIndex", "axis", "children", "id", "moveTabFocus", "setActiveIndex"]);
-
-    var backwardKey = axis === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
-    var forwardKey = axis === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
-    return /*#__PURE__*/React.createElement(StackView, _extends({
-      role: "tablist",
-      "aria-orientation": axis,
+function TabList(props) {
+  var _useThemeProps = useThemeProps('tabs.tabList', props),
+      activeIndex = _useThemeProps.activeIndex,
+      _useThemeProps$axis = _useThemeProps.axis,
+      axis = _useThemeProps$axis === void 0 ? 'horizontal' : _useThemeProps$axis,
+      children = _useThemeProps.children,
+      id = _useThemeProps.id,
+      moveTabFocus = _useThemeProps.moveTabFocus,
+      setActiveIndex = _useThemeProps.setActiveIndex,
+      restProps = _objectWithoutPropertiesLoose(_useThemeProps, ["activeIndex", "axis", "children", "id", "moveTabFocus", "setActiveIndex"]);
+
+  var backwardKey = axis === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+  var forwardKey = axis === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    role: "tablist",
+    "aria-orientation": axis,
+    axis: axis,
+    distribution: "fill"
+  }, restProps), Children.map(children, function (child, index) {
+    return /*#__PURE__*/cloneElement(child, {
       axis: axis,
-      distribution: "fill"
-    }, restProps), Children.map(children, function (child, index) {
-      return /*#__PURE__*/cloneElement(child, {
-        axis: axis,
-        id: id + "-" + index,
-        isActive: index === activeIndex,
-        tabIndex: child.props.disabled ? undefined : index !== activeIndex ? -1 : 0,
-        onFocus: function onFocus() {
-          return setActiveIndex(index);
-        },
-        onKeyDown: function onKeyDown(event) {
-          if (event.key === backwardKey) {
-            event.preventDefault();
-            moveTabFocus(-1);
-          }
-
-          if (event.key === forwardKey) {
-            event.preventDefault();
-            moveTabFocus(1);
-          }
-
-          if (event.key === 'Home') {
-            event.preventDefault();
-            moveTabFocus(0);
-          }
-
-          if (event.key === 'End') {
-            event.preventDefault();
-            moveTabFocus(Children.count(children) - 1);
-          }
+      id: id + "-" + index,
+      isActive: index === activeIndex,
+      tabIndex: child.props.disabled ? undefined : index !== activeIndex ? -1 : 0,
+      onFocus: function onFocus() {
+        return setActiveIndex(index);
+      },
+      onKeyDown: function onKeyDown(event) {
+        if (event.key === backwardKey) {
+          event.preventDefault();
+          moveTabFocus(-1);
         }
-      });
-    }));
-  };
 
-  return TabList;
-}(Component);
+        if (event.key === forwardKey) {
+          event.preventDefault();
+          moveTabFocus(1);
+        }
 
-_defineProperty(TabList, "displayName", TABLIST_DISPLAY_NAME);
+        if (event.key === 'Home') {
+          event.preventDefault();
+          moveTabFocus(0);
+        }
 
-_defineProperty(TabList, "defaultProps", {
-  axis: 'horizontal'
-});
+        if (event.key === 'End') {
+          event.preventDefault();
+          moveTabFocus(Children.count(children) - 1);
+        }
+      }
+    });
+  }));
+}
 
+TabList.displayName = TABLIST_DISPLAY_NAME;
 export default TabList;

package/dist/esm/Tabs/TabPanel.js

@@ -2,10 +2,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
 import Box from '../Box';
+import { useThemeProps } from '../system';
 
 function TabPanel(props) {
-  var activeId = props.activeId,
-      restProps = _objectWithoutPropertiesLoose(props, ["activeId"]);
+  var _useThemeProps = useThemeProps('tabs.tabPanel', props),
+      activeId = _useThemeProps.activeId,
+      restProps = _objectWithoutPropertiesLoose(_useThemeProps, ["activeId"]);
 
   return /*#__PURE__*/React.createElement(Box, _extends({
     role: "tabpanel",

package/dist/esm/Tabs/TabPanels.js

@@ -1,35 +1,21 @@
 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, cloneElement } from 'react';
+import React, { cloneElement } from 'react';
 import Box from '../Box';
+import { useThemeProps } from '../system';
 export var TABPANELS_DISPLAY_NAME = 'TabPanels';
 
-var TabPanels = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(TabPanels, _Component);
+function TabPanels(props) {
+  var _useThemeProps = useThemeProps('tabs.tabPanels', props),
+      activeIndex = _useThemeProps.activeIndex,
+      children = _useThemeProps.children,
+      id = _useThemeProps.id,
+      restProps = _objectWithoutPropertiesLoose(_useThemeProps, ["activeIndex", "children", "id"]);
 
-  function TabPanels() {
-    return _Component.apply(this, arguments) || this;
-  }
-
-  var _proto = TabPanels.prototype;
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        activeIndex = _this$props.activeIndex,
-        children = _this$props.children,
-        id = _this$props.id,
-        restProps = _objectWithoutPropertiesLoose(_this$props, ["activeIndex", "children", "id"]);
-
-    var child = children[activeIndex];
-    return /*#__PURE__*/React.createElement(Box, restProps, child ? /*#__PURE__*/cloneElement(child, {
-      activeId: id + "-" + activeIndex
-    }) : null);
-  };
-
-  return TabPanels;
-}(Component);
-
-_defineProperty(TabPanels, "displayName", TABPANELS_DISPLAY_NAME);
+  var child = children[activeIndex];
+  return /*#__PURE__*/React.createElement(Box, restProps, child ? /*#__PURE__*/cloneElement(child, {
+    activeId: id + "-" + activeIndex
+  }) : null);
+}
 
+TabPanels.displayName = TABPANELS_DISPLAY_NAME;
 export default TabPanels;