@carbon/react 1.89.0-rc.0 → 1.89.0

package/es/components/StructuredList/StructuredList.js

@@ -30,6 +30,7 @@ function StructuredListWrapper(props) {
     ariaLabel: deprecatedAriaLabel,
     isCondensed,
     isFlush,
+    selectedInitialRow,
     ...other
   } = props;
   const prefix = usePrefix();
@@ -38,7 +39,7 @@ function StructuredListWrapper(props) {
     [`${prefix}--structured-list--condensed`]: isCondensed,
     [`${prefix}--structured-list--flush`]: isFlush && !selection
   }, className);
-  const [selectedRow, setSelectedRow] = React.useState(null);
+  const [selectedRow, setSelectedRow] = React.useState(selectedInitialRow ?? null);
   return /*#__PURE__*/React.createElement(GridSelectedRowStateContext.Provider, {
     value: selectedRow
   }, /*#__PURE__*/React.createElement(GridSelectedRowDispatchContext.Provider, {
@@ -79,7 +80,11 @@ StructuredListWrapper.propTypes = {
   /**
    * Specify whether your StructuredListWrapper should have selections
    */
-  selection: PropTypes.bool
+  selection: PropTypes.bool,
+  /**
+   * Specify which row will be selected initially
+   */
+  selectedInitialRow: PropTypes.string
 };
 function StructuredListHead(props) {
   const {
@@ -141,21 +146,22 @@ function StructuredListRow(props) {
     head,
     onClick,
     selection,
+    id,
     ...other
   } = props;
   const [hasFocusWithin, setHasFocusWithin] = useState(false);
-  const id = useId('grid-input');
+  const rowId = id ?? useId('grid-input');
   const selectedRow = React.useContext(GridSelectedRowStateContext);
   const setSelectedRow = React.useContext(GridSelectedRowDispatchContext);
   const prefix = usePrefix();
   const value = {
-    id
+    id: rowId
   };
   const classes = cx(`${prefix}--structured-list-row`, {
     [`${prefix}--structured-list-row--header-row`]: head,
-    [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin && !selection || hasFocusWithin && selection && (selectedRow === id || selectedRow === null),
+    [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin && !selection || hasFocusWithin && selection && (selectedRow === rowId || selectedRow === null),
     // Ensure focus on the first item when navigating through Tab keys and no row is selected (selectedRow === null)
-    [`${prefix}--structured-list-row--selected`]: selectedRow === id
+    [`${prefix}--structured-list-row--selected`]: selectedRow === rowId
   }, className);
   const itemRef = useRef(null);
   const handleClick = () => {
@@ -176,15 +182,17 @@ function StructuredListRow(props) {
     className: classes,
     ref: itemRef,
     onClick: event => {
-      setSelectedRow?.(id);
+      setSelectedRow?.(rowId);
       onClick && onClick(event);
       if (selection) {
         // focus items only when selection is enabled
         setHasFocusWithin(true);
       }
     },
-    onFocus: () => {
-      setHasFocusWithin(true);
+    onFocus: event => {
+      if (selection || event.currentTarget === event.target) {
+        setHasFocusWithin(true);
+      }
     },
     onBlur: () => {
       setHasFocusWithin(false);
@@ -192,7 +200,7 @@ function StructuredListRow(props) {
     onKeyDown: onKeyDown
   }), /*#__PURE__*/React.createElement(GridRowContext.Provider, {
     value: value
-  }, selection && /*#__PURE__*/React.createElement(StructuredListCell, null, selectedRow === id ? /*#__PURE__*/React.createElement(RadioButtonChecked, {
+  }, selection && /*#__PURE__*/React.createElement(StructuredListCell, null, selectedRow === rowId ? /*#__PURE__*/React.createElement(RadioButtonChecked, {
     className: `${prefix}--structured-list__icon`
   }) : /*#__PURE__*/React.createElement(RadioButton, {
     className: `${prefix}--structured-list__icon`
@@ -226,7 +234,11 @@ StructuredListRow.propTypes = {
   /**
    * Mark if this row should be selectable
    */
-  selection: PropTypes.bool
+  selection: PropTypes.bool,
+  /**
+   * Specify row id so that it can be used for initial selection
+   */
+  id: PropTypes.string
 };
 function StructuredListInput(props) {
   const defaultId = useId('structureListInput');

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

@@ -6,7 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import React, { type ElementType, type ReactNode } from 'react';
-import { type PopoverAlignment } from '../Popover';
+import { type PopoverAlignment, PopoverBaseProps } from '../Popover';
 import { PolymorphicProps } from '../../types/common';
 import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 type ToggletipLabelProps<E extends ElementType> = {
@@ -36,12 +36,7 @@ export declare namespace ToggletipLabel {
         className: PropTypes.Requireable<string>;
     };
 }
-export interface ToggletipBaseProps {
-    align?: PopoverAlignment;
-    alignmentAxisOffset?: number;
-    autoAlign?: boolean;
-    className?: string;
-    children?: ReactNode;
+export interface ToggletipBaseProps extends Omit<PopoverBaseProps, 'open'> {
     defaultOpen?: boolean;
 }
 export type ToggletipProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, ToggletipBaseProps>;
@@ -53,39 +48,21 @@ export type ToggletipProps<T extends ElementType> = PolymorphicComponentPropWith
 export declare function Toggletip<E extends ElementType = 'span'>({ align, as, autoAlign, className: customClassName, children, defaultOpen, ...rest }: ToggletipProps<E>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Toggletip {
     var propTypes: {
-        /**
-         * Specify how the toggletip should align with the button
-         */
-        align: PropTypes.Requireable<string>;
-        /**
-         * **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled.
-         */
-        alignmentAxisOffset: PropTypes.Requireable<number>;
-        /**
-         * Provide a custom element or component to render the top-level node for the
-         * component.
-         */
-        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        /**
-         * Will auto-align the popover on first render if it is not visible. 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.Requireable<boolean>;
-        /**
-         * Custom children to be rendered as the content of the label
-         */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Provide a custom class name to be added to the outermost node in the
-         * component
-         */
-        className: PropTypes.Requireable<string>;
         /**
          * Specify if the toggletip should be open by default
          */
         defaultOpen: PropTypes.Requireable<boolean>;
+        align?: PopoverAlignment;
+        alignmentAxisOffset?: number;
+        autoAlign?: boolean;
+        autoAlignBoundary?: import("@floating-ui/dom").Boundary;
+        caret?: boolean;
+        children?: React.ReactNode;
+        className?: string;
+        dropShadow?: boolean;
+        highContrast?: boolean;
+        isTabTip?: boolean;
+        onRequestClose?: () => void;
     };
 }
 export interface ToggletipButtonBaseProps {

package/es/components/Toggletip/index.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useContext, useRef, useState } from 'react';
-import { PopoverContent, Popover } from '../Popover/index.js';
+import { Popover, PopoverContent } from '../Popover/index.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { useWindowEvent } from '../../internal/useEvent.js';
@@ -100,6 +100,7 @@ function Toggletip({
   };
   const onKeyDown = event => {
     if (open && match(event, Escape)) {
+      event.stopPropagation();
       actions.close();
 
       // If the menu is closed while focus is still inside the menu, it should return to the trigger button  (#12922)
@@ -149,57 +150,17 @@ function Toggletip({
     autoAlign: autoAlign
   }, rest), children));
 }
-Toggletip.propTypes = {
-  /**
-   * Specify how the toggletip should align with the button
-   */
-  align: 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']),
-  /**
-   * **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled.
-   */
-  alignmentAxisOffset: PropTypes.number,
-  /**
-   * Provide a custom element or component to render the top-level node for the
-   * component.
-   */
-  as: PropTypes.elementType,
-  /**
-   * Will auto-align the popover on first render if it is not visible. 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,
-  /**
-   * Custom children to be rendered as the content of the label
-   */
-  children: PropTypes.node,
-  /**
-   * Provide a custom class name to be added to the outermost node in the
-   * component
-   */
-  className: PropTypes.string,
+// Get all the properties from Popover except for "open".
+// The Typescript types for PropTypes are really messed up so we need lots of
+// casting.  It will be great when we can finally get rid of PropTypes altogether.
+const {
+  open,
+  ...popoverNonOpenPropTypes
+} = Popover.propTypes ?? {};
+Toggletip.propTypes = {
+  // Has all of Popover's PropTypes except for "open".
+  ...popoverNonOpenPropTypes,
   /**
    * Specify if the toggletip should be open by default
    */

package/es/index.d.ts

@@ -58,6 +58,7 @@ export * from './components/OrderedList';
 export * from './components/OverflowMenu';
 export * from './components/OverflowMenuItem';
 export * as unstable__PageHeader from './components/PageHeader';
+export * as preview__Dialog from './components/Dialog';
 export * from './components/Pagination';
 export * from './components/Pagination/Pagination.Skeleton';
 export * from './components/PaginationNav';
@@ -185,7 +186,6 @@ export type { TableToolbarSearchProps } from './components/DataTable/TableToolba
 export type { DataTableSkeletonProps } from './components/DataTableSkeleton/DataTableSkeleton';
 export type { DatePickerProps } from './components/DatePicker/DatePicker';
 export type { DatePickerInputProps } from './components/DatePickerInput/DatePickerInput';
-export type { DialogProps } from './components/Dialog/index';
 export type { DropdownProps } from './components/Dropdown/Dropdown';
 export type { ErrorBoundaryProps } from './components/ErrorBoundary/ErrorBoundary';
 export type { FeatureFlagsProps } from './components/FeatureFlags/index';
@@ -267,6 +267,7 @@ export type { OrderedListProps } from './components/OrderedList/OrderedList';
 export type { OverflowMenuProps } from './components/OverflowMenu/OverflowMenu';
 export type { OverflowMenuItemProps } from './components/OverflowMenuItem/OverflowMenuItem';
 export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, } from './components/PageHeader';
+export type { DialogProps, DialogHeaderProps, DialogControlsProps, DialogCloseButtonProps, DialogTitleProps, DialogSubtitleProps, DialogBodyProps, DialogFooterProps, } from './components/Dialog';
 export type { PaginationProps } from './components/Pagination/Pagination';
 export type { PaginationSkeletonProps } from './components/Pagination/Pagination.Skeleton';
 export type { DirectionButtonProps } from './components/PaginationNav/PaginationNav';

package/es/index.js

@@ -105,6 +105,8 @@ export { default as OverflowMenu } from './components/OverflowMenu/index.js';
 export { default as OverflowMenuItem } from './components/OverflowMenuItem/OverflowMenuItem.js';
 import * as index from './components/PageHeader/index.js';
 export { index as unstable__PageHeader };
+import * as index$1 from './components/Dialog/index.js';
+export { index$1 as preview__Dialog };
 export { default as Pagination } from './components/Pagination/Pagination.js';
 export { default as PaginationSkeleton } from './components/Pagination/Pagination.Skeleton.js';
 export { default as PaginationNav } from './components/PaginationNav/PaginationNav.js';

package/es/internal/Selection.js

@@ -48,7 +48,7 @@ const useSelection = ({
 
     // Assert special properties (e.g., `disabled`, `isSelectAll`, etc.) are
     // `any` since those properties aren’t part of the generic type.
-    const allSelectableItems = filteredItems.filter(item => !item?.disabled);
+    const allSelectableItems = filteredItems.filter(item => !item?.disabled && !item?.isSelectAll);
     const disabledItemCount = filteredItems.filter(item => item?.disabled).length;
     let newSelectedItems;
 

package/es/internal/useMergedRefs.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { useCallback } from 'react';
+import { useMemo, useCallback } from 'react';
 
 /**
  * Merges multiple refs into a single callback ref.
@@ -16,15 +16,16 @@ import { useCallback } from 'react';
  * node, assigns that node to every ref in the array.
  */
 const useMergedRefs = refs => {
+  const memoizedRefs = useMemo(() => refs, refs);
   return useCallback(node => {
-    refs.forEach(ref => {
+    memoizedRefs.forEach(ref => {
       if (typeof ref === 'function') {
         ref(node);
       } else if (ref) {
         ref.current = node;
       }
     });
-  }, [refs]);
+  }, [memoizedRefs]);
 };
 
 export { useMergedRefs };

package/lib/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/lib/components/AILabel/index.js

@@ -10,12 +10,10 @@
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
-var deprecateValuesWithin = require('../../prop-types/deprecateValuesWithin.js');
 var React = require('react');
 var usePrefix = require('../../internal/usePrefix.js');
 var index = require('../Toggletip/index.js');
 var index$1 = require('../IconButton/index.js');
-var mapPopoverAlign = require('../../tools/mapPopoverAlign.js');
 var iconsReact = require('@carbon/icons-react');
 var useId = require('../../internal/useId.js');
 var deprecate = require('../../prop-types/deprecate.js');
@@ -145,6 +143,7 @@ const AILabel = /*#__PURE__*/React.forwardRef(function AILabel({
 });
 AILabel.displayName = 'AILabel';
 AILabel.propTypes = {
+  ...index.Toggletip.propTypes,
   /**
    * Specify the content you want rendered inside the `AILabel` ToggleTip
    */
@@ -158,49 +157,10 @@ AILabel.propTypes = {
    * Specify additional text to be rendered next to the AI label in the inline variant
    */
   aiTextLabel: deprecate.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.default(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.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/lib/components/ComposedModal/ComposedModal.js

@@ -28,7 +28,7 @@ var match = require('../../internal/keyboard/match.js');
 var index$1 = require('../FeatureFlags/index.js');
 var events = require('../../tools/events.js');
 var deprecate = require('../../prop-types/deprecate.js');
-var index$3 = require('../Dialog/index.js');
+var Dialog = require('../Dialog/Dialog.js');
 var warning = require('../../internal/warning.js');
 var index$2 = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
@@ -308,7 +308,7 @@ const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
     size: 'sm'
   }) : null;
-  const modalBody = enableDialogElement ? /*#__PURE__*/React.createElement(index$3.unstable__Dialog, {
+  const modalBody = enableDialogElement ? /*#__PURE__*/React.createElement(Dialog.Dialog, {
     open: open,
     focusAfterCloseRef: launcherButtonRef,
     modal: true,

package/lib/components/Copy/Copy.js

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

package/lib/components/DataTable/DataTable.js

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