@carbon/react 1.84.0-rc.0 → 1.85.0-rc.0

package/lib/components/DataTable/TableExpandRow.js

@@ -16,6 +16,10 @@ var React = require('react');
 var iconsReact = require('@carbon/icons-react');
 var TableCell = require('./TableCell.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var TableSlugRow = require('./TableSlugRow.js');
+var TableDecoratorRow = require('./TableDecoratorRow.js');
+var index = require('../AILabel/index.js');
+var utils = require('../../internal/utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -40,16 +44,21 @@ const TableExpandRow = /*#__PURE__*/React__default["default"].forwardRef(({
 
   // We need to put the AILabel and Decorator before the expansion arrow and all other table cells after the arrow.
   let rowHasAILabel;
-  const decorator = React__default["default"].Children.toArray(children).map(child => {
-    if (child.type?.displayName === 'TableSlugRow' || child.type?.displayName === 'TableDecoratorRow') {
-      if (child.props.slug || child.props.decorator?.type.displayName === 'AILabel') {
+  const decorator = React.Children.toArray(children).map(child => {
+    if (utils.isComponentElement(child, TableSlugRow["default"])) {
+      if (child.props.slug) {
+        rowHasAILabel = true;
+      }
+      return child;
+    } else if (utils.isComponentElement(child, TableDecoratorRow["default"])) {
+      if (utils.isComponentElement(child.props.decorator, index.AILabel)) {
         rowHasAILabel = true;
       }
       return child;
     }
   });
-  const normalizedChildren = React__default["default"].Children.toArray(children).map(child => {
-    if (child.type?.displayName !== 'TableSlugRow' && child.type?.displayName !== 'TableDecoratorRow') {
+  const normalizedChildren = React.Children.toArray(children).map(child => {
+    if (/*#__PURE__*/React.isValidElement(child) && child.type !== TableSlugRow["default"] && child.type !== TableDecoratorRow["default"]) {
       return child;
     }
   });

package/lib/components/DataTable/TableHeader.js

@@ -17,6 +17,8 @@ var iconsReact = require('@carbon/icons-react');
 require('./state/sorting.js');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var index = require('../AILabel/index.js');
+var utils = require('../../internal/utils.js');
 var sortStates = require('./state/sortStates.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -71,15 +73,13 @@ const TableHeader = /*#__PURE__*/React__default["default"].forwardRef(function T
 
   // AILabel is always size `mini`
   const AILableRef = React.useRef(null);
-  let colHasAILabel;
-  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    colHasAILabel = true;
-    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
-      size: 'mini',
-      ref: AILableRef
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = utils.isComponentElement(candidate, index.AILabel);
+  const colHasAILabel = candidateIsAILabel;
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
+    size: 'mini',
+    ref: AILableRef
+  }) : null;
   const headerLabelClassNames = cx__default["default"]({
     [`${prefix}--table-header-label`]: true,
     [`${prefix}--table-header-label--slug ${prefix}--table-header-label--ai-label`]: colHasAILabel,

package/lib/components/DataTable/TableRow.js

@@ -14,6 +14,10 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
+var TableSlugRow = require('./TableSlugRow.js');
+var TableDecoratorRow = require('./TableDecoratorRow.js');
+var index = require('../AILabel/index.js');
+var utils = require('../../internal/utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,11 +29,15 @@ const TableRow = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
   const prefix = usePrefix.usePrefix();
   let rowHasAILabel;
   if (props?.children) {
-    React__default["default"].Children.toArray(props.children).map(child => {
-      if (child.type?.displayName === 'TableSlugRow' || child.type?.displayName === 'TableDecoratorRow') {
-        if (child.props.slug || child.props.decorator?.type.displayName === 'AILabel') {
+    // TODO: Why is this loop a `map`? It's not returning anything. Ideally,
+    // it seems that it should be a `some`. Maybe I'm missing something?
+    React.Children.toArray(props.children).map(child => {
+      if (utils.isComponentElement(child, TableSlugRow["default"])) {
+        if (child.props.slug) {
           rowHasAILabel = true;
         }
+      } else if (utils.isComponentElement(child, TableDecoratorRow["default"]) && utils.isComponentElement(child.props.decorator, index.AILabel)) {
+        rowHasAILabel = true;
       }
     });
   }

package/lib/components/DataTable/tools/normalize.js

@@ -9,6 +9,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var index = require('../../AILabel/index.js');
 var cells = require('./cells.js');
 
 /**
@@ -63,7 +64,7 @@ const normalize = (rows, headers, prevState = {}) => {
         isEditing: false,
         isValid: true,
         errors: null,
-        hasAILabelHeader: !!(slug || decorator?.type?.displayName === 'AILabel'),
+        hasAILabelHeader: !!(slug || decorator?.type === index.AILabel),
         info: {
           header: key
         }

package/lib/components/DatePickerInput/DatePickerInput.js

@@ -19,6 +19,8 @@ var FormContext = require('../FluidForm/FormContext.js');
 var useId = require('../../internal/useId.js');
 require('../Text/index.js');
 var deprecate = require('../../prop-types/deprecate.js');
+var index = require('../AILabel/index.js');
+var utils = require('../../internal/utils.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -109,12 +111,11 @@ const DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(functi
   const input = /*#__PURE__*/React__default["default"].createElement("input", inputProps);
 
   // AILabel always size `mini`
-  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
-      size: 'mini'
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = utils.isComponentElement(candidate, index.AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
+    size: 'mini'
+  }) : null;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: containerClasses
   }, labelText && /*#__PURE__*/React__default["default"].createElement(Text.Text, {

package/lib/components/Dialog/index.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 React, { type HTMLAttributes } from 'react';
+import React, { type HTMLAttributes, type RefObject } from 'react';
 import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
 /**
  * ----------
@@ -20,6 +20,10 @@ interface DialogProps extends HTMLAttributes<HTMLDialogElement> {
      * Specify an optional className to be applied to the modal root node
      */
     className?: string;
+    /**
+     * Provide a ref to return focus to once the dialog is closed.
+     */
+    focusAfterCloseRef?: RefObject<HTMLElement | null>;
     /**
      * Specifies whether the dialog is modal or non-modal. This cannot be changed
      * while open=true

package/lib/components/Dialog/index.js

@@ -45,6 +45,7 @@ const DialogContext = /*#__PURE__*/React.createContext({});
 const unstable__Dialog = /*#__PURE__*/React__default["default"].forwardRef(({
   children,
   className,
+  focusAfterCloseRef,
   modal,
   onCancel = noopFn.noopFn,
   onClick = noopFn.noopFn,
@@ -103,6 +104,19 @@ const unstable__Dialog = /*#__PURE__*/React__default["default"].forwardRef(({
       }
     }
   }, [modal, open]);
+  React.useEffect(() => {
+    if (!open && focusAfterCloseRef) {
+      // use setTimeout to ensure focus is set after all other default focus behavior
+      const moveFocus = setTimeout(() => {
+        focusAfterCloseRef.current?.focus();
+      });
+
+      //component did unmount equivalent
+      return () => {
+        clearTimeout(moveFocus);
+      };
+    }
+  }, [open, focusAfterCloseRef]);
   const containerClasses = cx__default["default"](`${prefix}--dialog-container`);
   const contextValue = {
     dialogId,
@@ -148,6 +162,12 @@ unstable__Dialog.propTypes = {
    * Specify an optional className to be applied to the modal root node
    */
   className: PropTypes__default["default"].string,
+  /**
+   * Provide a ref to return focus to once the dialog is closed.
+   */
+  focusAfterCloseRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
+    current: PropTypes__default["default"].any
+  })]),
   /**
    * Modal specifies whether the Dialog is modal or non-modal. This cannot be
    * changed while open=true

package/lib/components/Dropdown/Dropdown.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 React, { Ref, type HTMLAttributes, type ReactNode } from 'react';
+import React, { type HTMLAttributes, type ReactNode, type Ref } from 'react';
 import { UseSelectProps } from 'downshift';
 import { type ListBoxMenuIconTranslationKey, type ListBoxSize, type ListBoxType } from '../ListBox';
 import { TranslateWithId } from '../../types/common';

package/lib/components/Dropdown/Dropdown.js

@@ -15,7 +15,7 @@ var Downshift = require('downshift');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var iconsReact = require('@carbon/icons-react');
-var index$1 = require('../ListBox/index.js');
+var index$2 = require('../ListBox/index.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
@@ -24,6 +24,8 @@ var FormContext = require('../FluidForm/FormContext.js');
 var useId = require('../../internal/useId.js');
 var react = require('@floating-ui/react');
 var index = require('../FeatureFlags/index.js');
+var index$1 = require('../AILabel/index.js');
+var utils = require('../../internal/utils.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -318,15 +320,11 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef(({
   }), [autoAlign, getMenuProps, refs.setFloating, enableFloatingStyles]);
 
   // AILabel is always size `mini`
-  const normalizedDecorator = React.useMemo(() => {
-    let element = slug ?? decorator;
-    if (element && element['type']?.displayName === 'AILabel') {
-      return /*#__PURE__*/React__default["default"].cloneElement(element, {
-        size: 'mini'
-      });
-    }
-    return /*#__PURE__*/React__default["default"].isValidElement(element) ? element : null;
-  }, [slug, decorator]);
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = utils.isComponentElement(candidate, index$1.AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
+    size: 'mini'
+  }) : null;
   const allLabelProps = getLabelProps();
   const labelProps = /*#__PURE__*/React.isValidElement(titleText) ? {
     id: allLabelProps.id
@@ -335,7 +333,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef(({
     className: wrapperClasses
   }, other), titleText && /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
     className: titleClasses
-  }, labelProps), titleText), /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
+  }, labelProps), titleText), /*#__PURE__*/React__default["default"].createElement(index$2["default"], {
     onFocus: handleFocus,
     onBlur: handleFocus,
     size: size,
@@ -366,19 +364,19 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef(({
     ref: mergedRef
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--list-box__label`
-  }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuIcon, {
+  }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default["default"].createElement(index$2["default"].MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
   })), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--list-box__inner-wrapper--decorator`
-  }, normalizedDecorator) : '', /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, menuProps, isOpen && items.map((item, index) => {
+  }, normalizedDecorator) : '', /*#__PURE__*/React__default["default"].createElement(index$2["default"].Menu, menuProps, isOpen && items.map((item, index) => {
     const isObject = item !== null && typeof item === 'object';
     const itemProps = getItemProps({
       item,
       index
     });
     const title = isObject && 'text' in item && itemToElement ? item.text : itemToString(item);
-    return /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
+    return /*#__PURE__*/React__default["default"].createElement(index$2["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
       key: itemProps.id,
       isActive: selectedItem === item,
       isHighlighted: highlightedIndex === index,

package/lib/components/FileUploader/FileUploaderButton.js

@@ -15,7 +15,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
-var uniqueId = require('../../tools/uniqueId.js');
+var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var noopFn = require('../../internal/noopFn.js');
@@ -49,7 +49,7 @@ function FileUploaderButton({
   const [prevOwnerLabelText, setPrevOwnerLabelText] = React.useState(ownerLabelText);
   const {
     current: inputId
-  } = React.useRef(id || uniqueId.uniqueId());
+  } = React.useRef(id || useId.useId());
   const inputNode = React.useRef(null);
   const classes = cx__default["default"](`${prefix}--btn`, className, {
     [`${prefix}--btn--${buttonKind}`]: buttonKind,

package/lib/components/FileUploader/FileUploaderDropContainer.js

@@ -15,7 +15,7 @@ var PropTypes = require('prop-types');
 var cx = require('classnames');
 var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
-var uniqueId = require('../../tools/uniqueId.js');
+var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var events = require('../../tools/events.js');
 var deprecate = require('../../prop-types/deprecate.js');
@@ -46,7 +46,7 @@ function FileUploaderDropContainer({
   const inputRef = React.useRef(null);
   const {
     current: uid
-  } = React.useRef(id || uniqueId.uniqueId());
+  } = React.useRef(id || useId.useId());
   const [isActive, setActive] = React.useState(false);
   const dropareaClasses = cx__default["default"](`${prefix}--file__drop-container`, `${prefix}--file-browse-btn`, {
     [`${prefix}--file__drop-container--drag-over`]: isActive,

package/lib/components/FileUploader/FileUploaderItem.js

@@ -16,7 +16,7 @@ var React = require('react');
 var Filename = require('./Filename.js');
 var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
-var uniqueId = require('../../tools/uniqueId.js');
+var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var noopFn = require('../../internal/noopFn.js');
 require('../Text/index.js');
@@ -48,7 +48,7 @@ function FileUploaderItem({
   const prefix = usePrefix.usePrefix();
   const {
     current: id
-  } = React.useRef(uuid || uniqueId.uniqueId());
+  } = React.useRef(uuid || useId.useId());
   const classes = cx__default["default"](`${prefix}--file__selected-file`, className, {
     [`${prefix}--file__selected-file--invalid`]: invalid,
     [`${prefix}--file__selected-file--md`]: size === 'md',

package/lib/components/Layer/index.d.ts

@@ -35,7 +35,5 @@ export interface LayerBaseProps {
     withBackground?: boolean;
 }
 export type LayerProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, LayerBaseProps>;
-declare const Layer: React.ForwardRefExoticComponent<LayerBaseProps & {
-    as?: React.ElementType;
-} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<any>>;
+declare const Layer: React.ForwardRefExoticComponent<Omit<LayerProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
 export { Layer };

package/lib/components/Layer/index.js

@@ -35,14 +35,15 @@ function useLayer() {
     level
   };
 }
-const Layer = /*#__PURE__*/React__default["default"].forwardRef(({
-  as,
-  className: customClassName,
-  children,
-  level: overrideLevel,
-  withBackground = false,
-  ...rest
-}, ref) => {
+const Layer = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
+  const {
+    as,
+    className: customClassName,
+    children,
+    level: overrideLevel,
+    withBackground = false,
+    ...rest
+  } = props;
   const contextLevel = React__default["default"].useContext(LayerContext.LayerContext);
   const level = overrideLevel ?? contextLevel;
   const prefix = usePrefix.usePrefix();

package/lib/components/Menu/Menu.js

@@ -44,12 +44,6 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu({
   open,
   size = 'sm',
   legacyAutoalign = 'true',
-  // TODO: `ssr-friendly` doesn't support ESLint v9.
-  // https://github.com/kopiro/eslint-plugin-ssr-friendly/issues/30
-  // https://github.com/carbon-design-system/carbon/issues/18991
-  /*
-  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
-  */
   target = environment.canUseDOM && document.body,
   x = 0,
   y = 0,

package/lib/components/Modal/Modal.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 React, { type HTMLAttributes, type ReactNode, type Ref } from 'react';
+import React, { type HTMLAttributes, type ReactNode, type RefObject } from 'react';
 import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
 export declare const ModalSizes: readonly ["xs", "sm", "md", "lg"];
 export type ModalSize = (typeof ModalSizes)[number];
@@ -57,7 +57,7 @@ export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Provide a ref to return focus to once the modal is closed.
      */
-    launcherButtonRef?: Ref<HTMLButtonElement>;
+    launcherButtonRef?: RefObject<HTMLButtonElement | null>;
     /**
      * Specify the description for the loading text
      */

package/lib/components/Modal/Modal.js

@@ -19,7 +19,7 @@ var Button = require('../Button/Button.js');
 require('../Button/Button.Skeleton.js');
 var ButtonSet = require('../ButtonSet/ButtonSet.js');
 var InlineLoading = require('../InlineLoading/InlineLoading.js');
-var index$3 = require('../Layer/index.js');
+var index$4 = require('../Layer/index.js');
 var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
 var wrapFocus = require('../../internal/wrapFocus.js');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
@@ -28,13 +28,15 @@ var usePrefix = require('../../internal/usePrefix.js');
 var usePreviousValue = require('../../internal/usePreviousValue.js');
 var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
-var index$2 = require('../IconButton/index.js');
+var index$3 = require('../IconButton/index.js');
 var noopFn = require('../../internal/noopFn.js');
 require('../Text/index.js');
 var index = require('../FeatureFlags/index.js');
 var events = require('../../tools/events.js');
 var deprecate = require('../../prop-types/deprecate.js');
-var index$1 = require('../Dialog/index.js');
+var index$2 = require('../Dialog/index.js');
+var index$1 = require('../AILabel/index.js');
+var utils = require('../../internal/utils.js');
 var warning = require('../../internal/warning.js');
 var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js');
 var Text = require('../Text/Text.js');
@@ -46,6 +48,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const ModalSizes = ['xs', 'sm', 'md', 'lg'];
+const invalidOutsideClickMessage = '`Modal`: `preventCloseOnClickOutside` should not be `false` when `passiveModal` is `false`. Non-passive `Modal`s should not be dismissible by clicking outside.';
 const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
   'aria-label': ariaLabelProp,
   children,
@@ -71,7 +74,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
   size,
   hasScrollingContent = false,
   closeButtonLabel = 'Close',
-  preventCloseOnClickOutside = false,
+  preventCloseOnClickOutside = !passiveModal,
   isFullWidth,
   launcherButtonRef,
   loadingStatus = 'inactive',
@@ -102,6 +105,9 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
   const focusTrapWithoutSentinels = index.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
   const enableDialogElement = index.useFeatureFlag('enable-dialog-element');
   process.env.NODE_ENV !== "production" ? warning.warning(!(focusTrapWithoutSentinels && enableDialogElement), '`<Modal>` detected both `focusTrapWithoutSentinels` and ' + '`enableDialogElement` feature flags are enabled. The native dialog ' + 'element handles focus, so `enableDialogElement` must be off for ' + '`focusTrapWithoutSentinels` to have any effect.') : void 0;
+  if (!passiveModal && preventCloseOnClickOutside === false) {
+    console.error(invalidOutsideClickMessage);
+  }
   function isCloseButton(element) {
     return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
   }
@@ -139,7 +145,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
     target: oldActiveNode,
     relatedTarget: currentActiveNode
   }) {
-    if (open && oldActiveNode instanceof HTMLElement && currentActiveNode instanceof HTMLElement) {
+    if (!enableDialogElement && open && oldActiveNode instanceof HTMLElement && currentActiveNode instanceof HTMLElement) {
       const {
         current: bodyNode
       } = innerModal;
@@ -158,6 +164,23 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
         selectorsFloatingMenus
       });
     }
+
+    // Adjust scroll if needed so that element with focus is not obscured by gradient
+    const modalContent = document.querySelector(`.${prefix}--modal-content`);
+    if (!modalContent || !modalContent.classList.contains(`${prefix}--modal-scroll-content`) || !currentActiveNode || !modalContent.contains(currentActiveNode)) {
+      return;
+    }
+    const lastContent = modalContent.children[modalContent.children.length - 1];
+    const gradientSpacing = modalContent.scrollHeight - lastContent.offsetTop - lastContent.clientHeight;
+    for (let elem of modalContent.children) {
+      if (elem.contains(currentActiveNode)) {
+        const spaceBelow = modalContent.clientHeight - elem.offsetTop + modalContent.scrollTop - elem.clientHeight;
+        if (spaceBelow < gradientSpacing) {
+          modalContent.scrollTop = modalContent.scrollTop + (gradientSpacing - spaceBelow);
+        }
+        break;
+      }
+    }
   }
   const onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
   const modalClasses = cx__default["default"](`${prefix}--modal`, {
@@ -258,15 +281,14 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
   }, []);
 
   // AILabel always size `sm`
-  let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
-  if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
-      size: 'sm'
-    });
-  }
+  const candidate = slug ?? decorator;
+  const candidateIsAILabel = utils.isComponentElement(candidate, index$1.AILabel);
+  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
+    size: 'sm'
+  }) : null;
   const modalButton = /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--modal-close-button`
-  }, /*#__PURE__*/React__default["default"].createElement(index$2.IconButton, {
+  }, /*#__PURE__*/React__default["default"].createElement(index$3.IconButton, {
     className: modalCloseButtonClass,
     label: closeButtonLabel,
     onClick: onRequestClose,
@@ -283,8 +305,9 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
   // alertdialog is the only permitted aria role for a native dialog element
   // https://www.w3.org/TR/html-aria/#docconformance:~:text=Role%3A-,alertdialog,-.%20(dialog%20is
   const isAlertDialog = alert && !passiveModal;
-  const modalBody = enableDialogElement ? /*#__PURE__*/React__default["default"].createElement(index$1.unstable__Dialog, {
+  const modalBody = enableDialogElement ? /*#__PURE__*/React__default["default"].createElement(index$2.unstable__Dialog, {
     open: open,
+    focusAfterCloseRef: launcherButtonRef,
     modal: true,
     ref: innerModal,
     role: isAlertDialog ? 'alertdialog' : '',
@@ -305,7 +328,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
     className: `${prefix}--modal--inner__decorator`
   }, normalizedDecorator) : '', /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--modal-close-button`
-  }, /*#__PURE__*/React__default["default"].createElement(index$2.IconButton, {
+  }, /*#__PURE__*/React__default["default"].createElement(index$3.IconButton, {
     className: modalCloseButtonClass,
     label: closeButtonLabel,
     onClick: onRequestClose,
@@ -317,7 +340,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
     "aria-hidden": "true",
     tabIndex: "-1",
     className: `${modalCloseButtonClass}__icon`
-  })))), /*#__PURE__*/React__default["default"].createElement(index$3.Layer, _rollupPluginBabelHelpers["extends"]({
+  })))), /*#__PURE__*/React__default["default"].createElement(index$4.Layer, _rollupPluginBabelHelpers["extends"]({
     ref: contentRef,
     id: modalBodyId,
     className: contentClasses
@@ -373,7 +396,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
     className: `${prefix}--modal-header__heading`
   }, modalHeading), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--modal--inner__decorator`
-  }, normalizedDecorator) : '', !passiveModal && modalButton), /*#__PURE__*/React__default["default"].createElement(index$3.Layer, _rollupPluginBabelHelpers["extends"]({
+  }, normalizedDecorator) : '', !passiveModal && modalButton), /*#__PURE__*/React__default["default"].createElement(index$4.Layer, _rollupPluginBabelHelpers["extends"]({
     ref: contentRef,
     id: modalBodyId,
     className: contentClasses
@@ -410,11 +433,11 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
     role: "link",
     className: `${prefix}--visually-hidden`
   }, "Focus sentinel"));
-  return /*#__PURE__*/React__default["default"].createElement(index$3.Layer, _rollupPluginBabelHelpers["extends"]({}, rest, {
+  return /*#__PURE__*/React__default["default"].createElement(index$4.Layer, _rollupPluginBabelHelpers["extends"]({}, rest, {
     level: 0,
     onKeyDown: handleKeyDown,
     onClick: events.composeEventHandlers([rest?.onClick, handleOnClick]),
-    onBlur: !enableDialogElement ? handleBlur : () => {},
+    onBlur: handleBlur,
     className: modalClasses,
     role: "presentation",
     ref: ref
@@ -531,7 +554,12 @@ Modal.propTypes = {
   /**
    * Prevent closing on click outside of modal
    */
-  preventCloseOnClickOutside: PropTypes__default["default"].bool,
+  preventCloseOnClickOutside: (props, propName) => {
+    if (!props.passiveModal && props[propName] === false) {
+      return new Error(invalidOutsideClickMessage);
+    }
+    return null;
+  },
   /**
    * Specify whether the Button should be disabled, or not
    */

package/lib/components/MultiSelect/FilterableMultiSelect.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { type UseComboboxProps, type UseMultipleSelectionProps } from 'downshift';
-import React, { ReactNode, FunctionComponent, ReactElement } from 'react';
+import React, { type FunctionComponent, type ReactElement, type ReactNode } from 'react';
 import { type MultiSelectSortingProps } from './MultiSelectPropTypes';
 import { type ListBoxSize, type ListBoxType } from '../ListBox';
 import { TranslateWithId } from '../../types/common';