@carbon/ibm-products 1.62.1 → 1.64.0

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

@@ -55,7 +55,9 @@ var FilterPanel = function FilterPanel(_ref) {
     _ref$searchPlaceholde = _ref.searchPlaceholder,
     searchPlaceholder = _ref$searchPlaceholde === void 0 ? 'Find filters' : _ref$searchPlaceholde,
     _ref$reactTableFilter = _ref.reactTableFiltersState,
-    reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter;
+    reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter,
+    _ref$isFetching = _ref.isFetching,
+    isFetching = _ref$isFetching === void 0 ? false : _ref$isFetching;
   /** State */
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -73,7 +75,8 @@ var FilterPanel = function FilterPanel(_ref) {
       variation: PANEL,
       reactTableFiltersState: reactTableFiltersState,
       onCancel: onCancel,
-      panelOpen: panelOpen
+      panelOpen: panelOpen,
+      isFetching: isFetching
     }),
     filtersState = _useFilters.filtersState,
     prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
@@ -238,6 +241,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

@@ -25,16 +25,21 @@ var useFilters = function useFilters(_ref) {
     reactTableFiltersState = _ref.reactTableFiltersState,
     _ref$onCancel = _ref.onCancel,
     onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel,
-    panelOpen = _ref.panelOpen;
+    panelOpen = _ref.panelOpen,
+    isFetching = _ref.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
   });
@@ -50,7 +55,7 @@ var useFilters = function useFilters(_ref) {
   /** Methods */
   // If the user decides to cancel or click outside the flyout, it reverts back to the filters that were
   // there when they opened the flyout
-  var revertToPreviousFilters = function revertToPreviousFilters() {
+  var revertToPreviousFilters = useCallback(function () {
     setFiltersState(JSON.parse(prevFiltersRef.current));
     setFiltersObjectArray(JSON.parse(prevFiltersObjectArrayRef.current));
     setAllFilters(JSON.parse(lastAppliedFilters.current));
@@ -60,7 +65,7 @@ var useFilters = function useFilters(_ref) {
     holdingPrevFiltersRef.current = JSON.parse(prevFiltersRef.current);
     holdingLastAppliedFiltersRef.current = JSON.parse(prevFiltersObjectArrayRef.current);
     holdingPrevFiltersObjectArrayRef.current = JSON.parse(lastAppliedFilters.current);
-  };
+  }, [setAllFilters]);
   var reset = useCallback(function () {
     // When we reset we want the "initialFilters" to be an empty array
     var resetFiltersArray = [];
@@ -77,6 +82,7 @@ var useFilters = function useFilters(_ref) {
     // 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(_ref2) {
     var column = _ref2.column,
@@ -167,7 +173,6 @@ var useFilters = function useFilters(_ref) {
   };
   /** Render the individual filter component */
   var renderFilter = function renderFilter(_ref3) {
-    var _filtersState$column, _filtersState$column2;
     var type = _ref3.type,
       column = _ref3.column,
       components = _ref3.props;
@@ -254,31 +259,36 @@ var useFilters = function useFilters(_ref) {
         }));
         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 ? void 0 : _components$RadioButt.call(_components$RadioButt2, selected);
-          }
-        }), /*#__PURE__*/React.createElement(RadioButton, {
-          id: "any",
-          labelText: "Any",
-          value: "Any"
-        }), components.RadioButton.map(function (radio) {
-          var _ref4, _radio$id;
-          return /*#__PURE__*/React.createElement(RadioButton, _extends({
-            key: (_ref4 = (_radio$id = radio.id) !== null && _radio$id !== void 0 ? _radio$id : radio.labelText) !== null && _ref4 !== void 0 ? _ref4 : 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 ? void 0 : _components$RadioButt2.call(_components$RadioButt3, selected);
+            }
+          }), /*#__PURE__*/React.createElement(RadioButton, _extends({
+            id: (_components$DefaultRa3 = components === null || components === void 0 ? 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 ? 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 ? 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 _ref4, _radio$id;
+            return /*#__PURE__*/React.createElement(RadioButton, _extends({
+              key: (_ref4 = (_radio$id = radio.id) !== null && _radio$id !== void 0 ? _radio$id : radio.labelText) !== null && _ref4 !== void 0 ? _ref4 : radio.value
+            }, radio));
+          })));
+        }
         break;
       case DROPDOWN:
         filter = /*#__PURE__*/React.createElement(Dropdown, _extends({}, components.Dropdown, {
@@ -314,6 +324,7 @@ var useFilters = function useFilters(_ref) {
    */
   useEffect(function () {
     if (!panelOpen && previousState !== null && previousState !== void 0 && previousState.panelOpen) {
+      revertToPreviousFilters();
       setAllFilters(holdingLastAppliedFiltersRef.current);
     }
     if (panelOpen && !(previousState !== null && previousState !== void 0 && previousState.panelOpen)) {
@@ -323,7 +334,21 @@ var useFilters = function useFilters(_ref) {
         setAllFilters(JSON.parse(prevFiltersObjectArrayRef.current));
       }
     }
-  }, [panelOpen, previousState, previousState === null || previousState === void 0 ? void 0 : previousState.panelOpen, reset, setAllFilters]);
+  }, [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/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/Datagrid/utils/handleFilterTagLabelText.js

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+
+// Example usage for custom filter tag labels, in practice this
+// is where a translation service would be utilized. This
+// utility is for storybook demonstration purposes only.
+export var handleFilterTagLabelText = function handleFilterTagLabelText(key, value) {
+  switch (key) {
+    case 'role':
+      return "Role: ".concat(value);
+    case 'joined':
+      return "Joined: ".concat(value);
+    case 'visits':
+      return "Visits: ".concat(value);
+    case 'passwordStrength':
+      return "Password strength: ".concat(value);
+    case 'status':
+      return "Status: ".concat(value);
+    default:
+      return "".concat(key, ": ").concat(value);
+  }
+};

package/es/components/FilterSummary/FilterSummary.js

@@ -4,19 +4,21 @@ var _excluded = ["key", "value"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /**
- * Copyright IBM Corp. 2022, 2022
+ * Copyright IBM Corp. 2022, 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 { Button } from 'carbon-components-react';
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { TagSet } from '../TagSet';
 import { pkg } from '../../settings';
+import uuidv4 from '../../global/js/utils/uuidv4';
 var blockClass = "".concat(pkg.prefix, "--filter-summary");
 var FilterSummary = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _filterSummaryClearBu;
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$clearFiltersText = _ref.clearFiltersText,
@@ -28,7 +30,10 @@ var FilterSummary = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$renderLabel = _ref.renderLabel,
     renderLabel = _ref$renderLabel === void 0 ? null : _ref$renderLabel,
     _ref$overflowType = _ref.overflowType,
-    overflowType = _ref$overflowType === void 0 ? 'default' : _ref$overflowType;
+    overflowType = _ref$overflowType === void 0 ? 'default' : _ref$overflowType,
+    _ref$clearButtonInlin = _ref.clearButtonInline,
+    clearButtonInline = _ref$clearButtonInlin === void 0 ? true : _ref$clearButtonInlin;
+  var filterSummaryId = "".concat(blockClass, "__").concat(uuidv4());
   var tagFilters = filters.map(function (_ref2) {
     var _renderLabel;
     var key = _ref2.key,
@@ -39,26 +44,35 @@ var FilterSummary = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       label: (_renderLabel = renderLabel === null || renderLabel === void 0 ? void 0 : renderLabel(key, value)) !== null && _renderLabel !== void 0 ? _renderLabel : "".concat(key, ": ").concat(value)
     });
   });
+  var filterSummaryClearButton = useRef();
+  var filterSummaryRef = useRef();
+  var localRef = filterSummaryRef || ref;
   return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: cx([blockClass, className])
+    ref: localRef,
+    className: cx([blockClass, className]),
+    id: filterSummaryId
   }, /*#__PURE__*/React.createElement(TagSet, {
     allTagsModalSearchLabel: "Search all tags",
     allTagsModalSearchPlaceholderText: "Search all tags",
     allTagsModalTitle: "All tags",
     showAllTagsLabel: "View all tags",
     tags: tagFilters,
-    overflowType: overflowType
+    overflowType: overflowType,
+    className: cx(_defineProperty({}, "".concat(blockClass, "__clear-button-inline"), clearButtonInline)),
+    containingElementRef: localRef,
+    measurementOffset: filterSummaryClearButton === null || filterSummaryClearButton === void 0 ? void 0 : (_filterSummaryClearBu = filterSummaryClearButton.current) === null || _filterSummaryClearBu === void 0 ? void 0 : _filterSummaryClearBu.offsetWidth
   }), /*#__PURE__*/React.createElement(Button, {
     kind: "ghost",
     size: "sm",
-    onClick: clearFilters
+    onClick: clearFilters,
+    ref: filterSummaryClearButton
   }, clearFiltersText));
 });
 var componentName = 'FilterSummary';
 FilterSummary.displayName = componentName;
 FilterSummary.propTypes = {
   className: PropTypes.string,
+  clearButtonInline: PropTypes.boolean,
   clearFilters: PropTypes.func.isRequired,
   clearFiltersText: PropTypes.string,
   filters: PropTypes.arrayOf(PropTypes.object).isRequired,

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
  *
@@ -30,6 +30,7 @@ var blockClass = "".concat(pkg.prefix, "--guidebanner");
 var componentName = 'Guidebanner';
 var defaults = {
   collapsible: false,
+  withLeftGutter: false,
   // Labels
   closeIconDescription: 'Close',
   collapseButtonLabel: 'Read less',
@@ -48,6 +49,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,
@@ -83,7 +86,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(Idea20, {
     className: "".concat(blockClass, "__icon-idea")
@@ -222,5 +225,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
  *
@@ -48,6 +48,7 @@ var defaults = {
   collapseButtonLabel: 'Read less',
   expandButtonLabel: 'Read more',
   narrow: false,
+  withLeftGutter: false,
   onClick: function onClick() {},
   onClose: function onClose() {}
 };
@@ -56,7 +57,8 @@ var defaults = {
  * TODO: A description of the component.
  */
 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,
@@ -66,15 +68,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),
@@ -101,7 +104,7 @@ export var InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     // Apply the block class to the main HTML element
     className,
     // Apply any supplied class names to the main HTML element.
-    [collapsible ? "".concat(blockClass, "__collapsible") : null], [isCollapsed ? "".concat(blockClass, "__collapsible-collapsed") : null], [narrow ? "".concat(blockClass, "__narrow") : "".concat(blockClass, "__wide")], [media ? "".concat(blockClass, "__has-media") : null]),
+    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(Button, {
@@ -228,5 +231,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/TagSet/TagSet.js

@@ -2,13 +2,13 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "overflowDirection", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
+var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "overflowDirection", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags", "containingElementRef", "measurementOffset"],
   _excluded2 = ["label", "id"],
   _excluded3 = ["label"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 //
-// Copyright IBM Corp. 2020, 2021
+// 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.
@@ -33,6 +33,7 @@ var allTagsModalSearchThreshold = 10;
 var defaults = {
   align: 'start',
   // allTagsModalTarget: document.body,
+  measurementOffset: 0,
   overflowAlign: 'center',
   overflowDirection: 'bottom',
   overflowType: 'default'
@@ -56,6 +57,9 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
     showAllTagsLabel = _ref.showAllTagsLabel,
     tags = _ref.tags,
+    containingElementRef = _ref.containingElementRef,
+    _ref$measurementOffse = _ref.measurementOffset,
+    measurementOffset = _ref$measurementOffse === void 0 ? defaults.measurementOffset : _ref$measurementOffse,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(3),
     _useState2 = _slicedToArray(_useState, 2),
@@ -160,7 +164,9 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     // how many will fit?
     var willFit = 0;
     if (sizingTags.length > 0) {
-      var spaceAvailable = tagSetRef.current.offsetWidth;
+      var optionalContainingElement = containingElementRef === null || containingElementRef === void 0 ? void 0 : containingElementRef.current;
+      var measurementOffsetValue = typeof measurementOffset === 'number' ? measurementOffset : 0;
+      var spaceAvailable = optionalContainingElement ? optionalContainingElement.offsetWidth - measurementOffsetValue : tagSetRef.current.offsetWidth;
       for (var i in sizingTags) {
         var tagWidth = sizingTags[i].offsetWidth;
         if (spaceAvailable >= tagWidth) {
@@ -183,7 +189,7 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     } else {
       setDisplayCount(maxVisible ? Math.min(willFit, maxVisible) : willFit);
     }
-  }, [maxVisible, multiline, sizingTags, tagSetRef]);
+  }, [maxVisible, multiline, sizingTags, tagSetRef, containingElementRef, measurementOffset]);
   useEffect(function () {
     checkFullyVisibleTags();
   }, [checkFullyVisibleTags, maxVisible, multiline, sizingTags]);
@@ -205,7 +211,8 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setShowAllModalOpen(false);
   };
   useResizeObserver(sizingContainerRef, handleSizerTagsResize);
-  useResizeObserver(tagSetRef, handleResize);
+  var resizeOption = containingElementRef ? containingElementRef : tagSetRef;
+  useResizeObserver(resizeOption, handleResize);
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     className: cx([blockClass, className]),
     ref: tagSetRef
@@ -284,10 +291,20 @@ TagSet.propTypes = {
    * className
    */
   className: PropTypes.string,
+  /**
+   * Optional ref for custom resize container to measure available space
+   * Default will measure the available space of the TagSet container itself.
+   */
+  containingElementRef: PropTypes.object,
   /**
    * maximum visible tags
    */
   maxVisible: PropTypes.number,
+  /**
+   * Specify offset amount for measure available space, only used when `containingElementSelector`
+   * is also provided
+   */
+  measurementOffset: PropTypes.number,
   /**
    * display tags in multiple lines
    */

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

@@ -168,7 +168,8 @@ var DatagridContent = function DatagridContent(_ref) {
     updateMethod: "batch"
   }, getFilterFlyoutProps(), {
     title: filterProps.panelTitle,
-    filterSections: filterProps.sections
+    filterSections: filterProps.sections,
+    isFetching: isFetching
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__table-container-inner")
   }, renderFilterSummary(), withInlineEdit ? /*#__PURE__*/_react.default.createElement("div", {

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

@@ -154,9 +154,9 @@ var DatagridToolbar = function DatagridToolbar(datagridState) {
   return batchActions && DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     className: (0, _classnames.default)([toolbarClass, "".concat(toolbarClass, "--").concat(getRowHeight)])
-  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && /*#__PURE__*/_react.default.createElement(DatagridActions, datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
     className: toolbarClass
-  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
+  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && /*#__PURE__*/_react.default.createElement(DatagridActions, datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
 };
 var _default = DatagridToolbar;
 exports.default = _default;

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

@@ -65,7 +65,9 @@ var FilterPanel = function FilterPanel(_ref) {
     _ref$searchPlaceholde = _ref.searchPlaceholder,
     searchPlaceholder = _ref$searchPlaceholde === void 0 ? 'Find filters' : _ref$searchPlaceholde,
     _ref$reactTableFilter = _ref.reactTableFiltersState,
-    reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter;
+    reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter,
+    _ref$isFetching = _ref.isFetching,
+    isFetching = _ref$isFetching === void 0 ? false : _ref$isFetching;
   /** State */
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -83,7 +85,8 @@ var FilterPanel = function FilterPanel(_ref) {
       variation: _constants.PANEL,
       reactTableFiltersState: reactTableFiltersState,
       onCancel: onCancel,
-      panelOpen: panelOpen
+      panelOpen: panelOpen,
+      isFetching: isFetching
     }),
     filtersState = _useFilters.filtersState,
     prevFiltersObjectArrayRef = _useFilters.prevFiltersObjectArrayRef,
@@ -248,6 +251,7 @@ FilterPanel.propTypes = {
   closeIconDescription: _propTypes.default.string,
   filterPanelMinHeight: _propTypes.default.number,
   filterSections: _propTypes.default.array,
+  isFetching: _propTypes.default.bool,
   onApply: _propTypes.default.func,
   onCancel: _propTypes.default.func,
   onPanelClose: _propTypes.default.func,