@carbon/ibm-products 2.54.0-canary.4 → 2.54.0-canary.40

package/es/components/APIKeyModal/APIKeyModal.js

@@ -17,10 +17,11 @@ import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { isRequiredIf } from '../../global/js/utils/props-helper.js';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
-import { useFocus, getSpecificElement } from '../../global/js/hooks/useFocus.js';
+import { useFocus, claimFocus } from '../../global/js/hooks/useFocus.js';
+import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 
 var _ErrorFilled, _InformationFilled;
-var _excluded = ["apiKey", "apiKeyLabel", "apiKeyName", "body", "className", "closeButtonText", "copyButtonText", "copyErrorText", "copyIconDescription", "customSteps", "downloadBodyText", "downloadFileName", "downloadFileType", "downloadLinkText", "downloadLinkLabel", "editButtonText", "editSuccess", "editSuccessTitle", "editing", "error", "errorText", "generateButtonText", "generateSuccessBody", "generateSuccessTitle", "generateTitle", "hasAPIKeyVisibilityToggle", "hasDownloadLink", "hideAPIKeyLabel", "loading", "loadingText", "modalLabel", "nameHelperText", "nameLabel", "namePlaceholder", "nameRequired", "nextStepButtonText", "onClose", "onCopy", "onRequestEdit", "onRequestGenerate", "open", "portalTarget", "previousStepButtonText", "selectorPrimaryFocus", "showAPIKeyLabel"];
+var _excluded = ["apiKey", "apiKeyLabel", "apiKeyName", "body", "className", "closeButtonText", "copyButtonText", "copyErrorText", "copyIconDescription", "customSteps", "downloadBodyText", "downloadFileName", "downloadFileType", "downloadLinkText", "downloadLinkLabel", "editButtonText", "editSuccess", "editSuccessTitle", "editing", "error", "errorText", "generateButtonText", "generateSuccessBody", "generateSuccessTitle", "generateTitle", "hasAPIKeyVisibilityToggle", "hasDownloadLink", "hideAPIKeyLabel", "launcherButtonRef", "loading", "loadingText", "modalLabel", "nameHelperText", "nameLabel", "namePlaceholder", "nameRequired", "nextStepButtonText", "onClose", "onCopy", "onRequestEdit", "onRequestGenerate", "open", "portalTarget", "previousStepButtonText", "selectorPrimaryFocus", "showAPIKeyLabel"];
 var componentName = 'APIKeyModal';
 
 // Default values for props
@@ -61,6 +62,7 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     hasAPIKeyVisibilityToggle = _ref.hasAPIKeyVisibilityToggle,
     hasDownloadLink = _ref.hasDownloadLink,
     hideAPIKeyLabel = _ref.hideAPIKeyLabel,
+    launcherButtonRef = _ref.launcherButtonRef,
     loading = _ref.loading,
     loadingText = _ref.loadingText,
     modalLabel = _ref.modalLabel,
@@ -118,6 +120,7 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _useFocus = useFocus(modalRef, selectorPrimaryFocus),
     firstElement = _useFocus.firstElement,
     keyDownListener = _useFocus.keyDownListener;
+  var prevOpen = usePreviousValue(open);
   useEffect(function () {
     if (copyRef.current && open && apiKeyLoaded) {
       copyRef.current.focus();
@@ -126,21 +129,16 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   useEffect(function () {
     if (open) {
       // Focusing the first element or selectorPrimaryFocus element
-      if (selectorPrimaryFocus && getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
-        var _window;
-        var specifiedEl = getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
-        if (specifiedEl && ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(specifiedEl)) === null || _window === void 0 ? void 0 : _window.display) !== 'none') {
-          setTimeout(function () {
-            return specifiedEl.focus();
-          }, 0);
-          return;
-        }
-      }
+      claimFocus(firstElement, modalRef, selectorPrimaryFocus);
+    }
+  }, [firstElement, modalRef, open, selectorPrimaryFocus]);
+  useEffect(function () {
+    if (prevOpen && !open && launcherButtonRef) {
       setTimeout(function () {
-        firstElement === null || firstElement === void 0 || firstElement.focus();
+        launcherButtonRef.current.focus();
       }, 0);
     }
-  }, [firstElement, modalRef, open, selectorPrimaryFocus]);
+  }, [launcherButtonRef, open, prevOpen]);
   var isPrimaryButtonDisabled = function isPrimaryButtonDisabled() {
     if (loading) {
       return true;
@@ -486,6 +484,11 @@ APIKeyModal.propTypes = {
    * label text that's displayed when hovering over visibility toggler to hide key
    */
   hideAPIKeyLabel: PropTypes.string,
+  /**
+   * Provide a ref to return focus to once the tearsheet is closed.
+   */
+  /**@ts-ignore */
+  launcherButtonRef: PropTypes.any,
   /**
    * designates if the modal is in a loading state via a request or some other in progress operation
    */

package/es/components/APIKeyModal/APIKeyModal.types.d.ts

@@ -4,7 +4,7 @@
  * 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 { ReactNode } from 'react';
+import { ReactNode, RefObject } from 'react';
 interface APIKeyModalCommonProps {
     /**
      * the api key that's displayed to the user when a request to create is fulfilled.
@@ -92,6 +92,10 @@ interface APIKeyModalCommonProps {
      * label text that's displayed when hovering over visibility toggler to hide key
      */
     hideAPIKeyLabel?: string;
+    /**
+     * Provide a ref to return focus to once the tearsheet is closed.
+     */
+    launcherButtonRef?: RefObject<any>;
     /**
      * designates if the modal is in a loading state via a request or some other in progress operation
      */

package/es/components/AboutModal/AboutModal.js

@@ -11,7 +11,7 @@ import React__default, { useRef, useEffect } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
-import { useFocus } from '../../global/js/hooks/useFocus.js';
+import { useFocus, claimFocus } 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';
@@ -62,12 +62,9 @@ var AboutModal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }, [bodyRef]);
   useEffect(function () {
     if (open) {
-      setTimeout(function () {
-        return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
-      }, 0);
+      claimFocus(firstElement, modalRef);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
+  }, [firstElement, modalRef, open]);
   return renderPortalUse( /*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
     enableExperimentalFocusWrapWithoutSentinels: true
   }, /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {

package/es/components/AddSelect/hooks/useFocus.js

@@ -36,6 +36,5 @@ var useFocus = function useFocus(size) {
   }, [handleKeyDown]);
   return [currentFocus, setCurrentFocus];
 };
-var useFocus$1 = useFocus;
 
-export { useFocus$1 as default };
+export { useFocus as default };

package/es/components/AddSelect/hooks/useParentSelect.js

@@ -18,6 +18,5 @@ var useParentSelect = function useParentSelect() {
     setParentSelected: setParentSelected
   };
 };
-var useParentSelect$1 = useParentSelect;
 
-export { useParentSelect$1 as default };
+export { useParentSelect as default };

package/es/components/AddSelect/hooks/usePath.js

@@ -66,6 +66,5 @@ var usePath = function usePath() {
     resetPath: resetPath
   };
 };
-var usePath$1 = usePath;
 
-export { usePath$1 as default };
+export { usePath as default };

package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -10,7 +10,7 @@ import React__default, { useState, useRef, useEffect } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
-import { usePrefix, Breadcrumb, BreadcrumbItem, OverflowMenu, Link, Tooltip, OverflowMenuItem } from '@carbon/react';
+import { usePrefix, Breadcrumb, BreadcrumbItem, OverflowMenu, Link, Tooltip, unstable_FeatureFlags, MenuItem } from '@carbon/react';
 import { pkg } from '../../settings.js';
 import { OverflowMenuHorizontal, ArrowLeft } from '@carbon/react/icons';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
@@ -61,12 +61,20 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
   // eslint-disable-next-line react/prop-types
   var BreadcrumbOverflowMenu = function BreadcrumbOverflowMenu(_ref2) {
     var overflowItems = _ref2.overflowItems;
+    var handleClick = function handleClick(evt, item) {
+      var _item$props, _item$props2, _item$props2$onClick;
+      if (item !== null && item !== void 0 && (_item$props = item.props) !== null && _item$props !== void 0 && _item$props.href) {
+        window.location.href = item.props.href;
+      }
+      item === null || item === void 0 || (_item$props2 = item.props) === null || _item$props2 === void 0 || (_item$props2$onClick = _item$props2.onClick) === null || _item$props2$onClick === void 0 || _item$props2$onClick.call(_item$props2, evt);
+    };
     return /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
       key: "breadcrumb-overflow-".concat(internalId.current)
+    }, /*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
+      enableV12Overflowmenu: true
     }, /*#__PURE__*/React__default.createElement(OverflowMenu, {
-      align: overflowTooltipAlign,
       "aria-label": overflowAriaLabel,
-      iconDescription: overflowAriaLabel // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
+      label: overflowAriaLabel // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
       ,
       renderIcon: function renderIcon(props) {
         return /*#__PURE__*/React__default.createElement(OverflowMenuHorizontal, _extends({
@@ -74,17 +82,18 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
         }, props));
       },
       className: "".concat(blockClass, "__overflow-menu"),
-      menuOptionsClass: "".concat(blockClass, "__overflow-menu-options")
+      tooltipAlignment: overflowTooltipAlign
     },
     // eslint-disable-next-line react/prop-types
     overflowItems.map(function (item, index) {
-      return /*#__PURE__*/React__default.createElement(OverflowMenuItem, {
+      return /*#__PURE__*/React__default.createElement(MenuItem, {
         key: "breadcrumb-overflow-menu-item-".concat(internalId.current, "-").concat(index),
-        href: item.props.href,
-        onClick: item.props.onClick,
-        itemText: item.props.children
+        onClick: function onClick(evt) {
+          return handleClick(evt, item);
+        },
+        label: item.props.children
       });
-    })));
+    }))));
   };
 
   // create hidden sizing items

package/es/components/Card/Card.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef } from 'react';
 import cx from 'classnames';
-import { Layer, OverflowMenu, OverflowMenuItem, Button, IconButton } from '@carbon/react';
+import { Layer, unstable_FeatureFlags, OverflowMenu, MenuItem, Button, IconButton } from '@carbon/react';
 import { Incomplete, CheckmarkOutline } from '@carbon/react/icons';
 import PropTypes from '../../_virtual/index.js';
 import { CardHeader } from './CardHeader.js';
@@ -17,7 +17,7 @@ import { pkg } from '../../settings.js';
 
 var _Incomplete, _CheckmarkOutline;
 var _excluded = ["actionIcons", "actionsPlacement", "aiLabel", "metadata", "children", "className", "clickZone", "description", "disabled", "footerActionIcon", "getStarted", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonDisabled", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonDisabled", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonPlacement", "secondaryButtonText", "slug", "status", "sequence", "title", "titleSize", "iconDescription"],
-  _excluded2 = ["id"],
+  _excluded2 = ["id", "itemText"],
   _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"];
 var componentName = 'Card';
 var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -95,23 +95,27 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
   // actions can either be an overflow menu or series of icons
   var getActions = function getActions() {
     if (overflowActions.length > 0) {
-      var pos = actionsPlacement === 'top' ? 'bottom' : 'top';
+      var pos = actionsPlacement === 'top' ? 'bottom-end' : 'top-end';
       var size = actionsPlacement === 'top' ? 'sm' : 'md';
       return /*#__PURE__*/React__default.createElement(Layer, {
         level: 2
+      }, /*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
+        enableV12Overflowmenu: true
       }, /*#__PURE__*/React__default.createElement(OverflowMenu, {
+        autoAlign: true,
+        menuAlignment: pos,
         size: size,
-        direction: pos,
-        flipped: true,
         "aria-label": overflowAriaLabel,
-        iconDescription: iconDescription
+        label: iconDescription
       }, overflowActions.map(function (_ref2) {
         var id = _ref2.id,
+          itemText = _ref2.itemText,
           rest = _objectWithoutProperties(_ref2, _excluded2);
-        return /*#__PURE__*/React__default.createElement(OverflowMenuItem, _extends({
-          key: id
+        return /*#__PURE__*/React__default.createElement(MenuItem, _extends({
+          key: id,
+          label: itemText
         }, rest));
-      })));
+      }))));
     }
     var icons = getIcons().map(function (_ref3) {
       var id = _ref3.id,

package/es/components/Checklist/Checklist.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { IconButton, Button } from '@carbon/react';
-import { Themes, Kinds } from './Checklist.types.js';
+import { Kinds, Themes } from './Checklist.types.js';
 import React__default, { useState, useRef, useEffect } from 'react';
 import { ChecklistChart } from './ChecklistChart.js';
 import { ChecklistIcon } from './ChecklistIcon.js';

package/es/components/Checklist/ChecklistIcon.js

@@ -12,7 +12,7 @@ import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { CircleDash, CheckmarkOutline, Incomplete, Warning } from '@carbon/react/icons';
-import { Themes, Kinds } from './Checklist.types.js';
+import { Kinds, Themes } from './Checklist.types.js';
 
 var _excluded = ["className", "kind", "theme"];
 

package/es/components/ConditionBuilder/ConditionBuilderConnector/GroupConnector.js

@@ -50,6 +50,5 @@ var GroupConnector = function GroupConnector() {
     }
   })));
 };
-var GroupConnector$1 = GroupConnector;
 
-export { GroupConnector$1 as default };
+export { GroupConnector as default };

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js

@@ -63,9 +63,6 @@ var ItemOption = function ItemOption(_ref) {
       className: "".concat(blockClass, "__statement_wrapper")
     }, /*#__PURE__*/React__default.createElement("div", null, option.text1, " (", option.connector, ")"), /*#__PURE__*/React__default.createElement("div", null, option.text2));
   };
-  var preventDefault = function preventDefault(evt) {
-    return evt.preventDefault();
-  };
   if (!allOptions) {
     return;
   }
@@ -78,8 +75,7 @@ var ItemOption = function ItemOption(_ref) {
     size: "sm",
     labelText: clearSearchText,
     closeButtonLabelText: clearSearchText,
-    onChange: onSearchChangeHandler,
-    onKeyDown: preventDefault
+    onChange: onSearchChangeHandler
   })), /*#__PURE__*/React__default.createElement("ul", {
     "aria-label": getAriaLabel(),
     role: "listbox"

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js

@@ -129,13 +129,14 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
     } else {
       onChange(option, evt);
     }
+    if (evt.target instanceof SVGElement) {
+      evt.stopPropagation();
+      //stop propagate event , since this closes the popover when clicked on checkboxes which are SVGs.
+    }
   };
   var getAriaLabel = function getAriaLabel() {
     return conditionState.label ? conditionState.label : conditionState.property ? conditionState.property : propertyText;
   };
-  var preventDefault = function preventDefault(evt) {
-    return evt.preventDefault();
-  };
   if (!allOptions) {
     return _SelectSkeleton || (_SelectSkeleton = /*#__PURE__*/React__default.createElement(SelectSkeleton, null));
   }
@@ -148,8 +149,7 @@ var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
     size: "sm",
     labelText: clearSearchText,
     closeButtonLabelText: clearSearchText,
-    onChange: onSearchChangeHandler,
-    onKeyDown: preventDefault
+    onChange: onSearchChangeHandler
   })), multiSelectable && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__multiselectSelectionStatusContainer")
   }, /*#__PURE__*/React__default.createElement("h4", null, /*#__PURE__*/React__default.createElement("label", null, selection.length, "/", allOptions.length, " Selected")), /*#__PURE__*/React__default.createElement(Button, {

package/es/components/ConditionBuilder/utils/util.js

@@ -48,10 +48,6 @@ var traverseReverse = function traverseReverse(eachElem, index, allElements, rot
   }
 };
 var checkForHoldingKey = function checkForHoldingKey(evt, key) {
-  // possible key inputs: altKey,ctrlKey,metaKey,shiftKey
-  if (key === 'cmd') {
-    return evt.metaKey || evt.ctrlKey;
-  }
   return evt[key];
 };
 var checkIsValid = function checkIsValid(item) {

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

@@ -8,7 +8,7 @@ import React, { Dispatch, PropsWithChildren, ReactNode, SetStateAction } from 'r
 import { ExperimentalSecondarySubmit } from './CreateTearsheetStep';
 export interface StepsContextType {
     currentStep: number;
-    setExperimentalSecondarySubmit: Dispatch<SetStateAction<ExperimentalSecondarySubmit>>;
+    setExperimentalSecondarySubmit: Dispatch<SetStateAction<ExperimentalSecondarySubmit | undefined>>;
     setIsDisabled: Dispatch<SetStateAction<boolean>>;
     setOnPrevious: (fn: any) => void;
     setOnNext: (fn: any) => void;

package/es/components/CreateTearsheet/CreateTearsheet.js

@@ -105,7 +105,7 @@ var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState24 = _slicedToArray(_useState23, 2),
     lastIncludedStep = _useState24[0],
     setLastIncludedStep = _useState24[1];
-  var _useState25 = useState({}),
+  var _useState25 = useState(),
     _useState26 = _slicedToArray(_useState25, 2),
     experimentalSecondarySubmit = _useState26[0],
     setExperimentalSecondarySubmit = _useState26[1];
@@ -176,7 +176,7 @@ var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isSubmitting: isSubmitting,
     componentBlockClass: blockClass,
     experimentalSecondarySubmit: experimentalSecondarySubmit,
-    experimentalSecondarySubmitText: experimentalSecondarySubmit.labelText ? experimentalSecondarySubmit.labelText : experimentalSecondarySubmitText,
+    experimentalSecondarySubmitText: experimentalSecondarySubmit !== null && experimentalSecondarySubmit !== void 0 && experimentalSecondarySubmit.labelText ? experimentalSecondarySubmit.labelText : experimentalSecondarySubmitText,
     setCreateComponentActions: setCreateTearsheetActions
   });
   return /*#__PURE__*/React__default.createElement(TearsheetShell, _extends({}, getDevtoolsProps(componentName), rest, {

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, objectSpread2 as _objectSpread2, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useRef, useContext, useState, useEffect, isValidElement } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
@@ -82,7 +82,7 @@ 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));
+      stepsContext === null || stepsContext === void 0 || stepsContext.setExperimentalSecondarySubmit(experimentalSecondarySubmit);
     }
   }, [onMount, experimentalSecondarySubmit, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]);
 
@@ -118,8 +118,11 @@ var CreateTearsheetStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
       stepsContext.setIsDisabled(!!disableSubmit);
       stepsContext === null || stepsContext === void 0 || stepsContext.setOnNext(onNext); // needs to be updated here otherwise there could be stale state values from only initially setting onNext
       stepsContext === null || stepsContext === void 0 || stepsContext.setOnPrevious(onPrevious);
+
+      //Handle props for experimentalSecondarySubmit button, depending on state change
+      stepsContext === null || stepsContext === void 0 || stepsContext.setExperimentalSecondarySubmit(experimentalSecondarySubmit);
     }
-  }, [stepsContext, stepNumber, disableSubmit, onNext, onPrevious, stepRef, stepRefValue]);
+  }, [stepsContext, stepNumber, disableSubmit, onNext, onPrevious, stepRef, stepRefValue, experimentalSecondarySubmit]);
   var renderDescription = function renderDescription() {
     if (description) {
       if (typeof description === 'string') {

package/es/components/Datagrid/Datagrid/Datagrid.d.ts

@@ -19,5 +19,6 @@ export interface DatagridProps {
 }
 /**
  * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/carbon/ibm-products/components/datagrid/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
+ * @deprecated
  */
 export declare let Datagrid: React.ForwardRefExoticComponent<DatagridProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -21,6 +21,7 @@ var blockClass = "".concat(pkg.prefix, "--datagrid");
 var componentName = 'Datagrid';
 /**
  * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/carbon/ibm-products/components/datagrid/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
+ * @deprecated
  */
 var Datagrid = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var datagridState = _ref.datagridState,
@@ -55,6 +56,12 @@ var Datagrid = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React__default.createElement(DatagridContent, props)) : /*#__PURE__*/React__default.createElement(DatagridContent, props))));
 });
 
+/**@ts-ignore*/
+Datagrid.deprecated = {
+  level: 'warn',
+  details: "For more information, please refer to the migration docs https://github.com/carbon-design-system/tanstack-carbon"
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 Datagrid = pkg.checkComponentEnabled(Datagrid, componentName);
 

package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -57,12 +57,12 @@ var ResizeHeader = function ResizeHeader(_ref) {
       if (key === 'ArrowLeft') {
         if (currentColumnWidth - incrementAmount > Math.max(Number(minWidth), 50)) {
           var newWidth = currentColumnWidth - incrementAmount;
-          handleColumnResizingEvent(dispatch, header, newWidth, true);
+          handleColumnResizingEvent(dispatch, header, newWidth);
         }
       }
       if (key === 'ArrowRight') {
         var _newWidth = currentColumnWidth + incrementAmount;
-        handleColumnResizingEvent(dispatch, header, _newWidth, true);
+        handleColumnResizingEvent(dispatch, header, _newWidth);
       }
     }
   };

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js

@@ -37,6 +37,5 @@ Actions.propTypes = {
   setColumnsObject: PropTypes.func.isRequired,
   setSearchText: PropTypes.func.isRequired
 };
-var Actions$1 = Actions;
 
-export { Actions$1 as default };
+export { Actions as default };

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js

@@ -49,6 +49,5 @@ ButtonWrapper.propTypes = {
   onClick: PropTypes.func.isRequired,
   setIsTearsheetOpen: PropTypes.func.isRequired
 };
-var ToggleButtonWrapper = ButtonWrapper;
 
-export { ToggleButtonWrapper as default };
+export { ButtonWrapper as default };

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js

@@ -93,6 +93,5 @@ Columns.propTypes = {
   setColumnStatus: PropTypes.func,
   setColumnsObject: PropTypes.func.isRequired
 };
-var Columns$1 = Columns;
 
-export { Columns$1 as default };
+export { Columns as default };

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -187,6 +187,5 @@ CustomizeColumnsTearsheet.propTypes = {
   selectAllLabel: PropTypes.string,
   setIsTearsheetOpen: PropTypes.func.isRequired
 };
-var CustomizeColumnsTearsheet$1 = CustomizeColumnsTearsheet;
 
-export { CustomizeColumnsTearsheet$1 as default };
+export { CustomizeColumnsTearsheet as default };

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js

@@ -61,6 +61,5 @@ var TearsheetWrapper = function TearsheetWrapper(_ref) {
 TearsheetWrapper.propTypes = {
   instance: PropTypes.object.isRequired
 };
-var CustomizeColumnsTearsheetWrapper = TearsheetWrapper;
 
-export { CustomizeColumnsTearsheetWrapper as default };
+export { TearsheetWrapper as default };

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

@@ -6,7 +6,7 @@
  */
 
 import { slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { BATCH, INSTANT, FLYOUT, CLEAR_FILTERS, SAVED_FILTERS } from './constants.js';
+import { BATCH, INSTANT, CLEAR_FILTERS, FLYOUT, SAVED_FILTERS } from './constants.js';
 import { usePrefix, IconButton } from '@carbon/react';
 import React__default, { useState, useRef, useContext, useEffect } from 'react';
 import { breakpoints, px } from '@carbon/layout';
@@ -327,6 +327,5 @@ FilterFlyout.propTypes = {
    */
   updateMethod: PropTypes.oneOf([BATCH, INSTANT]).isRequired
 };
-var FilterFlyout$1 = FilterFlyout;
 
-export { FilterFlyout$1 as default };
+export { FilterFlyout as default };

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

@@ -7,7 +7,7 @@
 
 import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { Button, Layer, Search, Accordion, AccordionItem } from '@carbon/react';
-import { PANEL, BATCH, CLEAR_FILTERS, INSTANT, SAVED_FILTERS } from './constants.js';
+import { BATCH, CLEAR_FILTERS, INSTANT, PANEL, SAVED_FILTERS } from './constants.js';
 import React__default, { useState, useContext, useRef, useMemo, useEffect, useCallback } from 'react';
 import { panelVariants, innerContainerVariants, actionSetVariants } from './motion/variants.js';
 import { motion, useReducedMotion } from 'framer-motion';
@@ -312,6 +312,5 @@ FilterPanel.propTypes = {
   title: PropTypes.string,
   updateMethod: PropTypes.oneOf([BATCH, INSTANT])
 };
-var FilterPanel$1 = FilterPanel;
 
-export { componentClass, FilterPanel$1 as default };
+export { componentClass, FilterPanel as default };

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

@@ -74,6 +74,5 @@ OverflowCheckboxes.propTypes = {
   viewAllLabel: PropTypes.string,
   viewLessLabel: PropTypes.string
 };
-var OverflowCheckboxes$1 = OverflowCheckboxes;
 
-export { OverflowCheckboxes$1 as default };
+export { OverflowCheckboxes as default };

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

@@ -18,6 +18,5 @@ var useFilterContext = function useFilterContext() {
   }
   return context;
 };
-var useFilterContext$1 = useFilterContext;
 
-export { useFilterContext$1 as default };
+export { useFilterContext as default };

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

@@ -473,6 +473,5 @@ var useFilters = function useFilters(_ref) {
     cancel: cancel
   };
 };
-var useFilters$1 = useFilters;
 
-export { useFilters$1 as default };
+export { useFilters as default };

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

@@ -29,6 +29,5 @@ var useShouldDisableButtons = function useShouldDisableButtons(_ref) {
   }, [filtersState, prevFiltersRef]);
   return [shouldDisableButtons, setShouldDisableButtons];
 };
-var useShouldDisableButtons$1 = useShouldDisableButtons;
 
-export { useShouldDisableButtons$1 as default };
+export { useShouldDisableButtons as default };

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

@@ -21,6 +21,5 @@ var useSubscribeToEventEmitter = function useSubscribeToEventEmitter(type, callb
     EventEmitter.subscribe(type, callback);
   });
 };
-var useSubscribeToEventEmitter$1 = useSubscribeToEventEmitter;
 
-export { useSubscribeToEventEmitter$1 as default };
+export { useSubscribeToEventEmitter as default };

package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js

@@ -87,6 +87,5 @@ RowSizeDropdown.propTypes = {
   onChange: PropTypes.func.isRequired,
   selectedOption: PropTypes.string
 };
-var RowSizeDropdown$1 = RowSizeDropdown;
 
-export { RowSizeDropdown$1 as default };
+export { RowSizeDropdown as default };

package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js

@@ -85,6 +85,5 @@ RowSizeRadioGroup.propTypes = {
   selectedOption: PropTypes.string.isRequired,
   tableId: PropTypes.string.isRequired
 };
-var RowSizeRadioGroup$1 = RowSizeRadioGroup;
 
-export { RowSizeRadioGroup$1 as default };
+export { RowSizeRadioGroup as default };

package/es/components/Datagrid/Datagrid/addons/stateReducer.js

@@ -28,7 +28,7 @@ var handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, o
   });
 };
 var handleColumnResizingEvent = function handleColumnResizingEvent(dispatch, header, newWidth, isKeyEvent) {
-  if (isKeyEvent) {
+  {
     dispatch({
       type: COLUMN_RESIZE_START,
       payload: {