@carbon/ibm-products 2.8.0 → 2.9.0

package/lib/components/Datagrid/Datagrid/DraggableElement.js

@@ -11,7 +11,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _icons = require("@carbon/react/icons");
-var _reactDnd = require("react-dnd");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 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); }
@@ -25,25 +24,26 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 
+// import { useDrag, useDrop } from 'react-dnd';
+
 var useEffect = React.useEffect,
   useRef = React.useRef,
   useState = React.useState;
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-var DRAG_TYPE = "".concat(blockClass, "__shared-ui-draggable-element");
+
+// const DRAG_TYPE = `${blockClass}__shared-ui-draggable-element`;
+
 var DraggableElement = function DraggableElement(_ref) {
   var _cx;
-  var id = _ref.id,
-    index = _ref.index,
+  var index = _ref.index,
     listData = _ref.listData,
     children = _ref.children,
-    type = _ref.type,
     disabled = _ref.disabled,
     ariaLabel = _ref.ariaLabel,
     onGrab = _ref.onGrab,
     onArrowKeyDown = _ref.onArrowKeyDown,
     isFocused = _ref.isFocused,
     isSticky = _ref.isSticky,
-    moveElement = _ref.moveElement,
     selected = _ref.selected,
     _ref$positionLabel = _ref.positionLabel,
     positionLabel = _ref$positionLabel === void 0 ? 'Current position {index} of {total}' : _ref$positionLabel,
@@ -52,72 +52,66 @@ var DraggableElement = function DraggableElement(_ref) {
     _ref$droppedLabel = _ref.droppedLabel,
     droppedLabel = _ref$droppedLabel === void 0 ? '{itemName} dropped.' : _ref$droppedLabel;
   var ref = useRef();
-  var _useDrop = (0, _reactDnd.useDrop)({
-      accept: DRAG_TYPE + type,
-      collect: function collect(monitor) {
-        return {
-          isOver: !!monitor.isOver()
-        };
-      },
-      drop: function drop(item) {
-        moveElement(item.index, index);
-      },
-      canDrop: function canDrop() {
-        return !disabled;
-      },
-      hover: function hover(item) {
-        var dragIndex = item.index;
-        var hoverIndex = index;
-        // Don't replace items with themselves
-        if (dragIndex === hoverIndex || disabled) {
-          return;
-        }
-        moveElement(dragIndex, hoverIndex);
-        // Time to actually perform the action
-        // Note: we're mutating the monitor item here!
-        // Generally it's better to avoid mutations,
-        // but it's good here for the sake of performance
-        // to avoid expensive index searches.
-        // eslint-disable-next-line no-param-reassign
-        item.index = hoverIndex;
-      }
-    }),
-    _useDrop2 = (0, _slicedToArray2.default)(_useDrop, 2),
-    isOver = _useDrop2[0].isOver,
-    drop = _useDrop2[1];
-  var _useDrag = (0, _reactDnd.useDrag)({
-      type: DRAG_TYPE + type,
-      item: {
-        id: id,
-        index: index
-      },
-      canDrag: function canDrag() {
-        return !disabled;
-      },
-      collect: function collect(monitor) {
-        return {
-          isDragging: monitor.isDragging()
-        };
-      }
-    }),
-    _useDrag2 = (0, _slicedToArray2.default)(_useDrag, 3),
-    isDragging = _useDrag2[0].isDragging,
-    drag = _useDrag2[1],
-    preview = _useDrag2[2];
+
+  // const [{ isOver }, drop] = useDrop({
+  //   accept: DRAG_TYPE + type,
+  //   collect: (monitor) => ({
+  //     isOver: !!monitor.isOver(),
+  //   }),
+  //   drop: (item) => {
+  //     moveElement(item.index, index);
+  //   },
+  //   canDrop: () => !disabled,
+  //   hover(item) {
+  //     const dragIndex = item.index;
+  //     const hoverIndex = index;
+  //     // Don't replace items with themselves
+  //     if (dragIndex === hoverIndex || disabled) {
+  //       return;
+  //     }
+  //     // moveElement(dragIndex, hoverIndex);
+  //     // Time to actually perform the action
+  //     // Note: we're mutating the monitor item here!
+  //     // Generally it's better to avoid mutations,
+  //     // but it's good here for the sake of performance
+  //     // to avoid expensive index searches.
+  //     // eslint-disable-next-line no-param-reassign
+  //     item.index = hoverIndex;
+  //   },
+  // });
+
+  // const [{ isDragging }, drag, preview] = useDrag({
+  //   type: DRAG_TYPE + type,
+  //   item: { id, index },
+  //   canDrag: () => !disabled,
+  //   collect: (monitor) => ({
+  //     isDragging: monitor.isDragging(),
+  //   }),
+  // });
+
+  // Temporarily disable drag support because of commonjs support/issues with react-dnd in latest version
+  var _useState = useState(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+    isDragging = _useState2[0];
+  var _useState3 = useState(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
+    isOver = _useState4[0];
+  var preview = useRef();
+  var drag = useRef();
   useEffect(function () {
     if (isFocused && ref && ref.current) {
       ref.current.focus();
     }
   }, [isFocused]);
-  var _useState = useState(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isGrabbed = _useState2[0],
-    setIsGrabbed = _useState2[1];
-  var _useState3 = useState(isFocused),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isFocusedOnItem = _useState4[0],
-    setIsFocusedOnItem = _useState4[1];
-  drop(ref);
+  var _useState5 = useState(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isGrabbed = _useState6[0],
+    setIsGrabbed = _useState6[1];
+  var _useState7 = useState(isFocused),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    isFocusedOnItem = _useState8[0],
+    setIsFocusedOnItem = _useState8[1];
+  // drop(ref);
   var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: (0, _classnames.default)({
       disabled: disabled
@@ -178,7 +172,7 @@ DraggableElement.propTypes = {
   isFocused: _propTypes.default.bool.isRequired,
   isSticky: _propTypes.default.bool,
   listData: _propTypes.default.array.isRequired,
-  moveElement: _propTypes.default.func.isRequired,
+  // moveElement: PropTypes.func.isRequired,
   onArrowKeyDown: _propTypes.default.func.isRequired,
   onGrab: _propTypes.default.func.isRequired,
   positionLabel: _propTypes.default.string,

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js

@@ -9,20 +9,20 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactDnd = require("react-dnd");
-var _reactDndHtml5Backend = require("react-dnd-html5-backend");
 var _react2 = require("@carbon/react");
-var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));
 var _settings = require("../../../../../settings");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _DraggableItemsList = require("./DraggableItemsList");
 /**
- * Copyright IBM Corp. 2022, 2022
+ * Copyright IBM Corp. 2022, 2023
  *
  * 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 { DndProvider } from 'react-dnd';
+// import { HTML5Backend } from 'react-dnd-html5-backend';
+// import update from 'immutability-helper';
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var getNextIndex = function getNextIndex(array, currentIndex, key) {
   var newIndex = -1;
@@ -51,16 +51,23 @@ var Columns = function Columns(_ref) {
     _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
     focusIndex = _React$useState4[0],
     setFocusIndex = _React$useState4[1];
-  var moveElement = _react.default.useCallback(function (dragIndex, hoverIndex) {
-    var dragCard = columns[dragIndex];
-    setColumnsObject((0, _immutabilityHelper.default)(columns, {
-      $splice: [[dragIndex, 1], [hoverIndex, 0, dragCard]]
-    }));
-  }, [columns, setColumnsObject]);
+  // const moveElement = React.useCallback(
+  //   (dragIndex, hoverIndex) => {
+  //     const dragCard = columns[dragIndex];
+  //     setColumnsObject(
+  //       update(columns, {
+  //         $splice: [
+  //           [dragIndex, 1],
+  //           [hoverIndex, 0, dragCard],
+  //         ],
+  //       })
+  //     );
+  //   },
+  //   [columns, setColumnsObject]
+  // );
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__customize-columns-column-list")
-  }, /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
-    backend: _reactDndHtml5Backend.HTML5Backend
   }, /*#__PURE__*/_react.default.createElement("ol", {
     className: "".concat(blockClass, "__customize-columns-column-list--focus"),
     role: "listbox",
@@ -97,13 +104,14 @@ var Columns = function Columns(_ref) {
     columns: columns,
     filterString: filterString,
     focusIndex: focusIndex,
-    getNextIndex: getNextIndex,
-    moveElement: moveElement,
+    getNextIndex: getNextIndex
+    // moveElement={moveElement}
+    ,
     onSelectColumn: onSelectColumn,
     setAriaRegionText: setAriaRegionText,
     setColumnsObject: setColumnsObject,
     setFocusIndex: setFocusIndex
-  }))));
+  })));
 };
 Columns.propTypes = {
   assistiveTextDisabledInstructionsLabel: _propTypes.default.string,

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js

@@ -25,7 +25,6 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
     filterString = _ref.filterString,
     focusIndex = _ref.focusIndex,
     getNextIndex = _ref.getNextIndex,
-    moveElement = _ref.moveElement,
     onSelectColumn = _ref.onSelectColumn,
     setAriaRegionText = _ref.setAriaRegionText,
     setColumnsObject = _ref.setColumnsObject,
@@ -75,8 +74,9 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
       disabled: filterString.length > 0 || isFrozenColumn,
       ariaLabel: colHeaderTitle,
       onGrab: setAriaRegionText,
-      isFocused: focusIndex === i,
-      moveElement: moveElement,
+      isFocused: focusIndex === i
+      // moveElement={moveElement}
+      ,
       onArrowKeyDown: function onArrowKeyDown(e, isGrabbed, currentIndex) {
         if (isGrabbed) {
           var _columns$nextIndex;
@@ -85,7 +85,7 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
           e.stopPropagation();
           if (nextIndex >= 0 && !((_columns$nextIndex = columns[nextIndex]) !== null && _columns$nextIndex !== void 0 && _columns$nextIndex.sticky)) {
             setFocusIndex(nextIndex);
-            moveElement(currentIndex, nextIndex);
+            // moveElement(currentIndex, nextIndex);
             e.target.scrollIntoView({
               block: 'center'
             });
@@ -103,7 +103,7 @@ DraggableItemsList.propTypes = {
   filterString: _propTypes.PropTypes.string.isRequired,
   focusIndex: _propTypes.PropTypes.number.isRequired,
   getNextIndex: _propTypes.PropTypes.func.isRequired,
-  moveElement: _propTypes.PropTypes.func.isRequired,
+  // moveElement: PropTypes.func.isRequired,
   onSelectColumn: _propTypes.PropTypes.func.isRequired,
   setAriaRegionText: _propTypes.PropTypes.func.isRequired,
   setColumnsObject: _propTypes.PropTypes.func.isRequired,

package/lib/components/FilterSummary/FilterSummary.js

@@ -5,19 +5,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@carbon/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _TagSet = require("../TagSet");
 var _settings = require("../../settings");
+var _excluded = ["key", "value"];
 /**
  * Copyright IBM Corp. 2022, 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.
  */
-
+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, "--filter-summary");
 var FilterSummary = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref) {
   var _ref$className = _ref.className,
@@ -33,11 +37,12 @@ var FilterSummary = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref)
   var tagFilters = filters.map(function (_ref2) {
     var _renderLabel;
     var key = _ref2.key,
-      value = _ref2.value;
-    return {
+      value = _ref2.value,
+      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+    return _objectSpread(_objectSpread({}, rest), {}, {
       type: 'gray',
       label: (_renderLabel = renderLabel === null || renderLabel === void 0 ? void 0 : renderLabel(key, value)) !== null && _renderLabel !== void 0 ? _renderLabel : "".concat(key, ": ").concat(value)
-    };
+    });
   });
   return /*#__PURE__*/_react2.default.createElement("div", {
     ref: ref,

package/lib/components/OptionsTile/OptionsTile.js

@@ -220,7 +220,7 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   }, (0, _devtools.getDevtoolsProps)(componentName)), enabled !== undefined && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__toggle-container")
   }, /*#__PURE__*/_react.default.createElement(_react2.Toggle, {
-    id: "".concat(id, "-toggle"),
+    id: "".concat(titleId, "-toggle"),
     className: "".concat(blockClass, "__toggle"),
     toggled: enabled,
     "aria-labelledby": titleId,

package/lib/components/SidePanel/SidePanel.js

@@ -295,12 +295,14 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     if (includeOverlay && open) {
       bodyElement.style.overflow = 'hidden';
     } else if (includeOverlay && !open) {
-      bodyElement.style.overflow = 'initial';
+      bodyElement.style.overflow = '';
     }
     if (includeOverlay && !preventCloseOnClickOutside) {
       document.addEventListener('click', handleOutsideClick);
     }
     return function () {
+      var bodyElement = document.body;
+      bodyElement.style.overflow = '';
       document.removeEventListener('click', handleOutsideClick);
     };
   }, [includeOverlay, onRequestClose, open, preventCloseOnClickOutside, ref, onUnmount]);

package/lib/components/TagSet/TagSet.js

@@ -115,8 +115,7 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         }
       }, /*#__PURE__*/_react.default.createElement(_react2.Tag, (0, _extends2.default)({}, other, {
         // ensure id is not duplicated
-        "data-original-id": id,
-        filter: false
+        "data-original-id": id
       }), label));
     }) : []);
     setSizingTags(newSizingTags);
@@ -127,7 +126,6 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       var label = _ref3.label,
         other = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
       return /*#__PURE__*/_react.default.createElement(_react2.Tag, (0, _extends2.default)({}, other, {
-        filter: false,
         key: "displayed-tag-".concat(index)
       }), label);
     }) : [];
@@ -316,12 +314,10 @@ TagSet.propTypes = {
    * with properties: **label**\* (required) to supply the tag content, and
    * other properties will be passed to the Carbon Tag component, such as
    * **type**, **disabled**, **ref**, **className** , and any other Tag props.
-   * NOTE: **filter** is not supported. Any other fields in the object will be passed through to the HTML element
-   * as HTML attributes.
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-tag--default
    */
-  tags: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, (0, _propsHelper.prepareProps)(_react2.Tag.propTypes, 'filter')), {}, {
+  tags: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _react2.Tag.propTypes), {}, {
     label: _propTypes.default.string.isRequired,
     // we duplicate this prop to improve the DocGen
     type: _propTypes.default.oneOf(tagTypes)

package/lib/global/decorators/sidePanelDecorator.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sidePanelDecorator = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@carbon/react");
+var sidePanelDecorator = function sidePanelDecorator(renderHeader, prefix) {
+  return function (Story) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefix, "container")
+    }, renderHeader(), /*#__PURE__*/_react.default.createElement(_react2.Content, {
+      className: "".concat(prefix, "content")
+    }, /*#__PURE__*/_react.default.createElement(Story, null)));
+  };
+};
+exports.sidePanelDecorator = sidePanelDecorator;

package/lib/global/js/utils/StoryDocsPage.js

@@ -12,6 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _blocks = require("@storybook/blocks");
 var _changeCase = require("change-case");
 var _storyHelper = require("./story-helper");
+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; } /**
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           * Copyright IBM Corp. 2023, 2023
@@ -87,12 +88,14 @@ var StoryDocsPage = function StoryDocsPage(_ref2) {
   var storyInfo = (0, _storyHelper.storyDocsPageInfo)(csfFile);
   var guidelinesHref = altGuidelinesHref !== null && altGuidelinesHref !== void 0 ? altGuidelinesHref : storyInfo.guidelinesHref;
   var isFullScreen = (csfFile === null || csfFile === void 0 || (_csfFile$meta = csfFile.meta) === null || _csfFile$meta === void 0 || (_csfFile$meta = _csfFile$meta.parameters) === null || _csfFile$meta === void 0 ? void 0 : _csfFile$meta.layout) === 'fullscreen' || false;
-  var storyHelperClass = isFullScreen ? 'c4p--story-docs-page--fullscreen' : '';
+  var storyHelperClass = isFullScreen ? "".concat(_settings.pkg.prefix, "--story-docs-page--fullscreen") : '';
   var processedBlocks = processBlocks(blocks, csfFile.stories, omitUnreferencedStories);
   var storyCount = (_processedBlocks$filt = processedBlocks === null || processedBlocks === void 0 ? void 0 : processedBlocks.filter(function (block) {
     return !!block.story;
   }).length) !== null && _processedBlocks$filt !== void 0 ? _processedBlocks$filt : 0;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_blocks.Title, null, altTitle !== null && altTitle !== void 0 ? altTitle : storyInfo.title), guidelinesHref ? guidelinesHref && Array.isArray(guidelinesHref) ? guidelinesHref.map(function (_ref3, index) {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-story-title": storyInfo.title
+  }, /*#__PURE__*/_react.default.createElement(_blocks.Title, null, altTitle !== null && altTitle !== void 0 ? altTitle : storyInfo.title), guidelinesHref ? guidelinesHref && Array.isArray(guidelinesHref) ? guidelinesHref.map(function (_ref3, index) {
     var href = _ref3.href,
       label = _ref3.label;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, index > 0 && ' | ', /*#__PURE__*/_react.default.createElement(_blocks.AnchorMdx, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -51,36 +51,34 @@
     "postinstall": "carbon-telemetry collect --install",
     "test": "jest --colors",
     "//upgrade-dependencies": "# don't upgrade carbon (done globally), react/react-dom (explicit range peer dependency), chalk (issue #1596)",
-    "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^react-dnd|^namor)/'"
+    "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^namor)/'"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.9",
-    "@babel/core": "^7.22.9",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.38",
+    "@babel/cli": "^7.22.10",
+    "@babel/core": "^7.22.10",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.39",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "fs-extra": "^11.1.1",
     "glob": "^10.3.3",
-    "jest": "^29.6.1",
-    "jest-config-ibm-cloud-cognitive": "^1.1.0",
-    "jest-environment-jsdom": "^29.6.1",
+    "jest": "^29.6.2",
+    "jest-config-ibm-cloud-cognitive": "^1.1.1",
+    "jest-environment-jsdom": "^29.6.2",
     "namor": "^1.1.2",
-    "npm-check-updates": "^16.10.15",
+    "npm-check-updates": "^16.11.1",
     "npm-run-all": "^4.1.5",
     "rimraf": "^5.0.1",
-    "sass": "1.63.6",
+    "sass": "^1.64.2",
     "yargs": "^17.7.2"
   },
   "dependencies": {
-    "@babel/runtime": "^7.22.6",
+    "@babel/runtime": "^7.22.10",
     "@carbon/telemetry": "^0.1.0",
     "framer-motion": "^6.5.1 < 7",
     "immutability-helper": "^3.1.1",
     "lodash": "^4.17.21",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1",
     "react-table": "^7.8.0",
     "react-window": "^1.8.9"
   },
@@ -88,11 +86,11 @@
     "@carbon/grid": "^11.18.0",
     "@carbon/layout": "^11.18.0",
     "@carbon/motion": "^11.15.0",
-    "@carbon/react": "^1.35.0",
+    "@carbon/react": "^1.37.0",
     "@carbon/themes": "^11.23.0",
     "@carbon/type": "^11.22.0",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "ac236b7f8a9eec9f24898df158dac71e52f091b2"
+  "gitHead": "d16309a4cb6cc8d75c12335695015fc272752f36"
 }

package/scss/components/CreateInfluencer/_create-influencer.scss

@@ -8,6 +8,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/type';
 
 $influencer-block-class: #{c4p-settings.$pkg-prefix}--create-influencer;
 $create-tearsheet-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-create;
@@ -39,6 +40,7 @@ $influencerAnimationStart: calc(-1 * #{$spacing-05});
 .#{$influencer-block-class} {
   display: grid;
   height: 100%;
+  padding: $spacing-06 $spacing-07;
   grid-template-columns: 100%;
   grid-template-rows: 1fr auto;
 }
@@ -49,8 +51,10 @@ $influencerAnimationStart: calc(-1 * #{$spacing-05});
   overflow-y: auto;
 }
 
-.#{$influencer-block-class}__progress-indicator.#{c4p-settings.$carbon-prefix}--progress {
-  padding: $spacing-06;
+.#{$influencer-block-class}__title {
+  @include type.type-style('heading-03');
+
+  margin-bottom: $spacing-06;
 }
 
 .#{$influencer-block-class}__view-all-toggle {

package/scss/components/CreateSidePanel/_storybook-styles.scss

@@ -8,6 +8,7 @@
 @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing';
+@use '../../global/decorators/side-panel-decorator' as *;
 
 $block-class: #{c4p-settings.$pkg-prefix}--create-side-panel;
 $story-prefix: create-side-panel-stories__;
@@ -27,3 +28,5 @@ $story-prefix: create-side-panel-stories__;
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--number__control-btn::after {
   background-color: $field-02;
 }
+
+@include side-panel-decorator($story-prefix);

package/scss/components/DataSpreadsheet/_storybook-styles.scss

@@ -5,8 +5,13 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-$story-anchor: 'data-spreadsheet';
-div[id*='#{$story-anchor}'] .docs-story > div:first-child > div:first-child {
+$story-anchor: 'DataSpreadsheet';
+
+$story-anchor: 'DataSpreadsheet';
+div[data-story-title*='#{$story-anchor}']
+  .docs-story
+  > div:first-child
+  > div:first-child {
   overflow: auto;
   width: 100%;
 }

package/scss/components/Datagrid/_storybook-styles.scss

@@ -26,6 +26,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   padding: $spacing-07;
 }
 
+#storybook-root
+  .#{c4p-settings.$carbon-prefix}--actionable-notification__content {
+  white-space: pre-wrap;
+}
+
 .carbon-nested-table {
   border-bottom: 1px solid $border-subtle-01;
 
@@ -128,8 +133,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   }
 }
 
-$story-anchor: 'datagrid';
-div[id*='#{$story-anchor}'] .docs-story > div:first-child > div:first-child {
+$story-anchor: 'Datagrid';
+div[data-story-title*='#{$story-anchor}']
+  .docs-story
+  > div:first-child
+  > div:first-child {
   overflow: auto;
   width: 100%;
 }