@carbon/react 1.103.0 → 1.104.0-rc.0

package/lib/components/Dialog/Dialog.js

@@ -1,605 +1,336 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-'use strict';
-
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var PropTypes = require('prop-types');
-var React = require('react');
-var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
-var usePrefix = require('../../internal/usePrefix.js');
-var cx = require('classnames');
-var iconsReact = require('@carbon/icons-react');
-var index = require('../IconButton/index.js');
-var noopFn = require('../../internal/noopFn.js');
-var Text = require('../Text/Text.js');
-require('../Text/TextDirection.js');
-var index$1 = require('../Layer/index.js');
-var ButtonSet = require('../ButtonSet/ButtonSet.js');
-var Button = require('../Button/Button.js');
-require('../Button/Button.Skeleton.js');
-var useId = require('../../internal/useId.js');
-var InlineLoading = require('../InlineLoading/InlineLoading.js');
-var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.js');
-
-const DialogContext = /*#__PURE__*/React.createContext({});
+const require_runtime = require('../../_virtual/_rolldown/runtime.js');
+const require_usePrefix = require('../../internal/usePrefix.js');
+const require_Text = require('../Text/Text.js');
+const require_useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
+const require_useId = require('../../internal/useId.js');
+const require_noopFn = require('../../internal/noopFn.js');
+const require_index = require('../IconButton/index.js');
+const require_index$1 = require('../Button/index.js');
+const require_index$2 = require('../ButtonSet/index.js');
+const require_index$3 = require('../Layer/index.js');
+const require_InlineLoading = require('../InlineLoading/InlineLoading.js');
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let prop_types = require("prop-types");
+prop_types = require_runtime.__toESM(prop_types);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _carbon_icons_react = require("@carbon/icons-react");
+let es_toolkit_compat = require("es-toolkit/compat");
 
+//#region src/components/Dialog/Dialog.tsx
 /**
- * ----------
- * Dialog
- * ----------
- */
-
-const Dialog = /*#__PURE__*/React.forwardRef(({
-  children,
-  className,
-  focusAfterCloseRef,
-  modal,
-  onCancel = noopFn.noopFn,
-  onClick = noopFn.noopFn,
-  onClose = noopFn.noopFn,
-  onRequestClose = noopFn.noopFn,
-  open = false,
-  role,
-  ariaLabel,
-  ariaLabelledBy,
-  ariaDescribedBy,
-  ...rest
-}, forwardRef) => {
-  const prefix = usePrefix.usePrefix();
-  const dialogId = useId.useId();
-  const titleId = `${prefix}--dialog-header__heading--${dialogId}`;
-  const subtitleId = `${prefix}--dialog-header__label--${dialogId}`;
-
-  // This component needs access to a ref, placed on the dialog, to call the
-  // various imperative dialog functions (show(), close(), etc.).
-  // If the parent component has not passed a ref for forwardRef, forwardRef
-  // will be null. A "backup" ref is needed to ensure the dialog's instance
-  // methods can always be called within this component.
-  const backupRef = React.useRef(null);
-  const ref = forwardRef ?? backupRef;
-
-  // Clicks on the backdrop of an open modal dialog should request the consuming component to close
-  // the dialog. Clicks elsewhere, or on non-modal dialogs should not request
-  // to close the dialog.
-  function handleModalBackdropClick(e) {
-    if (open && modal && e.target === ref.current) {
-      onRequestClose(e);
-    }
-  }
-  function handleClick(e) {
-    handleModalBackdropClick(e);
-
-    // onClick should always be called, no matter if the target is a modal
-    // dialog, modal dialog backdrop, or non-modal dialog.
-    onClick(e);
-  }
-  React.useEffect(() => {
-    if (ref.current) {
-      if (open) {
-        if (modal) {
-          // Display the dialog as a modal, over the top of any other dialogs
-          // that might be present. Everything outside the dialog are inert
-          // with interactions outside the dialog being blocked.
-          ref.current.showModal();
-        } else {
-          // Display the dialog modelessly, i.e. still allowing interaction
-          // with content outside of the dialog.
-          ref.current.show();
-        }
-      } else {
-        ref.current.close();
-      }
-    }
-    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
-  }, [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(`${prefix}--dialog-container`);
-  const contextValue = {
-    dialogId,
-    titleId,
-    subtitleId,
-    isOpen: open
-  };
-  React.useEffect(() => {
-    if (ref.current && open && !ariaLabel && !ariaLabelledBy) {
-      const title = ref.current.querySelector(`.${prefix}--dialog-header__heading`);
-
-      // Set aria-labelledby to the title's ID if it exists
-      if (title && title.id) {
-        ref.current.setAttribute('aria-labelledby', title.id);
-      }
-    }
-    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
-  }, [open, ariaLabel, ariaLabelledBy, prefix]);
-  return /*#__PURE__*/React.createElement(DialogContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/React.createElement("dialog", _rollupPluginBabelHelpers.extends({}, rest, {
-    className: cx(`${prefix}--dialog`, {
-      [`${prefix}--dialog--modal`]: modal
-    }, className),
-    ref: ref,
-    onCancel: onCancel,
-    onClick: handleClick,
-    onClose: onClose,
-    role: role,
-    "aria-label": ariaLabel,
-    "aria-labelledby": !ariaLabel ? ariaLabelledBy || titleId : undefined,
-    "aria-describedby": ariaDescribedBy
-  }), /*#__PURE__*/React.createElement("div", {
-    className: containerClasses
-  }, children)));
+* Copyright IBM Corp. 2025, 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const DialogContext = (0, react.createContext)({});
+const Dialog = react.default.forwardRef(({ children, className, focusAfterCloseRef, modal, onCancel = require_noopFn.noopFn, onClick = require_noopFn.noopFn, onClose = require_noopFn.noopFn, onRequestClose = require_noopFn.noopFn, open = false, role, ariaLabel, ariaLabelledBy, ariaDescribedBy, ...rest }, forwardRef) => {
+	const prefix = require_usePrefix.usePrefix();
+	const dialogId = require_useId.useId();
+	const titleId = `${prefix}--dialog-header__heading--${dialogId}`;
+	const subtitleId = `${prefix}--dialog-header__label--${dialogId}`;
+	const backupRef = (0, react.useRef)(null);
+	const ref = forwardRef ?? backupRef;
+	function handleModalBackdropClick(e) {
+		if (open && modal && e.target === ref.current) onRequestClose(e);
+	}
+	function handleClick(e) {
+		handleModalBackdropClick(e);
+		onClick(e);
+	}
+	(0, react.useEffect)(() => {
+		if (ref.current) if (open) if (modal) ref.current.showModal();
+		else ref.current.show();
+		else ref.current.close();
+	}, [modal, open]);
+	(0, react.useEffect)(() => {
+		if (!open && focusAfterCloseRef) {
+			const moveFocus = setTimeout(() => {
+				focusAfterCloseRef.current?.focus();
+			});
+			return () => {
+				clearTimeout(moveFocus);
+			};
+		}
+	}, [open, focusAfterCloseRef]);
+	const containerClasses = (0, classnames.default)(`${prefix}--dialog-container`);
+	const contextValue = {
+		dialogId,
+		titleId,
+		subtitleId,
+		isOpen: open
+	};
+	(0, react.useEffect)(() => {
+		if (ref.current && open && !ariaLabel && !ariaLabelledBy) {
+			const title = ref.current.querySelector(`.${prefix}--dialog-header__heading`);
+			if (title && title.id) ref.current.setAttribute("aria-labelledby", title.id);
+		}
+	}, [
+		open,
+		ariaLabel,
+		ariaLabelledBy,
+		prefix
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dialog", {
+			...rest,
+			className: (0, classnames.default)(`${prefix}--dialog`, { [`${prefix}--dialog--modal`]: modal }, className),
+			ref,
+			onCancel,
+			onClick: handleClick,
+			onClose,
+			role,
+			"aria-label": ariaLabel,
+			"aria-labelledby": !ariaLabel ? ariaLabelledBy || titleId : void 0,
+			"aria-describedby": ariaDescribedBy,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: containerClasses,
+				children
+			})
+		})
+	});
 });
-Dialog.displayName = 'Dialog';
+Dialog.displayName = "Dialog";
 Dialog.propTypes = {
-  /**
-   * Provide children to be rendered inside of the Dialog
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be applied to the modal root node
-   */
-  className: PropTypes.string,
-  /**
-   * Provide a ref to return focus to once the dialog is closed.
-   */
-  focusAfterCloseRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
-  })]),
-  /**
-   * Modal specifies whether the Dialog is modal or non-modal. This cannot be
-   * changed while open=true
-   */
-  modal: PropTypes.bool,
-  /**
-   * Specify a handler for closing Dialog.
-   * The handler should care of closing Dialog, e.g. changing `open` prop.
-   */
-  onRequestClose: PropTypes.func,
-  /**
-   * open initial state
-   */
-  open: PropTypes.bool,
-  /**
-   * Specify the role of the dialog for accessibility
-   */
-  role: PropTypes.oneOf(['dialog', 'alertdialog']),
-  /**
-   * Specify a label for screen readers
-   */
-  'aria-label': PropTypes.string,
-  /**
-   * Specify the ID of an element that labels this dialog
-   */
-  'aria-labelledby': PropTypes.string,
-  /**
-   * Specify the ID of an element that describes this dialog
-   */
-  ariaDescribedBy: PropTypes.string
+	children: prop_types.default.node,
+	className: prop_types.default.string,
+	focusAfterCloseRef: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.shape({ current: prop_types.default.any })]),
+	modal: prop_types.default.bool,
+	onRequestClose: prop_types.default.func,
+	open: prop_types.default.bool,
+	role: prop_types.default.oneOf(["dialog", "alertdialog"]),
+	"aria-label": prop_types.default.string,
+	"aria-labelledby": prop_types.default.string,
+	ariaDescribedBy: prop_types.default.string
 };
-
-/**
- * -------------
- * DialogHeader
- * -------------
- */
-
-const DialogHeader = /*#__PURE__*/React.forwardRef(({
-  children,
-  ...rest
-}, ref) => {
-  const prefix = usePrefix.usePrefix();
-  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
-    className: `${prefix}--dialog__header`,
-    ref: ref
-  }, rest), children);
+const DialogHeader = react.default.forwardRef(({ children, ...rest }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `${require_usePrefix.usePrefix()}--dialog__header`,
+		ref,
+		...rest,
+		children
+	});
 });
-DialogHeader.displayName = 'DialogHeader';
-DialogHeader.propTypes = {
-  /**
-   * Provide the contents to be rendered inside of this component
-   */
-  children: PropTypes.node
-};
-
-/**
- * ---------------
- * DialogControls
- * ---------------
- */
-
-const DialogControls = /*#__PURE__*/React.forwardRef(({
-  children,
-  ...rest
-}, ref) => {
-  const prefix = usePrefix.usePrefix();
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452
-    // @ts-ignore
-    React.createElement("div", _rollupPluginBabelHelpers.extends({
-      className: `${prefix}--dialog__header-controls`,
-      ref: ref
-    }, rest), children)
-  );
+DialogHeader.displayName = "DialogHeader";
+DialogHeader.propTypes = { children: prop_types.default.node };
+const DialogControls = react.default.forwardRef(({ children, ...rest }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `${require_usePrefix.usePrefix()}--dialog__header-controls`,
+		ref,
+		...rest,
+		children
+	});
 });
-DialogControls.displayName = 'DialogControls';
-DialogControls.propTypes = {
-  /**
-   * Provide children to be rendered inside of this component
-   */
-  children: PropTypes.node
-};
-
-/**
- * -------------------
- * DialogCloseButton
- * -------------------
- */
-
-const DialogCloseButton = /*#__PURE__*/React.forwardRef(({
-  onClick,
-  ...rest
-}, ref) => {
-  const prefix = usePrefix.usePrefix();
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452
-    // @ts-ignore
-    React.createElement(index.IconButton, _rollupPluginBabelHelpers.extends({
-      kind: "ghost",
-      className: `${prefix}--dialog__close`,
-      label: "Close",
-      title: "Close",
-      "aria-label": "Close",
-      align: "left",
-      onClick: onClick,
-      ref: ref
-    }, rest), /*#__PURE__*/React.createElement(iconsReact.Close, {
-      size: 20,
-      "aria-hidden": "true",
-      tabIndex: -1,
-      className: `${prefix}--icon__close`
-    }))
-  );
+DialogControls.displayName = "DialogControls";
+DialogControls.propTypes = { children: prop_types.default.node };
+const DialogCloseButton = react.default.forwardRef(({ onClick, ...rest }, ref) => {
+	const prefix = require_usePrefix.usePrefix();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.IconButton, {
+		kind: "ghost",
+		className: `${prefix}--dialog__close`,
+		label: "Close",
+		title: "Close",
+		"aria-label": "Close",
+		align: "left",
+		onClick,
+		ref,
+		...rest,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.Close, {
+			size: 20,
+			"aria-hidden": "true",
+			tabIndex: -1,
+			className: `${prefix}--icon__close`
+		})
+	});
 });
-DialogCloseButton.displayName = 'DialogCloseButton';
-DialogCloseButton.propTypes = {
-  /**
-   * Specify a click handler applied to the IconButton
-   */
-  onClick: PropTypes.func
-};
-
-/**
- * ------------
- * DialogTitle
- * ------------
- */
-
-const DialogTitle = /*#__PURE__*/React.forwardRef(({
-  children,
-  className,
-  id,
-  ...rest
-}, ref) => {
-  const prefix = usePrefix.usePrefix();
-  const {
-    titleId
-  } = React.useContext(DialogContext);
-  const headingId = id || titleId;
-  return /*#__PURE__*/React.createElement(Text.Text, _rollupPluginBabelHelpers.extends({
-    as: "h2",
-    id: headingId,
-    className: cx(`${prefix}--dialog-header__heading`, className),
-    ref: ref
-  }, rest), children);
+DialogCloseButton.displayName = "DialogCloseButton";
+DialogCloseButton.propTypes = { onClick: prop_types.default.func };
+const DialogTitle = react.default.forwardRef(({ children, className, id, ...rest }, ref) => {
+	const prefix = require_usePrefix.usePrefix();
+	const { titleId } = (0, react.useContext)(DialogContext);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+		as: "h2",
+		id: id || titleId,
+		className: (0, classnames.default)(`${prefix}--dialog-header__heading`, className),
+		ref,
+		...rest,
+		children
+	});
 });
-DialogTitle.displayName = 'DialogTitle';
+DialogTitle.displayName = "DialogTitle";
 DialogTitle.propTypes = {
-  /**
-   * Provide the contents to be rendered inside of this component
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be applied to the title node
-   */
-  className: PropTypes.string,
-  /**
-   * Specify an optional id for the title element
-   */
-  id: PropTypes.string
+	children: prop_types.default.node,
+	className: prop_types.default.string,
+	id: prop_types.default.string
 };
-
-/**
- * ---------------
- * DialogSubtitle
- * ---------------
- */
-
-const DialogSubtitle = /*#__PURE__*/React.forwardRef(({
-  children,
-  className,
-  id,
-  ...rest
-}, ref) => {
-  const prefix = usePrefix.usePrefix();
-  const {
-    subtitleId
-  } = React.useContext(DialogContext);
-  const labelId = id || subtitleId;
-  return /*#__PURE__*/React.createElement(Text.Text, _rollupPluginBabelHelpers.extends({
-    as: "h2",
-    id: labelId,
-    className: cx(`${prefix}--dialog-header__label`, className),
-    ref: ref
-  }, rest), children);
+const DialogSubtitle = react.default.forwardRef(({ children, className, id, ...rest }, ref) => {
+	const prefix = require_usePrefix.usePrefix();
+	const { subtitleId } = (0, react.useContext)(DialogContext);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+		as: "h2",
+		id: id || subtitleId,
+		className: (0, classnames.default)(`${prefix}--dialog-header__label`, className),
+		ref,
+		...rest,
+		children
+	});
 });
-DialogSubtitle.displayName = 'DialogSubtitle';
+DialogSubtitle.displayName = "DialogSubtitle";
 DialogSubtitle.propTypes = {
-  /**
-   * Provide the contents to be rendered inside of this component
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be applied to the subtitle node
-   */
-  className: PropTypes.string,
-  /**
-   * Specify an optional id for the subtitle element
-   */
-  id: PropTypes.string
+	children: prop_types.default.node,
+	className: prop_types.default.string,
+	id: prop_types.default.string
 };
-
-/**
- * -----------
- * DialogBody
- * -----------
- */
-
-const DialogBody = /*#__PURE__*/React.forwardRef(({
-  children,
-  className,
-  hasScrollingContent,
-  ...rest
-}, ref) => {
-  const prefix = usePrefix.usePrefix();
-  const contentRef = React.useRef(null);
-  const [isScrollable, setIsScrollable] = React.useState(false);
-  const dialogId = useId.useId();
-  const dialogBodyId = `${prefix}--dialog-body--${dialogId}`;
-  useIsomorphicEffect.default(() => {
-    if (contentRef.current) {
-      setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
-    }
-    function handler() {
-      if (contentRef.current) {
-        setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
-      }
-    }
-    const debouncedHandler = debounce.debounce(handler, 200);
-    window.addEventListener('resize', debouncedHandler);
-    return () => {
-      debouncedHandler.cancel();
-      window.removeEventListener('resize', debouncedHandler);
-    };
-  }, []);
-  const contentClasses = cx(`${prefix}--dialog-content`, {
-    [`${prefix}--dialog-scroll-content`]: hasScrollingContent || isScrollable
-  }, className);
-  const hasScrollingContentProps = hasScrollingContent || isScrollable ? {
-    tabIndex: 0,
-    role: 'region'
-  } : {};
-  const combinedRef = el => {
-    if (typeof ref === 'function') {
-      ref(el);
-    } else if (ref) {
-      ref.current = el;
-    }
-    contentRef.current = el;
-  };
-  return /*#__PURE__*/React.createElement(index$1.Layer, _rollupPluginBabelHelpers.extends({
-    ref: combinedRef,
-    id: dialogBodyId,
-    className: contentClasses
-  }, hasScrollingContentProps, rest), children);
+const DialogBody = react.default.forwardRef(({ children, className, hasScrollingContent, ...rest }, ref) => {
+	const prefix = require_usePrefix.usePrefix();
+	const contentRef = (0, react.useRef)(null);
+	const [isScrollable, setIsScrollable] = (0, react.useState)(false);
+	const dialogBodyId = `${prefix}--dialog-body--${require_useId.useId()}`;
+	require_useIsomorphicEffect.default(() => {
+		if (contentRef.current) setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
+		function handler() {
+			if (contentRef.current) setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
+		}
+		const debouncedHandler = (0, es_toolkit_compat.debounce)(handler, 200);
+		window.addEventListener("resize", debouncedHandler);
+		return () => {
+			debouncedHandler.cancel();
+			window.removeEventListener("resize", debouncedHandler);
+		};
+	}, []);
+	const contentClasses = (0, classnames.default)(`${prefix}--dialog-content`, { [`${prefix}--dialog-scroll-content`]: hasScrollingContent || isScrollable }, className);
+	const hasScrollingContentProps = hasScrollingContent || isScrollable ? {
+		tabIndex: 0,
+		role: "region"
+	} : {};
+	const combinedRef = (el) => {
+		if (typeof ref === "function") ref(el);
+		else if (ref) ref.current = el;
+		contentRef.current = el;
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$3.Layer, {
+		ref: combinedRef,
+		id: dialogBodyId,
+		className: contentClasses,
+		...hasScrollingContentProps,
+		...rest,
+		children
+	});
 });
-DialogBody.displayName = 'DialogBody';
+DialogBody.displayName = "DialogBody";
 DialogBody.propTypes = {
-  /**
-   * Provide the contents to be rendered inside of this component
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be applied to the body node
-   */
-  className: PropTypes.string,
-  /**
-   * Specify whether the content has overflow that should be scrollable
-   */
-  hasScrollingContent: PropTypes.bool
+	children: prop_types.default.node,
+	className: prop_types.default.string,
+	hasScrollingContent: prop_types.default.bool
 };
-
-/**
- * -------------
- * DialogFooter
- * -------------
- */
-
-const DialogFooter = /*#__PURE__*/React.forwardRef(({
-  children,
-  className,
-  onRequestClose = noopFn.noopFn,
-  onSecondarySubmit,
-  onRequestSubmit = noopFn.noopFn,
-  primaryButtonText = 'Save',
-  primaryButtonDisabled = false,
-  secondaryButtonText = 'Cancel',
-  secondaryButtons,
-  loadingStatus = 'inactive',
-  loadingDescription,
-  loadingIconDescription,
-  onLoadingSuccess = noopFn.noopFn,
-  danger = false,
-  ...rest
-}, ref) => {
-  const prefix = usePrefix.usePrefix();
-  const button = React.useRef(null);
-  const {
-    isOpen
-  } = React.useContext(DialogContext);
-  const [secondaryButtonRef, setSecondaryButtonRef] = React.useState(null);
-  React.useEffect(() => {
-    if (danger && secondaryButtonRef) {
-      const focusFrame = requestAnimationFrame(() => {
-        secondaryButtonRef.focus();
-      });
-      return () => cancelAnimationFrame(focusFrame);
-    }
-  }, [danger, secondaryButtonRef, isOpen]);
-  const classes = cx(`${prefix}--dialog-footer`, className, {
-    [`${prefix}--dialog-footer--three-button`]: Array.isArray(secondaryButtons) && secondaryButtons.length === 2
-  });
-  const loadingActive = loadingStatus !== 'inactive';
-  const primaryButtonClass = cx({
-    [`${prefix}--btn--loading`]: loadingStatus !== 'inactive'
-  });
-  const onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
-  if (children) {
-    return /*#__PURE__*/React.createElement(ButtonSet.default, _rollupPluginBabelHelpers.extends({
-      className: classes,
-      ref: ref
-    }, rest), children);
-  }
-  return /*#__PURE__*/React.createElement(ButtonSet.default, _rollupPluginBabelHelpers.extends({
-    className: classes,
-    "aria-busy": loadingActive,
-    ref: ref
-  }, rest), Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map(({
-    buttonText,
-    onClick: onButtonClick
-  }, i) => /*#__PURE__*/React.createElement(Button.default, {
-    key: `${buttonText}-${i}`
-    // eslint-disable-next-line jsx-a11y/no-autofocus -- https://github.com/carbon-design-system/carbon/issues/20452
-    ,
-    autoFocus: danger,
-    kind: "secondary",
-    ref: i === 0 && danger ? setSecondaryButtonRef : undefined,
-    onClick: onButtonClick
-  }, buttonText)) : secondaryButtonText && /*#__PURE__*/React.createElement(Button.default, {
-    ref: danger ? setSecondaryButtonRef : undefined,
-    disabled: loadingActive,
-    kind: "secondary"
-    // eslint-disable-next-line jsx-a11y/no-autofocus -- https://github.com/carbon-design-system/carbon/issues/20452
-    ,
-    autoFocus: danger,
-    onClick: onSecondaryButtonClick
-  }, secondaryButtonText), /*#__PURE__*/React.createElement(Button.default, {
-    className: primaryButtonClass,
-    kind: danger ? 'danger' : 'primary',
-    disabled: loadingActive || primaryButtonDisabled,
-    onClick: onRequestSubmit,
-    ref: button
-  }, loadingStatus === 'inactive' ? primaryButtonText : /*#__PURE__*/React.createElement(InlineLoading.default, {
-    status: loadingStatus,
-    description: loadingDescription,
-    iconDescription: loadingIconDescription,
-    className: `${prefix}--inline-loading--btn`,
-    onSuccess: onLoadingSuccess
-  })));
+const DialogFooter = react.default.forwardRef(({ children, className, onRequestClose = require_noopFn.noopFn, onSecondarySubmit, onRequestSubmit = require_noopFn.noopFn, primaryButtonText = "Save", primaryButtonDisabled = false, secondaryButtonText = "Cancel", secondaryButtons, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = require_noopFn.noopFn, danger = false, ...rest }, ref) => {
+	const prefix = require_usePrefix.usePrefix();
+	const button = (0, react.useRef)(null);
+	const { isOpen } = (0, react.useContext)(DialogContext);
+	const [secondaryButtonRef, setSecondaryButtonRef] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		if (danger && secondaryButtonRef) {
+			const focusFrame = requestAnimationFrame(() => {
+				secondaryButtonRef.focus();
+			});
+			return () => cancelAnimationFrame(focusFrame);
+		}
+	}, [
+		danger,
+		secondaryButtonRef,
+		isOpen
+	]);
+	const classes = (0, classnames.default)(`${prefix}--dialog-footer`, className, { [`${prefix}--dialog-footer--three-button`]: Array.isArray(secondaryButtons) && secondaryButtons.length === 2 });
+	const loadingActive = loadingStatus !== "inactive";
+	const primaryButtonClass = (0, classnames.default)({ [`${prefix}--btn--loading`]: loadingStatus !== "inactive" });
+	const onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
+	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.default, {
+		className: classes,
+		ref,
+		...rest,
+		children
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index$2.default, {
+		className: classes,
+		"aria-busy": loadingActive,
+		ref,
+		...rest,
+		children: [Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map(({ buttonText, onClick: onButtonClick }, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
+			autoFocus: danger,
+			kind: "secondary",
+			ref: i === 0 && danger ? setSecondaryButtonRef : void 0,
+			onClick: onButtonClick,
+			children: buttonText
+		}, `${buttonText}-${i}`)) : secondaryButtonText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
+			ref: danger ? setSecondaryButtonRef : void 0,
+			disabled: loadingActive,
+			kind: "secondary",
+			autoFocus: danger,
+			onClick: onSecondaryButtonClick,
+			children: secondaryButtonText
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
+			className: primaryButtonClass,
+			kind: danger ? "danger" : "primary",
+			disabled: loadingActive || primaryButtonDisabled,
+			onClick: onRequestSubmit,
+			ref: button,
+			children: loadingStatus === "inactive" ? primaryButtonText : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InlineLoading.default, {
+				status: loadingStatus,
+				description: loadingDescription,
+				iconDescription: loadingIconDescription,
+				className: `${prefix}--inline-loading--btn`,
+				onSuccess: onLoadingSuccess
+			})
+		})]
+	});
 });
-DialogFooter.displayName = 'DialogFooter';
+DialogFooter.displayName = "DialogFooter";
 DialogFooter.propTypes = {
-  /**
-   * Provide the contents to be rendered inside of this component
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be applied to the footer node
-   */
-  className: PropTypes.string,
-  /**
-   * Specify a handler for closing dialog.
-   */
-  onRequestClose: PropTypes.func,
-  /**
-   * Specify a handler for the secondary button.
-   */
-  onSecondarySubmit: PropTypes.func,
-  /**
-   * Specify a handler for submitting dialog.
-   */
-  onRequestSubmit: PropTypes.func,
-  /**
-   * Specify the text for the primary button
-   */
-  primaryButtonText: PropTypes.node,
-  /**
-   * Specify whether the Button should be disabled, or not
-   */
-  primaryButtonDisabled: PropTypes.bool,
-  /**
-   * Specify the text for the secondary button
-   */
-  secondaryButtonText: PropTypes.node,
-  /**
-   * Specify an array of config objects for secondary buttons
-   */
-  secondaryButtons: (props, propName, componentName) => {
-    if (props.secondaryButtons) {
-      if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) {
-        return new Error(`${propName} needs to be an array of two button config objects`);
-      }
-      const shape = {
-        buttonText: PropTypes.node,
-        onClick: PropTypes.func
-      };
-      props[propName].forEach(secondaryButton => {
-        PropTypes.checkPropTypes(shape, secondaryButton, propName, componentName);
-      });
-    }
-    return null;
-  },
-  /**
-   * Specify whether the Dialog is for dangerous actions
-   */
-  danger: PropTypes.bool,
-  /**
-   * Specify loading status
-   */
-  loadingStatus: PropTypes.oneOf(['inactive', 'active', 'finished', 'error']),
-  /**
-   * Specify the description for the loading text
-   */
-  loadingDescription: PropTypes.string,
-  /**
-   * Specify the description for the loading icon
-   */
-  loadingIconDescription: PropTypes.string,
-  /**
-   * Provide an optional handler to be invoked when loading is
-   * successful
-   */
-  onLoadingSuccess: PropTypes.func
+	children: prop_types.default.node,
+	className: prop_types.default.string,
+	onRequestClose: prop_types.default.func,
+	onSecondarySubmit: prop_types.default.func,
+	onRequestSubmit: prop_types.default.func,
+	primaryButtonText: prop_types.default.node,
+	primaryButtonDisabled: prop_types.default.bool,
+	secondaryButtonText: prop_types.default.node,
+	secondaryButtons: (props, propName, componentName) => {
+		if (props.secondaryButtons) {
+			if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) return /* @__PURE__ */ new Error(`${propName} needs to be an array of two button config objects`);
+			const shape = {
+				buttonText: prop_types.default.node,
+				onClick: prop_types.default.func
+			};
+			props[propName].forEach((secondaryButton) => {
+				prop_types.default.checkPropTypes(shape, secondaryButton, propName, componentName);
+			});
+		}
+		return null;
+	},
+	danger: prop_types.default.bool,
+	loadingStatus: prop_types.default.oneOf([
+		"inactive",
+		"active",
+		"finished",
+		"error"
+	]),
+	loadingDescription: prop_types.default.string,
+	loadingIconDescription: prop_types.default.string,
+	onLoadingSuccess: prop_types.default.func
 };
 
+//#endregion
 exports.Dialog = Dialog;
 exports.DialogBody = DialogBody;
 exports.DialogCloseButton = DialogCloseButton;
@@ -607,4 +338,4 @@ exports.DialogControls = DialogControls;
 exports.DialogFooter = DialogFooter;
 exports.DialogHeader = DialogHeader;
 exports.DialogSubtitle = DialogSubtitle;
-exports.DialogTitle = DialogTitle;
+exports.DialogTitle = DialogTitle;