@carbon/react 1.19.0 → 1.21.0-rc.0

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/OverflowMenuItem/index.js

@@ -13,4 +13,5 @@ var OverflowMenuItem = require('./OverflowMenuItem.js');
 
 
 
+exports.OverflowMenuItem = OverflowMenuItem["default"];
 exports["default"] = OverflowMenuItem["default"];

package/lib/components/Pagination/Pagination.Skeleton.js

@@ -55,4 +55,5 @@ PaginationSkeleton.propTypes = {
   className: PropTypes__default["default"].string
 };
 
+exports.PaginationSkeleton = PaginationSkeleton;
 exports["default"] = PaginationSkeleton;

package/lib/components/Pagination/Pagination.js

@@ -14,8 +14,8 @@ var iconsReact = require('@carbon/icons-react');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
-require('../Select/Select.Skeleton.js');
 var Select = require('../Select/Select.js');
+require('../Select/Select.Skeleton.js');
 var SelectItem = require('../SelectItem/SelectItem.js');
 var array = require('../../tools/array.js');
 var useId = require('../../internal/useId.js');

package/lib/components/Pagination/experimental/PageSelector.js

@@ -14,8 +14,8 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
 var setupGetInstanceId = require('../../../tools/setupGetInstanceId.js');
-require('../../Select/Select.Skeleton.js');
 var Select = require('../../Select/Select.js');
+require('../../Select/Select.Skeleton.js');
 var SelectItem = require('../../SelectItem/SelectItem.js');
 var usePrefix = require('../../../internal/usePrefix.js');
 

package/lib/components/Pagination/experimental/Pagination.js

@@ -14,10 +14,10 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
-require('../../Button/Button.Skeleton.js');
 var Button = require('../../Button/Button.js');
-require('../../Select/Select.Skeleton.js');
+require('../../Button/Button.Skeleton.js');
 var Select = require('../../Select/Select.js');
+require('../../Select/Select.Skeleton.js');
 var SelectItem = require('../../SelectItem/SelectItem.js');
 var index = require('../../IconButton/index.js');
 var FeatureFlags = require('@carbon/feature-flags');

package/lib/components/PaginationNav/PaginationNav.js

@@ -14,8 +14,8 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
-require('../Button/Button.Skeleton.js');
 var Button = require('../Button/Button.js');
+require('../Button/Button.Skeleton.js');
 var index = require('../IconButton/index.js');
 var FeatureFlags = require('@carbon/feature-flags');
 var usePrefix = require('../../internal/usePrefix.js');

package/lib/components/PrimaryButton/PrimaryButton.js

@@ -11,8 +11,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-require('../Button/Button.Skeleton.js');
 var Button = require('../Button/Button.js');
+require('../Button/Button.Skeleton.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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/ProgressIndicator/ProgressIndicator.Skeleton.js

@@ -62,4 +62,5 @@ ProgressIndicatorSkeleton.propTypes = {
   vertical: PropTypes__default["default"].bool
 };
 
+exports.ProgressIndicatorSkeleton = ProgressIndicatorSkeleton;
 exports["default"] = ProgressIndicatorSkeleton;

package/lib/components/RadioButton/RadioButton.Skeleton.js

@@ -44,4 +44,5 @@ RadioButtonSkeleton.propTypes = {
   className: PropTypes__default["default"].string
 };
 
+exports.RadioButtonSkeleton = RadioButtonSkeleton;
 exports["default"] = RadioButtonSkeleton;

package/lib/components/RadioButton/index.js

@@ -13,4 +13,5 @@ var RadioButton = require('./RadioButton.js');
 
 
 
+exports.RadioButton = RadioButton["default"];
 exports["default"] = RadioButton["default"];

package/lib/components/RadioTile/index.js

@@ -0,0 +1,17 @@
+/**
+ * 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 RadioTile = require('./RadioTile.js');
+
+
+
+exports.RadioTile = RadioTile["default"];
+exports["default"] = RadioTile["default"];

package/lib/components/Search/Search.Skeleton.js

@@ -56,4 +56,5 @@ SearchSkeleton.defaultProps = {
   small: false
 };
 
+exports.SearchSkeleton = SearchSkeleton;
 exports["default"] = SearchSkeleton;

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/Search/index.js

@@ -14,5 +14,6 @@ var Search_Skeleton = require('./Search.Skeleton.js');
 
 
 
+exports.Search = Search["default"];
 exports["default"] = Search["default"];
 exports.SearchSkeleton = Search_Skeleton["default"];

package/lib/components/SecondaryButton/SecondaryButton.js

@@ -11,8 +11,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-require('../Button/Button.Skeleton.js');
 var Button = require('../Button/Button.js');
+require('../Button/Button.Skeleton.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/components/Select/Select.Skeleton.js

@@ -52,4 +52,5 @@ SelectSkeleton.propTypes = {
   hideLabel: PropTypes__default["default"].bool
 };
 
+exports.SelectSkeleton = SelectSkeleton;
 exports["default"] = SelectSkeleton;

package/lib/components/Select/index.js

@@ -0,0 +1,19 @@
+/**
+ * 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 Select = require('./Select.js');
+var Select_Skeleton = require('./Select.Skeleton.js');
+
+
+
+exports.Select = Select["default"];
+exports["default"] = Select["default"];
+exports.SelectSkeleton = Select_Skeleton["default"];

package/lib/components/SelectItem/index.js

@@ -0,0 +1,17 @@
+/**
+ * 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 SelectItem = require('./SelectItem.js');
+
+
+
+exports.SelectItem = SelectItem["default"];
+exports["default"] = SelectItem["default"];

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 = {

package/lib/components/SkeletonText/index.js

@@ -0,0 +1,17 @@
+/**
+ * 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 SkeletonText = require('./SkeletonText.js');
+
+
+
+exports.SkeletonText = SkeletonText["default"];
+exports["default"] = SkeletonText["default"];

package/lib/components/Slider/Slider.Skeleton.js

@@ -62,4 +62,5 @@ SliderSkeleton.propTypes = {
   hideLabel: PropTypes__default["default"].bool
 };
 
+exports.SliderSkeleton = SliderSkeleton;
 exports["default"] = SliderSkeleton;