@carbon/ibm-products 1.11.0 → 1.11.1

package/es/components/ButtonMenu/ButtonMenu.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "iconDescription", "label", "menuOptionsClass", "renderIcon", "size"];
+var _excluded = ["children", "className", "iconDescription", "kind", "label", "menuOptionsClass", "renderIcon", "size"];
 
 /**
  * Copyright IBM Corp. 2021, 2021
@@ -22,7 +22,8 @@ var componentName = 'ButtonMenu'; // NOTE: the component SCSS is not imported he
 // Default values for props
 
 var defaults = {
-  size: 'default'
+  size: 'default',
+  kind: 'primary'
 };
 /**
  * Combining a standard button with an overflow menu, this component appears
@@ -36,6 +37,8 @@ export var ButtonMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       className = _ref.className,
       iconDescription = _ref.iconDescription,
+      _ref$kind = _ref.kind,
+      kind = _ref$kind === void 0 ? defaults.kind : _ref$kind,
       label = _ref.label,
       menuOptionsClass = _ref.menuOptionsClass,
       Icon = _ref.renderIcon,
@@ -50,7 +53,7 @@ export var ButtonMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     menuOptionsClass: cx("".concat(blockClass, "__options"), menuOptionsClass),
     renderIcon: function renderIcon() {
       return /*#__PURE__*/React.createElement("div", {
-        className: cx(["".concat(blockClass, "__trigger"), "".concat(carbon.prefix, "--btn"), "".concat(carbon.prefix, "--btn--primary"), "".concat(carbon.prefix, "--btn--").concat(size)])
+        className: cx(["".concat(blockClass, "__trigger"), "".concat(carbon.prefix, "--btn"), "".concat(carbon.prefix, "--btn--").concat(kind), "".concat(carbon.prefix, "--btn--").concat(size)])
       }, label, Icon && /*#__PURE__*/React.createElement(Icon, {
         "aria-hidden": "true",
         "aria-label": iconDescription,
@@ -86,6 +89,11 @@ ButtonMenu.propTypes = {
    */
   iconDescription: Button.propTypes.iconDescription,
 
+  /**
+   * The three types the menu button supports: primary, tertiary and ghost.
+   */
+  kind: PropTypes.oneOf(['primary', 'tertiary', 'ghost']),
+
   /**
    * The button label for the menu trigger.
    */

package/es/components/index.js

@@ -18,7 +18,6 @@ export { ExportModal } from './ExportModal';
 export { ExpressiveCard } from './ExpressiveCard';
 export { HTTPError403, HTTPError404, HTTPErrorOther } from './HTTPErrors';
 export { ImportModal } from './ImportModal';
-export { LoadingBar } from './LoadingBar';
 export { ModifiedTabs } from './ModifiedTabs';
 export { MultiAddSelect } from './MultiAddSelect';
 export { NotificationsPanel } from './NotificationsPanel';

package/es/global/js/package-settings.js

@@ -40,6 +40,7 @@ var defaults = {
     NoTagsEmptyState: true,
     NotFoundEmptyState: true,
     NotificationsEmptyState: true,
+    OptionsTile: true,
     PageHeader: true,
     ProductiveCard: true,
     RemoveModal: true,
@@ -54,14 +55,12 @@ var defaults = {
     // other public components not yet reviewed and released:
     MultiAddSelect: false,
     SingleAddSelect: false,
-    LoadingBar: false,
     ModifiedTabs: false,
     Toolbar: false,
     ToolbarButton: false,
     ToolbarGroup: false,
     WebTerminal: false,
     EditSidePanel: false,
-    OptionsTile: false,
     CancelableTextEdit: false,
     InlineEdit: false,
     DataSpreadsheet: false

package/lib/components/AddSelect/AddSelectColumn.js

@@ -31,7 +31,7 @@ var _AddSelectList = require("./AddSelectList");
 
 var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 
-var _excluded = ["columnInputPlaceholder", "filteredItems", "header"];
+var _excluded = ["columnInputPlaceholder", "filteredItems", "header", "multiSelection", "setMultiSelection"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -45,30 +45,43 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
   var columnInputPlaceholder = _ref.columnInputPlaceholder,
       filteredItems = _ref.filteredItems,
       header = _ref.header,
+      multiSelection = _ref.multiSelection,
+      setMultiSelection = _ref.setMultiSelection,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
-  var _useState = (0, _react.useState)(''),
+  var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      searchTerm = _useState2[0],
-      setSearchTerm = _useState2[1];
+      allSelected = _useState2[0],
+      setAllSelected = _useState2[1];
 
   var _useState3 = (0, _react.useState)(''),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      sortDirection = _useState4[0],
-      setSortDirection = _useState4[1];
+      searchTerm = _useState4[0],
+      setSearchTerm = _useState4[1];
 
   var _useState5 = (0, _react.useState)(''),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      sortAttribute = _useState6[0],
-      setSortAttribute = _useState6[1];
+      sortDirection = _useState6[0],
+      setSortDirection = _useState6[1];
 
-  var _useState7 = (0, _react.useState)([]),
+  var _useState7 = (0, _react.useState)(''),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      filters = _useState8[0],
-      setFilters = _useState8[1];
+      sortAttribute = _useState8[0],
+      setSortAttribute = _useState8[1];
+
+  var _useState9 = (0, _react.useState)([]),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      filters = _useState10[0],
+      setFilters = _useState10[1];
 
   var blockClass = "".concat(_settings.pkg.prefix, "--add-select");
-  var colClass = "".concat(blockClass, "__column"); // sorting
+  var colClass = "".concat(blockClass, "__column");
+  (0, _react.useEffect)(function () {
+    var isAllSelected = filteredItems.every(function (item) {
+      return multiSelection.includes(item.id);
+    });
+    setAllSelected(isAllSelected);
+  }, [filteredItems, multiSelection]); // sorting
 
   var colSortBy = (_filteredItems$find = filteredItems.find(function (item) {
     return item.sortBy;
@@ -102,6 +115,21 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
     setSortDirection(direction);
   };
 
+  var selectAllHandler = function selectAllHandler(checked) {
+    var itemIds = filteredItems.map(function (item) {
+      return item.id;
+    });
+
+    if (checked) {
+      setMultiSelection([].concat((0, _toConsumableArray2.default)(multiSelection), (0, _toConsumableArray2.default)(itemIds)));
+    } else {
+      var newItems = multiSelection.filter(function (i) {
+        return !itemIds.includes(i);
+      });
+      setMultiSelection(newItems);
+    }
+  };
+
   var filterHandler = function filterHandler(checked, opt) {
     if (checked) {
       var newFilters = [].concat((0, _toConsumableArray2.default)(filters), [opt]);
@@ -199,14 +227,21 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
     })));
   })))), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__tag-container")
-  }, /*#__PURE__*/_react.default.createElement("p", {
-    className: "".concat(blockClass, "__tag-container-label")
-  }, header), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
-    type: "gray",
-    size: "sm"
-  }, colItems.length)), /*#__PURE__*/_react.default.createElement(_AddSelectList.AddSelectList, (0, _extends2.default)({}, props, {
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
+    id: "".concat((0, _uuidv.default)(), "-select-all"),
+    checked: allSelected,
+    onChange: selectAllHandler,
+    labelText: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(blockClass, "__tag-container-label")
+    }, header), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
+      type: "gray",
+      size: "sm"
+    }, colItems.length))
+  })), /*#__PURE__*/_react.default.createElement(_AddSelectList.AddSelectList, (0, _extends2.default)({}, props, {
     inColumn: true,
-    filteredItems: colItems
+    filteredItems: colItems,
+    setMultiSelection: setMultiSelection,
+    multiSelection: multiSelection
   })));
 };
 
@@ -214,6 +249,8 @@ exports.AddSelectColumn = AddSelectColumn;
 AddSelectColumn.propTypes = {
   columnInputPlaceholder: _propTypes.default.string,
   filteredItems: _propTypes.default.array,
-  header: _propTypes.default.string
+  header: _propTypes.default.string,
+  multiSelection: _propTypes.default.array,
+  setMultiSelection: _propTypes.default.func
 };
 AddSelectColumn.displayName = componentName;

package/lib/components/AddSelect/AddSelectList.js

@@ -43,13 +43,13 @@ var AddSelectList = function AddSelectList(_ref) {
     setSingleSelection(value);
   };
 
-  var handleMultiSelection = function handleMultiSelection(value, checked) {
+  var handleMultiSelection = function handleMultiSelection(id, checked) {
     if (checked) {
-      var newValues = [].concat((0, _toConsumableArray2.default)(multiSelection), [value]);
+      var newValues = [].concat((0, _toConsumableArray2.default)(multiSelection), [id]);
       setMultiSelection(newValues);
     } else {
       var _newValues = multiSelection.filter(function (v) {
-        return v !== value;
+        return v !== id;
       });
 
       setMultiSelection(_newValues);
@@ -128,8 +128,8 @@ var AddSelectList = function AddSelectList(_ref) {
       className: "".concat(blockClass, "-cell-wrapper")
     }, multi ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
       className: "".concat(blockClass, "-checkbox"),
-      onChange: function onChange(value) {
-        return handleMultiSelection(item.id, value);
+      onChange: function onChange(checked) {
+        return handleMultiSelection(item.id, checked);
       },
       labelText: !inColumn ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(blockClass, "-cell-title")

package/lib/components/AddSelect/AddSelectSidebar.js

@@ -70,7 +70,8 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
         return handleItemRemove(id);
       },
       kind: "ghost",
-      className: "".concat(blockClass, "-item-remove-button")
+      className: "".concat(blockClass, "-item-remove-button"),
+      size: "sm"
     }));
   };
 

package/lib/components/ButtonMenu/ButtonMenu.js

@@ -21,14 +21,15 @@ var _settings = require("../../settings");
 
 var _carbonComponentsReact = require("carbon-components-react");
 
-var _excluded = ["children", "className", "iconDescription", "label", "menuOptionsClass", "renderIcon", "size"];
+var _excluded = ["children", "className", "iconDescription", "kind", "label", "menuOptionsClass", "renderIcon", "size"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--button-menu");
 var componentName = 'ButtonMenu'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
 // Default values for props
 
 var defaults = {
-  size: 'default'
+  size: 'default',
+  kind: 'primary'
 };
 /**
  * Combining a standard button with an overflow menu, this component appears
@@ -42,6 +43,8 @@ var ButtonMenu = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       className = _ref.className,
       iconDescription = _ref.iconDescription,
+      _ref$kind = _ref.kind,
+      kind = _ref$kind === void 0 ? defaults.kind : _ref$kind,
       label = _ref.label,
       menuOptionsClass = _ref.menuOptionsClass,
       Icon = _ref.renderIcon,
@@ -55,7 +58,7 @@ var ButtonMenu = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     menuOptionsClass: (0, _classnames.default)("".concat(blockClass, "__options"), menuOptionsClass),
     renderIcon: function renderIcon() {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(["".concat(blockClass, "__trigger"), "".concat(_settings.carbon.prefix, "--btn"), "".concat(_settings.carbon.prefix, "--btn--primary"), "".concat(_settings.carbon.prefix, "--btn--").concat(size)])
+        className: (0, _classnames.default)(["".concat(blockClass, "__trigger"), "".concat(_settings.carbon.prefix, "--btn"), "".concat(_settings.carbon.prefix, "--btn--").concat(kind), "".concat(_settings.carbon.prefix, "--btn--").concat(size)])
       }, label, Icon && /*#__PURE__*/_react.default.createElement(Icon, {
         "aria-hidden": "true",
         "aria-label": iconDescription,
@@ -93,6 +96,11 @@ ButtonMenu.propTypes = {
    */
   iconDescription: _carbonComponentsReact.Button.propTypes.iconDescription,
 
+  /**
+   * The three types the menu button supports: primary, tertiary and ghost.
+   */
+  kind: _propTypes.default.oneOf(['primary', 'tertiary', 'ghost']),
+
   /**
    * The button label for the menu trigger.
    */

package/lib/components/index.js

@@ -147,12 +147,6 @@ Object.defineProperty(exports, "InlineEdit", {
     return _InlineEdit.InlineEdit;
   }
 });
-Object.defineProperty(exports, "LoadingBar", {
-  enumerable: true,
-  get: function get() {
-    return _LoadingBar.LoadingBar;
-  }
-});
 Object.defineProperty(exports, "ModifiedTabs", {
   enumerable: true,
   get: function get() {
@@ -326,8 +320,6 @@ var _HTTPErrors = require("./HTTPErrors");
 
 var _ImportModal = require("./ImportModal");
 
-var _LoadingBar = require("./LoadingBar");
-
 var _ModifiedTabs = require("./ModifiedTabs");
 
 var _MultiAddSelect = require("./MultiAddSelect");

package/lib/global/js/package-settings.js

@@ -44,6 +44,7 @@ var defaults = {
     NoTagsEmptyState: true,
     NotFoundEmptyState: true,
     NotificationsEmptyState: true,
+    OptionsTile: true,
     PageHeader: true,
     ProductiveCard: true,
     RemoveModal: true,
@@ -58,14 +59,12 @@ var defaults = {
     // other public components not yet reviewed and released:
     MultiAddSelect: false,
     SingleAddSelect: false,
-    LoadingBar: false,
     ModifiedTabs: false,
     Toolbar: false,
     ToolbarButton: false,
     ToolbarGroup: false,
     WebTerminal: false,
     EditSidePanel: false,
-    OptionsTile: false,
     CancelableTextEdit: false,
     InlineEdit: false,
     DataSpreadsheet: false

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -51,8 +51,8 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.5",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.10",
+    "@babel/core": "^7.17.7",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.11",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
@@ -60,33 +60,33 @@
     "fs-extra": "^10.0.1",
     "glob": "^7.2.0",
     "jest": "^27.5.1",
-    "jest-config-ibm-cloud-cognitive": "^0.23.11",
-    "npm-check-updates": "^12.5.2",
+    "jest-config-ibm-cloud-cognitive": "^0.23.12",
+    "npm-check-updates": "^12.5.4",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
     "sass": "^1.49.9",
     "yargs": "^17.3.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.17.2",
-    "@carbon/telemetry": "^0.0.0-alpha.6",
+    "@babel/runtime": "^7.17.7",
+    "@carbon/telemetry": "^0.1.0",
     "react-resize-detector": "^7.0.0",
     "react-table": "^7.7.0",
     "react-window": "^1.8.6"
   },
   "peerDependencies": {
     "@carbon/colors": "^10.37.0",
-    "@carbon/icons-react": "^10.47.0",
+    "@carbon/icons-react": "^10.48.0",
     "@carbon/import-once": "^10.7.0",
     "@carbon/layout": "^10.37.0",
     "@carbon/motion": "^10.29.0",
-    "@carbon/themes": "^10.52.0",
-    "@carbon/type": "^10.42.0",
-    "carbon-components": "^10.54.0",
-    "carbon-components-react": "^7.54.2",
+    "@carbon/themes": "^10.53.1",
+    "@carbon/type": "^10.43.1",
+    "carbon-components": "^10.55.1",
+    "carbon-components-react": "^7.55.1",
     "carbon-icons": "^7.0.7",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "684e0bceb27d3f1376651a624db23bcedeab5c59"
+  "gitHead": "dd67992eea35e2e7b27032bade757b9e7037fb23"
 }

package/scss/components/AddSelect/_add-select.scss

@@ -159,6 +159,10 @@
 
   // overrides
 
+  .#{$block-class}__tag-container .#{$carbon-prefix}--tag {
+    margin: 0;
+  }
+
   // the influencer sidebar needs to be even with the buttons
   .#{$block-class} .#{$tearsheet-class} .#{$tearsheet-class}__influencer {
     max-width: 29rem;

package/scss/components/InlineEdit/_inline-edit.scss

@@ -264,6 +264,10 @@
 
       svg {
         transition: width $duration--moderate-02 motion(standard, productive);
+        @media (prefers-reduced-motion: reduce) {
+          // stylelint-disable-next-line carbon/motion-token-use
+          transition: none;
+        }
       }
     }
 

package/scss/components/ModifiedTabs/_modified-tabs.scss

@@ -45,6 +45,11 @@
   border-radius: 0;
   cursor: pointer;
   transition: background-color $duration--fast-02 motion(standard, productive);
+  // stylelint-disable-next-line max-nesting-depth
+  @media (prefers-reduced-motion: reduce) {
+    // stylelint-disable-next-line carbon/motion-token-use
+    transition: none;
+  }
 }
 
 .modified-tabs__tab-new-icon {

package/scss/components/NotificationsPanel/_notifications-panel.scss

@@ -183,16 +183,20 @@
           min-width: 5.5rem;
           padding: 0;
 
-          .bx--btn__icon {
+          .#{$carbon-prefix}--btn__icon {
             transition: transform $duration--moderate-02 ease;
+            @media (prefers-reduced-motion: reduce) {
+              // stylelint-disable-next-line carbon/motion-token-use
+              transition: none;
+            }
           }
           &.#{$block-class}__notification-read-more-button {
-            .bx--btn__icon {
+            .#{$carbon-prefix}--btn__icon {
               transform: rotate(0deg);
             }
           }
           &.#{$block-class}__notification-read-less-button {
-            .bx--btn__icon {
+            .#{$carbon-prefix}--btn__icon {
               transform: rotate(180deg);
             }
           }

package/scss/components/Tearsheet/_tearsheet.scss

@@ -47,6 +47,10 @@
       transition: visibility 0s linear,
         background-color $motion-duration motion(entrance, expressive),
         opacity $motion-duration motion(entrance, expressive);
+      @media (prefers-reduced-motion: reduce) {
+        // stylelint-disable-next-line carbon/motion-token-use
+        transition: none;
+      }
     }
 
     &.#{$block-class}--stacked-1-of-2 {

package/scss/components/_index.scss

@@ -25,7 +25,6 @@
 @import './ExpressiveCard/index';
 @import './HTTPErrors/index';
 @import './ImportModal/index';
-@import './LoadingBar/index';
 @import './ModifiedTabs/index';
 @import './MultiAddSelect/index';
 @import './NotificationsPanel/index';

package/es/components/LoadingBar/LoadingBar.js

@@ -1,156 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["active", "ariaLabel", "className", "id", "percentage", "percentageIndicatorText", "showPercentageIndicator", "small"];
-
-/**
- * Copyright IBM Corp. 2021, 2021
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-// Import portions of React that are needed.
-import React, { useEffect, useRef } from 'react'; // Other standard imports.
-
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { pkg
-/*, carbon */
-} from '../../settings'; // Carbon and package components we use.
-
-/* @import(s) of carbon components and other package components. */
-// The block part of our conventional BEM class names (blockClass__E--M).
-
-var blockClass = "".concat(pkg.prefix, "--loading-bar");
-var componentName = 'LoadingBar'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
-// Default values for props
-
-var defaults = {
-  active: true,
-  percentage: undefined,
-  ariaLabel: 'Active loading indicator'
-};
-/**
- * The LoadingBar component provides a way to communicate the loading state to users.
- * It is intended to fill the space of where it's used, and should persist until the
- * loading action is complete. Once complete, the active prop may be set to false to
- * hide the LoadingBar.
- * The LoadingBar has two modes of operation: Indeterminate and Determinate.
- * If no percentage is provided to the component, the LoadingBar behaves in indeterminate
- * mode, with the bar moving from side to side, to indicate loading in progress.
- * If a percentage prop is provided, the determinate mode of operation is used and the
- * loading bar fills until the specified percentage to indicate current progress to
- * the user.
- */
-
-export var LoadingBar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _cx2, _cx3;
-
-  var _ref$active = _ref.active,
-      active = _ref$active === void 0 ? defaults.active : _ref$active,
-      _ref$ariaLabel = _ref.ariaLabel,
-      ariaLabel = _ref$ariaLabel === void 0 ? defaults.ariaLabel : _ref$ariaLabel,
-      className = _ref.className,
-      id = _ref.id,
-      _ref$percentage = _ref.percentage,
-      percentage = _ref$percentage === void 0 ? defaults.percentage : _ref$percentage,
-      percentageIndicatorText = _ref.percentageIndicatorText,
-      showPercentageIndicator = _ref.showPercentageIndicator,
-      small = _ref.small,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  function usePrevious(value) {
-    var ref = useRef();
-    useEffect(function () {
-      // Store current value in ref
-      ref.current = value;
-    }, [value]); // Only re-run if value changes
-    // Return previous value (happens before update in useEffect above)
-
-    return ref.current;
-  }
-
-  var prevActive = usePrevious(active);
-  var isDeterminate = percentage !== undefined;
-  var percentProgress = isDeterminate ? percentage > 100 ? "100%" : percentage + '%' : 0;
-  var actuallyShowPercentageIndicator = isDeterminate && showPercentageIndicator; // switch classes dependant on props
-
-  var loadingWrapper = cx(_defineProperty({}, "".concat(blockClass, "__preload"), !prevActive && !active));
-  var loadingClassName = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__inner"), true), _defineProperty(_cx2, "".concat(blockClass, "__small"), small), _defineProperty(_cx2, "".concat(blockClass, "__linear-stop"), !active && isDeterminate), _defineProperty(_cx2, "".concat(blockClass, "__indefinite-stop"), !active && !isDeterminate), _cx2));
-  var animationClassName = cx((_cx3 = {}, _defineProperty(_cx3, "".concat(blockClass, "__linear-progress"), isDeterminate), _defineProperty(_cx3, "".concat(blockClass, "__stop-progress"), !active && !isDeterminate), _defineProperty(_cx3, "".concat(blockClass, "__indefinite-progress"), active && !isDeterminate), _cx3));
-  var loadingId = id && "loading-bar-id-".concat(id);
-  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
-    className: cx(loadingWrapper, // Apply any supplied class names to the main HTML element.
-    className, blockClass),
-    ref: ref,
-    role: "progressbar",
-    "aria-label": ariaLabel,
-    "aria-atomic": "true",
-    "aria-labelledby": loadingId,
-    "aria-live": active ? 'assertive' : 'off',
-    id: loadingId
-  }), /*#__PURE__*/React.createElement("div", {
-    className: loadingClassName
-  }, /*#__PURE__*/React.createElement("div", _extends({}, isDeterminate && {
-    style: {
-      width: percentProgress
-    }
-  }, {
-    className: "".concat(blockClass, "__progress")
-  }), /*#__PURE__*/React.createElement("div", {
-    className: animationClassName
-  }))), actuallyShowPercentageIndicator && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__indicator-wrapper")
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__indicator")
-  }, active && percentageIndicatorText)));
-}); // Return a placeholder if not released and not enabled by feature flag
-
-LoadingBar = pkg.checkComponentEnabled(LoadingBar, componentName); // The display name of the component, used by React. Note that displayName
-// is used in preference to relying on function.name.
-
-LoadingBar.displayName = componentName; // The types and DocGen commentary for the component props,
-// in alphabetical order (for consistency).
-// See https://www.npmjs.com/package/prop-types#usage.
-
-LoadingBar.propTypes = {
-  /**
-   * Specify whether you want the loading bar indicator to be active or not
-   */
-  active: PropTypes.bool,
-
-  /**
-   * Specify a ariaLabel that would be used to best describe the active loading state
-   */
-  ariaLabel: PropTypes.string,
-
-  /**
-   * Provide an optional className to be applied to the containing node
-   */
-  className: PropTypes.string,
-
-  /**
-   * ID for loading bar
-   */
-  id: PropTypes.string,
-
-  /**
-   * Leave undefined for indeterminate duration or specify percentage complete that the determinate bar should indicate (0-100).
-   */
-  percentage: PropTypes.number,
-
-  /**
-   * In determinate mode, provide text to be shown on percentage indicator
-   */
-  percentageIndicatorText: PropTypes.string,
-
-  /**
-   * In determinate mode, specify whether to show the percentage indicator.
-   */
-  showPercentageIndicator: PropTypes.bool,
-
-  /**
-   * Specify whether you would like the small variant of this component
-   */
-  small: PropTypes.bool
-};

package/es/components/LoadingBar/index.js

@@ -1,7 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2021
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-export { LoadingBar } from './LoadingBar';