@carbon/react 1.94.0-rc.0 → 1.94.0

package/es/components/ComposedModal/ComposedModal.js

@@ -155,7 +155,9 @@ const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModal
   const modalState = useComposedModalState(open);
   const [isOpen, setIsOpen] = presenceContext?.modalState ?? modalState;
   const enableDialogElement = useFeatureFlag('enable-dialog-element');
-  const focusTrapWithoutSentinels = useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
+  const deprecatedFlag = useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
+  const focusTrapWithoutSentinelsFlag = useFeatureFlag('enable-focus-wrap-without-sentinels');
+  const focusTrapWithoutSentinels = deprecatedFlag || focusTrapWithoutSentinelsFlag;
   process.env.NODE_ENV !== "production" ? warning(!(focusTrapWithoutSentinels && enableDialogElement), '`<Modal>` detected both `focusTrapWithoutSentinels` and ' + '`enableDialogElement` feature flags are enabled. The native dialog ' + 'element handles focus, so `enableDialogElement` must be off for ' + '`focusTrapWithoutSentinels` to have any effect.') : void 0;
 
   // Propagate open/close state to the document.body

package/es/components/DatePicker/DatePicker.js

@@ -23,6 +23,7 @@ import { useSavedCallback } from '../../internal/useSavedCallback.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
+import { datePartsOrder } from '@carbon/utilities';
 
 // Weekdays shorthand for English locale
 // Ensure localization exists before trying to access it
@@ -55,6 +56,7 @@ const monthToStr = (monthNumber, shorthand, locale) => locale.months[shorthand ?
  * @param {string} config.selectorFlatpickrYearContainer The CSS selector for the container of year selection UI.
  * @param {string} config.selectorFlatpickrCurrentMonth The CSS selector for the text-based month selection UI.
  * @param {string} config.classFlatpickrCurrentMonth The CSS class for the text-based month selection UI.
+ * @param {string} config.locale The locale code.
  * @returns {Plugin} A Flatpickr plugin to use text instead of `<select>` for month picker.
  */
 const carbonFlatpickrMonthSelectPlugin = config => fp => {
@@ -71,7 +73,13 @@ const carbonFlatpickrMonthSelectPlugin = config => fp => {
     fp.monthElements.splice(0, fp.monthElements.length, ...fp.monthElements.map(() => {
       const monthElement = fp._createElement('span', config.classFlatpickrCurrentMonth);
       monthElement.textContent = monthToStr(fp.currentMonth, config.shorthand === true, fp.l10n);
-      fp.yearElements[0].closest(config.selectorFlatpickrMonthYearContainer).insertBefore(monthElement, fp.yearElements[0].closest(config.selectorFlatpickrYearContainer));
+
+      // Depending on the locale, toggle the order of the month and year
+      if (datePartsOrder.isMonthFirst(config.locale)) {
+        fp.yearElements[0].closest(config.selectorFlatpickrMonthYearContainer).insertBefore(monthElement, fp.yearElements[0].closest(config.selectorFlatpickrYearContainer));
+      } else {
+        fp.yearElements[0].closest(config.selectorFlatpickrMonthYearContainer).insertAdjacentElement('afterend', monthElement);
+      }
       return monthElement;
     }));
   };
@@ -376,7 +384,8 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
       }) : () => {}, carbonFlatpickrMonthSelectPlugin({
         selectorFlatpickrMonthYearContainer: '.flatpickr-current-month',
         selectorFlatpickrYearContainer: '.numInputWrapper',
-        classFlatpickrCurrentMonth: 'cur-month'
+        classFlatpickrCurrentMonth: 'cur-month',
+        locale: locale
       }), carbonFlatpickrFixEventsPlugin({
         inputFrom: startInputField.current,
         inputTo: endInputField.current,

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

@@ -14,6 +14,7 @@ export interface FeatureFlagsProps {
     enableV12Overflowmenu?: boolean;
     enableTreeviewControllable?: boolean;
     enableExperimentalFocusWrapWithoutSentinels?: boolean;
+    enableFocusWrapWithoutSentinels?: boolean;
     enableDialogElement?: boolean;
     enableV12DynamicFloatingStyles?: boolean;
     enableEnhancedFileUploader?: boolean;
@@ -29,7 +30,7 @@ declare const FeatureFlagContext: React.Context<any>;
  * along with the current `FeatureFlagContext` to provide consumers to check if
  * a feature flag is enabled or disabled in a given React tree
  */
-declare function FeatureFlags({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableDialogElement, enableV12DynamicFloatingStyles, enableEnhancedFileUploader, enablePresence, }: FeatureFlagsProps): JSX.Element;
+declare function FeatureFlags({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableFocusWrapWithoutSentinels, enableDialogElement, enableV12DynamicFloatingStyles, enableEnhancedFileUploader, enablePresence, }: FeatureFlagsProps): JSX.Element;
 declare namespace FeatureFlags {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -42,9 +43,11 @@ declare namespace FeatureFlags {
         enableV12Overflowmenu: PropTypes.Requireable<boolean>;
         enableTreeviewControllable: PropTypes.Requireable<boolean>;
         enableExperimentalFocusWrapWithoutSentinels: PropTypes.Requireable<boolean>;
+        enableFocusWrapWithoutSentinels: PropTypes.Requireable<boolean>;
         enableDialogElement: PropTypes.Requireable<boolean>;
         enableV12DynamicFloatingStyles: PropTypes.Requireable<boolean>;
         enableEnhancedFileUploader: PropTypes.Requireable<boolean>;
+        enablePresence: PropTypes.Requireable<boolean>;
     };
 }
 /**

package/es/components/FeatureFlags/index.js

@@ -30,6 +30,7 @@ function FeatureFlags({
   enableV12Overflowmenu = false,
   enableTreeviewControllable = false,
   enableExperimentalFocusWrapWithoutSentinels = false,
+  enableFocusWrapWithoutSentinels = false,
   enableDialogElement = false,
   enableV12DynamicFloatingStyles = false,
   enableEnhancedFileUploader = false,
@@ -43,6 +44,7 @@ function FeatureFlags({
     'enable-v12-overflowmenu': enableV12Overflowmenu,
     'enable-treeview-controllable': enableTreeviewControllable,
     'enable-experimental-focus-wrap-without-sentinels': enableExperimentalFocusWrapWithoutSentinels,
+    'enable-focus-wrap-without-sentinels': enableFocusWrapWithoutSentinels,
     'enable-dialog-element': enableDialogElement,
     'enable-v12-dynamic-floating-styles': enableV12DynamicFloatingStyles,
     'enable-enhanced-file-uploader': enableEnhancedFileUploader,
@@ -84,9 +86,11 @@ FeatureFlags.propTypes = {
   enableV12Overflowmenu: PropTypes.bool,
   enableTreeviewControllable: PropTypes.bool,
   enableExperimentalFocusWrapWithoutSentinels: PropTypes.bool,
+  enableFocusWrapWithoutSentinels: PropTypes.bool,
   enableDialogElement: PropTypes.bool,
   enableV12DynamicFloatingStyles: PropTypes.bool,
-  enableEnhancedFileUploader: PropTypes.bool
+  enableEnhancedFileUploader: PropTypes.bool,
+  enablePresence: PropTypes.bool
 };
 
 /**

package/es/components/Modal/Modal.js

@@ -127,7 +127,9 @@ const ModalDialog = /*#__PURE__*/React.forwardRef(function ModalDialog({
   // always mark as open when mounted with presence
   const open = externalOpen || enablePresence;
   const prevOpen = usePreviousValue(open);
-  const focusTrapWithoutSentinels = useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
+  const deprecatedFlag = useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
+  const focusTrapWithoutSentinelsFlag = useFeatureFlag('enable-focus-wrap-without-sentinels');
+  const focusTrapWithoutSentinels = focusTrapWithoutSentinelsFlag || deprecatedFlag;
   const enableDialogElement = useFeatureFlag('enable-dialog-element');
   process.env.NODE_ENV !== "production" ? warning(!(focusTrapWithoutSentinels && enableDialogElement), '`<Modal>` detected both `focusTrapWithoutSentinels` and ' + '`enableDialogElement` feature flags are enabled. The native dialog ' + 'element handles focus, so `enableDialogElement` must be off for ' + '`focusTrapWithoutSentinels` to have any effect.') : void 0;
   process.env.NODE_ENV !== "production" ? warning(!(!passiveModal && preventCloseOnClickOutside === false), invalidOutsideClickMessage) : void 0;

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -552,7 +552,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
   });
   const inputProp = getInputProps(getDropdownProps({
     'aria-controls': isOpen ? menuId : undefined,
-    'aria-describedby': helperText ? helperId : undefined,
+    'aria-describedby': helperText && !invalid && !warn ? helperId : undefined,
     'aria-haspopup': 'listbox',
     // Remove excess aria `aria-labelledby`. HTML <label for>
     // provides this aria information.

package/es/components/Notification/Notification.js

@@ -504,7 +504,9 @@ function ActionableNotification({
   const startTrap = useRef(null);
   const endTrap = useRef(null);
   const ref = useRef(null);
-  const focusTrapWithoutSentinels = useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
+  const deprecatedFlag = useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
+  const focusTrapWithoutSentinelsFlag = useFeatureFlag('enable-focus-wrap-without-sentinels');
+  const focusTrapWithoutSentinels = focusTrapWithoutSentinelsFlag || deprecatedFlag;
   useIsomorphicEffect(() => {
     if (hasFocus && role === 'alertdialog') {
       const button = document.querySelector('button.cds--actionable-notification__action-button');

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

@@ -29,6 +29,10 @@ export interface PopoverBaseProps {
      * **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled.
      */
     alignmentAxisOffset?: number;
+    /**
+     * Specify the background token to use. Default is 'layer'.
+     */
+    backgroundToken?: 'layer' | 'background';
     /**
      * 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
@@ -44,6 +48,10 @@ export interface PopoverBaseProps {
      * Specify whether a caret should be rendered
      */
     caret?: boolean;
+    /**
+     * Specify whether a border should be rendered on the popover
+     */
+    border?: boolean;
     /**
      * Provide elements to be rendered inside of the component
      */

package/es/components/Popover/index.js

@@ -39,9 +39,11 @@ const Popover = /*#__PURE__*/React.forwardRef(function PopoverRenderFunction({
   as: BaseComponent = 'span',
   autoAlign = false,
   autoAlignBoundary,
+  backgroundToken = 'layer',
   caret = isTabTip ? false : true,
   className: customClassName,
   children,
+  border = false,
   dropShadow = true,
   highContrast = false,
   onRequestClose,
@@ -211,11 +213,13 @@ forwardRef) {
     [`${prefix}--popover-container`]: true,
     [`${prefix}--popover--caret`]: caret,
     [`${prefix}--popover--drop-shadow`]: dropShadow,
+    [`${prefix}--popover--border`]: border,
     [`${prefix}--popover--high-contrast`]: highContrast,
     [`${prefix}--popover--open`]: open,
     [`${prefix}--popover--auto-align ${prefix}--autoalign`]: enableFloatingStyles,
     [`${prefix}--popover--${currentAlignment}`]: true,
-    [`${prefix}--popover--tab-tip`]: isTabTip
+    [`${prefix}--popover--tab-tip`]: isTabTip,
+    [`${prefix}--popover--background-token__background`]: backgroundToken === 'background' && !highContrast
   }, customClassName);
   const mappedChildren = React.Children.map(children, child => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
@@ -327,6 +331,10 @@ Popover.propTypes = {
    * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
+  /**
+   * Specify the background token to use. Default is 'layer'.
+   */
+  backgroundToken: PropTypes.oneOf(['layer', 'background']),
   /**
    * Specify a bounding element to be used for autoAlign calculations. The viewport is used by default. This prop is currently experimental and is subject to future changes.
    */
@@ -340,6 +348,10 @@ Popover.propTypes = {
    * Specify whether a caret should be rendered
    */
   caret: PropTypes.bool,
+  /**
+   * Specify whether a border should be rendered on the popover
+   */
+  border: PropTypes.bool,
   /**
    * Provide elements to be rendered inside of the component
    */

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

@@ -54,9 +54,11 @@ export declare namespace Toggletip {
         defaultOpen: PropTypes.Requireable<boolean>;
         align?: PopoverAlignment;
         alignmentAxisOffset?: number;
+        backgroundToken?: "layer" | "background";
         autoAlign?: boolean;
         autoAlignBoundary?: import("@floating-ui/dom").Boundary;
         caret?: boolean;
+        border?: boolean;
         children?: React.ReactNode;
         className?: string;
         dropShadow?: boolean;

package/es/feature-flags.js

@@ -12,6 +12,7 @@ FeatureFlags.merge({
   'enable-css-grid': true,
   'enable-v11-release': true,
   'enable-experimental-tile-contrast': false,
+  'enable-tile-contrast': false,
   'enable-v12-tile-radio-icons': false,
   'enable-v12-structured-list-visible-icons': false,
   'enable-v12-dynamic-floating-styles': false

package/es/internal/FloatingMenu.js

@@ -274,7 +274,9 @@ const FloatingMenu = ({
       });
     }
   };
-  const focusTrapWithoutSentinels = FeatureFlags.enabled('enable-experimental-focus-wrap-without-sentinels');
+  const deprecatedFlag = FeatureFlags.enabled('enable-experimental-focus-wrap-without-sentinels');
+  const focusTrapWithoutSentinelsFlag = FeatureFlags.enabled('enable-focus-wrap-without-sentinels');
+  const focusTrapWithoutSentinels = deprecatedFlag || focusTrapWithoutSentinelsFlag;
   if (typeof document !== 'undefined') {
     const portalTarget = target ? target() : document.body;
     return /*#__PURE__*/ReactDOM.createPortal(

package/lib/components/ComposedModal/ComposedModal.js

@@ -159,7 +159,9 @@ const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModal
   const modalState = useComposedModalState.useComposedModalState(open);
   const [isOpen, setIsOpen] = presenceContext?.modalState ?? modalState;
   const enableDialogElement = index$1.useFeatureFlag('enable-dialog-element');
-  const focusTrapWithoutSentinels = index$1.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
+  const deprecatedFlag = index$1.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
+  const focusTrapWithoutSentinelsFlag = index$1.useFeatureFlag('enable-focus-wrap-without-sentinels');
+  const focusTrapWithoutSentinels = deprecatedFlag || focusTrapWithoutSentinelsFlag;
   process.env.NODE_ENV !== "production" ? warning.warning(!(focusTrapWithoutSentinels && enableDialogElement), '`<Modal>` detected both `focusTrapWithoutSentinels` and ' + '`enableDialogElement` feature flags are enabled. The native dialog ' + 'element handles focus, so `enableDialogElement` must be off for ' + '`focusTrapWithoutSentinels` to have any effect.') : void 0;
 
   // Propagate open/close state to the document.body

package/lib/components/DatePicker/DatePicker.js

@@ -27,6 +27,7 @@ var useSavedCallback = require('../../internal/useSavedCallback.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var iconsReact = require('@carbon/icons-react');
+var utilities = require('@carbon/utilities');
 
 // Weekdays shorthand for English locale
 // Ensure localization exists before trying to access it
@@ -59,6 +60,7 @@ const monthToStr = (monthNumber, shorthand, locale) => locale.months[shorthand ?
  * @param {string} config.selectorFlatpickrYearContainer The CSS selector for the container of year selection UI.
  * @param {string} config.selectorFlatpickrCurrentMonth The CSS selector for the text-based month selection UI.
  * @param {string} config.classFlatpickrCurrentMonth The CSS class for the text-based month selection UI.
+ * @param {string} config.locale The locale code.
  * @returns {Plugin} A Flatpickr plugin to use text instead of `<select>` for month picker.
  */
 const carbonFlatpickrMonthSelectPlugin = config => fp => {
@@ -75,7 +77,13 @@ const carbonFlatpickrMonthSelectPlugin = config => fp => {
     fp.monthElements.splice(0, fp.monthElements.length, ...fp.monthElements.map(() => {
       const monthElement = fp._createElement('span', config.classFlatpickrCurrentMonth);
       monthElement.textContent = monthToStr(fp.currentMonth, config.shorthand === true, fp.l10n);
-      fp.yearElements[0].closest(config.selectorFlatpickrMonthYearContainer).insertBefore(monthElement, fp.yearElements[0].closest(config.selectorFlatpickrYearContainer));
+
+      // Depending on the locale, toggle the order of the month and year
+      if (utilities.datePartsOrder.isMonthFirst(config.locale)) {
+        fp.yearElements[0].closest(config.selectorFlatpickrMonthYearContainer).insertBefore(monthElement, fp.yearElements[0].closest(config.selectorFlatpickrYearContainer));
+      } else {
+        fp.yearElements[0].closest(config.selectorFlatpickrMonthYearContainer).insertAdjacentElement('afterend', monthElement);
+      }
       return monthElement;
     }));
   };
@@ -380,7 +388,8 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
       }) : () => {}, carbonFlatpickrMonthSelectPlugin({
         selectorFlatpickrMonthYearContainer: '.flatpickr-current-month',
         selectorFlatpickrYearContainer: '.numInputWrapper',
-        classFlatpickrCurrentMonth: 'cur-month'
+        classFlatpickrCurrentMonth: 'cur-month',
+        locale: locale
       }), fixEventsPlugin.default({
         inputFrom: startInputField.current,
         inputTo: endInputField.current,

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

@@ -14,6 +14,7 @@ export interface FeatureFlagsProps {
     enableV12Overflowmenu?: boolean;
     enableTreeviewControllable?: boolean;
     enableExperimentalFocusWrapWithoutSentinels?: boolean;
+    enableFocusWrapWithoutSentinels?: boolean;
     enableDialogElement?: boolean;
     enableV12DynamicFloatingStyles?: boolean;
     enableEnhancedFileUploader?: boolean;
@@ -29,7 +30,7 @@ declare const FeatureFlagContext: React.Context<any>;
  * along with the current `FeatureFlagContext` to provide consumers to check if
  * a feature flag is enabled or disabled in a given React tree
  */
-declare function FeatureFlags({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableDialogElement, enableV12DynamicFloatingStyles, enableEnhancedFileUploader, enablePresence, }: FeatureFlagsProps): JSX.Element;
+declare function FeatureFlags({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableFocusWrapWithoutSentinels, enableDialogElement, enableV12DynamicFloatingStyles, enableEnhancedFileUploader, enablePresence, }: FeatureFlagsProps): JSX.Element;
 declare namespace FeatureFlags {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -42,9 +43,11 @@ declare namespace FeatureFlags {
         enableV12Overflowmenu: PropTypes.Requireable<boolean>;
         enableTreeviewControllable: PropTypes.Requireable<boolean>;
         enableExperimentalFocusWrapWithoutSentinels: PropTypes.Requireable<boolean>;
+        enableFocusWrapWithoutSentinels: PropTypes.Requireable<boolean>;
         enableDialogElement: PropTypes.Requireable<boolean>;
         enableV12DynamicFloatingStyles: PropTypes.Requireable<boolean>;
         enableEnhancedFileUploader: PropTypes.Requireable<boolean>;
+        enablePresence: PropTypes.Requireable<boolean>;
     };
 }
 /**

package/lib/components/FeatureFlags/index.js

@@ -32,6 +32,7 @@ function FeatureFlags({
   enableV12Overflowmenu = false,
   enableTreeviewControllable = false,
   enableExperimentalFocusWrapWithoutSentinels = false,
+  enableFocusWrapWithoutSentinels = false,
   enableDialogElement = false,
   enableV12DynamicFloatingStyles = false,
   enableEnhancedFileUploader = false,
@@ -45,6 +46,7 @@ function FeatureFlags({
     'enable-v12-overflowmenu': enableV12Overflowmenu,
     'enable-treeview-controllable': enableTreeviewControllable,
     'enable-experimental-focus-wrap-without-sentinels': enableExperimentalFocusWrapWithoutSentinels,
+    'enable-focus-wrap-without-sentinels': enableFocusWrapWithoutSentinels,
     'enable-dialog-element': enableDialogElement,
     'enable-v12-dynamic-floating-styles': enableV12DynamicFloatingStyles,
     'enable-enhanced-file-uploader': enableEnhancedFileUploader,
@@ -86,9 +88,11 @@ FeatureFlags.propTypes = {
   enableV12Overflowmenu: PropTypes.bool,
   enableTreeviewControllable: PropTypes.bool,
   enableExperimentalFocusWrapWithoutSentinels: PropTypes.bool,
+  enableFocusWrapWithoutSentinels: PropTypes.bool,
   enableDialogElement: PropTypes.bool,
   enableV12DynamicFloatingStyles: PropTypes.bool,
-  enableEnhancedFileUploader: PropTypes.bool
+  enableEnhancedFileUploader: PropTypes.bool,
+  enablePresence: PropTypes.bool
 };
 
 /**

package/lib/components/Modal/Modal.js

@@ -131,7 +131,9 @@ const ModalDialog = /*#__PURE__*/React.forwardRef(function ModalDialog({
   // always mark as open when mounted with presence
   const open = externalOpen || enablePresence;
   const prevOpen = usePreviousValue.usePreviousValue(open);
-  const focusTrapWithoutSentinels = index.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
+  const deprecatedFlag = index.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
+  const focusTrapWithoutSentinelsFlag = index.useFeatureFlag('enable-focus-wrap-without-sentinels');
+  const focusTrapWithoutSentinels = focusTrapWithoutSentinelsFlag || deprecatedFlag;
   const enableDialogElement = index.useFeatureFlag('enable-dialog-element');
   process.env.NODE_ENV !== "production" ? warning.warning(!(focusTrapWithoutSentinels && enableDialogElement), '`<Modal>` detected both `focusTrapWithoutSentinels` and ' + '`enableDialogElement` feature flags are enabled. The native dialog ' + 'element handles focus, so `enableDialogElement` must be off for ' + '`focusTrapWithoutSentinels` to have any effect.') : void 0;
   process.env.NODE_ENV !== "production" ? warning.warning(!(!passiveModal && preventCloseOnClickOutside === false), invalidOutsideClickMessage) : void 0;

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -554,7 +554,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
   });
   const inputProp = getInputProps(getDropdownProps({
     'aria-controls': isOpen ? menuId : undefined,
-    'aria-describedby': helperText ? helperId : undefined,
+    'aria-describedby': helperText && !invalid && !warn ? helperId : undefined,
     'aria-haspopup': 'listbox',
     // Remove excess aria `aria-labelledby`. HTML <label for>
     // provides this aria information.

package/lib/components/Notification/Notification.js

@@ -506,7 +506,9 @@ function ActionableNotification({
   const startTrap = React.useRef(null);
   const endTrap = React.useRef(null);
   const ref = React.useRef(null);
-  const focusTrapWithoutSentinels = index.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
+  const deprecatedFlag = index.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
+  const focusTrapWithoutSentinelsFlag = index.useFeatureFlag('enable-focus-wrap-without-sentinels');
+  const focusTrapWithoutSentinels = focusTrapWithoutSentinelsFlag || deprecatedFlag;
   useIsomorphicEffect.default(() => {
     if (hasFocus && role === 'alertdialog') {
       const button = document.querySelector('button.cds--actionable-notification__action-button');

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

@@ -29,6 +29,10 @@ export interface PopoverBaseProps {
      * **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled.
      */
     alignmentAxisOffset?: number;
+    /**
+     * Specify the background token to use. Default is 'layer'.
+     */
+    backgroundToken?: 'layer' | 'background';
     /**
      * 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
@@ -44,6 +48,10 @@ export interface PopoverBaseProps {
      * Specify whether a caret should be rendered
      */
     caret?: boolean;
+    /**
+     * Specify whether a border should be rendered on the popover
+     */
+    border?: boolean;
     /**
      * Provide elements to be rendered inside of the component
      */

package/lib/components/Popover/index.js

@@ -41,9 +41,11 @@ const Popover = /*#__PURE__*/React.forwardRef(function PopoverRenderFunction({
   as: BaseComponent = 'span',
   autoAlign = false,
   autoAlignBoundary,
+  backgroundToken = 'layer',
   caret = isTabTip ? false : true,
   className: customClassName,
   children,
+  border = false,
   dropShadow = true,
   highContrast = false,
   onRequestClose,
@@ -213,11 +215,13 @@ forwardRef) {
     [`${prefix}--popover-container`]: true,
     [`${prefix}--popover--caret`]: caret,
     [`${prefix}--popover--drop-shadow`]: dropShadow,
+    [`${prefix}--popover--border`]: border,
     [`${prefix}--popover--high-contrast`]: highContrast,
     [`${prefix}--popover--open`]: open,
     [`${prefix}--popover--auto-align ${prefix}--autoalign`]: enableFloatingStyles,
     [`${prefix}--popover--${currentAlignment}`]: true,
-    [`${prefix}--popover--tab-tip`]: isTabTip
+    [`${prefix}--popover--tab-tip`]: isTabTip,
+    [`${prefix}--popover--background-token__background`]: backgroundToken === 'background' && !highContrast
   }, customClassName);
   const mappedChildren = React.Children.map(children, child => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
@@ -329,6 +333,10 @@ Popover.propTypes = {
    * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
+  /**
+   * Specify the background token to use. Default is 'layer'.
+   */
+  backgroundToken: PropTypes.oneOf(['layer', 'background']),
   /**
    * Specify a bounding element to be used for autoAlign calculations. The viewport is used by default. This prop is currently experimental and is subject to future changes.
    */
@@ -342,6 +350,10 @@ Popover.propTypes = {
    * Specify whether a caret should be rendered
    */
   caret: PropTypes.bool,
+  /**
+   * Specify whether a border should be rendered on the popover
+   */
+  border: PropTypes.bool,
   /**
    * Provide elements to be rendered inside of the component
    */

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

@@ -54,9 +54,11 @@ export declare namespace Toggletip {
         defaultOpen: PropTypes.Requireable<boolean>;
         align?: PopoverAlignment;
         alignmentAxisOffset?: number;
+        backgroundToken?: "layer" | "background";
         autoAlign?: boolean;
         autoAlignBoundary?: import("@floating-ui/dom").Boundary;
         caret?: boolean;
+        border?: boolean;
         children?: React.ReactNode;
         className?: string;
         dropShadow?: boolean;

package/lib/feature-flags.js

@@ -33,6 +33,7 @@ FeatureFlags__namespace.merge({
   'enable-css-grid': true,
   'enable-v11-release': true,
   'enable-experimental-tile-contrast': false,
+  'enable-tile-contrast': false,
   'enable-v12-tile-radio-icons': false,
   'enable-v12-structured-list-visible-icons': false,
   'enable-v12-dynamic-floating-styles': false

package/lib/internal/FloatingMenu.js

@@ -295,7 +295,9 @@ const FloatingMenu = ({
       });
     }
   };
-  const focusTrapWithoutSentinels = FeatureFlags__namespace.enabled('enable-experimental-focus-wrap-without-sentinels');
+  const deprecatedFlag = FeatureFlags__namespace.enabled('enable-experimental-focus-wrap-without-sentinels');
+  const focusTrapWithoutSentinelsFlag = FeatureFlags__namespace.enabled('enable-focus-wrap-without-sentinels');
+  const focusTrapWithoutSentinels = deprecatedFlag || focusTrapWithoutSentinelsFlag;
   if (typeof document !== 'undefined') {
     const portalTarget = target ? target() : document.body;
     return /*#__PURE__*/ReactDOM.createPortal(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.94.0-rc.0",
+  "version": "1.94.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -52,11 +52,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.3",
-    "@carbon/feature-flags": "^0.31.0",
-    "@carbon/icons-react": "^11.70.0-rc.0",
+    "@carbon/feature-flags": "^0.32.0",
+    "@carbon/icons-react": "^11.70.0",
     "@carbon/layout": "^11.43.0",
-    "@carbon/styles": "^1.93.0-rc.0",
-    "@carbon/utilities": "^0.11.0",
+    "@carbon/styles": "^1.93.0",
+    "@carbon/utilities": "^0.12.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -139,5 +139,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "dff507858b43de91b300a98fa1bec24d38aaeb48"
+  "gitHead": "44f7fd230585f66d32c839d1c11d2992d5929294"
 }

package/telemetry.yml

@@ -27,6 +27,7 @@ collect:
         - as
         - autoAlign
         - autoComplete
+        - border
         - buttonKind
         - caption
         - checked
@@ -347,6 +348,7 @@ collect:
         - enableDialogElement
         - enableEnhancedFileUploader
         - enableExperimentalFocusWrapWithoutSentinels
+        - enableFocusWrapWithoutSentinels
         - enablePresence
         - enableTreeviewControllable
         - enableV12DynamicFloatingStyles
@@ -469,7 +471,6 @@ collect:
         - requireTitle
         - wrapperClassName
         # PageHeaderBreadcrumbBar
-        - border
         - contentActions
         - contentActionsFlush
         - pageActionsFlush
@@ -505,6 +506,7 @@ collect:
         # Popover
         - alignmentAxisOffset
         - autoAlignBoundary
+        - backgroundToken
         - caret
         - isTabTip
         # ProgressIndicator
@@ -937,6 +939,9 @@ collect:
         - toast
         # Popover - autoAlignBoundary
         - clippingAncestors
+        # Popover - backgroundToken
+        - background
+        - layer
         # ShapeIndicator - textSize
         - "12"
         - "14"