@planningcenter/tapestry-react 2.1.1 → 2.2.0

package/dist/cjs/SegmentedControl/SegmentedControl.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 _Button = _interopRequireDefault(require("../Button"));
@@ -25,116 +19,100 @@ var _InputBox = _interopRequireDefault(require("../Input/InputBox"));
 
 var _system = require("../system");
 
-var SegmentedControl = /*#__PURE__*/function (_Component) {
-  (0, _inheritsLoose2["default"])(SegmentedControl, _Component);
-
-  function SegmentedControl(_props) {
-    var _this;
-
-    _this = _Component.call(this, _props) || this;
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getActiveIndex", function (props) {
-      return props.activeSegment === undefined ? 0 : props.segments.indexOf(props.activeSegment);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setInputBox", function (component) {
-      _this.inputBox = component;
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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);
+function SegmentedControl(props, ref) {
+  var getActiveIndex = (0, _react.useCallback)(function (props) {
+    return props.activeSegment === undefined ? 0 : props.segments.indexOf(props.activeSegment);
+  });
+  var inputBoxRef = (0, _react.useRef)(null);
+
+  var _useThemeProps = (0, _system.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 = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["activeSegment", "color", "disabled", "onChange", "segments", "segmentBasis", "size"]);
+
+  var _useState = (0, _react.useState)(getActiveIndex(props)),
+      activeIndex = _useState[0],
+      setActiveIndex = _useState[1];
+
+  var handleKeyDown = (0, _react.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 = (0, _react.useCallback)(function (index) {
+    var nextSegment = segments[index];
+
+    if (nextSegment) {
+      if (activeSegment === undefined) {
+        setActiveIndex(index);
       }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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)
-    };
-    return _this;
-  }
 
-  var _proto = SegmentedControl.prototype;
+      focus(index);
+    }
+  });
+  var focus = (0, _react.useCallback)(function (index) {
+    return inputBoxRef.current.focus(index);
+  });
+  var blur = (0, _react.useCallback)(function () {
+    return inputBoxRef.current.blur();
+  });
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      focus: focus,
+      blur: blur
+    };
+  });
+  (0, _react.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 = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["activeSegment", "color", "disabled", "onChange", "segments", "segmentBasis", "size"]);
-    var activeIndex = this.state.activeIndex;
-    return /*#__PURE__*/_react["default"].createElement(_InputBox["default"], (0, _extends2["default"])({
-      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 = (0, _objectWithoutPropertiesLoose2["default"])(segment, ["title"]);
-      var buttonProps = title ? restSegmentProps : {};
-      return /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
-        key: segmentIndex,
-        grow: 1,
-        size: (0, _system.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;
-}(_react.Component);
+  }, [activeSegment]);
+  return /*#__PURE__*/_react["default"].createElement(_InputBox["default"], (0, _extends2["default"])({
+    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 = (0, _objectWithoutPropertiesLoose2["default"])(segment, ["title"]);
+    var buttonProps = title ? restSegmentProps : {};
+    return /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+      key: segmentIndex,
+      grow: 1,
+      size: (0, _system.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__*/(0, _react.forwardRef)(SegmentedControl);
 var _default = SegmentedControl;
 exports["default"] = _default;

package/dist/cjs/SegmentedTabs/SegmentedTabs.js

@@ -7,12 +7,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
-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 _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
@@ -23,6 +17,8 @@ var _Text = _interopRequireDefault(require("../Text"));
 
 var _StackView = _interopRequireDefault(require("../StackView"));
 
+var _system = require("../system");
+
 function Tab(_ref) {
   var isSelected = _ref.isSelected,
       selectedColor = _ref.selectedColor,
@@ -47,46 +43,21 @@ function Tab(_ref) {
   }, restProps));
 }
 
-var SegmentedTabs = /*#__PURE__*/function (_Component) {
-  (0, _inheritsLoose2["default"])(SegmentedTabs, _Component);
-
-  function SegmentedTabs(props) {
-    var _this;
-
-    _this = _Component.call(this, props) || this;
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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 = (0, _system.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 = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["activeTab", "color", "getTabLabel", "onChange", "tabs", "tabProps"]);
 
-  _proto.getActiveIndex = function getActiveIndex(_ref2) {
+  var getActiveIndex = (0, _react.useCallback)(function (_ref2) {
     var activeTab = _ref2.activeTab,
         tabs = _ref2.tabs;
     var index;
@@ -104,46 +75,45 @@ 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 = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["activeTab", "color", "getTabLabel", "onChange", "tabs", "tabProps"]);
-    var activeIndex = this.state.activeIndex;
-    return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
-      role: "group",
-      axis: "horizontal",
-      distribution: "fill",
-      position: "relative"
-    }, restProps), tabs.map(function (tab, index) {
-      return /*#__PURE__*/_react["default"].createElement(Tab, (0, _extends2["default"])({
-        key: index,
-        index: index,
-        isSelected: index === activeIndex,
-        selectedColor: color,
-        onSelect: function onSelect() {
-          return _this2.setIndex(index);
-        }
-      }, tabProps), getTabLabel(tab));
-    }));
-  };
+  });
 
-  return SegmentedTabs;
-}(_react.Component);
+  var _useState = (0, _react.useState)(getActiveIndex(props)),
+      activeIndex = _useState[0],
+      setActiveIndex = _useState[1];
+
+  var setIndex = (0, _react.useCallback)(function (index) {
+    if (activeTab === undefined) {
+      setActiveIndex(index);
+    }
+
+    if (onChange) {
+      onChange(tabs[index]);
+    }
+  });
+  (0, _react.useEffect)(function () {
+    var newActiveIndex = getActiveIndex(props);
+
+    if (activeIndex !== newActiveIndex) {
+      setActiveIndex(newActiveIndex);
+    }
+  }, [activeTab]);
+  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    role: "group",
+    axis: "horizontal",
+    distribution: "fill",
+    position: "relative"
+  }, restProps), tabs.map(function (tab, index) {
+    return /*#__PURE__*/_react["default"].createElement(Tab, (0, _extends2["default"])({
+      key: index,
+      index: index,
+      isSelected: index === activeIndex,
+      selectedColor: color,
+      onSelect: function onSelect() {
+        return setIndex(index);
+      }
+    }, tabProps), getTabLabel(tab));
+  }));
+}
 
-(0, _defineProperty2["default"])(SegmentedTabs, "defaultProps", {
-  color: 'primary',
-  getTabLabel: function getTabLabel(tab) {
-    return tab;
-  }
-});
 var _default = SegmentedTabs;
 exports["default"] = _default;

package/dist/cjs/Tabs/Tab.js

@@ -15,13 +15,16 @@ var _StackView = _interopRequireDefault(require("../StackView"));
 
 var _hooks = require("../hooks");
 
+var _system = require("../system");
+
 function Tab(props) {
-  var axis = props.axis,
-      children = props.children,
-      disabled = props.disabled,
-      id = props.id,
-      isActive = props.isActive,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["axis", "children", "disabled", "id", "isActive"]);
+  var _useThemeProps = (0, _system.useThemeProps)('tabs.tab', props),
+      axis = _useThemeProps.axis,
+      children = _useThemeProps.children,
+      disabled = _useThemeProps.disabled,
+      id = _useThemeProps.id,
+      isActive = _useThemeProps.isActive,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["axis", "children", "disabled", "id", "isActive"]);
 
   var _useHover = (0, _hooks.useHover)(),
       hover = _useHover.hover,

package/dist/cjs/Tabs/TabList.js

@@ -11,82 +11,67 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _StackView = _interopRequireDefault(require("../StackView"));
 
+var _system = require("../system");
+
 var TABLIST_DISPLAY_NAME = 'TabList';
 exports.TABLIST_DISPLAY_NAME = TABLIST_DISPLAY_NAME;
 
-var TabList = /*#__PURE__*/function (_Component) {
-  (0, _inheritsLoose2["default"])(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 = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["activeIndex", "axis", "children", "id", "moveTabFocus", "setActiveIndex"]);
-    var backwardKey = axis === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
-    var forwardKey = axis === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
-    return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
-      role: "tablist",
-      "aria-orientation": axis,
+function TabList(props) {
+  var _useThemeProps = (0, _system.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 = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["activeIndex", "axis", "children", "id", "moveTabFocus", "setActiveIndex"]);
+
+  var backwardKey = axis === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+  var forwardKey = axis === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    role: "tablist",
+    "aria-orientation": axis,
+    axis: axis,
+    distribution: "fill"
+  }, restProps), _react.Children.map(children, function (child, index) {
+    return /*#__PURE__*/(0, _react.cloneElement)(child, {
       axis: axis,
-      distribution: "fill"
-    }, restProps), _react.Children.map(children, function (child, index) {
-      return /*#__PURE__*/(0, _react.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);
-          }
+      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 === 'Home') {
-            event.preventDefault();
-            moveTabFocus(0);
-          }
+        if (event.key === forwardKey) {
+          event.preventDefault();
+          moveTabFocus(1);
+        }
 
-          if (event.key === 'End') {
-            event.preventDefault();
-            moveTabFocus(_react.Children.count(children) - 1);
-          }
+        if (event.key === 'Home') {
+          event.preventDefault();
+          moveTabFocus(0);
         }
-      });
-    }));
-  };
 
-  return TabList;
-}(_react.Component);
+        if (event.key === 'End') {
+          event.preventDefault();
+          moveTabFocus(_react.Children.count(children) - 1);
+        }
+      }
+    });
+  }));
+}
 
-(0, _defineProperty2["default"])(TabList, "displayName", TABLIST_DISPLAY_NAME);
-(0, _defineProperty2["default"])(TabList, "defaultProps", {
-  axis: 'horizontal'
-});
+TabList.displayName = TABLIST_DISPLAY_NAME;
 var _default = TabList;
 exports["default"] = _default;

package/dist/cjs/Tabs/TabPanel.js

@@ -13,9 +13,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Box = _interopRequireDefault(require("../Box"));
 
+var _system = require("../system");
+
 function TabPanel(props) {
-  var activeId = props.activeId,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["activeId"]);
+  var _useThemeProps = (0, _system.useThemeProps)('tabs.tabPanel', props),
+      activeId = _useThemeProps.activeId,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["activeId"]);
+
   return /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
     role: "tabpanel",
     id: activeId + "-panel",

package/dist/cjs/Tabs/TabPanels.js

@@ -9,41 +9,28 @@ exports["default"] = exports.TABPANELS_DISPLAY_NAME = void 0;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _Box = _interopRequireDefault(require("../Box"));
 
+var _system = require("../system");
+
 var TABPANELS_DISPLAY_NAME = 'TabPanels';
 exports.TABPANELS_DISPLAY_NAME = TABPANELS_DISPLAY_NAME;
 
-var TabPanels = /*#__PURE__*/function (_Component) {
-  (0, _inheritsLoose2["default"])(TabPanels, _Component);
-
-  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 = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["activeIndex", "children", "id"]);
-    var child = children[activeIndex];
-    return /*#__PURE__*/_react["default"].createElement(_Box["default"], restProps, child ? /*#__PURE__*/(0, _react.cloneElement)(child, {
-      activeId: id + "-" + activeIndex
-    }) : null);
-  };
+function TabPanels(props) {
+  var _useThemeProps = (0, _system.useThemeProps)('tabs.tabPanels', props),
+      activeIndex = _useThemeProps.activeIndex,
+      children = _useThemeProps.children,
+      id = _useThemeProps.id,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["activeIndex", "children", "id"]);
 
-  return TabPanels;
-}(_react.Component);
+  var child = children[activeIndex];
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], restProps, child ? /*#__PURE__*/(0, _react.cloneElement)(child, {
+    activeId: id + "-" + activeIndex
+  }) : null);
+}
 
-(0, _defineProperty2["default"])(TabPanels, "displayName", TABPANELS_DISPLAY_NAME);
+TabPanels.displayName = TABPANELS_DISPLAY_NAME;
 var _default = TabPanels;
 exports["default"] = _default;