@carbon/react 1.101.0 → 1.102.0-rc.0

package/es/components/Accordion/AccordionItem.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { ChevronRight } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useState, useContext } from 'react';
+import React, { useState, useRef, useContext, useEffect } from 'react';
 import { Text } from '../Text/Text.js';
 import '../Text/TextDirection.js';
 import { Escape } from '../../internal/keyboard/keys.js';
@@ -37,7 +37,7 @@ function AccordionItem({
   ...rest
 }) {
   const [isOpen, setIsOpen] = useState(open);
-  const [prevIsOpen, setPrevIsOpen] = useState(open);
+  const prevOpenRef = useRef(open);
   const accordionState = useContext(AccordionContext);
   const disabledIsControlled = typeof controlledDisabled === 'boolean';
   const disabled = disabledIsControlled ? controlledDisabled : accordionState.disabled;
@@ -60,10 +60,12 @@ function AccordionItem({
       node.style.maxBlockSize = '';
     }
   }, [isOpen]);
-  if (open !== prevIsOpen) {
-    setIsOpen(open);
-    setPrevIsOpen(open);
-  }
+  useEffect(() => {
+    if (open !== prevOpenRef.current) {
+      setIsOpen(open);
+      prevOpenRef.current = open;
+    }
+  }, [open]);
 
   // When the AccordionItem heading is clicked, toggle the open state of the
   // panel

package/es/components/ComboBox/ComboBox.js

@@ -145,7 +145,8 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     middleware: autoAlign ? [flip(), hide()] : undefined,
     whileElementsMounted: autoUpdate
   } : {});
-  const parentWidth = refs?.reference?.current?.clientWidth;
+  const referenceElement = refs?.reference?.current;
+  const parentWidth = referenceElement instanceof HTMLElement ? referenceElement.clientWidth : undefined;
   useEffect(() => {
     if (enableFloatingStyles) {
       const updatedFloatingStyles = {
@@ -499,10 +500,9 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     onHighlightedIndexChange: ({
       highlightedIndex
     }) => {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion , valid-typeof , no-constant-binary-expression -- https://github.com/carbon-design-system/carbon/issues/20452
+      // eslint-disable-next-line valid-typeof , no-constant-binary-expression -- https://github.com/carbon-design-system/carbon/issues/20452
       if (highlightedIndex > -1 && typeof window !== undefined) {
         const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452
         const highlightedItem = itemArray[highlightedIndex];
         if (highlightedItem) {
           highlightedItem.scrollIntoView({

package/es/components/ComposedModal/ComposedModal.js

@@ -196,7 +196,6 @@ const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModal
       target
     } = evt;
     const mouseDownTarget = onMouseDownTarget.current;
-    evt.stopPropagation();
     const shouldCloseOnOutsideClick =
     // Passive modals can close on clicks outside the modal when
     // preventCloseOnClickOutside is undefined or explicitly set to false.

package/es/components/ContainedList/ContainedList.d.ts

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

@@ -10,36 +10,25 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { LayoutConstraint } from '../Layout/index.js';
+import { isComponentElement } from '../../internal/utils.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import ContainedListItem from './ContainedListItem/ContainedListItem.js';
+import ExpandableSearch from '../ExpandableSearch/ExpandableSearch.js';
 import Search from '../Search/Search.js';
 import '../Search/Search.Skeleton.js';
 
 const variants = ['on-page', 'disclosed'];
-function filterChildren(children) {
+const isSearchComponent = node => isComponentElement(node, Search) || isComponentElement(node, ExpandableSearch);
+const filterChildren = children => {
   if (Array.isArray(children)) {
-    return children?.filter(child => !['Search', 'ExpandableSearch'].includes(child?.type?.displayName));
+    return children.filter(child => !isSearchComponent(child));
   }
-  if (children && !['Search', 'ExpandableSearch'].includes(children?.type?.displayName)) {
+  if (children && !isSearchComponent(children)) {
     return children;
   }
   return null;
-}
-function renderChildren(children) {
-  if (Array.isArray(children)) {
-    children.map((child, index) => {
-      if (index === 0 && child.type === Search) {
-        return child;
-      }
-      return child;
-    });
-  }
-  if (children && children.type === Search) {
-    return children;
-  }
-  return children;
-}
+};
 const ContainedList = ({
   action,
   children,
@@ -59,21 +48,7 @@ const ContainedList = ({
     [`${prefix}--layout--size-${size}`]: size
   }, `${prefix}--contained-list--${kind}`, className);
   const filteredChildren = filterChildren(children);
-  function isSearchAction(action) {
-    if (! /*#__PURE__*/React.isValidElement(action)) {
-      return false;
-    }
-    const actionTypes = ['Search', 'ExpandableSearch'];
-    let actionType = '';
-    if (typeof action.type === 'string') {
-      actionType = action.type;
-    } else {
-      actionType = action.type.displayName || '';
-    }
-    return actionTypes.includes(actionType);
-  }
-  const isActionSearch = isSearchAction(action);
-  const renderedChildren = renderChildren(children);
+  const isActionSearch = isSearchComponent(action);
   return /*#__PURE__*/React.createElement("div", _extends({
     className: classes
   }, rest), label && /*#__PURE__*/React.createElement("div", {
@@ -100,7 +75,7 @@ const ContainedList = ({
   React.createElement("ul", {
     role: "list",
     "aria-labelledby": label ? labelId : undefined
-  }, isActionSearch ? filteredChildren : renderedChildren));
+  }, isActionSearch ? filteredChildren : children));
 };
 ContainedList.propTypes = {
   /**

package/es/components/ContentSwitcher/ContentSwitcher.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -35,7 +35,7 @@ export interface ContentSwitcherProps extends Omit<HTMLAttributes<HTMLElement>,
     /**
      * Specify a selected index for the initially selected content
      */
-    selectedIndex: number;
+    selectedIndex?: number;
     /**
      * Choose whether or not to automatically change selection on focus when left/right arrow pressed. Defaults to 'automatic'
      */
@@ -43,7 +43,7 @@ export interface ContentSwitcherProps extends Omit<HTMLAttributes<HTMLElement>,
     /**
      * Specify the size of the Content Switcher. Currently supports either `sm`, `md` (default) or `lg` as an option.
      */
-    size: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg';
 }
 export declare const ContentSwitcher: {
     ({ children, className, light, lowContrast, selectedIndex: selectedIndexProp, selectionMode, size, onChange, ...other }: ContentSwitcherProps): import("react/jsx-runtime").JSX.Element;

package/es/components/ContentSwitcher/ContentSwitcher.js

@@ -16,7 +16,6 @@ import { ArrowRight, ArrowLeft, Enter, Space } from '../../internal/keyboard/key
 import { matches } from '../../internal/keyboard/match.js';
 import { getNextIndex } from '../../internal/keyboard/navigation.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
-import { noopFn } from '../../internal/noopFn.js';
 import '../Switch/Switch.js';
 import IconSwitch from '../Switch/IconSwitch.js';
 
@@ -28,7 +27,7 @@ const ContentSwitcher = ({
   selectedIndex: selectedIndexProp = 0,
   selectionMode = 'automatic',
   size,
-  onChange = noopFn,
+  onChange,
   ...other
 }) => {
   const prefix = useContext(PrefixContext);

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

@@ -5,9 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React, { type ChangeEvent, type MouseEvent, type ReactElement, type ReactNode } from 'react';
+import React, { type MouseEvent, type ReactElement, type ReactNode } from 'react';
 import { type SortRowFn } from './state/sorting';
 import type { DataTableSortState } from './state/sortStates';
+import { type TableToolbarSearchOnChangeEvent } from './TableToolbarSearch';
 import type { TranslateWithId } from '../../types/common';
 declare const translationIds: {
     readonly 'carbon.table.row.expand': "carbon.table.row.expand";
@@ -169,8 +170,11 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     };
     /**
      * Handles input value changes.
+     *
+     * Note: the `''` event sentinel is supported for compatibility with
+     * `TableToolbarSearch` and should be removed in the next major release.
      */
-    onInputChange: (event: ChangeEvent<HTMLInputElement>, defaultValue?: string) => void;
+    onInputChange: (event: TableToolbarSearchOnChangeEvent, defaultValue?: string) => void;
     /**
      * Sorts the table by a specific header.
      */

package/es/components/DataTable/DataTable.js

@@ -516,7 +516,9 @@ const DataTable = props => {
    * Event handler for table filter input changes.
    */
   const handleOnInputValueChange = (event, defaultValue) => {
-    const value = defaultValue || event.target?.value;
+    // TODO: Remove `''` sentinel support once `TableToolbarSearch` no
+    // longer emits it on mount.
+    const value = defaultValue ?? (event === '' ? event : event.target.value);
     setState(prev => ({
       ...prev,
       filterInputValue: value

package/es/components/DataTable/Table.js

@@ -91,7 +91,7 @@ const Table = ({
         const isBodyMultiline = Array.from(tableRef.current.querySelectorAll('td')).some(td => isElementWrappingContent(td, context));
         const isHeaderMultiline = Array.from(tableRef.current.querySelectorAll('th')).some(th => {
           const label = th.querySelector(`.${prefix}--table-header-label`);
-          return label && isElementWrappingContent(label, context);
+          return label instanceof HTMLElement && isElementWrappingContent(label, context);
         });
         toggleTableBodyAlignmentClass(isBodyMultiline);
         toggleTableHeaderAlignmentClass(isHeaderMultiline);

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -15,6 +15,12 @@ declare const translationIds: {
 type TranslationKey = keyof typeof translationIds;
 type ExcludedInheritedProps = 'defaultValue' | 'labelText' | 'onBlur' | 'onChange' | 'onExpand' | 'onFocus' | 'tabIndex';
 export type TableToolbarSearchHandleExpand = (event: FocusEvent<HTMLInputElement>, newValue?: boolean) => void;
+/**
+ * @deprecated Passing `''` as the event sentinel is legacy compatibility
+ * behavior for `DataTable` filtering. In the next major release, this type
+ * should become an optional `ChangeEvent<HTMLInputElement>` instead.
+ */
+export type TableToolbarSearchOnChangeEvent = '' | ChangeEvent<HTMLInputElement>;
 export interface TableToolbarSearchProps extends Omit<SearchProps, ExcludedInheritedProps>, TranslateWithId<TranslationKey> {
     /**
      * Specifies if the search should initially render in an expanded state
@@ -40,8 +46,11 @@ export interface TableToolbarSearchProps extends Omit<SearchProps, ExcludedInher
     onBlur?(event: FocusEvent<HTMLInputElement>, handleExpand: TableToolbarSearchHandleExpand): void;
     /**
      * Provide an optional hook that is called each time the input is updated
+     *
+     * Note: the `''` event sentinel is legacy compatibility behavior and will be
+     * removed in the next major release.
      */
-    onChange?: (event: '' | ChangeEvent<HTMLInputElement>, value?: string) => void;
+    onChange?: (event: TableToolbarSearchOnChangeEvent, value?: string) => void;
     /**
      * Provide an optional hook that is called each time the input is expanded
      */

package/es/components/DataTable/TableToolbarSearch.js

@@ -26,6 +26,13 @@ const defaultTranslations = {
 const defaultTranslateWithId = messageId => {
   return defaultTranslations[messageId];
 };
+
+/**
+ * @deprecated Passing `''` as the event sentinel is legacy compatibility
+ * behavior for `DataTable` filtering. In the next major release, this type
+ * should become an optional `ChangeEvent<HTMLInputElement>` instead.
+ */
+
 const TableToolbarSearch = ({
   className,
   searchContainerClass,
@@ -64,14 +71,14 @@ const TableToolbarSearch = ({
   }, [focusTarget]);
   useEffect(() => {
     if (defaultValue) {
+      // TODO: Remove the `''` event sentinel and pass `undefined` for
+      // value initialization in the next major release.
       onChangeProp?.('', defaultValue);
     }
   },
   //eslint-disable-next-line react-hooks/exhaustive-deps
   []);
-  const searchClasses = cx(className, {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    [searchContainerClass]: searchContainerClass,
+  const searchClasses = cx(className, searchContainerClass, {
     [`${prefix}--toolbar-search-container-active`]: expanded,
     [`${prefix}--toolbar-search-container-disabled`]: disabled,
     [`${prefix}--toolbar-search-container-expandable`]: !persistent,

package/es/components/DataTable/stories/examples/TableToolbarFilter.d.ts

@@ -12,6 +12,9 @@ interface TableToolbarFilterProps {
     className?: string;
     /**
      * Provide an optional hook that is called each time the input is updated
+     *
+     * Note: the `''` event sentinel exists for `DataTable` compatibility and
+     * should be removed in the next major release.
      */
     onChange?: (event: '' | ChangeEvent<HTMLInputElement>) => void;
     /**

package/es/components/DataTableSkeleton/DataTableSkeleton.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -22,11 +22,6 @@ export interface DataTableSkeletonProps extends TableHTMLAttributes<HTMLTableEle
      * Specify the number of columns that you want to render in the skeleton state
      */
     columnCount?: number;
-    /**
-     * Optionally specify whether you want the Skeleton to be rendered as a
-     * compact DataTable
-     */
-    compact?: boolean;
     /**
      * Optionally specify the displayed headers
      */
@@ -57,7 +52,7 @@ export interface DataTableSkeletonProps extends TableHTMLAttributes<HTMLTableEle
     className?: string;
 }
 declare const DataTableSkeleton: {
-    ({ headers, rowCount, columnCount, zebra, compact, className, showHeader, showToolbar, size, ...rest }: DataTableSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    ({ headers, rowCount, columnCount, zebra, className, showHeader, showToolbar, size, ...rest }: DataTableSkeletonProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Specify an optional className to add.
@@ -67,11 +62,6 @@ declare const DataTableSkeleton: {
          * Specify the number of columns that you want to render in the skeleton state
          */
         columnCount: PropTypes.Requireable<number>;
-        /**
-         * Optionally specify whether you want the Skeleton to be rendered as a
-         * compact DataTable
-         */
-        compact: PropTypes.Requireable<boolean>;
         /**
          * Optionally specify the displayed headers
          */

package/es/components/DataTableSkeleton/DataTableSkeleton.js

@@ -17,7 +17,6 @@ const DataTableSkeleton = ({
   rowCount = 5,
   columnCount = 5,
   zebra = false,
-  compact = false,
   className,
   showHeader = true,
   showToolbar = true,
@@ -29,8 +28,7 @@ const DataTableSkeleton = ({
     [`${prefix}--skeleton`]: true,
     [`${prefix}--data-table`]: true,
     [`${prefix}--data-table--${size}`]: size,
-    [`${prefix}--data-table--zebra`]: zebra,
-    [`${prefix}--data-table--compact`]: compact
+    [`${prefix}--data-table--zebra`]: zebra
   });
   const rowRepeat = rowCount;
   const rows = Array(rowRepeat);
@@ -76,11 +74,6 @@ DataTableSkeleton.propTypes = {
    * Specify the number of columns that you want to render in the skeleton state
    */
   columnCount: PropTypes.number,
-  /**
-   * Optionally specify whether you want the Skeleton to be rendered as a
-   * compact DataTable
-   */
-  compact: PropTypes.bool,
   /**
    * Optionally specify the displayed headers
    */

package/es/components/DatePicker/DatePicker.js

@@ -429,7 +429,10 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
           calendarContainer.classList.add('open');
           const selectedDateElem = calendarContainer.querySelector('.selected') && fpSelectedDateElem;
           const todayDateElem = calendarContainer.querySelector('.today') && fpTodayDateElem;
-          (selectedDateElem || todayDateElem || calendarContainer.querySelector('.flatpickr-day[tabindex]') || calendarContainer).focus();
+          const focusTarget = selectedDateElem || todayDateElem || calendarContainer.querySelector('.flatpickr-day[tabindex]') || calendarContainer;
+          if (focusTarget instanceof HTMLElement) {
+            focusTarget.focus();
+          }
           if (event.target === startInputField.current) {
             lastFocusedField.current = startInputField.current;
           } else if (event.target === endInputField.current) {

package/es/components/DatePickerInput/DatePickerInput.d.ts

@@ -61,12 +61,9 @@ export interface DatePickerInputProps extends Omit<HTMLAttributes<HTMLInputEleme
      */
     onClick?: func;
     /**
-     * Provide a regular expression that the input value must match
-     * TODO:need to be rewritten
+     * Provide a regular expression pattern string that the input value must match
      */
-    pattern?: (props: {
-        [key: string]: any;
-    }, propName: string, componentName: string) => null | any | Error;
+    pattern?: string;
     /**
      * Specify the placeholder text
      */

package/es/components/DatePickerInput/DatePickerInput.js

@@ -204,20 +204,9 @@ DatePickerInput.propTypes = {
    */
   onClick: PropTypes.func,
   /**
-   * Provide a regular expression that the input value must match
+   * Provide a regular expression pattern string that the input value must match
    */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
-  pattern: (props, propName, componentName) => {
-    if (props[propName] === undefined) {
-      return;
-    }
-    try {
-      new RegExp(props[propName]);
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
-    } catch (e) {
-      return new Error(`Invalid value of prop '${propName}' supplied to '${componentName}', it should be a valid regular expression`);
-    }
-  },
+  pattern: PropTypes.string,
   /**
    * Specify the placeholder text
    */

package/es/components/Dropdown/Dropdown.js

@@ -57,6 +57,7 @@ function stateReducer(state, actionAndChanges) {
   } = actionAndChanges;
   switch (type) {
     case ItemMouseMove:
+      return state;
     case MenuMouseLeave:
       if (changes.highlightedIndex === state.highlightedIndex) {
         // Prevent state update if highlightedIndex hasn't changed

package/es/components/ExpandableSearch/ExpandableSearch.js

@@ -15,6 +15,7 @@ import { composeEventHandlers } from '../../tools/events.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { mergeRefs } from '../../tools/mergeRefs.js';
+import { isSearchValuePresent } from '../Search/utils.js';
 
 const frFn = forwardRef;
 const ExpandableSearch = frFn((props, forwardedRef) => {
@@ -28,7 +29,7 @@ const ExpandableSearch = frFn((props, forwardedRef) => {
     ...rest
   } = props;
   const [expanded, setExpanded] = useState(isExpanded || false);
-  const [hasContent, setHasContent] = useState(Boolean(defaultValue));
+  const [hasContent, setHasContent] = useState(isSearchValuePresent(defaultValue));
   const searchRef = useRef(null);
   const prefix = usePrefix();
   function handleBlur(evt) {

package/es/components/ExpandableSearch/index.js

@@ -0,0 +1,12 @@
+/**
+ * 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 ExpandableSearch from './ExpandableSearch.js';
+
+
+
+export { ExpandableSearch, ExpandableSearch as default };

package/es/components/FluidSelect/FluidSelect.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import React, { type SelectHTMLAttributes } from 'react';
 export interface FluidSelectProps {
     /**
      * Provide the contents of your Select
@@ -17,7 +17,7 @@ export interface FluidSelectProps {
     /**
      * Optionally provide the default value of the `<select>`
      */
-    defaultValue?: any;
+    defaultValue?: SelectHTMLAttributes<HTMLSelectElement>['defaultValue'];
     /**
      * Specify whether the control is disabled
      */

package/es/components/FluidTextArea/FluidTextArea.d.ts

@@ -8,8 +8,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 export interface FluidTextAreaProps {
     /**
-     * Provide a custom className that is applied directly to the underlying
-     * `<textarea>` node
+     * Provide a custom className that is applied to the wrapper node
      */
     className?: string;
     /**
@@ -101,8 +100,7 @@ declare const FluidTextArea: {
     ({ className, ...other }: FluidTextAreaProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
-         * Provide a custom className that is applied directly to the underlying
-         * `<textarea>` node
+         * Provide a custom className that is applied to the wrapper node
          */
         className: PropTypes.Requireable<string>;
         /**

package/es/components/FluidTextArea/FluidTextArea.js

@@ -31,8 +31,7 @@ const FluidTextArea = ({
 };
 FluidTextArea.propTypes = {
   /**
-   * Provide a custom className that is applied directly to the underlying
-   * `<textarea>` node
+   * Provide a custom className that is applied to the wrapper node
    */
   className: PropTypes.string,
   /**

package/es/components/FluidTimePickerSelect/FluidTimePickerSelect.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import React, { type SelectHTMLAttributes } from 'react';
 export interface FluidTimePickerSelectProps {
     /**
      * Provide the contents of your Select
@@ -17,7 +17,7 @@ export interface FluidTimePickerSelectProps {
     /**
      * Optionally provide the default value of the `<select>`
      */
-    defaultValue?: any;
+    defaultValue?: SelectHTMLAttributes<HTMLSelectElement>['defaultValue'];
     /**
      * Specify whether the control is disabled
      */

package/es/components/Grid/Column.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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/Grid/Column.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import * as FeatureFlags from '@carbon/feature-flags';
+import { enabled } from '@carbon/feature-flags';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -52,7 +52,7 @@ const Column = /*#__PURE__*/React.forwardRef(({
   }, rest), children);
 });
 const percentSpanType = PropTypes.oneOf(['25%', '50%', '75%', '100%']);
-const spanPropType = FeatureFlags.enabled('enable-css-grid') ? PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.shape({
+const spanPropType = enabled('enable-css-grid') ? PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.shape({
   span: PropTypes.oneOfType([PropTypes.number, percentSpanType]),
   offset: PropTypes.number,
   start: PropTypes.number,

package/es/components/Loading/Loading.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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/Loading/Loading.js

@@ -36,7 +36,9 @@ function Loading({
     className: loadingClassName
   }), /*#__PURE__*/React.createElement("svg", {
     className: `${prefix}--loading__svg`,
-    viewBox: "0 0 100 100"
+    viewBox: "0 0 100 100",
+    role: "img",
+    "aria-label": description
   }, /*#__PURE__*/React.createElement("title", null, description), small ? /*#__PURE__*/React.createElement("circle", {
     className: `${prefix}--loading__background`,
     cx: "50%",

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023, 2025
+ * Copyright IBM Corp. 2023, 2026
  *
  * 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/Menu/Menu.js

@@ -84,10 +84,14 @@ const Menu = /*#__PURE__*/forwardRef(function Menu({
   }
   function handleOpen() {
     if (menu.current) {
-      focusReturn.current = document.activeElement;
+      const {
+        activeElement,
+        dir
+      } = document;
+      focusReturn.current = activeElement instanceof HTMLElement ? activeElement : null;
       if (legacyAutoalign) {
         const pos = calculatePosition();
-        if ((document?.dir === 'rtl' || direction === 'rtl') && !rest?.id?.includes('MenuButton')) {
+        if ((dir === 'rtl' || direction === 'rtl') && !rest?.id?.includes('MenuButton')) {
           menu.current.style.insetInlineStart = `initial`;
           menu.current.style.insetInlineEnd = `${pos[0]}px`;
         } else {