@carbon/react 1.16.0-rc.0 → 1.17.0-rc.0

package/es/components/Tile/Tile.js

@@ -5,57 +5,42 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends, assertThisInitialized as _assertThisInitialized, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { Component, useState, useRef, useEffect } from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import Link from '../Link/Link.js';
 import { CheckboxCheckedFilled, Checkbox, ChevronDown } from '@carbon/icons-react';
+import Link from '../Link/Link.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { composeEventHandlers } from '../../tools/events.js';
-import { PrefixContext, usePrefix } from '../../internal/usePrefix.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
+import { getInteractiveContent } from '../../internal/useNoInteractiveChildren.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
-var _CheckboxCheckedFille, _Checkbox, _ChevronDown;
+var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
 
 var _excluded = ["children", "className", "light"],
-    _excluded2 = ["children", "href", "className", "handleClick", "handleKeyDown", "onClick", "onKeyDown", "clicked", "light"],
-    _excluded3 = ["children", "id", "tabIndex", "value", "name", "title", "iconDescription", "className", "handleClick", "handleKeyDown", "onClick", "onChange", "onKeyDown", "light", "disabled", "selected"],
-    _excluded4 = ["tabIndex", "className", "expanded", "tileMaxHeight", "tilePadding", "handleClick", "onKeyUp", "tileCollapsedIconText", "tileExpandedIconText", "tileCollapsedLabel", "tileExpandedLabel", "onBeforeClick", "light"];
-var Tile = /*#__PURE__*/function (_Component) {
-  _inherits(Tile, _Component);
-
-  var _super = _createSuper(Tile);
-
-  function Tile() {
-    _classCallCheck(this, Tile);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(Tile, [{
-    key: "render",
-    value: function render() {
-      var prefix = this.context;
-
-      var _this$props = this.props,
-          children = _this$props.children,
-          className = _this$props.className,
-          light = _this$props.light,
-          rest = _objectWithoutProperties(_this$props, _excluded);
-
-      var tileClasses = cx("".concat(prefix, "--tile"), _defineProperty({}, "".concat(prefix, "--tile--light"), light), className);
-      return /*#__PURE__*/React__default.createElement("div", _extends({
-        className: tileClasses
-      }, rest), children);
-    }
-  }]);
-
-  return Tile;
-}(Component);
-
-_defineProperty(Tile, "propTypes", {
+    _excluded2 = ["children", "className", "clicked", "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.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 = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var tileClasses = cx("".concat(prefix, "--tile"), _defineProperty({}, "".concat(prefix, "--tile--light"), light), className);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: tileClasses,
+    ref: ref
+  }, rest), children);
+});
+Tile.displayName = 'Tile';
+Tile.propTypes = {
   /**
    * The child nodes.
    */
@@ -70,114 +55,59 @@ _defineProperty(Tile, "propTypes", {
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
    */
-  light: PropTypes.bool
-});
-
-_defineProperty(Tile, "contextType", PrefixContext);
-
-_defineProperty(Tile, "defaultProps", {
-  light: false
-});
-
-var ClickableTile = /*#__PURE__*/function (_Component2) {
-  _inherits(ClickableTile, _Component2);
-
-  var _super2 = _createSuper(ClickableTile);
+  light: deprecate(PropTypes.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.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,
+      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 = _objectWithoutProperties(_ref2, _excluded2);
+
+  var prefix = usePrefix();
+  var classes = cx("".concat(prefix, "--tile"), "".concat(prefix, "--tile--clickable"), (_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--tile--is-clicked"), clicked), _defineProperty(_cx2, "".concat(prefix, "--tile--light"), light), _cx2), className);
+
+  var _useState = useState(clicked),
+      _useState2 = _slicedToArray(_useState, 2),
+      isSelected = _useState2[0],
+      setIsSelected = _useState2[1];
 
-  function ClickableTile() {
-    var _this;
+  function handleOnClick(evt) {
+    evt.persist();
+    setIsSelected(!isSelected);
+    onClick(evt);
+  }
 
-    _classCallCheck(this, ClickableTile);
+  function handleOnKeyDown(evt) {
+    evt.persist();
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    if (matches(evt, [Enter, Space])) {
+      evt.preventDefault();
+      setIsSelected(!isSelected);
+      onKeyDown(evt);
     }
 
-    _this = _super2.call.apply(_super2, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {});
-
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function (evt) {
-      evt.persist();
-
-      _this.setState({
-        clicked: !_this.state.clicked
-      }, function () {
-        var _this$props$handleCli, _this$props2, _this$props$onClick, _this$props3;
-
-        // TODO: Remove handleClick prop when handleClick is deprecated
-        ((_this$props$handleCli = (_this$props2 = _this.props).handleClick) === null || _this$props$handleCli === void 0 ? void 0 : _this$props$handleCli.call(_this$props2, evt)) || ((_this$props$onClick = (_this$props3 = _this.props).onClick) === null || _this$props$onClick === void 0 ? void 0 : _this$props$onClick.call(_this$props3, evt));
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (evt) {
-      evt.persist();
-
-      if (matches(evt, [Enter, Space])) {
-        _this.setState({
-          clicked: !_this.state.clicked
-        }, function () {
-          var _this$props$handleKey, _this$props4;
-
-          // TODO: Remove handleKeyDown prop when handleKeyDown is deprecated
-          ((_this$props$handleKey = (_this$props4 = _this.props).handleKeyDown) === null || _this$props$handleKey === void 0 ? void 0 : _this$props$handleKey.call(_this$props4, evt)) || _this.props.onKeyDown(evt);
-        });
-      } else {
-        var _this$props$handleKey2, _this$props5;
-
-        // TODO: Remove handleKeyDown prop when handleKeyDown is deprecated
-        ((_this$props$handleKey2 = (_this$props5 = _this.props).handleKeyDown) === null || _this$props$handleKey2 === void 0 ? void 0 : _this$props$handleKey2.call(_this$props5, evt)) || _this.props.onKeyDown(evt);
-      }
-    });
-
-    return _this;
+    onKeyDown(evt);
   }
 
-  _createClass(ClickableTile, [{
-    key: "render",
-    value: function render() {
-      var _cx2;
-
-      var prefix = this.context;
-
-      var _this$props6 = this.props,
-          children = _this$props6.children,
-          href = _this$props6.href,
-          className = _this$props6.className;
-          _this$props6.handleClick;
-          _this$props6.handleKeyDown;
-          _this$props6.onClick;
-          _this$props6.onKeyDown;
-          _this$props6.clicked;
-          var light = _this$props6.light,
-          rest = _objectWithoutProperties(_this$props6, _excluded2);
-
-      var classes = cx("".concat(prefix, "--tile"), "".concat(prefix, "--tile--clickable"), (_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--tile--is-clicked"), this.state.clicked), _defineProperty(_cx2, "".concat(prefix, "--tile--light"), light), _cx2), className);
-      return /*#__PURE__*/React__default.createElement(Link, _extends({
-        href: href,
-        className: classes
-      }, rest, {
-        onClick: this.handleClick,
-        onKeyDown: this.handleKeyDown
-      }), children);
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: // eslint-disable-next-line react/prop-types
-    function getDerivedStateFromProps(_ref, state) {
-      var clicked = _ref.clicked;
-      var prevClicked = state.prevClicked;
-      return prevClicked === clicked ? null : {
-        clicked: clicked,
-        prevClicked: clicked
-      };
-    }
-  }]);
-
-  return ClickableTile;
-}(Component);
-
-_defineProperty(ClickableTile, "propTypes", {
+  return /*#__PURE__*/React__default.createElement(Link, _extends({
+    className: classes,
+    href: href,
+    onClick: handleOnClick,
+    onKeyDown: handleOnKeyDown,
+    ref: ref
+  }, rest), children);
+});
+ClickableTile.displayName = 'ClickableTile';
+ClickableTile.propTypes = {
   /**
    * The child nodes.
    */
@@ -189,14 +119,9 @@ _defineProperty(ClickableTile, "propTypes", {
   className: PropTypes.string,
 
   /**
-   * Deprecated in v11. Use 'onClick' instead.
-   */
-  handleClick: deprecate(PropTypes.func, 'The handleClick prop for ClickableTile has been deprecated in favor of onClick. It will be removed in the next major release.'),
-
-  /**
-   * Specify the function to run when the ClickableTile is interacted with via a keyboard
+   * Boolean for whether a tile has been clicked.
    */
-  handleKeyDown: deprecate(PropTypes.func, 'The handleKeyDown prop for ClickableTile has been deprecated in favor of onKeyDown. It will be removed in the next major release.'),
+  clicked: PropTypes.bool,
 
   /**
    * The href for the link.
@@ -207,7 +132,7 @@ _defineProperty(ClickableTile, "propTypes", {
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
    */
-  light: PropTypes.bool,
+  light: deprecate(PropTypes.bool, 'The `light` prop for `ClickableTile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
 
   /**
    * Specify the function to run when the ClickableTile is clicked
@@ -223,52 +148,47 @@ _defineProperty(ClickableTile, "propTypes", {
    * The rel property for the link.
    */
   rel: PropTypes.string
-});
-
-_defineProperty(ClickableTile, "contextType", PrefixContext);
-
-_defineProperty(ClickableTile, "defaultProps", {
-  clicked: false,
-  onClick: function onClick() {},
-  onKeyDown: function onKeyDown() {},
-  light: false
-});
-
-function SelectableTile(props) {
+};
+var SelectableTile = /*#__PURE__*/React__default.forwardRef(function SelectableTile(_ref3, ref) {
   var _cx3;
 
-  var children = props.children,
-      id = props.id,
-      tabIndex = props.tabIndex,
-      value = props.value,
-      name = props.name,
-      title = props.title;
-      props.iconDescription;
-      var className = props.className,
-      handleClick = props.handleClick,
-      handleKeyDown = props.handleKeyDown,
-      onClick = props.onClick,
-      onChange = props.onChange,
-      onKeyDown = props.onKeyDown,
-      light = props.light,
-      disabled = props.disabled,
-      selected = props.selected,
-      rest = _objectWithoutProperties(props, _excluded3);
-
-  var prefix = usePrefix(); // TODO: replace with onClick when handleClick prop is deprecated
-
-  var clickHandler = handleClick || onClick; // TODO: replace with onKeyDown when handleKeyDown prop is deprecated
-
-  var keyDownHandler = handleKeyDown || onKeyDown;
-
-  var _useState = useState(selected),
-      _useState2 = _slicedToArray(_useState, 2),
-      isSelected = _useState2[0],
-      setIsSelected = _useState2[1];
-
-  var input = useRef(null);
-  var classes = cx("".concat(prefix, "--tile"), "".concat(prefix, "--tile--selectable"), (_cx3 = {}, _defineProperty(_cx3, "".concat(prefix, "--tile--is-selected"), isSelected), _defineProperty(_cx3, "".concat(prefix, "--tile--light"), light), _defineProperty(_cx3, "".concat(prefix, "--tile--disabled"), disabled), _cx3), className);
-  var inputClasses = cx("".concat(prefix, "--tile-input"), _defineProperty({}, "".concat(prefix, "--tile-input--checked"), isSelected)); // TODO: rename to handleClick when handleClick prop is deprecated
+  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 = _objectWithoutProperties(_ref3, _excluded3);
+
+  var prefix = usePrefix();
+  var clickHandler = onClick;
+  var keyDownHandler = onKeyDown;
+
+  var _useState3 = useState(selected),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isSelected = _useState4[0],
+      setIsSelected = _useState4[1];
+
+  var _useState5 = useState(selected),
+      _useState6 = _slicedToArray(_useState5, 2),
+      prevSelected = _useState6[0],
+      setPrevSelected = _useState6[1];
+
+  var classes = cx("".concat(prefix, "--tile"), "".concat(prefix, "--tile--selectable"), (_cx3 = {}, _defineProperty(_cx3, "".concat(prefix, "--tile--is-selected"), isSelected), _defineProperty(_cx3, "".concat(prefix, "--tile--light"), light), _defineProperty(_cx3, "".concat(prefix, "--tile--disabled"), disabled), _cx3), className); // TODO: rename to handleClick when handleClick prop is deprecated
 
   function handleOnClick(evt) {
     evt.preventDefault();
@@ -296,45 +216,34 @@ function SelectableTile(props) {
     onChange(event);
   }
 
-  useEffect(function () {
+  if (selected !== prevSelected) {
     setIsSelected(selected);
-  }, [selected]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("input", {
-    ref: input,
-    tabIndex: -1,
-    id: id,
-    className: inputClasses,
-    value: value,
-    onChange: !disabled ? handleChange : null,
-    type: "checkbox",
+    setPrevSelected(selected);
+  }
+
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classes,
+    onClick: !disabled ? handleOnClick : null,
+    role: "checkbox",
+    "aria-checked": isSelected,
     disabled: disabled,
-    name: name,
-    title: title,
-    checked: isSelected
-  }), /*#__PURE__*/React__default.createElement("label", _extends({
-    htmlFor: id,
-    className: classes // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    onKeyDown: !disabled ? handleOnKeyDown : null // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     ,
-    tabIndex: !disabled ? tabIndex : null
-  }, rest, {
-    onClick: !disabled ? handleOnClick : null,
-    onKeyDown: !disabled ? handleOnKeyDown : null
-  }), /*#__PURE__*/React__default.createElement("span", {
+    tabIndex: !disabled ? tabIndex : null,
+    value: value,
+    name: name,
+    ref: ref,
+    id: id,
+    onChange: !disabled ? handleChange : null,
+    title: title
+  }, rest), /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(prefix, "--tile__checkmark ").concat(prefix, "--tile__checkmark--persistent")
-  }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React__default.createElement(CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React__default.createElement(Checkbox, null))), /*#__PURE__*/React__default.createElement("span", {
+  }, isSelected ? _CheckboxCheckedFille || (_CheckboxCheckedFille = /*#__PURE__*/React__default.createElement(CheckboxCheckedFilled, null)) : _Checkbox || (_Checkbox = /*#__PURE__*/React__default.createElement(Checkbox, null))), /*#__PURE__*/React__default.createElement("label", {
+    htmlFor: id,
     className: "".concat(prefix, "--tile-content")
-  }, children)));
-}
-SelectableTile.defaultProps = {
-  value: 'value',
-  title: 'title',
-  selected: false,
-  tabIndex: 0,
-  light: false,
-  onClick: function onClick() {},
-  onChange: function onChange() {},
-  onKeyDown: function onKeyDown() {}
-};
+  }, children));
+});
+SelectableTile.displayName = 'SelectableTile';
 SelectableTile.propTypes = {
   /**
    * The child nodes.
@@ -351,21 +260,6 @@ SelectableTile.propTypes = {
    */
   disabled: PropTypes.bool,
 
-  /**
-   * Specify the function to run when the SelectableTile is clicked
-   */
-  handleClick: deprecate(PropTypes.func, 'The `handleClick` prop for `SelectableTile` has been deprecated in favor of `onClick`. It will be removed in the next major release.'),
-
-  /**
-   * Specify the function to run when the SelectableTile is interacted with via a keyboard
-   */
-  handleKeyDown: deprecate(PropTypes.func, 'The `handleKeyDown` prop for `SelectableTile` has been deprecated in favor of `onKeyDown`. It will be removed in the next major release.'),
-
-  /**
-   * The description of the checkmark icon.
-   */
-  iconDescription: deprecate(PropTypes.string, 'The `iconDescription` prop for `SelectableTile` is no longer needed and has ' + 'been deprecated. It will be removed in the next major release.'),
-
   /**
    * The ID of the `<input>`.
    */
@@ -375,7 +269,7 @@ SelectableTile.propTypes = {
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
    */
-  light: PropTypes.bool,
+  light: deprecate(PropTypes.bool, 'The `light` prop for `SelectableTile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
 
   /**
    * The `name` of the `<input>`.
@@ -417,197 +311,194 @@ SelectableTile.propTypes = {
    */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
 };
-var ExpandableTile = /*#__PURE__*/function (_Component3) {
-  _inherits(ExpandableTile, _Component3);
-
-  var _super3 = _createSuper(ExpandableTile);
+function ExpandableTile(_ref4) {
+  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 = _objectWithoutProperties(_ref4, _excluded4);
+
+  var _useState7 = useState(tileMaxHeight),
+      _useState8 = _slicedToArray(_useState7, 2),
+      isTileMaxHeight = _useState8[0],
+      setIsTileMaxHeight = _useState8[1];
+
+  var _useState9 = useState(tilePadding),
+      _useState10 = _slicedToArray(_useState9, 2),
+      isTilePadding = _useState10[0],
+      setIsTilePadding = _useState10[1];
+
+  var _useState11 = useState(expanded),
+      _useState12 = _slicedToArray(_useState11, 2),
+      prevExpanded = _useState12[0],
+      setPrevExpanded = _useState12[1];
+
+  var _useState13 = useState(tileMaxHeight),
+      _useState14 = _slicedToArray(_useState13, 2),
+      prevTileMaxHeight = _useState14[0],
+      setPrevTileMaxHeight = _useState14[1];
+
+  var _useState15 = useState(tilePadding),
+      _useState16 = _slicedToArray(_useState15, 2),
+      prevTilePadding = _useState16[0],
+      setPrevTilePadding = _useState16[1];
+
+  var _useState17 = useState(expanded),
+      _useState18 = _slicedToArray(_useState17, 2),
+      isExpanded = _useState18[0],
+      setIsExpanded = _useState18[1];
+
+  var _useState19 = useState(false),
+      _useState20 = _slicedToArray(_useState19, 2),
+      interactive = _useState20[0],
+      setInteractive = _useState20[1];
+
+  var aboveTheFold = useRef(null);
+  var belowTheFold = useRef(null);
+  var tileContent = useRef(null);
+  var tile = useRef(null);
+  var prefix = usePrefix();
+
+  if (expanded !== prevExpanded) {
+    setIsExpanded(expanded);
+    setPrevExpanded(expanded);
+    setMaxHeight();
+  }
 
-  function ExpandableTile() {
-    var _this2;
+  if (tileMaxHeight !== prevTileMaxHeight) {
+    setIsTileMaxHeight(tileMaxHeight);
+    setPrevTileMaxHeight(tileMaxHeight);
+  }
 
-    _classCallCheck(this, ExpandableTile);
+  if (tilePadding !== prevTilePadding) {
+    setIsTilePadding(tilePadding);
+    setPrevTilePadding(tilePadding);
+  }
 
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
+  function setMaxHeight() {
+    if (isExpanded) {
+      setIsTileMaxHeight(tileContent.current.getBoundingClientRect().height);
     }
 
-    _this2 = _super3.call.apply(_super3, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this2), "state", {});
-
-    _defineProperty(_assertThisInitialized(_this2), "resizeObserver", null);
-
-    _defineProperty(_assertThisInitialized(_this2), "componentDidMount", function () {
-      _this2.resizeObserver = new ResizeObserver(function (entries) {
-        var _entries = _slicedToArray(entries, 1),
-            aboveTheFold = _entries[0];
-
-        _this2.setState({
-          tileMaxHeight: aboveTheFold.contentRect.height
-        });
-      });
-
-      if (_this2.tile) {
-        var getStyle = window.getComputedStyle(_this2.tile, null);
-
-        if (_this2.aboveTheFold) {
-          _this2.resizeObserver.observe(_this2.aboveTheFold);
-
-          _this2.setState({
-            tileMaxHeight: _this2.aboveTheFold.getBoundingClientRect().height,
-            tilePadding: parseInt(getStyle.getPropertyValue('padding-top'), 10) + parseInt(getStyle.getPropertyValue('padding-bottom'), 10)
-          });
-        }
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this2), "componentDidUpdate", function (prevProps) {
-      if (prevProps.expanded !== _this2.props.expanded) {
-        _this2.setMaxHeight();
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this2), "setMaxHeight", function () {
-      if (_this2.state.expanded ? _this2.tileContent : _this2.aboveTheFold) {
-        _this2.setState({
-          tileMaxHeight: _this2.state.expanded ? _this2.tileContent.getBoundingClientRect().height : _this2.aboveTheFold.getBoundingClientRect().height
-        });
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this2), "handleClick", function (evt) {
-      if (!_this2.props.onBeforeClick(evt) || evt.target.tagName === 'INPUT') {
-        return;
-      }
-
-      evt.persist();
-
-      _this2.setState({
-        expanded: !_this2.state.expanded
-      }, function () {
-        var _this2$props$handleCl, _this2$props, _this2$props$onClick, _this2$props2;
-
-        _this2.setMaxHeight(); // TODO: Remove handleClick prop when handleClick is deprecated
+    setIsTileMaxHeight(aboveTheFold.current.getBoundingClientRect().height);
+  }
 
+  function handleClick(evt) {
+    evt.persist();
+    setIsExpanded(!isExpanded);
+    setMaxHeight();
 
-        ((_this2$props$handleCl = (_this2$props = _this2.props).handleClick) === null || _this2$props$handleCl === void 0 ? void 0 : _this2$props$handleCl.call(_this2$props, evt)) || ((_this2$props$onClick = (_this2$props2 = _this2.props).onClick) === null || _this2$props$onClick === void 0 ? void 0 : _this2$props$onClick.call(_this2$props2, evt));
-      });
-    });
+    if (onClick) {
+      onClick(evt);
+    }
+  }
 
-    _defineProperty(_assertThisInitialized(_this2), "handleKeyUp", function (evt) {
-      if (evt.target !== _this2.tile) {
-        if (matches(evt, [Enter, Space])) {
-          evt.preventDefault();
-        }
+  function handleKeyUp(evt) {
+    if (evt.target !== tile.current) {
+      if (matches(evt, [Enter, Space])) {
+        evt.preventDefault();
       }
-    });
-
-    _defineProperty(_assertThisInitialized(_this2), "getChildren", function () {
-      return React__default.Children.toArray(_this2.props.children);
-    });
+    }
+  }
 
-    return _this2;
+  function getChildren() {
+    return React__default.Children.toArray(children);
   }
 
-  _createClass(ExpandableTile, [{
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.resizeObserver) {
-        this.resizeObserver.disconnect();
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _cx5,
-          _this3 = this;
-
-      var _this$props7 = this.props,
-          tabIndex = _this$props7.tabIndex,
-          className = _this$props7.className;
-          _this$props7.expanded;
-          _this$props7.tileMaxHeight;
-          _this$props7.tilePadding;
-          _this$props7.handleClick;
-          var onKeyUp = _this$props7.onKeyUp,
-          tileCollapsedIconText = _this$props7.tileCollapsedIconText,
-          tileExpandedIconText = _this$props7.tileExpandedIconText,
-          tileCollapsedLabel = _this$props7.tileCollapsedLabel,
-          tileExpandedLabel = _this$props7.tileExpandedLabel;
-          _this$props7.onBeforeClick;
-          var light = _this$props7.light,
-          rest = _objectWithoutProperties(_this$props7, _excluded4);
-
-      var prefix = this.context;
-      var isExpanded = this.state.expanded;
-      var classes = cx("".concat(prefix, "--tile"), "".concat(prefix, "--tile--expandable"), (_cx5 = {}, _defineProperty(_cx5, "".concat(prefix, "--tile--is-expanded"), isExpanded), _defineProperty(_cx5, "".concat(prefix, "--tile--light"), light), _cx5), className);
-      var tileStyle = {
-        maxHeight: isExpanded ? null : this.state.tileMaxHeight + this.state.tilePadding
-      };
-      var childrenAsArray = this.getChildren();
-      return (
-        /*#__PURE__*/
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-        React__default.createElement("button", _extends({
-          type: "button",
-          ref: function ref(tile) {
-            _this3.tile = tile;
-          },
-          style: tileStyle,
-          className: classes,
-          "aria-expanded": isExpanded,
-          title: isExpanded ? tileExpandedIconText : tileCollapsedIconText
-        }, rest, {
-          onKeyUp: composeEventHandlers([onKeyUp, this.handleKeyUp]),
-          onClick: this.handleClick,
-          tabIndex: tabIndex
-        }), /*#__PURE__*/React__default.createElement("div", {
-          ref: function ref(tileContent) {
-            _this3.tileContent = tileContent;
-          }
-        }, /*#__PURE__*/React__default.createElement("div", {
-          ref: function ref(aboveTheFold) {
-            _this3.aboveTheFold = aboveTheFold;
-          },
-          className: "".concat(prefix, "--tile-content")
-        }, childrenAsArray[0]), /*#__PURE__*/React__default.createElement("div", {
-          className: "".concat(prefix, "--tile__chevron")
-        }, /*#__PURE__*/React__default.createElement("span", null, isExpanded ? tileExpandedLabel : tileCollapsedLabel), _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default.createElement(ChevronDown, null))), /*#__PURE__*/React__default.createElement("div", {
-          className: "".concat(prefix, "--tile-content")
-        }, childrenAsArray[1])))
-      );
+  var classNames = cx("".concat(prefix, "--tile"), "".concat(prefix, "--tile--expandable"), (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--tile--is-expanded"), isExpanded), _defineProperty(_cx4, "".concat(prefix, "--tile--light"), light), _cx4), className);
+  var interactiveClassNames = cx("".concat(prefix, "--tile"), "".concat(prefix, "--tile--expandable"), "".concat(prefix, "--tile--expandable--interactive"), (_cx5 = {}, _defineProperty(_cx5, "".concat(prefix, "--tile--is-expanded"), isExpanded), _defineProperty(_cx5, "".concat(prefix, "--tile--light"), light), _cx5), className);
+  var chevronInteractiveClassNames = cx("".concat(prefix, "--tile__chevron"), "".concat(prefix, "--tile__chevron--interactive"));
+  var tileStyle = {
+    maxHeight: isExpanded ? null : isTileMaxHeight + isTilePadding
+  };
+  var childrenAsArray = getChildren();
+  useIsomorphicEffect(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);
+    setIsTileMaxHeight(height);
+    setIsTilePadding(paddingTop + paddingBottom);
+  }, []);
+  useIsomorphicEffect(function () {
+    if (getInteractiveContent(belowTheFold.current)) {
+      setInteractive(true);
+      return;
+    } else if (getInteractiveContent(aboveTheFold.current)) {
+      setInteractive(true);
     }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps( // eslint-disable-next-line react/prop-types
-    _ref2, state) {
-      var expanded = _ref2.expanded,
-          tileMaxHeight = _ref2.tileMaxHeight,
-          tilePadding = _ref2.tilePadding;
-      var prevExpanded = state.prevExpanded,
-          prevTileMaxHeight = state.prevTileMaxHeight,
-          prevTilePadding = state.prevTilePadding,
-          currentExpanded = state.expanded,
-          currentTileMaxHeight = state.tileMaxHeight,
-          currentTilePadding = state.tilePadding;
-      var expandedChanged = prevExpanded !== expanded;
-      var tileMaxHeightChanged = prevTileMaxHeight !== tileMaxHeight;
-      var tilePaddingChanged = prevTilePadding !== tilePadding;
-      return !expandedChanged && !tileMaxHeightChanged && !tilePaddingChanged ? null : {
-        expanded: !expandedChanged ? currentExpanded : expanded,
-        tileMaxHeight: !tileMaxHeightChanged ? currentTileMaxHeight : tileMaxHeight,
-        tilePadding: !tilePaddingChanged ? currentTilePadding : tilePadding,
-        prevExpanded: expanded,
-        prevTileMaxHeight: tileMaxHeight,
-        prevTilePadding: tilePadding
-      };
-    }
-  }]);
-
-  return ExpandableTile;
-}(Component);
+  }, []);
+  useEffect(function () {
+    var resizeObserver = new ResizeObserver(function (entries) {
+      var _entries = _slicedToArray(entries, 1),
+          aboveTheFold = _entries[0];
 
-_defineProperty(ExpandableTile, "propTypes", {
+      setIsTileMaxHeight(aboveTheFold.contentRect.height);
+    });
+    resizeObserver.observe(aboveTheFold.current);
+    return function () {
+      return resizeObserver.disconnect();
+    };
+  }, []);
+  return interactive ? /*#__PURE__*/React__default.createElement("div", _extends({
+    ref: tile,
+    style: tileStyle,
+    className: interactiveClassNames,
+    "aria-expanded": isExpanded
+  }, rest), /*#__PURE__*/React__default.createElement("div", {
+    ref: tileContent
+  }, /*#__PURE__*/React__default.createElement("div", {
+    ref: aboveTheFold,
+    className: "".concat(prefix, "--tile-content")
+  }, childrenAsArray[0]), /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    "aria-expanded": isExpanded,
+    onKeyUp: composeEventHandlers([onKeyUp, handleKeyUp]),
+    onClick: composeEventHandlers([onClick, handleClick]),
+    "aria-label": isExpanded ? tileExpandedIconText : tileCollapsedIconText,
+    className: chevronInteractiveClassNames
+  }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default.createElement(ChevronDown, null))), /*#__PURE__*/React__default.createElement("div", {
+    ref: belowTheFold,
+    className: "".concat(prefix, "--tile-content")
+  }, childrenAsArray[1]))) : /*#__PURE__*/React__default.createElement("button", _extends({
+    type: "button",
+    ref: tile,
+    style: tileStyle,
+    className: classNames,
+    "aria-expanded": isExpanded,
+    title: isExpanded ? tileExpandedIconText : tileCollapsedIconText
+  }, rest, {
+    onKeyUp: composeEventHandlers([onKeyUp, handleKeyUp]),
+    onClick: composeEventHandlers([onClick, handleClick]),
+    tabIndex: tabIndex
+  }), /*#__PURE__*/React__default.createElement("div", {
+    ref: tileContent
+  }, /*#__PURE__*/React__default.createElement("div", {
+    ref: aboveTheFold,
+    className: "".concat(prefix, "--tile-content")
+  }, childrenAsArray[0]), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--tile__chevron")
+  }, /*#__PURE__*/React__default.createElement("span", null, isExpanded ? tileExpandedLabel : tileCollapsedLabel), _ChevronDown2 || (_ChevronDown2 = /*#__PURE__*/React__default.createElement(ChevronDown, null))), /*#__PURE__*/React__default.createElement("div", {
+    ref: belowTheFold,
+    className: "".concat(prefix, "--tile-content")
+  }, childrenAsArray[1])));
+}
+ExpandableTile.propTypes = {
   /**
    * The child nodes.
    */
@@ -623,11 +514,6 @@ _defineProperty(ExpandableTile, "propTypes", {
    */
   expanded: PropTypes.bool,
 
-  /**
-   * Deprecated in v11. Use 'onClick' instead.
-   */
-  handleClick: deprecate(PropTypes.func, 'The handleClick prop for ExpandableTile has been deprecated in favor of onClick. It will be removed in the next major release.'),
-
   /**
    * An ID that can be provided to aria-labelledby
    */
@@ -637,16 +523,11 @@ _defineProperty(ExpandableTile, "propTypes", {
    * `true` to use the light version. For use on $ui-01 backgrounds only.
    * Don't use this to make tile background color same as container background color.
    */
-  light: PropTypes.bool,
-
-  /**
-   * optional handler to decide whether to ignore a click. returns false if click should be ignored
-   */
-  onBeforeClick: PropTypes.func,
+  light: deprecate(PropTypes.bool, 'The `light` prop for `ExpandableTile` is no longer needed and has been deprecated. It will be removed in the next major release. Use the Layer component instead.'),
 
   /**
    * Specify the function to run when the ExpandableTile is clicked
-    */
+   */
   onClick: PropTypes.func,
 
   /**
@@ -678,90 +559,46 @@ _defineProperty(ExpandableTile, "propTypes", {
    * When "expanded", a label to appear next to the chevron (e.g., "View less").
    */
   tileExpandedLabel: PropTypes.string
-});
-
-_defineProperty(ExpandableTile, "contextType", PrefixContext);
-
-_defineProperty(ExpandableTile, "defaultProps", {
+};
+ExpandableTile.defaultProps = {
   tabIndex: 0,
   expanded: false,
   tileMaxHeight: 0,
   tilePadding: 0,
-  onBeforeClick: function onBeforeClick() {
-    return true;
-  },
   onClick: function onClick() {},
   tileCollapsedIconText: 'Interact to expand Tile',
-  tileExpandedIconText: 'Interact to collapse Tile',
-  light: false
+  tileExpandedIconText: 'Interact to collapse Tile'
+};
+ExpandableTile.displayName = 'ExpandableTile';
+var TileAboveTheFoldContent = /*#__PURE__*/React__default.forwardRef(function TilAboveTheFoldContent(_ref5, ref) {
+  var children = _ref5.children;
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement("span", {
+    ref: ref,
+    className: "".concat(prefix, "--tile-content__above-the-fold")
+  }, children);
 });
-
-var TileAboveTheFoldContent = /*#__PURE__*/function (_Component4) {
-  _inherits(TileAboveTheFoldContent, _Component4);
-
-  var _super4 = _createSuper(TileAboveTheFoldContent);
-
-  function TileAboveTheFoldContent() {
-    _classCallCheck(this, TileAboveTheFoldContent);
-
-    return _super4.apply(this, arguments);
-  }
-
-  _createClass(TileAboveTheFoldContent, [{
-    key: "render",
-    value: function render() {
-      var prefix = this.context;
-      var children = this.props.children;
-      return /*#__PURE__*/React__default.createElement("span", {
-        className: "".concat(prefix, "--tile-content__above-the-fold")
-      }, children);
-    }
-  }]);
-
-  return TileAboveTheFoldContent;
-}(Component);
-
-_defineProperty(TileAboveTheFoldContent, "propTypes", {
+TileAboveTheFoldContent.propTypes = {
   /**
    * The child nodes.
    */
   children: PropTypes.node
+};
+TileAboveTheFoldContent.displayName = 'TileAboveTheFoldContent';
+var TileBelowTheFoldContent = /*#__PURE__*/React__default.forwardRef(function TileBelowTheFoldContent(_ref6, ref) {
+  var children = _ref6.children;
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement("span", {
+    ref: ref,
+    className: "".concat(prefix, "--tile-content__below-the-fold")
+  }, children);
 });
-
-_defineProperty(TileAboveTheFoldContent, "contextType", PrefixContext);
-
-var TileBelowTheFoldContent = /*#__PURE__*/function (_Component5) {
-  _inherits(TileBelowTheFoldContent, _Component5);
-
-  var _super5 = _createSuper(TileBelowTheFoldContent);
-
-  function TileBelowTheFoldContent() {
-    _classCallCheck(this, TileBelowTheFoldContent);
-
-    return _super5.apply(this, arguments);
-  }
-
-  _createClass(TileBelowTheFoldContent, [{
-    key: "render",
-    value: function render() {
-      var children = this.props.children;
-      var prefix = this.context;
-      return /*#__PURE__*/React__default.createElement("span", {
-        className: "".concat(prefix, "--tile-content__below-the-fold")
-      }, children);
-    }
-  }]);
-
-  return TileBelowTheFoldContent;
-}(Component);
-
-_defineProperty(TileBelowTheFoldContent, "propTypes", {
+TileBelowTheFoldContent.propTypes = {
   /**
    * The child nodes.
    */
   children: PropTypes.node
-});
-
-_defineProperty(TileBelowTheFoldContent, "contextType", PrefixContext);
+};
+TileBelowTheFoldContent.displayName = 'TileBelowTheFoldContent';
 
 export { ClickableTile, ExpandableTile, SelectableTile, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent };