@carbon/ibm-products 1.18.2 → 1.20.0

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/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/EditSidePanel/EditSidePanel.js

@@ -27,8 +27,6 @@ var _carbonComponentsReact = require("carbon-components-react");
 
 var _SidePanel = require("../SidePanel");
 
-var _ActionSet = require("../ActionSet");
-
 require("../../global/js/utils/props-helper");
 
 var _excluded = ["children", "className", "disableSubmit", "formTitle", "formDescription", "onRequestClose", "onRequestSubmit", "open", "placement", "primaryButtonText", "secondaryButtonText", "selectorPrimaryFocus", "selectorPageContent", "size", "slideIn", "subtitle", "title"];
@@ -39,7 +37,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--edit-side-panel");
-var sidePanelBlockClass = "".concat(_settings.pkg.prefix, "--side-panel");
 var componentName = 'EditSidePanel'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
 // Default values for props
 
@@ -86,7 +83,6 @@ var EditSidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     onClick: onRequestClose,
     kind: 'secondary'
   }];
-  var actionContainerClassNames = (0, _classnames.default)(["".concat(blockClass, "__actions-container"), "".concat(sidePanelBlockClass, "__actions-container")]);
   return /*#__PURE__*/_react.default.createElement(_SidePanel.SidePanel, (0, _extends2.default)({}, rest, _objectSpread({
     open: open,
     ref: ref,
@@ -101,18 +97,15 @@ var EditSidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     animateTitle: false,
     className: (0, _classnames.default)(blockClass, className),
     size: size,
-    preventCloseOnClickOutside: true
+    preventCloseOnClickOutside: true,
+    actions: actions
   }), formTitle && /*#__PURE__*/_react.default.createElement("h3", {
     className: "".concat(blockClass, "__form-title-text ").concat(blockClass, "__content-text")
   }, formTitle), formDescription && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__form-description-text ").concat(blockClass, "__content-text")
   }, formDescription), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Form, {
     className: "".concat(blockClass, "__form")
-  }, children, /*#__PURE__*/_react.default.createElement(_ActionSet.ActionSet, {
-    actions: actions,
-    className: actionContainerClassNames,
-    size: size
-  })));
+  }, children));
 }); // Return a placeholder if not released and not enabled by feature flag
 
 

package/lib/components/SidePanel/SidePanel.js

@@ -73,7 +73,7 @@ var defaults = {
  */
 
 var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var _ref4, _cx4;
+  var _window, _ref4, _cx4;
 
   var actionToolbarButtons = _ref.actionToolbarButtons,
       actions = _ref.actions,
@@ -131,7 +131,7 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     size: size,
     open: open
   });
-  var reducedMotion = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
+  var reducedMotion = typeof window !== 'undefined' && (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
     matches: true
   }; // scroll panel to top going between steps
 

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/package-settings.js

@@ -39,6 +39,7 @@ var defaults = {
     HTTPError404: true,
     HTTPErrorOther: true,
     ImportModal: true,
+    InlineEdit: true,
     NotificationsPanel: true,
     NoDataEmptyState: true,
     NoTagsEmptyState: true,
@@ -67,7 +68,6 @@ var defaults = {
     WebTerminalContentWrapper: false,
     EditSidePanel: false,
     CancelableTextEdit: false,
-    InlineEdit: false,
     DataSpreadsheet: false,
     Datagrid: false
     /* new component flags here - comment used by generate CLI */

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.2",
+  "version": "1.20.0",
   "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": "70599ae0b945e59183b28a57c44b50119e89ae9d"
+  "gitHead": "8aba17faa69b64be463f265b0e8d387cdd1559f4"
 }

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

@@ -215,6 +215,7 @@
       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 {

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/datagrid.scss

@@ -134,7 +134,14 @@
     }
   }
 }
+.#{$block-class}__grid-container::-webkit-scrollbar-thumb {
+  background-color: $text-03;
+}
 
+.#{$block-class}__grid-container::-webkit-scrollbar {
+  width: 6px;
+  background-color: $ui-background;
+}
 .#{$block-class}__grid-container {
   display: block;
   overflow: auto;
@@ -150,7 +157,7 @@
 
   .#{$block-class}__table-simple {
     display: flex;
-    overflow: hidden;
+    overflow: auto;
     max-height: 100%;
     flex-direction: column;
   }
@@ -302,6 +309,7 @@
 
 .#{$block-class}__simple-body {
   position: relative;
+  display: table;
   overflow-x: hidden;
   overflow-y: auto;
   //makes thin scrollbar in chrome and firefox
@@ -322,6 +330,14 @@
   min-width: 0 !important;
 }
 
+.#{$block-class}__table-simple::-webkit-scrollbar {
+  width: 6px;
+  background-color: $ui-background;
+}
+
+.#{$block-class}__table-simple::-webkit-scrollbar-thumb {
+  background-color: $text-03;
+}
 .#{$block-class}__sticky.#{$block-class}__simple-body {
   overflow: auto;
 }

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';

package/scss/components/_index-released-only.scss

@@ -22,6 +22,7 @@
 @import './ExpressiveCard/index';
 @import './HTTPErrors/index';
 @import './ImportModal/index';
+@import './InlineEdit/index';
 @import './NotificationsPanel/index';
 @import './PageHeader/index';
 @import './ProductiveCard/index';