@carbon/react 1.81.0-rc.0 → 1.82.0-rc.0

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

@@ -7,6 +7,7 @@
 import { type UseComboboxProps, type UseMultipleSelectionProps } from 'downshift';
 import React, { ReactNode, FunctionComponent, ReactElement } from 'react';
 import { type MultiSelectSortingProps } from './MultiSelectPropTypes';
+import { type ListBoxSize, type ListBoxType } from '../ListBox';
 import { TranslateWithId } from '../../types/common';
 /**
  * Message ids that will be passed to translateWithId().
@@ -166,7 +167,7 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      * Specify the size of the ListBox.
      * Currently, supports either `sm`, `md` or `lg` as an option.
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: ListBoxSize;
     /**
      * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
@@ -177,7 +178,7 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      * combobox via ARIA attributes.
      */
     titleText?: ReactNode;
-    type?: 'default' | 'inline';
+    type?: ListBoxType;
     /**
      * Specify title to show title on hover
      */

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -29,7 +29,7 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useSelection } from '../../internal/Selection.js';
 import { useFloating, flip, size, hide, autoUpdate } from '@floating-ui/react';
-import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
+import { ListBoxSizePropType, ListBoxTypePropType } from '../ListBox/ListBoxPropTypes.js';
 
 const {
   InputBlur,
@@ -775,7 +775,7 @@ FilterableMultiSelect.propTypes = {
   /**
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
-  size: ListBoxSize,
+  size: ListBoxSizePropType,
   slug: deprecate(PropTypes.node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   ...sortingPropTypes,
   /**
@@ -787,6 +787,7 @@ FilterableMultiSelect.propTypes = {
    * Callback function for translating ListBoxMenuIcon SVG title
    */
   translateWithId: PropTypes.func,
+  type: ListBoxTypePropType,
   /**
    * Specify title to show title on hover
    */

package/es/components/MultiSelect/MultiSelect.d.ts

@@ -6,7 +6,7 @@
  */
 import { UseSelectProps } from 'downshift';
 import React, { ReactNode } from 'react';
-import { ListBoxSize, ListBoxType } from '../ListBox';
+import { type ListBoxSize, type ListBoxType } from '../ListBox';
 import { MultiSelectSortingProps } from './MultiSelectPropTypes';
 import { ListBoxProps } from '../ListBox/ListBox';
 import type { TranslateWithId } from '../../types/common';
@@ -173,5 +173,11 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
      */
     warnText?: ReactNode;
 }
-export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps<unknown> & React.RefAttributes<HTMLButtonElement>>;
+export declare const MultiSelect: MultiSelectComponent;
+type MultiSelectComponentProps<ItemType> = React.PropsWithChildren<MultiSelectProps<ItemType>> & React.RefAttributes<HTMLButtonElement>;
+interface MultiSelectComponent {
+    propTypes: Record<string, any>;
+    displayName: string;
+    <ItemType>(props: MultiSelectComponentProps<ItemType>): React.ReactElement<any> | null;
+}
 export {};

package/es/components/MultiSelect/MultiSelect.js

@@ -29,7 +29,7 @@ import '../Checkbox/Checkbox.Skeleton.js';
 import { noopFn } from '../../internal/noopFn.js';
 import { useFloating, flip, size, hide, autoUpdate } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
-import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
+import { ListBoxSizePropType, ListBoxTypePropType } from '../ListBox/ListBoxPropTypes.js';
 
 const {
   ItemClick,
@@ -424,7 +424,10 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const menuProps = useMemo(() => getMenuProps({
     ref: enableFloatingStyles ? refs.setFloating : null
   }), [enableFloatingStyles, getMenuProps, refs.setFloating]);
-  const labelProps = ! /*#__PURE__*/isValidElement(titleText) ? getLabelProps() : null;
+  const allLabelProps = getLabelProps();
+  const labelProps = /*#__PURE__*/isValidElement(titleText) ? {
+    id: allLabelProps.id
+  } : allLabelProps;
   const getSelectionStats = useCallback((selectedItems, filteredItems) => {
     const hasIndividualSelections = selectedItems.some(selected => !selected.isSelectAll);
     const nonSelectAllSelectedCount = selectedItems.filter(selected => !selected.isSelectAll).length;
@@ -666,7 +669,7 @@ MultiSelect.propTypes = {
   /**
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
-  size: ListBoxSize,
+  size: ListBoxSizePropType,
   slug: deprecate(PropTypes.node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * Provide a method that sorts all options in the control. Overriding this
@@ -701,7 +704,7 @@ MultiSelect.propTypes = {
   /**
    * Specify 'inline' to create an inline multi-select.
    */
-  type: PropTypes.oneOf(['default', 'inline']),
+  type: ListBoxTypePropType,
   /**
    * Specify title to show title on hover
    */

package/es/components/Notification/Notification.js

@@ -21,7 +21,7 @@ import { match, matches } from '../../internal/keyboard/match.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
 import { noopFn } from '../../internal/noopFn.js';
-import wrapFocus, { wrapFocusWithoutSentinels } from '../../internal/wrapFocus.js';
+import { wrapFocus, wrapFocusWithoutSentinels } from '../../internal/wrapFocus.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { warning } from '../../internal/warning.js';
 import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';

package/es/components/OverflowMenu/OverflowMenu.js

@@ -22,6 +22,7 @@ import { setupGetInstanceId } from '../../tools/setupGetInstanceId.js';
 import { IconButton } from '../IconButton/index.js';
 import { useOutsideClick } from '../../internal/useOutsideClick.js';
 import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
+import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
 
 const getInstanceId = setupGetInstanceId();
 const on = function (target) {
@@ -90,22 +91,6 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
       };
   }
 };
-
-// TODO: Replace this code when align mapping is consolidated.
-// https://github.com/carbon-design-system/carbon/pull/19081
-const propMappingFunction = deprecatedValue => {
-  const mapping = {
-    'top-left': 'top-start',
-    'top-right': 'top-end',
-    'bottom-left': 'bottom-start',
-    'bottom-right': 'bottom-end',
-    'left-bottom': 'left-end',
-    'left-top': 'left-start',
-    'right-bottom': 'right-end',
-    'right-top': 'right-start'
-  };
-  return mapping[deprecatedValue];
-};
 const OverflowMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     align,
@@ -385,11 +370,7 @@ OverflowMenu.propTypes = {
   // 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']),
-  //allowed prop values
-  ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'],
-  //optional mapper function
-  propMappingFunction),
+  '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 a label to be read by screen readers on the container node
    */

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import type { OverflowMenuProps } from './OverflowMenu';
+import { type OverflowMenuProps } from './OverflowMenu';
 declare const OverflowMenu: React.ForwardRefExoticComponent<OverflowMenuProps & React.RefAttributes<HTMLDivElement>>;
 export default OverflowMenu;
 export { OverflowMenu, type OverflowMenuProps };

package/es/components/OverflowMenu/index.js

@@ -10,17 +10,16 @@ import React__default, { forwardRef } from 'react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { OverflowMenu as OverflowMenu$2 } from './next/index.js';
 import { OverflowMenu as OverflowMenu$1 } from './OverflowMenu.js';
-import { createClassWrapper } from '../../internal/createClassWrapper.js';
 
-const OverflowMenuV11 = createClassWrapper(OverflowMenu$1);
 const OverflowMenu = /*#__PURE__*/forwardRef((props, ref) => {
   const enableV12OverflowMenu = useFeatureFlag('enable-v12-overflowmenu');
   return enableV12OverflowMenu ? /*#__PURE__*/React__default.createElement(OverflowMenu$2, _extends({}, props, {
     ref: ref
-  })) : /*#__PURE__*/React__default.createElement(OverflowMenuV11, _extends({}, props, {
+  })) : /*#__PURE__*/React__default.createElement(OverflowMenu$1, _extends({}, props, {
     ref: ref
   }));
 });
 OverflowMenu.displayName = 'OverflowMenu';
+OverflowMenu.propTypes = OverflowMenu$1.propTypes;
 
 export { OverflowMenu, OverflowMenu as default };

package/es/components/OverflowMenu/next/index.js

@@ -20,21 +20,9 @@ import { useId } from '../../../internal/useId.js';
 import { usePrefix } from '../../../internal/usePrefix.js';
 import { useAttachedMenu } from '../../../internal/useAttachedMenu.js';
 import deprecateValuesWithin from '../../../prop-types/deprecateValuesWithin.js';
+import { mapPopoverAlign } from '../../../tools/mapPopoverAlign.js';
 
 const defaultSize = 'md';
-const propMappingFunction = deprecatedValue => {
-  const mapping = {
-    'top-left': 'top-start',
-    'top-right': 'top-end',
-    'bottom-left': 'bottom-start',
-    'bottom-right': 'bottom-end',
-    'left-bottom': 'left-end',
-    'left-top': 'left-start',
-    'right-bottom': 'right-end',
-    'right-top': 'right-start'
-  };
-  return mapping[deprecatedValue];
-};
 const OverflowMenu = /*#__PURE__*/React__default.forwardRef(function OverflowMenu(_ref, forwardRef) {
   let {
     autoAlign = false,
@@ -196,11 +184,7 @@ OverflowMenu.propTypes = {
   // 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']),
-  //allowed prop values
-  ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'],
-  //optional mapper function
-  propMappingFunction),
+  '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 a DOM node where the Menu should be rendered in. Defaults to document.body.
    */

package/es/components/OverflowMenuItem/OverflowMenuItem.d.ts

@@ -1,11 +1,10 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 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 from 'react';
-import { ForwardRefReturn } from '../../types/common';
 export interface OverflowMenuItemProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * The CSS class name to be placed on the button element
@@ -57,6 +56,5 @@ export interface OverflowMenuItemProps extends React.HTMLAttributes<HTMLElement>
      */
     wrapperClassName?: string;
 }
-export type OverflowMenuItemComponent = ForwardRefReturn<HTMLElement, OverflowMenuItemProps>;
-declare const OverflowMenuItem: OverflowMenuItemComponent;
+declare const OverflowMenuItem: React.ForwardRefExoticComponent<Omit<OverflowMenuItemProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export default OverflowMenuItem;

package/es/components/OverflowMenuItem/OverflowMenuItem.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { forwardRef } from 'react';
 import { ArrowDown, ArrowUp } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -16,8 +16,9 @@ import { warning } from '../../internal/warning.js';
 import '../Text/index.js';
 import { Text } from '../Text/Text.js';
 
-const OverflowMenuItem = /*#__PURE__*/React__default.forwardRef(function OverflowMenuItem(_ref, ref) {
-  let {
+const frFn = forwardRef;
+const OverflowMenuItem = frFn((props, ref) => {
+  const {
     className,
     closeMenu,
     disabled = false,
@@ -33,7 +34,7 @@ const OverflowMenuItem = /*#__PURE__*/React__default.forwardRef(function Overflo
     title,
     wrapperClassName,
     ...rest
-  } = _ref;
+  } = props;
   const prefix = usePrefix();
   function setTabFocus(evt) {
     if (match(evt, ArrowDown)) {

package/es/components/PageHeader/PageHeader.d.ts

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type ComponentType, type FunctionComponent } from 'react';
+import PropTypes from 'prop-types';
+import { Tabs as BaseTabs } from '../Tabs/Tabs';
 /**
  * ----------
  * PageHeader
@@ -47,10 +49,6 @@ interface PageHeaderContentProps {
      * The PageHeaderContent's title
      */
     title: string;
-    /**
-     * The PageHeaderContent's subtitle
-     */
-    subtitle?: string;
     /**
      * The PageHeaderContent's contextual actions
      */
@@ -61,6 +59,88 @@ interface PageHeaderContentProps {
     pageActions?: React.ReactNode;
 }
 declare const PageHeaderContent: React.ForwardRefExoticComponent<PageHeaderContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ----------------
+ * PageHeaderContentPageActions
+ * ----------------
+ */
+interface PageHeaderContentPageActionsProps {
+    /**
+     * Provide child elements to be rendered inside PageHeaderContentPageActions.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be added to your PageHeaderContentPageActions
+     */
+    className?: string;
+    /**
+     * The PageHeaderContent's page actions collapsible Menu button label
+     */
+    menuButtonLabel?: string;
+    /**
+     * The PageHeaderContent's page actions
+     */
+    pageActions?: React.ReactNode;
+}
+declare const PageHeaderContentPageActions: {
+    ({ className, children, menuButtonLabel, pageActions, ...other }: PageHeaderContentPageActionsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * Provide child elements to be rendered inside PageHeaderContentPageActions.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be added to your PageHeaderContentPageActions
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * The PageHeaderContent's collapsible Menu button label
+         */
+        menuButtonLabel: PropTypes.Requireable<string>;
+        /**
+         * The PageHeaderContent's page actions
+         */
+        pageActions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
+    };
+};
+/**
+ * ----------------
+ * PageHeaderContentText
+ * ----------------
+ */
+interface PageHeaderContentTextProps {
+    /**
+     * Provide child elements to be rendered inside PageHeaderContentText.
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be added to your PageHeaderContentText
+     */
+    className?: string;
+    /**
+     * The PageHeaderContent's subtitle
+     */
+    subtitle?: string;
+}
+declare const PageHeaderContentText: {
+    ({ className, children, subtitle, ...other }: PageHeaderContentTextProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * Provide child elements to be rendered inside PageHeaderContentText.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be added to your PageHeaderContentText
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * The PageHeaderContent's subtitle
+         */
+        subtitle: PropTypes.Requireable<string>;
+    };
+};
 /**
  * ----------------
  * PageHeaderHeroImage
@@ -76,7 +156,20 @@ interface PageHeaderHeroImageProps {
      */
     className?: string;
 }
-declare const PageHeaderHeroImage: React.ForwardRefExoticComponent<PageHeaderHeroImageProps & React.RefAttributes<HTMLDivElement>>;
+declare const PageHeaderHeroImage: {
+    ({ className, children, ...other }: PageHeaderHeroImageProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * Provide child elements to be rendered inside PageHeaderHeroImage.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be added to your PageHeaderHeroImage
+         */
+        className: PropTypes.Requireable<string>;
+    };
+};
 /**
  * ----------------
  * PageHeaderTabBar
@@ -87,6 +180,11 @@ interface PageHeaderTabBarProps {
     className?: string;
 }
 declare const PageHeaderTabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
+interface PageHeaderTabsProps extends React.ComponentProps<typeof BaseTabs> {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const PageHeaderTabs: React.ForwardRefExoticComponent<PageHeaderTabsProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * -------
  * Exports
@@ -95,7 +193,61 @@ declare const PageHeaderTabBar: React.ForwardRefExoticComponent<PageHeaderTabBar
 declare const Root: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLDivElement>>;
 declare const BreadcrumbBar: React.ForwardRefExoticComponent<PageHeaderBreadcrumbBarProps & React.RefAttributes<HTMLDivElement>>;
 declare const Content: React.ForwardRefExoticComponent<PageHeaderContentProps & React.RefAttributes<HTMLDivElement>>;
-declare const HeroImage: React.ForwardRefExoticComponent<PageHeaderHeroImageProps & React.RefAttributes<HTMLDivElement>>;
+declare const ContentPageActions: {
+    ({ className, children, menuButtonLabel, pageActions, ...other }: PageHeaderContentPageActionsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * Provide child elements to be rendered inside PageHeaderContentPageActions.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be added to your PageHeaderContentPageActions
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * The PageHeaderContent's collapsible Menu button label
+         */
+        menuButtonLabel: PropTypes.Requireable<string>;
+        /**
+         * The PageHeaderContent's page actions
+         */
+        pageActions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
+    };
+};
+declare const ContentText: {
+    ({ className, children, subtitle, ...other }: PageHeaderContentTextProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * Provide child elements to be rendered inside PageHeaderContentText.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be added to your PageHeaderContentText
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * The PageHeaderContent's subtitle
+         */
+        subtitle: PropTypes.Requireable<string>;
+    };
+};
+declare const HeroImage: {
+    ({ className, children, ...other }: PageHeaderHeroImageProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * Provide child elements to be rendered inside PageHeaderHeroImage.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be added to your PageHeaderHeroImage
+         */
+        className: PropTypes.Requireable<string>;
+    };
+};
 declare const TabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
-export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderHeroImage, PageHeaderTabBar, Root, BreadcrumbBar, Content, HeroImage, TabBar, };
-export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, };
+declare const Tabs: React.ForwardRefExoticComponent<PageHeaderTabsProps & React.RefAttributes<HTMLDivElement>>;
+export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderTabs, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, TabBar, Tabs, };
+export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, PageHeaderTabsProps, };