@carbon/react 1.94.1 → 1.95.0-rc.0

package/es/components/ComboBox/ComboBox.js

@@ -732,7 +732,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     translateWithId: translateWithId
   }))), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--list-box__inner-wrapper--decorator`
-  }, normalizedDecorator) : '', /*#__PURE__*/React.createElement(ListBox.Menu, menuProps, isOpen ? filterItems(items, itemToString, inputValue).map((item, index) => {
+  }, candidateIsAILabel ? normalizedDecorator : /*#__PURE__*/React.createElement("span", null, normalizedDecorator)) : '', /*#__PURE__*/React.createElement(ListBox.Menu, menuProps, isOpen ? filterItems(items, itemToString, inputValue).map((item, index) => {
     const isObject = item !== null && typeof item === 'object';
     const title = isObject && 'text' in item && itemToElement ? item.text?.toString() : itemToString(item);
     const itemProps = getItemProps({

package/es/components/DataTable/TableSlugRow.d.ts

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

package/es/components/DataTable/TableSlugRow.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import React, { useEffect } from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
-import deprecateComponent from '../../prop-types/deprecateComponent.js';
+import { deprecateComponent } from '../../prop-types/deprecateComponent.js';
 
 const TableSlugRow = ({
   className,

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

@@ -6,6 +6,14 @@
  */
 import React, { ReactNode, RefObject } from 'react';
 export interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
+    /**
+     * Specify the background token to use. Default is 'layer'.
+     */
+    backgroundToken?: 'layer' | 'background';
+    /**
+     * Specify whether a border should be rendered on the popover
+     */
+    border?: boolean;
     /**
      * The ref of the containing element, used for positioning and alignment of the menu
      */

package/es/components/Menu/Menu.js

@@ -23,6 +23,8 @@ import { canUseDOM } from '../../internal/environment.js';
 const spacing = 8; // distance to keep to window edges, in px
 
 const Menu = /*#__PURE__*/forwardRef(function Menu({
+  backgroundToken = 'layer',
+  border = false,
   children,
   className,
   containerRef,
@@ -275,7 +277,9 @@ const Menu = /*#__PURE__*/forwardRef(function Menu({
     [`${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
+    [`${prefix}--autoalign`]: !legacyAutoalign,
+    [`${prefix}--menu--border`]: border,
+    [`${prefix}--menu--background-token__background`]: backgroundToken === 'background'
   });
   const rendered = /*#__PURE__*/React.createElement(MenuContext.Provider, {
     value: childContext
@@ -294,6 +298,14 @@ const Menu = /*#__PURE__*/forwardRef(function Menu({
   return isRoot ? open && /*#__PURE__*/createPortal(rendered, target) || null : rendered;
 });
 Menu.propTypes = {
+  /**
+   * Specify the background token to use. Default is 'layer'.
+   */
+  backgroundToken: PropTypes.oneOf(['layer', 'background']),
+  /**
+   * Specify whether a border should be rendered on the menu
+   */
+  border: PropTypes.bool,
   /**
    * A collection of MenuItems to be rendered within this Menu.
    */

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

@@ -39,6 +39,14 @@ export interface MenuButtonProps extends ComponentProps<'div'> {
      * Specify the tabIndex of the button.
      */
     tabIndex?: number;
+    /**
+     * Specify the background token to use for the menu. Default is 'layer'.
+     */
+    menuBackgroundToken?: 'layer' | 'background';
+    /**
+     * Specify whether a border should be rendered on the menu
+     */
+    menuBorder?: boolean;
     /**
      * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
      */

package/es/components/MenuButton/index.js

@@ -30,6 +30,8 @@ const MenuButton = /*#__PURE__*/forwardRef(({
   disabled,
   kind = defaultButtonKind,
   label,
+  menuBackgroundToken = 'layer',
+  menuBorder = false,
   size: size$1 = 'lg',
   menuAlignment = 'bottom',
   tabIndex = 0,
@@ -142,7 +144,9 @@ const MenuButton = /*#__PURE__*/forwardRef(({
     size: size$1,
     open: open,
     onClose: handleClose,
-    target: menuTarget
+    target: menuTarget,
+    backgroundToken: menuBackgroundToken,
+    border: menuBorder
   }, children));
 });
 MenuButton.propTypes = {
@@ -184,10 +188,17 @@ MenuButton.propTypes = {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   tabIndex: PropTypes.number,
+  /**
+   * Specify the background token to use for the menu. Default is 'layer'.
+   */
+  menuBackgroundToken: PropTypes.oneOf(['layer', 'background']),
+  /**
+   * Specify whether a border should be rendered on the menu
+   */
+  menuBorder: PropTypes.bool,
   /**
    * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
    */
-
   menuTarget: PropTypes.instanceOf(typeof Element !== 'undefined' ? Element : Object)
 };
 

package/es/components/NumberInput/NumberInput.js

@@ -39,6 +39,69 @@ const defaultTranslations = {
 const defaultTranslateWithId = messageId => {
   return defaultTranslations[messageId];
 };
+const getSeparators = locale => {
+  const numberWithGroupAndDecimal = 1234567.89;
+  const formatted = new Intl.NumberFormat(locale).format(numberWithGroupAndDecimal);
+
+  // Extract separators using regex
+  const match = formatted.match(/(\D+)\d{3}(\D+)\d{2}$/);
+  if (match) {
+    const groupSeparator = match[1];
+    const decimalSeparator = match[2];
+    return {
+      groupSeparator,
+      decimalSeparator
+    };
+  } else {
+    return {
+      groupSeparator: null,
+      decimalSeparator: null
+    };
+  }
+};
+const validateNumberSeparators = (input, locale) => {
+  // allow empty string
+  if (input === '' || Number.isNaN(input)) {
+    return true;
+  }
+  const {
+    groupSeparator,
+    decimalSeparator
+  } = getSeparators(locale);
+  if (!decimalSeparator) {
+    return !isNaN(Number(input));
+  }
+  const esc = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  let group = '';
+  if (groupSeparator) {
+    if (groupSeparator.trim() === '') {
+      group = '[\\u00A0\\u202F\\s]'; // handle NBSP, narrow NBSP, space
+    } else {
+      group = esc(groupSeparator);
+    }
+  }
+  const decimal = esc(decimalSeparator);
+
+  // Regex for:
+  // - integers (with/without grouping)
+  // - optional decimal with 0+ digits after separator
+  const regex = new RegExp(`^-?\\d{1,3}(${group}\\d{3})*(${decimal}\\d*)?$|^-?\\d+(${decimal}\\d*)?$`);
+  if (!regex.test(input)) {
+    return false;
+  }
+
+  // Normalize
+  let normalized = input;
+  if (groupSeparator) {
+    if (groupSeparator.trim() === '') {
+      normalized = normalized?.replace(/[\u00A0\u202F\s]/g, '');
+    } else {
+      normalized = normalized?.split(groupSeparator).join('');
+    }
+  }
+  normalized = normalized?.replace(decimalSeparator, '.');
+  return !isNaN(Number(normalized));
+};
 
 // eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
 const NumberInput = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
@@ -726,4 +789,4 @@ function disableWheel(e) {
   e.preventDefault();
 }
 
-export { NumberInput };
+export { NumberInput, validateNumberSeparators };

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

@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 export { default as NumberInputSkeleton } from './NumberInput.Skeleton';
-export { NumberInput, type NumberInputProps } from './NumberInput';
+export { NumberInput, validateNumberSeparators, type NumberInputProps, } from './NumberInput';

package/es/components/PaginationNav/PaginationNav.js

@@ -274,9 +274,7 @@ const PaginationNav = /*#__PURE__*/React.forwardRef(({
   return /*#__PURE__*/React.createElement("nav", _extends({
     className: classNames,
     ref: ref
-  }, rest, {
-    "aria-label": "pagination"
-  }), /*#__PURE__*/React.createElement("ul", {
+  }, rest), /*#__PURE__*/React.createElement("ul", {
     className: `${prefix}--pagination-nav__list`
   }, /*#__PURE__*/React.createElement(DirectionButton, {
     direction: "backward",

package/es/components/Slider/Slider.js

@@ -20,6 +20,7 @@ import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import { LowerHandle, LowerHandleFocus, UpperHandle, UpperHandleFocus } from './SliderHandles.js';
 import { clamp } from '../../internal/clamp.js';
+import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
 import { throttle } from '../../node_modules/es-toolkit/dist/compat/function/throttle.js';
 
 const ThumbWrapper = ({
@@ -73,6 +74,7 @@ var HandlePosition = /*#__PURE__*/function (HandlePosition) {
   return HandlePosition;
 }(HandlePosition || {}); // TODO: Delete this type and directory type the properties in the function.
 const Slider = props => {
+  var _Fragment, _Fragment2, _Fragment3, _Fragment4;
   // TODO: Move destructured `props` from the IIFE to here.
 
   const initialState = {
@@ -926,63 +928,77 @@ const Slider = props => {
       setState(derivedState);
     }
   }, [props.invalid]);
+  const {
+    ariaLabelInput,
+    unstable_ariaLabelInputUpper: ariaLabelInputUpper,
+    className,
+    hideTextInput = false,
+    id = inputIdRef.current = inputIdRef.current ||
+    // TODO:
+    // 1. Why isn't `inputId` just set to this value instead of an empty
+    //    string?
+    // 2. Why this value instead of something else, like
+    //    `crypto.randomUUID()` or `useId()`?
+    `__carbon-slider_${Math.random().toString(36).substr(2)}`,
+    min,
+    minLabel,
+    max,
+    maxLabel,
+    formatLabel = defaultFormatLabel,
+    labelText,
+    hideLabel,
+    step = 1,
+    // TODO: Other properties are deleted below. Why isn't this one?
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
+    stepMultiplier: _stepMultiplier,
+    inputType = 'number',
+    invalidText,
+    required,
+    disabled = false,
+    name,
+    unstable_nameUpper: nameUpper,
+    light,
+    readOnly = false,
+    warn = false,
+    warnText,
+    translateWithId: t = defaultTranslateWithId,
+    ...other
+  } = props;
+  const {
+    value,
+    valueUpper,
+    isValid,
+    isValidUpper,
+    correctedValue,
+    correctedPosition,
+    isRtl
+  } = state;
+  const normalizedProps = useNormalizedInputProps({
+    id,
+    disabled,
+    readOnly,
+    invalid: !isValid,
+    warn
+  });
+  const normalizedUpperProps = useNormalizedInputProps({
+    id,
+    disabled,
+    readOnly,
+    invalid: !isValidUpper,
+    warn
+  });
 
   // TODO: Delete this IIFE. It was added to maintain whitespace and to make it clear
   // what exactly has changed.
-  return ((_Fragment, _Fragment2, _Fragment3, _Fragment4) => {
-    const {
-      ariaLabelInput,
-      unstable_ariaLabelInputUpper: ariaLabelInputUpper,
-      className,
-      hideTextInput = false,
-      id = inputIdRef.current = inputIdRef.current ||
-      // TODO:
-      // 1. Why isn't `inputId` just set to this value instead of an empty
-      //    string?
-      // 2. Why this value instead of something else, like
-      //    `crypto.randomUUID()` or `useId()`?
-      `__carbon-slider_${Math.random().toString(36).substr(2)}`,
-      min,
-      minLabel,
-      max,
-      maxLabel,
-      formatLabel = defaultFormatLabel,
-      labelText,
-      hideLabel,
-      step = 1,
-      // TODO: Other properties are deleted below. Why isn't this one?
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
-      stepMultiplier: _stepMultiplier,
-      inputType = 'number',
-      invalidText,
-      required,
-      disabled = false,
-      name,
-      unstable_nameUpper: nameUpper,
-      light,
-      readOnly = false,
-      warn,
-      warnText,
-      translateWithId: t = defaultTranslateWithId,
-      ...other
-    } = props;
+  return (() => {
     delete other.onRelease;
     delete other.invalid;
     delete other.unstable_valueUpper;
-    const {
-      value,
-      valueUpper,
-      isValid,
-      isValidUpper,
-      correctedValue,
-      correctedPosition,
-      isRtl
-    } = state;
-    const showWarning = !readOnly && warn ||
+    const showWarning = normalizedProps.warn ||
     // TODO: https://github.com/carbon-design-system/carbon/issues/18991#issuecomment-2795709637
     // eslint-disable-next-line valid-typeof , no-constant-binary-expression -- https://github.com/carbon-design-system/carbon/issues/20452
     typeof correctedValue !== null && correctedPosition === HandlePosition.LOWER && isValid;
-    const showWarningUpper = !readOnly && warn ||
+    const showWarningUpper = normalizedUpperProps.warn ||
     // TODO: https://github.com/carbon-design-system/carbon/issues/18991#issuecomment-2795709637
     // eslint-disable-next-line valid-typeof, no-constant-binary-expression -- https://github.com/carbon-design-system/carbon/issues/20452
     typeof correctedValue !== null && correctedPosition === (twoHandles ? HandlePosition.UPPER : HandlePosition.LOWER) && (twoHandles ? isValidUpper : isValid);
@@ -1007,11 +1023,11 @@ const Slider = props => {
         [`${prefix}--text-input--light`]: light
       };
       const lowerInputClasses = cx([...fixedInputClasses, `${prefix}--slider-text-input--lower`, conditionalInputClasses, {
-        [`${prefix}--text-input--invalid`]: !readOnly && !isValid,
+        [`${prefix}--text-input--invalid`]: normalizedProps.invalid,
         [`${prefix}--slider-text-input--warn`]: showWarning
       }]);
       const upperInputClasses = cx([...fixedInputClasses, `${prefix}--slider-text-input--upper`, conditionalInputClasses, {
-        [`${prefix}--text-input--invalid`]: !readOnly && (twoHandles ? !isValidUpper : !isValid),
+        [`${prefix}--text-input--invalid`]: twoHandles ? normalizedUpperProps.invalid : normalizedProps.invalid,
         [`${prefix}--slider-text-input--warn`]: showWarningUpper
       }]);
       const lowerInputWrapperClasses = cx([`${prefix}--text-input-wrapper`, `${prefix}--slider-text-input-wrapper`, `${prefix}--slider-text-input-wrapper--lower`, {
@@ -1071,11 +1087,11 @@ const Slider = props => {
         onBlur: onBlurInput,
         onKeyUp: props.onInputKeyUp,
         onKeyDown: onInputKeyDown,
-        "data-invalid": !isValid && !readOnly ? true : null,
+        "data-invalid": normalizedProps.invalid ? true : null,
         "data-handle-position": HandlePosition.LOWER,
-        "aria-invalid": !isValid && !readOnly ? true : undefined,
+        "aria-invalid": normalizedProps.invalid ? true : undefined,
         readOnly: readOnly
-      }), !readOnly && !isValid && /*#__PURE__*/React.createElement(WarningFilled, {
+      }), normalizedProps.invalid && /*#__PURE__*/React.createElement(WarningFilled, {
         className: `${prefix}--slider__invalid-icon`
       }), showWarning && /*#__PURE__*/React.createElement(WarningAltFilled, {
         className: `${prefix}--slider__invalid-icon ${prefix}--slider__invalid-icon--warning`
@@ -1091,7 +1107,7 @@ const Slider = props => {
         onKeyDown: onKeyDown,
         role: "presentation",
         tabIndex: -1,
-        "data-invalid": (twoHandles ? !isValid || !isValidUpper : !isValid) && !readOnly ? true : null
+        "data-invalid": (twoHandles ? normalizedProps.invalid || normalizedUpperProps.invalid : normalizedProps.invalid) ? true : null
       }, other), /*#__PURE__*/React.createElement(ThumbWrapper, _extends({
         hasTooltip: hideTextInput,
         className: lowerThumbWrapperClasses,
@@ -1174,18 +1190,18 @@ const Slider = props => {
         onBlur: onBlurInput,
         onKeyDown: onInputKeyDown,
         onKeyUp: props.onInputKeyUp,
-        "data-invalid": (twoHandles ? !isValidUpper : !isValid) && !readOnly ? true : null,
+        "data-invalid": (twoHandles ? normalizedUpperProps.invalid : normalizedProps.invalid) ? true : null,
         "data-handle-position": twoHandles ? HandlePosition.UPPER : null,
-        "aria-invalid": (twoHandles ? !isValidUpper : !isValid) && !readOnly ? true : undefined,
+        "aria-invalid": (twoHandles ? normalizedUpperProps.invalid : normalizedProps.invalid) ? true : undefined,
         readOnly: readOnly
-      }), !readOnly && (twoHandles ? !isValidUpper : !isValid) && /*#__PURE__*/React.createElement(WarningFilled, {
+      }), (twoHandles ? normalizedUpperProps.invalid : normalizedProps.invalid) && /*#__PURE__*/React.createElement(WarningFilled, {
         className: `${prefix}--slider__invalid-icon`
       }), showWarningUpper && /*#__PURE__*/React.createElement(WarningAltFilled, {
         className: `${prefix}--slider__invalid-icon ${prefix}--slider__invalid-icon--warning`
-      }))), !readOnly && (!isValid || !isValidUpper) && /*#__PURE__*/React.createElement(Text, {
+      }))), (normalizedProps.invalid || normalizedUpperProps.invalid) && /*#__PURE__*/React.createElement(Text, {
         as: "div",
         className: cx(`${prefix}--slider__validation-msg`, `${prefix}--slider__validation-msg--invalid`, `${prefix}--form-requirement`)
-      }, invalidText), !readOnly && warn && isValid && isValidUpper && /*#__PURE__*/React.createElement(Text, {
+      }, invalidText), (normalizedProps.warn || normalizedUpperProps.warn) && /*#__PURE__*/React.createElement(Text, {
         as: "div",
         className: cx(`${prefix}--slider__validation-msg`, `${prefix}--form-requirement`)
       }, warnText), correctedValue && /*#__PURE__*/React.createElement(Text, {

package/es/components/Text/Text.js

@@ -62,7 +62,7 @@ Text.propTypes = {
   /**
    * Provide child elements or text to be rendered inside of this component
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   /**
    * Specify the text direction to be used for this component and any of its
    * children

package/es/components/Tile/Tile.js

@@ -493,7 +493,7 @@ const ExpandableTile = /*#__PURE__*/React.forwardRef(({
     });
     resizeObserver.observe(aboveTheFold.current);
     return () => resizeObserver.disconnect();
-  }, []);
+  }, [isTileMaxHeight, isTilePadding]);
   const belowTheFoldId = useId('expandable-tile-interactive');
 
   // AILabel is always size `xs`

package/es/index.js

@@ -102,7 +102,7 @@ export { FilterableMultiSelect } from './components/MultiSelect/FilterableMultiS
 export { MultiSelect } from './components/MultiSelect/MultiSelect.js';
 export { ActionableNotification, Callout, InlineNotification, NotificationActionButton, NotificationButton, StaticNotification, ToastNotification } from './components/Notification/Notification.js';
 export { default as NumberInputSkeleton } from './components/NumberInput/NumberInput.Skeleton.js';
-export { NumberInput } from './components/NumberInput/NumberInput.js';
+export { NumberInput, validateNumberSeparators } from './components/NumberInput/NumberInput.js';
 export { default as OrderedList } from './components/OrderedList/OrderedList.js';
 export { default as OverflowMenu } from './components/OverflowMenu/index.js';
 export { default as OverflowMenuItem } from './components/OverflowMenuItem/OverflowMenuItem.js';

package/es/internal/useNormalizedInputProps.js

@@ -32,9 +32,9 @@ const useNormalizedInputProps = ({
   const prefix = usePrefix();
   const normalizedProps = {
     disabled: !readOnly && disabled,
-    invalid: !readOnly && invalid,
+    invalid: !readOnly && !disabled && invalid,
     invalidId: `${id}-error-msg`,
-    warn: !readOnly && !invalid && warn,
+    warn: !readOnly && !invalid && !disabled && warn,
     warnId: `${id}-warn-msg`,
     validation: null,
     icon: null,

package/es/prop-types/deprecateComponent.d.ts

@@ -1 +1,7 @@
-export default function deprecateComponent(componentName: any, message: any): any;
+/**
+ * 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.
+ */
+export declare const deprecateComponent: (componentName: string, message?: string) => string | undefined;

package/es/prop-types/deprecateComponent.js

@@ -8,12 +8,12 @@
 import { warning } from '../internal/warning.js';
 
 const didWarnAboutDeprecation = {};
-function deprecateComponent(componentName, message) {
+const deprecateComponent = (componentName, message) => {
   if (!didWarnAboutDeprecation[componentName]) {
     didWarnAboutDeprecation[componentName] = true;
     process.env.NODE_ENV !== "production" ? warning(false, message) : void 0;
   }
   return componentName;
-}
+};
 
-export { deprecateComponent as default };
+export { deprecateComponent };

package/lib/components/ComboBox/ComboBox.js

@@ -736,7 +736,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     translateWithId: translateWithId
   }))), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--list-box__inner-wrapper--decorator`
-  }, normalizedDecorator) : '', /*#__PURE__*/React.createElement(index$2.default.Menu, menuProps, isOpen ? filterItems(items, itemToString, inputValue).map((item, index) => {
+  }, candidateIsAILabel ? normalizedDecorator : /*#__PURE__*/React.createElement("span", null, normalizedDecorator)) : '', /*#__PURE__*/React.createElement(index$2.default.Menu, menuProps, isOpen ? filterItems(items, itemToString, inputValue).map((item, index) => {
     const isObject = item !== null && typeof item === 'object';
     const title = isObject && 'text' in item && itemToElement ? item.text?.toString() : itemToString(item);
     const itemProps = getItemProps({

package/lib/components/DataTable/TableSlugRow.d.ts

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

package/lib/components/DataTable/TableSlugRow.js

@@ -20,7 +20,7 @@ const TableSlugRow = ({
   slug
 }) => {
   React.useEffect(() => {
-    deprecateComponent.default('TableSlugRow', 'The `TableSlugRow` component has been deprecated and will be removed in the next major version. Use the TableDecoratorRow component instead.');
+    deprecateComponent.deprecateComponent('TableSlugRow', 'The `TableSlugRow` component has been deprecated and will be removed in the next major version. Use the TableDecoratorRow component instead.');
   }, []);
   const prefix = usePrefix.usePrefix();
   const TableSlugRowClasses = cx({

package/lib/components/Menu/Menu.d.ts

@@ -6,6 +6,14 @@
  */
 import React, { ReactNode, RefObject } from 'react';
 export interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
+    /**
+     * Specify the background token to use. Default is 'layer'.
+     */
+    backgroundToken?: 'layer' | 'background';
+    /**
+     * Specify whether a border should be rendered on the popover
+     */
+    border?: boolean;
     /**
      * The ref of the containing element, used for positioning and alignment of the menu
      */

package/lib/components/Menu/Menu.js

@@ -25,6 +25,8 @@ var environment = require('../../internal/environment.js');
 const spacing = 8; // distance to keep to window edges, in px
 
 const Menu = /*#__PURE__*/React.forwardRef(function Menu({
+  backgroundToken = 'layer',
+  border = false,
   children,
   className,
   containerRef,
@@ -277,7 +279,9 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu({
     [`${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
+    [`${prefix}--autoalign`]: !legacyAutoalign,
+    [`${prefix}--menu--border`]: border,
+    [`${prefix}--menu--background-token__background`]: backgroundToken === 'background'
   });
   const rendered = /*#__PURE__*/React.createElement(MenuContext.MenuContext.Provider, {
     value: childContext
@@ -296,6 +300,14 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu({
   return isRoot ? open && /*#__PURE__*/ReactDOM.createPortal(rendered, target) || null : rendered;
 });
 Menu.propTypes = {
+  /**
+   * Specify the background token to use. Default is 'layer'.
+   */
+  backgroundToken: PropTypes.oneOf(['layer', 'background']),
+  /**
+   * Specify whether a border should be rendered on the menu
+   */
+  border: PropTypes.bool,
   /**
    * A collection of MenuItems to be rendered within this Menu.
    */

package/lib/components/MenuButton/index.d.ts

@@ -39,6 +39,14 @@ export interface MenuButtonProps extends ComponentProps<'div'> {
      * Specify the tabIndex of the button.
      */
     tabIndex?: number;
+    /**
+     * Specify the background token to use for the menu. Default is 'layer'.
+     */
+    menuBackgroundToken?: 'layer' | 'background';
+    /**
+     * Specify whether a border should be rendered on the menu
+     */
+    menuBorder?: boolean;
     /**
      * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
      */

package/lib/components/MenuButton/index.js

@@ -32,6 +32,8 @@ const MenuButton = /*#__PURE__*/React.forwardRef(({
   disabled,
   kind = defaultButtonKind,
   label,
+  menuBackgroundToken = 'layer',
+  menuBorder = false,
   size = 'lg',
   menuAlignment = 'bottom',
   tabIndex = 0,
@@ -144,7 +146,9 @@ const MenuButton = /*#__PURE__*/React.forwardRef(({
     size: size,
     open: open,
     onClose: handleClose,
-    target: menuTarget
+    target: menuTarget,
+    backgroundToken: menuBackgroundToken,
+    border: menuBorder
   }, children));
 });
 MenuButton.propTypes = {
@@ -186,10 +190,17 @@ MenuButton.propTypes = {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   tabIndex: PropTypes.number,
+  /**
+   * Specify the background token to use for the menu. Default is 'layer'.
+   */
+  menuBackgroundToken: PropTypes.oneOf(['layer', 'background']),
+  /**
+   * Specify whether a border should be rendered on the menu
+   */
+  menuBorder: PropTypes.bool,
   /**
    * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
    */
-
   menuTarget: PropTypes.instanceOf(typeof Element !== 'undefined' ? Element : Object)
 };