@carbon/ibm-products 1.18.1 → 1.19.1

package/lib/components/DataSpreadsheet/utils/checkSelectedHeaderCell.js

@@ -13,12 +13,26 @@ var _deepCloneObject = require("../../../global/js/utils/deepCloneObject");
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var checkSelectedHeaderCell = function checkSelectedHeaderCell(headerIndex, selectionAreas, headerType) {
+var checkSelectedHeaderCell = function checkSelectedHeaderCell(headerIndex, selectionAreas, headerType, items) {
   var areasCloned = (0, _deepCloneObject.deepCloneObject)(selectionAreas);
   var isSelectedHeader = areasCloned.some(function (area) {
-    var _area$header, _area$header2;
+    var _area$point, _area$point2, _area$point3, _area$point4, _area$point5, _area$point6, _area$point7, _area$point8;
 
-    return (area === null || area === void 0 ? void 0 : (_area$header = area.header) === null || _area$header === void 0 ? void 0 : _area$header.type) === headerType && headerIndex === (area === null || area === void 0 ? void 0 : (_area$header2 = area.header) === null || _area$header2 === void 0 ? void 0 : _area$header2.index);
+    var oppositeType = headerType === 'column' ? 'row' : 'column';
+    var minOppositeSelection = Math.min(area === null || area === void 0 ? void 0 : (_area$point = area.point1) === null || _area$point === void 0 ? void 0 : _area$point[oppositeType], area === null || area === void 0 ? void 0 : (_area$point2 = area.point2) === null || _area$point2 === void 0 ? void 0 : _area$point2[oppositeType]);
+    var maxOppositeSelection = Math.max(area === null || area === void 0 ? void 0 : (_area$point3 = area.point1) === null || _area$point3 === void 0 ? void 0 : _area$point3[oppositeType], area === null || area === void 0 ? void 0 : (_area$point4 = area.point2) === null || _area$point4 === void 0 ? void 0 : _area$point4[oppositeType]);
+    var minSelection = Math.min(area === null || area === void 0 ? void 0 : (_area$point5 = area.point1) === null || _area$point5 === void 0 ? void 0 : _area$point5[headerType], area === null || area === void 0 ? void 0 : (_area$point6 = area.point2) === null || _area$point6 === void 0 ? void 0 : _area$point6[headerType]);
+    var maxSelection = Math.max(area === null || area === void 0 ? void 0 : (_area$point7 = area.point1) === null || _area$point7 === void 0 ? void 0 : _area$point7[headerType], area === null || area === void 0 ? void 0 : (_area$point8 = area.point2) === null || _area$point8 === void 0 ? void 0 : _area$point8[headerType]);
+    var isTrueSelectedState = (items === null || items === void 0 ? void 0 : items.length) - 1 === maxOppositeSelection && minOppositeSelection === 0; // console.log({minSelection, maxSelection});
+    // Iterate over all columns included in the selection area
+
+    for (var i = minSelection; i <= maxSelection; i++) {
+      if (headerIndex === i && isTrueSelectedState) {
+        return true;
+      }
+    }
+
+    return false;
   });
   return isSelectedHeader;
 };

package/lib/components/DataSpreadsheet/utils/getCellSize.js

@@ -19,16 +19,16 @@ var getSizeInPixels = function getSizeInPixels(carbonSize) {
 
 var getCellSize = function getCellSize(cellSize) {
   switch (cellSize) {
-    case 'compact':
+    case 'xs':
       return getSizeInPixels(_layout.sizeXSmall);
 
-    case 'standard':
+    case 'sm':
       return getSizeInPixels(_layout.sizeSmall);
 
-    case 'medium':
+    case 'md':
       return getSizeInPixels(_layout.sizeMedium);
 
-    case 'large':
+    case 'lg':
       return getSizeInPixels(_layout.sizeLarge);
 
     default:

package/lib/components/DataSpreadsheet/utils/handleHeaderCellSelection.js

@@ -23,19 +23,36 @@ var _checkActiveHeaderCell = require("./checkActiveHeaderCell");
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var handleHeaderCellSelection = function handleHeaderCellSelection(_ref) {
-  var type = _ref.type,
-      activeCellCoordinates = _ref.activeCellCoordinates,
-      rows = _ref.rows,
-      columns = _ref.columns,
-      setActiveCellCoordinates = _ref.setActiveCellCoordinates,
-      setCurrentMatcher = _ref.setCurrentMatcher,
-      setSelectionAreas = _ref.setSelectionAreas,
-      spreadsheetRef = _ref.spreadsheetRef,
-      index = _ref.index,
-      isKeyboard = _ref.isKeyboard,
-      setSelectionAreaData = _ref.setSelectionAreaData,
-      isHoldingCommandKey = _ref.isHoldingCommandKey;
+var getSelectedItemIndexList = function getSelectedItemIndexList(_ref) {
+  var indexList = _ref.indexList,
+      newIndex = _ref.newIndex,
+      activeCellIndex = _ref.activeCellIndex;
+  var lowestIndex = newIndex > activeCellIndex ? activeCellIndex : Math.min.apply(Math, (0, _toConsumableArray2.default)(indexList).concat([newIndex]));
+  var highestIndex = newIndex < activeCellIndex ? activeCellIndex : Math.max.apply(Math, (0, _toConsumableArray2.default)(indexList).concat([newIndex]));
+  var newIndexList = [];
+
+  for (var i = lowestIndex; i <= highestIndex; i++) {
+    newIndexList.push(i);
+  }
+
+  return [].concat(newIndexList);
+};
+
+var handleHeaderCellSelection = function handleHeaderCellSelection(_ref2) {
+  var type = _ref2.type,
+      activeCellCoordinates = _ref2.activeCellCoordinates,
+      rows = _ref2.rows,
+      columns = _ref2.columns,
+      currentMatcher = _ref2.currentMatcher,
+      setActiveCellCoordinates = _ref2.setActiveCellCoordinates,
+      setCurrentMatcher = _ref2.setCurrentMatcher,
+      setSelectionAreas = _ref2.setSelectionAreas,
+      spreadsheetRef = _ref2.spreadsheetRef,
+      index = _ref2.index,
+      isKeyboard = _ref2.isKeyboard,
+      setSelectionAreaData = _ref2.setSelectionAreaData,
+      isHoldingCommandKey = _ref2.isHoldingCommandKey,
+      isHoldingShiftKey = _ref2.isHoldingShiftKey;
 
   if (!isHoldingCommandKey) {
     setSelectionAreaData([]);
@@ -56,11 +73,15 @@ var handleHeaderCellSelection = function handleHeaderCellSelection(_ref) {
     column: type === 'column' ? columnValue : columns.length - 1
   };
   var tempMatcher = (0, _uuidv.default)();
-  setActiveCellCoordinates({
-    row: type === 'column' ? 0 : rowValue,
-    column: type === 'column' ? columnValue : 0
-  });
-  setCurrentMatcher(tempMatcher);
+
+  if (!isHoldingShiftKey) {
+    setActiveCellCoordinates({
+      row: type === 'column' ? 0 : rowValue,
+      column: type === 'column' ? columnValue : 0
+    });
+    setCurrentMatcher(tempMatcher);
+  }
+
   var newSelectionArea = {
     point1: point1,
     point2: point2,
@@ -68,7 +89,7 @@ var handleHeaderCellSelection = function handleHeaderCellSelection(_ref) {
     matcher: tempMatcher,
     header: {
       type: type,
-      index: type === 'column' ? columnValue : rowValue
+      selectedIndexList: [type === 'column' ? columnValue : rowValue]
     }
   };
   setSelectionAreas(function (prev) {
@@ -94,6 +115,78 @@ var handleHeaderCellSelection = function handleHeaderCellSelection(_ref) {
       return [].concat((0, _toConsumableArray2.default)(prev), [newSelectionArea]);
     }
 
+    if (isHoldingShiftKey) {
+      var _selectionAreasClone$, _selectionAreasClone$2;
+
+      var _selectionsFromHeaderCell = selectionsClone.filter(function (item) {
+        var _item$header3;
+
+        return (_item$header3 = item.header) === null || _item$header3 === void 0 ? void 0 : _item$header3.type;
+      }); // Shift/click behavior should not occur unless there are activeCellCoordinates set
+
+
+      var currentSelectionArea = _selectionsFromHeaderCell.filter(function (item) {
+        return item.matcher === currentMatcher;
+      })[0];
+
+      var originalAreaIndex = Math.max(currentSelectionArea === null || currentSelectionArea === void 0 ? void 0 : currentSelectionArea.point1[type], currentSelectionArea === null || currentSelectionArea === void 0 ? void 0 : currentSelectionArea.point2[type], activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates[type]);
+      var newIndexValue = type === 'column' ? columnValue : rowValue;
+      var newPoint = {
+        row: originalAreaIndex < newIndexValue ? rows.length - 1 : 0,
+        column: columnValue
+      };
+      var selectionAreasClone = (0, _deepCloneObject.deepCloneObject)(prev);
+      var indexOfCurrentArea = selectionAreasClone.findIndex(function (item) {
+        return item.matcher === currentMatcher;
+      });
+      var newIndexList = getSelectedItemIndexList({
+        indexList: ((_selectionAreasClone$ = selectionAreasClone[indexOfCurrentArea]) === null || _selectionAreasClone$ === void 0 ? void 0 : (_selectionAreasClone$2 = _selectionAreasClone$.header) === null || _selectionAreasClone$2 === void 0 ? void 0 : _selectionAreasClone$2.selectedIndexList) || [type === 'column' ? columnValue : rowValue],
+        newIndex: newIndexValue,
+        activeCellIndex: activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates[type]
+      });
+
+      var setPoint1 = function setPoint1(value) {
+        return value < newIndexValue ? {
+          row: type === 'column' ? 0 : Math.min.apply(Math, (0, _toConsumableArray2.default)(newIndexList)),
+          column: type === 'column' ? Math.min.apply(Math, (0, _toConsumableArray2.default)(newIndexList)) : 0
+        } : newPoint;
+      };
+
+      var setPoint2 = function setPoint2(value) {
+        return value < newIndexValue ? newPoint : {
+          row: type === 'column' ? rows.length - 1 : Math.max.apply(Math, (0, _toConsumableArray2.default)(newIndexList)),
+          column: type === 'column' ? Math.max.apply(Math, (0, _toConsumableArray2.default)(newIndexList)) : columns.length - 1
+        };
+      }; // If there is no active cell set and shift is clicked on a header cell
+
+
+      if (!activeCellCoordinates || typeof activeCellCoordinates === 'undefined') {
+        // Need to set positioning of active cell because it doesn't exist yet
+        setCurrentMatcher(tempMatcher);
+        var firstSelectionArea = {
+          point1: setPoint1(type === 'column' ? columnValue : rowValue),
+          point2: setPoint2(type === 'column' ? columnValue : rowValue),
+          areaCreated: false,
+          matcher: tempMatcher,
+          header: {
+            type: type,
+            selectedIndexList: [type === 'column' ? columnValue : rowValue]
+          }
+        };
+        setActiveCellCoordinates({
+          row: type === 'column' ? 0 : rowValue,
+          column: type === 'column' ? columnValue : 0
+        });
+        return [firstSelectionArea];
+      }
+
+      selectionAreasClone[indexOfCurrentArea].point1 = setPoint1(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates[type]);
+      selectionAreasClone[indexOfCurrentArea].point2 = setPoint2(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates[type]);
+      selectionAreasClone[indexOfCurrentArea].areaCreated = false;
+      selectionAreasClone[indexOfCurrentArea].header.selectedIndexList = newIndexList;
+      return selectionAreasClone;
+    }
+
     return [newSelectionArea];
   });
 };

package/lib/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js

@@ -20,7 +20,8 @@ var moveColumnIndicatorLine = function moveColumnIndicatorLine(_ref) {
       blockClass = _ref$blockClass === void 0 ? "".concat(_settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
       clonedSelectionElement = _ref.clonedSelectionElement,
       ref = _ref.ref,
-      spreadsheetCoords = _ref.spreadsheetCoords;
+      spreadsheetCoords = _ref.spreadsheetCoords,
+      leftScrollAmount = _ref.leftScrollAmount;
   var closestCell = event.target.closest(".".concat(blockClass, "--interactive-cell-element"));
   var newColumnIndex = closestCell === null || closestCell === void 0 ? void 0 : closestCell.getAttribute('data-column-index');
   var originalColumnIndex = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-column-index-original');
@@ -30,11 +31,11 @@ var moveColumnIndicatorLine = function moveColumnIndicatorLine(_ref) {
   var selectionAreaOrigin = ref.current.querySelector("[data-matcher-id=\"".concat(matcherId, "\"]"));
 
   if (Number(newColumnIndex) > Number(originalColumnIndex)) {
-    indicatorLineElement.style.left = (0, _layout.px)(closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2);
+    indicatorLineElement.style.left = (0, _layout.px)(closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2 + leftScrollAmount);
   }
 
   if (Number(newColumnIndex) < Number(originalColumnIndex)) {
-    indicatorLineElement.style.left = (0, _layout.px)(closestCellCoords.left - spreadsheetCoords.left);
+    indicatorLineElement.style.left = (0, _layout.px)(closestCellCoords.left - spreadsheetCoords.left + leftScrollAmount);
   }
 
   if (Number(newColumnIndex) === Number(originalColumnIndex)) {

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

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var React = _interopRequireWildcard(require("react"));
@@ -21,6 +23,8 @@ 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -37,7 +41,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var useEffect = React.useEffect,
     useRef = React.useRef,
     useState = React.useState;
-var DRAG_TYPE = 'wkc-shared-ui-draggable-element';
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var DRAG_TYPE = "".concat(blockClass, "__shared-ui-draggable-element");
 
 var DraggableElement = function DraggableElement(_ref) {
   var id = _ref.id,
@@ -76,7 +81,6 @@ var DraggableElement = function DraggableElement(_ref) {
       var dragIndex = item.index;
       var hoverIndex = index; // Don't replace items with themselves
 
-      // Don't replace items with themselves
       if (dragIndex === hoverIndex || disabled) {
         return;
       }
@@ -88,12 +92,6 @@ var DraggableElement = function DraggableElement(_ref) {
       // to avoid expensive index searches.
       // eslint-disable-next-line no-param-reassign
 
-      // 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;
     }
   }),
@@ -141,14 +139,10 @@ var DraggableElement = function DraggableElement(_ref) {
   var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: (0, _classnames.default)({
       disabled: disabled
-    }, 'wkc-draggable-handleStyle')
+    }, "".concat(blockClass, "__draggable-handleStyle"))
   }, /*#__PURE__*/React.createElement(_iconsReact.Draggable16, null)), children);
   return /*#__PURE__*/React.createElement("li", {
-    className: (0, _classnames.default)({
-      'wkc-draggable-handleHolder-isOver': isOver && !disabled
-    }, {
-      'wkc-draggable-handleHolder--grabbed': isGrabbed
-    }, 'wkc-draggable-handleHolder'),
+    className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), (0, _defineProperty2.default)({}, "".concat(blockClass, "__wkc-draggable-handleHolder--grabbed"), isGrabbed), "".concat(blockClass, "__draggable-handleHolder")),
     ref: ref,
     "aria-selected": isFocused,
     role: "option",
@@ -176,17 +170,15 @@ var DraggableElement = function DraggableElement(_ref) {
       setIsFocusedOnItem(e.currentTarget === e.target);
     }
   }, /*#__PURE__*/React.createElement("span", {
-    className: "wkc-shared-ui--assistive-text"
+    className: "".concat(blockClass, "__shared-ui--assistive-text")
   }, ariaLabel), isDragging && !isOver ? /*#__PURE__*/React.createElement("div", {
     ref: preview,
-    className: "wkc-draggable-handleHolder-droppable"
+    className: "${blockClass}__draggable-handleHolder-droppable"
   }, content) : /*#__PURE__*/React.createElement("div", {
     ref: drag,
     "aria-hidden": isFocused && isFocusedOnItem // if focus on li, hide the children from aria
     ,
-    className: (0, _classnames.default)({
-      'wkc-draggable-handleStyle': !disabled
-    }, 'wkc-draggable-handleHolder-droppable')
+    className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__draggable-handleStyle"), !disabled), ["".concat(blockClass, "__draggable-handleHolder-droppable")])
   }, (!isOver || disabled) && content));
 };
 

package/lib/components/ExportModal/ExportModal.js

@@ -100,7 +100,7 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
     setName(filename);
     setExtension(preformattedExtensions === null || preformattedExtensions === void 0 ? void 0 : (_preformattedExtensio = preformattedExtensions[0]) === null || _preformattedExtensio === void 0 ? void 0 : _preformattedExtensio.extension);
-  }, [filename, preformattedExtensions]);
+  }, [filename, preformattedExtensions, open]);
 
   var onNameChangeHandler = function onNameChangeHandler(evt) {
     setName(evt.target.value);

package/lib/global/js/hooks/useWindowResize.js

@@ -9,13 +9,15 @@ exports.useWindowResize = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _react = require("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 windowExists = typeof window !== "undefined";
+var windowExists = (typeof window === "undefined" ? "undefined" : (0, _typeof2.default)(window)) !== "undefined";
 
 var getWindowSize = function getWindowSize() {
   if (!windowExists) {

package/lib/global/js/hooks/useWindowScroll.js

@@ -1,16 +1,20 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useNearestScroll = useNearestScroll;
 exports.useWindowScroll = useWindowScroll;
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _react = require("react");
 
 var _scrollableAncestor = require("../utils/scrollableAncestor");
 
-var windowExists = typeof window !== "undefined";
+var windowExists = (typeof window === "undefined" ? "undefined" : (0, _typeof2.default)(window)) !== "undefined";
 
 var useTargetScroll = function useTargetScroll(target, effect, deps, throttleInterval) {
   var scrollPosition = (0, _react.useRef)({});

package/lib/global/js/utils/scrollableAncestor.js

@@ -1,10 +1,15 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.scrollableAncestor = void 0;
-var windowExists = typeof window !== "undefined"; // determine whether the target is scrollable
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var windowExists = (typeof window === "undefined" ? "undefined" : (0, _typeof2.default)(window)) !== "undefined"; // determine whether the target is scrollable
 
 var scrollable = function scrollable(target) {
   var style = window.getComputedStyle(target);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.18.1",
+  "version": "1.19.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -34,7 +34,7 @@
   },
   "scripts": {
     "build": "run-s clean build-first build-all",
-    "build-all": "run-p build:*",
+    "build-all": "run-p 'build:*'",
     "build-first": "copyfiles 'src/**/*.scss' scss -u 1",
     "build:css-dev": "sass --style=expanded --load-path node_modules --load-path ../../node_modules scss:css",
     "build:css-min": "sass --style=compressed --load-path node_modules --load-path ../../node_modules scss/index.scss:css/index.min.css scss/index-full-carbon.scss:css/index-full-carbon.min.css scss/index-without-carbon.scss:css/index-without-carbon.min.css scss/index-without-carbon-released-only.scss:css/index-without-carbon-released-only.min.css",
@@ -60,7 +60,7 @@
     "fs-extra": "^10.1.0",
     "glob": "^8.0.3",
     "jest": "^28.1.0",
-    "jest-config-ibm-cloud-cognitive": "^0.23.19",
+    "jest-config-ibm-cloud-cognitive": "^0.24.0",
     "jest-environment-jsdom": "^28.1.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^12.5.11",
@@ -93,5 +93,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "af43f7248a6bf9c65da17758b2345aad9808c317"
+  "gitHead": "eb1c96e096118d320eed2f197f85f675a7601b05"
 }

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

@@ -221,6 +221,7 @@
     width: 100%;
     max-width: 40rem;
     background: $ui-01;
+    box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
     transform: translate(0, 100%);
 
     &-search {
@@ -256,6 +257,11 @@
   button.#{$block-class}__global-filter-toggle {
     border-bottom-color: $ui-04;
     background: $field-01;
+
+    &--open {
+      border-bottom: $ui-01;
+      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+    }
   }
 
   // meta panel

package/scss/components/ComboButton/_combo-button.scss

@@ -25,7 +25,8 @@
     @include text-overflow;
   }
 
-  .#{$security--prefix}--combo-button__overflow-menu {
+  .#{$security--prefix}--combo-button
+    .#{$security--prefix}--combo-button__overflow-menu {
     width: carbon--mini-units($count: 6);
     height: auto;
     border-left: carbon--rem($px: 1px) solid $ui-03;

package/scss/components/DataSpreadsheet/_data-spreadsheet.scss

@@ -12,6 +12,10 @@
 // Define all component styles in a mixin which is then exported using
 // the Carbon import-once mechanism.
 @mixin set-header-borders {
+  border-right: 1px solid $active-ui;
+  border-bottom: 1px solid $active-ui;
+}
+@mixin set-active-header-borders {
   border-right: 1px solid $text-03;
   border-bottom: 1px solid $text-03;
 }
@@ -211,9 +215,12 @@
       z-index: 4;
       width: $spacing-01;
       background-color: $interactive-01;
+      pointer-events: none;
     }
     .#{$block-class}__th--active-header,
     .#{$block-class}__td-th--active-header.#{$block-class}__td {
+      @include set-active-header-borders();
+
       background-color: $hover-selected-ui;
     }
     .#{$block-class}__th--selected-header,

package/scss/components/Datagrid/_datagrid.scss

@@ -9,16 +9,7 @@
 @import '../../global/styles/project-settings';
 @import '../../global/styles/mixins';
 
-@import './styles/datagrid';
-@import './styles/useNestedRows';
-//@import './styles/useNestedTable';
-@import './styles/useSortableColumns';
-@import './styles/useColumnRightAlign';
-@import './styles/useStickyColumn';
-@import './styles/useActionsColumn';
-@import './styles/addons/CustomizeColumnsModal';
-@import './styles/addons/RowSizeDropdown';
-@import './styles/useSelectAllToggle';
+@import './styles/index';
 
 // Other Carbon settings.
 // TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed

package/scss/components/Datagrid/styles/draggableElement.scss

@@ -0,0 +1,58 @@
+/*
+* Licensed Materials - Property of IBM
+* 5724-Q36
+* (c) Copyright IBM Corp. 2021
+* US Government Users Restricted Rights - Use, duplication or disclosure
+* restricted by GSA ADP Schedule Contract with IBM Corp.
+*/
+@import './variables';
+
+.#{$block-class}__draggable-handleStyle {
+  display: flex;
+  align-items: center;
+  margin-right: $spacing-03;
+  cursor: grab;
+}
+
+.#{$block-class}__draggable-handleStyle.disabled {
+  pointer-events: none;
+}
+
+svg.#{$block-class}__draggable-handleStyle.disable {
+  fill: $disabled-02;
+}
+
+.#{$block-class}__draggable-handleHolder {
+  display: flex;
+  height: $spacing-07;
+  padding-left: $spacing-02;
+  margin-bottom: $spacing-03;
+  background: $ui-02;
+  &.#{$block-class}__draggable-handleHolder-isOver {
+    border: 2px dashed $focus;
+    background-color: $highlight;
+  }
+}
+
+.#{$block-class}__draggable-handleHolder-droppable {
+  display: flex;
+  width: 100%;
+}
+
+.#{$block-class}__draggable-handleHolder--grabbed {
+  background-color: $highlight;
+  color: $text-01;
+}
+
+.#{$block-class}__shared-ui--assistive-text {
+  // hide the assistive text. can not use display: none which will also hide from ARIA
+  position: absolute;
+  overflow: hidden;
+  width: 0;
+  height: 0;
+  padding: 0;
+  border: 0;
+  clip: rect(0 0 0 0);
+  text-transform: none;
+  white-space: nowrap;
+}

package/scss/components/Datagrid/styles/index.scss

@@ -7,7 +7,7 @@
 */
 @import './datagrid';
 @import './useNestedRows';
-//@import './useNestedTable';
+@import './useNestedTable';
 @import './useSortableColumns';
 @import './useColumnRightAlign';
 @import './useStickyColumn';
@@ -15,3 +15,4 @@
 @import './addons/CustomizeColumnsModal';
 @import './addons/RowSizeDropdown';
 @import './useSelectAllToggle';
+@import './draggableElement';