@carbon/ibm-products 2.18.1 → 2.19.0

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

@@ -61,16 +61,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 = (0, _react2.useState)((0, _utils.getInitialStateFromFilters)(filters, variation, reactTableFiltersState)),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     filtersState = _useState2[0],
     setFiltersState = _useState2[1];
-  var _useState3 = (0, _react2.useState)(reactTableFiltersState),
+  var _useState3 = (0, _react2.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    filtersObjectArray = _useState4[0],
-    setFiltersObjectArray = _useState4[1];
+    fetchingReset = _useState4[0],
+    setFetchingReset = _useState4[1];
+  var _useState5 = (0, _react2.useState)(reactTableFiltersState),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    filtersObjectArray = _useState6[0],
+    setFiltersObjectArray = _useState6[1];
   var previousState = (0, _hooks.usePreviousValue)({
     panelOpen: panelOpen
   });
@@ -113,6 +118,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,
@@ -203,7 +209,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;
@@ -295,31 +301,36 @@ var useFilters = function useFilters(_ref2) {
         filter = renderCheckboxes();
         break;
       case _constants.RADIO:
-        filter = /*#__PURE__*/_react2.default.createElement(_react.FormGroup, components.FormGroup, /*#__PURE__*/_react2.default.createElement(_react.RadioButtonGroup, (0, _extends2.default)({}, 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), {}, (0, _defineProperty2.default)({}, 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__*/_react2.default.createElement(_react.RadioButton, {
-          id: "any",
-          labelText: "Any",
-          value: "Any"
-        }), components.RadioButton.map(function (radio) {
-          var _ref6, _radio$id;
-          return /*#__PURE__*/_react2.default.createElement(_react.RadioButton, (0, _extends2.default)({
-            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__*/_react2.default.createElement(_react.FormGroup, components.FormGroup, /*#__PURE__*/_react2.default.createElement(_react.RadioButtonGroup, (0, _extends2.default)({}, 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), {}, (0, _defineProperty2.default)({}, 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__*/_react2.default.createElement(_react.RadioButton, (0, _extends2.default)({
+            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__*/_react2.default.createElement(_react.RadioButton, (0, _extends2.default)({
+              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 _constants.DROPDOWN:
         filter = /*#__PURE__*/_react2.default.createElement(_react.Dropdown, (0, _extends2.default)({}, components.Dropdown, {
@@ -371,6 +382,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
+  (0, _react2.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 === _constants.BATCH) {

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

@@ -43,7 +43,7 @@ var DocsPage = exports.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/lib/components/Datagrid/useFiltering.js

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

package/lib/components/EditSidePanel/EditSidePanel.js

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

package/lib/components/ExpressiveCard/ExpressiveCard.js

@@ -116,6 +116,11 @@ ExpressiveCard.propTypes = {
    * The text that's displayed in the secondary button
    */
   secondaryButtonText: _propTypes.default.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.default.oneOfType([_propTypes.default.node, _propTypes.default.bool]),
   /**
    * Title that's displayed at the top of the card
    */

package/lib/components/Guidebanner/Guidebanner.js

@@ -18,7 +18,7 @@ var _react2 = require("@carbon/react");
 var _Carousel = require("../Carousel");
 var _devtools = require("../../global/js/utils/devtools");
 var _settings = require("../../settings");
-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
  *
@@ -33,6 +33,7 @@ var blockClass = "".concat(_settings.pkg.prefix, "--guidebanner");
 var componentName = 'Guidebanner';
 var defaults = {
   collapsible: false,
+  withLeftGutter: false,
   // Labels
   closeIconDescription: 'Close',
   collapseButtonLabel: 'Read less',
@@ -51,6 +52,8 @@ var Guidebanner = exports.Guidebanner = /*#__PURE__*/_react.default.forwardRef(f
     _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,
@@ -84,7 +87,7 @@ var Guidebanner = exports.Guidebanner = /*#__PURE__*/_react.default.forwardRef(f
   };
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     "aria-expanded": !isCollapsed,
-    className: (0, _classnames.default)(blockClass, className, [collapsible ? "".concat(blockClass, "__collapsible") : null], [isCollapsed ? "".concat(blockClass, "__collapsible-collapsed") : null]),
+    className: (0, _classnames.default)(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), withLeftGutter && "".concat(blockClass, "__with-left-gutter")),
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_icons.Idea, {
     size: 20,
@@ -225,5 +228,11 @@ Guidebanner.propTypes = {
   /**
    * Title text.
    */
-  title: _propTypes.default.string.isRequired
+  title: _propTypes.default.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.default.bool
 };

package/lib/components/InlineTip/InlineTip.js

@@ -19,7 +19,7 @@ var _SteppedAnimatedMedia = require("../SteppedAnimatedMedia");
 var _devtools = require("../../global/js/utils/devtools");
 var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 var _settings = require("../../settings");
-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
  *
@@ -43,6 +43,7 @@ var defaults = {
   collapseButtonLabel: 'Read less',
   expandButtonLabel: 'Read more',
   narrow: false,
+  withLeftGutter: false,
   onClick: function onClick() {},
   onClose: function onClose() {}
 };
@@ -53,7 +54,8 @@ var defaults = {
  * distracting the user from their flow.
  */
 var InlineTip = exports.InlineTip = /*#__PURE__*/_react.default.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,
@@ -63,15 +65,16 @@ var InlineTip = exports.InlineTip = /*#__PURE__*/_react.default.forwardRef(funct
     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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, _react.useState)(collapsible),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -94,7 +97,7 @@ var InlineTip = exports.InlineTip = /*#__PURE__*/_react.default.forwardRef(funct
   }, [collapsible]);
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     "aria-labelledby": labelId,
-    className: (0, _classnames.default)(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: (0, _classnames.default)(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"
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement("div", {
@@ -220,5 +223,13 @@ InlineTip.propTypes = {
   /**
    * The title of the InlineTip.
    */
-  title: _propTypes.default.string.isRequired
+  title: _propTypes.default.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.default.bool
 };

package/lib/components/InlineTip/InlineTipButton.js

@@ -43,6 +43,8 @@ var InlineTipButton = exports.InlineTipButton = /*#__PURE__*/_react.default.forw
     kind: "ghost"
   }), children);
 });
+exports.InlineTipButton = InlineTipButton = _settings.pkg.checkComponentEnabled(InlineTipButton, componentName);
+InlineTipButton.displayName = componentName;
 InlineTipButton.propTypes = {
   /**
    * Provide the contents of the InlineTipButton.

package/lib/components/InlineTip/InlineTipLink.js

@@ -47,6 +47,8 @@ var InlineTipLink = exports.InlineTipLink = /*#__PURE__*/_react.default.forwardR
     }
   }), children);
 });
+exports.InlineTipLink = InlineTipLink = _settings.pkg.checkComponentEnabled(InlineTipLink, componentName);
+InlineTipLink.displayName = componentName;
 InlineTipLink.propTypes = {
   /**
    * Provide the contents of the InlineTipLink.

package/lib/components/ProductiveCard/ProductiveCard.js

@@ -139,6 +139,11 @@ ProductiveCard.propTypes = {
    * The text that's displayed in the secondary button
    */
   secondaryButtonText: _propTypes.default.node,
+  /**
+   * **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.default.oneOfType([_propTypes.default.node, _propTypes.default.bool]),
   /**
    * Title that's displayed at the top of the card
    */

package/lib/components/SidePanel/SidePanel.js

@@ -384,12 +384,13 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
   var primaryActionContainerClassNames = (0, _classnames.default)(["".concat(blockClass, "__actions-container"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__actions-container-condensed"), condensedActions)]);
   var mainPanelClassNames = (0, _classnames.default)([blockClass, className, "".concat(blockClass, "__container"), "".concat(blockClass, "__container--").concat(size), (_ref5 = {}, (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-right-placement"), placement === 'right'), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-left-placement"), placement === 'left'), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-with-action-toolbar"), actionToolbarButtons && actionToolbarButtons.length), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-without-overlay"), !includeOverlay && !slideIn), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container-is-animating"), !animationComplete || !open), (0, _defineProperty2.default)(_ref5, "".concat(blockClass, "__container--has-slug"), slug), _ref5)]);
   var renderHeader = function renderHeader() {
-    var _cx, _cx2;
+    var _slug$type, _cx, _cx2;
+    var slugCloseSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
     var normalizedSlug;
-    if (slug) {
+    if (slug && (slug === null || slug === void 0 || (_slug$type = slug.type) === null || _slug$type === void 0 ? void 0 : _slug$type.displayName) === 'Slug') {
       normalizedSlug = /*#__PURE__*/_react.default.cloneElement(slug, {
         // slug size is sm unless actions and size > md
-        size: actions.length && /l/.test(size) ? 'md' : 'sm'
+        size: slugCloseSize
       });
     }
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
@@ -397,7 +398,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
     }, currentStep > 0 && /*#__PURE__*/_react.default.createElement(_react2.Button, {
       "aria-label": navigationBackIconDescription,
       kind: "ghost",
-      size: "sm",
+      size: slugCloseSize,
       disabled: false,
       renderIcon: function renderIcon(props) {
         return /*#__PURE__*/_react.default.createElement(_icons.ArrowLeft, (0, _extends2.default)({
@@ -414,7 +415,7 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
     }, normalizedSlug, /*#__PURE__*/_react.default.createElement(_react2.Button, {
       "aria-label": closeIconDescription,
       kind: "ghost",
-      size: "sm",
+      size: slugCloseSize,
       renderIcon: function renderIcon(props) {
         return /*#__PURE__*/_react.default.createElement(_icons.Close, (0, _extends2.default)({
           size: 20
@@ -640,7 +641,7 @@ SidePanel.propTypes = {
    */
   slideIn: _propTypes.default.bool,
   /**
-   * Provide a `Slug` component to be rendered inside the `SidePanel` component
+   *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
    */
   slug: _propTypes.default.node,
   /**

package/lib/components/index.js

@@ -165,6 +165,30 @@ Object.defineProperty(exports, "ExpressiveCard", {
     return _ExpressiveCard.ExpressiveCard;
   }
 });
+Object.defineProperty(exports, "Guidebanner", {
+  enumerable: true,
+  get: function get() {
+    return _Guidebanner.Guidebanner;
+  }
+});
+Object.defineProperty(exports, "GuidebannerElement", {
+  enumerable: true,
+  get: function get() {
+    return _Guidebanner.GuidebannerElement;
+  }
+});
+Object.defineProperty(exports, "GuidebannerElementButton", {
+  enumerable: true,
+  get: function get() {
+    return _Guidebanner.GuidebannerElementButton;
+  }
+});
+Object.defineProperty(exports, "GuidebannerElementLink", {
+  enumerable: true,
+  get: function get() {
+    return _Guidebanner.GuidebannerElementLink;
+  }
+});
 Object.defineProperty(exports, "HTTPError403", {
   enumerable: true,
   get: function get() {
@@ -189,6 +213,24 @@ Object.defineProperty(exports, "ImportModal", {
     return _ImportModal.ImportModal;
   }
 });
+Object.defineProperty(exports, "InlineTip", {
+  enumerable: true,
+  get: function get() {
+    return _InlineTip.InlineTip;
+  }
+});
+Object.defineProperty(exports, "InlineTipButton", {
+  enumerable: true,
+  get: function get() {
+    return _InlineTip.InlineTipButton;
+  }
+});
+Object.defineProperty(exports, "InlineTipLink", {
+  enumerable: true,
+  get: function get() {
+    return _InlineTip.InlineTipLink;
+  }
+});
 Object.defineProperty(exports, "MultiAddSelect", {
   enumerable: true,
   get: function get() {
@@ -207,6 +249,12 @@ Object.defineProperty(exports, "NoTagsEmptyState", {
     return _EmptyStates.NoTagsEmptyState;
   }
 });
+Object.defineProperty(exports, "NonLinearReading", {
+  enumerable: true,
+  get: function get() {
+    return _NonLinearReading.NonLinearReading;
+  }
+});
 Object.defineProperty(exports, "NotFoundEmptyState", {
   enumerable: true,
   get: function get() {
@@ -502,4 +550,7 @@ var _EditTearsheet = require("./EditTearsheet");
 var _EditTearsheetNarrow = require("./EditTearsheetNarrow");
 var _EditFullPage = require("./EditFullPage");
 var _EditUpdateCards = require("./EditUpdateCards");
-var _Checklist = require("./Checklist");
+var _Checklist = require("./Checklist");
+var _Guidebanner = require("./Guidebanner");
+var _InlineTip = require("./InlineTip");
+var _NonLinearReading = require("./NonLinearReading");

package/lib/global/js/package-settings.js

@@ -83,6 +83,8 @@ var defaults = {
     GuidebannerElementButton: false,
     GuidebannerElementLink: false,
     InlineTip: false,
+    InlineTipButton: false,
+    InlineTipLink: false,
     NonLinearReading: false
   },
   // feature level flags

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.18.1",
+  "version": "2.19.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -64,7 +64,7 @@
     "fs-extra": "^11.1.1",
     "glob": "^10.3.3",
     "jest": "^29.6.2",
-    "jest-config-ibm-cloud-cognitive": "^1.1.1",
+    "jest-config-ibm-cloud-cognitive": "^1.1.2",
     "jest-environment-jsdom": "^29.6.2",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.11.1",
@@ -75,7 +75,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.10",
-    "@carbon/ibm-products-styles": "^2.18.1",
+    "@carbon/ibm-products-styles": "^2.19.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^7.0.2",
@@ -90,11 +90,11 @@
     "@carbon/grid": "^11.21.1",
     "@carbon/layout": "^11.20.1",
     "@carbon/motion": "^11.16.1",
-    "@carbon/react": "^1.44.0",
+    "@carbon/react": "^1.45.0",
     "@carbon/themes": "^11.28.0",
     "@carbon/type": "^11.25.1",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "4a34fee5addc455edeac8059d69612d8e29af52b"
+  "gitHead": "f6ae5df043ae6ddd25d75daefccaa7c0d8ed426b"
 }

package/scss/components/Card/_card.scss

@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/utilities';
 
 $block-class: #{c4p-settings.$pkg-prefix}--card;
 
@@ -25,6 +26,10 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   transition: background-color $duration-fast-02;
 }
 
+.#{$block-class}__clickable:focus {
+  @include utilities.focus-outline('outline');
+}
+
 .#{$block-class}__clickable:hover {
   background-color: $layer-hover-01;
 }
@@ -52,6 +57,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
 
 .#{$block-class}__header {
   padding: $spacing-05;
+  padding-right: 0; // makes for consistent slug position across productive and expressive
 }
 
 .#{$block-class}__header-label-only {
@@ -121,3 +127,86 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
   padding-top: $spacing-05;
   padding-left: $spacing-05;
 }
+
+.#{$block-class}__header-container--has-actions {
+  padding-right: $spacing-03;
+}
+
+// +++ adjustments for slug
+.#{$block-class} {
+  position: relative;
+}
+
+.#{$block-class}__media + .#{$block-class}__content-container {
+  /* display relative to container when media displayed */
+  position: relative;
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--slug {
+  @include utilities.callout-gradient();
+
+  position: absolute;
+  top: $spacing-05;
+  right: $spacing-05;
+}
+
+.#{$block-class}__header-container--has-slug {
+  width: 100%;
+  padding-right: $spacing-07;
+}
+
+.#{$block-class}__header-container--has-slug.#{$block-class}__header-container--has-actions {
+  padding-right: $spacing-08;
+}
+
+.#{$block-class}__header-container--has-slug.#{$block-class}__header-container--large-tile-or-label {
+  padding-right: $spacing-09;
+}
+
+.#{$block-class}__clickable {
+  position: relative;
+}
+
+.#{$block-class}__clickable .#{c4p-settings.$carbon-prefix}--slug,
+.#{$block-class}__clickable .#{c4p-settings.$carbon-prefix}--slug-icon {
+  pointer-events: none;
+}
+
+.#{$block-class}--has-slug {
+  @include utilities.callout-gradient();
+
+  border: 1px solid $border-tile;
+}
+
+.#{$block-class}__clickable.#{$block-class}--has-slug::before {
+  @include utilities.callout-gradient('hover');
+
+  position: absolute;
+  display: block;
+  block-size: 100%;
+  content: '';
+  inline-size: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  opacity: 0;
+  transition: opacity $duration-fast-02 motion(standard, productive);
+}
+
+.#{$block-class}__clickable.#{$block-class}--has-slug:hover::before {
+  opacity: 1;
+}
+
+.#{$block-class}__clickable .#{$block-class}__content-container {
+  position: relative;
+  z-index: 1;
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--slug-icon rect {
+  stroke: $icon-primary;
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--slug-icon path {
+  fill: $icon-primary;
+}
+
+// --- adjustments for slug