@carbon/ibm-products 2.18.1 → 2.19.0

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

@@ -1,8 +1,13 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["role"],
+  _excluded2 = ["className", "role"],
+  _excluded3 = ["role", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/* eslint-disable react/prop-types */
 /**
  * Copyright IBM Corp. 2020, 2023
  *
@@ -29,6 +34,57 @@ var getAccessibilityProps = function getAccessibilityProps(header) {
   }
   return props;
 };
+var ResizeHeader = function ResizeHeader(_ref) {
+  var resizerProps = _ref.resizerProps,
+    header = _ref.header,
+    handleOnMouseDownResize = _ref.handleOnMouseDownResize,
+    originalCol = _ref.originalCol,
+    columnWidths = _ref.columnWidths,
+    datagridState = _ref.datagridState,
+    incrementAmount = _ref.incrementAmount,
+    minWidth = _ref.minWidth,
+    dispatch = _ref.dispatch,
+    onColResizeEnd = _ref.onColResizeEnd,
+    resizerAriaLabel = _ref.resizerAriaLabel;
+  var role = resizerProps.role,
+    headerProps = _objectWithoutProperties(resizerProps, _excluded);
+  var mouseDownHandler = function mouseDownHandler(evt) {
+    handleOnMouseDownResize(evt, resizerProps);
+  };
+  var keyDownHandler = function keyDownHandler(evt) {
+    var key = evt.key;
+    if (key === 'ArrowLeft' || key === 'ArrowRight') {
+      var originalColMinWidth = originalCol.minWidth || 90;
+      var currentColumnWidth = columnWidths[header.id] || (datagridState.isTableSortable && originalCol.width < originalColMinWidth ? originalColMinWidth : originalCol.width);
+      if (key === 'ArrowLeft') {
+        if (currentColumnWidth - incrementAmount > Math.max(minWidth, 50)) {
+          var newWidth = currentColumnWidth - incrementAmount;
+          handleColumnResizingEvent(dispatch, header, newWidth, true);
+        }
+      }
+      if (key === 'ArrowRight') {
+        var _newWidth = currentColumnWidth + incrementAmount;
+        handleColumnResizingEvent(dispatch, header, _newWidth, true);
+      }
+    }
+  };
+  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
+  }, {
+    onMouseDown: mouseDownHandler,
+    onKeyDown: keyDownHandler,
+    onKeyUp: keyUpHandler,
+    className: "".concat(blockClass, "__col-resizer-range"),
+    type: "range",
+    defaultValue: originalCol.width,
+    "aria-label": resizerAriaLabel || 'Resize column'
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(blockClass, "__col-resize-indicator")
+  }));
+};
 var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   var resizerAriaLabel = datagridState.resizerAriaLabel;
   // Used to measure the height of the table and uses that value
@@ -42,9 +98,9 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     var scrollBuffer = hasHorizontalScrollbar ? 18 : 2;
     var tableToolbar = gridElement.querySelector(".".concat(blockClass, "__table-toolbar"));
     var tableToolbarHeight = (tableToolbar === null || tableToolbar === void 0 ? void 0 : tableToolbar.offsetHeight) || 0;
-    var setCustomValues = function setCustomValues(_ref) {
-      var rowHeight = _ref.rowHeight,
-        gridHeight = _ref.gridHeight;
+    var setCustomValues = function setCustomValues(_ref2) {
+      var rowHeight = _ref2.rowHeight,
+        gridHeight = _ref2.gridHeight;
       headerRowElement.style.setProperty("--".concat(blockClass, "--row-height"), px(rowHeight));
       headerRowElement.style.setProperty("--".concat(blockClass, "--grid-height"), px(gridHeight - scrollBuffer - tableToolbarHeight));
       headerRowElement.style.setProperty("--".concat(blockClass, "--header-height"), px(headerRowElement.offsetHeight));
@@ -58,7 +114,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     _useState2 = _slicedToArray(_useState, 1),
     incrementAmount = _useState2[0];
   var handleOnMouseDownResize = function handleOnMouseDownResize(event, resizeProps) {
-    var _resizeProps = _objectSpread({}, resizeProps()),
+    var _resizeProps = _objectSpread({}, resizeProps),
       onMouseDown = _resizeProps.onMouseDown;
     // When event.button is 2, that is a right click
     // and we do not want to resize
@@ -68,65 +124,60 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     }
     onMouseDown === null || onMouseDown === void 0 || onMouseDown(event);
   };
-  return /*#__PURE__*/React.createElement(TableRow, _extends({}, headerGroup.getHeaderGroupProps(), {
-    className: cx("".concat(blockClass, "__head"), headerGroup.getHeaderGroupProps().className),
+  var _headerGroup$getHeade = headerGroup.getHeaderGroupProps(),
+    headerGroupClassName = _headerGroup$getHeade.className,
+    role = _headerGroup$getHeade.role,
+    headerGroupProps = _objectWithoutProperties(_headerGroup$getHeade, _excluded2);
+  return /*#__PURE__*/React.createElement(TableRow, _extends({}, headerGroupProps, role === 'row' && {
+    role: role
+  }, {
+    className: cx("".concat(blockClass, "__head"), headerGroupClassName),
     ref: headRef
-  }), datagridState.headers.filter(function (_ref2) {
-    var isVisible = _ref2.isVisible;
+  }), datagridState.headers.filter(function (_ref3) {
+    var isVisible = _ref3.isVisible;
     return isVisible;
   }).map(function (header, index) {
-    var _cx;
+    var _header$getResizerPro, _cx;
     if (header.id === selectionColumnId) {
       // render directly without the wrapper TableHeader
       return header.render('Header', {
         key: header.id
       });
     }
-    var _ref3 = header || 50,
-      minWidth = _ref3.minWidth;
+    var _ref4 = header || 50,
+      minWidth = _ref4.minWidth;
     var visibleColumns = datagridState.visibleColumns,
       state = datagridState.state,
       dispatch = datagridState.dispatch,
       onColResizeEnd = datagridState.onColResizeEnd;
     var columnResizing = state.columnResizing;
-    var _ref4 = columnResizing || {},
-      columnWidths = _ref4.columnWidths;
+    var _ref5 = columnResizing || {},
+      columnWidths = _ref5.columnWidths;
     var originalCol = visibleColumns[index];
-    return /*#__PURE__*/React.createElement(TableHeader, _extends({}, header.getHeaderProps(), {
-      className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), _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), header.getHeaderProps().className),
+    var _header$getHeaderProp = header.getHeaderProps(),
+      role = _header$getHeaderProp.role,
+      headerClassName = _header$getHeaderProp.className,
+      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)),
       key: header.id,
       "aria-hidden": header.id === 'spacer' && 'true'
-    }, getAccessibilityProps(header)), header.render('Header'), header.getResizerProps && !header.isAction && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, header.getResizerProps(), {
-      onMouseDown: function onMouseDown(event) {
-        return handleOnMouseDownResize(event, header.getResizerProps);
-      },
-      onKeyDown: function onKeyDown(event) {
-        var key = event.key;
-        if (key === 'ArrowLeft' || key === 'ArrowRight') {
-          var originalColMinWidth = originalCol.minWidth || 90;
-          var currentColumnWidth = columnWidths[header.id] || (datagridState.isTableSortable && originalCol.width < originalColMinWidth ? originalColMinWidth : originalCol.width);
-          if (key === 'ArrowLeft') {
-            if (currentColumnWidth - incrementAmount > Math.max(minWidth, 50)) {
-              var newWidth = currentColumnWidth - incrementAmount;
-              handleColumnResizingEvent(dispatch, header, newWidth, true);
-            }
-          }
-          if (key === 'ArrowRight') {
-            var _newWidth = currentColumnWidth + incrementAmount;
-            handleColumnResizingEvent(dispatch, header, _newWidth, true);
-          }
-        }
-      },
-      onKeyUp: function onKeyUp() {
-        return handleColumnResizeEndEvent(dispatch, onColResizeEnd, header.id, true);
-      },
-      className: cx("".concat(blockClass, "__col-resizer-range")),
-      type: "range",
-      defaultValue: originalCol.width,
-      "aria-label": resizerAriaLabel || 'Resize column'
-    })), /*#__PURE__*/React.createElement("span", {
-      className: "".concat(blockClass, "__col-resize-indicator")
-    })));
+    }, getAccessibilityProps(header), role === 'columnheader' && {
+      role: role
+    }), header.render('Header'), resizerProps && !header.isAction && /*#__PURE__*/React.createElement(ResizeHeader, {
+      resizerProps: resizerProps,
+      header: header,
+      handleOnMouseDownResize: handleOnMouseDownResize,
+      originalCol: originalCol,
+      columnWidths: columnWidths,
+      datagridState: datagridState,
+      incrementAmount: incrementAmount,
+      minWidth: minWidth,
+      dispatch: dispatch,
+      onColResizeEnd: onColResizeEnd,
+      resizerAriaLabel: resizerAriaLabel
+    }));
   }));
 };
 var useHeaderRow = function useHeaderRow(hooks) {

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

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children"];
+var _excluded = ["role"],
+  _excluded2 = ["children", "role"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -101,22 +102,28 @@ var DatagridRow = function DatagridRow(datagridState) {
     }
     return {};
   };
+  var _row$getRowProps = row.getRowProps(),
+    role = _row$getRowProps.role,
+    rowProps = _objectWithoutProperties(_row$getRowProps, _excluded);
   return /*#__PURE__*/React.createElement(React.Fragment, {
     key: key
   }, /*#__PURE__*/React.createElement(TableRow, _extends({
     className: rowClassNames
-  }, row.getRowProps(), {
+  }, rowProps, {
     key: row.id,
     onMouseEnter: hoverHandler,
     onMouseLeave: handleMouseLeave,
     onFocus: hoverHandler,
     onBlur: focusRemover,
     onKeyUp: handleOnKeyUp
-  }, setAdditionalRowProps()), row.cells.map(function (cell, index) {
+  }, setAdditionalRowProps(), role === 'row' && {
+    role: role
+  }), row.cells.map(function (cell, index) {
     var _cell$column;
     var cellProps = cell.getCellProps();
     var children = cellProps.children,
-      restProps = _objectWithoutProperties(cellProps, _excluded);
+      role = cellProps.role,
+      restProps = _objectWithoutProperties(cellProps, _excluded2);
     var content = children || /*#__PURE__*/React.createElement(React.Fragment, null, !row.isSkeleton && cell.render('Cell'), row.isSkeleton && /*#__PURE__*/React.createElement(SkeletonText, null));
     if ((cell === null || cell === void 0 || (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : _cell$column.id) === selectionColumnId) {
       // directly render component without the wrapping TableCell
@@ -128,6 +135,9 @@ var DatagridRow = function DatagridRow(datagridState) {
       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
     }), content);
   })), renderExpandedRow());
 };

package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js

@@ -16,8 +16,6 @@ import cx from 'classnames';
 import { Checkbox, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { CaretDown } from '@carbon/react/icons';
 import { pkg } from '../../../settings';
-// cspell:words columnheader
-
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var SELECT_ALL_PAGE_ROWS = 'pageRows';
 var SELECT_ALL_ROWS = 'allRows';
@@ -71,7 +69,6 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
   var disabled = isFetching || selectProps.disabled;
   var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
   return /*#__PURE__*/React.createElement("th", {
-    role: "columnheader",
     scope: "col",
     className: cx("".concat(blockClass, "__select-all-toggle-on"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, selectProps, {

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

@@ -156,8 +156,8 @@ var DatagridToolbar = function DatagridToolbar(datagridState) {
   return batchActions && DatagridActions ? /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: cx([blockClass, "".concat(blockClass, "--").concat(getRowHeight)])
-  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && /*#__PURE__*/React.createElement(DatagridActions, datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/React.createElement("div", {
     className: blockClass
-  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
+  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && /*#__PURE__*/React.createElement(DatagridActions, datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
 };
 export default DatagridToolbar;

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

@@ -59,7 +59,9 @@ var FilterPanel = function FilterPanel(_ref) {
     _ref$reactTableFilter = _ref.reactTableFiltersState,
     reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter,
     _ref$autoHideFilters = _ref.autoHideFilters,
-    autoHideFilters = _ref$autoHideFilters === void 0 ? false : _ref$autoHideFilters;
+    autoHideFilters = _ref$autoHideFilters === void 0 ? false : _ref$autoHideFilters,
+    _ref$isFetching = _ref.isFetching,
+    isFetching = _ref$isFetching === void 0 ? false : _ref$isFetching;
   /** State */
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -78,7 +80,8 @@ var FilterPanel = function FilterPanel(_ref) {
       reactTableFiltersState: reactTableFiltersState,
       onCancel: onCancel,
       panelOpen: panelOpen,
-      autoHideFilters: autoHideFilters
+      autoHideFilters: autoHideFilters,
+      isFetching: isFetching
     }),
     filtersState = _useFilters.filtersState,
     prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
@@ -245,6 +248,7 @@ FilterPanel.propTypes = {
   closeIconDescription: PropTypes.string,
   filterPanelMinHeight: PropTypes.number,
   filterSections: PropTypes.array,
+  isFetching: PropTypes.bool,
   onApply: PropTypes.func,
   onCancel: PropTypes.func,
   onPanelClose: PropTypes.func,

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

@@ -53,16 +53,21 @@ var useFilters = function useFilters(_ref2) {
     _ref2$onCancel = _ref2.onCancel,
     onCancel = _ref2$onCancel === void 0 ? function () {} : _ref2$onCancel,
     panelOpen = _ref2.panelOpen,
-    autoHideFilters = _ref2.autoHideFilters;
+    autoHideFilters = _ref2.autoHideFilters,
+    isFetching = _ref2.isFetching;
   /** State */
   var _useState = useState(getInitialStateFromFilters(filters, variation, reactTableFiltersState)),
     _useState2 = _slicedToArray(_useState, 2),
     filtersState = _useState2[0],
     setFiltersState = _useState2[1];
-  var _useState3 = useState(reactTableFiltersState),
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    filtersObjectArray = _useState4[0],
-    setFiltersObjectArray = _useState4[1];
+    fetchingReset = _useState4[0],
+    setFetchingReset = _useState4[1];
+  var _useState5 = useState(reactTableFiltersState),
+    _useState6 = _slicedToArray(_useState5, 2),
+    filtersObjectArray = _useState6[0],
+    setFiltersObjectArray = _useState6[1];
   var previousState = usePreviousValue({
     panelOpen: panelOpen
   });
@@ -105,6 +110,7 @@ var useFilters = function useFilters(_ref2) {
     // Update their respective refs so everything is in sync
     prevFiltersRef.current = JSON.stringify(initialFiltersState);
     prevFiltersObjectArrayRef.current = JSON.stringify(initialFiltersObjectArray);
+    lastAppliedFilters.current = JSON.stringify([]);
   }, [filters, setAllFilters, variation]);
   var applyFilters = function applyFilters(_ref3) {
     var column = _ref3.column,
@@ -195,7 +201,7 @@ var useFilters = function useFilters(_ref2) {
   };
   /** Render the individual filter component */
   var renderFilter = function renderFilter(_ref4) {
-    var _filtersState$column, _filtersState$column2, _filtersState$column3, _filtersState$column4;
+    var _filtersState$column3, _filtersState$column4;
     var type = _ref4.type,
       column = _ref4.column,
       components = _ref4.props;
@@ -287,31 +293,36 @@ var useFilters = function useFilters(_ref2) {
         filter = renderCheckboxes();
         break;
       case RADIO:
-        filter = /*#__PURE__*/React.createElement(FormGroup, components.FormGroup, /*#__PURE__*/React.createElement(RadioButtonGroup, _extends({}, components.RadioButtonGroup, {
-          valueSelected: ((_filtersState$column = filtersState[column]) === null || _filtersState$column === void 0 ? void 0 : _filtersState$column.value) === '' ? 'Any' : (_filtersState$column2 = filtersState[column]) === null || _filtersState$column2 === void 0 ? void 0 : _filtersState$column2.value,
-          onChange: function onChange(selected) {
-            var _components$RadioButt, _components$RadioButt2;
-            setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
-              value: selected,
-              type: type
-            })));
-            applyFilters({
-              column: column,
-              value: selected,
-              type: type
-            });
-            (_components$RadioButt = (_components$RadioButt2 = components.RadioButtonGroup).onChange) === null || _components$RadioButt === void 0 || _components$RadioButt.call(_components$RadioButt2, selected);
-          }
-        }), /*#__PURE__*/React.createElement(RadioButton, {
-          id: "any",
-          labelText: "Any",
-          value: "Any"
-        }), components.RadioButton.map(function (radio) {
-          var _ref6, _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
-          }, radio));
-        })));
+        {
+          var _filtersState$column, _components$DefaultRa, _components$DefaultRa2, _filtersState$column2, _components$DefaultRa3, _components$DefaultRa4, _components$DefaultRa5, _components$DefaultRa6, _components$DefaultRa7, _components$DefaultRa8;
+          var _components$RadioButt = _objectSpread({}, components.RadioButtonGroup),
+            name = _components$RadioButt.name;
+          filter = /*#__PURE__*/React.createElement(FormGroup, components.FormGroup, /*#__PURE__*/React.createElement(RadioButtonGroup, _extends({}, components.RadioButtonGroup, {
+            valueSelected: ((_filtersState$column = filtersState[column]) === null || _filtersState$column === void 0 ? void 0 : _filtersState$column.value) === '' ? (_components$DefaultRa = (_components$DefaultRa2 = components.DefaultRadioButton) === null || _components$DefaultRa2 === void 0 ? void 0 : _components$DefaultRa2.value) !== null && _components$DefaultRa !== void 0 ? _components$DefaultRa : 'Any' : (_filtersState$column2 = filtersState[column]) === null || _filtersState$column2 === void 0 ? void 0 : _filtersState$column2.value,
+            onChange: function onChange(selected) {
+              var _components$RadioButt2, _components$RadioButt3;
+              setFiltersState(_objectSpread(_objectSpread({}, filtersState), {}, _defineProperty({}, column, {
+                value: selected,
+                type: type
+              })));
+              applyFilters({
+                column: column,
+                value: selected,
+                type: type
+              });
+              (_components$RadioButt2 = (_components$RadioButt3 = components.RadioButtonGroup).onChange) === null || _components$RadioButt2 === void 0 || _components$RadioButt2.call(_components$RadioButt3, selected);
+            }
+          }), /*#__PURE__*/React.createElement(RadioButton, _extends({
+            id: (_components$DefaultRa3 = components === null || components === void 0 || (_components$DefaultRa4 = components.DefaultRadioButton) === null || _components$DefaultRa4 === void 0 ? void 0 : _components$DefaultRa4.id) !== null && _components$DefaultRa3 !== void 0 ? _components$DefaultRa3 : "any__".concat(name),
+            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;
+            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
+            }, radio));
+          })));
+        }
         break;
       case DROPDOWN:
         filter = /*#__PURE__*/React.createElement(Dropdown, _extends({}, components.Dropdown, {
@@ -363,6 +374,20 @@ var useFilters = function useFilters(_ref2) {
       }
     }
   }, [panelOpen, previousState, previousState === null || previousState === void 0 ? void 0 : previousState.panelOpen, reset, setAllFilters, revertToPreviousFilters]);
+
+  // Re-applies filters if the Datagrid goes into a fetching state while panel is open
+  // and has had filters changed without applying
+  useEffect(function () {
+    if (isFetching && !fetchingReset) {
+      setFiltersState(JSON.parse(prevFiltersRef.current));
+      setFiltersObjectArray(JSON.parse(prevFiltersRef.current));
+      setAllFilters(JSON.parse(prevFiltersObjectArrayRef.current));
+      setFetchingReset(true);
+    }
+    if (!isFetching) {
+      setFetchingReset(false);
+    }
+  }, [isFetching, reactTableFiltersState, setAllFilters, fetchingReset]);
   var cancel = function cancel() {
     // Reverting to previous filters only applies when using batch actions
     if (updateMethod === BATCH) {

package/es/components/Datagrid/Extensions/Filtering/Filtering.docs-page.js

@@ -36,7 +36,7 @@ export var DocsPage = function DocsPage() {
       subTitle: 'Create your filters for flyout variant',
       description: "To add filters to the flyout, you have to pass in an array of filters. These filters will be converted to it's respective component. Each filters has 3 important props, `type`, `column`, `props`.\n- `type`: the type of filter (this should be the same `filter` property in the headers)\n- `column`: the column that it should be filtered on\n- `props`: the props for the components needed to render the filter.\n\nPlease refer to all the available filters that you can use below.\n        ",
       source: {
-        code: "\nconst filters = [\n  {\n    type: 'date',\n    column: 'joined',\n    props: {\n      DatePicker: {\n        datePickerType: 'range',\n        // Add any other Carbon DatePicker props here\n      },\n      DatePickerInput: {\n        start: {\n          id: 'date-picker-input-id-start',\n          placeholder: 'mm/dd/yyyy',\n          labelText: 'Joined start date',\n          // Add any other Carbon DatePickerInput props here\n        },\n        end: {\n          id: 'date-picker-input-id-end',\n          placeholder: 'mm/dd/yyyy',\n          labelText: 'Joined end date',\n          // Add any other Carbon DatePickerInput props here\n        },\n      },\n    },\n  },\n  {\n    type: 'number',\n    column: 'visits',\n    props: {\n      NumberInput: {\n        min: 0,\n        id: 'visits-number-input',\n        invalidText: 'A valid value is required',\n        label: 'Visits',\n        placeholder: 'Type a number amount of visits',\n        // Add any other Carbon NumberInput props here\n      },\n    },\n  },\n  {\n    type: 'checkbox',\n    column: 'passwordStrength',\n    props: {\n      FormGroup: {\n        legendText: 'Password strength',\n        // Add any other Carbon FormGroup props here\n      },\n      Checkbox: [\n        {\n          id: 'normal',\n          labelText: 'Normal',\n          value: 'normal',\n          // Add any other Carbon Checkbox props here\n        },\n        {\n          id: 'minor-warning',\n          labelText: 'Minor warning',\n          value: 'minor-warning',\n          // Add any other Carbon Checkbox props here\n        },\n        {\n          id: 'critical',\n          labelText: 'Critical',\n          value: 'critical',\n          // Add any other Carbon Checkbox props here\n        },\n      ],\n    },\n  },\n  {\n    type: 'radio',\n    column: 'role',\n    props: {\n      FormGroup: {\n        legendText: 'Role',\n        // Add any other Carbon FormGroup props here\n      },\n      RadioButtonGroup: {\n        orientation: 'vertical',\n        legend: 'Role legend',\n        name: 'role-radio-button-group',\n        // Add any other Carbon RadioButtonGroup props here\n      },\n      RadioButton: [\n        {\n          id: 'developer',\n          labelText: 'Developer',\n          value: 'developer',\n          // Add any other Carbon RadioButton props here\n        },\n        {\n          id: 'designer',\n          labelText: 'Designer',\n          value: 'designer',\n          // Add any other Carbon RadioButton props here\n        },\n        {\n          id: 'researcher',\n          labelText: 'Researcher',\n          value: 'researcher',\n          // Add any other Carbon RadioButton props here\n        },\n      ],\n    },\n  },\n  {\n    type: 'dropdown',\n    column: 'status',\n    props: {\n      Dropdown: {\n        id: 'marital-status-dropdown',\n        ariaLabel: 'Marital status dropdown',\n        items: ['relationship', 'complicated', 'single'],\n        label: 'Marital status',\n        titleText: 'Marital status',\n        // Add any other Carbon Dropdown props here\n      },\n    },\n  },\n];\n          "
+        code: "\nconst filters = [\n  {\n    type: 'date',\n    column: 'joined',\n    props: {\n      DatePicker: {\n        datePickerType: 'range',\n        // Add any other Carbon DatePicker props here\n      },\n      DatePickerInput: {\n        start: {\n          id: 'date-picker-input-id-start',\n          placeholder: 'mm/dd/yyyy',\n          labelText: 'Joined start date',\n          // Add any other Carbon DatePickerInput props here\n        },\n        end: {\n          id: 'date-picker-input-id-end',\n          placeholder: 'mm/dd/yyyy',\n          labelText: 'Joined end date',\n          // Add any other Carbon DatePickerInput props here\n        },\n      },\n    },\n  },\n  {\n    type: 'number',\n    column: 'visits',\n    props: {\n      NumberInput: {\n        min: 0,\n        id: 'visits-number-input',\n        invalidText: 'A valid value is required',\n        label: 'Visits',\n        placeholder: 'Type a number amount of visits',\n        // Add any other Carbon NumberInput props here\n      },\n    },\n  },\n  {\n    type: 'checkbox',\n    column: 'passwordStrength',\n    props: {\n      FormGroup: {\n        legendText: 'Password strength',\n        // Add any other Carbon FormGroup props here\n      },\n      Checkbox: [\n        {\n          id: 'normal',\n          labelText: 'Normal',\n          value: 'normal',\n          // Add any other Carbon Checkbox props here\n        },\n        {\n          id: 'minor-warning',\n          labelText: 'Minor warning',\n          value: 'minor-warning',\n          // Add any other Carbon Checkbox props here\n        },\n        {\n          id: 'critical',\n          labelText: 'Critical',\n          value: 'critical',\n          // Add any other Carbon Checkbox props here\n        },\n      ],\n    },\n  },\n  {\n    type: 'radio',\n    column: 'role',\n    props: {\n      FormGroup: {\n        legendText: 'Role',\n        // Add any other Carbon FormGroup props here\n      },\n      RadioButtonGroup: {\n        orientation: 'vertical',\n        legend: 'Role legend',\n        name: 'role-radio-button-group',\n        // Add any other Carbon RadioButtonGroup props here\n      },\n      RadioButton: [\n        {\n          id: 'developer',\n          labelText: 'Developer',\n          value: 'developer',\n          // Add any other Carbon RadioButton props here\n        },\n        {\n          id: 'designer',\n          labelText: 'Designer',\n          value: 'designer',\n          // Add any other Carbon RadioButton props here\n        },\n        {\n          id: 'researcher',\n          labelText: 'Researcher',\n          value: 'researcher',\n          // Add any other Carbon RadioButton props here\n        },\n      ],\n      DefaultRadioButton: {\n        id: 'any__unique-id-for-any-radio-button',\n        labelText: 'Any',\n        value: 'Any',\n        // Add any other Carbon RadioButton props here\n      }\n    },\n  },\n  {\n    type: 'dropdown',\n    column: 'status',\n    props: {\n      Dropdown: {\n        id: 'marital-status-dropdown',\n        ariaLabel: 'Marital status dropdown',\n        items: ['relationship', 'complicated', 'single'],\n        label: 'Marital status',\n        titleText: 'Marital status',\n        // Add any other Carbon Dropdown props here\n      },\n    },\n  },\n];\n          "
       }
     }, {
       subTitle: 'Create your filters for panel variant',

package/es/components/Datagrid/useFiltering.js

@@ -28,7 +28,8 @@ var useFiltering = function useFiltering(hooks) {
           var rowValue = row.values[id];
           var startDateObj = _typeof(startDate) === 'object' ? startDate : new Date(startDate);
           var endDateObj = _typeof(endDate) === 'object' ? endDate : new Date(endDate);
-          if (rowValue.getTime() <= endDateObj.getTime() && rowValue.getTime() >= startDateObj.getTime()) {
+          var rowValueDateObj = _typeof(rowValue) === 'object' ? rowValue : new Date(rowValue);
+          if (rowValueDateObj.getTime() <= endDateObj.getTime() && rowValueDateObj.getTime() >= startDateObj.getTime()) {
             // In date range
             return true;
           } else {

package/es/components/EditSidePanel/EditSidePanel.js

@@ -188,6 +188,10 @@ EditSidePanel.propTypes = {
    * Specifies which DOM element in the form should be focused.
    */
   slideIn: PropTypes.bool,
+  /**
+   *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
+   */
+  slug: PropTypes.node,
   /**
    * The subtitle of the CreateSidePanel is optional and serves to provide more information about the modal.
    */

package/es/components/ExpressiveCard/ExpressiveCard.js

@@ -106,6 +106,11 @@ ExpressiveCard.propTypes = {
    * The text that's displayed in the secondary button
    */
   secondaryButtonText: PropTypes.string,
+  /**
+   * **Experimental:** For all cases a `Slug` component can be provided.
+   * Clickable tiles only accept a boolean value of true and display a hollow slug.
+   */
+  slug: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   /**
    * Title that's displayed at the top of the card
    */

package/es/components/Guidebanner/Guidebanner.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "collapsible", "onClose", "closeIconDescription", "collapseButtonLabel", "expandButtonLabel", "nextIconDescription", "previousIconDescription", "title"];
+var _excluded = ["children", "className", "collapsible", "onClose", "withLeftGutter", "closeIconDescription", "collapseButtonLabel", "expandButtonLabel", "nextIconDescription", "previousIconDescription", "title"];
 /**
  * Copyright IBM Corp. 2023, 2023
  *
@@ -25,6 +25,7 @@ var blockClass = "".concat(pkg.prefix, "--guidebanner");
 var componentName = 'Guidebanner';
 var defaults = {
   collapsible: false,
+  withLeftGutter: false,
   // Labels
   closeIconDescription: 'Close',
   collapseButtonLabel: 'Read less',
@@ -43,6 +44,8 @@ export var Guidebanner = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$collapsible = _ref.collapsible,
     collapsible = _ref$collapsible === void 0 ? defaults.collapsible : _ref$collapsible,
     onClose = _ref.onClose,
+    _ref$withLeftGutter = _ref.withLeftGutter,
+    withLeftGutter = _ref$withLeftGutter === void 0 ? defaults.withLeftGutter : _ref$withLeftGutter,
     _ref$closeIconDescrip = _ref.closeIconDescription,
     closeIconDescription = _ref$closeIconDescrip === void 0 ? defaults.closeIconDescription : _ref$closeIconDescrip,
     _ref$collapseButtonLa = _ref.collapseButtonLabel,
@@ -76,7 +79,7 @@ export var Guidebanner = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     "aria-expanded": !isCollapsed,
-    className: cx(blockClass, className, [collapsible ? "".concat(blockClass, "__collapsible") : null], [isCollapsed ? "".concat(blockClass, "__collapsible-collapsed") : null]),
+    className: cx(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), withLeftGutter && "".concat(blockClass, "__with-left-gutter")),
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(Idea, {
     size: 20,
@@ -217,5 +220,11 @@ Guidebanner.propTypes = {
   /**
    * Title text.
    */
-  title: PropTypes.string.isRequired
+  title: PropTypes.string.isRequired,
+  /**
+   * If true, insert 1 rem of "space" on the left of the component.
+   * This will allow the component's content to line up with other
+   * content on the page under special circumstances.
+   */
+  withLeftGutter: PropTypes.bool
 };

package/es/components/InlineTip/InlineTip.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "closeIconDescription", "collapsible", "collapseButtonLabel", "expandButtonLabel", "narrow", "onClick", "onClose", "tertiaryButtonLabel", "action", "title", "media"];
+var _excluded = ["action", "children", "className", "closeIconDescription", "collapsible", "collapseButtonLabel", "expandButtonLabel", "media", "narrow", "onClick", "onClose", "tertiaryButtonLabel", "title", "withLeftGutter"];
 /**
  * Copyright IBM Corp. 2023, 2023
  *
@@ -36,6 +36,7 @@ var defaults = {
   collapseButtonLabel: 'Read less',
   expandButtonLabel: 'Read more',
   narrow: false,
+  withLeftGutter: false,
   onClick: function onClick() {},
   onClose: function onClose() {}
 };
@@ -46,7 +47,8 @@ var defaults = {
  * distracting the user from their flow.
  */
 export var InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
+  var action = _ref.action,
+    children = _ref.children,
     className = _ref.className,
     _ref$closeIconDescrip = _ref.closeIconDescription,
     closeIconDescription = _ref$closeIconDescrip === void 0 ? defaults.closeIconDescription : _ref$closeIconDescrip,
@@ -56,15 +58,16 @@ export var InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     collapseButtonLabel = _ref$collapseButtonLa === void 0 ? defaults.collapseButtonLabel : _ref$collapseButtonLa,
     _ref$expandButtonLabe = _ref.expandButtonLabel,
     expandButtonLabel = _ref$expandButtonLabe === void 0 ? defaults.expandButtonLabel : _ref$expandButtonLabe,
+    media = _ref.media,
     _ref$narrow = _ref.narrow,
     narrow = _ref$narrow === void 0 ? defaults.narrow : _ref$narrow,
     onClick = _ref.onClick,
     onClose = _ref.onClose,
     tertiaryButtonLabel = _ref.tertiaryButtonLabel,
-    action = _ref.action,
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? defaults.title : _ref$title,
-    media = _ref.media,
+    _ref$withLeftGutter = _ref.withLeftGutter,
+    withLeftGutter = _ref$withLeftGutter === void 0 ? defaults.withLeftGutter : _ref$withLeftGutter,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(collapsible),
     _useState2 = _slicedToArray(_useState, 2),
@@ -87,7 +90,7 @@ export var InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [collapsible]);
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     "aria-labelledby": labelId,
-    className: cx(blockClass, className, [collapsible ? "".concat(blockClass, "__collapsible") : null], [isCollapsed ? "".concat(blockClass, "__collapsible-collapsed") : null], [narrow ? "".concat(blockClass, "__narrow") : "".concat(blockClass, "__wide")], [media ? "".concat(blockClass, "__has-media") : null]),
+    className: cx(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), media && "".concat(blockClass, "__has-media"), [narrow ? "".concat(blockClass, "__narrow") : "".concat(blockClass, "__wide")], withLeftGutter && !narrow && "".concat(blockClass, "__with-left-gutter")),
     ref: ref,
     role: "complementary"
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
@@ -213,5 +216,13 @@ InlineTip.propTypes = {
   /**
    * The title of the InlineTip.
    */
-  title: PropTypes.string.isRequired
+  title: PropTypes.string.isRequired,
+  /**
+   * If true, insert 1 rem of "space" on the left of the component.
+   * This will allow the component's content to line up with other
+   * content on the page under special circumstances.
+   *
+   * This will only be applied when `narrow` is false.
+   */
+  withLeftGutter: PropTypes.bool
 };

package/es/components/InlineTip/InlineTipButton.js

@@ -39,6 +39,8 @@ export var InlineTipButton = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     kind: "ghost"
   }), children);
 });
+InlineTipButton = pkg.checkComponentEnabled(InlineTipButton, componentName);
+InlineTipButton.displayName = componentName;
 InlineTipButton.propTypes = {
   /**
    * Provide the contents of the InlineTipButton.