@carbon/react 1.77.0 → 1.78.0

package/es/components/Accordion/AccordionItem.js

@@ -15,8 +15,8 @@ import { useId } from '../../internal/useId.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { AccordionContext } from './AccordionProvider.js';
-import { Text } from '../Text/Text.js';
 import { match } from '../../internal/keyboard/match.js';
+import { Text } from '../Text/Text.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 
 const defaultRenderToggle = props => /*#__PURE__*/React__default.createElement("button", _extends({

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

@@ -0,0 +1,23 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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';
+interface BadgeIndicatorProps {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+    /**
+     * Count of badge indicator
+     */
+    count?: number;
+    /**
+     * Provide an `id` to uniquely identify the BadgeIndidcator
+     */
+    id?: string;
+}
+export declare const BadgeIndicator: React.ForwardRefExoticComponent<BadgeIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+export default BadgeIndicator;

package/es/components/BadgeIndicator/index.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+const BadgeIndicator = /*#__PURE__*/React__default.forwardRef(function BadgeIndicatorContent(_ref, ref) {
+  let {
+    className: customClassName,
+    count,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const classNames = cx(`${prefix}--badge-indicator`, customClassName, {
+    [`${prefix}--badge-indicator--count`]: count
+  });
+  const displayCount = count && count > 999 ? '999+' : count;
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classNames,
+    ref: ref
+  }, rest), displayCount);
+});
+BadgeIndicator.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string,
+  /**
+   * Count of badge indicator
+   */
+  count: PropTypes.number,
+  /**
+   * Provide an `id` to uniquely identify the BadgeIndidcator
+   */
+  id: PropTypes.string
+};
+
+export { BadgeIndicator, BadgeIndicator as default };

package/es/components/Breadcrumb/Breadcrumb.d.ts

@@ -19,6 +19,11 @@ export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
      * Optional prop to omit the trailing slash for the breadcrumbs
      */
     noTrailingSlash?: boolean;
+    /**
+     * Specify the size of the Breadcrumb. Currently
+     * supports the following: `sm` & `md` (default: 'md')
+     */
+    size?: 'sm' | 'md';
 }
 declare const Breadcrumb: ForwardRefReturn<HTMLElement, BreadcrumbProps>;
 export default Breadcrumb;

package/es/components/Breadcrumb/Breadcrumb.js

@@ -17,12 +17,14 @@ const Breadcrumb = /*#__PURE__*/React__default.forwardRef(function Breadcrumb(_r
     children,
     className: customClassNameNav,
     noTrailingSlash,
+    size,
     ...rest
   } = _ref;
   const prefix = usePrefix();
   const className = cx({
     [`${prefix}--breadcrumb`]: true,
-    [`${prefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash
+    [`${prefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash,
+    [`${prefix}--breadcrumb--sm`]: size === 'sm'
   });
   return /*#__PURE__*/React__default.createElement("nav", _extends({
     className: customClassNameNav,
@@ -49,7 +51,11 @@ Breadcrumb.propTypes = {
   /**
    * Optional prop to omit the trailing slash for the breadcrumbs
    */
-  noTrailingSlash: PropTypes.bool
+  noTrailingSlash: PropTypes.bool,
+  /**
+   * Specify the size of the Breadcrumb. Currently supports the following:
+   */
+  size: PropTypes.oneOf(['sm', 'md'])
 };
 
 export { Breadcrumb as default };

package/es/components/Button/Button.d.ts

@@ -67,6 +67,15 @@ export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      * Can be one of: start, center, or end.
      */
     tooltipAlignment?: ButtonTooltipAlignment;
+    /**
+     * Enable drop shadow for tooltips for icon-only buttons.
+     */
+    tooltipDropShadow?: boolean;
+    /**
+     * Enable high-contrast theme for tooltips on icon-only buttons.
+     * Defaults to true.
+     */
+    tooltipHighContrast?: boolean;
     /**
      * Specify the direction of the tooltip for icon-only buttons.
      * Can be either top, right, bottom, or left.

package/es/components/Button/Button.js

@@ -29,6 +29,8 @@ const Button = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     autoAlign = false,
     children,
     hasIconOnly = false,
+    tooltipHighContrast = true,
+    tooltipDropShadow = false,
     iconDescription,
     kind = 'primary',
     onBlur,
@@ -81,6 +83,8 @@ const Button = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       label: iconDescription,
       kind: kind,
       size: size,
+      highContrast: tooltipHighContrast,
+      dropShadow: tooltipDropShadow,
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
       onFocus: onFocus,
@@ -215,6 +219,15 @@ Button.propTypes = {
    * Can be one of: start, center, or end.
    */
   tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
+  /**
+   * Enable drop shadow for tooltips for icon-only buttons.
+   */
+  tooltipDropShadow: PropTypes.bool,
+  /**
+   * Enable high-contrast theme for tooltips for icon-only buttons.
+   * Defaults to true.
+   */
+  tooltipHighContrast: PropTypes.bool,
   /**
    * Specify the direction of the tooltip for icon-only buttons.
    * Can be either top, right, bottom, or left.

package/es/components/ComboBox/ComboBox.js

@@ -24,9 +24,9 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useFloating, flip, hide, autoUpdate } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
-import { Text } from '../Text/Text.js';
 import { match } from '../../internal/keyboard/match.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
+import { Text } from '../Text/Text.js';
 import { Space, Enter, Escape, Home, End } from '../../internal/keyboard/keys.js';
 
 const {
@@ -215,7 +215,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   const textInput = useRef(null);
   const comboBoxInstanceId = useId();
   const [isFocused, setIsFocused] = useState(false);
-  const savedOnInputChange = useRef(onInputChange);
+  const prevInputValue = useRef(inputValue);
   const prevSelectedItemProp = useRef(selectedItemProp);
 
   // fully controlled combobox: handle changes to selectedItemProp
@@ -246,12 +246,12 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     itemToString,
     inputValue
   }) : defaultShouldFilterItem());
+
+  // call onInputChange whenever inputValue is updated
   useEffect(() => {
-    savedOnInputChange.current = onInputChange;
-  }, [onInputChange]);
-  useEffect(() => {
-    if (savedOnInputChange.current) {
-      savedOnInputChange.current(inputValue);
+    if (prevInputValue.current !== inputValue) {
+      prevInputValue.current = inputValue;
+      onInputChange && onInputChange(inputValue);
     }
   }, [inputValue]);
   const handleSelectionClear = () => {
@@ -465,11 +465,22 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
         }
       }
     },
+    initialSelectedItem: initialSelectedItem,
+    inputId: id,
+    stateReducer,
+    isItemDisabled(item, _index) {
+      return item?.disabled;
+    },
+    ...downshiftProps,
     onStateChange: _ref6 => {
       let {
         type,
         selectedItem: newSelectedItem
       } = _ref6;
+      downshiftProps?.onStateChange?.({
+        type,
+        selectedItem: newSelectedItem
+      });
       if (type === useCombobox.stateChangeTypes.ItemClick && !isEqual(selectedItemProp, newSelectedItem)) {
         onChange({
           selectedItem: newSelectedItem
@@ -481,14 +492,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
           selectedItem: newSelectedItem
         });
       }
-    },
-    initialSelectedItem: initialSelectedItem,
-    inputId: id,
-    stateReducer,
-    isItemDisabled(item, _index) {
-      return item?.disabled;
-    },
-    ...downshiftProps
+    }
   });
   useEffect(() => {
     // Used to expose the downshift actions to consumers for use with downshiftProps

package/es/components/ComboButton/index.js

@@ -166,7 +166,6 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
     ref: refs.setFloating,
     id: id,
     label: t('carbon.combo-button.additional-actions'),
-    mode: "basic",
     size: size$1,
     open: open,
     onClose: handleClose

package/es/components/ContextMenu/useContextMenu.d.ts

@@ -10,7 +10,6 @@ export interface ContextMenuProps {
     x: number;
     y: number;
     onClose: () => void;
-    mode: string;
 }
 /**
  * @param {TriggerType} [trigger=document] The element or ref which should trigger the Menu on right-click

package/es/components/ContextMenu/useContextMenu.js

@@ -41,8 +41,7 @@ function useContextMenu() {
     open,
     x: position[0],
     y: position[1],
-    onClose,
-    mode: 'full'
+    onClose
   };
 }
 

package/es/components/Dropdown/Dropdown.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 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.

package/es/components/Dropdown/Dropdown.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useEffect, useContext, useCallback, useMemo, useState } from 'react';
+import React__default, { useEffect, useContext, useCallback, useMemo, useState, isValidElement } from 'react';
 import { useSelect } from 'downshift';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -320,11 +320,12 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     }
     return /*#__PURE__*/React__default.isValidElement(element) ? element : null;
   }, [slug, decorator]);
+  const labelProps = ! /*#__PURE__*/isValidElement(titleText) ? getLabelProps() : null;
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: wrapperClasses
   }, other), titleText && /*#__PURE__*/React__default.createElement("label", _extends({
     className: titleClasses
-  }, getLabelProps()), titleText), /*#__PURE__*/React__default.createElement(ListBox, {
+  }, labelProps), titleText), /*#__PURE__*/React__default.createElement(ListBox, {
     onFocus: handleFocus,
     onBlur: handleFocus,
     size: size$1,

package/es/components/FileUploader/FileUploader.js

@@ -15,8 +15,8 @@ import { ButtonKinds } from '../Button/Button.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../Text/index.js';
 import { useId } from '../../internal/useId.js';
-import { Text } from '../Text/Text.js';
 import { matches } from '../../internal/keyboard/match.js';
+import { Text } from '../Text/Text.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
 const FileUploader = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {

package/es/components/FileUploader/FileUploaderItem.js

@@ -16,8 +16,8 @@ import { noopFn } from '../../internal/noopFn.js';
 import '../Text/index.js';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
-import { Text } from '../Text/Text.js';
 import { matches } from '../../internal/keyboard/match.js';
+import { Text } from '../Text/Text.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
 function FileUploaderItem(_ref) {

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

@@ -20,6 +20,11 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      * **Experimental**: Will attempt to automatically align the tooltip
      */
     autoAlign?: boolean;
+    /**
+     * **Experimental**: Display a badge on the button. An empty/dot badge if 0, a numbered badge if > 0.
+     * Must be used with size="lg" and kind="ghost"
+     */
+    badgeCount?: number;
     /**
      * Optionally specify an href for your IconButton to become an `<a>` element
      */
@@ -68,7 +73,8 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      * Provide the label to be rendered inside of the Tooltip. The label will use
      * `aria-labelledby` and will fully describe the child node that is provided.
      * This means that if you have text in the child node it will not be
-     * announced to the screen reader.
+     * announced to the screen reader. If using the badgeCount = 0 then provide a
+     * label with describing there is a new notification.
      */
     label: ReactNode;
     /**

package/es/components/IconButton/index.js

@@ -11,9 +11,11 @@ import React__default from 'react';
 import cx from 'classnames';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
+import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import ButtonBase from '../Button/ButtonBase.js';
 import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
+import { BadgeIndicator } from '../BadgeIndicator/index.js';
 
 const IconButtonKinds = ['primary', 'secondary', 'ghost', 'tertiary'];
 const propMappingFunction = deprecatedValue => {
@@ -33,6 +35,7 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_r
   let {
     align,
     autoAlign = false,
+    badgeCount,
     children,
     className,
     closeOnActivation = true,
@@ -53,6 +56,10 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_r
   const tooltipClasses = cx(wrapperClasses, `${prefix}--icon-tooltip`, {
     [`${prefix}--icon-tooltip--disabled`]: disabled
   });
+  if (badgeCount && (kind !== 'ghost' || size !== 'lg')) {
+    console.warn("The prop BadgeCount must be used with hasIconOnly=true, kind='ghost' and size='lg'");
+  }
+  const badgeId = useId('badge-indicator');
   return /*#__PURE__*/React__default.createElement(Tooltip, {
     align: align,
     autoAlign: autoAlign,
@@ -71,8 +78,12 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_r
     size: size,
     className: cx(`${prefix}--btn--icon-only`, {
       [`${prefix}--btn--selected`]: isSelected
-    }, className)
-  }), children));
+    }, className),
+    "aria-describedby": badgeCount && badgeId
+  }), children, !disabled && badgeCount !== undefined && /*#__PURE__*/React__default.createElement(BadgeIndicator, {
+    id: badgeId,
+    count: badgeCount > 0 ? badgeCount : undefined
+  })));
 });
 IconButton.propTypes = {
   /**
@@ -108,6 +119,11 @@ IconButton.propTypes = {
    * **Experimental**: Will attempt to automatically align the tooltip
    */
   autoAlign: PropTypes.bool,
+  /**
+   * **Experimental**: Display a badge on the button. An empty/dot badge if 0, a numbered badge if > 0.
+   * Must be used with size="lg", kind="ghost" and hasIconOnly=true
+   */
+  badgeCount: PropTypes.number,
   /**
    * Optionally specify an href for your IconButton to become an `<a>` element
    */

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

@@ -7,7 +7,7 @@
 import React from 'react';
 export declare const IconIndicatorKinds: string[];
 export type IconIndicatorKind = (typeof IconIndicatorKinds)[number];
-interface IconIndicatorProps {
+export interface IconIndicatorProps {
     /**
      * Specify an optional className to add.
      */

package/es/components/InlineLoading/InlineLoading.js

@@ -66,10 +66,7 @@ const InlineLoading = _ref => {
     }
     return undefined;
   };
-
-  // TODO: Should this element only be constructed, similar to
-  // `loadingAnimation`, if `description` is specified?
-  const loadingText = /*#__PURE__*/React__default.createElement("div", {
+  const loadingText = description && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--inline-loading__text`
   }, description);
   const loading = getLoading();
@@ -80,7 +77,7 @@ const InlineLoading = _ref => {
     className: loadingClasses
   }, rest, {
     "aria-live": rest['aria-live'] ?? 'assertive'
-  }), loadingAnimation, description && loadingText);
+  }), loadingAnimation, loadingText);
 };
 InlineLoading.propTypes = {
   /**

package/es/components/Menu/Menu.d.ts

@@ -27,6 +27,7 @@ export interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
      */
     menuAlignment?: string;
     /**
+     * @deprecated Menus now always support both icons as well as selectable items and nesting.
      * The mode of this menu. Defaults to full.
      * `full` supports nesting and selectable menu items, but no icons.
      * `basic` supports icons but no nesting or selectable menu items.

package/es/components/Menu/Menu.js

@@ -12,7 +12,7 @@ import React__default, { forwardRef, useRef, useContext, useReducer, useMemo, us
 import { createPortal } from 'react-dom';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { warning } from '../../internal/warning.js';
+import deprecate from '../../prop-types/deprecate.js';
 import { MenuContext, menuReducer } from './MenuContext.js';
 import { canUseDOM } from '../../internal/environment.js';
 import { useLayoutDirection } from '../LayoutDirection/useLayoutDirection.js';
@@ -28,7 +28,7 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, forwardRef) {
     containerRef,
     label,
     menuAlignment,
-    mode = 'full',
+    mode,
     onClose,
     onOpen,
     open,
@@ -44,14 +44,10 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, forwardRef) {
   const focusReturn = useRef(null);
   const context = useContext(MenuContext);
   const isRoot = context.state.isRoot;
-  if (context.state.mode === 'basic' && !isRoot) {
-    process.env.NODE_ENV !== "production" ? warning(false, 'Nested menus are not supported when the menu is in "basic" mode.') : void 0;
-  }
   const menuSize = isRoot ? size : context.state.size;
   const [childState, childDispatch] = useReducer(menuReducer, {
     ...context.state,
     isRoot: false,
-    mode,
     size,
     requestCloseRoot: isRoot ? handleClose : context.state.requestCloseRoot
   });
@@ -283,6 +279,7 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, forwardRef) {
     [`${prefix}--menu--open`]: open,
     [`${prefix}--menu--shown`]: open && !legacyAutoalign || position[0] >= 0 && position[1] >= 0,
     [`${prefix}--menu--with-icons`]: childContext.state.hasIcons,
+    [`${prefix}--menu--with-selectable-items`]: childContext.state.hasSelectableItems,
     [`${prefix}--autoalign`]: !legacyAutoalign
   });
   const rendered = /*#__PURE__*/React__default.createElement(MenuContext.Provider, {
@@ -320,13 +317,14 @@ Menu.propTypes = {
    */
   menuAlignment: PropTypes.string,
   /**
+   * **Deprecated**: Menus now always support both icons as well as selectable items and nesting.
    * The mode of this menu. Defaults to full.
    * `full` supports nesting and selectable menu items, but no icons.
    * `basic` supports icons but no nesting or selectable menu items.
    *
    * **This prop is not intended for use and will be set by the respective implementation (like useContextMenu, MenuButton, and ComboButton).**
    */
-  mode: PropTypes.oneOf(['full', 'basic']),
+  mode: deprecate(PropTypes.oneOf(['full', 'basic']), 'Menus now always support both icons as well as selectable items and nesting.'),
   /**
    * Provide an optional function to be called when the Menu should be closed.
    */

package/es/components/Menu/MenuContext.d.ts

@@ -6,13 +6,13 @@
  */
 import { KeyboardEvent, RefObject } from 'react';
 type ActionType = {
-    type: 'enableIcons' | 'registerItem';
+    type: 'enableIcons' | 'enableSelectableItems' | 'registerItem';
     payload: any;
 };
 type StateType = {
     isRoot: boolean;
-    mode: 'full' | 'basic';
     hasIcons: boolean;
+    hasSelectableItems: boolean;
     size: 'xs' | 'sm' | 'md' | 'lg' | null;
     items: any[];
     requestCloseRoot: (e: Pick<KeyboardEvent<HTMLUListElement>, 'type'>) => void;
@@ -20,13 +20,13 @@ type StateType = {
 declare function menuReducer(state: StateType, action: ActionType): {
     hasIcons: boolean;
     isRoot: boolean;
-    mode: "full" | "basic";
+    hasSelectableItems: boolean;
     size: "xs" | "sm" | "md" | "lg" | null;
     items: any[];
     requestCloseRoot: (e: Pick<KeyboardEvent<HTMLUListElement>, "type">) => void;
 };
 type DispatchFuncProps = {
-    type: 'registerItem' | 'enableIcons';
+    type: ActionType['type'];
     payload: {
         ref: RefObject<HTMLLIElement>;
         disabled: boolean;

package/es/components/Menu/MenuContext.js

@@ -9,8 +9,8 @@ import { createContext } from 'react';
 
 const menuDefaultState = {
   isRoot: true,
-  mode: 'full',
   hasIcons: false,
+  hasSelectableItems: false,
   size: null,
   items: [],
   requestCloseRoot: () => {}
@@ -22,6 +22,11 @@ function menuReducer(state, action) {
         ...state,
         hasIcons: true
       };
+    case 'enableSelectableItems':
+      return {
+        ...state,
+        hasSelectableItems: true
+      };
     case 'registerItem':
       return {
         ...state,

package/es/components/Menu/MenuItem.d.ts

@@ -31,7 +31,7 @@ export interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
      */
     onClick?: (event: KeyboardEvent<HTMLLIElement> | MouseEvent<HTMLLIElement>) => void;
     /**
-     * Only applicable if the parent menu is in `basic` mode. Sets the menu item's icon.
+     * Sets the menu item's icon.
      */
     renderIcon?: FC;
     /**