@carbon/ibm-products 2.0.0-rc.24 → 2.0.0-rc.26

package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js

@@ -41,13 +41,11 @@ var CustomStep = function CustomStep(_ref) {
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, (0, _extends2.default)({}, rest, {
     disableSubmit: !value1
-  }), /*#__PURE__*/_react.default.createElement(_react2.Grid, {
-    narrow: true
-  }, /*#__PURE__*/_react.default.createElement(_react2.Column, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.Grid, null, /*#__PURE__*/_react.default.createElement(_react2.Column, {
     xlg: 8,
     lg: 8,
     md: 8,
-    sm: 8
+    sm: 4
   }, /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
     value: value1,
     onChange: function onChange(event) {
@@ -189,13 +187,11 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
     disableSubmit: !stepOneTextInputValue,
     subtitle: "This is the unique name used to recognize your topic",
     description: "It will also be used by your producers and consumers as part of the connection information, so make it something easy to recognize."
-  }, /*#__PURE__*/_react.default.createElement(_react2.Grid, {
-    narrow: true
-  }, /*#__PURE__*/_react.default.createElement(_react2.Column, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Grid, null, /*#__PURE__*/_react.default.createElement(_react2.Column, {
     xlg: 8,
     lg: 8,
     md: 8,
-    sm: 8
+    sm: 4
   }, /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
     labelText: "Topic name",
     placeholder: "Enter topic name",
@@ -268,11 +264,11 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
     subtitle: "One or more partitions make up a topic. A partition is an ordered list of messages.",
     description: "Partitions are distributed across the brokers in order to increase the scalability of your topic. You can also use them to distribute messages across the members of a consumer group.",
     fieldsetLegendText: "Partition information"
-  }, /*#__PURE__*/_react.default.createElement(_react2.Grid, {
-    narrow: true
-  }, /*#__PURE__*/_react.default.createElement(_react2.Column, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Grid, null, /*#__PURE__*/_react.default.createElement(_react2.Column, {
     xlg: 3,
-    lg: 3
+    lg: 3,
+    md: 8,
+    sm: 4
   }, /*#__PURE__*/_react.default.createElement(_react2.NumberInput, {
     iconDescription: "Choose a number",
     id: "carbon-number",
@@ -294,13 +290,11 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
     subtitle: "This is how long messages are retained before they are deleted.",
     description: "If your messages are not read by a consumer within this time, they will be missed.",
     fieldsetLegendText: "Message retention scheduling"
-  }, /*#__PURE__*/_react.default.createElement(_react2.Grid, {
-    narrow: true
-  }, /*#__PURE__*/_react.default.createElement(_react2.Column, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Grid, null, /*#__PURE__*/_react.default.createElement(_react2.Column, {
     xlg: 8,
     lg: 8,
     md: 8,
-    sm: 8
+    sm: 4
   }, /*#__PURE__*/_react.default.createElement(_react2.RadioButtonGroup, {
     legendText: "Message retention",
     name: "radio-button-group",

package/lib/components/CreateTearsheet/preview-components/MultiStepWithIntro.js

@@ -32,7 +32,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /* eslint-disable react/prop-types */
 
 /**
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 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.
@@ -207,13 +207,11 @@ var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
     disableSubmit: !stepOneTextInputValue,
     subtitle: "This is the unique name used to recognize your topic",
     description: "It will also be used by your producers and consumers as part of the connection information, so make it something easy to recognize."
-  }, /*#__PURE__*/_react.default.createElement(_react2.Grid, {
-    narrow: true
-  }, /*#__PURE__*/_react.default.createElement(_react2.Column, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Grid, null, /*#__PURE__*/_react.default.createElement(_react2.Column, {
     xlg: 8,
     lg: 8,
     md: 8,
-    sm: 8
+    sm: 4
   }, /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
     labelText: "Topic name",
     id: "tearsheet-multi-step-story-text-input-multi-step-1",
@@ -266,11 +264,11 @@ var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
     subtitle: "One or more partitions make up a topic. A partition is an ordered list of messages.",
     description: "Partitions are distributed across the brokers in order to increase the scalability of your topic. You can also use them to distribute messages across the members of a consumer group.",
     fieldsetLegendText: "Partition information"
-  }, /*#__PURE__*/_react.default.createElement(_react2.Grid, {
-    narrow: true
-  }, /*#__PURE__*/_react.default.createElement(_react2.Column, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Grid, null, /*#__PURE__*/_react.default.createElement(_react2.Column, {
     xlg: 3,
-    lg: 3
+    lg: 3,
+    md: 8,
+    sm: 4
   }, /*#__PURE__*/_react.default.createElement(_react2.NumberInput, {
     iconDescription: "Choose a number",
     id: "carbon-number",
@@ -292,13 +290,11 @@ var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
     subtitle: "This is how long messages are retained before they are deleted.",
     description: "If your messages are not read by a consumer within this time, they will be missed.",
     fieldsetLegendText: "Message retention scheduling"
-  }, /*#__PURE__*/_react.default.createElement(_react2.Grid, {
-    narrow: true
-  }, /*#__PURE__*/_react.default.createElement(_react2.Column, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Grid, null, /*#__PURE__*/_react.default.createElement(_react2.Column, {
     xlg: 8,
     lg: 8,
     md: 8,
-    sm: 8
+    sm: 4
   }, /*#__PURE__*/_react.default.createElement(_react2.RadioButtonGroup, {
     legendText: "Message retention",
     name: "radio-button-group",

package/lib/components/Datagrid/Datagrid/DatagridContent.js

@@ -129,9 +129,9 @@ var DatagridContent = function DatagridContent(_ref) {
         return (0, _handleGridKeyPress.handleGridKeyPress)({
           event: event,
           dispatch: dispatch,
-          inlineEditState: inlineEditState,
           instance: datagridState,
           keysPressedList: keysPressedList,
+          state: inlineEditState,
           usingMac: usingMac
         });
       } : null,

package/lib/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -139,7 +139,7 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
       setGlobalFilter(null);
     }
   }, !displayAllInMenu && toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
-    if (index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length === 3) {
+    if (index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length <= 3) {
       return /*#__PURE__*/_react.default.createElement(_react2.TableBatchAction, {
         key: "".concat(batchAction.label, "-").concat(index),
         renderIcon: batchAction.renderIcon,

package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -25,6 +25,8 @@ var _DatagridHead = _interopRequireDefault(require("./DatagridHead"));
 
 var _layout = require("@carbon/layout");
 
+var _reactResizeDetector = require("react-resize-detector");
+
 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; }
@@ -66,10 +68,20 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
       handleResize = datagridState.handleResize,
       gridRef = datagridState.gridRef;
 
+  var handleVirtualGridResize = function handleVirtualGridResize() {
+    var gridRefElement = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current;
+    gridRefElement.style.width = gridRefElement === null || gridRefElement === void 0 ? void 0 : gridRefElement.clientWidth;
+  };
+
+  (0, _reactResizeDetector.useResizeDetector)({
+    onResize: handleVirtualGridResize,
+    targetRef: gridRef
+  });
+
   var syncScroll = function syncScroll(e) {
     var virtualBody = e.target;
-    document.querySelector(".".concat(blockClass, "__head-warp")).scrollLeft = virtualBody.scrollLeft;
-    var spacerColumn = document.querySelector(".".concat(blockClass, "__head-warp thead th:last-child"));
+    document.querySelector(".".concat(blockClass, "__head-wrap")).scrollLeft = virtualBody.scrollLeft;
+    var spacerColumn = document.querySelector(".".concat(blockClass, "__head-wrap thead th:last-child"));
     spacerColumn.style.width = (0, _layout.px)(32 + (virtualBody.offsetWidth - virtualBody.clientWidth)); // scrollbar width to header column to fix header alignment
   };
 
@@ -84,7 +96,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
 
   var visibleRows = DatagridPagination && page || rows;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__head-warp"),
+    className: "".concat(blockClass, "__head-wrap"),
     style: {
       width: (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth,
       overflow: 'hidden'

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js

@@ -25,12 +25,10 @@ var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"))
 
 var _settings = require("../../../../../settings");
 
-var _DraggableElement = _interopRequireDefault(require("../../DraggableElement"));
-
-var _common = require("./common");
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _DraggableItemsList = require("./DraggableItemsList");
+
 /**
  * Copyright IBM Corp. 2022, 2022
  *
@@ -61,7 +59,8 @@ var Columns = function Columns(_ref) {
       onSelectColumn = _ref.onSelectColumn,
       assistiveTextInstructionsLabel = _ref.assistiveTextInstructionsLabel,
       assistiveTextDisabledInstructionsLabel = _ref.assistiveTextDisabledInstructionsLabel,
-      selectAllLabel = _ref.selectAllLabel;
+      selectAllLabel = _ref.selectAllLabel,
+      isTableSortable = _ref.isTableSortable;
 
   var _React$useState = _react.default.useState(''),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -117,65 +116,17 @@ var Columns = function Columns(_ref) {
     },
     id: "".concat(blockClass, "__customization-column-select-all"),
     labelText: selectAllLabel
-  })), columns.filter(function (colDef) {
-    return filterString.length === 0 || colDef.Header.props.title.toLowerCase().includes(filterString);
-  }).map(function (colDef, i) {
-    var searchString = new RegExp('(' + filterString + ')');
-    var res = filterString.length ? colDef.Header.props.title.toLowerCase().split(searchString) : null;
-    var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;
-    var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : colDef.Header.props.title;
-    var isFrozenColumn = !!colDef.sticky;
-
-    var listContents = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
-      className: (0, _classnames.default)("".concat(blockClass, "__customize-columns-checkbox-wrapper"), "".concat(blockClass, "__customize-columns-checkbox")),
-      checked: (0, _common.isColumnVisible)(colDef),
-      disabled: isFrozenColumn,
-      onChange: function onChange(_, _ref2) {
-        var checked = _ref2.checked;
-        return onSelectColumn(colDef, checked);
-      },
-      id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
-      labelText: colDef.Header.props.title,
-      title: colDef.Header.props.title,
-      hideLabel: true
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      dangerouslySetInnerHTML: {
-        __html: highlightedText
-      }
-    }));
-
-    return /*#__PURE__*/_react.default.createElement(_DraggableElement.default, {
-      key: colDef.id,
-      index: i,
-      listData: columns,
-      setListData: setColumnsObject,
-      id: "dnd-datagrid-columns-".concat(colDef.id),
-      type: "column-customization",
-      disabled: filterString.length > 0 || isFrozenColumn,
-      ariaLabel: colDef.Header.props.title,
-      onGrab: setAriaRegionText,
-      isFocused: focusIndex === i,
-      isSticky: isFrozenColumn,
-      moveElement: moveElement,
-      onArrowKeyDown: function onArrowKeyDown(e, isGrabbed, currentIndex) {
-        if (isGrabbed) {
-          var _columns$nextIndex;
-
-          var nextIndex = getNextIndex(columns, currentIndex, e.key);
-          e.preventDefault();
-          e.stopPropagation();
-
-          if (nextIndex >= 0 && !((_columns$nextIndex = columns[nextIndex]) !== null && _columns$nextIndex !== void 0 && _columns$nextIndex.sticky)) {
-            setFocusIndex(nextIndex);
-            moveElement(currentIndex, nextIndex);
-            e.target.scrollIntoView({
-              block: 'center'
-            });
-          }
-        }
-      },
-      selected: (0, _common.isColumnVisible)(colDef)
-    }, listContents);
+  })), /*#__PURE__*/_react.default.createElement(_DraggableItemsList.DraggableItemsList, {
+    columns: columns,
+    filterString: filterString,
+    focusIndex: focusIndex,
+    getNextIndex: getNextIndex,
+    isTableSortable: isTableSortable,
+    moveElement: moveElement,
+    onSelectColumn: onSelectColumn,
+    setAriaRegionText: setAriaRegionText,
+    setColumnsObject: setColumnsObject,
+    setFocusIndex: setFocusIndex
   }))));
 };
 
@@ -187,6 +138,7 @@ Columns.propTypes = {
   filterString: _propTypes.default.string.isRequired,
   getVisibleColumnsCount: _propTypes.default.func.isRequired,
   instructionsLabel: _propTypes.default.string,
+  isTableSortable: _propTypes.default.bool.isRequired,
   onSelectColumn: _propTypes.default.func.isRequired,
   selectAllLabel: _propTypes.default.string,
   setColumnStatus: _propTypes.default.func,

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -60,7 +60,8 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
       _ref$assistiveTextDis = _ref.assistiveTextDisabledInstructionsLabel,
       assistiveTextDisabledInstructionsLabel = _ref$assistiveTextDis === void 0 ? 'Reordering columns are disabled because they are filtered currently.' : _ref$assistiveTextDis,
       _ref$selectAllLabel = _ref.selectAllLabel,
-      selectAllLabel = _ref$selectAllLabel === void 0 ? 'Column name' : _ref$selectAllLabel;
+      selectAllLabel = _ref$selectAllLabel === void 0 ? 'Column name' : _ref$selectAllLabel,
+      isTableSortable = _ref.isTableSortable;
 
   var _useState = (0, _react.useState)(''),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -77,12 +78,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
       searchText = _useState6[0],
       setSearchText = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(columnDefinitions // hide the columns without Header, e.g the sticky actions, spacer
-  .filter(function (colDef) {
-    return !!colDef.Header.props && !!colDef.Header.props.title;
-  }).filter(function (colDef) {
-    return !colDef.isAction;
-  }) // only sort the hidden column to the end when modal reopen
+  var _useState7 = (0, _react.useState)(columnDefinitions // only sort the hidden column to the end when modal reopen
   .sort(function (defA, defB) {
     var isVisibleA = (0, _common.isColumnVisible)(defA);
     var isVisibleB = (0, _common.isColumnVisible)(defB);
@@ -188,7 +184,8 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
       setColumnObjects(cols);
       setDirty();
     },
-    selectAllLabel: selectAllLabel
+    selectAllLabel: selectAllLabel,
+    isTableSortable: isTableSortable
   }));
 };
 
@@ -200,6 +197,7 @@ CustomizeColumnsTearsheet.propTypes = {
   findColumnPlaceholderLabel: _propTypes.default.string,
   instructionsLabel: _propTypes.default.string,
   isOpen: _propTypes.default.bool.isRequired,
+  isTableSortable: _propTypes.default.bool.isRequired,
   onSaveColumnPrefs: _propTypes.default.func.isRequired,
   originalColumnDefinitions: _propTypes.default.array.isRequired,
   primaryButtonTextLabel: _propTypes.default.string,

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DraggableItemsList = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = require("prop-types");
+
+var _react2 = require("@carbon/react");
+
+var _common = require("./common");
+
+var _DraggableElement = _interopRequireDefault(require("../../DraggableElement"));
+
+var _settings = require("../../../../../settings");
+
+/**
+ * Copyright IBM Corp. 2023, 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 DraggableItemsList = function DraggableItemsList(_ref) {
+  var columns = _ref.columns,
+      filterString = _ref.filterString,
+      focusIndex = _ref.focusIndex,
+      getNextIndex = _ref.getNextIndex,
+      isTableSortable = _ref.isTableSortable,
+      moveElement = _ref.moveElement,
+      onSelectColumn = _ref.onSelectColumn,
+      setAriaRegionText = _ref.setAriaRegionText,
+      setColumnsObject = _ref.setColumnsObject,
+      setFocusIndex = _ref.setFocusIndex;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, columns // hide the columns without Header, e.g the sticky actions, spacer
+  .filter(function (colDef) {
+    var _colDef$Header$props$, _colDef$Header$props;
+
+    var sortableTitle = isTableSortable && ((_colDef$Header$props$ = colDef.Header().props.children.props) === null || _colDef$Header$props$ === void 0 ? void 0 : _colDef$Header$props$.title);
+    return !!colDef.Header.props && !!((_colDef$Header$props = colDef.Header.props) !== null && _colDef$Header$props !== void 0 && _colDef$Header$props.title) || isTableSortable && !!sortableTitle;
+  }).filter(function (colDef) {
+    return !colDef.isAction;
+  }).filter(function (colDef) {
+    var _colDef$Header$props$2, _colDef$Header$props2, _colDef$Header$props3;
+
+    var sortableTitle = isTableSortable && ((_colDef$Header$props$2 = colDef.Header().props.children.props) === null || _colDef$Header$props$2 === void 0 ? void 0 : _colDef$Header$props$2.title);
+    return filterString.length === 0 || (isTableSortable ? sortableTitle === null || sortableTitle === void 0 ? void 0 : sortableTitle.toLowerCase().includes(filterString) : (_colDef$Header$props2 = colDef.Header.props) === null || _colDef$Header$props2 === void 0 ? void 0 : (_colDef$Header$props3 = _colDef$Header$props2.title) === null || _colDef$Header$props3 === void 0 ? void 0 : _colDef$Header$props3.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
+  }).map(function (colDef, i) {
+    var _colDef$Header$props$3, _colDef$Header$props4, _colDef$Header$props5, _colDef$Header$props6, _colDef$Header$props7;
+
+    var isSortableColumn = !!colDef.canSort && !!isTableSortable;
+    var sortableTitle = isTableSortable && ((_colDef$Header$props$3 = colDef.Header().props.children.props) === null || _colDef$Header$props$3 === void 0 ? void 0 : _colDef$Header$props$3.title);
+    var searchString = new RegExp('(' + filterString + ')');
+    var res = filterString.length ? isSortableColumn ? sortableTitle.toLowerCase().split(searchString) : colDef.Header.props.title.toLowerCase().split(searchString) : null;
+    var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;
+    var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : isSortableColumn ? sortableTitle : (_colDef$Header$props4 = colDef.Header.props) === null || _colDef$Header$props4 === void 0 ? void 0 : _colDef$Header$props4.title;
+    var isFrozenColumn = !!colDef.sticky;
+
+    var listContents = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
+      wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
+      checked: (0, _common.isColumnVisible)(colDef),
+      disabled: isFrozenColumn,
+      onChange: function onChange(_, _ref2) {
+        var checked = _ref2.checked;
+        return onSelectColumn(colDef, checked);
+      },
+      id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
+      labelText: isSortableColumn ? sortableTitle : (_colDef$Header$props5 = colDef.Header.props) === null || _colDef$Header$props5 === void 0 ? void 0 : _colDef$Header$props5.title,
+      title: isSortableColumn ? sortableTitle : (_colDef$Header$props6 = colDef.Header.props) === null || _colDef$Header$props6 === void 0 ? void 0 : _colDef$Header$props6.title,
+      className: "".concat(blockClass, "__customize-columns-checkbox"),
+      hideLabel: true
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: highlightedText
+      },
+      className: "".concat(blockClass, "__customize-columns-checkbox-visible-label")
+    }));
+
+    return /*#__PURE__*/_react.default.createElement(_DraggableElement.default, {
+      key: colDef.id,
+      index: i,
+      listData: columns,
+      setListData: setColumnsObject,
+      id: "dnd-datagrid-columns-".concat(colDef.id),
+      type: "column-customization",
+      disabled: filterString.length > 0 || isFrozenColumn,
+      ariaLabel: isSortableColumn ? sortableTitle : (_colDef$Header$props7 = colDef.Header.props) === null || _colDef$Header$props7 === void 0 ? void 0 : _colDef$Header$props7.title,
+      onGrab: setAriaRegionText,
+      isFocused: focusIndex === i,
+      moveElement: moveElement,
+      onArrowKeyDown: function onArrowKeyDown(e, isGrabbed, currentIndex) {
+        if (isGrabbed) {
+          var _columns$nextIndex;
+
+          var nextIndex = getNextIndex(columns, currentIndex, e.key);
+          e.preventDefault();
+          e.stopPropagation();
+
+          if (nextIndex >= 0 && !((_columns$nextIndex = columns[nextIndex]) !== null && _columns$nextIndex !== void 0 && _columns$nextIndex.sticky)) {
+            setFocusIndex(nextIndex);
+            moveElement(currentIndex, nextIndex);
+            e.target.scrollIntoView({
+              block: 'center'
+            });
+          }
+        }
+      },
+      isSticky: isFrozenColumn,
+      selected: (0, _common.isColumnVisible)(colDef)
+    }, listContents);
+  }));
+};
+
+exports.DraggableItemsList = DraggableItemsList;
+DraggableItemsList.propTypes = {
+  columns: _propTypes.PropTypes.array.isRequired,
+  filterString: _propTypes.PropTypes.string.isRequired,
+  focusIndex: _propTypes.PropTypes.number.isRequired,
+  getNextIndex: _propTypes.PropTypes.func.isRequired,
+  isTableSortable: _propTypes.PropTypes.bool,
+  moveElement: _propTypes.PropTypes.func.isRequired,
+  onSelectColumn: _propTypes.PropTypes.func.isRequired,
+  setAriaRegionText: _propTypes.PropTypes.func.isRequired,
+  setColumnsObject: _propTypes.PropTypes.func.isRequired,
+  setFocusIndex: _propTypes.PropTypes.func.isRequired
+};

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js

@@ -35,6 +35,7 @@ var TearsheetWrapper = function TearsheetWrapper(_ref) {
       rest = (0, _objectWithoutProperties2.default)(_instance$customizeCo, _excluded);
   return /*#__PURE__*/React.createElement(_CustomizeColumnsTearsheet.default, (0, _extends2.default)({}, rest, labels, {
     isOpen: isTearsheetOpen,
+    isTableSortable: instance === null || instance === void 0 ? void 0 : instance.isTableSortable,
     setIsTearsheetOpen: setIsTearsheetOpen,
     columnDefinitions: instance.allColumns,
     originalColumnDefinitions: instance.columns,

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

@@ -11,8 +11,6 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -31,7 +29,7 @@ var _RowSizeRadioGroup = _interopRequireDefault(require("./RowSizeRadioGroup"));
 
 var _settings = require("../../../../../settings");
 
-var _excluded = ["legendText"];
+var _excluded = ["align", "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,7 +38,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
 var RowSizeDropdown = function RowSizeDropdown(_ref) {
-  var _ref$legendText = _ref.legendText,
+  var _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'bottom' : _ref$align,
+      _ref$legendText = _ref.legendText,
       legendText = _ref$legendText === void 0 ? 'Row height' : _ref$legendText,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
@@ -49,31 +49,38 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
       isOpen = _React$useState2[0],
       setIsOpen = _React$useState2[1];
 
-  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, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !isOpen && /*#__PURE__*/React.createElement(_react2.IconButton, {
     kind: "ghost",
-    align: "left",
+    align: align,
     onClick: function onClick() {
-      return setIsOpen(!isOpen);
+      return setIsOpen(function (prevOpen) {
+        return !prevOpen;
+      });
     },
     label: legendText,
-    className: (0, _classnames.default)("".concat(blockClass, "__row-size-button"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__row-size-button--open"), isOpen))
+    className: (0, _classnames.default)("".concat(blockClass, "__row-size-button"))
+  }, /*#__PURE__*/React.createElement(_icons.Settings, {
+    size: 16
+  })), isOpen && /*#__PURE__*/React.createElement(_react2.Toggletip, {
+    defaultOpen: true,
+    className: "".concat(blockClass, "__row-size-toggle-tip")
+  }, /*#__PURE__*/React.createElement(_react2.ToggletipButton, {
+    className: (0, _classnames.default)("".concat(blockClass, "__row-size-toggle-tip-button"), "".concat(blockClass, "__row-size-button--open")),
+    label: legendText
   }, /*#__PURE__*/React.createElement(_icons.Settings, {
     size: 16
-  })), /*#__PURE__*/React.createElement(_react2.PopoverContent, null, /*#__PURE__*/React.createElement(_RowSizeRadioGroup.default, (0, _extends2.default)({}, props, {
+  })), /*#__PURE__*/React.createElement(_react2.ToggletipContent, {
+    className: "".concat(blockClass, "__row-size-toggle-tip-content")
+  }, /*#__PURE__*/React.createElement(_RowSizeRadioGroup.default, (0, _extends2.default)({}, props, {
     legendText: legendText,
     hideRadioGroup: function hideRadioGroup() {
       setIsOpen(false);
     }
-  }))));
+  })))));
 };
 
 RowSizeDropdown.propTypes = {
+  align: _react2.IconButton.propTypes.align,
   datagridName: _propTypes.default.string,
   legendText: _propTypes.default.string,
   light: _propTypes.default.bool,

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

@@ -83,6 +83,7 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
     }
 
     return /*#__PURE__*/_react.default.createElement(_react2.RadioButton, {
+      className: "".concat(blockClass, "__row-size-radio-button"),
       key: option.value,
       labelText: labelText,
       value: option.value,

package/lib/components/Datagrid/index.js

@@ -11,6 +11,12 @@ Object.defineProperty(exports, "Datagrid", {
     return _Datagrid.Datagrid;
   }
 });
+Object.defineProperty(exports, "getAutoSizedColumnWidth", {
+  enumerable: true,
+  get: function get() {
+    return _getAutoSizedColumnWidth.getAutoSizedColumnWidth;
+  }
+});
 Object.defineProperty(exports, "useActionsColumn", {
   enumerable: true,
   get: function get() {
@@ -156,4 +162,6 @@ var _useColumnOrder = _interopRequireDefault(require("./useColumnOrder"));
 
 var _useInlineEdit = _interopRequireDefault(require("./useInlineEdit"));
 
-var _useFiltering = _interopRequireDefault(require("./useFiltering"));
+var _useFiltering = _interopRequireDefault(require("./useFiltering"));
+
+var _getAutoSizedColumnWidth = require("./utils/getAutoSizedColumnWidth");

package/lib/components/Datagrid/useInfiniteScroll.js

@@ -15,6 +15,8 @@ var _useParentDimensions = _interopRequireDefault(require("./useParentDimensions
 
 var _useResizeTable = _interopRequireDefault(require("./useResizeTable"));
 
+var _settings = require("../../settings");
+
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -25,6 +27,9 @@ var _useResizeTable = _interopRequireDefault(require("./useResizeTable"));
 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,

package/lib/components/Datagrid/useOnRowClick.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
- * (c) Copyright IBM Corp. 2020
+ * (c) Copyright IBM Corp. 2020, 2023
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
@@ -23,9 +23,9 @@ var useOnRowClick = function useOnRowClick(hooks) {
       var id = row.id,
           toggleRowSelected = row.toggleRowSelected;
 
-      var onClick = function onClick() {
+      var onClick = function onClick(event) {
         if (!isFetching && onRowClick) {
-          onRowClick(row);
+          onRowClick(row, event);
           instance.selectedFlatRows && instance.selectedFlatRows.map(function (toggleRow) {
             return toggleRow.toggleRowSelected(false);
           });