@carbon/react 1.19.0 → 1.20.0

package/es/components/OverflowMenuItem/OverflowMenuItem.js

@@ -5,136 +5,106 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { inherits as _inherits, createSuper as _createSuper, createClass as _createClass, defineProperty as _defineProperty, classCallCheck as _classCallCheck, assertThisInitialized as _assertThisInitialized, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import { ArrowDown, ArrowUp } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { warning } from '../../internal/warning.js';
-import * as FeatureFlags from '@carbon/feature-flags';
-import { PrefixContext } from '../../internal/usePrefix.js';
-
-var _excluded = ["href", "className", "itemText", "hasDivider", "isDelete", "disabled", "closeMenu", "onClick", "handleOverflowMenuItemFocus", "onKeyDown", "wrapperClassName", "requireTitle", "index", "title"];
-
-var OverflowMenuItem = /*#__PURE__*/function (_React$Component) {
-  _inherits(OverflowMenuItem, _React$Component);
-
-  var _super = _createSuper(OverflowMenuItem);
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["className", "closeMenu", "disabled", "handleOverflowMenuItemFocus", "hasDivider", "href", "isDelete", "index", "itemText", "onClick", "onKeyDown", "requireTitle", "title", "wrapperClassName"];
+var OverflowMenuItem = /*#__PURE__*/React__default.forwardRef(function OverflowMenuItem(_ref, ref) {
+  var _cx;
+
+  var className = _ref.className,
+      closeMenu = _ref.closeMenu,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      handleOverflowMenuItemFocus = _ref.handleOverflowMenuItemFocus,
+      _ref$hasDivider = _ref.hasDivider,
+      hasDivider = _ref$hasDivider === void 0 ? false : _ref$hasDivider,
+      href = _ref.href,
+      _ref$isDelete = _ref.isDelete,
+      isDelete = _ref$isDelete === void 0 ? false : _ref$isDelete,
+      index = _ref.index,
+      _ref$itemText = _ref.itemText,
+      itemText = _ref$itemText === void 0 ? 'Provide itemText' : _ref$itemText,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+      _ref$onKeyDown = _ref.onKeyDown,
+      _onKeyDown = _ref$onKeyDown === void 0 ? function () {} : _ref$onKeyDown,
+      requireTitle = _ref.requireTitle,
+      title = _ref.title,
+      wrapperClassName = _ref.wrapperClassName,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+
+  function setTabFocus(evt) {
+    if (match(evt, ArrowDown)) {
+      handleOverflowMenuItemFocus({
+        currentIndex: index,
+        direction: 1
+      });
+    }
 
-  function OverflowMenuItem() {
-    var _this;
+    if (match(evt, ArrowUp)) {
+      handleOverflowMenuItemFocus({
+        currentIndex: index,
+        direction: -1
+      });
+    }
+  }
 
-    _classCallCheck(this, OverflowMenuItem);
+  function handleClick(evt) {
+    onClick(evt);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    if (closeMenu) {
+      closeMenu();
     }
+  }
 
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "overflowMenuItem", /*#__PURE__*/React__default.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "setTabFocus", function (evt) {
-      if (match(evt, ArrowDown)) {
-        _this.props.handleOverflowMenuItemFocus({
-          currentIndex: _this.props.index,
-          direction: 1
-        });
-      }
-
-      if (match(evt, ArrowUp)) {
-        _this.props.handleOverflowMenuItemFocus({
-          currentIndex: _this.props.index,
-          direction: -1
-        });
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function (evt) {
-      var _this$props = _this.props,
-          onClick = _this$props.onClick,
-          closeMenu = _this$props.closeMenu;
-      onClick(evt);
-
-      if (closeMenu) {
-        closeMenu();
-      }
-    });
-
-    return _this;
+  if (process.env.NODE_ENV !== "production") {
+    process.env.NODE_ENV !== "production" ? warning(closeMenu, '`<OverflowMenuItem>` detected missing `closeMenu` prop. ' + '`closeMenu` is required to let `<OverflowMenu>` close the menu upon actions on `<OverflowMenuItem>`. ' + 'Please make sure `<OverflowMenuItem>` is a direct child of `<OverflowMenu>.') : void 0;
   }
 
-  _createClass(OverflowMenuItem, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props2 = this.props,
-          href = _this$props2.href,
-          className = _this$props2.className,
-          itemText = _this$props2.itemText,
-          hasDivider = _this$props2.hasDivider,
-          isDelete = _this$props2.isDelete,
-          disabled = _this$props2.disabled,
-          closeMenu = _this$props2.closeMenu;
-          _this$props2.onClick;
-          _this$props2.handleOverflowMenuItemFocus;
-          var _onKeyDown = _this$props2.onKeyDown,
-          wrapperClassName = _this$props2.wrapperClassName,
-          requireTitle = _this$props2.requireTitle,
-          index = _this$props2.index,
-          title = _this$props2.title,
-          other = _objectWithoutProperties(_this$props2, _excluded);
-
-      if (process.env.NODE_ENV !== "production") {
-        process.env.NODE_ENV !== "production" ? warning(closeMenu, '`<OverflowMenuItem>` detected missing `closeMenu` prop. ' + '`closeMenu` is required to let `<OverflowMenu>` close the menu upon actions on `<OverflowMenuItem>`. ' + 'Please make sure `<OverflowMenuItem>` is a direct child of `<OverflowMenu>.') : void 0;
-      }
-
-      return /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, function (prefix) {
-        var _classNames;
-
-        var overflowMenuBtnClasses = cx("".concat(prefix, "--overflow-menu-options__btn"), className);
-        var overflowMenuItemClasses = cx("".concat(prefix, "--overflow-menu-options__option"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--overflow-menu--divider"), hasDivider), _defineProperty(_classNames, "".concat(prefix, "--overflow-menu-options__option--danger"), isDelete), _defineProperty(_classNames, "".concat(prefix, "--overflow-menu-options__option--disabled"), disabled), _classNames), wrapperClassName);
-        var TagToUse = href ? 'a' : 'button';
-
-        var OverflowMenuItemContent = function () {
-          if (typeof itemText !== 'string') {
-            return itemText;
-          }
-
-          return /*#__PURE__*/React__default.createElement("div", {
-            className: "".concat(prefix, "--overflow-menu-options__option-content")
-          }, itemText);
-        }();
-
-        return /*#__PURE__*/React__default.createElement("li", {
-          className: overflowMenuItemClasses,
-          role: "none"
-        }, /*#__PURE__*/React__default.createElement(TagToUse, _extends({}, other, {
-          role: "menuitem",
-          href: href,
-          className: overflowMenuBtnClasses,
-          disabled: disabled,
-          onClick: _this2.handleClick,
-          onKeyDown: function onKeyDown(evt) {
-            _this2.setTabFocus(evt);
-
-            _onKeyDown(evt);
-          },
-          ref: _this2.overflowMenuItem,
-          title: requireTitle ? title || itemText : null,
-          tabIndex: "-1",
-          index: index
-        }), OverflowMenuItemContent));
-      });
-    }
-  }]);
+  var overflowMenuBtnClasses = cx("".concat(prefix, "--overflow-menu-options__btn"), className);
+  var overflowMenuItemClasses = cx("".concat(prefix, "--overflow-menu-options__option"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--overflow-menu--divider"), hasDivider), _defineProperty(_cx, "".concat(prefix, "--overflow-menu-options__option--danger"), isDelete), _defineProperty(_cx, "".concat(prefix, "--overflow-menu-options__option--disabled"), disabled), _cx), wrapperClassName);
+  var TagToUse = href ? 'a' : 'button';
 
-  return OverflowMenuItem;
-}(React__default.Component);
+  var OverflowMenuItemContent = function () {
+    if (typeof itemText !== 'string') {
+      return itemText;
+    }
 
-_defineProperty(OverflowMenuItem, "propTypes", {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(prefix, "--overflow-menu-options__option-content")
+    }, itemText);
+  }();
+
+  return /*#__PURE__*/React__default.createElement("li", {
+    className: overflowMenuItemClasses,
+    role: "none"
+  }, /*#__PURE__*/React__default.createElement(TagToUse, _extends({
+    className: overflowMenuBtnClasses,
+    disabled: disabled,
+    href: href,
+    index: index,
+    onClick: handleClick,
+    onKeyDown: function onKeyDown(evt) {
+      setTabFocus(evt);
+
+      _onKeyDown(evt);
+    },
+    role: "menuitem",
+    ref: ref,
+    tabIndex: "-1",
+    title: requireTitle ? title || itemText : null
+  }, rest), OverflowMenuItemContent));
+});
+OverflowMenuItem.propTypes = {
   /**
    * The CSS class name to be placed on the button element
    */
@@ -199,15 +169,6 @@ _defineProperty(OverflowMenuItem, "propTypes", {
    * The CSS class name to be placed on the wrapper list item element
    */
   wrapperClassName: PropTypes.string
-});
-
-_defineProperty(OverflowMenuItem, "defaultProps", {
-  hasDivider: false,
-  isDelete: false,
-  disabled: false,
-  itemText: FeatureFlags.enabled('enable-v11-release') ? null : 'Provide itemText',
-  onClick: function onClick() {},
-  onKeyDown: function onKeyDown() {}
-});
+};
 
 export { OverflowMenuItem as default };

package/es/components/ProgressBar/ProgressBar.js

@@ -6,12 +6,13 @@
  */
 
 import { defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React__default, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { ErrorFilled, CheckmarkFilled } from '@carbon/icons-react';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 
 function ProgressBar(_ref) {
   var _classNames;
@@ -72,6 +73,14 @@ function ProgressBar(_ref) {
     });
   }
 
+  var ref = useRef();
+  useIsomorphicEffect(function () {
+    if (!isFinished && !isError) {
+      ref.current.style.transform = "scaleX(".concat(percentage, ")");
+    } else {
+      ref.current.style.transform = null;
+    }
+  }, [percentage, isFinished, isError]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -92,9 +101,7 @@ function ProgressBar(_ref) {
     "aria-valuenow": !indeterminate ? cappedValue : null
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--progress-bar__bar"),
-    style: !isFinished && !isError ? {
-      transform: "scaleX(".concat(percentage, ")")
-    } : null
+    ref: ref
   })), helperText && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--progress-bar__helper-text")
   }, helperText, /*#__PURE__*/React__default.createElement("div", {

package/es/components/Search/Search.js

@@ -9,7 +9,7 @@ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _
 import { Close, Search as Search$1 } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useRef, useState } from 'react';
+import React__default, { useContext, useRef, useState } from 'react';
 import { focus } from '../../internal/focus/index.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
@@ -18,6 +18,8 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import deprecate from '../../prop-types/deprecate.js';
+import '../FluidForm/FluidForm.js';
+import { FormContext } from '../FluidForm/FormContext.js';
 
 var _Close;
 
@@ -54,6 +56,10 @@ var Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forwar
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
+
+  var _useContext = useContext(FormContext),
+      isFluid = _useContext.isFluid;
+
   var inputRef = useRef(null);
   var ref = useMergedRefs([forwardRef, inputRef]);
   var inputId = useId('search-input');
@@ -70,7 +76,7 @@ var Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forwar
       prevValue = _useState4[0],
       setPrevValue = _useState4[1];
 
-  var searchClasses = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--search"), true), _defineProperty(_cx, "".concat(prefix, "--search--sm"), size === 'sm'), _defineProperty(_cx, "".concat(prefix, "--search--md"), size === 'md'), _defineProperty(_cx, "".concat(prefix, "--search--lg"), size === 'lg'), _defineProperty(_cx, "".concat(prefix, "--search--light"), light), _defineProperty(_cx, "".concat(prefix, "--search--disabled"), disabled), _defineProperty(_cx, className, className), _cx));
+  var searchClasses = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--search"), true), _defineProperty(_cx, "".concat(prefix, "--search--sm"), size === 'sm'), _defineProperty(_cx, "".concat(prefix, "--search--md"), size === 'md'), _defineProperty(_cx, "".concat(prefix, "--search--lg"), size === 'lg'), _defineProperty(_cx, "".concat(prefix, "--search--light"), light), _defineProperty(_cx, "".concat(prefix, "--search--disabled"), disabled), _defineProperty(_cx, "".concat(prefix, "--search--fluid"), isFluid), _defineProperty(_cx, className, className), _cx));
   var clearClasses = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--search-close"), true), _defineProperty(_cx2, "".concat(prefix, "--search-close--hidden"), !hasContent), _cx2));
 
   if (value !== prevValue) {

package/es/components/SkeletonText/SkeletonText.js

@@ -5,11 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { useRef } from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 
 var _excluded = ["paragraph", "lineCount", "width", "heading", "className"];
 var randoms = [0.973051493507435, 0.15334737213558558, 0.5671034553053769];
@@ -33,48 +34,48 @@ var SkeletonText = function SkeletonText(_ref) {
   var widthNum = parseInt(width, 10);
   var widthPx = width.includes('px');
   var widthPercent = width.includes('%');
+  var lineCountNumber;
 
-  if (widthPercent && paragraph) {
-    var lines = [];
-
-    for (var i = 0; i < lineCount; i++) {
-      var randomWidth = getRandomInt(0, 75, i) + 'px';
-      lines.push( /*#__PURE__*/React__default.createElement("p", _extends({
-        className: skeletonTextClasses,
-        style: {
-          width: "calc(".concat(width, " - ").concat(randomWidth, ")")
-        },
-        key: i
-      }, other)));
-    }
-
-    return /*#__PURE__*/React__default.createElement("div", null, lines);
+  if (!paragraph) {
+    lineCountNumber = '1';
+  } else {
+    lineCountNumber = lineCount;
   }
 
-  if (widthPx && paragraph) {
-    var _lines = [];
-
-    for (var j = 0; j < lineCount; j++) {
-      var _randomWidth = getRandomInt(widthNum - 75, widthNum, j) + 'px';
-
-      _lines.push( /*#__PURE__*/React__default.createElement("p", _extends({
-        className: skeletonTextClasses,
-        style: {
-          width: _randomWidth
-        },
-        key: j
-      }, other)));
-    }
-
-    return /*#__PURE__*/React__default.createElement("div", null, _lines);
+  var refs = useRef([]);
+  useIsomorphicEffect(function () {
+    refs.current.map(function (item, j) {
+      var randomPercentWidth = getRandomInt(0, 75, j) + 'px';
+      var randomPxWidth = getRandomInt(widthNum - 75, widthNum, j) + 'px';
+
+      if (item) {
+        if (widthPercent && paragraph) {
+          item.style.width = "calc(".concat(width, " - ").concat(randomPercentWidth, ")");
+        } else if (widthPx && paragraph) {
+          item.style.width = randomPxWidth;
+        } else {
+          item.style.width = width;
+        }
+      }
+    });
+  }, [lineCountNumber, paragraph, refs, width, widthNum, widthPercent, widthPx]);
+  var lines = [];
+
+  for (var i = 0; i < lineCountNumber; i++) {
+    lines.push( /*#__PURE__*/React__default.createElement("p", _extends({
+      className: skeletonTextClasses,
+      key: i,
+      ref: function ref(el) {
+        return refs.current = [].concat(_toConsumableArray(refs.current), [el]);
+      }
+    }, other)));
   }
 
-  return /*#__PURE__*/React__default.createElement("p", _extends({
-    className: skeletonTextClasses,
-    style: {
-      width: width
-    }
-  }, other));
+  if (lineCountNumber !== '1') {
+    return /*#__PURE__*/React__default.createElement("div", null, lines);
+  } else {
+    return lines;
+  }
 };
 
 SkeletonText.propTypes = {

package/es/components/Slider/Slider.js

@@ -45,16 +45,12 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
 
   var _super = _createSuper(Slider);
 
-  function Slider() {
+  function Slider(props) {
     var _this;
 
     _classCallCheck(this, Slider);
 
-    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));
+    _this = _super.call(this, props);
 
     _defineProperty(_assertThisInitialized(_this), "state", {
       value: _this.props.value,
@@ -285,16 +281,18 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
       };
     });
 
+    _this.thumbRef = /*#__PURE__*/React__default.createRef();
+    _this.filledTrackRef = /*#__PURE__*/React__default.createRef();
     return _this;
   }
+  /**
+   * Sets up initial slider position and value in response to component mount.
+   */
+
 
   _createClass(Slider, [{
     key: "componentDidMount",
-    value:
-    /**
-     * Sets up initial slider position and value in response to component mount.
-     */
-    function componentDidMount() {
+    value: function componentDidMount() {
       if (this.element) {
         var _this$calcValue4 = this.calcValue({
           useRawValue: true
@@ -322,6 +320,9 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
     value: function componentDidUpdate(prevProps, prevState) {
       // Fire onChange event handler if present, if there's a usable value, and
       // if the value is different from the last one
+      this.thumbRef.current.style.left = "".concat(this.state.left, "%");
+      this.filledTrackRef.current.style.transform = "translate(0%, -50%) scaleX(".concat(this.state.left / 100, ")");
+
       if (this.state.value !== '' && prevState.value !== this.state.value && typeof this.props.onChange === 'function') {
         this.props.onChange({
           value: this.state.value
@@ -405,7 +406,6 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
       delete other.invalid;
       var _this$state = this.state,
           value = _this$state.value,
-          left = _this$state.left,
           isValid = _this$state.isValid;
       var scope = this.context;
       var enabled;
@@ -420,16 +420,7 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
         var labelId = "".concat(id, "-label");
         var labelClasses = cx("".concat(prefix, "--label"), _defineProperty({}, "".concat(prefix, "--label--disabled"), disabled));
         var sliderClasses = cx("".concat(prefix, "--slider"), _defineProperty({}, "".concat(prefix, "--slider--disabled"), disabled), _defineProperty({}, "".concat(prefix, "--slider--readonly"), readOnly), [enabled ? null : className]);
-        var inputClasses = cx("".concat(prefix, "--text-input"), "".concat(prefix, "--slider-text-input"), (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefix, "--text-input--light"), light), _defineProperty(_classNames4, "".concat(prefix, "--text-input--invalid"), isValid === false), _classNames4));
-        var filledTrackStyle = {
-          transform: "translate(0%, -50%) scaleX(".concat(left / 100, ")")
-        };
-        var thumbStyle = {
-          left: "".concat(left, "%")
-        };
-        var hiddenInputStyle = {
-          display: 'none'
-        };
+        var inputClasses = cx("".concat(prefix, "--text-input"), "".concat(prefix, "--slider-text-input"), (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefix, "--text-input--light"), light), _defineProperty(_classNames4, "".concat(prefix, "--text-input--invalid"), isValid === false), _defineProperty(_classNames4, "".concat(prefix, "--slider-text-input--hidden"), hideTextInput), _classNames4));
         return /*#__PURE__*/React__default.createElement("div", {
           className: enabled ? cx("".concat(prefix, "--form-item"), className) : "".concat(prefix, "--form-item")
         }, /*#__PURE__*/React__default.createElement("label", {
@@ -459,8 +450,8 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
           "aria-valuemax": max,
           "aria-valuemin": min,
           "aria-valuenow": value,
-          style: thumbStyle,
-          "aria-labelledby": labelId
+          "aria-labelledby": labelId,
+          ref: _this2.thumbRef
         }), /*#__PURE__*/React__default.createElement("div", {
           className: "".concat(prefix, "--slider__track"),
           ref: function ref(node) {
@@ -468,12 +459,11 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
           }
         }), /*#__PURE__*/React__default.createElement("div", {
           className: "".concat(prefix, "--slider__filled-track"),
-          style: filledTrackStyle
+          ref: _this2.filledTrackRef
         })), /*#__PURE__*/React__default.createElement("span", {
           className: "".concat(prefix, "--slider__range-label")
         }, formatLabel(max, maxLabel)), /*#__PURE__*/React__default.createElement("input", {
           type: hideTextInput ? 'hidden' : inputType,
-          style: hideTextInput ? hiddenInputStyle : null,
           id: "".concat(id, "-input-for-slider"),
           name: name,
           className: inputClasses,

package/es/components/TextArea/TextArea.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useState } from 'react';
+import React__default, { useContext, useState, useRef } from 'react';
 import cx from 'classnames';
 import deprecate from '../../prop-types/deprecate.js';
 import { WarningFilled } from '@carbon/icons-react';
@@ -16,6 +16,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useAnnouncer } from '../../internal/useAnnouncer.js';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 
 var _excluded = ["className", "id", "labelText", "hideLabel", "onChange", "onClick", "invalid", "invalidText", "helperText", "light", "placeholder", "enableCounter", "maxCount"];
 var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, ref) {
@@ -97,6 +98,14 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
     className: "".concat(prefix, "--text-area__invalid-icon")
   })) : null;
   var textareaClasses = cx("".concat(prefix, "--text-area"), [enabled ? null : className], (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefix, "--text-area--light"), light), _defineProperty(_classNames4, "".concat(prefix, "--text-area--invalid"), invalid), _classNames4));
+  var textareaRef = useRef();
+  useIsomorphicEffect(function () {
+    if (other.cols) {
+      textareaRef.current.style.width = null;
+    } else {
+      textareaRef.current.style.width = "100%";
+    }
+  }, [other.cols]);
   var input = /*#__PURE__*/React__default.createElement("textarea", _extends({}, other, textareaProps, {
     placeholder: placeholder || null,
     className: textareaClasses,
@@ -104,9 +113,7 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
     "aria-describedby": invalid ? errorId : null,
     disabled: other.disabled,
     readOnly: other.readOnly,
-    style: other.cols ? {} : {
-      width: "100%"
-    }
+    ref: textareaRef
   }));
   return /*#__PURE__*/React__default.createElement("div", {
     className: enabled ? cx("".concat(prefix, "--form-item"), className) : "".concat(prefix, "--form-item")

package/es/components/Tile/Tile.js

@@ -419,9 +419,6 @@ function ExpandableTile(_ref4) {
   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);
@@ -443,6 +440,13 @@ function ExpandableTile(_ref4) {
       setInteractive(true);
     }
   }, []);
+  useIsomorphicEffect(function () {
+    if (isExpanded) {
+      tile.current.style.maxHeight = null;
+    } else {
+      tile.current.style.maxHeight = isTileMaxHeight + isTilePadding + 'px';
+    }
+  }, [isExpanded, isTileMaxHeight, isTilePadding]);
   useEffect(function () {
     var resizeObserver = new ResizeObserver(function (entries) {
       var _entries = _slicedToArray(entries, 1),
@@ -457,7 +461,6 @@ function ExpandableTile(_ref4) {
   }, []);
   return interactive ? /*#__PURE__*/React__default.createElement("div", _extends({
     ref: tile,
-    style: tileStyle,
     className: interactiveClassNames,
     "aria-expanded": isExpanded
   }, rest), /*#__PURE__*/React__default.createElement("div", {
@@ -478,7 +481,6 @@ function ExpandableTile(_ref4) {
   }, childrenAsArray[1]))) : /*#__PURE__*/React__default.createElement("button", _extends({
     type: "button",
     ref: tile,
-    style: tileStyle,
     className: classNames,
     "aria-expanded": isExpanded,
     title: isExpanded ? tileExpandedIconText : tileCollapsedIconText