@carbon/ibm-products 2.19.2 → 2.20.0

package/es/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js

@@ -1,55 +1,77 @@
+/**
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { DURATIONS, EASINGS } from '../../../../../../global/js/utils/motionConstants';
 import { ACTION_SET_HEIGHT, PANEL_WIDTH } from '../constants';
 export var panelVariants = {
-  hidden: {
-    width: 0,
-    overflow: 'hidden',
-    transition: {
-      duration: DURATIONS.fast02,
-      ease: EASINGS.productive.exit,
-      when: 'afterChildren'
-    }
+  hidden: function hidden(shouldReduceMotion) {
+    return {
+      width: 0,
+      overflow: 'hidden',
+      transition: {
+        duration: shouldReduceMotion ? 0 : DURATIONS.fast02,
+        ease: shouldReduceMotion ? 0 : EASINGS.productive.exit,
+        when: 'afterChildren'
+      }
+    };
   },
-  visible: {
-    width: PANEL_WIDTH,
-    overflow: 'visible',
-    transition: {
-      duration: DURATIONS.moderate02,
-      ease: EASINGS.productive.entrance,
-      when: 'beforeChildren'
-    }
+  visible: function visible(shouldReduceMotion) {
+    return {
+      width: PANEL_WIDTH,
+      overflow: 'visible',
+      transition: {
+        duration: shouldReduceMotion ? 0 : DURATIONS.moderate02,
+        ease: shouldReduceMotion ? 0 : EASINGS.productive.entrance,
+        when: 'beforeChildren'
+      }
+    };
   }
 };
 export var innerContainerVariants = {
-  hidden: {
-    opacity: 0,
-    transition: {
-      duration: DURATIONS.fast01,
-      ease: EASINGS.productive.exit
-    }
+  hidden: function hidden(shouldReduceMotion) {
+    return {
+      opacity: 0,
+      transition: {
+        duration: shouldReduceMotion ? DURATIONS.moderate01 : DURATIONS.fast01,
+        ease: shouldReduceMotion ? 0 : EASINGS.productive.exit
+      }
+    };
   },
-  visible: {
-    opacity: 1,
-    transition: {
-      duration: DURATIONS.fast02,
-      ease: EASINGS.productive.entrance,
-      when: 'beforeChildren'
-    }
+  visible: function visible(shouldReduceMotion) {
+    return {
+      opacity: 1,
+      transition: {
+        duration: shouldReduceMotion ? DURATIONS.moderate01 : DURATIONS.fast02,
+        ease: shouldReduceMotion ? 0 : EASINGS.productive.entrance,
+        when: shouldReduceMotion ? null : 'beforeChildren'
+      }
+    };
   }
 };
 export var actionSetVariants = {
-  hidden: {
-    y: ACTION_SET_HEIGHT,
-    transition: {
-      duration: DURATIONS.fast01,
-      ease: EASINGS.productive.exit
-    }
+  hidden: function hidden(shouldReduceMotion) {
+    return {
+      y: shouldReduceMotion ? 0 : ACTION_SET_HEIGHT,
+      opacity: shouldReduceMotion ? 0 : 1,
+      transition: {
+        duration: shouldReduceMotion ? DURATIONS.moderate01 : DURATIONS.fast01,
+        ease: shouldReduceMotion ? 0 : EASINGS.productive.exit
+      }
+    };
   },
-  visible: {
-    y: 0,
-    transition: {
-      duration: DURATIONS.fast02,
-      ease: EASINGS.productive.entrance
-    }
+  visible: function visible(shouldReduceMotion) {
+    return {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: shouldReduceMotion ? DURATIONS.moderate01 : DURATIONS.fast02,
+        ease: shouldReduceMotion ? 0 : EASINGS.productive.entrance,
+        delay: shouldReduceMotion ? 0.075 : 0
+      }
+    };
   }
 };

package/es/components/SidePanel/SidePanel.js

@@ -34,6 +34,7 @@ import { Button } from '@carbon/react';
 import { Close, ArrowLeft } from '@carbon/react/icons';
 import { ActionSet } from '../ActionSet';
 import { overlayVariants, panelVariants } from './motion/variants';
+import pconsole from '../../global/js/utils/pconsole';
 var blockClass = "".concat(pkg.prefix, "--side-panel");
 var componentName = 'SidePanel';
 
@@ -345,7 +346,11 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   useEffect(function () {
     if (open && slideIn) {
       var pageContentElement = document.querySelector(selectorPageContent);
-      pageContentElement.style.inlineSize = 'auto';
+      if (pageContentElement) {
+        pageContentElement.style.inlineSize = 'auto';
+      } else {
+        pconsole.warn('SidePanel prop `selectorPageContent` was not provided a selector that matches any element on your page. If an element is not found, the panel will render as a slide over.');
+      }
       if (placement && placement === 'right' && pageContentElement) {
         pageContentElement.style.marginInlineEnd = 0;
         pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-end ".concat(moderate02) : null;

package/es/components/Tearsheet/TearsheetShell.js

@@ -122,7 +122,7 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }
   handleStackChange.checkFocus = function () {
     // if we are now the topmost tearsheet, ensure we have focus
-    if (position === depth && modalRef.current && !modalRef.current.contains(document.activeElement)) {
+    if (open && position === depth && modalRef.current && !modalRef.current.contains(document.activeElement)) {
       handleStackChange.claimFocus();
     }
   };

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

@@ -18,11 +18,12 @@ var _settings = require("../../../../../settings");
 var _ActionSet = require("../../../../ActionSet");
 var _constants = require("./constants");
 var _hooks2 = require("./hooks");
+var _layout = require("@carbon/layout");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // @flow
 /**
- * Copyright IBM Corp. 2022, 2023
+ * Copyright IBM Corp. 2022, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -62,6 +63,10 @@ var FilterFlyout = function FilterFlyout(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
+  var _useState3 = (0, _react2.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    stackedLayout = _useState4[0],
+    setStackedLayout = _useState4[1];
   var _useFilters = (0, _hooks2.useFilters)({
       updateMethod: updateMethod,
       filters: filters,
@@ -78,9 +83,13 @@ var FilterFlyout = function FilterFlyout(_ref) {
     renderFilter = _useFilters.renderFilter,
     filtersObjectArray = _useFilters.filtersObjectArray,
     lastAppliedFilters = _useFilters.lastAppliedFilters;
+  var width = _layout.breakpoints.md.width;
+  var mdPxWidth = parseInt(width) * 16;
 
   /** Refs */
   var filterFlyoutRef = (0, _react2.useRef)(null);
+  var flyoutInnerRef = (0, _react2.useRef)(null);
+  var flyoutFiltersContainerRef = (0, _react2.useRef)(null);
 
   /** State from hooks */
   var _useShouldDisableButt = (0, _hooks2.useShouldDisableButtons)({
@@ -91,6 +100,33 @@ var FilterFlyout = function FilterFlyout(_ref) {
     _useShouldDisableButt2 = (0, _slicedToArray2.default)(_useShouldDisableButt, 2),
     shouldDisableButtons = _useShouldDisableButt2[0],
     setShouldDisableButtons = _useShouldDisableButt2[1];
+  var handleResize = function handleResize(current) {
+    var filterFlyoutRefPosition = flyoutInnerRef === null || flyoutInnerRef === void 0 ? void 0 : flyoutInnerRef.current.getBoundingClientRect();
+    var originalFlyoutWidth = parseInt(window.getComputedStyle(flyoutInnerRef === null || flyoutInnerRef === void 0 ? void 0 : flyoutInnerRef.current).getPropertyValue('width'));
+    // Check to see if left value from flyout getBoundingClientRect is a negative number
+    // If it is, that is the amount we need to subtract from the flyout width
+    if (Math.sign(filterFlyoutRefPosition.left) === -1) {
+      var newFlyoutWidth = originalFlyoutWidth - Math.abs(filterFlyoutRefPosition.left);
+      flyoutInnerRef.current.style.width = (0, _layout.px)(newFlyoutWidth);
+    }
+    // Check to see if left value from flyout getBoundingClientRect is a positive number or 0
+    // If it is, that is the amount we need to add to the flyout width until we reach the
+    // max-width of the flyout (642)
+    if (originalFlyoutWidth < 642 && Math.sign(filterFlyoutRefPosition.left) === 1 || Math.sign(filterFlyoutRefPosition.left).toString() === '0') {
+      var _newFlyoutWidth = originalFlyoutWidth + Math.abs(filterFlyoutRefPosition.left);
+      flyoutInnerRef.current.style.width = (0, _layout.px)(_newFlyoutWidth);
+    }
+    // Begin stacking filters at this specific point
+    if ((current === null || current === void 0 ? void 0 : current.innerWidth) <= mdPxWidth + 254) {
+      setStackedLayout(true);
+    } else {
+      setStackedLayout(false);
+    }
+  };
+  (0, _hooks.useWindowResize)(function (_ref2) {
+    var current = _ref2.current;
+    handleResize(current);
+  });
 
   /** Memos */
   var showActionSet = updateMethod === _constants.BATCH;
@@ -104,7 +140,12 @@ var FilterFlyout = function FilterFlyout(_ref) {
   var closeFlyout = function closeFlyout() {
     setOpen(false);
     onFlyoutClose();
+    flyoutInnerRef.current.style.width = (0, _layout.px)(642);
   };
+  (0, _react2.useEffect)(function () {
+    // Initialize flyout width
+    flyoutInnerRef.current.style.width = (0, _layout.px)(642);
+  }, []);
   var apply = function apply() {
     setAllFilters(filtersObjectArray);
     closeFlyout();
@@ -172,13 +213,15 @@ var FilterFlyout = function FilterFlyout(_ref) {
     className: (0, _classnames.default)("".concat(componentClass, "__trigger"), (0, _defineProperty2.default)({}, "".concat(componentClass, "__trigger--open"), open)),
     disabled: data.length === 0
   }, /*#__PURE__*/_react2.default.createElement(_icons.Filter, null)), /*#__PURE__*/_react2.default.createElement("div", {
-    className: (0, _classnames.default)(componentClass, (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(componentClass, "--open"), open), (0, _defineProperty2.default)(_cx2, "".concat(componentClass, "--batch"), showActionSet), (0, _defineProperty2.default)(_cx2, "".concat(componentClass, "--instant"), !showActionSet), _cx2))
+    className: (0, _classnames.default)(componentClass, (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(componentClass, "--open"), open), (0, _defineProperty2.default)(_cx2, "".concat(componentClass, "--batch"), showActionSet), (0, _defineProperty2.default)(_cx2, "".concat(componentClass, "--instant"), !showActionSet), _cx2)),
+    ref: flyoutInnerRef
   }, /*#__PURE__*/_react2.default.createElement("div", {
     className: "".concat(componentClass, "__inner-container")
   }, /*#__PURE__*/_react2.default.createElement("span", {
     className: "".concat(componentClass, "__title")
   }, title), /*#__PURE__*/_react2.default.createElement("div", {
-    className: "".concat(componentClass, "__filters")
+    className: (0, _classnames.default)("".concat(componentClass, "__filters"), (0, _defineProperty2.default)({}, "".concat(componentClass, "__stacked"), stackedLayout)),
+    ref: flyoutFiltersContainerRef
   }, renderFilters())), renderActionSet()));
 };
 FilterFlyout.propTypes = {

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

@@ -25,7 +25,7 @@ var _layout = require("@carbon/layout");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
- * Copyright IBM Corp. 2022, 2023
+ * Copyright IBM Corp. 2022, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -117,6 +117,7 @@ var FilterPanel = function FilterPanel(_ref) {
     _useShouldDisableButt2 = (0, _slicedToArray2.default)(_useShouldDisableButt, 2),
     shouldDisableButtons = _useShouldDisableButt2[0],
     setShouldDisableButtons = _useShouldDisableButt2[1];
+  var shouldReduceMotion = (0, _framerMotion.useReducedMotion)();
 
   /** Memos */
   var showActionSet = (0, _react2.useMemo)(function () {
@@ -159,6 +160,7 @@ var FilterPanel = function FilterPanel(_ref) {
       }],
       className: "".concat(componentClass, "__action-set"),
       ref: actionSetRef,
+      custom: shouldReduceMotion,
       variants: _variants.actionSetVariants
     });
   };
@@ -196,8 +198,10 @@ var FilterPanel = function FilterPanel(_ref) {
     className: (0, _classnames.default)(componentClass, "".concat(componentClass, "__container"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(componentClass, "--open"), panelOpen), (0, _defineProperty2.default)(_cx, "".concat(componentClass, "--batch"), showActionSet), (0, _defineProperty2.default)(_cx, "".concat(componentClass, "--instant"), !showActionSet), _cx)),
     initial: false,
     animate: panelOpen ? 'visible' : 'hidden',
+    custom: shouldReduceMotion,
     variants: _variants.panelVariants
   }, /*#__PURE__*/_react2.default.createElement(_framerMotion.motion.div, {
+    custom: shouldReduceMotion,
     variants: _variants.innerContainerVariants
   }, /*#__PURE__*/_react2.default.createElement("header", {
     ref: filterHeadingRef,

package/lib/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js

@@ -6,56 +6,78 @@ Object.defineProperty(exports, "__esModule", {
 exports.panelVariants = exports.innerContainerVariants = exports.actionSetVariants = void 0;
 var _motionConstants = require("../../../../../../global/js/utils/motionConstants");
 var _constants = require("../constants");
+/**
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 var panelVariants = exports.panelVariants = {
-  hidden: {
-    width: 0,
-    overflow: 'hidden',
-    transition: {
-      duration: _motionConstants.DURATIONS.fast02,
-      ease: _motionConstants.EASINGS.productive.exit,
-      when: 'afterChildren'
-    }
+  hidden: function hidden(shouldReduceMotion) {
+    return {
+      width: 0,
+      overflow: 'hidden',
+      transition: {
+        duration: shouldReduceMotion ? 0 : _motionConstants.DURATIONS.fast02,
+        ease: shouldReduceMotion ? 0 : _motionConstants.EASINGS.productive.exit,
+        when: 'afterChildren'
+      }
+    };
   },
-  visible: {
-    width: _constants.PANEL_WIDTH,
-    overflow: 'visible',
-    transition: {
-      duration: _motionConstants.DURATIONS.moderate02,
-      ease: _motionConstants.EASINGS.productive.entrance,
-      when: 'beforeChildren'
-    }
+  visible: function visible(shouldReduceMotion) {
+    return {
+      width: _constants.PANEL_WIDTH,
+      overflow: 'visible',
+      transition: {
+        duration: shouldReduceMotion ? 0 : _motionConstants.DURATIONS.moderate02,
+        ease: shouldReduceMotion ? 0 : _motionConstants.EASINGS.productive.entrance,
+        when: 'beforeChildren'
+      }
+    };
   }
 };
 var innerContainerVariants = exports.innerContainerVariants = {
-  hidden: {
-    opacity: 0,
-    transition: {
-      duration: _motionConstants.DURATIONS.fast01,
-      ease: _motionConstants.EASINGS.productive.exit
-    }
+  hidden: function hidden(shouldReduceMotion) {
+    return {
+      opacity: 0,
+      transition: {
+        duration: shouldReduceMotion ? _motionConstants.DURATIONS.moderate01 : _motionConstants.DURATIONS.fast01,
+        ease: shouldReduceMotion ? 0 : _motionConstants.EASINGS.productive.exit
+      }
+    };
   },
-  visible: {
-    opacity: 1,
-    transition: {
-      duration: _motionConstants.DURATIONS.fast02,
-      ease: _motionConstants.EASINGS.productive.entrance,
-      when: 'beforeChildren'
-    }
+  visible: function visible(shouldReduceMotion) {
+    return {
+      opacity: 1,
+      transition: {
+        duration: shouldReduceMotion ? _motionConstants.DURATIONS.moderate01 : _motionConstants.DURATIONS.fast02,
+        ease: shouldReduceMotion ? 0 : _motionConstants.EASINGS.productive.entrance,
+        when: shouldReduceMotion ? null : 'beforeChildren'
+      }
+    };
   }
 };
 var actionSetVariants = exports.actionSetVariants = {
-  hidden: {
-    y: _constants.ACTION_SET_HEIGHT,
-    transition: {
-      duration: _motionConstants.DURATIONS.fast01,
-      ease: _motionConstants.EASINGS.productive.exit
-    }
+  hidden: function hidden(shouldReduceMotion) {
+    return {
+      y: shouldReduceMotion ? 0 : _constants.ACTION_SET_HEIGHT,
+      opacity: shouldReduceMotion ? 0 : 1,
+      transition: {
+        duration: shouldReduceMotion ? _motionConstants.DURATIONS.moderate01 : _motionConstants.DURATIONS.fast01,
+        ease: shouldReduceMotion ? 0 : _motionConstants.EASINGS.productive.exit
+      }
+    };
   },
-  visible: {
-    y: 0,
-    transition: {
-      duration: _motionConstants.DURATIONS.fast02,
-      ease: _motionConstants.EASINGS.productive.entrance
-    }
+  visible: function visible(shouldReduceMotion) {
+    return {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: shouldReduceMotion ? _motionConstants.DURATIONS.moderate01 : _motionConstants.DURATIONS.fast02,
+        ease: shouldReduceMotion ? 0 : _motionConstants.EASINGS.productive.entrance,
+        delay: shouldReduceMotion ? 0.075 : 0
+      }
+    };
   }
 };

package/lib/components/SidePanel/SidePanel.js

@@ -26,6 +26,7 @@ var _react2 = require("@carbon/react");
 var _icons = require("@carbon/react/icons");
 var _ActionSet = require("../ActionSet");
 var _variants = require("./motion/variants");
+var _pconsole = _interopRequireDefault(require("../../global/js/utils/pconsole"));
 var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title"],
   _excluded2 = ["label", "kind", "icon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
 /**
@@ -352,7 +353,11 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
   (0, _react.useEffect)(function () {
     if (open && slideIn) {
       var pageContentElement = document.querySelector(selectorPageContent);
-      pageContentElement.style.inlineSize = 'auto';
+      if (pageContentElement) {
+        pageContentElement.style.inlineSize = 'auto';
+      } else {
+        _pconsole.default.warn('SidePanel prop `selectorPageContent` was not provided a selector that matches any element on your page. If an element is not found, the panel will render as a slide over.');
+      }
       if (placement && placement === 'right' && pageContentElement) {
         pageContentElement.style.marginInlineEnd = 0;
         pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-end ".concat(_motion.moderate02) : null;

package/lib/components/Tearsheet/TearsheetShell.js

@@ -128,7 +128,7 @@ var TearsheetShell = exports.TearsheetShell = /*#__PURE__*/_react.default.forwar
   }
   handleStackChange.checkFocus = function () {
     // if we are now the topmost tearsheet, ensure we have focus
-    if (position === depth && modalRef.current && !modalRef.current.contains(document.activeElement)) {
+    if (open && position === depth && modalRef.current && !modalRef.current.contains(document.activeElement)) {
       handleStackChange.claimFocus();
     }
   };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.19.2",
+  "version": "2.20.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -75,7 +75,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.10",
-    "@carbon/ibm-products-styles": "^2.19.1",
+    "@carbon/ibm-products-styles": "^2.20.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^7.0.2",
@@ -91,11 +91,11 @@
     "@carbon/grid": "^11.21.1",
     "@carbon/layout": "^11.20.1",
     "@carbon/motion": "^11.16.1",
-    "@carbon/react": "^1.45.0",
+    "@carbon/react": "^1.46.1",
     "@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": "6947a5b9d0e07a7a3d8e39abe152329e87200896"
+  "gitHead": "d97c3273a61bd1ee38cc29be2b7dd82609fd1c2b"
 }

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -279,6 +279,13 @@
   }
 }
 
+.#{$block-class}__empty-state
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr:not([data-child-row]):hover {
+  background: inherit;
+}
+
 .#{$block-class}__empty-state .#{$block-class}__table-simple tr:hover {
   background: transparent;
 }
@@ -375,6 +382,7 @@
 
 .#{$block-class}__head-hidden-select-all {
   padding-right: $spacing-09;
+
   &.#{$block-class}__select-all-sticky-left {
     position: sticky;
     z-index: 1;

package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss

@@ -1,10 +1,9 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2022
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
+//
+// Copyright IBM Corp. 2022, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
 
 // stylelint-disable carbon/layout-token-use
 
@@ -82,7 +81,7 @@ $action-set-height: to-rem(64px);
   display: grid;
   /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   gap: to-rem(16px) rem(32px);
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }
 
 // Carbon overrides
@@ -104,3 +103,7 @@ $action-set-height: to-rem(64px);
   .#{c4p-settings.$carbon-prefix}--fieldset {
   margin-bottom: 0;
 }
+
+.#{variables.$block-class}-filter-flyout__stacked {
+  grid-template-columns: 1fr;
+}

package/scss/components/SidePanel/_side-panel.scss

@@ -77,12 +77,14 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
       @include setPanelSize($size_value);
       .#{$block-class}__title-container.#{$block-class}__title-container--no-title-animation,
       .#{$block-class}__subtitle-text.#{$block-class}__subtitle-text-no-animation,
-      .#{$block-class}__action-toolbar.#{$block-class}__action-toolbar-no-animation,
-      .#{$block-class}__actions-container.#{$action-set-block-class}--#{$size} {
+      .#{$block-class}__action-toolbar.#{$block-class}__action-toolbar-no-animation {
         @include setPanelSize($size_value);
       }
     }
   }
+  .#{$block-class}__actions-container {
+    width: 100%;
+  }
   &.#{$block-class}__container-right-placement {
     right: 0;
     border-left: 1px solid $border-subtle-02;