@carbon/ibm-products 1.47.0 → 1.49.0

package/es/components/AddSelect/AddSelectList.js

@@ -8,7 +8,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 //
 
 import React from 'react';
-import { Button, Checkbox, Dropdown, RadioButton, StructuredListRow, StructuredListWrapper, StructuredListBody } from 'carbon-components-react';
+import { Button, Checkbox, Dropdown, RadioButton } from 'carbon-components-react';
 import { ChevronRight16, View16 } from '@carbon/icons-react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -99,33 +99,22 @@ export var AddSelectList = function AddSelectList(_ref) {
   };
   return /*#__PURE__*/React.createElement("div", {
     className: cx("".concat(blockClass, "-wrapper"), _defineProperty({}, "".concat(blockClass, "-wrapper-multi"), multi))
-  }, /*#__PURE__*/React.createElement(StructuredListWrapper, {
-    selection: true,
+  }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass)
-  }, /*#__PURE__*/React.createElement(StructuredListBody, null, filteredItems.map(function (item) {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "-body")
+  }, filteredItems.map(function (item) {
     var _cx2;
-    return /*#__PURE__*/React.createElement(StructuredListRow, {
+    return /*#__PURE__*/React.createElement("div", {
       key: item.id,
-      className: cx("".concat(blockClass, "-row"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "-row--selected"), isSelected(item.id)), _defineProperty(_cx2, "".concat(blockClass, "-row-meta--selected"), isInMetaPanel(item.id)), _cx2)),
-      onClick: function onClick(evt) {
-        return metaPanelHandler(item, evt);
-      },
-      label: true
+      className: cx("".concat(blockClass, "-row"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "-row--selected"), isSelected(item.id)), _defineProperty(_cx2, "".concat(blockClass, "-row-meta--selected"), isInMetaPanel(item.id)), _cx2))
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "-cell")
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "-cell-wrapper")
     }, multi ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "-checkbox")
-    },
-    /*#__PURE__*/
-    // hacky way to prevent checkbox from triggering the meta onclick handler
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    React.createElement("div", {
-      onClick: function onClick(event) {
-        return event.stopPropagation();
-      }
-    }, /*#__PURE__*/React.createElement(Checkbox, {
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Checkbox, {
       onChange: function onChange(value, id) {
         return handleMultiSelection(value, id);
       },
@@ -147,10 +136,9 @@ export var AddSelectList = function AddSelectList(_ref) {
       id: "add-select-modifier-".concat(item.id),
       type: "inline",
       items: modifiers.options,
-      light: true,
       label: modifiers.label,
       disabled: !isSelected(item.id),
-      className: "".concat(blockClass, "-dropdown ").concat(blockClass, "-hidden-hover"),
+      className: "".concat(blockClass, "-dropdown"),
       initialSelectedItem: item[modifiers.id],
       onChange: function onChange(_ref5) {
         var selectedItem = _ref5.selectedItem;
@@ -178,9 +166,7 @@ export var AddSelectList = function AddSelectList(_ref) {
       },
       kind: "ghost",
       size: "sm"
-    }), item.meta && /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "-hidden-hover")
-    }, /*#__PURE__*/React.createElement(Button, {
+    }), item.meta && /*#__PURE__*/React.createElement(Button, {
       className: "".concat(blockClass, "-view-meta"),
       renderIcon: View16,
       iconDescription: metaIconDescription,
@@ -188,8 +174,11 @@ export var AddSelectList = function AddSelectList(_ref) {
       tooltipAlignment: "center",
       hasIconOnly: true,
       kind: "ghost",
-      size: "sm"
-    })))));
+      size: "sm",
+      onClick: function onClick() {
+        return metaPanelHandler(item);
+      }
+    }))));
   }))));
 };
 AddSelectList.propTypes = {

package/es/components/CreateFullPage/CreateFullPage.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText"];
 /**
- * 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.
@@ -200,7 +200,8 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     kind: "secondary",
     onClick: function onClick() {
       setModalIsOpen(!modalIsOpen);
-    }
+    },
+    "data-modal-primary-focus": true
   }, modalSecondaryButtonText), /*#__PURE__*/React.createElement(Button, {
     type: "button",
     kind: "danger",

package/es/components/Datagrid/Datagrid/DatagridContent.js

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

package/es/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -108,7 +108,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.createElement(TableBatchAction, {
         key: "".concat(batchAction.label, "-").concat(index),
         renderIcon: batchAction.renderIcon,

package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -5,16 +5,17 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
- * (c) Copyright IBM Corp. 2020 - 2021
+ * (c) Copyright IBM Corp. 2020 - 2023
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 import React, { useEffect } from 'react';
 import { VariableSizeList } from 'react-window';
 import { DataTable } from 'carbon-components-react';
+import { px } from '@carbon/layout';
+import { useResizeDetector } from 'react-resize-detector';
 import { pkg } from '../../../settings';
 import DatagridHead from './DatagridHead';
-import { px } from '@carbon/layout';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var TableBody = DataTable.TableBody;
 var rowSizeMap = {
@@ -46,10 +47,18 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     page = datagridState.page,
     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;
+  };
+  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 = px(32 + (virtualBody.offsetWidth - virtualBody.clientWidth)); // scrollbar width to header column to fix header alignment
   };
 
@@ -62,7 +71,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
   }
   var visibleRows = DatagridPagination && page || rows;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.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/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["onClick", "setIsTearsheetOpen", "isTearsheetOpen", "iconTooltipLabel"];
+var _excluded = ["onClick", "setIsTearsheetOpen", "isTearsheetOpen", "iconTooltipLabel", "tooltipPosition"];
 /**
  * Copyright IBM Corp. 2022, 2022
  *
@@ -20,11 +20,13 @@ var ButtonWrapper = function ButtonWrapper(_ref) {
     isTearsheetOpen = _ref.isTearsheetOpen,
     _ref$iconTooltipLabel = _ref.iconTooltipLabel,
     iconTooltipLabel = _ref$iconTooltipLabel === void 0 ? 'Customize columns' : _ref$iconTooltipLabel,
+    _ref$tooltipPosition = _ref.tooltipPosition,
+    tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
     renderIcon: Column16,
     iconDescription: iconTooltipLabel,
-    tooltipPosition: "left",
+    tooltipPosition: tooltipPosition,
     kind: "ghost",
     hasIconOnly: true,
     "test-id": "".concat(blockClass, "__customize-columns-trigger"),
@@ -40,6 +42,7 @@ ButtonWrapper.propTypes = {
   iconTooltipLabel: PropTypes.string,
   isTearsheetOpen: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
-  setIsTearsheetOpen: PropTypes.func.isRequired
+  setIsTearsheetOpen: PropTypes.func.isRequired,
+  tooltipPosition: Button.propTypes.tooltipPosition
 };
 export default ButtonWrapper;

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

@@ -14,9 +14,8 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import { Checkbox } from 'carbon-components-react';
 import update from 'immutability-helper';
 import { pkg } from '../../../../../settings';
-import DraggableElement from '../../DraggableElement';
-import { isColumnVisible } from './common';
 import classNames from 'classnames';
+import { DraggableItemsList } from './DraggableItemsList';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var getNextIndex = function getNextIndex(array, currentIndex, key) {
   var newIndex = -1;
@@ -36,7 +35,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.useState(''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     ariaRegionText = _React$useState2[0],
@@ -87,59 +87,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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
-      wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
-      checked: isColumnVisible(colDef),
-      disabled: isFrozenColumn,
-      onChange: onSelectColumn.bind(null, colDef),
-      id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
-      labelText: colDef.Header.props.title,
-      title: colDef.Header.props.title,
-      className: "".concat(blockClass, "__customize-columns-checkbox"),
-      hideLabel: true
-    }), /*#__PURE__*/React.createElement("div", {
-      dangerouslySetInnerHTML: {
-        __html: highlightedText
-      }
-    }));
-    return /*#__PURE__*/React.createElement(DraggableElement, {
-      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,
-      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: isColumnVisible(colDef)
-    }, listContents);
+  })), /*#__PURE__*/React.createElement(DraggableItemsList, {
+    columns: columns,
+    filterString: filterString,
+    focusIndex: focusIndex,
+    getNextIndex: getNextIndex,
+    isTableSortable: isTableSortable,
+    moveElement: moveElement,
+    onSelectColumn: onSelectColumn,
+    setAriaRegionText: setAriaRegionText,
+    setColumnsObject: setColumnsObject,
+    setFocusIndex: setFocusIndex
   }))));
 };
 Columns.propTypes = {
@@ -150,6 +108,7 @@ Columns.propTypes = {
   filterString: PropTypes.string.isRequired,
   getVisibleColumnsCount: PropTypes.func.isRequired,
   instructionsLabel: PropTypes.string,
+  isTableSortable: PropTypes.bool.isRequired,
   onSelectColumn: PropTypes.func.isRequired,
   selectAllLabel: PropTypes.string,
   setColumnStatus: PropTypes.func,

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

@@ -41,7 +41,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 = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     visibleColumnsCount = _useState2[0],
@@ -55,12 +56,6 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     searchText = _useState6[0],
     setSearchText = _useState6[1];
   var _useState7 = 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
     .sort(function (defA, defB) {
       var isVisibleA = isColumnVisible(defA);
@@ -157,7 +152,8 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
       setColumnObjects(cols);
       setDirty();
     },
-    selectAllLabel: selectAllLabel
+    selectAllLabel: selectAllLabel,
+    isTableSortable: isTableSortable
   }));
 };
 CustomizeColumnsTearsheet.propTypes = {
@@ -168,6 +164,7 @@ CustomizeColumnsTearsheet.propTypes = {
   findColumnPlaceholderLabel: PropTypes.string,
   instructionsLabel: PropTypes.string,
   isOpen: PropTypes.bool.isRequired,
+  isTableSortable: PropTypes.bool.isRequired,
   onSaveColumnPrefs: PropTypes.func.isRequired,
   originalColumnDefinitions: PropTypes.array.isRequired,
   primaryButtonTextLabel: PropTypes.string,

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

@@ -0,0 +1,105 @@
+/**
+ * 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.
+ */
+
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import { Checkbox } from 'carbon-components-react';
+import { isColumnVisible } from './common';
+import DraggableElement from '../../DraggableElement';
+import { pkg } from '../../../../../settings';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+export 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.createElement(React.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
+      wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
+      checked: isColumnVisible(colDef),
+      disabled: isFrozenColumn,
+      onChange: onSelectColumn.bind(null, colDef),
+      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.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: highlightedText
+      }
+    }));
+    return /*#__PURE__*/React.createElement(DraggableElement, {
+      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: isColumnVisible(colDef)
+    }, listContents);
+  }));
+};
+DraggableItemsList.propTypes = {
+  columns: PropTypes.array.isRequired,
+  filterString: PropTypes.string.isRequired,
+  focusIndex: PropTypes.number.isRequired,
+  getNextIndex: PropTypes.func.isRequired,
+  isTableSortable: PropTypes.bool,
+  moveElement: PropTypes.func.isRequired,
+  onSelectColumn: PropTypes.func.isRequired,
+  setAriaRegionText: PropTypes.func.isRequired,
+  setColumnsObject: PropTypes.func.isRequired,
+  setFocusIndex: PropTypes.func.isRequired
+};

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

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

package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js

@@ -45,7 +45,15 @@ var FilterPanel = function FilterPanel(_ref) {
     _ref$showFilterSearch = _ref.showFilterSearch,
     showFilterSearch = _ref$showFilterSearch === void 0 ? false : _ref$showFilterSearch,
     _ref$filterPanelMinHe = _ref.filterPanelMinHeight,
-    filterPanelMinHeight = _ref$filterPanelMinHe === void 0 ? 600 : _ref$filterPanelMinHe;
+    filterPanelMinHeight = _ref$filterPanelMinHe === void 0 ? 600 : _ref$filterPanelMinHe,
+    _ref$primaryActionLab = _ref.primaryActionLabel,
+    primaryActionLabel = _ref$primaryActionLab === void 0 ? 'Apply' : _ref$primaryActionLab,
+    _ref$secondaryActionL = _ref.secondaryActionLabel,
+    secondaryActionLabel = _ref$secondaryActionL === void 0 ? 'Cancel' : _ref$secondaryActionL,
+    _ref$searchLabelText = _ref.searchLabelText,
+    searchLabelText = _ref$searchLabelText === void 0 ? 'Filter search' : _ref$searchLabelText,
+    _ref$searchPlaceholde = _ref.searchPlaceholder,
+    searchPlaceholder = _ref$searchPlaceholde === void 0 ? 'Find filters' : _ref$searchPlaceholde;
   /** State */
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -120,13 +128,13 @@ var FilterPanel = function FilterPanel(_ref) {
       actions: [{
         key: 1,
         kind: 'primary',
-        label: 'Apply',
+        label: primaryActionLabel,
         onClick: apply,
         disabled: shouldDisableButtons
       }, {
         key: 2,
         kind: 'secondary',
-        label: 'Cancel',
+        label: secondaryActionLabel,
         onClick: cancel,
         disabled: shouldDisableButtons
       }],
@@ -189,8 +197,8 @@ var FilterPanel = function FilterPanel(_ref) {
     ref: filterSearchRef,
     className: "".concat(componentClass, "__search")
   }, /*#__PURE__*/React.createElement(Search, {
-    labelText: "Filter search",
-    placeHolderText: "Find filters",
+    labelText: searchLabelText,
+    placeHolderText: searchPlaceholder,
     light: true,
     size: "sm"
   }))), /*#__PURE__*/React.createElement("div", {
@@ -231,6 +239,10 @@ FilterPanel.propTypes = {
   onPanelClose: PropTypes.func,
   onPanelOpen: PropTypes.func,
   open: PropTypes.bool,
+  primaryActionLabel: PropTypes.string,
+  searchLabelText: PropTypes.string,
+  searchPlaceholder: PropTypes.string,
+  secondaryActionLabel: PropTypes.string,
   setAllFilters: PropTypes.func.isRequired,
   showFilterSearch: PropTypes.bool,
   title: PropTypes.string,

package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js

@@ -125,6 +125,17 @@ var useFilters = function useFilters(_ref) {
         // Remove it from the filters array
         filtersObjectArrayCopy.splice(_index2, 1);
       }
+    } else if (type === 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);
 

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

@@ -3,13 +3,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["legendText"];
-// @flow
-/*
- * 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.
+/**
+ * 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.
  */
 
 import * as React from 'react';
@@ -36,7 +34,9 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
     tooltipPosition: "bottom",
     renderIcon: Settings16,
     onClick: function onClick() {
-      return setIsOpen(!isOpen);
+      return setIsOpen(function (prevOpen) {
+        return !prevOpen;
+      });
     },
     iconDescription: legendText,
     className: cx("".concat(blockClass, "__row-size-button"), _defineProperty({}, "".concat(blockClass, "__row-size-button--open"), isOpen))

package/es/components/Datagrid/index.js

@@ -1,10 +1,10 @@
-/*
- * 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.
  */
+
 export { Datagrid } from './Datagrid';
 export { default as useDatagrid } from './useDatagrid';
 export { default as useInfiniteScroll } from './useInfiniteScroll';
@@ -23,4 +23,5 @@ export { default as useSelectAllWithToggle } from './useSelectAllToggle';
 export { default as useColumnCenterAlign } from './useColumnCenterAlign';
 export { default as useColumnOrder } from './useColumnOrder';
 export { default as useInlineEdit } from './useInlineEdit';
-export { default as useFiltering } from './useFiltering';
+export { default as useFiltering } from './useFiltering';
+export { getAutoSizedColumnWidth } from './utils/getAutoSizedColumnWidth';

package/es/components/Datagrid/useOnRowClick.js

@@ -1,7 +1,7 @@
 /*
  * 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.
  */
@@ -15,9 +15,9 @@ var useOnRowClick = function useOnRowClick(hooks) {
         instance = datagridState.instance;
       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);
           });