@carbon/ibm-products 2.0.0-rc.25 → 2.0.0-rc.27

package/lib/components/Card/Card.js

@@ -112,7 +112,9 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     if (overflowActions.length > 0) {
       var pos = actionsPlacement === 'top' ? 'bottom' : 'top';
       var size = actionsPlacement === 'top' ? 'sm' : 'md';
-      return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
+      return /*#__PURE__*/_react.default.createElement(_react2.Layer, {
+        level: 2
+      }, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
         size: size,
         direction: pos,
         flipped: true,
@@ -123,7 +125,7 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, (0, _extends2.default)({
           key: id
         }, rest));
-      }));
+      })));
     }
 
     var icons = actionIcons.map(function (_ref3) {
@@ -266,8 +268,8 @@ Card.propTypes = {
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   clickZone: _propTypes.default.oneOf(['one', 'two', 'three']),
-  description: _propTypes.default.string,
-  label: _propTypes.default.string,
+  description: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
   media: _propTypes.default.node,
   mediaPosition: _propTypes.default.oneOf(['top', 'left']),
   onClick: _propTypes.default.func,
@@ -292,7 +294,7 @@ Card.propTypes = {
   secondaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   secondaryButtonKind: _propTypes.default.oneOf(['secondary', 'ghost']),
   secondaryButtonText: _propTypes.default.string,
-  title: _propTypes.default.string,
+  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
   titleSize: _propTypes.default.oneOf(['default', 'large'])
 };
 Card.displayName = componentName;

package/lib/components/Card/CardHeader.js

@@ -78,7 +78,7 @@ var CardHeader = function CardHeader(_ref) {
 exports.CardHeader = CardHeader;
 CardHeader.propTypes = {
   actions: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.node]),
-  description: _propTypes.default.string,
+  description: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
   hasActions: _propTypes.default.bool,
   label: _propTypes.default.string,
   noActionIcons: _propTypes.default.bool,
@@ -86,7 +86,7 @@ CardHeader.propTypes = {
   primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
   primaryButtonText: _propTypes.default.string,
-  title: _propTypes.default.string,
+  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
   titleSize: _propTypes.default.oneOf(['default', 'large'])
 };
 CardHeader.displayName = componentName;

package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js

@@ -17,12 +17,11 @@ var _react2 = require("@carbon/react");
 
 var _EmptyStates = require("../../EmptyStates");
 
-/*
- * 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.
+/**
+ * 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.
  */
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
@@ -37,25 +36,21 @@ var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
       illustrationTheme = datagridState.illustrationTheme,
       emptyStateAction = datagridState.emptyStateAction,
       emptyStateLink = datagridState.emptyStateLink;
-  return /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
-    className: "".concat(blockClass, "__empty-state-body")
-  }), /*#__PURE__*/_react.default.createElement(_react2.TableRow, null, /*#__PURE__*/_react.default.createElement(_react2.TableCell, {
-    colSpan: headers.length
-  }, emptyStateType === 'error' && /*#__PURE__*/_react.default.createElement(_EmptyStates.ErrorEmptyState, {
-    illustrationTheme: illustrationTheme,
-    size: emptyStateSize,
-    title: emptyStateTitle,
-    subtitle: emptyStateDescription,
-    action: emptyStateAction,
-    link: emptyStateLink
-  }), emptyStateType === 'noData' && /*#__PURE__*/_react.default.createElement(_EmptyStates.NoDataEmptyState, {
+  var emptyStateProps = {
     illustrationTheme: illustrationTheme,
     size: emptyStateSize,
     title: emptyStateTitle,
     subtitle: emptyStateDescription,
     action: emptyStateAction,
     link: emptyStateLink
-  }))));
+  };
+  return /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps({
+    role: false
+  }), {
+    className: "".concat(blockClass, "__empty-state-body")
+  }), /*#__PURE__*/_react.default.createElement(_react2.TableRow, null, /*#__PURE__*/_react.default.createElement(_react2.TableCell, {
+    colSpan: headers.length
+  }, emptyStateType === 'error' && /*#__PURE__*/_react.default.createElement(_EmptyStates.ErrorEmptyState, emptyStateProps), emptyStateType === 'noData' && /*#__PURE__*/_react.default.createElement(_EmptyStates.NoDataEmptyState, emptyStateProps), emptyStateType === 'notFound' && /*#__PURE__*/_react.default.createElement(_EmptyStates.NotFoundEmptyState, emptyStateProps))));
 };
 
 var _default = DatagridEmptyBody;

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

@@ -31,7 +31,9 @@ var _settings = require("../../../settings");
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
 var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
-  return /*#__PURE__*/_react.default.createElement(_react2.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) {
@@ -47,7 +49,9 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       });
     }
 
-    return /*#__PURE__*/_react.default.createElement(_react2.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(), {

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

@@ -30,7 +30,9 @@ 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(), {
+  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);

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

@@ -80,7 +80,9 @@ var DatagridRow = function DatagridRow(datagridState) {
 
   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(), {
+  }, row.getRowProps({
+    role: false
+  }), {
     key: row.id,
     onMouseEnter: function onMouseEnter(event) {
       if (!withNestedRows) {
@@ -114,7 +116,9 @@ var DatagridRow = function DatagridRow(datagridState) {
       }
     }
   }), row.cells.map(function (cell, index) {
-    var cellProps = cell.getCellProps();
+    var cellProps = cell.getCellProps({
+      role: false
+    });
     var children = cellProps.children,
         restProps = (0, _objectWithoutProperties2.default)(cellProps, _excluded);
 

package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js

@@ -29,7 +29,9 @@ var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
   var getTableBodyProps = datagridState.getTableBodyProps,
       rows = datagridState.rows,
       prepareRow = datagridState.prepareRow;
-  return /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
+  return /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps({
+    role: false
+  }), {
     className: (0, _classnames.default)("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
   }), rows.map(function (row) {
     prepareRow(row);

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

@@ -101,7 +101,9 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
       width: (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth,
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState)), /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps(), {
+  }, /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState)), /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps({
+    role: false
+  }), {
     onScroll: function onScroll(e) {
       return syncScroll(e);
     }

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,70 +116,17 @@ var Columns = function Columns(_ref) {
     },
     id: "".concat(blockClass, "__customization-column-select-all"),
     labelText: selectAllLabel
-  })), columns // 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;
-  }).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
   }))));
 };
 
@@ -192,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),
@@ -183,7 +184,8 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
       setColumnObjects(cols);
       setDirty();
     },
-    selectAllLabel: selectAllLabel
+    selectAllLabel: selectAllLabel,
+    isTableSortable: isTableSortable
   }));
 };
 
@@ -195,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/Filtering/hooks/useFilters.js

@@ -147,6 +147,17 @@ var useFilters = function useFilters(_ref) {
 
         filtersObjectArrayCopy.splice(_index2, 1);
       }
+    } else if (type === _constants.NUMBER) {
+      // If the value is empty remove it from the filtersObjectArray
+      if (value === '') {
+        // Find the column that uses number and displays an empty string
+        var _index3 = filtersObjectArrayCopy.findIndex(function (filter) {
+          return filter.id === column;
+        }); // Remove it from the filters array
+
+
+        filtersObjectArrayCopy.splice(_index3, 1);
+      }
     }
 
     setFiltersObjectArray(filtersObjectArrayCopy); // // Automatically apply the filters if the updateMethod is instant

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,