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

package/es/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js

@@ -26,6 +26,7 @@ var defaults = {
 
 /**
  * A container with a label and optional count.
+ * @deprecated This component is deprecated
  */
 var FilterPanelAccordion = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _ref$accordionProps = _ref.accordionProps,
@@ -49,6 +50,10 @@ var FilterPanelAccordion = /*#__PURE__*/React__default.forwardRef(function (_ref
     className: "".concat(blockClass, "__list")
   }), children));
 });
+FilterPanelAccordion.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 
 // Return a placeholder if not released and not enabled by feature flag
 FilterPanelAccordion = pkg.checkComponentEnabled(FilterPanelAccordion, componentName);

package/es/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.d.ts

@@ -1,5 +1,6 @@
 /**
  * A container with a label and optional count.
+ * @deprecated This component is deprecated
  */
 export let FilterPanelAccordionItem: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/es/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js

@@ -27,6 +27,7 @@ var defaults = {
 
 /**
  * A container with a label and optional count.
+ * @deprecated This component is deprecated
  */
 var FilterPanelAccordionItem = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _ref$accordionItemPro = _ref.accordionItemProps,
@@ -56,7 +57,10 @@ var FilterPanelAccordionItem = /*#__PURE__*/React__default.forwardRef(function (
     }, child);
   })));
 });
-
+FilterPanelAccordionItem.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 // Return a placeholder if not released and not enabled by feature flag
 FilterPanelAccordionItem = pkg.checkComponentEnabled(FilterPanelAccordionItem, componentName);
 FilterPanelAccordionItem.displayName = componentName;

package/es/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.d.ts

@@ -5,6 +5,7 @@
  *
  * All of Carbon Checkbox's props are directly available
  * through "...rest", including id, onClick, etc.
+ * @deprecated This component is deprecated
  */
 export let FilterPanelCheckbox: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/es/components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js

@@ -27,6 +27,7 @@ var componentName = 'FilterPanelCheckbox';
  *
  * All of Carbon Checkbox's props are directly available
  * through "...rest", including id, onClick, etc.
+ * @deprecated This component is deprecated
  */
 var FilterPanelCheckbox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var className = _ref.className,
@@ -46,6 +47,10 @@ var FilterPanelCheckbox = /*#__PURE__*/React__default.forwardRef(function (_ref,
     ref: ref
   }, getDevtoolsProps(componentName)));
 });
+FilterPanelCheckbox.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 
 // Return a placeholder if not released and not enabled by feature flag
 FilterPanelCheckbox = pkg.checkComponentEnabled(FilterPanelCheckbox, componentName);

package/es/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.d.ts

@@ -5,6 +5,7 @@
  * just like FilterPanelCheckbox.
  *
  * Use `overflowMenuProps` for properties specific to the OverflowMenu.
+ * @deprecated This component is deprecated
  */
 export let FilterPanelCheckboxWithOverflow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/es/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js

@@ -30,6 +30,7 @@ var defaults = {
  * just like FilterPanelCheckbox.
  *
  * Use `overflowMenuProps` for properties specific to the OverflowMenu.
+ * @deprecated This component is deprecated
  */
 var FilterPanelCheckboxWithOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -115,6 +116,10 @@ var FilterPanelCheckboxWithOverflow = /*#__PURE__*/React__default.forwardRef(fun
     }, other), children))
   );
 });
+FilterPanelCheckboxWithOverflow.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 
 // Return a placeholder if not released and not enabled by feature flag
 FilterPanelCheckboxWithOverflow = pkg.checkComponentEnabled(FilterPanelCheckboxWithOverflow, componentName);

package/es/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.d.ts

@@ -1,5 +1,6 @@
 /**
  * A container with a label and optional count.
+ * @deprecated This component is deprecated
  */
 export let FilterPanelGroup: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/es/components/FilterPanel/FilterPanelGroup/FilterPanelGroup.js

@@ -21,6 +21,7 @@ var componentName = 'FilterPanelGroup';
 
 /**
  * A container with a label and optional count.
+ * @deprecated This component is deprecated
  */
 var FilterPanelGroup = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -42,6 +43,10 @@ var FilterPanelGroup = /*#__PURE__*/React__default.forwardRef(function (_ref, re
     className: "".concat(blockClass, "__content")
   }, children));
 });
+FilterPanelGroup.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 
 // Return a placeholder if not released and not enabled by feature flag
 FilterPanelGroup = pkg.checkComponentEnabled(FilterPanelGroup, componentName);

package/es/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.d.ts

@@ -1,5 +1,6 @@
 /**
  * An input field and container to show search results.
+ * @deprecated This component is deprecated
  */
 export let FilterPanelSearch: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/es/components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js

@@ -24,6 +24,7 @@ var defaults = {
 
 /**
  * An input field and container to show search results.
+ * @deprecated This component is deprecated
  */
 var FilterPanelSearch = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -67,7 +68,10 @@ var FilterPanelSearch = /*#__PURE__*/React__default.forwardRef(function (_ref, r
     className: "".concat(blockClass, "__results")
   }, children));
 });
-
+FilterPanelSearch.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 // Return a placeholder if not released and not enabled by feature flag
 FilterPanelSearch = pkg.checkComponentEnabled(FilterPanelSearch, componentName);
 FilterPanelSearch.displayName = componentName;

package/es/components/Nav/Nav.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated This component is deprecated
+ */
 export let Nav: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 export default Nav;
 import React from 'react';

package/es/components/Nav/Nav.js

@@ -17,6 +17,10 @@ import { pkg } from '../../settings.js';
 var _excluded = ["activeHref", "className", "children", "heading", "label"];
 var componentName = 'Nav';
 var blockClass = "".concat(pkg.prefix, "--nav");
+
+/**
+ * @deprecated This component is deprecated
+ */
 var Nav = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var activeHref = _ref.activeHref,
     className = _ref.className,
@@ -121,6 +125,10 @@ var Nav = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     return (child === null || child === void 0 || (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === NavList.displayName ? buildNewListChild(child, index) : buildNewItemChild(child, index);
   })));
 });
+Nav.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 Nav.propTypes = {
   /**
    * Hypertext reference for active page.

package/es/components/Nav/NavItemLink.js

@@ -25,6 +25,5 @@ NavItemLink.propTypes = {
 NavItemLink.defaultProps = {
   element: 'a'
 };
-var NavItemLink$1 = NavItemLink;
 
-export { NavItemLink$1 as default };
+export { NavItemLink as default };

package/es/components/StatusIndicator/StatusIndicator.d.ts

@@ -1,5 +1,6 @@
 /**
  * A list of icon/description pairs used to show multiple states of progress.
+ * @deprecated This component is deprecated
  */
 export let StatusIndicator: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/es/components/StatusIndicator/StatusIndicator.js

@@ -27,6 +27,7 @@ var defaults = {
 
 /**
  * A list of icon/description pairs used to show multiple states of progress.
+ * @deprecated This component is deprecated
  */
 var StatusIndicator = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -57,6 +58,10 @@ var StatusIndicator = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     }
   }, retryLabel));
 });
+StatusIndicator.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 
 // Return a placeholder if not released and not enabled by feature flag
 StatusIndicator = pkg.checkComponentEnabled(StatusIndicator, componentName);

package/es/components/StatusIndicator/StatusIndicatorStep.d.ts

@@ -1,5 +1,6 @@
 /**
  * An icon/description pair that describes one step of the `StatusIndicator`.
+ * @deprecated This component is deprecated
  */
 export let StatusIndicatorStep: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/es/components/StatusIndicator/StatusIndicatorStep.js

@@ -26,6 +26,7 @@ var defaults = {
 
 /**
  * An icon/description pair that describes one step of the `StatusIndicator`.
+ * @deprecated This component is deprecated
  */
 var StatusIndicatorStep = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var className = _ref.className,
@@ -54,6 +55,10 @@ var StatusIndicatorStep = /*#__PURE__*/React__default.forwardRef(function (_ref,
     className: "".concat(blockClass, "__error-message")
   }, errorMessage));
 });
+StatusIndicatorStep.deprecated = {
+  level: 'warn',
+  details: "This component is deprecated"
+};
 
 // Return a placeholder if not released and not enabled by feature flag
 StatusIndicatorStep = pkg.checkComponentEnabled(StatusIndicatorStep, componentName);

package/es/components/Tearsheet/TearsheetShell.js

@@ -18,7 +18,7 @@ import { Button, usePrefix, unstable_FeatureFlags, ComposedModal, ModalHeader, L
 import { ActionSet } from '../ActionSet/ActionSet.js';
 import { Wrap } from '../../global/js/utils/Wrap.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.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 _excluded = ["actions", "aiLabel", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
@@ -146,33 +146,12 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
 
   // Callback to give the tearsheet the opportunity to claim focus
   handleStackChange.claimFocus = function () {
-    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') {
-        return specifiedEl.focus();
-      }
-    }
-    setTimeout(function () {
-      return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
-    }, 0);
+    claimFocus(firstElement, modalRef, selectorPrimaryFocus);
   };
   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 _window2;
-        var specifiedEl = getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
-        if (specifiedEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(specifiedEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none') {
-          setTimeout(function () {
-            return specifiedEl.focus();
-          }, 0);
-          return;
-        }
-      }
-      setTimeout(function () {
-        return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
-      }, 0);
+      claimFocus(firstElement, modalRef, selectorPrimaryFocus);
     }
   }, [firstElement, modalRef, open, selectorPrimaryFocus]);
   useEffect(function () {

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

@@ -12,3 +12,4 @@ export function useFocus(modalRef: any, selectorPrimaryFocus: any): {
         specified: any;
     };
 };
+export function claimFocus(firstElement: any, modalRef: any, selectorPrimaryFocus?: string | undefined): any;

package/es/global/js/hooks/useFocus.js

@@ -104,4 +104,24 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
   };
 };
 
-export { getSpecificElement, useFocus };
+/**
+ *
+ * @param {*} firstElement
+ * @param {*} modalRef
+ * @param {string | undefined} selectorPrimaryFocus
+ */
+var claimFocus = function claimFocus(firstElement, modalRef) {
+  var selectorPrimaryFocus = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+  if (selectorPrimaryFocus && getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
+    var _window2;
+    var specifiedEl = getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
+    if (specifiedEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(specifiedEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none') {
+      return specifiedEl.focus();
+    }
+  }
+  setTimeout(function () {
+    return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
+  }, 0);
+};
+
+export { claimFocus, getSpecificElement, useFocus };

package/es/global/js/hooks/usePrefersReducedMotion.js

@@ -29,6 +29,5 @@ var usePrefersReducedMotion = function usePrefersReducedMotion() {
   }, []);
   return prefersReducedMotion;
 };
-var usePrefersReducedMotion$1 = usePrefersReducedMotion;
 
-export { usePrefersReducedMotion$1 as default };
+export { usePrefersReducedMotion as default };

package/es/index.js

@@ -103,12 +103,12 @@ export { SearchBar } from './components/SearchBar/SearchBar.js';
 export { TagOverflow } from './components/TagOverflow/TagOverflow.js';
 export { GetStartedCard } from './components/GetStartedCard/GetStartedCard.js';
 export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from './components/FeatureFlags/index.js';
+export { default as useFilterContext } from './components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js';
 export { usePrefix } from './global/js/hooks/usePrefix.js';
 export { ActionBar } from './components/ActionBar/ActionBar.js';
 export { HTTPError403 } from './components/HTTPErrors/HTTPError403/HTTPError403.js';
 export { HTTPError404 } from './components/HTTPErrors/HTTPError404/HTTPError404.js';
 export { HTTPErrorOther } from './components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js';
-export { default as useFilterContext } from './components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js';
 export { EditTearsheet } from './components/EditTearsheet/EditTearsheet.js';
 export { EditTearsheetForm } from './components/EditTearsheet/EditTearsheetForm.js';
 export { CoachmarkStack } from './components/CoachmarkStack/CoachmarkStack.js';

package/lib/_virtual/_rollupPluginBabelHelpers.js

@@ -506,7 +506,7 @@ function _nonIterableRest() {
 function _createForOfIteratorHelper(o, allowArrayLike) {
   var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
   if (!it) {
-    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike) {
       if (it) o = it;
       var i = 0;
       var F = function () {};

package/lib/components/APIKeyModal/APIKeyModal.js

@@ -20,9 +20,10 @@ var devtools = require('../../global/js/utils/devtools.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
 var uuidv4 = require('../../global/js/utils/uuidv4.js');
 var useFocus = require('../../global/js/hooks/useFocus.js');
+var usePreviousValue = require('../../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
@@ -63,6 +64,7 @@ exports.APIKeyModal = /*#__PURE__*/React.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,
@@ -120,6 +122,7 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _useFocus = useFocus.useFocus(modalRef, selectorPrimaryFocus),
     firstElement = _useFocus.firstElement,
     keyDownListener = _useFocus.keyDownListener;
+  var prevOpen = usePreviousValue.usePreviousValue(open);
   React.useEffect(function () {
     if (copyRef.current && open && apiKeyLoaded) {
       copyRef.current.focus();
@@ -128,21 +131,16 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   React.useEffect(function () {
     if (open) {
       // Focusing the first element or selectorPrimaryFocus element
-      if (selectorPrimaryFocus && useFocus.getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
-        var _window;
-        var specifiedEl = useFocus.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;
-        }
-      }
+      useFocus.claimFocus(firstElement, modalRef, selectorPrimaryFocus);
+    }
+  }, [firstElement, modalRef, open, selectorPrimaryFocus]);
+  React.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;
@@ -488,6 +486,11 @@ exports.APIKeyModal.propTypes = {
    * label text that's displayed when hovering over visibility toggler to hide key
    */
   hideAPIKeyLabel: index.default.string,
+  /**
+   * Provide a ref to return focus to once the tearsheet is closed.
+   */
+  /**@ts-ignore */
+  launcherButtonRef: index.default.any,
   /**
    * designates if the modal is in a loading state via a request or some other in progress operation
    */

package/lib/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/lib/components/AboutModal/AboutModal.js

@@ -64,12 +64,9 @@ exports.AboutModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [bodyRef]);
   React.useEffect(function () {
     if (open) {
-      setTimeout(function () {
-        return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
-      }, 0);
+      useFocus.claimFocus(firstElement, modalRef);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
+  }, [firstElement, modalRef, open]);
   return renderPortalUse( /*#__PURE__*/React.createElement(react.unstable_FeatureFlags, {
     enableExperimentalFocusWrapWithoutSentinels: true
   }, /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {

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

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

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

@@ -22,6 +22,5 @@ var useParentSelect = function useParentSelect() {
     setParentSelected: setParentSelected
   };
 };
-var useParentSelect$1 = useParentSelect;
 
-exports.default = useParentSelect$1;
+exports.default = useParentSelect;

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

@@ -70,6 +70,5 @@ var usePath = function usePath() {
     resetPath: resetPath
   };
 };
-var usePath$1 = usePath;
 
-exports.default = usePath$1;
+exports.default = usePath;

package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -63,12 +63,20 @@ exports.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.createElement(react.BreadcrumbItem, {
       key: "breadcrumb-overflow-".concat(internalId.current)
+    }, /*#__PURE__*/React.createElement(react.unstable_FeatureFlags, {
+      enableV12Overflowmenu: true
     }, /*#__PURE__*/React.createElement(react.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.createElement(icons.OverflowMenuHorizontal, _rollupPluginBabelHelpers.extends({
@@ -76,17 +84,18 @@ exports.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.createElement(react.OverflowMenuItem, {
+      return /*#__PURE__*/React.createElement(react.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/lib/components/Card/Card.js

@@ -19,7 +19,7 @@ var settings = require('../../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__*/React.forwardRef(function (_ref, ref) {
@@ -97,23 +97,27 @@ var Card = /*#__PURE__*/React.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.createElement(react.Layer, {
         level: 2
+      }, /*#__PURE__*/React.createElement(react.unstable_FeatureFlags, {
+        enableV12Overflowmenu: true
       }, /*#__PURE__*/React.createElement(react.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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
-        return /*#__PURE__*/React.createElement(react.OverflowMenuItem, _rollupPluginBabelHelpers.extends({
-          key: id
+        return /*#__PURE__*/React.createElement(react.MenuItem, _rollupPluginBabelHelpers.extends({
+          key: id,
+          label: itemText
         }, rest));
-      })));
+      }))));
     }
     var icons = getIcons().map(function (_ref3) {
       var id = _ref3.id,