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

package/lib/components/Datagrid/useExpandedRow.js

@@ -1,43 +1,36 @@
 "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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = require("react");
-
 var _DatagridExpandedRow = _interopRequireDefault(require("./Datagrid/DatagridExpandedRow"));
-
 var _useRowExpander = _interopRequireDefault(require("./useRowExpander"));
-
 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; }
-
+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; } /*
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * 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 useExpandedRow = function useExpandedRow(hooks) {
   (0, _useRowExpander.default)(hooks);
-
   var useInstance = function useInstance(instance) {
     var rows = instance.rows,
-        expandedContentHeight = instance.expandedContentHeight,
-        ExpandedRowContentComponent = instance.ExpandedRowContentComponent;
-
+      expandedContentHeight = instance.expandedContentHeight,
+      ExpandedRowContentComponent = instance.ExpandedRowContentComponent;
     var _useState = (0, _react.useState)({}),
-        _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-        expandedRowsHeight = _useState2[0],
-        setExpandedRowsHeight = _useState2[1];
-
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      expandedRowsHeight = _useState2[0],
+      setExpandedRowsHeight = _useState2[1];
     var setExpandedRowHeight = function setExpandedRowHeight(rowIndex, height) {
       return setExpandedRowsHeight(_objectSpread(_objectSpread({}, expandedRowsHeight), {}, (0, _defineProperty2.default)({}, rowIndex, height)));
     };
-
     var rowsWithExpand = rows.map(function (row) {
       return _objectSpread(_objectSpread({}, row), {}, {
         canExpand: row.original && !row.original.notExpandable,
@@ -50,9 +43,7 @@ var useExpandedRow = function useExpandedRow(hooks) {
       setExpandedRowHeight: setExpandedRowHeight
     });
   };
-
   hooks.useInstance.push(useInstance);
 };
-
 var _default = useExpandedRow;
 exports.default = _default;

package/lib/components/Datagrid/useFiltering.js

@@ -0,0 +1,98 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _Filtering = require("./Datagrid/addons/Filtering");
+var _constants = require("./Datagrid/addons/Filtering/constants");
+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; } /*
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * Licensed Materials - Property of IBM
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * 5724-Q36
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * (c) Copyright IBM Corp. 2023
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * US Government Users Restricted Rights - Use, duplication or disclosure
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * restricted by GSA ADP Schedule Contract with IBM Corp.
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          */
+var useFiltering = function useFiltering(hooks) {
+  var filterTypes = (0, _react.useMemo)(function () {
+    return {
+      date: function date(rows, id, _ref) {
+        var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+          startDate = _ref2[0],
+          endDate = _ref2[1];
+        return rows.filter(function (row) {
+          var rowValue = row.values[id];
+          if (rowValue.getTime() <= endDate.getTime() && rowValue.getTime() >= startDate.getTime()) {
+            // In date range
+            return true;
+          } else {
+            // Not in date range
+            return false;
+          }
+        });
+      },
+      number: function number(rows, id, value) {
+        if (value === '') {
+          return rows;
+        }
+        var parsedValue = parseInt(value);
+        return rows.filter(function (row) {
+          var rowValue = row.values[id];
+          return rowValue === parsedValue;
+        });
+      },
+      checkbox: function checkbox(rows, id, value) {
+        // gets all the items that are selected and returns their value
+        var selectedItems = value.filter(function (item) {
+          return item.selected;
+        }).map(function (item) {
+          return item.value;
+        });
+
+        // if the user removed all checkboxes then display all rows
+        if (selectedItems.length === 0) {
+          return rows;
+        }
+        return rows.filter(function (row) {
+          var rowValue = row.values[id];
+          return selectedItems.includes(rowValue);
+        });
+      }
+    };
+  }, []);
+  hooks.useInstance.push(function (instance) {
+    var filterProps = instance.filterProps,
+      setAllFilters = instance.setAllFilters,
+      setFilter = instance.setFilter,
+      headers = instance.headers,
+      data = instance.data,
+      state = instance.state;
+    var defaultProps = {
+      variation: 'flyout',
+      updateMethod: _constants.BATCH,
+      panelIconDescription: 'Open filter panel',
+      initialFilters: state.filters
+    };
+    var getFilterFlyoutProps = function getFilterFlyoutProps() {
+      return _objectSpread(_objectSpread(_objectSpread({}, defaultProps), filterProps), {}, {
+        setAllFilters: setAllFilters,
+        setFilter: setFilter,
+        headers: headers,
+        data: data
+      });
+    };
+    Object.assign(instance, {
+      filterProps: _objectSpread(_objectSpread({}, defaultProps), instance.filterProps),
+      filterTypes: filterTypes,
+      getFilterFlyoutProps: getFilterFlyoutProps,
+      FilterFlyout: _Filtering.FilterFlyout
+    });
+  });
+};
+var _default = useFiltering;
+exports.default = _default;

package/lib/components/Datagrid/useFlexResize.js

@@ -1,14 +1,11 @@
 "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"));
-
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -26,14 +23,11 @@ var useFlexResize = function useFlexResize(hooks) {
   hooks.visibleColumns.push(function (columns) {
     return [].concat((0, _toConsumableArray2.default)(columns), [spacerColumn]);
   });
-
   var changeProps = function changeProps(props, data) {
     var column = data.column;
-
     if (!column && data.cell) {
       column = data.cell.column;
     }
-
     if (column.id === spacerColumn.id) {
       return [props, {
         style: {
@@ -41,14 +35,12 @@ var useFlexResize = function useFlexResize(hooks) {
         }
       }];
     }
-
     return [props, {
       style: {
         flex: '0 0 auto'
       }
     }];
   };
-
   hooks.getHeaderProps.push(function (props, data) {
     return changeProps(props, data);
   });
@@ -56,6 +48,5 @@ var useFlexResize = function useFlexResize(hooks) {
     return changeProps(props, data);
   });
 };
-
 var _default = useFlexResize;
 exports.default = _default;

package/lib/components/Datagrid/useFloatingScroll.js

@@ -1,18 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _settings = require("../../settings");
-
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -20,60 +15,52 @@ var _settings = require("../../settings");
  * 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 blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var useFloatingScroll = function useFloatingScroll(hooks) {
   var useInstance = function useInstance(instance) {
     var tableId = instance.tableId,
-        withVirtualScroll = instance.withVirtualScroll,
-        ExpandedRowContentComponent = instance.ExpandedRowContentComponent;
+      withVirtualScroll = instance.withVirtualScroll,
+      ExpandedRowContentComponent = instance.ExpandedRowContentComponent;
     (0, _react.useEffect)(function () {
       // Floating scroll doesn't work with expanded rows and virtual scroll
       if (withVirtualScroll || ExpandedRowContentComponent) {
         return;
       }
-
-      var datagrid = document.getElementById(tableId); // eslint-disable-next-line no-unused-expressions
-
+      var datagrid = document.getElementById(tableId);
+      // eslint-disable-next-line no-unused-expressions
       datagrid === null || datagrid === void 0 ? void 0 : datagrid.classList.add("".concat(blockClass, "__sticky"));
     }, [ExpandedRowContentComponent, tableId, withVirtualScroll]);
   };
-
   var useAddStickyClass = function useAddStickyClass(instance) {
     var withVirtualScroll = instance.withVirtualScroll,
-        ExpandedRowContentComponent = instance.ExpandedRowContentComponent; // Floating scroll doesn't work with expanded rows and virtual scroll
-
+      ExpandedRowContentComponent = instance.ExpandedRowContentComponent;
+    // Floating scroll doesn't work with expanded rows and virtual scroll
     if (withVirtualScroll || ExpandedRowContentComponent) {
       return;
     }
-
     var addStickyClass = function addStickyClass(props) {
       return [props, {
         className: (0, _classnames.default)(props.className, "".concat(blockClass, "__sticky"))
       }];
     };
-
     hooks.getTableProps.push(addStickyClass);
     hooks.getTableBodyProps.push(addStickyClass);
     hooks.getHeaderGroupProps.push(addStickyClass);
   };
-
   var useAddScrollListener = function useAddScrollListener(instance) {
     var withVirtualScroll = instance.withVirtualScroll,
-        ExpandedRowContentComponent = instance.ExpandedRowContentComponent,
-        tableId = instance.tableId; // Floating scroll doesn't work with expanded rows and virtual scroll
-
+      ExpandedRowContentComponent = instance.ExpandedRowContentComponent,
+      tableId = instance.tableId;
+    // Floating scroll doesn't work with expanded rows and virtual scroll
     if (withVirtualScroll || ExpandedRowContentComponent) {
       return;
     }
-
     var memoHead;
-
     var addOnScroll = function addOnScroll(props) {
       return [props, {
         onScroll: function onScroll(e) {
           var simpleThead;
-
           if (memoHead) {
             simpleThead = memoHead;
           } else {
@@ -81,21 +68,17 @@ var useFloatingScroll = function useFloatingScroll(hooks) {
             simpleThead = datagrid === null || datagrid === void 0 ? void 0 : datagrid.querySelector(".".concat(blockClass, "__table-simple thead > div"));
             memoHead = simpleThead;
           }
-
           if (simpleThead) {
             simpleThead.scrollLeft = e.target.scrollLeft;
           }
         }
       }];
     };
-
     hooks.getTableBodyProps.push(addOnScroll);
   };
-
   hooks.useInstance.push(useAddStickyClass);
   hooks.useInstance.push(useAddScrollListener);
   hooks.useInstance.push(useInstance);
 };
-
 var _default = useFloatingScroll;
 exports.default = _default;

package/lib/components/Datagrid/useInfiniteScroll.js

@@ -1,20 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
-
 var _useParentDimensions = _interopRequireDefault(require("./useParentDimensions"));
-
 var _useResizeTable = _interopRequireDefault(require("./useResizeTable"));
-
+var _settings = require("../../settings");
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -22,46 +17,45 @@ var _useResizeTable = _interopRequireDefault(require("./useResizeTable"));
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
+
 var useInfiniteScroll = function useInfiniteScroll(hooks) {
   (0, _useParentDimensions.default)(hooks);
   (0, _useResizeTable.default)(hooks);
-
+  (0, _react.useEffect)(function () {
+    _settings.pkg.checkReportFeatureEnabled('Datagrid.useInfiniteScroll');
+  }, []);
   var useInstance = function useInstance(instance) {
     var isFetching = instance.isFetching,
-        tableHeight = instance.tableHeight,
-        innerListRef = instance.innerListRef,
-        fetchMoreData = instance.fetchMoreData;
+      tableHeight = instance.tableHeight,
+      innerListRef = instance.innerListRef,
+      fetchMoreData = instance.fetchMoreData,
+      tableId = instance.tableId;
+    var tableElement = document.querySelector("#".concat(tableId));
+    var totalTableHeight = tableHeight || (tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientHeight);
     var loadMoreThreshold = 200;
-
-    var emptyFetchData = function emptyFetchData() {}; // eslint-disable-next-line react-hooks/exhaustive-deps
-
-
+    var emptyFetchData = function emptyFetchData() {};
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     var fetchMore = (0, _react.useCallback)((0, _debounce.default)(fetchMoreData || emptyFetchData, 3000, {
       leading: true,
       trailing: false
     }), [fetchMoreData]);
-
     var onScroll = function onScroll(_ref) {
       var scrollDirection = _ref.scrollDirection,
-          scrollOffset = _ref.scrollOffset;
-
+        scrollOffset = _ref.scrollOffset;
       if (innerListRef && innerListRef.current) {
-        if (!isFetching && scrollDirection === 'forward' && scrollOffset + tableHeight >= innerListRef.current.clientHeight - loadMoreThreshold) {
+        if (!isFetching && scrollDirection === 'forward' && scrollOffset + totalTableHeight >= innerListRef.current.clientHeight - loadMoreThreshold) {
           if (fetchMoreData) {
             fetchMore();
           }
         }
       }
     };
-
     Object.assign(instance, {
       onScroll: onScroll,
       withVirtualScroll: true
     });
   };
-
   hooks.useInstance.push(useInstance);
 };
-
 var _default = useInfiniteScroll;
 exports.default = _default;

package/lib/components/Datagrid/useInlineEdit.js

@@ -1,43 +1,41 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
+var _react = _interopRequireWildcard(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.
+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; }
+/**
+ * Copyright IBM Corp. 2022, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
-var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
-var useInlineEdit = function useInlineEdit(hooks) {
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var useInlineEdit = function useInlineEdit(hooks, usingEditableCell) {
+  (0, _react.useEffect)(function () {
+    if (!usingEditableCell) {
+      _settings.pkg.checkReportFeatureEnabled('Datagrid.useInlineEdit');
+    }
+  }, [usingEditableCell]);
   var addInlineEdit = function addInlineEdit(props, _ref) {
     var _cell$column, _cell$column$inlineEd, _instance$columns$fil;
-
     var cell = _ref.cell,
-        instance = _ref.instance;
+      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,
@@ -49,17 +47,15 @@ var useInlineEdit = function useInlineEdit(hooks) {
         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)),
+      className: (0, _classnames.default)("".concat(blockClass, "__cell"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__cell-inline-edit"), !!usingEditableCell || _settings.pkg.isFeatureEnabled('Datagrid.useInlineEdit') ? 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, {
+      children: (!!usingEditableCell || _settings.pkg.isFeatureEnabled('Datagrid.useInlineEdit')) && /*#__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,
@@ -72,14 +68,12 @@ var useInlineEdit = function useInlineEdit(hooks) {
       }))
     }];
   };
-
   hooks.getCellProps.push(addInlineEdit);
   hooks.useInstance.push(function (instance) {
     Object.assign(instance, {
-      withInlineEdit: true
+      withInlineEdit: !!usingEditableCell || _settings.pkg.isFeatureEnabled('Datagrid.useInlineEdit') ? true : false
     });
   });
 };
-
 var _default = useInlineEdit;
 exports.default = _default;

package/lib/components/Datagrid/useNestedRowExpander.js

@@ -1,26 +1,18 @@
 "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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 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
@@ -28,17 +20,20 @@ var _settings = require("../../settings");
  * 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 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, {
+        return row.canExpand && /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
+          type: "button",
+          "aria-label": "Expand current row",
+          className: (0, _classnames.default)("".concat(blockClass, "__row-expander"), "".concat(_settings.carbon.prefix, "--btn"), "".concat(_settings.carbon.prefix, "--btn--ghost"))
+        }, 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))
         }));
       },
@@ -49,9 +44,7 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
     };
     return [expanderColumn].concat((0, _toConsumableArray2.default)(columns));
   };
-
   hooks.visibleColumns.push(visibleColumns);
 };
-
 var _default = useNestedRowExpander;
 exports.default = _default;

package/lib/components/Datagrid/useNestedRows.js

@@ -1,16 +1,14 @@
 "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 _settings = require("../../settings");
-
+var _classnames = _interopRequireDefault(require("classnames"));
 var _useNestedRowExpander = _interopRequireDefault(require("./useNestedRowExpander"));
-
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -18,48 +16,48 @@ var _useNestedRowExpander = _interopRequireDefault(require("./useNestedRowExpand
  * 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 blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var useNestedRows = function useNestedRows(hooks) {
   (0, _useNestedRowExpander.default)(hooks);
   var marginLeft = 24;
-
   var getRowProps = function getRowProps(props, _ref) {
+    var _cx;
     var row = _ref.row;
     return [props, {
-      className: row.depth > 0 ? "".concat(blockClass, "__carbon-nested-row") : ''
+      className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-nested-row"), row.depth > 0), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _cx))
     }];
   };
-
   var getRowStyles = function getRowStyles(props, _ref2) {
     var row = _ref2.row;
     return [props, {
       style: {
-        marginLeft: "".concat(row.depth > 0 ? marginLeft : 0, "px"),
-        paddingLeft: "".concat(row.depth > 1 ? marginLeft * (row.depth - 1) + marginLeft : row.depth === 1 ? marginLeft : 0, "px"),
-        maxWidth: "calc(100% - ".concat(marginLeft * row.depth, "px)")
+        paddingLeft: "".concat(row.depth > 1 ? marginLeft * 2 + (row.depth - 1) * (marginLeft + marginLeft / 3) : row.depth === 1 ? marginLeft * 2 : 0, "px")
       }
     }];
   };
-
   var getCellProps = function getCellProps(props, _ref3) {
     var cell = _ref3.cell,
-        instance = _ref3.instance;
+      instance = _ref3.instance;
     // reduce the "first cell"s width to compensate added (left) margin
     var isFirstCell = instance.columns.findIndex(function (c) {
       return c.id === cell.column.id;
     }) === 0;
     return [props, {
       style: {
-        marginRight: "".concat(isFirstCell && cell.row.depth > 0 ? "-".concat(marginLeft * (cell.row.depth + 1), "px") : '')
+        marginRight: "".concat(isFirstCell && cell.row.depth > 0 ? "".concat(-32 * cell.row.depth - 18, "px") : '')
       }
     }];
   };
-
+  var useInstance = function useInstance(instance) {
+    Object.assign(instance, {
+      withNestedRows: true
+    });
+  };
   hooks.getRowProps.push(getRowProps);
   hooks.getRowProps.push(getRowStyles);
   hooks.getCellProps.push(getCellProps);
+  hooks.useInstance.push(useInstance);
 };
-
 var _default = useNestedRows;
 exports.default = _default;