@carbon/ibm-products 1.31.0 → 1.32.1

package/lib/components/Datagrid/utils/DatagridActions.js

@@ -0,0 +1,139 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatagridActions = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _iconsReact = require("@carbon/icons-react");
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _settings = require("../../../settings");
+
+var _ButtonMenu = require("../../ButtonMenu");
+
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+
+var DatagridActions = function DatagridActions(datagridState) {
+  var selectedFlatRows = datagridState.selectedFlatRows,
+      setGlobalFilter = datagridState.setGlobalFilter,
+      CustomizeColumnsButton = datagridState.CustomizeColumnsButton,
+      RowSizeDropdown = datagridState.RowSizeDropdown,
+      rowSizeDropdownProps = datagridState.rowSizeDropdownProps,
+      useDenseHeader = datagridState.useDenseHeader;
+
+  var downloadCsv = function downloadCsv() {
+    alert('Downloading...');
+  };
+
+  var TableToolbarContent = _carbonComponentsReact.DataTable.TableToolbarContent,
+      TableToolbarSearch = _carbonComponentsReact.DataTable.TableToolbarSearch;
+
+  var refreshColumns = function refreshColumns() {
+    alert('refreshing...');
+  };
+
+  var leftPanelClick = function leftPanelClick() {
+    alert('open/close left panel...');
+  };
+
+  var searchForAColumn = 'Search';
+  var isNothingSelected = selectedFlatRows.length === 0;
+  var style = {
+    'button:nth-child(1) > span:nth-child(1)': {
+      bottom: '-37px'
+    }
+  };
+  return isNothingSelected && (useDenseHeader && useDenseHeader ? /*#__PURE__*/_react.default.createElement(TableToolbarContent, {
+    size: "sm"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: _iconsReact.Download16,
+    iconDescription: 'Download CSV',
+    onClick: downloadCsv
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: _iconsReact.Filter16,
+    iconDescription: 'Left panel',
+    onClick: leftPanelClick
+  })), /*#__PURE__*/_react.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react.default.createElement("div", {
+    style: style,
+    className: "".concat(blockClass, "__toolbar-divider")
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    kind: "ghost",
+    renderIcon: _iconsReact.Add16,
+    iconDescription: 'Action'
+  }, "Ghost button")), CustomizeColumnsButton && /*#__PURE__*/_react.default.createElement("div", {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(CustomizeColumnsButton, null))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: _iconsReact.Filter16,
+    iconDescription: 'Left panel',
+    onClick: leftPanelClick
+  }), /*#__PURE__*/_react.default.createElement(TableToolbarContent, null, /*#__PURE__*/_react.default.createElement(TableToolbarSearch, {
+    size: "xl",
+    id: "columnSearch",
+    persistent: true,
+    placeHolderText: searchForAColumn,
+    onChange: function onChange(e) {
+      return setGlobalFilter(e.target.value);
+    }
+  }), /*#__PURE__*/_react.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react.default.createElement("div", {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: _iconsReact.Restart16,
+    iconDescription: 'Refresh',
+    onClick: refreshColumns
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    kind: "ghost",
+    hasIconOnly: true,
+    tooltipPosition: "bottom",
+    renderIcon: _iconsReact.Download16,
+    iconDescription: 'Download CSV',
+    onClick: downloadCsv
+  })), CustomizeColumnsButton && /*#__PURE__*/_react.default.createElement("div", {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenu, {
+    label: "Primary button",
+    renderIcon: _iconsReact.Add16
+  }, /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
+    itemText: "Option 1",
+    onClick: (0, _addonActions.action)("Click on ButtonMenu Option 1")
+  }), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
+    itemText: "Option 2",
+    onClick: (0, _addonActions.action)("Click on ButtonMenu Option 2")
+  }), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
+    itemText: "Option 3",
+    onClick: (0, _addonActions.action)("Click on ButtonMenu Option 3")
+  })))));
+};
+
+exports.DatagridActions = DatagridActions;

package/lib/components/Datagrid/utils/DatagridPagination.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatagridPagination = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+/* eslint-disable react/prop-types */
+
+/**
+ * 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.
+ */
+var DatagridPagination = function DatagridPagination(_ref) {
+  var state = _ref.state,
+      setPageSize = _ref.setPageSize,
+      gotoPage = _ref.gotoPage,
+      rows = _ref.rows;
+
+  var updatePagination = function updatePagination(_ref2) {
+    var page = _ref2.page,
+        pageSize = _ref2.pageSize;
+    console.log(state);
+    setPageSize(pageSize);
+    gotoPage(page - 1); // Carbon is non-zero-based
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Pagination, {
+    page: state.pageIndex + 1 // react-table is zero-based
+    ,
+    pageSize: state.pageSize,
+    pageSizes: state.pageSizes || [10, 20, 30, 40, 50],
+    totalItems: rows.length,
+    onChange: updatePagination
+  });
+};
+
+exports.DatagridPagination = DatagridPagination;

package/lib/components/Datagrid/utils/Wrapper.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+/* eslint-disable react/prop-types */
+
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+var Wrapper = function Wrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '100vh',
+      width: '100%',
+      padding: '1rem',
+      margin: '0',
+      zIndex: '0'
+    }
+  }, children);
+};
+
+exports.Wrapper = Wrapper;

package/lib/components/Datagrid/utils/getArgTypes.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ARG_TYPES = void 0;
+
+/**
+ * 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.
+ */
+var ARG_TYPES = {
+  gridTitle: {
+    name: 'gridTitle',
+    control: 'text',
+    description: 'This sets the title text for the Datagrid component. _This value is set/passed inside of the `datagridState` object._',
+    type: {
+      name: 'string',
+      required: false
+    }
+  },
+  gridDescription: {
+    name: 'gridDescription',
+    control: 'text',
+    description: 'This sets the description text for the Datagrid component. _This value is set/passed inside of the `datagridState` object._',
+    type: {
+      name: 'string',
+      required: false
+    }
+  },
+  emptyStateTitle: {
+    name: 'emptyStateTitle',
+    control: 'text',
+    description: 'This sets the empty state title text for the Datagrid component. _This value is set/passed inside of the `datagridState` object._',
+    type: {
+      name: 'string',
+      required: false
+    }
+  },
+  emptyStateDescription: {
+    name: 'emptyStateDescription',
+    control: 'text',
+    description: 'This sets the empty state description text for the Datagrid component. _This value is set/passed inside of the `datagridState` object._',
+    type: {
+      name: 'string',
+      required: false
+    }
+  },
+  emptyStateSize: {
+    control: 'select',
+    options: ['sm', 'lg']
+  },
+  useDenseHeader: {
+    control: {
+      type: 'radio'
+    },
+    options: [true, false],
+    description: 'This sets the dense header option for the Datagrid component. _This value is set/passed inside of the `datagridState` object._'
+  },
+  rowSize: {
+    control: 'select',
+    options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    description: 'This sets the height for each row of the Datagrid component. _This value is set/passed inside of the `datagridState` object._'
+  },
+  rowSizes: {
+    control: 'object',
+    description: 'This array of objects specifies the different row size options that will render from the settings icon in the table actions. _This value is set/passed inside of the `datagridState` object._'
+  },
+  onRowSizeChange: {
+    description: 'Callback function that is called on row size changes. _This value is set/passed inside of the `datagridState` object._'
+  },
+  rowActions: {
+    control: 'object',
+    description: 'This array of objects renders the action buttons for each row in the Datagrid. _This value is set/passed inside of the `datagridState` object._',
+    action: 'Row action onClick'
+  },
+  batchActions: {
+    control: {
+      type: 'radio'
+    },
+    options: [true, false],
+    description: 'This will allow the Datagrid component to use batch actions. _This value is set/passed inside of the `datagridState` object._'
+  },
+  expandedContentHeight: {
+    control: {
+      type: 'number'
+    },
+    description: 'This value controls the height of the expanded content area. _This value is set/passed inside of the `datagridState` object._'
+  }
+};
+exports.ARG_TYPES = ARG_TYPES;

package/lib/components/Datagrid/utils/makeData.js

@@ -13,16 +13,25 @@ var _react = _interopRequireDefault(require("react"));
 
 var _namor = _interopRequireDefault(require("namor"));
 
+var _StatusIcon = require("../../StatusIcon");
+
 var _getInlineEditColumns = require("./getInlineEditColumns");
 
 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 getRandomInteger = function getRandomInteger(min, max) {
-  min = Math.ceil(min);
-  max = Math.floor(max);
-  return Math.floor(Math.random() * (max - min + 1)) + min;
+var getRandomInteger = function getRandomInteger(min, max, decimalPlaces) {
+  var roundedMin = Math.ceil(min);
+  var roundedMax = Math.floor(max);
+  var randomNumber = Math.random() * (max - min) + min;
+
+  if (!decimalPlaces) {
+    return Math.floor(Math.random() * (roundedMax - roundedMin + 1)) + roundedMin;
+  }
+
+  var power = Math.pow(10, decimalPlaces);
+  return Math.floor(randomNumber * power) / power;
 };
 
 var makeData = function makeData() {
@@ -57,6 +66,16 @@ var range = function range(len) {
 
 exports.range = range;
 
+var renderStatusIcon = function renderStatusIcon(statusChance) {
+  var iconProps = {
+    size: 'sm',
+    theme: 'light',
+    kind: statusChance > 0.66 ? 'critical' : statusChance > 0.33 ? 'minor-warning' : 'normal',
+    iconDescription: statusChance > 0.66 ? 'Critical' : statusChance > 0.33 ? 'Minor warning' : 'Normal'
+  };
+  return /*#__PURE__*/_react.default.createElement(_StatusIcon.StatusIcon, iconProps);
+};
+
 var newPerson = function newPerson() {
   var statusChance = Math.random();
   var initialChartTypeIndex = getRandomInteger(0, 2);
@@ -159,7 +178,9 @@ var newPerson = function newPerson() {
     }),
     status: statusChance > 0.66 ? 'relationship' : statusChance > 0.33 ? 'complicated' : 'single',
     chartType: initialChartTypeIndex === 0 ? _getInlineEditColumns.inlineEditSelectItems[0] : initialChartTypeIndex === 1 ? _getInlineEditColumns.inlineEditSelectItems[1] : _getInlineEditColumns.inlineEditSelectItems[2],
-    activeSince: statusChance > 0.66 ? activeSinceDate : statusChance > 0.33 ? yesterdayDate : twoDaysAgoDate
+    activeSince: statusChance > 0.66 ? activeSinceDate : statusChance > 0.33 ? yesterdayDate : twoDaysAgoDate,
+    bonus: "$\r".concat(getRandomInteger(100, 500, 2)),
+    status_icon: renderStatusIcon(statusChance)
   };
 };
 

package/lib/components/InlineEdit/InlineEdit.js

@@ -56,7 +56,7 @@ var buttons = ['cancel', 'edit', 'save'];
  */
 
 var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
-  var _cx, _refInput$current, _refInput$current$inn, _cx3;
+  var _cx, _refInput$current, _refInput$current$tex, _cx3;
 
   var buttonTooltipAlignment = _ref.buttonTooltipAlignment,
       buttonTooltipPosition = _ref.buttonTooltipPosition,
@@ -81,7 +81,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
       value = _ref.value,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var refInput = (0, _react.useRef)({
-    innerText: value
+    textContent: value
   });
   var localRef = (0, _react.useRef)(null);
   var ref = refIn || localRef;
@@ -163,15 +163,15 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
     document.getSelection().removeAllRanges();
 
     if (onSave) {
-      onSave(refInput.current.innerText);
+      onSave(refInput.current.textContent);
     }
   };
 
   var handleInput = function handleInput() {
-    setInternalValue(refInput.current.innerText);
+    setInternalValue(refInput.current.textContent);
 
     if (onChange) {
-      onChange(refInput.current.innerText);
+      onChange(refInput.current.textContent);
     }
   }; // pasting into contentEditable not supported by userEvent
 
@@ -206,7 +206,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
   };
 
   var handleCancel = function handleCancel() {
-    refInput.current.innerText = value;
+    refInput.current.textContent = value;
     handleInput(value);
     doSetEditing(false);
     document.getSelection().removeAllRanges();
@@ -274,7 +274,7 @@ var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, refIn) {
     }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, (0, _devtools.getDevtoolsProps)(componentName), {
       id: id,
       size: size,
-      className: (0, _classnames.default)("".concat(blockClass, "__input"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__input--empty"), ((_refInput$current = refInput.current) === null || _refInput$current === void 0 ? void 0 : (_refInput$current$inn = _refInput$current.innerText) === null || _refInput$current$inn === void 0 ? void 0 : _refInput$current$inn.length) === 0)),
+      className: (0, _classnames.default)("".concat(blockClass, "__input"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__input--empty"), ((_refInput$current = refInput.current) === null || _refInput$current === void 0 ? void 0 : (_refInput$current$tex = _refInput$current.textContent) === null || _refInput$current$tex === void 0 ? void 0 : _refInput$current$tex.length) === 0)),
       contentEditable: true,
       "aria-label": labelText,
       role: "textbox",

package/lib/components/OptionsTile/OptionsTile.js

@@ -221,12 +221,14 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       className: "".concat(blockClass, "__heading")
     }, /*#__PURE__*/_react.default.createElement("h6", {
       id: titleId,
-      className: "".concat(blockClass, "__title")
+      className: "".concat(blockClass, "__title"),
+      title: title
     }, title), text && /*#__PURE__*/_react.default.createElement("span", {
       className: (0, _classnames.default)(summaryClasses),
       "aria-hidden": summaryHidden
     }, Icon && /*#__PURE__*/_react.default.createElement(Icon, null), /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(blockClass, "__summary-text")
+      className: "".concat(blockClass, "__summary-text"),
+      title: text
     }, text)));
   }
 

package/lib/global/js/utils/story-helper.js

@@ -46,7 +46,11 @@ var getStoryTitle = function getStoryTitle(componentName) {
 
 exports.getStoryTitle = getStoryTitle;
 
-var getStoryId = function getStoryId(componentName, scenario) {
+var getStoryId = function getStoryId(componentName, scenario, subdirectory) {
+  if (subdirectory) {
+    return "".concat((0, _csf.sanitize)(getStoryTitle(componentName)), "-").concat((0, _csf.sanitize)(subdirectory), "--").concat(scenario);
+  }
+
   return "".concat((0, _csf.sanitize)(getStoryTitle(componentName)), "--").concat(scenario);
 };
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.31.0",
+  "version": "1.32.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -51,26 +51,26 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.18.10",
-    "@babel/core": "^7.18.13",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.19",
+    "@babel/core": "^7.19.1",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.20",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "fs-extra": "^10.1.0",
     "glob": "^8.0.3",
-    "jest": "^29.0.1",
-    "jest-config-ibm-cloud-cognitive": "^0.24.5",
-    "jest-environment-jsdom": "^29.0.1",
+    "jest": "^29.0.3",
+    "jest-config-ibm-cloud-cognitive": "^0.24.6",
+    "jest-environment-jsdom": "^29.0.3",
     "namor": "^1.1.2",
-    "npm-check-updates": "^16.0.6",
+    "npm-check-updates": "^16.1.3",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "sass": "^1.54.8",
+    "sass": "^1.54.9",
     "yargs": "^17.5.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.9",
+    "@babel/runtime": "^7.19.0",
     "@carbon/telemetry": "^0.1.0",
     "immutability-helper": "^3.1.1",
     "react-dnd": "^15.1.2",
@@ -87,11 +87,11 @@
     "@carbon/motion": "^10.29.0",
     "@carbon/themes": "^10.55.0",
     "@carbon/type": "^10.45.0",
-    "carbon-components": "^10.58.0",
-    "carbon-components-react": "^7.59.0",
+    "carbon-components": "^10.58.1",
+    "carbon-components-react": "^7.59.1",
     "carbon-icons": "^7.0.7",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "4694f431eeac26bb0787857b39aaa347edddc212"
+  "gitHead": "829c3e97ae9b2412f7fcb1859dc8dd8b019963ee"
 }

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -275,10 +275,6 @@
   flex: 1 1 auto;
 }
 
-.#{$block-class}__with-pagination table tr:last-of-type > td {
-  border-bottom: none;
-}
-
 .#{$block-class}__resizer {
   position: absolute;
   z-index: 1;

package/scss/components/Datagrid/styles/_useActionsColumn.scss

@@ -22,3 +22,15 @@
 .#{$block-class}__actions-column-loading {
   margin-bottom: $spacing-03;
 }
+
+.#{$block-class} .#{$block-class}__disabled-row-action-button {
+  cursor: not-allowed;
+}
+
+.#{$block-class} .#{$block-class}__disabled-row-action {
+  pointer-events: none;
+}
+
+.#{$block-class} .#{$block-class}__disabled-row-action svg {
+  fill: $disabled-03;
+}

package/scss/components/Datagrid/styles/_useExpandedRow.scss

@@ -5,3 +5,33 @@
 * US Government Users Restricted Rights - Use, duplication or disclosure
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
+
+@import './variables';
+
+@mixin shared-pseudo-styles() {
+  height: 1px;
+  background-color: $ui-03;
+  content: '';
+}
+
+.#{$block-class} .#{$block-class}__expanded-row-content {
+  position: relative;
+  padding: $spacing-05 $spacing-05 $spacing-06 $spacing-09;
+}
+
+.#{$block-class} .#{$block-class}__expanded-row-content::before {
+  position: absolute;
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  top: -1px;
+  right: 0;
+  width: calc(100% - #{$spacing-09});
+  @include shared-pseudo-styles();
+}
+
+.#{$block-class} .#{$block-class}__expanded-row-content::after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  @include shared-pseudo-styles();
+}

package/scss/components/Datagrid/styles/_useInlineEdit.scss

@@ -85,6 +85,7 @@ $row-heights: (
   cursor: pointer;
   outline: 0; // handled by active class
   .#{$block-class}__label-icon {
+    height: $spacing-05;
     padding-right: $spacing-05;
   }
   &.#{$block-class}__inline-edit-button--non-edit {
@@ -209,3 +210,8 @@ $row-heights: (
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.#{$carbon-prefix}--data-table .#{$block-class}__carbon-row-hover-active td {
+  border-top-color: $hover-ui;
+  background-color: $hover-ui;
+}

package/scss/components/Datagrid/styles/_useNestedRows.scss

@@ -1,7 +1,7 @@
 /*
 * Licensed Materials - Property of IBM
 * 5724-Q36
-* (c) Copyright IBM Corp. 2020 - 2021
+* (c) Copyright IBM Corp. 2020 - 2022
 * US Government Users Restricted Rights - Use, duplication or disclosure
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
@@ -15,3 +15,17 @@
     border-bottom: 1px solid $ui-03;
   }
 }
+
+.#{$block-class} .#{$block-class}__expander-icon {
+  transition: transform $duration--fast-01 motion(entrance, productive);
+}
+
+.#{$block-class} .#{$block-class}__expander-icon--open {
+  transform: rotate(90deg);
+}
+
+.#{$block-class}__expanded-row
+  .#{$block-class}__carbon-row-expanded
+  td:first-child {
+  border-bottom: none;
+}

package/scss/components/Datagrid/styles/_useStickyColumn.scss

@@ -58,3 +58,9 @@
   /* stylelint-disable-next-line */
   right: 6px !important; // offset the vertical scroll bar in the table body
 }
+
+.#{$block-class}__select-all-toggle-on.#{$block-class}__select-all-sticky-left {
+  position: sticky;
+  z-index: 1;
+  left: 0;
+}

package/scss/components/OptionsTile/_options-tile.scss

@@ -70,13 +70,17 @@
   }
 
   .#{$block-class}__heading {
+    overflow: hidden;
     grid-column: 2;
   }
 
   .#{$block-class}__title {
     @include carbon--type-style('productive-heading-01');
 
+    overflow: hidden;
     color: $text-01;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .#{$block-class}__summary {