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

package/lib/components/Datagrid/Datagrid/DatagridHead.js

@@ -1,35 +1,30 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@carbon/react");
-
 /**
  * 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 TableHead = _react2.DataTable.TableHead;
 
 var DatagridHead = function DatagridHead(datagridState) {
   var _datagridState$header = datagridState.headerGroups,
-      headerGroups = _datagridState$header === void 0 ? [] : _datagridState$header,
-      headRef = datagridState.headRef,
-      HeaderRow = datagridState.HeaderRow;
-  return /*#__PURE__*/_react.default.createElement(TableHead, null, headerGroups.map(function (headerGroup) {
-    return (// doesn't support header grouping.
+    headerGroups = _datagridState$header === void 0 ? [] : _datagridState$header,
+    headRef = datagridState.headRef,
+    HeaderRow = datagridState.HeaderRow;
+  return /*#__PURE__*/_react.default.createElement(_react2.TableHead, null, headerGroups.map(function (headerGroup) {
+    return (
+      // doesn't support header grouping.
       HeaderRow(datagridState, headRef, headerGroup)
     );
   }));
 };
-
 var _default = DatagridHead;
 exports.default = _default;

package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -1,37 +1,31 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _react2 = require("@carbon/react");
-
 var _commonColumnIds = require("../common-column-ids");
-
 var _settings = require("../../../settings");
-
 /**
  * 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.
  */
+
 // @flow
-var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
-  return /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({}, headerGroup.getHeaderGroupProps(), {
+  return /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({}, headerGroup.getHeaderGroupProps({
+    role: false
+  }), {
     className: (0, _classnames.default)("".concat(blockClass, "__head"), headerGroup.getHeaderGroupProps().className),
     ref: headRef
   }), datagridState.headers.filter(function (_ref) {
@@ -39,15 +33,15 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     return isVisible;
   }).map(function (header) {
     var _cx;
-
     if (header.id === _commonColumnIds.selectionColumnId) {
       // render directly without the wrapper TableHeader
       return header.render('Header', {
         key: header.id
       });
     }
-
-    return /*#__PURE__*/_react.default.createElement(TableHeader, (0, _extends2.default)({}, header.getHeaderProps(), {
+    return /*#__PURE__*/_react.default.createElement(_react2.TableHeader, (0, _extends2.default)({}, header.getHeaderProps({
+      role: false
+    }), {
       className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__sortableColumn"), header.canSort), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
       key: header.id
     }), header.render('Header'), header.getResizerProps && /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, header.getResizerProps(), {
@@ -55,19 +49,13 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     })));
   }));
 };
-
-var TableHeader = _react2.DataTable.TableHeader,
-    TableRow = _react2.DataTable.TableRow;
-
 var useHeaderRow = function useHeaderRow(hooks) {
   var useInstance = function useInstance(instance) {
     Object.assign(instance, {
       HeaderRow: HeaderRow
     });
   };
-
   hooks.useInstance.push(useInstance);
 };
-
 var _default = useHeaderRow;
 exports.default = _default;

package/lib/components/Datagrid/Datagrid/DatagridRefBody.js

@@ -1,36 +1,36 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _settings = require("../../../settings");
-
 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 blockClass = "".concat(_settings.pkg.prefix, "--datagrid"); // TableBody from carbon is a functional component
+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. 2021
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * 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");
+
+// TableBody from carbon is a functional component
 // hence no way to pass the ref to html element without changes in carbon side
 // define html directly here.
 // ref should be passed in thru getTableBodyProps
-
 var DatagridRefBody = function DatagridRefBody(datagridState) {
   var getTableBodyProps = datagridState.getTableBodyProps,
-      rows = datagridState.rows,
-      prepareRow = datagridState.prepareRow;
-  return /*#__PURE__*/_react.default.createElement("tbody", (0, _extends2.default)({}, getTableBodyProps(), {
+    rows = datagridState.rows,
+    prepareRow = datagridState.prepareRow;
+  return /*#__PURE__*/_react.default.createElement("tbody", (0, _extends2.default)({}, getTableBodyProps({
+    role: false
+  }), {
     className: (0, _classnames.default)("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
   }), rows.map(function (row) {
     prepareRow(row);
@@ -39,6 +39,5 @@ var DatagridRefBody = function DatagridRefBody(datagridState) {
     }));
   }));
 };
-
 var _default = DatagridRefBody;
 exports.default = _default;

package/lib/components/Datagrid/Datagrid/DatagridRow.js

@@ -1,87 +1,126 @@
 "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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireWildcard(require("react"));
-
+var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@carbon/react");
-
+var _layout = require("@carbon/layout");
 var _commonColumnIds = require("../common-column-ids");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _settings = require("../../../settings");
-
-var _InlineEditContext = require("./addons/InlineEdit/InlineEditContext/InlineEditContext");
-
-var _getCellIdAsObject = require("./addons/InlineEdit/InlineEditContext/getCellIdAsObject");
-
 var _excluded = ["children"];
-
-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; }
-
+/*
+ * 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.
+ */
+// @flow
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-var TableRow = _react2.DataTable.TableRow,
-    TableCell = _react2.DataTable.TableCell; // eslint-disable-next-line react/prop-types
+var rowHeights = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 48,
+  xl: 64
+};
 
+// eslint-disable-next-line react/prop-types
 var DatagridRow = function DatagridRow(datagridState) {
   var _cx;
-
-  var row = datagridState.row;
-
-  var _useContext = (0, _react.useContext)(_InlineEditContext.InlineEditContext),
-      state = _useContext.state;
-
-  var activeCellId = state.activeCellId;
-  var activeCellObject = activeCellId && (0, _getCellIdAsObject.getCellIdAsObject)(activeCellId);
-  return /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({
-    className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-hover-active"), activeCellObject && row.index === activeCellObject.row), _cx))
-  }, row.getRowProps(), {
+  var row = datagridState.row,
+    rowSize = datagridState.rowSize,
+    withNestedRows = datagridState.withNestedRows;
+  var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
+    var isExpanded = _ref.isExpanded,
+      subRows = _ref.subRows;
+    var size = 0;
+    if (isExpanded && subRows) {
+      size += subRows.length;
+      subRows.forEach(function (child) {
+        size += getVisibleNestedRowCount(child);
+      });
+    }
+    return size;
+  };
+  var hoverHandler = function hoverHandler(event) {
+    var _hoverRow$style, _hoverRow$style2, _hoverRow$style3;
+    var subRowCount = getVisibleNestedRowCount(row);
+    var totalNestedRowIndicatorHeight = (0, _layout.px)(subRowCount * rowHeights[rowSize]);
+    var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
+    hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.add("".concat(blockClass, "__carbon-row-expanded-hover-active"));
+    var rowExpanderButton = hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.querySelector(".".concat(blockClass, "__row-expander"));
+    var rowSizeValue = rowSize || 'lg';
+    hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style = hoverRow.style) === null || _hoverRow$style === void 0 ? void 0 : _hoverRow$style.setProperty("--".concat(blockClass, "--indicator-height"), totalNestedRowIndicatorHeight);
+    hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style2 = hoverRow.style) === null || _hoverRow$style2 === void 0 ? void 0 : _hoverRow$style2.setProperty("--".concat(blockClass, "--row-height"), (0, _layout.px)(rowHeights[rowSizeValue]));
+    hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style3 = hoverRow.style) === null || _hoverRow$style3 === void 0 ? void 0 : _hoverRow$style3.setProperty("--".concat(blockClass, "--indicator-offset-amount"), (0, _layout.px)((rowExpanderButton === null || rowExpanderButton === void 0 ? void 0 : rowExpanderButton.offsetLeft) || 0));
+  };
+  var focusRemover = function focusRemover() {
+    var elements = document.querySelectorAll(".".concat(blockClass, "__carbon-row-expanded"));
+    elements.forEach(function (el) {
+      el.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({
+    className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), _cx))
+  }, row.getRowProps({
+    role: false
+  }), {
     key: row.id,
     onMouseEnter: function onMouseEnter(event) {
-      var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
-      hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.add("".concat(blockClass, "__carbon-row-expanded-hover-active"));
+      if (!withNestedRows) {
+        return;
+      }
+      hoverHandler(event);
     },
     onMouseLeave: function onMouseLeave(event) {
       var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
       hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
+    },
+    onFocus: function onFocus(event) {
+      if (!withNestedRows) {
+        return;
+      }
+      hoverHandler(event);
+    },
+    onBlur: function onBlur() {
+      focusRemover();
+    },
+    onKeyUp: function onKeyUp(event) {
+      if (!withNestedRows) {
+        return;
+      }
+      if (event.key === 'Enter' || event.key === 'Space') {
+        focusRemover();
+        hoverHandler(event);
+      }
     }
-  }), row.cells.map(function (cell) {
-    var cellProps = cell.getCellProps();
+  }), row.cells.map(function (cell, index) {
+    var cellProps = cell.getCellProps({
+      role: false
+    });
     var children = cellProps.children,
-        restProps = (0, _objectWithoutProperties2.default)(cellProps, _excluded);
-
+      restProps = (0, _objectWithoutProperties2.default)(cellProps, _excluded);
     var content = children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !row.isSkeleton && cell.render('Cell'), row.isSkeleton && /*#__PURE__*/_react.default.createElement(_react2.SkeletonText, null));
-
     if (cell && cell.column && cell.column.id === _commonColumnIds.selectionColumnId) {
       // directly render component without the wrapping TableCell
       return cell.render('Cell', {
         key: cell.column.id
       });
     }
-
-    return /*#__PURE__*/_react.default.createElement(TableCell, (0, _extends2.default)({
-      className: "".concat(blockClass, "__cell")
+    return /*#__PURE__*/_react.default.createElement(_react2.TableCell, (0, _extends2.default)({
+      className: (0, _classnames.default)("".concat(blockClass, "__cell"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0))
     }, restProps, {
       key: cell.column.id
     }), content);
   }));
 };
-
 var _default = DatagridRow;
 exports.default = _default;

package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -1,64 +1,72 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SelectAll = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@carbon/react");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _settings = require("../../../settings");
-
 var _excluded = ["onChange"];
+/*
+ * 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.
+ */
+// @flow
+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; }
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-
 var SelectAll = function SelectAll(datagridState) {
   var _columns$;
-
+  var _useState = (0, _react.useState)(window.innerWidth),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    windowSize = _useState2[0],
+    setWindowSize = _useState2[1];
+  (0, _react.useLayoutEffect)(function () {
+    function updateSize() {
+      setWindowSize(window.innerWidth);
+    }
+    window.addEventListener('resize', updateSize);
+    return function () {
+      return window.removeEventListener('resize', updateSize);
+    };
+  }, []);
   var isFetching = datagridState.isFetching,
-      getToggleAllRowsSelectedProps = datagridState.getToggleAllRowsSelectedProps,
-      getToggleAllPageRowsSelectedProps = datagridState.getToggleAllPageRowsSelectedProps,
-      tableId = datagridState.tableId,
-      hideSelectAll = datagridState.hideSelectAll,
-      DatagridPagination = datagridState.DatagridPagination,
-      radio = datagridState.radio,
-      columns = datagridState.columns,
-      withStickyColumn = datagridState.withStickyColumn;
+    getToggleAllRowsSelectedProps = datagridState.getToggleAllRowsSelectedProps,
+    getToggleAllPageRowsSelectedProps = datagridState.getToggleAllPageRowsSelectedProps,
+    tableId = datagridState.tableId,
+    hideSelectAll = datagridState.hideSelectAll,
+    DatagridPagination = datagridState.DatagridPagination,
+    radio = datagridState.radio,
+    columns = datagridState.columns,
+    withStickyColumn = datagridState.withStickyColumn;
   var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
-
   if (hideSelectAll || radio) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)("".concat(blockClass, "__head-hidden-select-all"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft))
+      className: (0, _classnames.default)("".concat(blockClass, "__head-hidden-select-all"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
     });
   }
-
   var getProps = DatagridPagination ? getToggleAllPageRowsSelectedProps : getToggleAllRowsSelectedProps;
-
   var _getProps = getProps(),
-      onChange = _getProps.onChange,
-      selectProps = (0, _objectWithoutProperties2.default)(_getProps, _excluded);
-
+    onChange = _getProps.onChange,
+    selectProps = (0, _objectWithoutProperties2.default)(_getProps, _excluded);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft))
-  }, /*#__PURE__*/_react.default.createElement(TableSelectAll, (0, _extends2.default)({}, selectProps, {
+    className: (0, _classnames.default)("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
+  }, /*#__PURE__*/_react.default.createElement(_react2.TableSelectAll, (0, _extends2.default)({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onSelect: onChange,
     disabled: isFetching || selectProps.disabled,
     id: "".concat(tableId, "-select-all-checkbox-id")
   })));
 };
-
-exports.SelectAll = SelectAll;
-var TableSelectAll = _react2.DataTable.TableSelectAll;
+exports.SelectAll = SelectAll;

package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js

@@ -1,93 +1,88 @@
 "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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _react2 = require("@carbon/react");
-
 var _icons = require("@carbon/react/icons");
-
 var _settings = require("../../../settings");
-
 var _excluded = ["onChange"];
-
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
 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; }
-
 // cspell:words columnheader
+
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var SELECT_ALL_PAGE_ROWS = 'pageRows';
 var SELECT_ALL_ROWS = 'allRows';
-
 var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
   var _columns$;
-
   var tableId = _ref.tableId,
-      isFetching = _ref.isFetching,
-      isAllRowsSelected = _ref.isAllRowsSelected,
-      selectAllToggle = _ref.selectAllToggle,
-      getToggleAllPageRowsSelectedProps = _ref.getToggleAllPageRowsSelectedProps,
-      getToggleAllRowsSelectedProps = _ref.getToggleAllRowsSelectedProps,
-      _ref$allPageRowsLabel = _ref.allPageRowsLabel,
-      allPageRowsLabel = _ref$allPageRowsLabel === void 0 ? 'Select all on page' : _ref$allPageRowsLabel,
-      _ref$allRowsLabel = _ref.allRowsLabel,
-      allRowsLabel = _ref$allRowsLabel === void 0 ? 'Select all' : _ref$allRowsLabel,
-      columns = _ref.columns,
-      withStickyColumn = _ref.withStickyColumn;
-
+    isFetching = _ref.isFetching,
+    isAllRowsSelected = _ref.isAllRowsSelected,
+    selectAllToggle = _ref.selectAllToggle,
+    getToggleAllPageRowsSelectedProps = _ref.getToggleAllPageRowsSelectedProps,
+    getToggleAllRowsSelectedProps = _ref.getToggleAllRowsSelectedProps,
+    _ref$allPageRowsLabel = _ref.allPageRowsLabel,
+    allPageRowsLabel = _ref$allPageRowsLabel === void 0 ? 'Select all on page' : _ref$allPageRowsLabel,
+    _ref$allRowsLabel = _ref.allRowsLabel,
+    allRowsLabel = _ref$allRowsLabel === void 0 ? 'Select all' : _ref$allRowsLabel,
+    columns = _ref.columns,
+    withStickyColumn = _ref.withStickyColumn;
   var _useState = (0, _react.useState)(SELECT_ALL_PAGE_ROWS),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      selectAllMode = _useState2[0],
-      setSelectAllMode = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    selectAllMode = _useState2[0],
+    setSelectAllMode = _useState2[1];
   (0, _react.useEffect)(function () {
     if (onSelectAllRows) {
       onSelectAllRows(isAllRowsSelected && selectAllMode === SELECT_ALL_ROWS);
     }
   }, [isAllRowsSelected, selectAllMode, onSelectAllRows]);
-
+  var _useState3 = (0, _react.useState)(window.innerWidth),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    windowSize = _useState4[0],
+    setWindowSize = _useState4[1];
+  (0, _react.useLayoutEffect)(function () {
+    function updateSize() {
+      setWindowSize(window.innerWidth);
+    }
+    window.addEventListener('resize', updateSize);
+    return function () {
+      return window.removeEventListener('resize', updateSize);
+    };
+  }, []);
   var _ref2 = selectAllToggle || {},
-      onSelectAllRows = _ref2.onSelectAllRows,
-      labels = _ref2.labels;
-
+    onSelectAllRows = _ref2.onSelectAllRows,
+    labels = _ref2.labels;
   if (labels) {
     allPageRowsLabel = labels.allPageRows || allPageRowsLabel;
     allRowsLabel = labels.allRows || allRowsLabel;
   }
-
   var getProps = selectAllMode === SELECT_ALL_PAGE_ROWS ? getToggleAllPageRowsSelectedProps : getToggleAllRowsSelectedProps;
-
   var _getProps = getProps(),
-      onChange = _getProps.onChange,
-      selectProps = (0, _objectWithoutProperties2.default)(_getProps, _excluded);
-
+    onChange = _getProps.onChange,
+    selectProps = (0, _objectWithoutProperties2.default)(_getProps, _excluded);
   var disabled = isFetching || selectProps.disabled;
   var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
   return /*#__PURE__*/_react.default.createElement("th", {
     role: "columnheader",
     scope: "col",
-    className: (0, _classnames.default)("".concat(blockClass, "__select-all-toggle-on"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft))
+    className: (0, _classnames.default)("".concat(blockClass, "__select-all-toggle-on"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
   }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, (0, _extends2.default)({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onClick: function onClick(e) {
@@ -104,20 +99,21 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
       }, props));
     },
     size: "sm",
-    ariaLabel: allRowsLabel
+    "aria-label": allRowsLabel,
+    menuOptionsClass: "".concat(blockClass, "__select-all-toggle-overflow")
   }, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
     itemText: allPageRowsLabel,
     requireTitle: true,
     disabled: disabled,
     onClick: function onClick() {
-      setSelectAllMode(SELECT_ALL_PAGE_ROWS); // deselect all rows first
-
+      setSelectAllMode(SELECT_ALL_PAGE_ROWS);
+      // deselect all rows first
       getToggleAllRowsSelectedProps().onChange({
         target: {
           checked: false
         }
-      }); // select all row on current page
-
+      });
+      // select all row on current page
       getToggleAllPageRowsSelectedProps().onChange({
         target: {
           checked: true
@@ -138,7 +134,6 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
     }
   })));
 };
-
 SelectAllWithToggle.propTypes = {
   allPageRowsLabel: _propTypes.default.string,
   allRowsLabel: _propTypes.default.string,