@carbon/react 1.27.0-rc.0 → 1.28.0-rc.0

package/lib/components/Tile/Tile.js

@@ -31,20 +31,17 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
-
-var _excluded = ["children", "className", "light"],
-    _excluded2 = ["children", "className", "clicked", "disabled", "href", "light", "onClick", "onKeyDown"],
-    _excluded3 = ["children", "className", "disabled", "id", "light", "name", "onClick", "onChange", "onKeyDown", "selected", "tabIndex", "title", "value"],
-    _excluded4 = ["tabIndex", "className", "children", "expanded", "tileMaxHeight", "tilePadding", "onClick", "onKeyUp", "tileCollapsedIconText", "tileExpandedIconText", "tileCollapsedLabel", "tileExpandedLabel", "light"];
-var Tile = /*#__PURE__*/React__default["default"].forwardRef(function Tile(_ref, ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      _ref$light = _ref.light,
-      light = _ref$light === void 0 ? false : _ref$light,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var tileClasses = cx__default["default"]("".concat(prefix, "--tile"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--tile--light"), light), className);
+const Tile = /*#__PURE__*/React__default["default"].forwardRef(function Tile(_ref, ref) {
+  let {
+    children,
+    className,
+    light = false,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const tileClasses = cx__default["default"](`${prefix}--tile`, {
+    [`${prefix}--tile--light`]: light
+  }, className);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: tileClasses,
     ref: ref
@@ -68,29 +65,24 @@ Tile.propTypes = {
    */
   light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `Tile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.')
 };
-var ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function ClickableTile(_ref2, ref) {
-  var _cx2;
-
-  var children = _ref2.children,
-      className = _ref2.className,
-      _ref2$clicked = _ref2.clicked,
-      clicked = _ref2$clicked === void 0 ? false : _ref2$clicked,
-      disabled = _ref2.disabled,
-      href = _ref2.href,
-      light = _ref2.light,
-      _ref2$onClick = _ref2.onClick,
-      onClick = _ref2$onClick === void 0 ? function () {} : _ref2$onClick,
-      _ref2$onKeyDown = _ref2.onKeyDown,
-      onKeyDown = _ref2$onKeyDown === void 0 ? function () {} : _ref2$onKeyDown,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
-
-  var prefix = usePrefix.usePrefix();
-  var classes = cx__default["default"]("".concat(prefix, "--tile"), "".concat(prefix, "--tile--clickable"), (_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--tile--is-clicked"), clicked), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--tile--light"), light), _cx2), className);
-
-  var _useState = React.useState(clicked),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      isSelected = _useState2[0],
-      setIsSelected = _useState2[1];
+const ClickableTile = /*#__PURE__*/React__default["default"].forwardRef(function ClickableTile(_ref2, ref) {
+  let {
+    children,
+    className,
+    clicked = false,
+    disabled,
+    href,
+    light,
+    onClick = () => {},
+    onKeyDown = () => {},
+    ...rest
+  } = _ref2;
+  const prefix = usePrefix.usePrefix();
+  const classes = cx__default["default"](`${prefix}--tile`, `${prefix}--tile--clickable`, {
+    [`${prefix}--tile--is-clicked`]: clicked,
+    [`${prefix}--tile--light`]: light
+  }, className);
+  const [isSelected, setIsSelected] = React.useState(clicked);
 
   function handleOnClick(evt) {
     evt.persist();
@@ -167,46 +159,33 @@ ClickableTile.propTypes = {
    */
   rel: PropTypes__default["default"].string
 };
-var SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(function SelectableTile(_ref3, ref) {
-  var _cx3;
-
-  var children = _ref3.children,
-      className = _ref3.className,
-      disabled = _ref3.disabled,
-      id = _ref3.id,
-      light = _ref3.light,
-      name = _ref3.name,
-      _ref3$onClick = _ref3.onClick,
-      onClick = _ref3$onClick === void 0 ? function () {} : _ref3$onClick,
-      _ref3$onChange = _ref3.onChange,
-      onChange = _ref3$onChange === void 0 ? function () {} : _ref3$onChange,
-      _ref3$onKeyDown = _ref3.onKeyDown,
-      onKeyDown = _ref3$onKeyDown === void 0 ? function () {} : _ref3$onKeyDown,
-      _ref3$selected = _ref3.selected,
-      selected = _ref3$selected === void 0 ? false : _ref3$selected,
-      _ref3$tabIndex = _ref3.tabIndex,
-      tabIndex = _ref3$tabIndex === void 0 ? 0 : _ref3$tabIndex,
-      _ref3$title = _ref3.title,
-      title = _ref3$title === void 0 ? 'title' : _ref3$title,
-      _ref3$value = _ref3.value,
-      value = _ref3$value === void 0 ? 'value' : _ref3$value,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded3);
-
-  var prefix = usePrefix.usePrefix();
-  var clickHandler = onClick;
-  var keyDownHandler = onKeyDown;
-
-  var _useState3 = React.useState(selected),
-      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      isSelected = _useState4[0],
-      setIsSelected = _useState4[1];
-
-  var _useState5 = React.useState(selected),
-      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-      prevSelected = _useState6[0],
-      setPrevSelected = _useState6[1];
-
-  var classes = cx__default["default"]("".concat(prefix, "--tile"), "".concat(prefix, "--tile--selectable"), (_cx3 = {}, _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--tile--is-selected"), isSelected), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--tile--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--tile--disabled"), disabled), _cx3), className); // TODO: rename to handleClick when handleClick prop is deprecated
+const SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(function SelectableTile(_ref3, ref) {
+  let {
+    children,
+    className,
+    disabled,
+    id,
+    light,
+    name,
+    onClick = () => {},
+    onChange = () => {},
+    onKeyDown = () => {},
+    selected = false,
+    tabIndex = 0,
+    title = 'title',
+    value = 'value',
+    ...rest
+  } = _ref3;
+  const prefix = usePrefix.usePrefix();
+  const clickHandler = onClick;
+  const keyDownHandler = onKeyDown;
+  const [isSelected, setIsSelected] = React.useState(selected);
+  const [prevSelected, setPrevSelected] = React.useState(selected);
+  const classes = cx__default["default"](`${prefix}--tile`, `${prefix}--tile--selectable`, {
+    [`${prefix}--tile--is-selected`]: isSelected,
+    [`${prefix}--tile--light`]: light,
+    [`${prefix}--tile--disabled`]: disabled
+  }, className); // TODO: rename to handleClick when handleClick prop is deprecated
 
   function handleOnClick(evt) {
     evt.preventDefault();
@@ -255,10 +234,10 @@ var SelectableTile = /*#__PURE__*/React__default["default"].forwardRef(function
     onChange: !disabled ? handleChange : null,
     title: title
   }, rest), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--tile__checkmark ").concat(prefix, "--tile__checkmark--persistent")
+    className: `${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent`
   }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React__default["default"].createElement(iconsReact.CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkbox, null))), /*#__PURE__*/React__default["default"].createElement("label", {
     htmlFor: id,
-    className: "".concat(prefix, "--tile-content")
+    className: `${prefix}--tile-content`
   }, children));
 });
 SelectableTile.displayName = 'SelectableTile';
@@ -329,65 +308,38 @@ SelectableTile.propTypes = {
    */
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]).isRequired
 };
-var ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(function ExpandableTile(_ref4, forwardRef) {
-  var _cx4, _cx5;
-
-  var tabIndex = _ref4.tabIndex,
-      className = _ref4.className,
-      children = _ref4.children,
-      expanded = _ref4.expanded,
-      tileMaxHeight = _ref4.tileMaxHeight,
-      tilePadding = _ref4.tilePadding,
-      onClick = _ref4.onClick,
-      onKeyUp = _ref4.onKeyUp,
-      tileCollapsedIconText = _ref4.tileCollapsedIconText,
-      tileExpandedIconText = _ref4.tileExpandedIconText,
-      tileCollapsedLabel = _ref4.tileCollapsedLabel,
-      tileExpandedLabel = _ref4.tileExpandedLabel,
-      light = _ref4.light,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref4, _excluded4);
-
-  var _useState7 = React.useState(tileMaxHeight),
-      _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-      isTileMaxHeight = _useState8[0],
-      setIsTileMaxHeight = _useState8[1];
-
-  var _useState9 = React.useState(tilePadding),
-      _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
-      isTilePadding = _useState10[0],
-      setIsTilePadding = _useState10[1];
-
-  var _useState11 = React.useState(expanded),
-      _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
-      prevExpanded = _useState12[0],
-      setPrevExpanded = _useState12[1];
-
-  var _useState13 = React.useState(tileMaxHeight),
-      _useState14 = _rollupPluginBabelHelpers.slicedToArray(_useState13, 2),
-      prevTileMaxHeight = _useState14[0],
-      setPrevTileMaxHeight = _useState14[1];
-
-  var _useState15 = React.useState(tilePadding),
-      _useState16 = _rollupPluginBabelHelpers.slicedToArray(_useState15, 2),
-      prevTilePadding = _useState16[0],
-      setPrevTilePadding = _useState16[1];
-
-  var _useState17 = React.useState(expanded),
-      _useState18 = _rollupPluginBabelHelpers.slicedToArray(_useState17, 2),
-      isExpanded = _useState18[0],
-      setIsExpanded = _useState18[1];
-
-  var _useState19 = React.useState(true),
-      _useState20 = _rollupPluginBabelHelpers.slicedToArray(_useState19, 2),
-      interactive = _useState20[0],
-      setInteractive = _useState20[1];
-
-  var aboveTheFold = React.useRef(null);
-  var belowTheFold = React.useRef(null);
-  var tileContent = React.useRef(null);
-  var tile = React.useRef(null);
-  var prefix = usePrefix.usePrefix();
-  var ref = useMergedRefs.useMergedRefs([forwardRef, tile]);
+const ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(function ExpandableTile(_ref4, forwardRef) {
+  let {
+    tabIndex,
+    className,
+    children,
+    expanded,
+    tileMaxHeight,
+    // eslint-disable-line
+    tilePadding,
+    // eslint-disable-line
+    onClick,
+    onKeyUp,
+    tileCollapsedIconText,
+    tileExpandedIconText,
+    tileCollapsedLabel,
+    tileExpandedLabel,
+    light,
+    ...rest
+  } = _ref4;
+  const [isTileMaxHeight, setIsTileMaxHeight] = React.useState(tileMaxHeight);
+  const [isTilePadding, setIsTilePadding] = React.useState(tilePadding);
+  const [prevExpanded, setPrevExpanded] = React.useState(expanded);
+  const [prevTileMaxHeight, setPrevTileMaxHeight] = React.useState(tileMaxHeight);
+  const [prevTilePadding, setPrevTilePadding] = React.useState(tilePadding);
+  const [isExpanded, setIsExpanded] = React.useState(expanded);
+  const [interactive, setInteractive] = React.useState(true);
+  const aboveTheFold = React.useRef(null);
+  const belowTheFold = React.useRef(null);
+  const tileContent = React.useRef(null);
+  const tile = React.useRef(null);
+  const prefix = usePrefix.usePrefix();
+  const ref = useMergedRefs.useMergedRefs([forwardRef, tile]);
 
   if (expanded !== prevExpanded) {
     setIsExpanded(expanded);
@@ -431,23 +383,30 @@ var ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(function
     return React__default["default"].Children.toArray(children);
   }
 
-  var classNames = cx__default["default"]("".concat(prefix, "--tile"), "".concat(prefix, "--tile--expandable"), (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--tile--is-expanded"), isExpanded), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--tile--light"), light), _cx4), className);
-  var interactiveClassNames = cx__default["default"]("".concat(prefix, "--tile"), "".concat(prefix, "--tile--expandable"), "".concat(prefix, "--tile--expandable--interactive"), (_cx5 = {}, _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--tile--is-expanded"), isExpanded), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--tile--light"), light), _cx5), className);
-  var chevronInteractiveClassNames = cx__default["default"]("".concat(prefix, "--tile__chevron"), "".concat(prefix, "--tile__chevron--interactive"));
-  var childrenAsArray = getChildren();
-  useIsomorphicEffect["default"](function () {
-    var getStyle = window.getComputedStyle(tile.current, null);
-    var node = aboveTheFold.current;
-
-    var _node$getBoundingClie = node.getBoundingClientRect(),
-        height = _node$getBoundingClie.height;
-
-    var paddingTop = parseInt(getStyle.getPropertyValue('padding-top'), 10);
-    var paddingBottom = parseInt(getStyle.getPropertyValue('padding-bottom'), 10);
+  const classNames = cx__default["default"](`${prefix}--tile`, `${prefix}--tile--expandable`, {
+    [`${prefix}--tile--is-expanded`]: isExpanded,
+    [`${prefix}--tile--light`]: light
+  }, className);
+  const interactiveClassNames = cx__default["default"](`${prefix}--tile`, `${prefix}--tile--expandable`, `${prefix}--tile--expandable--interactive`, {
+    [`${prefix}--tile--is-expanded`]: isExpanded,
+    [`${prefix}--tile--light`]: light
+  }, className);
+  const chevronInteractiveClassNames = cx__default["default"](`${prefix}--tile__chevron`, `${prefix}--tile__chevron--interactive`);
+  const childrenAsArray = getChildren();
+  useIsomorphicEffect["default"](() => {
+    const getStyle = window.getComputedStyle(tile.current, null);
+    const {
+      current: node
+    } = aboveTheFold;
+    const {
+      height
+    } = node.getBoundingClientRect();
+    const paddingTop = parseInt(getStyle.getPropertyValue('padding-top'), 10);
+    const paddingBottom = parseInt(getStyle.getPropertyValue('padding-bottom'), 10);
     setIsTileMaxHeight(height);
     setIsTilePadding(paddingTop + paddingBottom);
   }, [isTileMaxHeight]);
-  useIsomorphicEffect["default"](function () {
+  useIsomorphicEffect["default"](() => {
     if (!useNoInteractiveChildren.getInteractiveContent(belowTheFold.current)) {
       setInteractive(false);
       return;
@@ -455,24 +414,20 @@ var ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(function
       setInteractive(false);
     }
   }, []);
-  useIsomorphicEffect["default"](function () {
+  useIsomorphicEffect["default"](() => {
     if (isExpanded) {
       tile.current.style.maxHeight = null;
     } else {
       tile.current.style.maxHeight = isTileMaxHeight + isTilePadding + 'px';
     }
   }, [isExpanded, isTileMaxHeight, isTilePadding]);
-  React.useEffect(function () {
-    var resizeObserver = new ResizeObserver(function (entries) {
-      var _entries = _rollupPluginBabelHelpers.slicedToArray(entries, 1),
-          aboveTheFold = _entries[0];
-
+  React.useEffect(() => {
+    const resizeObserver = new ResizeObserver(entries => {
+      const [aboveTheFold] = entries;
       setIsTileMaxHeight(aboveTheFold.contentRect.height);
     });
     resizeObserver.observe(aboveTheFold.current);
-    return function () {
-      return resizeObserver.disconnect();
-    };
+    return () => resizeObserver.disconnect();
   }, []);
   return interactive ? /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     ref: ref,
@@ -482,7 +437,7 @@ var ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(function
     ref: tileContent
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     ref: aboveTheFold,
-    className: "".concat(prefix, "--tile-content")
+    className: `${prefix}--tile-content`
   }, childrenAsArray[0]), /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     "aria-expanded": isExpanded,
@@ -492,7 +447,7 @@ var ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(function
     className: chevronInteractiveClassNames
   }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, null))), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: belowTheFold,
-    className: "".concat(prefix, "--tile-content")
+    className: `${prefix}--tile-content`
   }, childrenAsArray[1]))) : /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
     type: "button",
     ref: ref,
@@ -507,12 +462,12 @@ var ExpandableTile = /*#__PURE__*/React__default["default"].forwardRef(function
     ref: tileContent
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     ref: aboveTheFold,
-    className: "".concat(prefix, "--tile-content")
+    className: `${prefix}--tile-content`
   }, childrenAsArray[0]), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--tile__chevron")
+    className: `${prefix}--tile__chevron`
   }, /*#__PURE__*/React__default["default"].createElement("span", null, isExpanded ? tileExpandedLabel : tileCollapsedLabel), _ChevronDown2 || (_ChevronDown2 = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, null))), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: belowTheFold,
-    className: "".concat(prefix, "--tile-content")
+    className: `${prefix}--tile-content`
   }, childrenAsArray[1])));
 });
 ExpandableTile.propTypes = {
@@ -582,17 +537,19 @@ ExpandableTile.defaultProps = {
   expanded: false,
   tileMaxHeight: 0,
   tilePadding: 0,
-  onClick: function onClick() {},
+  onClick: () => {},
   tileCollapsedIconText: 'Interact to expand Tile',
   tileExpandedIconText: 'Interact to collapse Tile'
 };
 ExpandableTile.displayName = 'ExpandableTile';
-var TileAboveTheFoldContent = /*#__PURE__*/React__default["default"].forwardRef(function TilAboveTheFoldContent(_ref5, ref) {
-  var children = _ref5.children;
-  var prefix = usePrefix.usePrefix();
+const TileAboveTheFoldContent = /*#__PURE__*/React__default["default"].forwardRef(function TilAboveTheFoldContent(_ref5, ref) {
+  let {
+    children
+  } = _ref5;
+  const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("span", {
     ref: ref,
-    className: "".concat(prefix, "--tile-content__above-the-fold")
+    className: `${prefix}--tile-content__above-the-fold`
   }, children);
 });
 TileAboveTheFoldContent.propTypes = {
@@ -602,12 +559,14 @@ TileAboveTheFoldContent.propTypes = {
   children: PropTypes__default["default"].node
 };
 TileAboveTheFoldContent.displayName = 'TileAboveTheFoldContent';
-var TileBelowTheFoldContent = /*#__PURE__*/React__default["default"].forwardRef(function TileBelowTheFoldContent(_ref6, ref) {
-  var children = _ref6.children;
-  var prefix = usePrefix.usePrefix();
+const TileBelowTheFoldContent = /*#__PURE__*/React__default["default"].forwardRef(function TileBelowTheFoldContent(_ref6, ref) {
+  let {
+    children
+  } = _ref6;
+  const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("span", {
     ref: ref,
-    className: "".concat(prefix, "--tile-content__below-the-fold")
+    className: `${prefix}--tile-content__below-the-fold`
   }, children);
 });
 TileBelowTheFoldContent.propTypes = {

package/lib/components/TileGroup/TileGroup.js

@@ -21,103 +21,88 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["value"];
+class TileGroup extends React__default["default"].Component {
+  constructor() {
+    super(...arguments);
 
-var TileGroup = /*#__PURE__*/function (_React$Component) {
-  _rollupPluginBabelHelpers.inherits(TileGroup, _React$Component);
-
-  var _super = _rollupPluginBabelHelpers.createSuper(TileGroup);
-
-  function TileGroup() {
-    var _this;
-
-    _rollupPluginBabelHelpers.classCallCheck(this, TileGroup);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "state", {
-      selected: _this.props.valueSelected || _this.props.defaultSelected || null,
-      prevValueSelected: _this.props.valueSelected
+    _rollupPluginBabelHelpers.defineProperty(this, "state", {
+      selected: this.props.valueSelected || this.props.defaultSelected || null,
+      prevValueSelected: this.props.valueSelected
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "getRadioTiles", function () {
-      var childrenArray = React__default["default"].Children.toArray(_this.props.children);
-      var children = childrenArray.map(function (tileRadio) {
-        var _tileRadio$props = tileRadio.props,
-            value = _tileRadio$props.value,
-            other = _rollupPluginBabelHelpers.objectWithoutProperties(_tileRadio$props, _excluded);
+    _rollupPluginBabelHelpers.defineProperty(this, "getRadioTiles", () => {
+      const childrenArray = React__default["default"].Children.toArray(this.props.children);
+      const children = childrenArray.map(tileRadio => {
+        const {
+          value,
+          ...other
+        } = tileRadio.props;
         /* istanbul ignore if */
 
-
         if (typeof tileRadio.props.checked !== 'undefined') {
-          process.env.NODE_ENV !== "production" ? warning.warning(false, "Instead of using the checked property on the RadioTile, set\n            the defaultSelected property or valueSelected property on the TileGroup.") : void 0;
+          process.env.NODE_ENV !== "production" ? warning.warning(false, `Instead of using the checked property on the RadioTile, set
+            the defaultSelected property or valueSelected property on the TileGroup.`) : void 0;
         }
 
         return /*#__PURE__*/React__default["default"].createElement(RadioTile["default"], _rollupPluginBabelHelpers["extends"]({}, other, {
-          name: _this.props.name,
+          name: this.props.name,
           key: value,
           value: value,
-          onChange: _this.handleChange,
-          checked: value === _this.state.selected
+          onChange: this.handleChange,
+          checked: value === this.state.selected
         }));
       });
       return children;
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleChange", function (newSelection, value, evt) {
-      if (newSelection !== _this.state.selected) {
-        _this.setState({
+    _rollupPluginBabelHelpers.defineProperty(this, "handleChange", (newSelection, value, evt) => {
+      if (newSelection !== this.state.selected) {
+        this.setState({
           selected: newSelection
         });
-
-        _this.props.onChange(newSelection, _this.props.name, evt);
+        this.props.onChange(newSelection, this.props.name, evt);
       }
     });
 
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "renderLegend", function (legend) {
+    _rollupPluginBabelHelpers.defineProperty(this, "renderLegend", legend => {
       if (legend) {
         return /*#__PURE__*/React__default["default"].createElement("legend", {
-          className: "".concat(_this.context, "--label")
+          className: `${this.context}--label`
         }, legend);
       }
     });
+  }
+
+  static getDerivedStateFromProps(_ref, state) {
+    let {
+      valueSelected,
+      defaultSelected
+    } = _ref;
+    const {
+      prevValueSelected
+    } = state;
+    return prevValueSelected === valueSelected ? null : {
+      selected: valueSelected || defaultSelected || null,
+      prevValueSelected: valueSelected
+    };
+  }
 
-    return _this;
+  render() {
+    const {
+      context: prefix
+    } = this;
+    const {
+      disabled,
+      className = `${prefix}--tile-group`,
+      legend
+    } = this.props;
+    return /*#__PURE__*/React__default["default"].createElement("fieldset", {
+      className: className,
+      disabled: disabled
+    }, this.renderLegend(legend), /*#__PURE__*/React__default["default"].createElement("div", null, this.getRadioTiles()));
   }
 
-  _rollupPluginBabelHelpers.createClass(TileGroup, [{
-    key: "render",
-    value: function render() {
-      var prefix = this.context;
-      var _this$props = this.props,
-          disabled = _this$props.disabled,
-          _this$props$className = _this$props.className,
-          className = _this$props$className === void 0 ? "".concat(prefix, "--tile-group") : _this$props$className,
-          legend = _this$props.legend;
-      return /*#__PURE__*/React__default["default"].createElement("fieldset", {
-        className: className,
-        disabled: disabled
-      }, this.renderLegend(legend), /*#__PURE__*/React__default["default"].createElement("div", null, this.getRadioTiles()));
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(_ref, state) {
-      var valueSelected = _ref.valueSelected,
-          defaultSelected = _ref.defaultSelected;
-      var prevValueSelected = state.prevValueSelected;
-      return prevValueSelected === valueSelected ? null : {
-        selected: valueSelected || defaultSelected || null,
-        prevValueSelected: valueSelected
-      };
-    }
-  }]);
-
-  return TileGroup;
-}(React__default["default"].Component);
+}
 
 _rollupPluginBabelHelpers.defineProperty(TileGroup, "contextType", usePrefix.PrefixContext);
 
@@ -167,7 +152,7 @@ _rollupPluginBabelHelpers.defineProperty(TileGroup, "propTypes", {
 _rollupPluginBabelHelpers.defineProperty(TileGroup, "defaultProps", {
   onChange:
   /* istanbul ignore next */
-  function onChange() {}
+  () => {}
 });
 
 exports["default"] = TileGroup;

package/lib/components/TileGroup/index.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var createClassWrapper = require('../../internal/createClassWrapper.js');
 var TileGroup$1 = require('./TileGroup.js');
 
-var TileGroup = createClassWrapper.createClassWrapper(TileGroup$1["default"]);
+const TileGroup = createClassWrapper.createClassWrapper(TileGroup$1["default"]);
 
 exports.TileGroup = TileGroup;
 exports["default"] = TileGroup;