@carbon/ibm-products 2.49.1 → 2.50.0-rc.1

package/es/components/AboutModal/AboutModal.js

@@ -6,11 +6,12 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { ComposedModal, ModalHeader, ModalBody, Theme, ModalFooter } from '@carbon/react';
+import { unstable_FeatureFlags, ComposedModal, ModalHeader, ModalBody, Theme, ModalFooter } from '@carbon/react';
 import React__default, { useRef, useEffect } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { useFocus } from '../../global/js/hooks/useFocus.js';
 import { pkg } from '../../settings.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
@@ -45,9 +46,13 @@ var AboutModal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     version = _ref.version,
     rest = _objectWithoutProperties(_ref, _excluded);
   var bodyRef = useRef(null);
+  var localRef = useRef();
+  var modalRef = ref || localRef;
   var contentRef = useRef(null);
   var contentId = uuidv4();
   var renderPortalUse = usePortalTarget(portalTargetIn);
+  var _useFocus = useFocus(modalRef),
+    firstElement = _useFocus.firstElement;
 
   // We can't add a ref directly to the ModalBody, so track it in a ref
   // as the parent of the current bodyRef element
@@ -55,16 +60,28 @@ var AboutModal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     var _contentRef$current;
     bodyRef.current = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.parentElement;
   }, [bodyRef]);
-  return renderPortalUse( /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
+  useEffect(function () {
+    if (open) {
+      setTimeout(function () {
+        return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
+      }, 0);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+  return renderPortalUse( /*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
+    flags: {
+      'enable-experimental-focus-wrap-without-sentinels': true
+    }
+  }, /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
     className: cx(blockClass,
     // Apply the block class to the main HTML element
     className // Apply any supplied class names to the main HTML element.
     ),
-    "aria-label": modalAriaLabel
+    "aria-label": modalAriaLabel,
+    ref: modalRef
   }, _objectSpread2({
     onClose: onClose,
-    open: open,
-    ref: ref
+    open: open
   }, getDevtoolsProps(componentName))), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__logo")
   }, logo), /*#__PURE__*/React__default.createElement(ModalHeader, {
@@ -95,7 +112,7 @@ var AboutModal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     theme: "g100"
   }, /*#__PURE__*/React__default.createElement(ModalFooter, {
     className: "".concat(blockClass, "__footer")
-  }, additionalInfo))));
+  }, additionalInfo)))));
 });
 
 // Return a placeholder if not released and not enabled by feature flag

package/es/components/ActionBar/ActionBar.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, ForwardedRef } from 'react';
 import { ButtonProps } from '@carbon/type';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 interface Action extends ButtonProps {
@@ -49,6 +49,10 @@ interface ActionBarProps extends PropsWithChildren {
      * overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
      */
     overflowAriaLabel: string;
+    /**
+     * overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
+     */
+    overflowMenuRef?: ForwardedRef<HTMLDivElement>;
     /**
      * align tags to right of available space
      */

package/es/components/ActionBar/ActionBar.js

@@ -17,7 +17,7 @@ import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { ActionBarItem } from './ActionBarItem.js';
 import { ActionBarOverflowItems } from './ActionBarOverflowItems.js';
 
-var _excluded = ["actions", "className", "maxVisible", "menuOptionsClass", "onWidthChange", "overflowAriaLabel", "rightAlign"],
+var _excluded = ["actions", "className", "maxVisible", "menuOptionsClass", "onWidthChange", "overflowAriaLabel", "overflowMenuRef", "rightAlign"],
   _excluded2 = ["key", "id"],
   _excluded3 = ["key"];
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -41,6 +41,7 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     menuOptionsClass = _ref.menuOptionsClass,
     onWidthChange = _ref.onWidthChange,
     overflowAriaLabel = _ref.overflowAriaLabel,
+    overflowMenuRef = _ref.overflowMenuRef,
     rightAlign = _ref.rightAlign,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(0),
@@ -72,6 +73,7 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(ActionBarOverflowItems, {
       className: "".concat(blockClass, "__hidden-sizing-item"),
       overflowAriaLabel: "hidden sizing overflow items",
+      overflowMenuRef: overflowMenuRef,
       overflowItems: [],
       key: "hidden-overflow-menu",
       tabIndex: -1
@@ -87,7 +89,7 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         tabIndex: -1
       }));
     }))));
-  }, [actions]);
+  }, [actions, overflowMenuRef]);
 
   // creates displayed items based on actions, displayCount and alignment
   useEffect(function () {
@@ -108,12 +110,13 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       newDisplayedItems.push( /*#__PURE__*/React__default.createElement(ActionBarOverflowItems, {
         menuOptionsClass: menuOptionsClass,
         overflowAriaLabel: overflowAriaLabel,
+        overflowMenuRef: overflowMenuRef,
         overflowItems: newOverflowItems,
         key: "overflow-menu-".concat(internalId.current)
       }));
     }
     setDisplayedItems(newDisplayedItems);
-  }, [actions, displayCount, overflowAriaLabel, menuOptionsClass]);
+  }, [actions, displayCount, overflowAriaLabel, menuOptionsClass, overflowMenuRef]);
 
   // determine display count based on space available and width of pageActions
   var checkFullyVisibleItems = function checkFullyVisibleItems() {
@@ -250,6 +253,13 @@ ActionBar.propTypes = {
    * overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
    */
   overflowAriaLabel: PropTypes.string.isRequired,
+  /**
+   * overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
+   */
+  /**@ts-ignore */
+  overflowMenuRef: PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.object]),
   /**
    * align tags to right of available space
    */

package/es/components/ActionBar/ActionBarOverflowItems.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren, ReactElement } from 'react';
+import { PropsWithChildren, ReactElement, ForwardedRef } from 'react';
 import PropTypes from 'prop-types';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 type OverflowItem = {
@@ -16,9 +16,13 @@ interface ActionBarOverflowItemProps extends PropsWithChildren {
      */
     menuOptionsClass?: string;
     /**
-     * overflowAriaLabel label for open close button overflow used for action bar items that do nto fit.
+     * overflowAriaLabel label for open close button overflow used for action bar items that do not fit.
      */
     overflowAriaLabel?: string;
+    /**
+     * overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
+     */
+    overflowMenuRef?: ForwardedRef<HTMLDivElement>;
     /**
      * overflowItems: items to bre shown in the ActionBar overflow menu
      */
@@ -29,7 +33,7 @@ interface ActionBarOverflowItemProps extends PropsWithChildren {
     tabIndex?: number;
 }
 export declare const ActionBarOverflowItems: {
-    ({ className, menuOptionsClass, overflowItems, overflowAriaLabel, }: ActionBarOverflowItemProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, menuOptionsClass, overflowItems, overflowAriaLabel, overflowMenuRef, }: ActionBarOverflowItemProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
     propTypes: {
         /**
@@ -48,6 +52,11 @@ export declare const ActionBarOverflowItems: {
          * overflowItems: items to bre shown in the ActionBar overflow menu
          */
         overflowItems: PropTypes.Requireable<(PropTypes.ReactElementLike | null | undefined)[]>;
+        /**
+         * overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
+         */
+        /**@ts-ignore */
+        overflowMenuRef: PropTypes.Requireable<object>;
         /**
          * Optional tab index
          */

package/es/components/ActionBar/ActionBarOverflowItems.js

@@ -19,9 +19,12 @@ var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
   var className = _ref.className,
     menuOptionsClass = _ref.menuOptionsClass,
     overflowItems = _ref.overflowItems,
-    overflowAriaLabel = _ref.overflowAriaLabel;
+    overflowAriaLabel = _ref.overflowAriaLabel,
+    overflowMenuRef = _ref.overflowMenuRef;
   var internalId = useRef(uuidv4());
-  return /*#__PURE__*/React__default.createElement(OverflowMenu, {
+  return /*#__PURE__*/React__default.createElement("div", {
+    ref: overflowMenuRef
+  }, /*#__PURE__*/React__default.createElement(OverflowMenu, {
     "aria-label": overflowAriaLabel,
     className: cx(blockClass, className),
     direction: "bottom",
@@ -45,7 +48,7 @@ var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
         id: "".concat(internalId.current, "-").concat(index, "--item-label")
       }, item === null || item === void 0 ? void 0 : item.props.label), typeof (item === null || item === void 0 ? void 0 : item.props.renderIcon) === 'function' ? /*#__PURE__*/React__default.createElement(ItemIcon, null) : item === null || item === void 0 ? void 0 : item.props.renderIcon)
     });
-  }));
+  })));
 };
 ActionBarOverflowItems.displayName = componentName;
 ActionBarOverflowItems.propTypes = {
@@ -66,6 +69,13 @@ ActionBarOverflowItems.propTypes = {
    * overflowItems: items to bre shown in the ActionBar overflow menu
    */
   overflowItems: PropTypes.arrayOf(PropTypes.element),
+  /**
+   * overflowMenuRef for the overflow menu width that is needed to calculate the width of the action bar with overflow
+   */
+  /**@ts-ignore */
+  overflowMenuRef: PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.object]),
   /**
    * Optional tab index
    */

package/es/components/Carousel/Carousel.js

@@ -267,8 +267,7 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     tabIndex: -1,
     className: cx(blockClass, className),
-    ref: carouselRef,
-    role: "main"
+    ref: carouselRef
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
     className: cx("".concat(blockClass, "__elements-container"))
   }, /*#__PURE__*/React__default.createElement("div", {

package/es/components/Coachmark/CoachmarkDragbar.js

@@ -84,7 +84,6 @@ var CoachmarkDragbar = /*#__PURE__*/React__default.forwardRef(function (_ref, re
       // example: [`${blockClass}__here-if-small`]: size === 'sm',
     }),
     ref: ref
-    // role="main"
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     className: "".concat(overlayBlockClass, "__handle"),

package/es/components/Coachmark/CoachmarkHeader.js

@@ -43,7 +43,6 @@ var CoachmarkHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   return /*#__PURE__*/React__default.createElement("header", _extends({}, rest, {
     className: cx(blockClass, "".concat(blockClass, "__").concat(theme)),
     ref: ref
-    // role="main"
   }, getDevtoolsProps(componentName)), showCloseButton && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(overlayBlockClass, "--close-btn-container")
   }, /*#__PURE__*/React__default.createElement(Button, {

package/es/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js

@@ -39,7 +39,6 @@ var CoachmarkOverlayElement = /*#__PURE__*/React__default.forwardRef(function (_
       // example: [`${blockClass}__here-if-small`]: size === 'sm',
     }),
     ref: ref
-    // role="main"
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__content")
   }, title && /*#__PURE__*/React__default.createElement("h2", {

package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js

@@ -111,7 +111,6 @@ var CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef(function (
       // example: [`${blockClass}__here-if-small`]: size === 'sm',
     }),
     ref: ref
-    // role="main"
   }, getDevtoolsProps(componentName)), media && (media.render ? media.render() : /*#__PURE__*/React__default.createElement(SteppedAnimatedMedia, {
     className: "".concat(blockClass, "__element-stepped-media"),
     filePaths: media.filePaths,

package/es/components/CoachmarkStack/CoachmarkStackHome.js

@@ -80,8 +80,7 @@ var CoachmarkStackHome = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }
   return portalNode !== null && portalNode !== void 0 && portalNode.current ? /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass, className),
-    ref: ref,
-    role: "main"
+    ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(CoachmarkHeader, {
     onClose: function onClose() {
       setLinkFocusIndex(0);

package/es/components/ConditionBuilder/ConditionBuilder.js

@@ -80,7 +80,6 @@ var ConditionBuilder = /*#__PURE__*/React__default.forwardRef(function (_ref, re
       // switched classes dependant on props or state
       // example: [`${blockClass}__here-if-small`]: size === 'sm',
     }),
-    role: "main",
     ref: conditionBuilderRef
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(VStack, {
     className: "".concat(blockClass, "__").concat(variant),
@@ -171,8 +170,7 @@ ConditionBuilder.propTypes = {
   }),
   /**
    * This is a mandatory prop that defines the input to the condition builder.
-   
-   */
+    */
   /**@ts-ignore */
   inputConfig: PropTypes.shape({
     properties: PropTypes.arrayOf(PropTypes.shape({

package/es/components/CreateTearsheet/CreateTearsheet.d.ts

@@ -5,8 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { Dispatch, PropsWithChildren, ReactNode, SetStateAction } from 'react';
+import { ExperimentalSecondarySubmit } from './CreateTearsheetStep';
 export interface StepsContextType {
     currentStep: number;
+    setExperimentalSecondarySubmit: Dispatch<SetStateAction<ExperimentalSecondarySubmit>>;
     setIsDisabled: Dispatch<SetStateAction<boolean>>;
     setOnPrevious: (fn: any) => void;
     setOnNext: (fn: any) => void;
@@ -32,6 +34,10 @@ export interface CreateTearsheetProps extends PropsWithChildren {
      * An optional class or classes to be added to the outermost element.
      */
     className?: string;
+    /**
+     * The experimentalSecondary submit button text
+     */
+    experimentalSecondarySubmitText?: string;
     /**
      * A description of the flow, displayed in the header area of the tearsheet.
      */

package/es/components/CreateTearsheet/CreateTearsheet.js

@@ -22,7 +22,7 @@ import { useResetCreateComponent } from '../../global/js/hooks/useResetCreateCom
 import { useCreateComponentStepChange } from '../../global/js/hooks/useCreateComponentStepChange.js';
 import { CreateInfluencer } from '../CreateInfluencer/CreateInfluencer.js';
 
-var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "firstFocusElement", "slug", "submitButtonText", "title", "verticalPosition"];
+var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "experimentalSecondarySubmitText", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "firstFocusElement", "slug", "submitButtonText", "title", "verticalPosition"];
 var componentName = 'CreateTearsheet';
 var blockClass = "".concat(pkg.prefix, "--tearsheet-create");
 
@@ -40,6 +40,7 @@ var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     cancelButtonText = _ref.cancelButtonText,
     children = _ref.children,
     className = _ref.className,
+    experimentalSecondarySubmitText = _ref.experimentalSecondarySubmitText,
     description = _ref.description,
     _ref$influencerWidth = _ref.influencerWidth,
     influencerWidth = _ref$influencerWidth === void 0 ? 'narrow' : _ref$influencerWidth,
@@ -104,6 +105,10 @@ var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState24 = _slicedToArray(_useState23, 2),
     lastIncludedStep = _useState24[0],
     setLastIncludedStep = _useState24[1];
+  var _useState25 = useState({}),
+    _useState26 = _slicedToArray(_useState25, 2),
+    experimentalSecondarySubmit = _useState26[0],
+    setExperimentalSecondarySubmit = _useState26[1];
   var previousState = usePreviousValue({
     currentStep: currentStep,
     open: open
@@ -170,6 +175,8 @@ var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     nextButtonText: nextButtonText,
     isSubmitting: isSubmitting,
     componentBlockClass: blockClass,
+    experimentalSecondarySubmit: experimentalSecondarySubmit,
+    experimentalSecondarySubmitText: experimentalSecondarySubmit.labelText ? experimentalSecondarySubmit.labelText : experimentalSecondarySubmitText,
     setCreateComponentActions: setCreateTearsheetActions
   });
   return /*#__PURE__*/React__default.createElement(TearsheetShell, _extends({}, getDevtoolsProps(componentName), rest, {
@@ -198,6 +205,7 @@ var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React__default.createElement(StepsContext.Provider, {
     value: {
       currentStep: currentStep,
+      setExperimentalSecondarySubmit: setExperimentalSecondarySubmit,
       setIsDisabled: setIsDisabled,
       setOnPrevious: function setOnPrevious(fn) {
         return _setOnPrevious(function () {
@@ -254,6 +262,10 @@ CreateTearsheet.propTypes = {
    * A description of the flow, displayed in the header area of the tearsheet.
    */
   description: PropTypes.node,
+  /**
+   * The experimentalSecondary submit button text
+   */
+  experimentalSecondarySubmitText: PropTypes.string,
   /**
    * Specifies elements to focus on first on render.
    */

package/es/components/CreateTearsheet/CreateTearsheetStep.d.ts

@@ -49,6 +49,10 @@ interface CreateTearsheetStepBaseProps extends PropsWithChildren {
      * This will conditionally disable the submit button in the multi step Tearsheet
      */
     disableSubmit?: boolean;
+    /**
+     * Configuration options for customizing the behavior of the experimentalSecondary submit button.
+     */
+    experimentalSecondarySubmit?: ExperimentalSecondarySubmit;
     /**
      * This prop is used to help track dynamic steps. If this value is `false` then the step is not included in the visible steps or the ProgressIndicator
      * steps. If this value is `true` then the step will be included in the list of visible steps, as well as being included in the ProgressIndicator step list
@@ -91,5 +95,19 @@ interface CreateTearsheetStepBaseProps extends PropsWithChildren {
     title: React.ReactNode;
 }
 type CreateTearsheetStepProps = CreateTearsheetStepBaseProps & fieldsetLegendTextProps;
+/**
+ * Configuration options for customizing the behavior of the experimentalSecondary submit button.
+ *
+ * @property {string} [labelText] - Optional text to replace the default button text.
+ * @property {boolean} [disabled] - If true, the button will be disabled and not clickable.
+ * @property {boolean} [hideSecondarySubmit] - If true, the button will be hidden from view.
+ * @property {() => void} [onClick] - Optional click handler function to be executed when the button is clicked.
+ */
+export type ExperimentalSecondarySubmit = {
+    labelText?: string;
+    disabled?: boolean;
+    hideSecondarySubmit?: boolean;
+    onClick?: () => void;
+};
 export declare let CreateTearsheetStep: React.ForwardRefExoticComponent<CreateTearsheetStepProps & React.RefAttributes<unknown>>;
 export {};

package/es/components/CreateTearsheet/CreateTearsheetStep.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useRef, useContext, useState, useEffect, isValidElement } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
@@ -16,7 +16,7 @@ import pconsole from '../../global/js/utils/pconsole.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useRetrieveStepData } from '../../global/js/hooks/useRetrieveStepData.js';
 
-var _excluded = ["children", "className", "description", "disableSubmit", "fieldsetLegendText", "hasFieldset", "includeStep", "introStep", "invalid", "onMount", "onNext", "onPrevious", "secondaryLabel", "subtitle", "title"];
+var _excluded = ["children", "className", "description", "disableSubmit", "experimentalSecondarySubmit", "fieldsetLegendText", "hasFieldset", "includeStep", "introStep", "invalid", "onMount", "onNext", "onPrevious", "secondaryLabel", "subtitle", "title"];
 var componentName = 'CreateTearsheetStep';
 var blockClass = "".concat(pkg.prefix, "--tearsheet-create__step");
 
@@ -25,11 +25,22 @@ var defaults = {
   hasFieldset: true,
   includeStep: true
 };
+
+/**
+ * Configuration options for customizing the behavior of the experimentalSecondary submit button.
+ *
+ * @property {string} [labelText] - Optional text to replace the default button text.
+ * @property {boolean} [disabled] - If true, the button will be disabled and not clickable.
+ * @property {boolean} [hideSecondarySubmit] - If true, the button will be hidden from view.
+ * @property {() => void} [onClick] - Optional click handler function to be executed when the button is clicked.
+ */
+
 var CreateTearsheetStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     description = _ref.description,
     disableSubmit = _ref.disableSubmit,
+    experimentalSecondarySubmit = _ref.experimentalSecondarySubmit,
     fieldsetLegendText = _ref.fieldsetLegendText,
     _ref$hasFieldset = _ref.hasFieldset,
     hasFieldset = _ref$hasFieldset === void 0 ? defaults.hasFieldset : _ref$hasFieldset,
@@ -71,8 +82,9 @@ var CreateTearsheetStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
   useEffect(function () {
     if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep) && (previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
       stepsContext === null || stepsContext === void 0 || stepsContext.setOnMount(onMount);
+      stepsContext === null || stepsContext === void 0 || stepsContext.setExperimentalSecondarySubmit(_objectSpread2({}, experimentalSecondarySubmit));
     }
-  }, [onMount, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]);
+  }, [onMount, experimentalSecondarySubmit, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]);
 
   // Used to take the `includeStep` prop and use it as a local state value
   useEffect(function () {
@@ -163,6 +175,21 @@ CreateTearsheetStep.propTypes = {
    * This will conditionally disable the submit button in the multi step Tearsheet
    */
   disableSubmit: PropTypes.bool,
+  /**
+   * Configuration options for customizing the behavior of the experimentalSecondary submit button.
+   *
+   * @property {string} [labelText] - Optional text to replace the default button text.
+   * @property {boolean} [disabled] - If true, the button will be disabled and not clickable.
+   * @property {boolean} [hideSecondarySubmit] - If true, the button will be hidden from view.
+   * @property {() => void} [onClick] - Optional click handler function to be executed when the button is clicked.
+   */
+  /**@ts-ignore*/
+  experimentalSecondarySubmit: PropTypes.shape({
+    labelText: PropTypes.string,
+    disabled: PropTypes.bool,
+    hideSecondarySubmit: PropTypes.bool,
+    onClick: PropTypes.func
+  }),
   /**
    * This is the required legend text that appears above a fieldset html element for accessibility purposes.
    * You can set the `hasFieldset` prop to false if you have multiple fieldset elements or want to control the children of your Full Page's step content.

package/es/components/Datagrid/Datagrid/DatagridContent.js

@@ -159,7 +159,10 @@ var DatagridContent = function DatagridContent(_ref) {
       className: "".concat(blockClass, "__filter-summary"),
       filters: filterTags,
       clearFilters: function clearFilters() {
-        return EventEmitter.dispatch(CLEAR_FILTERS, tableId);
+        EventEmitter.dispatch(CLEAR_FILTERS, tableId);
+        if (typeof (filterProps === null || filterProps === void 0 ? void 0 : filterProps.onClearFilters) === 'function') {
+          filterProps.onClearFilters();
+        }
       },
       renderLabel: filterProps === null || filterProps === void 0 ? void 0 : filterProps.renderLabel,
       overflowType: "tag"

package/es/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -10,7 +10,7 @@ import React__default, { useState, useLayoutEffect } from 'react';
 import { TableSelectAll } from '@carbon/react';
 import cx from 'classnames';
 import { pkg } from '../../../settings.js';
-import { handleSelectAllRowData } from './addons/stateReducer.js';
+import { handleOnPageSelectAllRowData } from './addons/stateReducer.js';
 
 var _excluded = ["onChange"];
 var blockClass = "".concat(pkg.prefix, "--datagrid");
@@ -45,7 +45,6 @@ var SelectAll = function SelectAll(datagridState) {
     dispatch = datagridState.dispatch,
     rows = datagridState.rows,
     getRowId = datagridState.getRowId,
-    toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
     onAllRowSelect = datagridState.onAllRowSelect;
   var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
   if (hideSelectAll || radio) {
@@ -59,24 +58,8 @@ var SelectAll = function SelectAll(datagridState) {
     onChange = _ref.onChange,
     selectProps = _objectWithoutProperties(_ref, _excluded);
   var indeterminate = selectProps.indeterminate;
-  var handleSelectAllChange = function handleSelectAllChange(event) {
-    if (indeterminate) {
-      handleSelectAllRowData({
-        dispatch: dispatch,
-        rows: rows,
-        getRowId: getRowId,
-        indeterminate: true,
-        isChecked: undefined
-      });
-      toggleAllRowsSelected(false);
-      onAllRowSelect === null || onAllRowSelect === void 0 || onAllRowSelect(rows, event);
-      return onChange === null || onChange === void 0 ? void 0 : onChange({
-        target: {
-          checked: false
-        }
-      });
-    }
-    handleSelectAllRowData({
+  var handleOnPageSelectAllChange = function handleOnPageSelectAllChange(event) {
+    handleOnPageSelectAllRowData({
       dispatch: dispatch,
       rows: rows,
       getRowId: getRowId,
@@ -90,7 +73,7 @@ var SelectAll = function SelectAll(datagridState) {
     className: cx("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), _defineProperty({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), /* istanbul ignore next */
     isFirstColumnStickyLeft && Number(windowSize) > 671)),
     name: "".concat(tableId, "-select-all-checkbox-name"),
-    onSelect: handleSelectAllChange,
+    onSelect: handleOnPageSelectAllChange,
     disabled: isFetching || (selectProps === null || selectProps === void 0 ? void 0 : selectProps.disabled),
     id: "".concat(tableId, "-select-all-checkbox-id")
   }));

package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -68,10 +68,15 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
 
   // Sync the scrollLeft position of the virtual body to the table header
   useEffect(function () {
+    var _document;
+    var headWrapEl = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector("#".concat(tableId, " .").concat(blockClass, "__head-wrap"));
+    var headEle = headWrapEl === null || headWrapEl === void 0 ? void 0 : headWrapEl.querySelector("thead");
+    if (headEle) {
+      headEle.style.display = 'flex';
+    } // scrollbar width to header column to fix header alignment
+
     function handleScroll(event) {
-      var _document;
       var virtualBody = event.target;
-      var headWrapEl = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector("#".concat(tableId, " .").concat(blockClass, "__head-wrap"));
       if (headWrapEl) {
         headWrapEl.scrollLeft = virtualBody === null || virtualBody === void 0 ? void 0 : virtualBody.scrollLeft;
       }

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

@@ -31,6 +31,9 @@ var defaults = {
   secondaryActionLabel: 'Cancel',
   align: 'bottom'
 };
+
+// Use same empty array every time, for benefit of useEffect() etc. dependency checking.
+var emptyArray = [];
 var FilterFlyout = function FilterFlyout(_ref) {
   var updateMethod = _ref.updateMethod,
     _ref$flyoutIconDescri = _ref.flyoutIconDescription,
@@ -38,7 +41,7 @@ var FilterFlyout = function FilterFlyout(_ref) {
     _ref$align = _ref.align,
     align = _ref$align === void 0 ? defaults.align : _ref$align,
     _ref$filters = _ref.filters,
-    filters = _ref$filters === void 0 ? [] : _ref$filters,
+    filters = _ref$filters === void 0 ? emptyArray : _ref$filters,
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? defaults.title : _ref$title,
     _ref$primaryActionLab = _ref.primaryActionLabel,
@@ -55,9 +58,9 @@ var FilterFlyout = function FilterFlyout(_ref) {
     secondaryActionLabel = _ref$secondaryActionL === void 0 ? defaults.secondaryActionLabel : _ref$secondaryActionL,
     setAllFilters = _ref.setAllFilters,
     _ref$data = _ref.data,
-    data = _ref$data === void 0 ? [] : _ref$data,
+    data = _ref$data === void 0 ? emptyArray : _ref$data,
     _ref$reactTableFilter = _ref.reactTableFiltersState,
-    reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter;
+    reactTableFiltersState = _ref$reactTableFilter === void 0 ? emptyArray : _ref$reactTableFilter;
   /** State */
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),

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

@@ -34,6 +34,9 @@ var defaults = {
   searchLabelText: 'Filter search',
   searchPlaceholder: 'Find filters'
 };
+
+// Use same empty array every time, for benefit of useEffect() etc. dependency checking.
+var emptyArray = [];
 var FilterPanel = function FilterPanel(_ref) {
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? defaults.title : _ref$title,
@@ -63,7 +66,7 @@ var FilterPanel = function FilterPanel(_ref) {
     _ref$searchPlaceholde = _ref.searchPlaceholder,
     searchPlaceholder = _ref$searchPlaceholde === void 0 ? defaults.searchPlaceholder : _ref$searchPlaceholde,
     _ref$reactTableFilter = _ref.reactTableFiltersState,
-    reactTableFiltersState = _ref$reactTableFilter === void 0 ? [] : _ref$reactTableFilter,
+    reactTableFiltersState = _ref$reactTableFilter === void 0 ? emptyArray : _ref$reactTableFilter,
     _ref$autoHideFilters = _ref.autoHideFilters,
     autoHideFilters = _ref$autoHideFilters === void 0 ? false : _ref$autoHideFilters,
     _ref$isFetching = _ref.isFetching,

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

@@ -16,10 +16,12 @@ import { handleCheckboxChange } from '../handleCheckboxChange.js';
 import uuidv4 from '../../../../../../global/js/utils/uuidv4.js';
 import { usePreviousValue } from '../../../../../../global/js/hooks/usePreviousValue.js';
 
+// Use same empty array every time, for benefit of useEffect() etc. dependency checking.
+var emptyArray = [];
 var useFilters = function useFilters(_ref) {
   var updateMethod = _ref.updateMethod,
     _ref$filters = _ref.filters,
-    filters = _ref$filters === void 0 ? [] : _ref$filters,
+    filters = _ref$filters === void 0 ? emptyArray : _ref$filters,
     setAllFilters = _ref.setAllFilters,
     variation = _ref.variation,
     reactTableFiltersState = _ref.reactTableFiltersState,