@carbon/react 1.93.0 → 1.94.0

package/es/components/CodeSnippet/CodeSnippet.d.ts

@@ -111,7 +111,7 @@ declare namespace CodeSnippet {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
+        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
         /**
          * Specify a label to be read by screen readers on the containing textbox
          * node

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/Copy/Copy.d.ts

@@ -50,7 +50,7 @@ declare namespace Copy {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
+        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
         /**
          * **Experimental**: Will attempt to automatically align the tooltip. Requires
          * React v17+

package/es/components/CopyButton/CopyButton.d.ts

@@ -51,7 +51,7 @@ declare namespace CopyButton {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
+        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
         /**
          * **Experimental**: Will attempt to automatically align the tooltip. Requires
          * React v17+

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

@@ -236,7 +236,7 @@ export interface DataTableProps<RowType, ColTypes extends any[]> extends Transla
 export declare const DataTable: {
     <RowType, ColTypes extends any[]>(props: DataTableProps<RowType, ColTypes>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
     Table: {
-        ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, tabIndex, ...other }: React.PropsWithChildren<import("./Table").TableProps>): import("react/jsx-runtime").JSX.Element;
+        ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, ...other }: React.PropsWithChildren<import("./Table").TableProps>): import("react/jsx-runtime").JSX.Element;
         propTypes: {
             children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
             className: PropTypes.Requireable<string>;

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

@@ -39,7 +39,7 @@ export interface TableProps {
     tabIndex?: number;
 }
 export declare const Table: {
-    ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, tabIndex, ...other }: PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
+    ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, ...other }: PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Pass in the children that will be rendered within the Table

package/es/components/DataTable/Table.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useContext, useState, useRef, useCallback } from 'react';
+import React, { useContext, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -53,7 +53,6 @@ const Table = ({
   stickyHeader,
   overflowMenuOnHover = true,
   experimentalAutoAlign = false,
-  tabIndex,
   ...other
 }) => {
   const {
@@ -61,7 +60,6 @@ const Table = ({
     descriptionId
   } = useContext(TableContext);
   const prefix = usePrefix();
-  const [isScrollable, setIsScrollable] = useState(false);
   const tableRef = useRef(null);
   const componentClass = cx(`${prefix}--data-table`, className, {
     [`${prefix}--data-table--${size}`]: size,
@@ -100,22 +98,6 @@ const Table = ({
   const debouncedSetTableAlignment = debounce(setTableAlignment, 100);
   useWindowEvent('resize', debouncedSetTableAlignment);
 
-  // Used to set a tabIndex when the Table is horizontally scrollable
-  const setTabIndex = useCallback(() => {
-    const tableContainer = tableRef?.current?.parentNode;
-    const tableHeader = tableRef?.current?.firstChild;
-    if (tableHeader?.scrollWidth > tableContainer?.clientWidth) {
-      setIsScrollable(true);
-    } else {
-      setIsScrollable(false);
-    }
-  }, []);
-  const debouncedSetTabIndex = debounce(setTabIndex, 100);
-  useWindowEvent('resize', debouncedSetTabIndex);
-  useIsomorphicEffect(() => {
-    setTabIndex();
-  }, [setTabIndex]);
-
   // recalculate table alignment once fonts have loaded
   if (typeof document !== 'undefined' && document?.fonts?.status && document.fonts.status !== 'loaded') {
     document.fonts.ready.then(() => {
@@ -126,8 +108,7 @@ const Table = ({
     setTableAlignment();
   }, [setTableAlignment, size]);
   const table = /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--data-table-content`,
-    tabIndex: tabIndex ?? (isScrollable ? 0 : undefined)
+    className: `${prefix}--data-table-content`
   }, /*#__PURE__*/React.createElement("table", _extends({
     "aria-labelledby": titleId,
     "aria-describedby": descriptionId

package/es/components/DataTable/TableToolbar.js

@@ -25,6 +25,7 @@ const TableToolbar = ({
     [`${prefix}--table-toolbar--${size}`]: size
   });
   return /*#__PURE__*/React.createElement("section", _extends({
+    role: "group",
     "aria-label": deprecatedAriaLabel || ariaLabel
   }, rest, {
     className: className

package/es/components/DataTable/state/sorting.d.ts

@@ -43,7 +43,8 @@ export declare const getNextSortDirection: (prevHeader: string, currentHeader: s
  * @param state - Current table state.
  * @param key - Header key to sort by.
  */
-export declare const getNextSortState: <ColTypes extends any[]>(props: Props, state: State<ColTypes>, { key }: {
+export declare const getNextSortState: <ColTypes extends any[]>(// eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
+props: Props, state: State<ColTypes>, { key }: {
     key: string;
 }) => Pick<State<ColTypes>, "sortHeaderKey" | "sortDirection" | "rowIds">;
 /**
@@ -54,5 +55,6 @@ export declare const getNextSortState: <ColTypes extends any[]>(props: Props, st
  * @param key - Header key to sort by.
  * @param sortDirection - Sort direction to apply.
  */
-export declare const getSortedState: <ColTypes extends any[]>({ locale, sortRow }: Props, { rowIds, cellsById, initialRowOrder }: State<ColTypes>, key: string, sortDirection: DataTableSortState) => Pick<State<ColTypes>, "rowIds" | "sortDirection" | "sortHeaderKey">;
+export declare const getSortedState: <ColTypes extends any[]>(// eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
+{ locale, sortRow }: Props, { rowIds, cellsById, initialRowOrder }: State<ColTypes>, key: string, sortDirection: DataTableSortState) => Pick<State<ColTypes>, "rowIds" | "sortDirection" | "sortHeaderKey">;
 export {};

package/es/components/DatePicker/DatePicker.d.ts

@@ -117,6 +117,14 @@ export interface DatePickerProps {
      * Provide the text that is displayed when the control is in warning state (Fluid only)
      */
     warnText?: ReactNode;
+    /**
+     * Accessible aria-label for the "next month" arrow icon.
+     */
+    nextMonthAriaLabel?: string;
+    /**
+     * Accessible aria-label for the "previous month" arrow icon.
+     */
+    prevMonthAriaLabel?: string;
 }
 declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
 export default DatePicker;

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;
     }));
   };
@@ -105,12 +113,6 @@ const carbonFlatpickrMonthSelectPlugin = config => fp => {
 function isLabelTextEmpty(children) {
   return children.every(child => !child.props.labelText);
 }
-const rightArrowHTML = `<svg width="16px" height="16px" viewBox="0 0 16 16">
-  <polygon points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 "/>
-</svg>`;
-const leftArrowHTML = `<svg width="16px" height="16px" viewBox="0 0 16 16">
-  <polygon points="5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 "/>
-</svg>`;
 function updateClassNames(calendar, prefix) {
   const calendarContainer = calendar.calendarContainer;
   const daysContainer = calendar.days;
@@ -162,6 +164,8 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
   short = false,
   value,
   parseDate: parseDateProp,
+  nextMonthAriaLabel = 'Next month',
+  prevMonthAriaLabel = 'Previous month',
   ...rest
 }, ref) {
   const prefix = usePrefix();
@@ -342,6 +346,16 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
     } else if (parseDateProp) {
       parseDate = parseDateProp;
     }
+
+    // Accessible arrow icons (localized manually)
+    // Flatpickr does not currently support localization of next/previous month
+    // labels, so we inject translated aria-labels based on the provided locale.
+    const rightArrowHTML = `<svg aria-label="${nextMonthAriaLabel}" role="img" width="16px" height="16px" viewBox="0 0 16 16">
+      <polygon points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 "/>
+    </svg>`;
+    const leftArrowHTML = `<svg aria-label="${prevMonthAriaLabel}" role="img" width="16px" height="16px" viewBox="0 0 16 16">
+      <polygon points="5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 "/>
+    </svg>`;
     const {
       current: start
     } = startInputField;
@@ -370,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,
@@ -519,7 +534,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [savedOnChange, savedOnOpen, readOnly, closeOnSelect, hasInput, datePickerType]);
+  }, [savedOnChange, savedOnOpen, readOnly, closeOnSelect, hasInput, datePickerType, nextMonthAriaLabel, prevMonthAriaLabel]);
 
   // this hook allows consumers to access the flatpickr calendar
   // instance for cases where functions like open() or close()
@@ -874,7 +889,15 @@ DatePicker.propTypes = {
   /**
    * Provide the text that is displayed when the control is in warning state (Fluid only)
    */
-  warnText: PropTypes.node
+  warnText: PropTypes.node,
+  /**
+   * Accessible aria-label for the "next month" arrow icon.
+   */
+  nextMonthAriaLabel: PropTypes.string,
+  /**
+   * Accessible aria-label for the "previous month" arrow icon.
+   */
+  prevMonthAriaLabel: PropTypes.string
 };
 
 export { DatePicker as default };

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/FluidComboBox/FluidComboBox.d.ts

@@ -72,11 +72,6 @@ export interface FluidComboBoxProps<ItemType> extends ComboBoxProps<ItemType>, P
      * consuming component what kind of internal state changes are occurring.
      */
     onChange: (data: OnChangeData<ItemType>) => void;
-    /**
-     * An optional callback to render the currently selected item as a react element instead of only
-     * as a string.
-     */
-    renderSelectedItem?: (selectedItem: ItemType) => React.ReactNode;
     /**
      * In the case you want to control the dropdown selection entirely.
      * */

package/es/components/FluidComboBox/FluidComboBox.js

@@ -91,11 +91,6 @@ FluidComboBox.propTypes = {
    * consuming component what kind of internal state changes are occurring.
    */
   onChange: PropTypes.func.isRequired,
-  /**
-   * An optional callback to render the currently selected item as a react element instead of only
-   * as a string.
-   */
-  renderSelectedItem: PropTypes.func,
   /**
    * In the case you want to control the dropdown selection entirely.
    */

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/Slider/Slider.js

@@ -755,7 +755,7 @@ const Slider = props => {
    *          as the step.
    */
   const calcValueForDelta = (currentValue, delta, step = 1) => {
-    const base = delta > 0 ? Math.floor(currentValue / step) * step : currentValue;
+    const base = delta > 0 ? Math.round(currentValue / step) * step : currentValue;
     const newValue = base + delta;
     // TODO: Why is the logical OR needed here?
     const decimals = (step.toString().split('.')[1] || '').length;

package/es/components/Tabs/Tabs.js

@@ -10,7 +10,7 @@ import { Close, ChevronLeft, ChevronRight } from '@carbon/icons-react';
 import { breakpoints } from '@carbon/layout';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { forwardRef, createContext, useRef, useState, useMemo, isValidElement, useEffect, useCallback } from 'react';
+import React, { forwardRef, createContext, useRef, useState, useMemo, isValidElement, useCallback, useEffect } from 'react';
 import '../Grid/FlexGrid.js';
 import { Grid as GridAsGridComponent } from '../Grid/Grid.js';
 import '../Grid/Row.js';
@@ -24,7 +24,6 @@ import { useControllableState } from '../../internal/useControllableState.js';
 import { useId } from '../../internal/useId.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
-import { getInteractiveContent } from '../../internal/useNoInteractiveChildren.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { Delete, ArrowRight, ArrowLeft, Home, End, ArrowDown, ArrowUp } from '../../internal/keyboard/keys.js';
 import { match, matches } from '../../internal/keyboard/match.js';
@@ -1110,10 +1109,6 @@ const TabPanel = /*#__PURE__*/React.forwardRef(({
   ...rest
 }, forwardRef) => {
   const prefix = usePrefix();
-  const panel = useRef(null);
-  const ref = useMergedRefs([forwardRef, panel]);
-  const [tabIndex, setTabIndex] = useState(0);
-  const [interactiveContent, setInteractiveContent] = useState(false);
   const {
     selectedIndex,
     baseId
@@ -1121,50 +1116,13 @@ const TabPanel = /*#__PURE__*/React.forwardRef(({
   const index = React.useContext(TabPanelContext);
   const id = `${baseId}-tabpanel-${index}`;
   const tabId = `${baseId}-tab-${index}`;
-  const className = cx(`${prefix}--tab-content`, customClassName, {
-    [`${prefix}--tab-content--interactive`]: interactiveContent
-  });
-  useEffect(() => {
-    if (!panel.current) {
-      return;
-    }
-    const content = getInteractiveContent(panel.current);
-    if (content) {
-      setInteractiveContent(true);
-      setTabIndex(-1);
-    }
-  }, []);
-
-  // tabindex should only be 0 if no interactive content in children
-  useEffect(() => {
-    const node = panel.current;
-    if (!node) {
-      return;
-    }
-    function callback() {
-      const content = getInteractiveContent(node);
-      if (content) {
-        setInteractiveContent(true);
-        setTabIndex(-1);
-      } else {
-        setInteractiveContent(false);
-        setTabIndex(0);
-      }
-    }
-    const observer = new MutationObserver(callback);
-    observer.observe(node, {
-      childList: true,
-      subtree: true
-    });
-    return () => observer.disconnect();
-  }, []);
+  const className = cx(`${prefix}--tab-content`, customClassName);
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     "aria-labelledby": tabId,
     id: id,
     className: className,
-    ref: ref,
+    ref: forwardRef,
     role: "tabpanel",
-    tabIndex: tabIndex,
     hidden: selectedIndex !== index
   }), children);
 });

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/components/TreeView/TreeNode.js

@@ -142,6 +142,7 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
   const currentNode = useRef(null);
   const currentNodeLabel = useRef(null);
   const prefix = usePrefix();
+  const nodeLabelId = `${id}__label`;
   const renderLabelText = () => {
     if (isEllipsisApplied && tooltipText) {
       return /*#__PURE__*/React.createElement(IconButton, {
@@ -152,11 +153,13 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
         className: `${prefix}--tree-node__label__text-button`,
         wrapperClasses: `${prefix}--popover-container`
       }, /*#__PURE__*/React.createElement("span", {
+        id: nodeLabelId,
         ref: labelTextRef,
         className: `${prefix}--tree-node__label__text`
       }, label));
     }
     return /*#__PURE__*/React.createElement("span", {
+      id: nodeLabelId,
       ref: labelTextRef,
       className: `${prefix}--tree-node__label__text`
     }, label);
@@ -395,6 +398,7 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
     }), nodeContent), children && /*#__PURE__*/React.createElement("ul", {
       id: `${id}-subtree`,
       role: "group",
+      "aria-labelledby": nodeLabelId,
       className: cx(`${prefix}--tree-node__children`, {
         [`${prefix}--tree-node--hidden`]: !expanded
       })
@@ -408,6 +412,7 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
   }), nodeContent, children && /*#__PURE__*/React.createElement("ul", {
     id: `${id}-subtree`,
     role: "group",
+    "aria-labelledby": nodeLabelId,
     className: cx(`${prefix}--tree-node__children`, {
       [`${prefix}--tree-node--hidden`]: !expanded
     })

package/es/components/UIShell/Content.d.ts

@@ -69,7 +69,7 @@ declare const Content: {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        popover?: "" | "auto" | "manual" | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
         popoverTarget?: string | undefined;
         inert?: boolean | undefined;

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/es/tools/events.d.ts

@@ -14,4 +14,4 @@ import type { SyntheticEvent } from 'react';
  * @param handlers - An array of event handler functions.
  * @returns A composite event handler.
  */
-export declare const composeEventHandlers: <E extends SyntheticEvent = SyntheticEvent<Element, Event>>(handlers: (((event: E, ...args: any[]) => void) | undefined)[]) => (event: E, ...args: any[]) => void;
+export declare const composeEventHandlers: <E extends SyntheticEvent = SyntheticEvent>(handlers: (((event: E, ...args: any[]) => void) | undefined)[]) => (event: E, ...args: any[]) => void;