@carbon/ibm-products 1.11.2 → 1.14.0

package/lib/components/Datagrid/useSortableColumns.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _iconsReact = require("@carbon/icons-react");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var ordering = {
+  ASC: 'ASC',
+  DESC: 'DESC',
+  NONE: 'NONE'
+};
+
+var useSortableColumns = function useSortableColumns(hooks) {
+  var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref) {
+    var instance = _ref.instance;
+    var onSort = instance.onSort;
+
+    var onSortClick = function onSortClick(column) {
+      var key = column.id;
+      var sortDesc = column.isSortedDesc;
+
+      var _getNewSortOrder = getNewSortOrder(sortDesc),
+          newSortDesc = _getNewSortOrder.newSortDesc,
+          newOrder = _getNewSortOrder.newOrder;
+
+      if (onSort) {
+        onSort(key, newOrder);
+      }
+
+      instance.toggleSortBy(key, newSortDesc, false);
+    };
+
+    var sortableColumns = visibleColumns.map(function (column) {
+      var icon = function icon(col) {
+        if (col.isSorted) {
+          switch (col.isSortedDesc) {
+            case false:
+              return _iconsReact.ArrowUp16;
+
+            case true:
+              return _iconsReact.ArrowDown16;
+
+            default:
+              return _iconsReact.Arrows16;
+          }
+        }
+
+        return _iconsReact.Arrows16;
+      };
+
+      var Header = function Header(headerProp) {
+        return column.disableSortBy === true ? column.Header : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+          onClick: function onClick() {
+            return onSortClick(headerProp.column);
+          },
+          kind: "ghost",
+          renderIcon: icon(headerProp.column)
+        }, column.Header);
+      };
+
+      return _objectSpread(_objectSpread({}, column), {}, {
+        Header: Header
+      });
+    });
+    return (0, _toConsumableArray2.default)(sortableColumns);
+  };
+
+  var sortInstanceProps = function sortInstanceProps(instance) {
+    var onSort = instance.onSort;
+    Object.assign(instance, {
+      manualSortBy: !!onSort,
+      isTableSortable: true
+    });
+  };
+
+  var getNewSortOrder = function getNewSortOrder(sortOrder) {
+    var order = {
+      newSortDesc: undefined,
+      newOrder: ordering.NONE
+    };
+
+    if (sortOrder === false) {
+      order.newOrder = ordering.DESC;
+      order.newSortDesc = true;
+    }
+
+    if (sortOrder === undefined) {
+      order.newOrder = ordering.ASC;
+      order.newSortDesc = false;
+    }
+
+    return order;
+  };
+
+  hooks.visibleColumns.push(sortableVisibleColumns);
+  hooks.useInstance.push(sortInstanceProps);
+};
+
+var _default = useSortableColumns;
+exports.default = _default;

package/lib/components/Datagrid/useStickyColumn.js

@@ -0,0 +1,190 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("react");
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _settings = require("../../settings");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var styleClassPrefix = "".concat(blockClass, "__right-sticky-column");
+var OFFSET_SCROLL_CLASS = "".concat(styleClassPrefix, "-offset-scroll");
+
+var useStickyColumn = function useStickyColumn(hooks) {
+  var tableBodyRef = (0, _react.useRef)();
+  var stickyHeaderCellRef = (0, _react.useRef)();
+  hooks.getCellProps.push(changeProps.bind(null, 'cell', null));
+  hooks.getHeaderProps.push(changeProps.bind(null, 'header', stickyHeaderCellRef));
+  hooks.getTableBodyProps.push(addTableBodyProps.bind(null, tableBodyRef));
+  hooks.getHeaderGroupProps.push(function (props) {
+    return [props, {
+      style: _objectSpread(_objectSpread({}, props.style), {}, {
+        minWidth: 'unset' // unset the min-width calculated by sum of all column min-width
+
+      })
+    }];
+  });
+
+  var useEventListener = function useEventListener(instance) {
+    (0, _react.useEffect)(function () {
+      var tableBodyElement = tableBodyRef.current;
+      var headerCellElement = stickyHeaderCellRef.current;
+
+      if (hasVertScroll(tableBodyElement) && headerCellElement) {
+        headerCellElement.classList.add(OFFSET_SCROLL_CLASS);
+      }
+
+      var boundListener = (0, _debounce.default)(onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
+      window.addEventListener('resize', boundListener);
+      return function () {
+        window.removeEventListener('resize', boundListener);
+      };
+    }, [instance.rows, instance.isFetching]);
+    (0, _react.useEffect)(function () {
+      var tableBodyElement = tableBodyRef.current;
+      var headerCellElement = stickyHeaderCellRef.current;
+
+      var listener = function listener(evt) {
+        toggleStickyShadow(evt.target, headerCellElement);
+      };
+
+      toggleStickyShadow(tableBodyElement, headerCellElement);
+
+      if (tableBodyElement) {
+        tableBodyElement.addEventListener('scroll', listener);
+      }
+
+      return function () {
+        if (tableBodyElement) {
+          tableBodyElement.removeEventListener('scroll', listener);
+        }
+      };
+    }, [instance.rows, instance.isFetching]);
+  };
+
+  var useCheckScroll = function useCheckScroll(instance) {
+    var tableBodyElement = tableBodyRef.current;
+    var headerCellElement = stickyHeaderCellRef.current;
+    (0, _react.useEffect)(function () {
+      onBodyResize(tableBodyElement, headerCellElement);
+    }, [instance.rows, headerCellElement, tableBodyElement]);
+  };
+
+  hooks.useInstance.push(useEventListener);
+  hooks.useInstance.push(useCheckScroll);
+  hooks.useInstance.push(function (instance) {
+    Object.assign(instance, {
+      withStickyColumn: true
+    });
+  });
+  hooks.useInstance.push(function (instance) {
+    // sticky column is defined by consumer
+    // it will always comes after the spacer which is defined by useFlexResize
+    // swap them here to use the spacer to push
+    // sticky column to the right when there are few
+    // columns defined
+    var newColumns = instance.visibleColumns;
+    var spacerIdx = newColumns.findIndex(function (col) {
+      return col.id === 'spacer';
+    });
+    var stickyIdx = newColumns.findIndex(function (col) {
+      return col.sticky === 'right';
+    });
+
+    if (spacerIdx >= 0 && stickyIdx >= 0 && stickyIdx < spacerIdx) {
+      var temp = newColumns[spacerIdx];
+      newColumns[spacerIdx] = newColumns[stickyIdx];
+      newColumns[stickyIdx] = temp;
+    }
+
+    var newHeaders = instance.headers;
+    spacerIdx = newHeaders.findIndex(function (col) {
+      return col.id === 'spacer';
+    });
+    stickyIdx = newHeaders.findIndex(function (col) {
+      return col.sticky === 'right';
+    });
+
+    if (spacerIdx >= 0 && stickyIdx >= 0 && stickyIdx < spacerIdx) {
+      var _temp = newHeaders[spacerIdx];
+      newHeaders[spacerIdx] = newHeaders[stickyIdx];
+      newHeaders[stickyIdx] = _temp;
+    }
+  });
+};
+
+var addTableBodyProps = function addTableBodyProps(tableBodyRef, props) {
+  return [props, {
+    ref: tableBodyRef
+  }];
+};
+
+var changeProps = function changeProps(elementName, headerCellRef, props, data) {
+  var column = data.column || data.cell.column;
+
+  if (column.sticky === 'right') {
+    var _cx;
+
+    return [props, _objectSpread({
+      className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(styleClassPrefix, "-").concat(elementName), true), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__resizableColumn"), false), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__sortableColumn"), false), _cx))
+    }, headerCellRef && {
+      ref: headerCellRef
+    })];
+  }
+
+  return [props];
+};
+
+var onBodyResize = function onBodyResize(tableBodyEle, headerCellEle) {
+  if (headerCellEle) {
+    if (hasVertScroll(tableBodyEle)) {
+      headerCellEle.classList.add(OFFSET_SCROLL_CLASS);
+    } else {
+      headerCellEle.classList.remove(OFFSET_SCROLL_CLASS);
+    }
+
+    toggleStickyShadow(tableBodyEle, headerCellEle);
+  }
+};
+
+var toggleStickyShadow = function toggleStickyShadow(tableBodyEle, headerCellEle) {
+  if (tableBodyEle && headerCellEle) {
+    var isScrolledToRight = tableBodyEle.scrollLeft + tableBodyEle.clientWidth === tableBodyEle.scrollWidth;
+
+    if (isScrolledToRight) {
+      headerCellEle.classList.add("".concat(blockClass, "__sticky-noShadow"));
+      tableBodyEle.classList.add("".concat(blockClass, "__sticky-column-noShadow"));
+    } else {
+      headerCellEle.classList.remove("".concat(blockClass, "__sticky-noShadow"));
+      tableBodyEle.classList.remove("".concat(blockClass, "__sticky-column-noShadow"));
+    }
+  }
+};
+
+var hasVertScroll = function hasVertScroll(element) {
+  if (!element) {
+    return false;
+  }
+
+  var scrollHeight = element.scrollHeight,
+      clientHeight = element.clientHeight;
+  return scrollHeight > clientHeight;
+};
+
+var _default = useStickyColumn;
+exports.default = _default;

package/lib/components/HTTPErrors/assets/HTTPErrorSvg403.js

@@ -24,10 +24,9 @@ var HTTPErrorSvg403 = function HTTPErrorSvg403(_ref) {
   return /*#__PURE__*/_react.default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
-    width: 1584,
-    height: 916,
     viewBox: "0 0 1584 916",
-    className: className
+    className: className,
+    preserveAspectRatio: "xMinYMax meet"
   }, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("clipPath", {
     id: "prefix__clip-path"
   }, /*#__PURE__*/_react.default.createElement("path", {

package/lib/components/HTTPErrors/assets/HTTPErrorSvg404.js

@@ -24,10 +24,9 @@ var HTTPErrorSvg404 = function HTTPErrorSvg404(_ref) {
   return /*#__PURE__*/_react.default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
-    width: 1584,
-    height: 916,
     viewBox: "0 0 1584 916",
-    className: className
+    className: className,
+    preserveAspectRatio: "xMinYMax meet"
   }, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("clipPath", {
     id: "prefix__clip-path"
   }, /*#__PURE__*/_react.default.createElement("path", {

package/lib/components/HTTPErrors/assets/HTTPErrorSvgOther.js

@@ -24,10 +24,9 @@ var HTTPErrorSvgOther = function HTTPErrorSvgOther(_ref) {
   return /*#__PURE__*/_react.default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
-    width: 1584,
-    height: 916,
     viewBox: "0 0 1584 916",
-    className: className
+    className: className,
+    preserveAspectRatio: "xMinYMax meet"
   }, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("clipPath", {
     id: "prefix__clip-path"
   }, /*#__PURE__*/_react.default.createElement("path", {

package/lib/components/ImportModal/ImportModal.js

@@ -275,7 +275,7 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     size: "sm",
     disabled: importButtonDisabled
   }, inputButtonText)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "bx--file-container ".concat(blockClass, "__file-container")
+    className: "".concat(_settings.carbon.prefix, "--file-container ").concat(blockClass, "__file-container")
   }, hasFiles && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__helper-text")
   }, fileStatusString), files.map(function (file) {

package/lib/components/TagSet/TagSet.js

@@ -57,7 +57,7 @@ var allTagsModalSearchThreshold = 10; // Default values for props
 
 var defaults = {
   align: 'start',
-  allTagsModalTarget: document.body,
+  // allTagsModalTarget: document.body,
   overflowAlign: 'center',
   overflowDirection: 'bottom'
 };
@@ -65,8 +65,7 @@ var defaults = {
 var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _ref$align = _ref.align,
       align = _ref$align === void 0 ? defaults.align : _ref$align,
-      _ref$allTagsModalTarg = _ref.allTagsModalTarget,
-      allTagsModalTarget = _ref$allTagsModalTarg === void 0 ? defaults.allTagsModalTarget : _ref$allTagsModalTarg,
+      allTagsModalTargetIn = _ref.allTagsModalTarget,
       className = _ref.className,
       maxVisible = _ref.maxVisible,
       _ref$overflowAlign = _ref.overflowAlign,
@@ -113,10 +112,20 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
   var overflowTag = (0, _react.useRef)(null);
 
+  var _useState11 = (0, _react.useState)(null),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      allTagsModalTarget = _useState12[0],
+      setAllTagsModalTarget = _useState12[1];
+
   var handleShowAllClick = function handleShowAllClick() {
     setShowAllModalOpen(true);
   };
 
+  (0, _react.useEffect)(function () {
+    var _document;
+
+    setAllTagsModalTarget(allTagsModalTargetIn !== null && allTagsModalTargetIn !== void 0 ? allTagsModalTargetIn : (_document = document) === null || _document === void 0 ? void 0 : _document.body);
+  }, [allTagsModalTargetIn]);
   (0, _react.useEffect)(function () {
     var newSizingTags = []; // create sizing tags
 

package/lib/components/UserProfileImage/UserProfileImage.js

@@ -27,7 +27,7 @@ var _iconsReact = require("@carbon/icons-react");
 
 var _carbonComponentsReact = require("carbon-components-react");
 
-var _excluded = ["backgroundColor", "className", "kind", "initials", "image", "imageDescription", "size", "theme", "tooltipText"];
+var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--user-profile-image");
 var componentName = 'UserProfileImage'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -40,6 +40,7 @@ var UserProfileImage = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
   var backgroundColor = _ref.backgroundColor,
       className = _ref.className,
       kind = _ref.kind,
+      icon = _ref.icon,
       initials = _ref.initials,
       image = _ref.image,
       imageDescription = _ref.imageDescription,
@@ -70,18 +71,40 @@ var UserProfileImage = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
     return initials.match(/(^\S\S?|\b\S)?/g).join('').match(/(^\S|\S$)?/g).join('').toUpperCase();
   };
 
-  var FillItem = image ? function () {
-    return /*#__PURE__*/_react.default.createElement("img", {
-      alt: imageDescription,
-      src: image,
-      className: "".concat(blockClass, "__photo ").concat(blockClass, "__photo--").concat(size)
-    });
-  } : initials ? formatInitials : kind && size && icons[kind][size];
+  var getFillItem = function getFillItem() {
+    if (image) {
+      return function () {
+        return /*#__PURE__*/_react.default.createElement("img", {
+          alt: imageDescription,
+          src: image,
+          className: "".concat(blockClass, "__photo ").concat(blockClass, "__photo--").concat(size)
+        });
+      };
+    }
+
+    if (initials) {
+      return formatInitials;
+    }
+
+    if (kind && size) {
+      return icons[kind][size];
+    }
+
+    return icon;
+  }; // if user doesn't provide a color just generate a random one
+
+
+  var getRandomColor = function getRandomColor() {
+    var colors = ['light-cyan', 'dark-cyan', 'light-gray', 'dark-gray', 'light-green', 'dark-green', 'light-magenta', 'dark-magenta', 'light-purple', 'dark-purple', 'light-teal', 'dark-teal'];
+    return colors[Math.floor(Math.random() * colors.length)];
+  };
+
+  var FillItem = getFillItem();
 
   var renderUserProfileImage = function renderUserProfileImage() {
     return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
       ref: ref,
-      className: (0, _classnames.default)([blockClass, className, "".concat(blockClass, "--").concat(size), "".concat(blockClass, "--").concat(theme), "".concat(blockClass, "--").concat(backgroundColor)])
+      className: (0, _classnames.default)([blockClass, className, "".concat(blockClass, "--").concat(size), "".concat(blockClass, "--").concat(theme), "".concat(blockClass, "--").concat(backgroundColor || getRandomColor())])
     }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(FillItem, null));
   };
 
@@ -107,6 +130,11 @@ UserProfileImage.propTypes = {
    */
   className: _propTypes.default.string,
 
+  /**
+   * Provide a custom icon to use if you need to use an icon other than the included ones
+   */
+  icon: _propTypes.default.object,
+
   /**
    * When passing the image prop, supply a full path to the image to be displayed.
    */
@@ -117,7 +145,7 @@ UserProfileImage.propTypes = {
    */
   imageDescription: _propTypes.default.string.isRequired.if(function (_ref2) {
     var image = _ref2.image;
-    return image;
+    return !!image;
   }),
 
   /**

package/lib/components/index.js

@@ -87,6 +87,12 @@ Object.defineProperty(exports, "DataSpreadsheet", {
     return _DataSpreadsheet.DataSpreadsheet;
   }
 });
+Object.defineProperty(exports, "Datagrid", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.Datagrid;
+  }
+});
 Object.defineProperty(exports, "EditSidePanel", {
   enumerable: true,
   get: function get() {
@@ -356,4 +362,6 @@ var _OptionsTile = require("./OptionsTile");
 
 var _InlineEdit = require("./InlineEdit");
 
-var _DataSpreadsheet = require("./DataSpreadsheet");
+var _DataSpreadsheet = require("./DataSpreadsheet");
+
+var _Datagrid = require("./Datagrid");

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

@@ -67,7 +67,8 @@ var defaults = {
     EditSidePanel: false,
     CancelableTextEdit: false,
     InlineEdit: false,
-    DataSpreadsheet: false
+    DataSpreadsheet: false,
+    Datagrid: false
     /* new component flags here - comment used by generate CLI */
 
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.11.2",
+  "version": "1.14.0",
   "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.7",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.11",
+    "@babel/core": "^7.17.8",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.12",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
@@ -60,33 +60,37 @@
     "fs-extra": "^10.0.1",
     "glob": "^7.2.0",
     "jest": "^27.5.1",
-    "jest-config-ibm-cloud-cognitive": "^0.23.12",
+    "jest-config-ibm-cloud-cognitive": "^0.23.14",
+    "namor": "^1.1.2",
     "npm-check-updates": "^12.5.4",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "sass": "^1.49.9",
-    "yargs": "^17.3.1"
+    "sass": "^1.49.10",
+    "yargs": "^17.4.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.17.7",
+    "@babel/runtime": "^7.17.8",
     "@carbon/telemetry": "^0.1.0",
+    "immutability-helper": "^3.1.1",
+    "react-dnd": "^15.1.2",
+    "react-dnd-html5-backend": "^15.1.3",
     "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.48.0",
+    "@carbon/colors": "^10.37.1",
+    "@carbon/icons-react": "^10.49.0",
     "@carbon/import-once": "^10.7.0",
-    "@carbon/layout": "^10.37.0",
+    "@carbon/layout": "^10.37.1",
     "@carbon/motion": "^10.29.0",
-    "@carbon/themes": "^10.53.1",
-    "@carbon/type": "^10.43.1",
-    "carbon-components": "^10.55.1",
-    "carbon-components-react": "^7.55.1",
+    "@carbon/themes": "^10.54.0",
+    "@carbon/type": "^10.44.0",
+    "carbon-components": "^10.56.0",
+    "carbon-components-react": "^7.56.0",
     "carbon-icons": "^7.0.7",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "1327941f8527f6ea940253307039bc99ba0a43f2"
+  "gitHead": "2d85df61f66068c1c23e29a498eb84b94b334d90"
 }

package/scss/components/AboutModal/_about-modal.scss

@@ -19,7 +19,7 @@
   // The block part of our conventional BEM class names (blockClass__E--M).
   $block-class: #{$pkg-prefix}--about-modal;
 
-  .#{$block-class} .bx--modal-container {
+  .#{$block-class} .#{$carbon-prefix}--modal-container {
     grid-template-rows: auto auto 1fr auto;
   }
 
@@ -56,7 +56,7 @@
   }
 
   .#{$block-class}.#{$block-class}--with-tabs
-    .bx--modal-content--overflow-indicator {
+    .#{$carbon-prefix}--modal-content--overflow-indicator {
     // stylelint-disable-next-line carbon/layout-token-use
     bottom: calc(#{$spacing-09} + #{$spacing-08});
   }

package/scss/components/ActionSet/_action-set.scss

@@ -101,7 +101,9 @@
     flex: 1 1 25%;
   }
 
-  .#{$block-class} .#{$block-class}__action-button .bx--inline-loading {
+  .#{$block-class}
+    .#{$block-class}__action-button
+    .#{$carbon-prefix}--inline-loading {
     position: absolute;
     top: 0;
     right: 0;