@carbon/ibm-products 2.54.0 → 2.55.0

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/Tearsheet.d.ts

@@ -107,7 +107,7 @@ export interface TearsheetProps extends PropsWithChildren {
     /**
      * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
      */
-    portalTarget?: ReactNode;
+    portalTarget?: HTMLElement;
     /**
      * Specify a CSS selector that matches the DOM element that should be
      * focused when the Modal opens.

package/es/components/Tearsheet/TearsheetNarrow.d.ts

@@ -63,7 +63,7 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren {
     /**
      * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
      */
-    portalTarget?: ReactNode;
+    portalTarget?: HTMLElement;
     /**
      * Specify a CSS selector that matches the DOM element that should be
      * focused when the Modal opens.

package/es/components/Tearsheet/TearsheetShell.d.ts

@@ -84,7 +84,7 @@ interface TearsheetShellProps extends PropsWithChildren {
     /**
      * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
      */
-    portalTarget?: ReactNode;
+    portalTarget?: HTMLElement;
     /**
      * Specify a CSS selector that matches the DOM element that should be
      * focused when the Modal opens.

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/components/TooltipTrigger/TooltipTrigger.d.ts

@@ -15,4 +15,4 @@ export interface TooltipTriggerProps extends PropsWithChildren {
  * This is an tooltip trigger as Carbon Tooltip requires an active element to work but provides
  * no blanked button.
  */
-export declare let TooltipTrigger: React.ForwardRefExoticComponent<TooltipTriggerProps & React.RefAttributes<HTMLDivElement>>;
+export declare let TooltipTrigger: React.ForwardRefExoticComponent<TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/es/components/TooltipTrigger/TooltipTrigger.js

@@ -23,12 +23,13 @@ var componentName = 'TooltipTrigger';
  * This is an tooltip trigger as Carbon Tooltip requires an active element to work but provides
  * no blanked button.
  */
-var TooltipTrigger = /*#__PURE__*/React__default.forwardRef(function (_ref) {
+var TooltipTrigger = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default.createElement("button", _extends({
-    type: "button"
+    type: "button",
+    ref: ref
   }, rest, {
     className: cx(blockClass,
     // Apply the block class to the main HTML element

package/es/components/UserAvatar/UserAvatar.js

@@ -96,9 +96,7 @@ var UserAvatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         // switched classes dependant on props or state
         // example: [`${blockClass}__here-if-small`]: size === 'sm',
       }),
-      ref: ref,
-      role: "img",
-      "aria-hidden": "true"
+      ref: ref
     }, getDevtoolsProps(componentName)), getItem());
   };
   if (tooltipText) {

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/APIKeyDownloader.js

@@ -67,7 +67,7 @@ var APIKeyDownloader = function APIKeyDownloader(_ref) {
     className: "".concat(settings.pkg.prefix, "--apikey-modal__download-link"),
     "aria-label": downloadLinkLabel !== null && downloadLinkLabel !== void 0 ? downloadLinkLabel : linkText,
     role: "button"
-  }), linkText)));
+  }), downloadLinkLabel !== null && downloadLinkLabel !== void 0 ? downloadLinkLabel : linkText)));
 };
 APIKeyDownloader.displayName = componentName;
 APIKeyDownloader.propTypes = {

package/lib/components/APIKeyModal/APIKeyModal.js

@@ -19,9 +19,11 @@ var usePortalTarget = require('../../global/js/hooks/usePortalTarget.js');
 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", "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
@@ -62,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,
@@ -77,6 +80,7 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     open = _ref.open,
     portalTargetIn = _ref.portalTarget,
     previousStepButtonText = _ref.previousStepButtonText,
+    selectorPrimaryFocus = _ref.selectorPrimaryFocus,
     showAPIKeyLabel = _ref.showAPIKeyLabel,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var _useState = React.useState(null),
@@ -113,11 +117,30 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: copyRef
   };
   var blockClass = "".concat(settings.pkg.prefix, "--apikey-modal");
+  var localRef = React.useRef(undefined);
+  var modalRef = ref || localRef;
+  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();
     }
   }, [open, apiKeyLoaded]);
+  React.useEffect(function () {
+    if (open) {
+      // Focusing the first element or selectorPrimaryFocus element
+      useFocus.claimFocus(firstElement, modalRef, selectorPrimaryFocus);
+    }
+  }, [firstElement, modalRef, open, selectorPrimaryFocus]);
+  React.useEffect(function () {
+    if (prevOpen && !open && launcherButtonRef) {
+      setTimeout(function () {
+        launcherButtonRef.current.focus();
+      }, 0);
+    }
+  }, [launcherButtonRef, open, prevOpen]);
   var isPrimaryButtonDisabled = function isPrimaryButtonDisabled() {
     if (loading) {
       return true;
@@ -232,10 +255,13 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onCloseHandler();
     }
   };
-  return renderPortalUse( /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, _rollupPluginBabelHelpers.objectSpread2({
-    open: open,
-    ref: ref
+  return renderPortalUse( /*#__PURE__*/React.createElement(react.unstable_FeatureFlags, {
+    enableExperimentalFocusWrapWithoutSentinels: true
+  }, /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, _rollupPluginBabelHelpers.objectSpread2({
+    open: open
   }, devtools.getDevtoolsProps(componentName)), {
+    ref: modalRef,
+    onKeyDown: keyDownListener,
     className: cx(className, blockClass),
     onClose: onCloseHandler,
     size: "sm",
@@ -308,7 +334,7 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     kind: "primary",
     onClick: submitHandler,
     disabled: isPrimaryButtonDisabled()
-  }), getPrimaryButtonText()))));
+  }), getPrimaryButtonText())))));
 });
 var customStepsRequiredProps = function customStepsRequiredProps(type) {
   return propsHelper.isRequiredIf(type, function (_ref3) {
@@ -460,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
    */
@@ -521,6 +552,11 @@ exports.APIKeyModal.propTypes = {
    * text that displays in the secondary button when using custom steps to indicate to the user that there is a previous step
    */
   previousStepButtonText: customStepsRequiredProps(index.default.string),
+  /**
+   * Specify a CSS selector that matches the DOM element that should be
+   * focused when the Modal opens.
+   */
+  selectorPrimaryFocus: index.default.string,
   /**
    * label text that's displayed when hovering over visibility toggler to show key
    */

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
      */
@@ -145,6 +149,11 @@ interface APIKeyModalCommonProps {
      * The DOM node the tearsheet should be rendered within. Defaults to document.body.
      */
     portalTarget?: ReactNode;
+    /**
+     * Specify a CSS selector that matches the DOM element that should be
+     * focused when the Modal opens.
+     */
+    selectorPrimaryFocus?: string;
     /**
      * label text that's displayed when hovering over visibility toggler to show key
      */

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/AddSelect.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { Filter, Item, Theme } from './types';
 export interface AddSelectProps {
     className?: string;
@@ -36,7 +36,7 @@ export interface AddSelectProps {
     /**
      * portal target for the all tags modal
      */
-    portalTarget?: ReactNode;
+    portalTarget?: HTMLElement;
     searchResultsTitle?: string;
     sortByLabel?: string;
     title: string;

package/lib/components/AddSelect/AddSelect.js

@@ -109,6 +109,7 @@ AddSelect.propTypes = {
   /**
    * portal target for the all tags modal
    */
+  /**@ts-ignore */
   portalTarget: index.default.node,
   searchResultsTitle: index.default.string,
   sortByLabel: index.default.string,

package/lib/components/AddSelect/AddSelectBody.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { Item, Theme } from './types';
 export interface AddSelectBodyProps {
     className?: string;
@@ -35,7 +35,7 @@ export interface AddSelectBodyProps {
     onSubmit?: (selection: any) => void;
     onSubmitButtonText?: string;
     open?: boolean;
-    portalTarget?: ReactNode;
+    portalTarget?: HTMLElement;
     searchResultsTitle?: string;
     sortByLabel?: string;
     title?: string;

package/lib/components/AddSelect/AddSelectBody.js

@@ -363,6 +363,7 @@ AddSelectBody.propTypes = {
   onSubmit: index.default.func,
   onSubmitButtonText: index.default.string,
   open: index.default.bool,
+  /**@ts-ignore */
   portalTarget: index.default.node,
   searchResultsTitle: index.default.string,
   sortByLabel: index.default.string,

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;