@carbon/ibm-products 2.48.0 → 2.49.0

package/lib/components/Tearsheet/TearsheetShell.js

@@ -254,7 +254,11 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
       }
       return _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width);
     };
-    return renderPortalUse( /*#__PURE__*/React__default["default"].createElement(react.ComposedModal, _rollupPluginBabelHelpers["extends"]({}, rest, {
+    return renderPortalUse( /*#__PURE__*/React__default["default"].createElement(react.unstable_FeatureFlags, {
+      flags: {
+        'enable-experimental-focus-wrap-without-sentinels': true
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(react.ComposedModal, _rollupPluginBabelHelpers["extends"]({}, rest, {
       "aria-label": ariaLabel || getNodeTextContent.getNodeTextContent(title),
       className: cx__default["default"](bc, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
       // Don't apply this on the initial open of a single tearsheet.
@@ -321,7 +325,7 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
     })))), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "".concat(bc, "__resize-detector"),
       ref: resizer
-    })));
+    }))));
   } else {
     pconsole["default"].warn('Tearsheet not rendered: maximum stacking depth exceeded.');
     return null;

package/lib/components/Toolbar/ToolbarButton.d.ts

@@ -13,8 +13,12 @@ export interface ToolbarButtonProps extends React.ComponentProps<typeof IconButt
     caret?: boolean;
     /** Provide an optional class to be applied to the containing node */
     className?: string;
+    /**
+     * @deprecated use `label` instead
+     * Specifies the label for the icon button */
+    iconDescription?: string;
     /** Specifies the label for the icon button */
-    iconDescription: string;
+    label: string;
     /** Specifies the icon to be used by the ToolbarButton component */
     renderIcon: React.ElementType;
 }
@@ -22,3 +26,10 @@ export interface ToolbarButtonProps extends React.ComponentProps<typeof IconButt
 export declare let ToolbarButton: React.ForwardRefExoticComponent<ToolbarButtonProps & {
     children?: React.ReactNode;
 } & React.RefAttributes<unknown>>;
+export declare const deprecatedProps: {
+    /**
+     * **Deprecated**
+     * Specifies the label for the icon button
+     *  */
+    iconDescription: import("prop-types").Requireable<string>;
+};

package/lib/components/Toolbar/ToolbarButton.js

@@ -22,7 +22,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["caret", "children", "className", "renderIcon", "iconDescription"];
+var _excluded = ["caret", "children", "className", "renderIcon", "iconDescription", "label"];
 var blockClass = "".concat(Toolbar.blockClass, "__button");
 /** Toolbar buttons are common functions performed as part of a products interface or an open window.  */
 exports.ToolbarButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -33,13 +33,14 @@ exports.ToolbarButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className = _ref.className,
     renderIcon = _ref.renderIcon,
     _ref$iconDescription = _ref.iconDescription,
-    iconDescription = _ref$iconDescription === void 0 ? '' : _ref$iconDescription,
+    deprecated_iconDescription = _ref$iconDescription === void 0 ? '' : _ref$iconDescription,
+    label = _ref.label,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var Icon = renderIcon;
   return /*#__PURE__*/React__default["default"].createElement(react.IconButton, _rollupPluginBabelHelpers["extends"]({
     align: (_useContext = React.useContext(Toolbar.ToolbarContext)) !== null && _useContext !== void 0 && _useContext.vertical ? 'right' : 'top'
   }, rest, {
-    label: iconDescription,
+    label: label !== null && label !== void 0 ? label : deprecated_iconDescription,
     ref: ref,
     className: cx__default["default"](className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--caret"), caret)),
     kind: "ghost",
@@ -50,7 +51,14 @@ exports.ToolbarButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 var componentName = 'ToolbarButton';
 exports.ToolbarButton.displayName = componentName;
-exports.ToolbarButton.propTypes = {
+var deprecatedProps = {
+  /**
+   * **Deprecated**
+   * Specifies the label for the icon button
+   *  */
+  iconDescription: index.propTypesExports.string
+};
+exports.ToolbarButton.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /** Determines whether the caret is rendered */
   caret: index.propTypesExports.bool,
   /** Provide the content of the `ToolbarButton` */
@@ -58,10 +66,11 @@ exports.ToolbarButton.propTypes = {
   /** Provide an optional class to be applied to the containing node */
   className: index.propTypesExports.string,
   /** Specifies the label for the icon button */
-  iconDescription: index.propTypesExports.string.isRequired,
+  label: index.propTypesExports.string.isRequired,
   /** Specifies the icon to be used by the ToolbarButton component */
   renderIcon: index.propTypesExports.func.isRequired
-};
+}, deprecatedProps);
 exports.ToolbarButton = settings.pkg.checkComponentEnabled(exports.ToolbarButton, componentName);
 
 exports.blockClass = blockClass;
+exports.deprecatedProps = deprecatedProps;

package/lib/global/js/hooks/useFocus.d.ts

@@ -4,7 +4,7 @@ export function useFocus(modalRef: any, selectorPrimaryFocus: any): {
     lastElement: any;
     allElements: any;
     specifiedElement: any;
-    keyDownListener: (event: any) => void;
+    keyDownListener: (event: any) => Promise<void>;
     getFocusable: () => {
         first: any;
         last: any;

package/lib/global/js/hooks/useFocus.js

@@ -9,9 +9,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var react = require('@carbon/react');
 var settings = require('../../../settings.js');
 var React = require('react');
+var wait = require('../utils/wait.js');
 
 var getSpecificElement = function getSpecificElement(parentEl, elementId) {
   var element = parentEl === null || parentEl === void 0 ? void 0 : parentEl.querySelector(elementId);
@@ -20,6 +22,7 @@ var getSpecificElement = function getSpecificElement(parentEl, elementId) {
 var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
   var carbonPrefix = react.usePrefix();
   var tearsheetBaseClass = "".concat(settings.pkg.prefix, "--tearsheet");
+  var sidePanelBaseClass = "".concat(settings.pkg.prefix, "--side-panel");
   // Querying focusable element in the modal
   // Query to exclude hidden elements in the modal from querySelectorAll() method
   // feel free to include more if needed :)
@@ -31,8 +34,9 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
   var queryTextarea = "textarea".concat(notQuery);
   var queryLink = "[href]".concat(notQuery);
   var queryTabIndex = "[tabindex=\"0\"]".concat(notQuery);
+  var querySidePanelScroll = ".".concat(sidePanelBaseClass, "--scrolls");
   // Final query
-  var query = "".concat(queryButton, ",").concat(queryLink, ",").concat(queryInput, ",").concat(querySelect, ",").concat(queryTextarea, ", ").concat(queryTabIndex);
+  var query = "".concat(queryButton, ",").concat(queryLink, ",").concat(queryInput, ",").concat(querySelect, ",").concat(queryTextarea, ",").concat(queryTabIndex, ",").concat(querySidePanelScroll);
   var modalEl = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current;
   var getFocusable = React.useCallback(function () {
     var _focusableElements, _focusableElements2, _focusableElements3, _focusableElements4;
@@ -58,30 +62,42 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
   React.useEffect(function () {
     getFocusable();
   }, [getFocusable]);
-  var handleKeyDown = function handleKeyDown(event) {
-    // Checking whether the key is tab or not
-    if (event.key === 'Tab') {
-      // updating the focusable elements list
-      var _getFocusable = getFocusable(),
-        first = _getFocusable.first,
-        last = _getFocusable.last,
-        all = _getFocusable.all;
-      setTimeout(function () {
-        var _document, _document2;
-        if (event.shiftKey && !Array.prototype.includes.call(all, (_document = document) === null || _document === void 0 ? void 0 : _document.activeElement)) {
-          // Prevents the default "Tab" behavior
-          event.preventDefault();
-          // if the user press shift+tab and the current element not in focusable items
-          last === null || last === void 0 || last.focus();
-        } else if (!Array.prototype.includes.call(all, (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.activeElement)) {
-          event.preventDefault();
-          // user pressing tab key only then
-          // focusing the first element if the current element is not in focusable items
-          first === null || first === void 0 || first.focus();
+  var handleKeyDown = /*#__PURE__*/function () {
+    var _ref = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(event) {
+      var _document, _document2, _getFocusable, first, last, all;
+      return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(event.key === 'Tab')) {
+              _context.next = 5;
+              break;
+            }
+            // updating the focusable elements list
+            _getFocusable = getFocusable(), first = _getFocusable.first, last = _getFocusable.last, all = _getFocusable.all;
+            _context.next = 4;
+            return wait["default"](1);
+          case 4:
+            if (event.shiftKey && !Array.prototype.includes.call(all, (_document = document) === null || _document === void 0 ? void 0 : _document.activeElement)) {
+              // Prevents the default "Tab" behavior
+              event.preventDefault();
+              // if the user press shift+tab and the current element not in focusable items
+              last === null || last === void 0 || last.focus();
+            } else if (!Array.prototype.includes.call(all, (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.activeElement)) {
+              event.preventDefault();
+              // user pressing tab key only then
+              // focusing the first element if the current element is not in focusable items
+              first === null || first === void 0 || first.focus();
+            }
+          case 5:
+          case "end":
+            return _context.stop();
         }
-      }, 0);
-    }
-  };
+      }, _callee);
+    }));
+    return function handleKeyDown(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
   return {
     firstElement: getFocusable().first,
     lastElement: getFocusable().last,

package/lib/global/js/utils/keyboardNavigation.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Various utilities to help with a11y work
+ */
+/**
+ * A flag `node.compareDocumentPosition(target)` returns,
+ * that indicates `target` is located earlier than `node` in the document or `target` contains `node`.
+ */
+export const DOCUMENT_POSITION_BROAD_PRECEDING: number | false;
+/**
+ * A flag `node.compareDocumentPosition(target)` returns,
+ * that indicates `target` is located later than `node` in the document or `node` contains `target`.
+ */
+export const DOCUMENT_POSITION_BROAD_FOLLOWING: number | false;
+/**
+ * CSS selector that selects major nodes that are sequential-focusable.
+ */
+export const selectorTabbable: "\n  a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n  textarea:not([disabled]):not([tabindex='-1']),\n  iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]\n";
+/**
+ * CSS selector that selects major nodes that are click focusable
+ */
+export const selectorFocusable: "\n  a[href], area[href], input:not([disabled]),\n  button:not([disabled]),select:not([disabled]),\n  textarea:not([disabled]),\n  iframe, object, embed, *[tabindex]:not([disabled]), *[contenteditable=true]\n";

package/lib/global/js/utils/keyboardNavigation.js

@@ -0,0 +1,43 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * Various utilities to help with a11y work
+ */
+
+/**
+ * A flag `node.compareDocumentPosition(target)` returns,
+ * that indicates `target` is located earlier than `node` in the document or `target` contains `node`.
+ */
+var DOCUMENT_POSITION_BROAD_PRECEDING =
+// Checks `typeof Node` for `react-docgen`
+typeof Node !== 'undefined' &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
+
+/**
+ * A flag `node.compareDocumentPosition(target)` returns,
+ * that indicates `target` is located later than `node` in the document or `node` contains `target`.
+ */
+var DOCUMENT_POSITION_BROAD_FOLLOWING =
+// Checks `typeof Node` for `react-docgen`
+typeof Node !== 'undefined' &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
+
+/**
+ * CSS selector that selects major nodes that are sequential-focusable.
+ */
+var selectorTabbable = "\n  a[href], area[href], input:not([disabled]):not([tabindex='-1']),\n  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),\n  textarea:not([disabled]):not([tabindex='-1']),\n  iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]\n";
+
+exports.DOCUMENT_POSITION_BROAD_FOLLOWING = DOCUMENT_POSITION_BROAD_FOLLOWING;
+exports.DOCUMENT_POSITION_BROAD_PRECEDING = DOCUMENT_POSITION_BROAD_PRECEDING;
+exports.selectorTabbable = selectorTabbable;

package/lib/global/js/utils/wrapFocus.d.ts

@@ -0,0 +1,25 @@
+export default wrapFocus;
+/**
+ * @param {Node} node A DOM node.
+ * @param {string[]} selectorsFloatingMenus The CSS selectors that matches floating menus.
+ * @returns {boolean} `true` of the given `node` is in a floating menu.
+ */
+export function elementOrParentIsFloatingMenu(node: Node, selectorsFloatingMenus?: string[]): boolean;
+/**
+ * Ensures the focus is kept in the given `modalNode`, implementing "focus-wrap" behavior.
+ * @param {object} options The options.
+ * @param {Node|null} options.bodyNode The DOM node of the inner modal.
+ * @param {Node|null} options.startTrapNode The DOM node of the focus sentinel the is placed earlier next to `modalNode`.
+ * @param {Node|null} options.endTrapNode The DOM node of the focus sentinel the is placed next to `modalNode`.
+ * @param {Node} options.currentActiveNode The DOM node that has focus.
+ * @param {Node} options.oldActiveNode The DOM node that previously had focus.
+ * @param {string[]} [options.selectorsFloatingMenus] The CSS selectors that matches floating menus
+ */
+declare function wrapFocus({ bodyNode, startTrapNode, endTrapNode, currentActiveNode, oldActiveNode, selectorsFloatingMenus, }: {
+    bodyNode: Node | null;
+    startTrapNode: Node | null;
+    endTrapNode: Node | null;
+    currentActiveNode: Node;
+    oldActiveNode: Node;
+    selectorsFloatingMenus?: string[] | undefined;
+}): void;

package/lib/global/js/utils/wrapFocus.js

@@ -0,0 +1,73 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var keyboardNavigation = require('./keyboardNavigation.js');
+var settings = require('../../../settings.js');
+
+/**
+ * @param {Node} node A DOM node.
+ * @param {string[]} selectorsFloatingMenus The CSS selectors that matches floating menus.
+ * @returns {boolean} `true` of the given `node` is in a floating menu.
+ */
+function elementOrParentIsFloatingMenu(node) {
+  var selectorsFloatingMenus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [".".concat(settings.carbon.prefix, "--overflow-menu-options"), ".".concat(settings.carbon.prefix, "--tooltip"), '.flatpickr-calendar'];
+  if (node && typeof node.closest === 'function') {
+    return selectorsFloatingMenus.some(function (selector) {
+      return node.closest(selector);
+    });
+  }
+}
+
+/**
+ * Ensures the focus is kept in the given `modalNode`, implementing "focus-wrap" behavior.
+ * @param {object} options The options.
+ * @param {Node|null} options.bodyNode The DOM node of the inner modal.
+ * @param {Node|null} options.startTrapNode The DOM node of the focus sentinel the is placed earlier next to `modalNode`.
+ * @param {Node|null} options.endTrapNode The DOM node of the focus sentinel the is placed next to `modalNode`.
+ * @param {Node} options.currentActiveNode The DOM node that has focus.
+ * @param {Node} options.oldActiveNode The DOM node that previously had focus.
+ * @param {string[]} [options.selectorsFloatingMenus] The CSS selectors that matches floating menus
+ */
+function wrapFocus(_ref) {
+  var bodyNode = _ref.bodyNode,
+    startTrapNode = _ref.startTrapNode,
+    endTrapNode = _ref.endTrapNode,
+    currentActiveNode = _ref.currentActiveNode,
+    oldActiveNode = _ref.oldActiveNode,
+    selectorsFloatingMenus = _ref.selectorsFloatingMenus;
+  if (bodyNode && currentActiveNode && oldActiveNode && !bodyNode.contains(currentActiveNode) && !elementOrParentIsFloatingMenu(currentActiveNode, selectorsFloatingMenus)) {
+    var comparisonResult = oldActiveNode.compareDocumentPosition(currentActiveNode);
+    if (currentActiveNode === startTrapNode || comparisonResult & keyboardNavigation.DOCUMENT_POSITION_BROAD_PRECEDING) {
+      var arrayNodes = Array.from(bodyNode.querySelectorAll(keyboardNavigation.selectorTabbable));
+      arrayNodes.reverse();
+      var tabbable = arrayNodes.find(function (elem) {
+        return Boolean(elem.offsetParent);
+      });
+      if (tabbable) {
+        tabbable.focus();
+      } else if (bodyNode !== oldActiveNode) {
+        bodyNode.focus();
+      }
+    } else if (currentActiveNode === endTrapNode || comparisonResult & keyboardNavigation.DOCUMENT_POSITION_BROAD_FOLLOWING) {
+      var _tabbable = Array.prototype.find.call(bodyNode.querySelectorAll(keyboardNavigation.selectorTabbable), function (elem) {
+        return Boolean(elem.offsetParent);
+      });
+      if (_tabbable) {
+        _tabbable.focus();
+      } else if (bodyNode !== oldActiveNode) {
+        bodyNode.focus();
+      }
+    }
+  }
+}
+
+exports["default"] = wrapFocus;
+exports.elementOrParentIsFloatingMenu = elementOrParentIsFloatingMenu;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.48.0",
+  "version": "2.49.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -81,7 +81,7 @@
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.7.0",
+    "jest-config-ibm-cloud-cognitive": "^1.8.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.14.12",
@@ -96,7 +96,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.20.0",
-    "@carbon/ibm-products-styles": "^2.44.0",
+    "@carbon/ibm-products-styles": "^2.45.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -120,5 +120,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "514156a0773ff9b00dc9800a70e054f2bf910531"
+  "gitHead": "95d97ad48ee76f9785bce8ebf59661ad140443cb"
 }

package/scss/components/ConditionBuilder/_condition-builder.scss

@@ -61,7 +61,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   margin-top: $spacing-03;
   margin-bottom: $spacing-03;
 }
-.#{$block-class}__tree
+.#{$block-class}__Hierarchical
   .#{$block-class}__actions-container
   .#{$block-class}__condition-wrapper {
   flex-direction: column;

package/scss/components/ConditionBuilder/styles/_conditionBuilderItem.scss

@@ -54,7 +54,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 }
 
 .#{$block-class}__item-option__option {
-  height: 2rem;
+  display: grid;
+  min-height: 2rem;
   cursor: pointer;
   padding-inline: $spacing-05;
 }
@@ -204,7 +205,7 @@ $colors: (
   .#{$block-class}__group-preview[data-color-index='#{($i%list.length($colors))}']
     button {
     /* stylelint-disable-next-line carbon/theme-token-use */
-    $next-group-color: list.nth($colors, ($i%list.length($colors)) +1);
+    $next-group-color: list.nth($colors, (($i%list.length($colors)) + 1));
     /* stylelint-disable-next-line carbon/theme-token-use */
     box-shadow: inset 0 #{$spacing-01} 0 0 list.nth($next-group-color, 1);
   }
@@ -213,7 +214,7 @@ $colors: (
   @for $el-index from 1 through 50 {
     $item-index: $el-index;
     /* stylelint-disable-next-line carbon/theme-token-use */
-    $item-index: ((($item-index - 1) % $group-colors-length) +1);
+    $item-index: ((($item-index - 1) % $group-colors-length) + 1);
     #{$selector} {
       @if $item-index != 1 {
         /* stylelint-disable-next-line carbon/theme-token-use */
@@ -231,7 +232,7 @@ $colors: (
   }
 }
 
-.#{$block-class}__tree {
+.#{$block-class}__Hierarchical {
   .#{$block-class}__condition-wrapper > :nth-child(n + 3) {
     flex-basis: 100%;
   }
@@ -263,25 +264,27 @@ $colors: (
   align-self: center;
   margin-left: auto;
 }
-.#{$block-class}__add-button-wrapper > :nth-child(1) {
-  @include actions-animation(-100%);
-}
-.#{$block-class}__add-button-wrapper > :nth-child(2) {
-  @include actions-animation(-200%);
-}
+.#{$block-class}__content-container {
+  .#{$block-class}__add-button-wrapper > :nth-child(1) {
+    @include actions-animation(-100%);
+  }
+  .#{$block-class}__add-button-wrapper > :nth-child(2) {
+    @include actions-animation(-200%);
+  }
 
-.#{$block-class}__condition-block:focus-within:first-child
-  .#{$block-class}__add-button-wrapper
-  > span,
-.#{$block-class}__condition--interacting
-  .#{$block-class}__add-button-wrapper
-  > span {
-  z-index: 0;
-  opacity: 1;
-  pointer-events: all;
-  transform: translateX(0);
-  /* stylelint-disable-next-line carbon/motion-easing-use */
-  transition: transform motion(exit, productive) $duration-fast-02;
+  .#{$block-class}__condition-block:focus-within:first-child
+    .#{$block-class}__add-button-wrapper
+    > span,
+  .#{$block-class}__condition--interacting
+    .#{$block-class}__add-button-wrapper
+    > span {
+    z-index: 0;
+    opacity: 1;
+    pointer-events: all;
+    transform: translateX(0);
+    /* stylelint-disable-next-line carbon/motion-easing-use */
+    transition: transform motion(exit, productive) $duration-fast-02;
+  }
 }
 
 .#{$block-class}__invalid-input {
@@ -295,3 +298,11 @@ $colors: (
     fill: $icon-primary;
   }
 }
+
+.#{$block-class}__statement_wrapper {
+  padding: $spacing-03 0;
+
+  :nth-child(2) {
+    color: $text-secondary;
+  }
+}

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

@@ -779,6 +779,7 @@
 }
 
 .#{$block-class} .#{c4p-settings.$pkg-prefix}--datagrid__head-wrap {
+  overflow: hidden;
   background-color: $layer-accent;
 }
 
@@ -788,6 +789,12 @@
   padding: 0;
 }
 
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--noLabel
+  svg.#{c4p-settings.$carbon-prefix}--btn__icon {
+  margin-inline-start: 0;
+}
+
 .#{$block-class}
   .#{c4p-settings.$carbon-prefix}--action-list
   .#{c4p-settings.$carbon-prefix}--btn__icon {

package/scss/components/Datagrid/styles/_useActionsColumn.scss

@@ -36,3 +36,7 @@
 .#{variables.$block-class} .#{variables.$block-class}__disabled-row-action svg {
   fill: theme.$layer-selected-disabled;
 }
+
+.#{variables.$block-class}_actions-column {
+  display: flex;
+}

package/scss/components/EditInPlace/_edit-in-place.scss

@@ -55,12 +55,12 @@ $carbon-input: #{$carbon-prefix}--text-input;
 }
 
 .#{$block-class}--invalid {
-  outline: 2px solid $support-error;
+  border: 2px solid $support-error;
 }
 
 .#{$block-class}--focused {
+  border: 2px solid $focus;
   background: $field-01;
-  outline: 2px solid $focus;
 }
 
 .#{$block-class}__text-input {

package/telemetry.yml

@@ -32,6 +32,7 @@ collect:
         - assistiveText
         - assistiveTextDisabledInstructionsLabel
         - assistiveTextInstructionsLabel
+        - autoAlign
         - backButtonText
         - backgroundColor
         - batchActionMenuButtonLabel
@@ -219,7 +220,10 @@ collect:
         - onContextMenuLabel
         - onContextMenuValue
         - onDataUpdate
+        - onFocus
         - onMount
+        - onMouseEnter
+        - onMouseLeave
         - onNext
         - onOverflowTagChange
         - onPrimaryButtonClick
@@ -343,6 +347,7 @@ collect:
         - title
         - titleSize
         - toolbarBatchActions
+        - toolbarBatchActionsDisplayMin
         - tooltipAlignment
         - tooltipText
         - totalVisibleColumns
@@ -502,7 +507,6 @@ collect:
         - toggleLabel
         - toggleLabelAlign
         # Coachmark
-        - autoAlign
         - overlayClassName
         - overlayKind
         - overlayRef
@@ -537,9 +541,6 @@ collect:
         # ConditionBuilderButton
         - hideLabel
         - isInvalid
-        - onFocus
-        - onMouseEnter
-        - onMouseLeave
         - tooltipAlign
         - wrapperClassName
         - wrapperProps
@@ -549,7 +550,11 @@ collect:
         # ConditionBuilderItemDate
         - parentRef
         # ConditionBuilderProvider
+        - actionState
         - conditionBuilderRef
+        - rootState
+        - setActionState
+        - setRootState
         # ConditionConnector
         - operator
         # ConditionPreview
@@ -1101,12 +1106,13 @@ collect:
         - radio
         - selection
         - text
+        - textarea
         # General - updateMethod
         - batch
         - instant
         # General - variant
-        - sentence
-        - tree
+        - Hierarchical
+        - Non-Hierarchical
         # General - verticalPosition
         - lower
         - normal
@@ -1129,6 +1135,9 @@ collect:
         - floating
         - stacked
         - tooltip
+        # ConditionBlock - conjunction
+        - and
+        - or
         # ConditionPreview - previewType
         - condition
         - newGroup