@carbon/ibm-products 2.20.0 → 2.22.0

package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -168,7 +168,6 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
       onClick: handleSelectAllClick,
       className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__th--select-all"), _defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header'))
     }, "\xA0")), headerGroup.headers.map(function (column, index) {
-      var _cx2;
       var selectedHeader = checkSelectedHeaderCell(index, selectionAreas, 'column', rows);
       return /*#__PURE__*/React.createElement("div", _extends({
         key: "column_".concat(index),
@@ -188,7 +187,7 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
           height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
           width: (column === null || column === void 0 ? void 0 : column.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width)
         },
-        className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || checkActiveHeaderCell(index, selectionAreas, 'column')), _defineProperty(_cx2, "".concat(blockClass, "__th--selected-header"), selectedHeader), _defineProperty(_cx2, "".concat(blockClass, "__th--selected-header-reorder-active"), selectedHeaderReorderActive), _cx2)),
+        className: cx("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === index || checkActiveHeaderCell(index, selectionAreas, 'column')), "".concat(blockClass, "__th--selected-header"), selectedHeader), "".concat(blockClass, "__th--selected-header-reorder-active"), selectedHeaderReorderActive)),
         type: "button"
       }, column.render('Header')));
     }));

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

@@ -29,7 +29,6 @@ import { clearSingleFilter } from './addons/Filtering/FilterProvider';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var gcClass = "".concat(blockClass, "__grid-container");
 export var DatagridContent = function DatagridContent(_ref) {
-  var _cx5;
   var datagridState = _ref.datagridState,
     title = _ref.title;
   var _useContext = useContext(InlineEditContext),
@@ -86,7 +85,7 @@ export var DatagridContent = function DatagridContent(_ref) {
   });
   var renderTable = function renderTable() {
     var _getTableProps;
-    return /*#__PURE__*/React.createElement(Table, _extends({}, getTableProps(), {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Table, _extends({}, getTableProps(), {
       className: cx(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof columnResizing.isResizingColumn === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
       role: withInlineEdit ? 'grid' : undefined,
       tabIndex: withInlineEdit ? 0 : -1,
@@ -107,7 +106,7 @@ export var DatagridContent = function DatagridContent(_ref) {
       title: title
     }), !withVirtualScroll && /*#__PURE__*/React.createElement(DatagridHead, datagridState), /*#__PURE__*/React.createElement(DatagridBody, _extends({}, datagridState, {
       rows: contentRows
-    })));
+    }))), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && renderPagination());
   };
   var _useMultipleKeyTracki = useMultipleKeyTracking({
       ref: withInlineEdit ? multiKeyTrackingRef : null,
@@ -132,8 +131,6 @@ export var DatagridContent = function DatagridContent(_ref) {
   useSubscribeToEventEmitter(CLEAR_SINGLE_FILTER, function (id) {
     return clearSingleFilter(id, setAllFilters, state);
   });
-
-  /* istanbul ignore next */
   var renderFilterSummary = function renderFilterSummary() {
     return state.filters.length > 0 && /*#__PURE__*/React.createElement(FilterSummary, {
       className: "".concat(blockClass, "__filter-summary"),
@@ -145,16 +142,19 @@ export var DatagridContent = function DatagridContent(_ref) {
       overflowType: "tag"
     });
   };
+  var renderPagination = function renderPagination() {
+    if ((contentRows === null || contentRows === void 0 ? void 0 : contentRows.length) > 0 && !isFetching && DatagridPagination) {
+      return /*#__PURE__*/React.createElement(DatagridPagination, datagridState);
+    }
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableContainer, {
-    className: cx("".concat(gcClass), (_cx5 = {}, _defineProperty(_cx5, "".concat(gcClass, "-active"), gridActive), _defineProperty(_cx5, "".concat(gcClass, "-active--without-toolbar"), withInlineEdit && !DatagridActions), _defineProperty(_cx5, "".concat(gcClass, "-inline-edit"), withInlineEdit), _defineProperty(_cx5, "".concat(blockClass, "__full-height"), withVirtualScroll || fullHeightDatagrid), _defineProperty(_cx5, "".concat(blockClass, "__with-pagination"), DatagridPagination), _defineProperty(_cx5, "".concat(blockClass, "__dense-header"), useDenseHeader), _cx5)),
+    className: cx("".concat(gcClass), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(gcClass, "-active"), gridActive), "".concat(gcClass, "-active--without-toolbar"), withInlineEdit && !DatagridActions), "".concat(gcClass, "-inline-edit"), withInlineEdit), "".concat(blockClass, "__full-height"), withVirtualScroll || fullHeightDatagrid), "".concat(blockClass, "__with-pagination"), DatagridPagination), "".concat(blockClass, "__dense-header"), useDenseHeader)),
     title: gridTitle,
     description: gridDescription
   }, /*#__PURE__*/React.createElement(DatagridToolbar, datagridState), /*#__PURE__*/React.createElement("div", {
     className: cx("".concat(blockClass, "__table-container"), _defineProperty({}, "".concat(blockClass, "__table-container--filter-open"), panelOpen)),
     ref: gridAreaRef
-  }, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React.createElement(FilterPanel, _extends({
-    updateMethod: "batch"
-  }, getFilterFlyoutProps(), {
+  }, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React.createElement(FilterPanel, _extends({}, getFilterFlyoutProps(), {
     title: filterProps.panelTitle,
     filterSections: filterProps.sections,
     autoHideFilters: filterProps.autoHideFilters,
@@ -166,7 +166,7 @@ export var DatagridContent = function DatagridContent(_ref) {
   }, renderTable()) : withVirtualScroll ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__virtualScrollContainer"),
     ref: gridRef
-  }, renderTable()) : renderTable()))), (contentRows === null || contentRows === void 0 ? void 0 : contentRows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/React.createElement(DatagridPagination, datagridState), CustomizeColumnsTearsheet && /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, {
+  }, renderTable()) : renderTable()))), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) !== 'panel' && renderPagination(), CustomizeColumnsTearsheet && /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, {
     instance: datagridState
   }));
 };

package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -46,6 +46,7 @@ var ResizeHeader = function ResizeHeader(_ref) {
     dispatch = _ref.dispatch,
     onColResizeEnd = _ref.onColResizeEnd,
     resizerAriaLabel = _ref.resizerAriaLabel;
+  // eslint-disable-next-line no-unused-vars
   var role = resizerProps.role,
     headerProps = _objectWithoutProperties(resizerProps, _excluded);
   var mouseDownHandler = function mouseDownHandler(evt) {
@@ -71,9 +72,7 @@ var ResizeHeader = function ResizeHeader(_ref) {
   var keyUpHandler = function keyUpHandler() {
     handleColumnResizeEndEvent(dispatch, onColResizeEnd, header.id, true);
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, headerProps, role === 'separator' && {
-    role: role
-  }, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, headerProps, {
     onMouseDown: mouseDownHandler,
     onKeyDown: keyDownHandler,
     onKeyUp: keyUpHandler,
@@ -128,16 +127,14 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     headerGroupClassName = _headerGroup$getHeade.className,
     role = _headerGroup$getHeade.role,
     headerGroupProps = _objectWithoutProperties(_headerGroup$getHeade, _excluded2);
-  return /*#__PURE__*/React.createElement(TableRow, _extends({}, headerGroupProps, role === 'row' && {
-    role: role
-  }, {
+  return /*#__PURE__*/React.createElement(TableRow, _extends({}, headerGroupProps, {
     className: cx("".concat(blockClass, "__head"), headerGroupClassName),
     ref: headRef
   }), datagridState.headers.filter(function (_ref3) {
     var isVisible = _ref3.isVisible;
     return isVisible;
   }).map(function (header, index) {
-    var _header$getResizerPro, _cx;
+    var _header$getResizerPro;
     if (header.id === selectionColumnId) {
       // render directly without the wrapper TableHeader
       return header.render('Header', {
@@ -160,12 +157,10 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       headerProps = _objectWithoutProperties(_header$getHeaderProp, _excluded3);
     var resizerProps = header === null || header === void 0 || (_header$getResizerPro = header.getResizerProps) === null || _header$getResizerPro === void 0 ? void 0 : _header$getResizerPro.call(header);
     return /*#__PURE__*/React.createElement(TableHeader, _extends({}, headerProps, {
-      className: cx(headerClassName, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__resizableColumn"), resizerProps), _defineProperty(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), _defineProperty(_cx, "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), _defineProperty(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _defineProperty(_cx, "".concat(blockClass, "__header-actions-column"), header.isAction), _cx)),
+      className: cx(headerClassName, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header.isSorted), "".concat(blockClass, "__header-actions-column"), header.isAction)),
       key: header.id,
       "aria-hidden": header.id === 'spacer' && 'true'
-    }, getAccessibilityProps(header), role === 'columnheader' && {
-      role: role
-    }), header.render('Header'), resizerProps && !header.isAction && /*#__PURE__*/React.createElement(ResizeHeader, {
+    }, getAccessibilityProps(header)), header.render('Header'), resizerProps && !header.isAction && /*#__PURE__*/React.createElement(ResizeHeader, {
       resizerProps: resizerProps,
       header: header,
       handleOnMouseDownResize: handleOnMouseDownResize,

package/es/components/Datagrid/Datagrid/DatagridRow.js

@@ -29,14 +29,15 @@ var rowHeights = {
 
 // eslint-disable-next-line react/prop-types
 var DatagridRow = function DatagridRow(datagridState) {
-  var _cx;
   var row = datagridState.row,
     rowSize = datagridState.rowSize,
     withNestedRows = datagridState.withNestedRows,
     prepareRow = datagridState.prepareRow,
     key = datagridState.key,
     tableId = datagridState.tableId,
-    withExpandedRows = datagridState.withExpandedRows;
+    withExpandedRows = datagridState.withExpandedRows,
+    withMouseHover = datagridState.withMouseHover,
+    setMouseOverRowIndex = datagridState.setMouseOverRowIndex;
   var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
     var isExpanded = _ref.isExpanded,
       subRows = _ref.subRows;
@@ -81,6 +82,9 @@ var DatagridRow = function DatagridRow(datagridState) {
     return null;
   };
   var handleMouseLeave = function handleMouseLeave(event) {
+    if (withMouseHover) {
+      setMouseOverRowIndex(null);
+    }
     var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
     hoverRow === null || hoverRow === void 0 || hoverRow.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
   };
@@ -93,7 +97,7 @@ var DatagridRow = function DatagridRow(datagridState) {
       hoverHandler(event);
     }
   };
-  var rowClassNames = cx("".concat(blockClass, "__carbon-row"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), _defineProperty(_cx, "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), _cx));
+  var rowClassNames = cx("".concat(blockClass, "__carbon-row"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), "".concat(carbon.prefix, "--data-table--selected"), row.isSelected));
   var setAdditionalRowProps = function setAdditionalRowProps() {
     if (withNestedRows || withExpandedRows) {
       return {
@@ -102,6 +106,8 @@ var DatagridRow = function DatagridRow(datagridState) {
     }
     return {};
   };
+
+  // eslint-disable-next-line no-unused-vars
   var _row$getRowProps = row.getRowProps(),
     role = _row$getRowProps.role,
     rowProps = _objectWithoutProperties(_row$getRowProps, _excluded);
@@ -116,11 +122,10 @@ var DatagridRow = function DatagridRow(datagridState) {
     onFocus: hoverHandler,
     onBlur: focusRemover,
     onKeyUp: handleOnKeyUp
-  }, setAdditionalRowProps(), role === 'row' && {
-    role: role
-  }), row.cells.map(function (cell, index) {
-    var _cell$column;
+  }, setAdditionalRowProps()), row.cells.map(function (cell, index) {
+    var _cell$column, _content$props;
     var cellProps = cell.getCellProps();
+    // eslint-disable-next-line no-unused-vars
     var children = cellProps.children,
       role = cellProps.role,
       restProps = _objectWithoutProperties(cellProps, _excluded2);
@@ -131,13 +136,12 @@ var DatagridRow = function DatagridRow(datagridState) {
         key: cell.column.id
       });
     }
+    var title = content === null || content === void 0 || (_content$props = content.props) === null || _content$props === void 0 || (_content$props = _content$props.children[0]) === null || _content$props === void 0 || (_content$props = _content$props.props) === null || _content$props === void 0 ? void 0 : _content$props.value;
     return /*#__PURE__*/React.createElement(TableCell, _extends({
       className: cx("".concat(blockClass, "__cell"), _defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0))
     }, restProps, {
-      key: cell.column.id
-      // avoid unnecessary role assignment to cells
-    }, role === 'cell' && {
-      role: role
+      key: cell.column.id,
+      title: title
     }), content);
   })), renderExpandedRow());
 };

package/es/components/Datagrid/Datagrid/DraggableElement.js

@@ -17,7 +17,6 @@ import { CSS } from '@dnd-kit/utilities';
 import { useSortable } from '@dnd-kit/sortable';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var DraggableElement = function DraggableElement(_ref) {
-  var _cx;
   var id = _ref.id,
     children = _ref.children,
     classList = _ref.classList,
@@ -49,7 +48,7 @@ var DraggableElement = function DraggableElement(_ref) {
     transition: transition
   };
   return /*#__PURE__*/React.createElement("li", _extends({
-    className: cx(classList, "".concat(blockClass, "__draggable-handleHolder"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder--selected"), selected), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder--sticky"), isSticky), _defineProperty(_cx, "".concat(blockClass, "__draggable-handleHolder--dragging"), isDragging), _cx)),
+    className: cx(classList, "".concat(blockClass, "__draggable-handleHolder"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__draggable-handleHolder--selected"), selected), "".concat(blockClass, "__draggable-handleHolder--sticky"), isSticky), "".concat(blockClass, "__draggable-handleHolder--dragging"), isDragging)),
     id: id,
     ref: setNodeRef,
     style: style

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

@@ -21,18 +21,22 @@ import { useSubscribeToEventEmitter, useFilters, useShouldDisableButtons } from
 import { px, breakpoints } from '@carbon/layout';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var componentClass = "".concat(blockClass, "-filter-flyout");
+var defaults = {
+  flyoutIconDescription: 'Open filters',
+  title: 'Filter',
+  primaryActionLabel: 'Apply',
+  secondaryActionLabel: 'Cancel'
+};
 var FilterFlyout = function FilterFlyout(_ref) {
-  var _cx2;
-  var _ref$updateMethod = _ref.updateMethod,
-    updateMethod = _ref$updateMethod === void 0 ? BATCH : _ref$updateMethod,
+  var updateMethod = _ref.updateMethod,
     _ref$flyoutIconDescri = _ref.flyoutIconDescription,
-    flyoutIconDescription = _ref$flyoutIconDescri === void 0 ? 'Open filters' : _ref$flyoutIconDescri,
+    flyoutIconDescription = _ref$flyoutIconDescri === void 0 ? defaults.flyoutIconDescription : _ref$flyoutIconDescri,
     _ref$filters = _ref.filters,
     filters = _ref$filters === void 0 ? [] : _ref$filters,
     _ref$title = _ref.title,
-    title = _ref$title === void 0 ? 'Filter' : _ref$title,
+    title = _ref$title === void 0 ? defaults.title : _ref$title,
     _ref$primaryActionLab = _ref.primaryActionLabel,
-    primaryActionLabel = _ref$primaryActionLab === void 0 ? 'Apply' : _ref$primaryActionLab,
+    primaryActionLabel = _ref$primaryActionLab === void 0 ? defaults.primaryActionLabel : _ref$primaryActionLab,
     _ref$onFlyoutOpen = _ref.onFlyoutOpen,
     onFlyoutOpen = _ref$onFlyoutOpen === void 0 ? function () {} : _ref$onFlyoutOpen,
     _ref$onFlyoutClose = _ref.onFlyoutClose,
@@ -42,7 +46,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
     _ref$onCancel = _ref.onCancel,
     onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
     _ref$secondaryActionL = _ref.secondaryActionLabel,
-    secondaryActionLabel = _ref$secondaryActionL === void 0 ? 'Cancel' : _ref$secondaryActionL,
+    secondaryActionLabel = _ref$secondaryActionL === void 0 ? defaults.secondaryActionLabel : _ref$secondaryActionL,
     setAllFilters = _ref.setAllFilters,
     _ref$data = _ref.data,
     data = _ref$data === void 0 ? [] : _ref$data,
@@ -57,13 +61,17 @@ var FilterFlyout = function FilterFlyout(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     stackedLayout = _useState4[0],
     setStackedLayout = _useState4[1];
+  var handleCancel = function handleCancel() {
+    setOpen(false);
+    onCancel();
+  };
   var _useFilters = useFilters({
       updateMethod: updateMethod,
       filters: filters,
       setAllFilters: setAllFilters,
       variation: FLYOUT,
       reactTableFiltersState: reactTableFiltersState,
-      onCancel: onCancel
+      onCancel: handleCancel
     }),
     filtersState = _useFilters.filtersState,
     prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
@@ -90,6 +98,9 @@ var FilterFlyout = function FilterFlyout(_ref) {
     _useShouldDisableButt2 = _slicedToArray(_useShouldDisableButt, 2),
     shouldDisableButtons = _useShouldDisableButt2[0],
     setShouldDisableButtons = _useShouldDisableButt2[1];
+
+  // Skip resize testing
+  /* istanbul ignore next */
   var handleResize = function handleResize(current) {
     var filterFlyoutRefPosition = flyoutInnerRef === null || flyoutInnerRef === void 0 ? void 0 : flyoutInnerRef.current.getBoundingClientRect();
     var originalFlyoutWidth = parseInt(window.getComputedStyle(flyoutInnerRef === null || flyoutInnerRef === void 0 ? void 0 : flyoutInnerRef.current).getPropertyValue('width'));
@@ -170,8 +181,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
         kind: 'secondary',
         label: secondaryActionLabel,
         onClick: cancel,
-        isExpressive: false,
-        disabled: shouldDisableButtons
+        isExpressive: false
       }],
       size: "md",
       buttonSize: "md"
@@ -203,7 +213,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
     className: cx("".concat(componentClass, "__trigger"), _defineProperty({}, "".concat(componentClass, "__trigger--open"), open)),
     disabled: data.length === 0
   }, /*#__PURE__*/React.createElement(Filter, null)), /*#__PURE__*/React.createElement("div", {
-    className: cx(componentClass, (_cx2 = {}, _defineProperty(_cx2, "".concat(componentClass, "--open"), open), _defineProperty(_cx2, "".concat(componentClass, "--batch"), showActionSet), _defineProperty(_cx2, "".concat(componentClass, "--instant"), !showActionSet), _cx2)),
+    className: cx(componentClass, _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentClass, "--open"), open), "".concat(componentClass, "--batch"), showActionSet), "".concat(componentClass, "--instant"), !showActionSet)),
     ref: flyoutInnerRef
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(componentClass, "__inner-container")

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

@@ -26,14 +26,20 @@ import { rem } from '@carbon/layout';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 export var componentClass = "".concat(blockClass, "-filter-panel");
 var MotionActionSet = motion(ActionSet);
+var defaults = {
+  title: 'Filter',
+  closeIconDescription: 'Close filter panel',
+  primaryActionLabel: 'Apply',
+  secondaryActionLabel: 'Cancel',
+  searchLabelText: 'Filter search',
+  searchPlaceholder: 'Find filters'
+};
 var FilterPanel = function FilterPanel(_ref) {
-  var _cx;
   var _ref$title = _ref.title,
-    title = _ref$title === void 0 ? 'Filter' : _ref$title,
+    title = _ref$title === void 0 ? defaults.title : _ref$title,
     _ref$closeIconDescrip = _ref.closeIconDescription,
-    closeIconDescription = _ref$closeIconDescrip === void 0 ? 'Close filter panel' : _ref$closeIconDescrip,
-    _ref$updateMethod = _ref.updateMethod,
-    updateMethod = _ref$updateMethod === void 0 ? BATCH : _ref$updateMethod,
+    closeIconDescription = _ref$closeIconDescrip === void 0 ? defaults.closeIconDescription : _ref$closeIconDescrip,
+    updateMethod = _ref.updateMethod,
     filterSections = _ref.filterSections,
     setAllFilters = _ref.setAllFilters,
     _ref$onApply = _ref.onApply,
@@ -49,13 +55,13 @@ var FilterPanel = function FilterPanel(_ref) {
     _ref$filterPanelMinHe = _ref.filterPanelMinHeight,
     filterPanelMinHeight = _ref$filterPanelMinHe === void 0 ? 600 : _ref$filterPanelMinHe,
     _ref$primaryActionLab = _ref.primaryActionLabel,
-    primaryActionLabel = _ref$primaryActionLab === void 0 ? 'Apply' : _ref$primaryActionLab,
+    primaryActionLabel = _ref$primaryActionLab === void 0 ? defaults.primaryActionLabel : _ref$primaryActionLab,
     _ref$secondaryActionL = _ref.secondaryActionLabel,
-    secondaryActionLabel = _ref$secondaryActionL === void 0 ? 'Cancel' : _ref$secondaryActionL,
+    secondaryActionLabel = _ref$secondaryActionL === void 0 ? defaults.secondaryActionLabel : _ref$secondaryActionL,
     _ref$searchLabelText = _ref.searchLabelText,
-    searchLabelText = _ref$searchLabelText === void 0 ? 'Filter search' : _ref$searchLabelText,
+    searchLabelText = _ref$searchLabelText === void 0 ? defaults.searchLabelText : _ref$searchLabelText,
     _ref$searchPlaceholde = _ref.searchPlaceholder,
-    searchPlaceholder = _ref$searchPlaceholde === void 0 ? 'Find filters' : _ref$searchPlaceholde,
+    searchPlaceholder = _ref$searchPlaceholde === void 0 ? defaults.searchPlaceholder : _ref$searchPlaceholde,
     _ref$reactTableFilter = _ref.reactTableFiltersState,
     reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter,
     _ref$autoHideFilters = _ref.autoHideFilters,
@@ -180,12 +186,13 @@ var FilterPanel = function FilterPanel(_ref) {
     var filterHeadingHeight = (_filterHeadingRef$cur = filterHeadingRef.current) === null || _filterHeadingRef$cur === void 0 ? void 0 : _filterHeadingRef$cur.getBoundingClientRect().height;
     var filterSearchHeight = (_filterSearchRef$curr = filterSearchRef.current) === null || _filterSearchRef$curr === void 0 ? void 0 : _filterSearchRef$curr.getBoundingClientRect().height;
     var actionSetHeight = (_actionSetRef$current = actionSetRef.current) === null || _actionSetRef$current === void 0 ? void 0 : _actionSetRef$current.getBoundingClientRect().height;
-    var height = "calc(100vh - ".concat(filterHeadingHeight, "px - ").concat(showFilterSearch ? filterSearchHeight : 0, "px - ").concat(updateMethod === BATCH ? actionSetHeight : 0, "px)");
+    var height = panelOpen ? "calc(100vh - ".concat(filterHeadingHeight, "px - ").concat( /* istanbul ignore next */
+    showFilterSearch ? filterSearchHeight : 0, "px - ").concat(updateMethod === BATCH ? actionSetHeight : 0, "px)") : 0;
     return height;
   };
   return /*#__PURE__*/React.createElement(motion.div, {
     ref: filterPanelRef,
-    className: cx(componentClass, "".concat(componentClass, "__container"), (_cx = {}, _defineProperty(_cx, "".concat(componentClass, "--open"), panelOpen), _defineProperty(_cx, "".concat(componentClass, "--batch"), showActionSet), _defineProperty(_cx, "".concat(componentClass, "--instant"), !showActionSet), _cx)),
+    className: cx(componentClass, "".concat(componentClass, "__container"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentClass, "--open"), panelOpen), "".concat(componentClass, "--batch"), showActionSet), "".concat(componentClass, "--instant"), !showActionSet)),
     initial: false,
     animate: panelOpen ? 'visible' : 'hidden',
     custom: shouldReduceMotion,
@@ -210,7 +217,10 @@ var FilterPanel = function FilterPanel(_ref) {
     tooltipPosition: "bottom",
     tooltipAlignment: "end",
     onClick: closePanel
-  }), showFilterSearch && /*#__PURE__*/React.createElement("div", {
+  }), showFilterSearch &&
+  /*#__PURE__*/
+  /* istanbul ignore next */
+  React.createElement("div", {
     ref: filterSearchRef,
     className: "".concat(componentClass, "__search")
   }, /*#__PURE__*/React.createElement(Layer, null, /*#__PURE__*/React.createElement(Search, {

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

@@ -50,8 +50,7 @@ var useFilters = function useFilters(_ref2) {
     setAllFilters = _ref2.setAllFilters,
     variation = _ref2.variation,
     reactTableFiltersState = _ref2.reactTableFiltersState,
-    _ref2$onCancel = _ref2.onCancel,
-    onCancel = _ref2$onCancel === void 0 ? function () {} : _ref2$onCancel,
+    onCancel = _ref2.onCancel,
     panelOpen = _ref2.panelOpen,
     autoHideFilters = _ref2.autoHideFilters,
     isFetching = _ref2.isFetching;
@@ -120,9 +119,9 @@ var useFilters = function useFilters(_ref2) {
     if (type === DATE && value.length > 0 && !value[1]) {
       return;
     }
-    var filtersObjectArrayCopy = _toConsumableArray(filtersObjectArray);
+    var filterCopy = _toConsumableArray(filtersObjectArray);
     // // check if the filter already exists in the array
-    var filter = filtersObjectArrayCopy.find(function (item) {
+    var filter = filterCopy.find(function (item) {
       return item.id === column;
     });
 
@@ -130,81 +129,39 @@ var useFilters = function useFilters(_ref2) {
     if (filter) {
       filter.value = value;
     } else {
-      filtersObjectArrayCopy.push({
+      filterCopy.push({
         id: column,
         value: value,
         type: type
       });
     }
-
-    // ATTENTION: this is where you would reset or remove individual filters from the filters array
-    if (type === CHECKBOX) {
-      /**
-      When all checkboxes of a group are all unselected the value still exists in the filtersObjectArray
-      This checks if all the checkboxes are selected = false and removes it from the array
-      */
-      var index = filtersObjectArrayCopy.findIndex(function (filter) {
-        return filter.id === column;
-      });
-
-      // If all the selected state is false remove from array
-      var shouldRemoveFromArray = filtersObjectArrayCopy[index].value.every(function (val) {
-        return val.selected === false;
-      });
-      if (shouldRemoveFromArray) {
-        filtersObjectArrayCopy.splice(index, 1);
-      }
-    } else if (type === DATE) {
-      if (value.length === 0) {
-        /**
-        Checks to see if the date value is an empty array, if it is that means the user wants
-        to reset the date filter
-        */
-        var _index = filtersObjectArrayCopy.findIndex(function (filter) {
-          return filter.id === column;
-        });
-
-        // Remove it from the filters array since there is nothing to filter
-        filtersObjectArrayCopy.splice(_index, 1);
-      }
-    } else if (type === DROPDOWN || type === RADIO) {
-      if (value === 'Any') {
-        /**
-        Checks to see if the selected value is 'Any', that means the user wants
-        to reset specific filter
-        */
-        var _index2 = filtersObjectArrayCopy.findIndex(function (filter) {
-          return filter.id === column;
-        });
-
-        // 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);
-      }
+    var index = filterCopy.findIndex(function (_ref4) {
+      var id = _ref4.id;
+      return id === column;
+    });
+    var clearCheckbox = type === CHECKBOX && filterCopy[index].value.every(function (_ref5) {
+      var selected = _ref5.selected;
+      return selected === false;
+    });
+    var clearDate = type === DATE && value.length === 0;
+    var clearAny = (type === DROPDOWN || type === RADIO) && value === 'Any';
+    var clearNum = type === NUMBER && value === '';
+    var shouldClear = clearCheckbox || clearDate || clearAny || clearNum;
+    if (shouldClear) {
+      filterCopy.splice(index, 1);
     }
-    setFiltersObjectArray(filtersObjectArrayCopy);
-
-    // // Automatically apply the filters if the updateMethod is instant
+    setFiltersObjectArray(filterCopy);
     if (updateMethod === INSTANT) {
-      setAllFilters(filtersObjectArrayCopy);
+      setAllFilters(filterCopy);
     }
   };
+
   /** Render the individual filter component */
-  var renderFilter = function renderFilter(_ref4) {
+  var renderFilter = function renderFilter(_ref6) {
     var _filtersState$column3, _filtersState$column4;
-    var type = _ref4.type,
-      column = _ref4.column,
-      components = _ref4.props;
+    var type = _ref6.type,
+      column = _ref6.column,
+      components = _ref6.props;
     var filter;
     var isPanel = variation === PANEL;
     if (!type) {
@@ -225,8 +182,8 @@ var useFilters = function useFilters(_ref2) {
         return /*#__PURE__*/React.createElement(Checkbox, _extends({
           key: option.id
         }, option, {
-          onChange: function onChange(_, _ref5) {
-            var checked = _ref5.checked;
+          onChange: function onChange(_, _ref7) {
+            var checked = _ref7.checked;
             handleCheckboxChange({
               checked: checked,
               filtersState: filtersState,
@@ -317,9 +274,9 @@ var useFilters = function useFilters(_ref2) {
             labelText: (_components$DefaultRa5 = components === null || components === void 0 || (_components$DefaultRa6 = components.DefaultRadioButton) === null || _components$DefaultRa6 === void 0 ? void 0 : _components$DefaultRa6.labelText) !== null && _components$DefaultRa5 !== void 0 ? _components$DefaultRa5 : 'Any',
             value: (_components$DefaultRa7 = components === null || components === void 0 || (_components$DefaultRa8 = components.DefaultRadioButton) === null || _components$DefaultRa8 === void 0 ? void 0 : _components$DefaultRa8.value) !== null && _components$DefaultRa7 !== void 0 ? _components$DefaultRa7 : 'Any'
           }, components.DefaultRadioButton)), components.RadioButton.map(function (radio) {
-            var _ref6, _radio$id;
+            var _ref8, _radio$id;
             return /*#__PURE__*/React.createElement(RadioButton, _extends({
-              key: (_ref6 = (_radio$id = radio.id) !== null && _radio$id !== void 0 ? _radio$id : radio.labelText) !== null && _ref6 !== void 0 ? _ref6 : radio.value
+              key: (_ref8 = (_radio$id = radio.id) !== null && _radio$id !== void 0 ? _radio$id : radio.labelText) !== null && _ref8 !== void 0 ? _ref8 : radio.value
             }, radio));
           })));
         }
@@ -328,9 +285,9 @@ var useFilters = function useFilters(_ref2) {
         filter = /*#__PURE__*/React.createElement(Dropdown, _extends({}, components.Dropdown, {
           selectedItem: ((_filtersState$column3 = filtersState[column]) === null || _filtersState$column3 === void 0 ? void 0 : _filtersState$column3.value) === '' ? 'Any' : (_filtersState$column4 = filtersState[column]) === null || _filtersState$column4 === void 0 ? void 0 : _filtersState$column4.value,
           items: ['Any'].concat(_toConsumableArray(components.Dropdown.items)),
-          onChange: function onChange(_ref7) {
+          onChange: function onChange(_ref9) {
             var _components$Dropdown$, _components$Dropdown;
-            var selectedItem = _ref7.selectedItem;
+            var selectedItem = _ref9.selectedItem;
             setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
               value: selectedItem,
               type: type

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

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
- * Copyright IBM Corp. 2023, 2023
+ * Copyright IBM Corp. 2023, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -18,8 +18,7 @@ import isEqual from 'lodash/isEqual';
  * @returns {Array} returns a tuple of the state and setter function
  */
 var useShouldDisableButtons = function useShouldDisableButtons(_ref) {
-  var _ref$initialValue = _ref.initialValue,
-    initialValue = _ref$initialValue === void 0 ? true : _ref$initialValue,
+  var initialValue = _ref.initialValue,
     filtersState = _ref.filtersState,
     prevFiltersRef = _ref.prevFiltersRef;
   var _useState = useState(initialValue),

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

@@ -23,9 +23,7 @@ var applyInitialFilters = function applyInitialFilters(filterState, initialFilte
 };
 
 // This functions takes the filters passed in and makes an object to track it's state
-export var getInitialStateFromFilters = function getInitialStateFromFilters(filters) {
-  var variation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : FLYOUT;
-  var initialFilters = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+export var getInitialStateFromFilters = function getInitialStateFromFilters(filters, variation, initialFilters) {
   var initialFilterState = {};
   var setInitialState = function setInitialState(_ref) {
     var type = _ref.type,
@@ -80,8 +78,6 @@ export var getInitialStateFromFilters = function getInitialStateFromFilters(filt
         return setInitialState(filter);
       });
     });
-  } else {
-    console.error('No variation passed into useInitialStateFromFilters');
   }
   if (initialFilters.length > 0) {
     applyInitialFilters(initialFilterState, initialFilters);

package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditButton/InlineEditButton.js

@@ -12,7 +12,6 @@ import PropTypes from 'prop-types';
 import { pkg } from '../../../../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 export var InlineEditButton = function InlineEditButton(_ref) {
-  var _cx, _cx2;
   var label = _ref.label,
     Icon = _ref.renderIcon,
     disabled = _ref.disabled,
@@ -23,7 +22,7 @@ export var InlineEditButton = function InlineEditButton(_ref) {
     columnConfig = _ref.columnConfig,
     type = _ref.type;
   return /*#__PURE__*/React.createElement("div", {
-    className: cx("".concat(blockClass, "__inline-edit-button"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--disabled"), disabled || nonEditCell), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--with-label-icon"), LabelIcon), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--non-edit"), nonEditCell), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--active"), isActiveCell), _defineProperty(_cx, "".concat(blockClass, "__inline-edit-button--").concat(type), type === 'date' || type === 'selection'), _cx)),
+    className: cx("".concat(blockClass, "__inline-edit-button"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__inline-edit-button--disabled"), disabled || nonEditCell), "".concat(blockClass, "__inline-edit-button--with-label-icon"), LabelIcon), "".concat(blockClass, "__inline-edit-button--non-edit"), nonEditCell), "".concat(blockClass, "__inline-edit-button--active"), isActiveCell), "".concat(blockClass, "__inline-edit-button--").concat(type), type === 'date' || type === 'selection')),
     tabIndex: isActiveCell ? 0 : -1,
     "data-disabled": disabled || nonEditCell,
     "aria-disabled": disabled || nonEditCell,
@@ -32,7 +31,7 @@ export var InlineEditButton = function InlineEditButton(_ref) {
   }, LabelIcon && /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__label-icon")
   }, /*#__PURE__*/React.createElement(LabelIcon, null)), label !== '' ? /*#__PURE__*/React.createElement("span", {
-    className: cx("".concat(blockClass, "__inline-edit-button-label"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__inline-edit-button-label-with-icon"), !nonEditCell), _defineProperty(_cx2, "".concat(blockClass, "__defaultStringRenderer--multiline"), columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig.multiLineWrap), _cx2))
+    className: cx("".concat(blockClass, "__inline-edit-button-label"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__inline-edit-button-label-with-icon"), !nonEditCell), "".concat(blockClass, "__defaultStringRenderer--multiline"), columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig.multiLineWrap))
   }, label) : /*#__PURE__*/React.createElement("span", {
     className: "".concat(blockClass, "__placeholder")
   }, placeholder), !nonEditCell && Icon && /*#__PURE__*/React.createElement("div", {