@carbon/react 1.89.0-rc.1 → 1.89.0

package/es/components/ComposedModal/ComposedModal.js

@@ -24,7 +24,7 @@ import { match } from '../../internal/keyboard/match.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import { deprecate } from '../../prop-types/deprecate.js';
-import { unstable__Dialog } from '../Dialog/index.js';
+import { Dialog } from '../Dialog/Dialog.js';
 import { warning } from '../../internal/warning.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
@@ -304,7 +304,7 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
     size: 'sm'
   }) : null;
-  const modalBody = enableDialogElement ? /*#__PURE__*/React.createElement(unstable__Dialog, {
+  const modalBody = enableDialogElement ? /*#__PURE__*/React.createElement(Dialog, {
     open: open,
     focusAfterCloseRef: launcherButtonRef,
     modal: true,

package/es/components/DataTable/DataTable.js

@@ -549,9 +549,16 @@ const DataTable = props => {
    * @param headerKey - The field for the header that we are sorting by.
    */
   const handleSortBy = headerKey => () => {
-    setState(prev => getNextSortState(props, prev, {
-      key: headerKey
-    }));
+    setState(prev => {
+      const sortState = getNextSortState(props, prev, {
+        key: headerKey
+      });
+      return {
+        ...prev,
+        // Preserve ALL existing state
+        ...sortState // Then apply only the sorting changes
+      };
+    });
   };
 
   /**

package/es/components/Dialog/Dialog.d.ts

@@ -0,0 +1,245 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * 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 RefObject } from 'react';
+import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
+/**
+ * ----------
+ * Dialog
+ * ----------
+ */
+interface DialogProps extends HTMLAttributes<HTMLDialogElement> {
+    /**
+     * Provide the contents of the Dialog
+     */
+    children?: React.ReactNode;
+    /**
+     * 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
+     */
+    modal?: boolean;
+    /**
+     * Specify a handler for the dialog's cancel event.
+     * The browser fires this event when the user presses the Esc key and is cancelable.
+     */
+    onCancel?: React.ReactEventHandler<HTMLDialogElement>;
+    /**
+     * Specify a click handler applied to the dialog.
+     */
+    onClick?: React.ReactEventHandler<HTMLDialogElement>;
+    /**
+     * Specify a handler the dialog's close event.
+     * The browser fires this event after the dialog has closed.
+     */
+    onClose?: React.ReactEventHandler<HTMLDialogElement>;
+    /**
+     * Specify a handler for closing Dialog.
+     * The handler should care of closing Dialog, e.g. changing `open` prop.
+     */
+    onRequestClose?: React.ReactEventHandler<HTMLElement>;
+    /**
+     * Specify whether the Dialog is currently open
+     */
+    open?: boolean;
+    /**
+     * Specify the role of the dialog for accessibility
+     * 'dialog' is the default, but 'alertdialog' can be used for important messages requiring user attention
+     */
+    role?: '' | 'alertdialog';
+    /**
+     * Specify a label for screen readers
+     */
+    ariaLabel?: string;
+    /**
+     * Specify the ID of an element that labels this dialog
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Specify the ID of an element that describes this dialog
+     */
+    ariaDescribedBy?: string;
+}
+declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<unknown>>;
+/**
+ * -------------
+ * DialogHeader
+ * -------------
+ */
+interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Provide the contents to be rendered inside of this component
+     */
+    children?: React.ReactNode;
+}
+declare const DialogHeader: React.ForwardRefExoticComponent<DialogHeaderProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ---------------
+ * DialogControls
+ * ---------------
+ */
+interface DialogControlsProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Provide the contents to be rendered inside of this component
+     */
+    children?: React.ReactNode;
+}
+declare const DialogControls: React.ForwardRefExoticComponent<DialogControlsProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * -------------------
+ * DialogCloseButton
+ * -------------------
+ */
+interface DialogCloseButtonProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify a click handler applied to the IconButton
+     */
+    onClick?: React.MouseEventHandler;
+}
+declare const DialogCloseButton: React.ForwardRefExoticComponent<DialogCloseButtonProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ------------
+ * DialogTitle
+ * ------------
+ */
+interface DialogTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * Provide the contents of the DialogTitle
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the title node
+     */
+    className?: string;
+    /**
+     * Specify an optional id for the title element
+     */
+    id?: string;
+}
+declare const DialogTitle: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+/**
+ * ---------------
+ * DialogSubtitle
+ * ---------------
+ */
+interface DialogSubtitleProps extends HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * Provide the contents of the DialogSubtitle
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the subtitle node
+     */
+    className?: string;
+    /**
+     * Specify an optional id for the subtitle element
+     */
+    id?: string;
+}
+declare const DialogSubtitle: React.ForwardRefExoticComponent<DialogSubtitleProps & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * -----------
+ * DialogBody
+ * -----------
+ */
+interface DialogBodyProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Provide the contents of the DialogBody
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the body node
+     */
+    className?: string;
+    /**
+     * Specify whether the content has overflow that should be scrollable
+     */
+    hasScrollingContent?: boolean;
+}
+declare const DialogBody: React.ForwardRefExoticComponent<DialogBodyProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * -------------
+ * DialogFooter
+ * -------------
+ */
+interface DialogFooterProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Provide the contents of the DialogFooter
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the footer node
+     */
+    className?: string;
+    /**
+     * Specify a handler for closing dialog (secondary button)
+     */
+    onRequestClose?: React.ReactEventHandler<HTMLElement>;
+    /**
+     * Specify a handler for the secondary button.
+     * Useful if separate handler from `onRequestClose` is desirable
+     */
+    onSecondarySubmit?: React.ReactEventHandler<HTMLElement>;
+    /**
+     * Specify a handler for submitting dialog (primary button)
+     */
+    onRequestSubmit?: React.ReactEventHandler<HTMLElement>;
+    /**
+     * Specify the text for the primary button
+     */
+    primaryButtonText?: React.ReactNode;
+    /**
+     * Specify whether the Button should be disabled, or not
+     */
+    primaryButtonDisabled?: boolean;
+    /**
+     * Specify the text for the secondary button
+     */
+    secondaryButtonText?: React.ReactNode;
+    /**
+     * Specify an array of config objects for secondary buttons
+     */
+    secondaryButtons?: Array<{
+        buttonText: React.ReactNode;
+        onClick: React.MouseEventHandler<HTMLButtonElement>;
+    }>;
+    /**
+     * Specify whether the Dialog is for dangerous actions
+     */
+    danger?: boolean;
+    /**
+     * Specify loading status
+     */
+    loadingStatus?: InlineLoadingStatus;
+    /**
+     * Specify the description for the loading text
+     */
+    loadingDescription?: string;
+    /**
+     * Specify the description for the loading icon
+     */
+    loadingIconDescription?: string;
+    /**
+     * Specify an optional handler to be invoked when loading is
+     * successful
+     */
+    onLoadingSuccess?: () => void;
+}
+declare const DialogFooter: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * -------
+ * Exports
+ * -------
+ */
+export { Dialog, DialogHeader, DialogControls, DialogCloseButton, DialogTitle, DialogSubtitle, DialogBody, DialogFooter, };
+export type { DialogProps, DialogHeaderProps, DialogControlsProps, DialogCloseButtonProps, DialogTitleProps, DialogSubtitleProps, DialogBodyProps, DialogFooterProps, };