@carbon/react 1.19.0-rc.0 → 1.20.0

package/lib/components/FluidSearch/FluidSearch.js

@@ -0,0 +1,124 @@
+/**
+ * Copyright IBM Corp. 2016, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var Search = require('../Search/Search.js');
+require('../Search/Search.Skeleton.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var FormContext = require('../FluidForm/FormContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["className"];
+var FluidSearch = /*#__PURE__*/React__default["default"].forwardRef(function FluidSearch(_ref, ref) {
+  var className = _ref.className,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var classNames = cx__default["default"]("".concat(prefix, "--search--fluid"), className);
+  return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Search["default"], _rollupPluginBabelHelpers["extends"]({
+    ref: ref,
+    className: classNames
+  }, other)));
+});
+FluidSearch.defaultProps = {
+  autoComplete: 'off',
+  closeButtonLabelText: 'Clear search input',
+  role: 'searchbox',
+  type: 'text'
+};
+FluidSearch.propTypes = {
+  /**
+   * Specify an optional value for the `autocomplete` property on the underlying
+   * `<input>`, defaults to "off"
+   */
+  autoComplete: PropTypes__default["default"].string,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify a label to be read by screen readers on the "close" button
+   */
+  closeButtonLabelText: PropTypes__default["default"].string,
+
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  defaultValue: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Specify a custom `id` for the input
+   */
+  id: PropTypes__default["default"].string,
+
+  /**
+   * Provide the label text for the Search icon
+   */
+  labelText: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * Optional callback called when the search value changes.
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * Optional callback called when the search value is cleared.
+   */
+  onClear: PropTypes__default["default"].func,
+
+  /**
+   * Provide a handler that is invoked on the key down event for the input
+   */
+  onKeyDown: PropTypes__default["default"].func,
+
+  /**
+   * Provide an optional placeholder text for the Search.
+   * Note: if the label and placeholder differ,
+   * VoiceOver on Mac will read both
+   */
+  placeholder: PropTypes__default["default"].string,
+
+  /**
+   * Specify the role for the underlying `<input>`, defaults to `searchbox`
+   */
+  role: PropTypes__default["default"].string,
+
+  /**
+   * Optional prop to specify the type of the `<input>`
+   */
+  type: PropTypes__default["default"].string,
+
+  /**
+   * Specify the value of the `<input>`
+   */
+  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+};
+
+exports["default"] = FluidSearch;

package/lib/components/NumberInput/NumberInput.js

@@ -14,11 +14,12 @@ var iconsReact = require('@carbon/icons-react');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
-var index = require('../FeatureFlags/index.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
+require('../FluidForm/FluidForm.js');
+var FormContext = require('../FluidForm/FormContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -35,9 +36,7 @@ var translationIds = {
 };
 var defaultTranslations = (_defaultTranslations = {}, _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationIds['increment.number'], 'Increment number'), _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationIds['decrement.number'], 'Decrement number'), _defaultTranslations);
 var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function NumberInput(props, forwardRef) {
-  var _cx, _cx3;
-
-  var enabled = index.useFeatureFlag('enable-v11-release');
+  var _cx, _cx3, _cx4;
 
   var _props$allowEmpty = props.allowEmpty,
       allowEmpty = _props$allowEmpty === void 0 ? false : _props$allowEmpty,
@@ -52,14 +51,12 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
       _props$hideLabel = props.hideLabel,
       hideLabel = _props$hideLabel === void 0 ? false : _props$hideLabel,
       hideSteppers = props.hideSteppers,
-      _props$iconDescriptio = props.iconDescription,
-      iconDescription = _props$iconDescriptio === void 0 ? enabled ? undefined : 'choose a number' : _props$iconDescriptio,
+      iconDescription = props.iconDescription,
       id = props.id,
       label = props.label,
       _props$invalid = props.invalid,
       invalid = _props$invalid === void 0 ? false : _props$invalid,
-      _props$invalidText = props.invalidText,
-      invalidText = _props$invalidText === void 0 ? enabled ? undefined : 'Provide invalidText' : _props$invalidText,
+      invalidText = props.invalidText,
       light = props.light,
       _props$max = props.max,
       max = _props$max === void 0 ? 100 : _props$max,
@@ -86,7 +83,15 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
 
   var prefix = usePrefix.usePrefix();
 
-  var _useState = React.useState(function () {
+  var _useContext = React.useContext(FormContext.FormContext),
+      isFluid = _useContext.isFluid;
+
+  var _useState = React.useState(false),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      isFocused = _useState2[0],
+      setIsFocused = _useState2[1];
+
+  var _useState3 = React.useState(function () {
     if (controlledValue !== undefined) {
       return controlledValue;
     }
@@ -97,18 +102,18 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
 
     return 0;
   }),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
-  var _useState3 = React.useState(controlledValue),
       _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      prevControlledValue = _useState4[0],
-      setPrevControlledValue = _useState4[1];
+      value = _useState4[0],
+      setValue = _useState4[1];
+
+  var _useState5 = React.useState(controlledValue),
+      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+      prevControlledValue = _useState6[0],
+      setPrevControlledValue = _useState6[1];
 
   var inputRef = React.useRef(null);
   var ref = useMergedRefs.useMergedRefs([forwardRef, inputRef]);
-  var numberInputClasses = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number--helpertext"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number--readonly"), readOnly), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number--nolabel"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number--nosteppers"), hideSteppers), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !enabled), _cx));
+  var numberInputClasses = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number--helpertext"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number--readonly"), readOnly), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number--nolabel"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number--nosteppers"), hideSteppers), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--number--").concat(size), size), _cx));
   var isInputValid = getInputValidity({
     allowEmpty: allowEmpty,
     invalid: invalid,
@@ -162,8 +167,19 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
     }
   }
 
+  var handleFocus = function handleFocus(evt) {
+    if (evt.target.type === 'button') {
+      setIsFocused(false);
+    } else {
+      setIsFocused(evt.type === 'focus' ? true : false);
+    }
+  };
+
+  var outerElementClasses = cx__default["default"]("".concat(prefix, "--form-item"), (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, customClassName, !!customClassName), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--number-input--fluid--invalid"), isFluid && normalizedProps.invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--number-input--fluid--focus"), isFluid && isFocused), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--number-input--fluid--disabled"), isFluid && disabled), _cx4));
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["default"]("".concat(prefix, "--form-item"), _rollupPluginBabelHelpers.defineProperty({}, customClassName, enabled))
+    className: outerElementClasses,
+    onFocus: isFluid ? handleFocus : null,
+    onBlur: isFluid ? handleFocus : null
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: numberInputClasses,
     "data-invalid": normalizedProps.invalid ? true : undefined
@@ -265,7 +281,9 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
     className: "up-icon"
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--number__rule-divider")
-  }))), normalizedProps.validation ? normalizedProps.validation : /*#__PURE__*/React__default["default"].createElement(HelperText, {
+  }))), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
+    className: "".concat(prefix, "--number-input__divider")
+  }), normalizedProps.validation ? normalizedProps.validation : /*#__PURE__*/React__default["default"].createElement(HelperText, {
     disabled: disabled,
     description: helperText
   })));

package/lib/components/OverflowMenuItem/OverflowMenuItem.js

@@ -16,154 +16,105 @@ var React = require('react');
 var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
 var warning = require('../../internal/warning.js');
-var FeatureFlags = require('@carbon/feature-flags');
 var usePrefix = require('../../internal/usePrefix.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
-
-var _excluded = ["href", "className", "itemText", "hasDivider", "isDelete", "disabled", "closeMenu", "onClick", "handleOverflowMenuItemFocus", "onKeyDown", "wrapperClassName", "requireTitle", "index", "title"];
 
-var OverflowMenuItem = /*#__PURE__*/function (_React$Component) {
-  _rollupPluginBabelHelpers.inherits(OverflowMenuItem, _React$Component);
-
-  var _super = _rollupPluginBabelHelpers.createSuper(OverflowMenuItem);
+var _excluded = ["className", "closeMenu", "disabled", "handleOverflowMenuItemFocus", "hasDivider", "href", "isDelete", "index", "itemText", "onClick", "onKeyDown", "requireTitle", "title", "wrapperClassName"];
+var OverflowMenuItem = /*#__PURE__*/React__default["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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+
+  function setTabFocus(evt) {
+    if (match.match(evt, keys.ArrowDown)) {
+      handleOverflowMenuItemFocus({
+        currentIndex: index,
+        direction: 1
+      });
+    }
 
-  function OverflowMenuItem() {
-    var _this;
+    if (match.match(evt, keys.ArrowUp)) {
+      handleOverflowMenuItemFocus({
+        currentIndex: index,
+        direction: -1
+      });
+    }
+  }
 
-    _rollupPluginBabelHelpers.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));
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "overflowMenuItem", /*#__PURE__*/React__default["default"].createRef());
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "setTabFocus", function (evt) {
-      if (match.match(evt, keys.ArrowDown)) {
-        _this.props.handleOverflowMenuItemFocus({
-          currentIndex: _this.props.index,
-          direction: 1
-        });
-      }
-
-      if (match.match(evt, keys.ArrowUp)) {
-        _this.props.handleOverflowMenuItemFocus({
-          currentIndex: _this.props.index,
-          direction: -1
-        });
-      }
-    });
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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.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;
   }
 
-  _rollupPluginBabelHelpers.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 = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props2, _excluded);
-
-      if (process.env.NODE_ENV !== "production") {
-        process.env.NODE_ENV !== "production" ? warning.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["default"].createElement(usePrefix.PrefixContext.Consumer, null, function (prefix) {
-        var _classNames;
-
-        var overflowMenuBtnClasses = cx__default["default"]("".concat(prefix, "--overflow-menu-options__btn"), className);
-        var overflowMenuItemClasses = cx__default["default"]("".concat(prefix, "--overflow-menu-options__option"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--overflow-menu--divider"), hasDivider), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--overflow-menu-options__option--danger"), isDelete), _rollupPluginBabelHelpers.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["default"].createElement("div", {
-            className: "".concat(prefix, "--overflow-menu-options__option-content")
-          }, itemText);
-        }();
-
-        return /*#__PURE__*/React__default["default"].createElement("li", {
-          className: overflowMenuItemClasses,
-          role: "none"
-        }, /*#__PURE__*/React__default["default"].createElement(TagToUse, _rollupPluginBabelHelpers["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__default["default"]("".concat(prefix, "--overflow-menu-options__btn"), className);
+  var overflowMenuItemClasses = cx__default["default"]("".concat(prefix, "--overflow-menu-options__option"), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--overflow-menu--divider"), hasDivider), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--overflow-menu-options__option--danger"), isDelete), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--overflow-menu-options__option--disabled"), disabled), _cx), wrapperClassName);
+  var TagToUse = href ? 'a' : 'button';
 
-  return OverflowMenuItem;
-}(React__default["default"].Component);
+  var OverflowMenuItemContent = function () {
+    if (typeof itemText !== 'string') {
+      return itemText;
+    }
 
-_rollupPluginBabelHelpers.defineProperty(OverflowMenuItem, "propTypes", {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "".concat(prefix, "--overflow-menu-options__option-content")
+    }, itemText);
+  }();
+
+  return /*#__PURE__*/React__default["default"].createElement("li", {
+    className: overflowMenuItemClasses,
+    role: "none"
+  }, /*#__PURE__*/React__default["default"].createElement(TagToUse, _rollupPluginBabelHelpers["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
    */
@@ -228,15 +179,6 @@ _rollupPluginBabelHelpers.defineProperty(OverflowMenuItem, "propTypes", {
    * The CSS class name to be placed on the wrapper list item element
    */
   wrapperClassName: PropTypes__default["default"].string
-});
-
-_rollupPluginBabelHelpers.defineProperty(OverflowMenuItem, "defaultProps", {
-  hasDivider: false,
-  isDelete: false,
-  disabled: false,
-  itemText: FeatureFlags__namespace.enabled('enable-v11-release') ? null : 'Provide itemText',
-  onClick: function onClick() {},
-  onKeyDown: function onKeyDown() {}
-});
+};
 
 exports["default"] = OverflowMenuItem;

package/lib/components/ProgressBar/ProgressBar.js

@@ -16,6 +16,7 @@ var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -82,6 +83,14 @@ function ProgressBar(_ref) {
     });
   }
 
+  var ref = React.useRef();
+  useIsomorphicEffect["default"](function () {
+    if (!isFinished && !isError) {
+      ref.current.style.transform = "scaleX(".concat(percentage, ")");
+    } else {
+      ref.current.style.transform = null;
+    }
+  }, [percentage, isFinished, isError]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -102,9 +111,7 @@ function ProgressBar(_ref) {
     "aria-valuenow": !indeterminate ? cappedValue : null
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--progress-bar__bar"),
-    style: !isFinished && !isError ? {
-      transform: "scaleX(".concat(percentage, ")")
-    } : null
+    ref: ref
   })), helperText && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--progress-bar__helper-text")
   }, helperText, /*#__PURE__*/React__default["default"].createElement("div", {

package/lib/components/Search/Search.js

@@ -22,6 +22,8 @@ var usePrefix = require('../../internal/usePrefix.js');
 var events = require('../../tools/events.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
+require('../FluidForm/FluidForm.js');
+var FormContext = require('../FluidForm/FormContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -64,6 +66,10 @@ var Search = /*#__PURE__*/React__default["default"].forwardRef(function Search(_
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
+
+  var _useContext = React.useContext(FormContext.FormContext),
+      isFluid = _useContext.isFluid;
+
   var inputRef = React.useRef(null);
   var ref = useMergedRefs.useMergedRefs([forwardRef, inputRef]);
   var inputId = useId.useId('search-input');
@@ -80,7 +86,7 @@ var Search = /*#__PURE__*/React__default["default"].forwardRef(function Search(_
       prevValue = _useState4[0],
       setPrevValue = _useState4[1];
 
-  var searchClasses = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search--sm"), size === 'sm'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search--md"), size === 'md'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search--lg"), size === 'lg'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx, className, className), _cx));
+  var searchClasses = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search--sm"), size === 'sm'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search--md"), size === 'md'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search--lg"), size === 'lg'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--search--fluid"), isFluid), _rollupPluginBabelHelpers.defineProperty(_cx, className, className), _cx));
   var clearClasses = cx__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--search-close"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--search-close--hidden"), !hasContent), _cx2));
 
   if (value !== prevValue) {

package/lib/components/SkeletonText/SkeletonText.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
+var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -43,48 +44,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["default"].createElement("p", _rollupPluginBabelHelpers["extends"]({
-        className: skeletonTextClasses,
-        style: {
-          width: "calc(".concat(width, " - ").concat(randomWidth, ")")
-        },
-        key: i
-      }, other)));
-    }
-
-    return /*#__PURE__*/React__default["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["default"].createElement("p", _rollupPluginBabelHelpers["extends"]({
-        className: skeletonTextClasses,
-        style: {
-          width: _randomWidth
-        },
-        key: j
-      }, other)));
-    }
-
-    return /*#__PURE__*/React__default["default"].createElement("div", null, _lines);
+  var refs = React.useRef([]);
+  useIsomorphicEffect["default"](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["default"].createElement("p", _rollupPluginBabelHelpers["extends"]({
+      className: skeletonTextClasses,
+      key: i,
+      ref: function ref(el) {
+        return refs.current = [].concat(_rollupPluginBabelHelpers.toConsumableArray(refs.current), [el]);
+      }
+    }, other)));
   }
 
-  return /*#__PURE__*/React__default["default"].createElement("p", _rollupPluginBabelHelpers["extends"]({
-    className: skeletonTextClasses,
-    style: {
-      width: width
-    }
-  }, other));
+  if (lineCountNumber !== '1') {
+    return /*#__PURE__*/React__default["default"].createElement("div", null, lines);
+  } else {
+    return lines;
+  }
 };
 
 SkeletonText.propTypes = {