@carbon/ibm-products 2.0.0-rc.2 → 2.0.0-rc.3

package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js

@@ -21,7 +21,7 @@ var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 var _react2 = require("@carbon/react");
 
@@ -31,7 +31,7 @@ var _RowSizeRadioGroup = _interopRequireDefault(require("./RowSizeRadioGroup"));
 
 var _settings = require("../../../../../settings");
 
-var _excluded = ["buttonLabel"];
+var _excluded = ["legendText"];
 
 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); }
 
@@ -40,38 +40,42 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
 var RowSizeDropdown = function RowSizeDropdown(_ref) {
-  var _ref$buttonLabel = _ref.buttonLabel,
-      buttonLabel = _ref$buttonLabel === void 0 ? 'Row height' : _ref$buttonLabel,
+  var _ref$legendText = _ref.legendText,
+      legendText = _ref$legendText === void 0 ? 'Row height' : _ref$legendText,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var buttonRef = React.useRef({});
 
   var _React$useState = React.useState(false),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
       isOpen = _React$useState2[0],
       setIsOpen = _React$useState2[1];
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_react2.IconButton, {
-    ref: buttonRef,
+  return /*#__PURE__*/React.createElement(_react2.Popover, {
+    align: "bottom-right",
+    caret: false,
+    dropShadow: false,
+    open: isOpen,
+    className: "".concat(blockClass, "__row-height-settings-popover")
+  }, /*#__PURE__*/React.createElement(_react2.IconButton, {
     kind: "ghost",
     align: "left",
     onClick: function onClick() {
       return setIsOpen(!isOpen);
     },
-    label: buttonLabel,
+    label: legendText,
     className: (0, _classnames.default)("".concat(blockClass, "__row-size-button"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__row-size-button--open"), isOpen))
-  }, /*#__PURE__*/React.createElement(_iconsReact.Settings, {
+  }, /*#__PURE__*/React.createElement(_icons.Settings, {
     size: 16
-  })), isOpen && /*#__PURE__*/React.createElement(_RowSizeRadioGroup.default, (0, _extends2.default)({}, props, {
-    ref: buttonRef,
+  })), /*#__PURE__*/React.createElement(_react2.PopoverContent, null, /*#__PURE__*/React.createElement(_RowSizeRadioGroup.default, (0, _extends2.default)({}, props, {
+    legendText: legendText,
     hideRadioGroup: function hideRadioGroup() {
       setIsOpen(false);
     }
-  })));
+  }))));
 };
 
 RowSizeDropdown.propTypes = {
-  buttonLabel: _propTypes.default.string,
   datagridName: _propTypes.default.string,
+  legendText: _propTypes.default.string,
   light: _propTypes.default.bool,
   onChange: _propTypes.default.func.isRequired,
   selectedOption: _propTypes.default.string

package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js

@@ -19,6 +19,8 @@ var _isArray = _interopRequireDefault(require("lodash/isArray"));
 
 var _settings = require("../../../../../settings");
 
+var _hooks = require("../../../../../global/js/hooks");
+
 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; }
@@ -34,14 +36,14 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-var RowSizeRadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+
+var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
   var rowSizes = _ref.rowSizes,
       selectedOption = _ref.selectedOption,
       datagridName = _ref.datagridName,
       onChange = _ref.onChange,
       hideRadioGroup = _ref.hideRadioGroup,
-      _ref$legendText = _ref.legendText,
-      legendText = _ref$legendText === void 0 ? 'Row height' : _ref$legendText,
+      legendText = _ref.legendText,
       _ref$rowSizeLabels = _ref.rowSizeLabels,
       rowSizeLabels = _ref$rowSizeLabels === void 0 ? {
     xl: 'Extra large',
@@ -50,41 +52,17 @@ var RowSizeRadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     sm: 'Small',
     xs: 'Extra small'
   } : _ref$rowSizeLabels;
-
-  var getDropdownPosition = function getDropdownPosition(buttonEle) {
-    if (buttonEle instanceof HTMLElement) {
-      var _top = buttonEle.offsetTop + buttonEle.offsetHeight;
-
-      var _right = buttonEle.offsetLeft + buttonEle.offsetWidth;
-
-      return {
-        top: _top,
-        right: _right
-      };
+  var popoverContentRef = (0, _react.useRef)();
+  (0, _hooks.useClickOutside)(popoverContentRef, function (target) {
+    if (target.closest(".".concat(blockClass, "__row-size-button"))) {
+      return;
     }
 
-    return {
-      top: 0,
-      right: 0
-    };
-  };
-
-  var _getDropdownPosition = getDropdownPosition(ref.current),
-      top = _getDropdownPosition.top,
-      right = _getDropdownPosition.right;
-
-  (0, _react.useEffect)(function () {
-    window.addEventListener('click', hideRadioGroup);
-    return function () {
-      window.removeEventListener('click', hideRadioGroup);
-    };
-  }, [hideRadioGroup]);
+    hideRadioGroup();
+  });
   return /*#__PURE__*/_react.default.createElement("div", {
+    ref: popoverContentRef,
     className: "".concat(blockClass, "__row-size-dropdown"),
-    style: {
-      top: top,
-      right: right
-    },
     role: "presentation",
     onClick: function onClick(e) {
       e.stopPropagation();
@@ -111,7 +89,7 @@ var RowSizeRadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
       id: "".concat(datagridName || 'datagrid', "--row-density--").concat(option.value)
     });
   })));
-});
+};
 
 var getBackwardCompatibleRowSize = function getBackwardCompatibleRowSize(rowSize) {
   // TODO: deprecate this function in next major release (v8) on carbon-components-react

package/lib/components/Datagrid/index.js

@@ -23,6 +23,12 @@ Object.defineProperty(exports, "useColumnCenterAlign", {
     return _useColumnCenterAlign.default;
   }
 });
+Object.defineProperty(exports, "useColumnOrder", {
+  enumerable: true,
+  get: function get() {
+    return _useColumnOrder.default;
+  }
+});
 Object.defineProperty(exports, "useColumnRightAlign", {
   enumerable: true,
   get: function get() {
@@ -59,6 +65,12 @@ Object.defineProperty(exports, "useInfiniteScroll", {
     return _useInfiniteScroll.default;
   }
 });
+Object.defineProperty(exports, "useInlineEdit", {
+  enumerable: true,
+  get: function get() {
+    return _useInlineEdit.default;
+  }
+});
 Object.defineProperty(exports, "useNestedRows", {
   enumerable: true,
   get: function get() {
@@ -132,4 +144,8 @@ var _useCustomizeColumns = _interopRequireDefault(require("./useCustomizeColumns
 
 var _useSelectAllToggle = _interopRequireDefault(require("./useSelectAllToggle"));
 
-var _useColumnCenterAlign = _interopRequireDefault(require("./useColumnCenterAlign"));
+var _useColumnCenterAlign = _interopRequireDefault(require("./useColumnCenterAlign"));
+
+var _useColumnOrder = _interopRequireDefault(require("./useColumnOrder"));
+
+var _useInlineEdit = _interopRequireDefault(require("./useInlineEdit"));

package/lib/components/Datagrid/useActionsColumn.js

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -21,13 +21,15 @@ var _react2 = require("@carbon/react");
 
 var _settings = require("../../settings");
 
-var _excluded = ["id", "onClick", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"];
+var _excluded = ["id", "itemText", "onClick", "icon"],
+    _excluded2 = ["id", "onClick", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"];
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
 var useActionsColumn = function useActionsColumn(hooks) {
   var useAttachActionsOnInstance = function useAttachActionsOnInstance(instance) {
     var rowActions = instance.rowActions,
-        isFetching = instance.isFetching;
+        isFetching = instance.isFetching,
+        selectedFlatRows = instance.selectedFlatRows;
 
     if (rowActions && Array.isArray(rowActions)) {
       var addActionsMenu = function addActionsMenu(props, cellData) {
@@ -36,7 +38,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
             column = cell.column;
 
         if (column.isAction) {
-          var _cx;
+          var _cx3;
 
           return [props, {
             children: /*#__PURE__*/_react.default.createElement("div", {
@@ -48,26 +50,36 @@ var useActionsColumn = function useActionsColumn(hooks) {
               style: {
                 display: 'flex'
               }
-            }, rowActions.map(function (action) {
+            }, rowActions.map(function (action, index) {
               var id = action.id,
                   itemText = action.itemText,
                   _onClick = action.onClick,
-                  icon = action.icon;
+                  icon = action.icon,
+                  rest = (0, _objectWithoutProperties2.default)(action, _excluded);
+              var selectedRowId = selectedFlatRows === null || selectedFlatRows === void 0 ? void 0 : selectedFlatRows.filter(function (item) {
+                return item.id === row.id ? item.id : null;
+              });
               return /*#__PURE__*/_react.default.createElement("div", {
-                className: "".concat(blockClass, "__actions-column-button"),
-                key: ""
-              }, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
+                className: (0, _classnames.default)("".concat(blockClass, "__actions-column-button"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__disabled-row-action-button"), selectedFlatRows && selectedFlatRows.length && selectedRowId && selectedRowId.length)),
+                key: "".concat(itemText, "__").concat(index)
+              }, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, (0, _extends2.default)({}, rest, {
                 renderIcon: icon,
                 hasIconOnly: true,
                 light: true,
                 iconDescription: itemText,
                 kind: "ghost",
+                className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__disabled-row-action"), selectedFlatRows && selectedFlatRows.length && selectedRowId && selectedRowId.length)),
                 onClick: function onClick(e) {
+                  if (selectedFlatRows && selectedFlatRows.length && selectedRowId && selectedRowId.length) {
+                    // Row actions should be disabled if row is selected and batchActions toolbar is active
+                    return;
+                  }
+
                   e.stopPropagation();
 
                   _onClick(id, row, e);
                 }
-              }));
+              })));
             })), !isFetching && rowActions.length > 2 && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
               size: "sm",
               light: true,
@@ -81,7 +93,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
                   shouldHideMenuItem = action.shouldHideMenuItem,
                   shouldDisableMenuItem = action.shouldDisableMenuItem,
                   disabled = action.disabled,
-                  rest = (0, _objectWithoutProperties2.default)(action, _excluded);
+                  rest = (0, _objectWithoutProperties2.default)(action, _excluded2);
               var hidden = typeof shouldHideMenuItem === 'function' && shouldHideMenuItem(row); // shouldDisableMenuItem will override disabled because it's more specific
               // if shouldDisableMenuItem doesn't exists, fall back to disabled
 
@@ -101,7 +113,10 @@ var useActionsColumn = function useActionsColumn(hooks) {
                 key: id
               }));
             })))),
-            className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__actions-column-cell"), true), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__cell"), true), _cx))
+            className: (0, _classnames.default)((_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__actions-column-cell"), true), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__cell"), true), _cx3)),
+            style: {
+              width: 96
+            }
           }];
         }
 

package/lib/components/Datagrid/useColumnOrder.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactTable = require("react-table");
+
+/**
+ * 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 _default = _reactTable.useColumnOrder;
+exports.default = _default;

package/lib/components/Datagrid/useCustomizeColumns.js

@@ -35,6 +35,10 @@ var useCustomizeColumns = function useCustomizeColumns(hooks) {
 
   hooks.useInstance.push(function (instance) {
     var customizeColumnsProps = instance.customizeColumnsProps;
+
+    var _ref = customizeColumnsProps || {},
+        labels = _ref.labels;
+
     Object.assign(instance, {
       customizeColumnsProps: _objectSpread(_objectSpread({}, customizeColumnsProps), {}, {
         isModalOpen: isModalOpen,
@@ -42,6 +46,7 @@ var useCustomizeColumns = function useCustomizeColumns(hooks) {
       }),
       CustomizeColumnsButton: function CustomizeColumnsButton(props) {
         return /*#__PURE__*/React.createElement(_CustomizeColumns.ToggleButtonWrapper, (0, _extends2.default)({
+          iconTooltipLabel: labels === null || labels === void 0 ? void 0 : labels.iconTooltipLabel,
           isModalOpen: isModalOpen,
           setIsModalOpen: setIsModalOpen
         }, props));

package/lib/components/Datagrid/useDisableSelectRows.js

@@ -29,6 +29,8 @@ var useDisableSelectRows = function useDisableSelectRows(hooks) {
 
 var updateSelectAll = function updateSelectAll(hooks) {
   var getToggleAllRowsSelectedProps = function getToggleAllRowsSelectedProps(props, _ref2) {
+    var _instance$disableSele, _instance$disableSele2;
+
     var instance = _ref2.instance;
     var selectableRows = instance.rows.filter(function (row) {
       return !(instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row));
@@ -48,7 +50,7 @@ var updateSelectAll = function updateSelectAll(hooks) {
       },
       checked: isAllRowsSelected,
       disabled: instance.disableSelectAll,
-      title: 'Toggle All Rows Selected',
+      title: (instance === null || instance === void 0 ? void 0 : (_instance$disableSele = instance.disableSelectRowsProps) === null || _instance$disableSele === void 0 ? void 0 : (_instance$disableSele2 = _instance$disableSele.labels) === null || _instance$disableSele2 === void 0 ? void 0 : _instance$disableSele2.toggleAllRowsLabel) || 'Toggle All Rows Selected',
       indeterminate: Boolean(!isAllRowsSelected && Object.keys(instance.state.selectedRowIds).length)
     }];
   };
@@ -58,6 +60,8 @@ var updateSelectAll = function updateSelectAll(hooks) {
 
 var updatePageSelectAll = function updatePageSelectAll(hooks) {
   var getToggleAllPageRowsSelectedProps = function getToggleAllPageRowsSelectedProps(props, _ref4) {
+    var _instance$disableSele3, _instance$disableSele4;
+
     var instance = _ref4.instance;
     var selectableRows = instance.page.filter(function (row) {
       return !(instance.shouldDisableSelectRow && instance.shouldDisableSelectRow(row));
@@ -77,7 +81,7 @@ var updatePageSelectAll = function updatePageSelectAll(hooks) {
       },
       checked: isAllRowsSelected,
       disabled: instance.disableSelectAll,
-      title: 'Toggle All Rows Selected',
+      title: (instance === null || instance === void 0 ? void 0 : (_instance$disableSele3 = instance.disableSelectRowsProps) === null || _instance$disableSele3 === void 0 ? void 0 : (_instance$disableSele4 = _instance$disableSele3.labels) === null || _instance$disableSele4 === void 0 ? void 0 : _instance$disableSele4.toggleAllRowsLabel) || 'Toggle All Rows Selected',
       indeterminate: Boolean(!isAllRowsSelected && instance.page.some(function (_ref6) {
         var id = _ref6.id;
         return instance.state.selectedRowIds[id];

package/lib/components/Datagrid/useExpandedRow.js

@@ -42,7 +42,6 @@ var useExpandedRow = function useExpandedRow(hooks) {
       return _objectSpread(_objectSpread({}, row), {}, {
         canExpand: row.original && !row.original.notExpandable,
         expandedContentHeight: expandedRowsHeight[row.index] || expandedContentHeight,
-        // RowRenderer: DatagridExpandedRow(row.RowRenderer, expansionRenderer),
         RowRenderer: (0, _DatagridExpandedRow.default)(row.RowRenderer, ExpandedRowContentComponent)
       });
     });

package/lib/components/Datagrid/useInlineEdit.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _settings = require("../../settings");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _InlineEditCell = require("./Datagrid/addons/InlineEdit/InlineEditCell");
+
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2022
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+
+var useInlineEdit = function useInlineEdit(hooks) {
+  var addInlineEdit = function addInlineEdit(props, _ref) {
+    var _cell$column, _cell$column$inlineEd, _instance$columns$fil;
+
+    var cell = _ref.cell,
+        instance = _ref.instance;
+    var columnInlineEditConfig = cell.column.inlineEdit;
+    var inlineEditType = (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : (_cell$column$inlineEd = _cell$column.inlineEdit) === null || _cell$column$inlineEd === void 0 ? void 0 : _cell$column$inlineEd.type;
+    var totalInlineEditColumns = (_instance$columns$fil = instance.columns.filter(function (item) {
+      return item.inlineEdit;
+    })) === null || _instance$columns$fil === void 0 ? void 0 : _instance$columns$fil.length;
+
+    var renderInlineEditComponent = function renderInlineEditComponent(type) {
+      return /*#__PURE__*/_react.default.createElement(_InlineEditCell.InlineEditCell, {
+        config: columnInlineEditConfig,
+        tabIndex: -1,
+        value: cell.value,
+        cell: cell,
+        instance: instance,
+        totalInlineEditColumns: totalInlineEditColumns,
+        type: type
+      });
+    };
+
+    if (cell.column.id === 'spacer') {
+      return [props, {
+        className: (0, _classnames.default)("".concat(blockClass, "__cell"), "".concat(blockClass, "__cell--spacer"))
+      }];
+    }
+
+    return [props, {
+      className: (0, _classnames.default)("".concat(blockClass, "__cell"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__cell-inline-edit"), true)),
+      role: 'gridcell',
+      children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, inlineEditType === 'text' && renderInlineEditComponent(inlineEditType), inlineEditType === 'number' && renderInlineEditComponent(inlineEditType), inlineEditType === 'selection' && renderInlineEditComponent(inlineEditType), inlineEditType === 'date' && renderInlineEditComponent(inlineEditType), !inlineEditType && /*#__PURE__*/_react.default.createElement(_InlineEditCell.InlineEditCell, {
+        config: columnInlineEditConfig,
+        tabIndex: -1,
+        value: cell.value,
+        cell: cell,
+        instance: instance,
+        disabled: true,
+        nonEditCell: true,
+        totalInlineEditColumns: totalInlineEditColumns,
+        type: "text"
+      }))
+    }];
+  };
+
+  hooks.getCellProps.push(addInlineEdit);
+  hooks.useInstance.push(function (instance) {
+    Object.assign(instance, {
+      withInlineEdit: true
+    });
+  });
+};
+
+var _default = useInlineEdit;
+exports.default = _default;

package/lib/components/Datagrid/useNestedRowExpander.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _icons = require("@carbon/react/icons");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _settings = require("../../settings");
+
+/* eslint-disable react/prop-types */
+
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2020
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+
+var useNestedRowExpander = function useNestedRowExpander(hooks) {
+  var visibleColumns = function visibleColumns(columns) {
+    var expanderColumn = {
+      id: 'expander',
+      Cell: function Cell(_ref) {
+        var _cx;
+
+        var row = _ref.row;
+        return row.canExpand && /*#__PURE__*/_react.default.createElement("span", row.getToggleRowExpandedProps(), /*#__PURE__*/_react.default.createElement(_icons.ChevronRight, {
+          className: (0, _classnames.default)("".concat(blockClass, "__expander-icon"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__expander-icon--not-open"), !row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__expander-icon--open"), row.isExpanded), _cx))
+        }));
+      },
+      width: 48,
+      disableResizing: true,
+      disableSortBy: true,
+      Header: ''
+    };
+    return [expanderColumn].concat((0, _toConsumableArray2.default)(columns));
+  };
+
+  hooks.visibleColumns.push(visibleColumns);
+};
+
+var _default = useNestedRowExpander;
+exports.default = _default;

package/lib/components/Datagrid/useNestedRows.js

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _useRowExpander = _interopRequireDefault(require("./useRowExpander"));
-
 var _settings = require("../../settings");
 
+var _useNestedRowExpander = _interopRequireDefault(require("./useNestedRowExpander"));
+
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -21,7 +21,7 @@ var _settings = require("../../settings");
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
 var useNestedRows = function useNestedRows(hooks) {
-  (0, _useRowExpander.default)(hooks);
+  (0, _useNestedRowExpander.default)(hooks);
   var marginLeft = 24;
 
   var getRowProps = function getRowProps(props, _ref) {

package/lib/components/Datagrid/useRowExpander.js

@@ -11,7 +11,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _react = _interopRequireDefault(require("react"));
 
-var _iconsReact = require("@carbon/icons-react");
+var _icons = require("@carbon/react/icons");
 
 /* eslint-disable react/prop-types */
 
@@ -28,9 +28,9 @@ var useRowExpander = function useRowExpander(hooks) {
       id: 'expander',
       Cell: function Cell(_ref) {
         var row = _ref.row;
-        return row.canExpand && /*#__PURE__*/_react.default.createElement("span", row.getToggleRowExpandedProps(), row.isExpanded ? /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronUp, {
+        return row.canExpand && /*#__PURE__*/_react.default.createElement("span", row.getToggleRowExpandedProps(), row.isExpanded ? /*#__PURE__*/_react.default.createElement(_icons.ChevronUp, {
           size: 16
-        }) : /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronDown, {
+        }) : /*#__PURE__*/_react.default.createElement(_icons.ChevronDown, {
           size: 16
         }));
       },

package/lib/components/Datagrid/useRowSize.js

@@ -7,19 +7,18 @@ 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 = require("react");
 
 var _RowSize = require("./Datagrid/addons/RowSize");
 
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020, 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
- */
+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 useRowSize = function useRowSize(hooks) {
   var _useState = (0, _react.useState)(''),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -27,13 +26,19 @@ var useRowSize = function useRowSize(hooks) {
       setRowSize = _useState2[1];
 
   hooks.useInstance.push(function (instance) {
-    var rowSizes = instance.rowSizes,
+    var rowSizeProps = instance.rowSizeProps,
+        rowSizes = instance.rowSizes,
         rowSize = instance.rowSize,
         onRowSizeChange = instance.onRowSizeChange;
+
+    var _ref = rowSizeProps || {},
+        labels = _ref.labels;
+
     Object.assign(instance, {
       rowSize: internalRowSize || rowSize,
-      rowSizeDropdownProps: {
-        rowSizes: rowSizes,
+      rowSizeDropdownProps: _objectSpread(_objectSpread({
+        rowSizes: rowSizes
+      }, labels), {}, {
         selectedOption: internalRowSize || rowSize,
         onChange: function onChange(value) {
           setRowSize(value);
@@ -42,13 +47,13 @@ var useRowSize = function useRowSize(hooks) {
             onRowSizeChange(value);
           }
         }
-      },
+      }),
       RowSizeDropdown: _RowSize.RowSizeDropdown
     });
   });
 
-  var getTableProps = function getTableProps(props, _ref) {
-    var instance = _ref.instance;
+  var getTableProps = function getTableProps(props, _ref2) {
+    var instance = _ref2.instance;
     var rowSize = instance.rowSize;
 
     if (!rowSize) {