@carbon/react 1.89.0-rc.0 → 1.89.0

package/es/components/AILabel/index.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import { ToggletipBaseProps } from '../Toggletip';
 import type { DeprecatedPopoverAlignment, NewPopoverAlignment, PopoverAlignment } from '../Popover';
 export type AILabelContentProps = React.HTMLAttributes<HTMLSpanElement>;
 export declare const AILabelContent: React.ForwardRefExoticComponent<AILabelContentProps & React.RefAttributes<unknown>>;
@@ -17,15 +18,11 @@ export declare const AILabelActions: React.ForwardRefExoticComponent<AILabelActi
 export type DeprecatedAlignment = DeprecatedPopoverAlignment;
 export type NewAlignment = NewPopoverAlignment;
 export type Alignment = PopoverAlignment;
-export interface AILabelProps {
+export interface AILabelProps extends ToggletipBaseProps {
     AILabelContent?: React.ReactNode;
     aiText?: string;
     aiTextLabel?: string;
     textLabel?: string;
-    align?: Alignment;
-    autoAlign?: boolean;
-    children?: React.ReactNode;
-    className?: string;
     kind?: 'default' | 'inline';
     onRevertClick?: (evt: React.MouseEvent<HTMLButtonElement>) => void;
     revertActive?: boolean;

package/es/components/AILabel/index.js

@@ -8,12 +8,10 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
 import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { ToggletipContent, ToggletipActions, Toggletip, ToggletipButton } from '../Toggletip/index.js';
+import { Toggletip, ToggletipContent, ToggletipActions, ToggletipButton } from '../Toggletip/index.js';
 import { IconButton } from '../IconButton/index.js';
-import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
 import { Undo } from '@carbon/icons-react';
 import { useId } from '../../internal/useId.js';
 import { deprecate } from '../../prop-types/deprecate.js';
@@ -143,6 +141,7 @@ const AILabel = /*#__PURE__*/React.forwardRef(function AILabel({
 });
 AILabel.displayName = 'AILabel';
 AILabel.propTypes = {
+  ...Toggletip.propTypes,
   /**
    * Specify the content you want rendered inside the `AILabel` ToggleTip
    */
@@ -156,49 +155,10 @@ AILabel.propTypes = {
    * Specify additional text to be rendered next to the AI label in the inline variant
    */
   aiTextLabel: deprecate(PropTypes.string, '`aiTextLabel` on `AILabel` has been deprecated - Please use the `textLabel` prop instead'),
-  /**
-   * Specify how the popover should align with the button
-   */
-  align: deprecateValuesWithin(PropTypes.oneOf(['top', 'top-left',
-  // deprecated use top-start instead
-  'top-right',
-  // deprecated use top-end instead
-
-  'bottom', 'bottom-left',
-  // deprecated use bottom-start instead
-  'bottom-right',
-  // deprecated use bottom-end instead
-
-  'left', 'left-bottom',
-  // deprecated use left-end instead
-  'left-top',
-  // deprecated use left-start instead
-
-  'right', 'right-bottom',
-  // deprecated use right-end instead
-  'right-top',
-  // deprecated use right-start instead
-
-  // new values to match floating-ui
-  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']), ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'], mapPopoverAlign),
   /**
    * Specify the text that will be provided to the aria-label of the `AILabel` button
    */
   'aria-label': PropTypes.string,
-  /**
-   * Will auto-align the popover. This prop is currently experimental and is
-   * subject to future changes. Requires React v17+
-   * @see https://github.com/carbon-design-system/carbon/issues/18714
-   */
-  autoAlign: PropTypes.bool,
-  /**
-   * Specify the content you want rendered inside the `AILabel` ToggleTip
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be added to the `AILabel`
-   */
-  className: PropTypes.string,
   /**
    * Specify the type of `AILabel`, from the following list of types:
    */

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

@@ -57,6 +57,7 @@ function Copy({
     autoAlign: autoAlign,
     className: classNames,
     label: animation ? feedback : initialLabel,
+    leaveDelayMs: animation ? feedbackTimeout : undefined,
     onClick: composeEventHandlers([onClick, handleClick]),
     onAnimationEnd: composeEventHandlers([onAnimationEnd, handleAnimationEnd])
   }, other, {

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, };