@carbon/react 1.82.1 → 1.83.0

package/es/components/UIShell/SideNavMenuItem.js

@@ -8,12 +8,12 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import SideNavLinkText from './SideNavLinkText.js';
 import Link from './Link.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const SideNavMenuItem = /*#__PURE__*/React__default.forwardRef(function SideNavMenuItem(props, ref) {
+const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(props, ref) {
   const prefix = usePrefix();
   const {
     children,
@@ -27,12 +27,12 @@ const SideNavMenuItem = /*#__PURE__*/React__default.forwardRef(function SideNavM
     [`${prefix}--side-nav__link`]: true,
     [`${prefix}--side-nav__link--current`]: isActive
   });
-  return /*#__PURE__*/React__default.createElement("li", {
+  return /*#__PURE__*/React.createElement("li", {
     className: className
-  }, /*#__PURE__*/React__default.createElement(Component, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     className: linkClassName,
     ref: ref
-  }), /*#__PURE__*/React__default.createElement(SideNavLinkText, null, children)));
+  }), /*#__PURE__*/React.createElement(SideNavLinkText, null, children)));
 });
 SideNavMenuItem.displayName = 'SideNavMenuItem';
 SideNavMenuItem.propTypes = {

package/es/components/UIShell/SideNavSwitcher.js

@@ -8,7 +8,7 @@
 import { ChevronDown } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
@@ -25,30 +25,30 @@ const SideNavSwitcher = /*#__PURE__*/forwardRef(function SideNavSwitcher(props,
   const className = cx(`${prefix}--side-nav__switcher`, customClassName);
 
   // Note for usage around `onBlur`: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-onchange.md
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: className
-  }, /*#__PURE__*/React__default.createElement("label", {
+  }, /*#__PURE__*/React.createElement("label", {
     htmlFor: id,
     className: `${prefix}--assistive-text`
-  }, labelText), /*#__PURE__*/React__default.createElement("select", {
+  }, labelText), /*#__PURE__*/React.createElement("select", {
     id: id,
     className: `${prefix}--side-nav__select`,
     defaultValue: "",
     onBlur: onChange,
     onChange: onChange,
     ref: ref
-  }, /*#__PURE__*/React__default.createElement("option", {
+  }, /*#__PURE__*/React.createElement("option", {
     className: `${prefix}--side-nav__option`,
     disabled: true,
     hidden: true,
     value: ""
-  }, labelText), options.map(option => /*#__PURE__*/React__default.createElement("option", {
+  }, labelText), options.map(option => /*#__PURE__*/React.createElement("option", {
     key: option,
     className: `${prefix}--side-nav__option`,
     value: option
-  }, option))), /*#__PURE__*/React__default.createElement("div", {
+  }, option))), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--side-nav__switcher-chevron`
-  }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default.createElement(ChevronDown, {
+  }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React.createElement(ChevronDown, {
     size: 20
   }))));
 });

package/es/components/UIShell/SkipToContent.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
-import React__default from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { usePrefix } from '../../internal/usePrefix.js';
 
@@ -21,7 +21,7 @@ function SkipToContent(_ref) {
   } = _ref;
   const prefix = usePrefix();
   const className = cx(`${prefix}--skip-to-content`, customClassName);
-  return /*#__PURE__*/React__default.createElement("a", _extends({}, rest, {
+  return /*#__PURE__*/React.createElement("a", _extends({}, rest, {
     className: className,
     href: href,
     tabIndex: tabIndex

package/es/components/UIShell/Switcher.js

@@ -6,13 +6,13 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { forwardRef, useRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
-import getDisplayName from '../../prop-types/tools/getDisplayName.js';
+import SwitcherItem from './SwitcherItem.js';
 
 const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
   const switcherRef = useRef(null);
@@ -37,8 +37,8 @@ const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
       currentIndex,
       direction
     } = _ref;
-    const enabledIndices = React__default.Children.toArray(children).reduce((acc, curr, i) => {
-      if (/*#__PURE__*/React__default.isValidElement(curr) && Object.keys(curr.props).length !== 0 && getDisplayName(curr.type) === 'SwitcherItem') {
+    const enabledIndices = React.Children.toArray(children).reduce((acc, curr, i) => {
+      if (/*#__PURE__*/React.isValidElement(curr) && Object.keys(curr.props).length !== 0 && curr.type === SwitcherItem) {
         acc.push(i);
       }
       return acc;
@@ -64,23 +64,23 @@ const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
       switcherItem.focus();
     }
   };
-  const childrenWithProps = React__default.Children.toArray(children).map((child, index) => {
+  const childrenWithProps = React.Children.toArray(children).map((child, index) => {
     // only setup click handlers if onChange event is passed
-    if (/*#__PURE__*/React__default.isValidElement(child) && child.type && getDisplayName(child.type) === 'SwitcherItem') {
-      return /*#__PURE__*/React__default.cloneElement(child, {
+    if (/*#__PURE__*/React.isValidElement(child) && child.type === SwitcherItem) {
+      return /*#__PURE__*/React.cloneElement(child, {
         handleSwitcherItemFocus,
         index,
         key: index,
         expanded
       });
     }
-    return /*#__PURE__*/React__default.cloneElement(child, {
+    return /*#__PURE__*/React.cloneElement(child, {
       index,
       key: index,
       expanded
     });
   });
-  return /*#__PURE__*/React__default.createElement("ul", _extends({
+  return /*#__PURE__*/React.createElement("ul", _extends({
     ref: ref,
     className: className
   }, accessibilityLabel), childrenWithProps);

package/es/components/UIShell/SwitcherDivider.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -20,7 +20,7 @@ const SwitcherDivider = _ref => {
   const classNames = cx(`${prefix}--switcher__item--divider`, {
     [customClassName || '']: !!customClassName
   });
-  return /*#__PURE__*/React__default.createElement("hr", _extends({}, other, {
+  return /*#__PURE__*/React.createElement("hr", _extends({}, other, {
     className: classNames
   }));
 };

package/es/components/UIShell/SwitcherItem.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import Link from './Link.js';
@@ -59,9 +59,9 @@ const SwitcherItem = /*#__PURE__*/forwardRef(function SwitcherItem(props, forwar
       });
     }
   }
-  return /*#__PURE__*/React__default.createElement("li", {
+  return /*#__PURE__*/React.createElement("li", {
     className: classNames
-  }, /*#__PURE__*/React__default.createElement(Link, _extends({
+  }, /*#__PURE__*/React.createElement(Link, _extends({
     onKeyDown: evt => {
       setTabFocus(evt);
       onKeyDown(evt);

package/es/components/UnorderedList/UnorderedList.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
@@ -23,7 +23,7 @@ function UnorderedList(_ref) {
     [`${prefix}--list--nested`]: nested,
     [`${prefix}--list--expressive`]: isExpressive
   });
-  return /*#__PURE__*/React__default.createElement("ul", _extends({
+  return /*#__PURE__*/React.createElement("ul", _extends({
     className: classNames
   }, other));
 }

package/es/feature-flags.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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 {};

package/es/index.js

@@ -33,7 +33,29 @@ export { default as useContextMenu } from './components/ContextMenu/useContextMe
 export { default as Copy } from './components/Copy/Copy.js';
 export { default as CopyButton } from './components/CopyButton/CopyButton.js';
 export { default as DangerButton } from './components/DangerButton/DangerButton.js';
-import './components/DataTable/index.js';
+export { default as DataTable } from './components/DataTable/DataTable.js';
+export { Table } from './components/DataTable/Table.js';
+export { default as TableActionList } from './components/DataTable/TableActionList.js';
+export { default as TableBatchAction } from './components/DataTable/TableBatchAction.js';
+export { default as TableBatchActions } from './components/DataTable/TableBatchActions.js';
+export { default as TableBody } from './components/DataTable/TableBody.js';
+export { default as TableCell } from './components/DataTable/TableCell.js';
+export { default as TableContainer } from './components/DataTable/TableContainer.js';
+export { default as TableExpandHeader } from './components/DataTable/TableExpandHeader.js';
+export { default as TableDecoratorRow } from './components/DataTable/TableDecoratorRow.js';
+export { default as TableExpandRow } from './components/DataTable/TableExpandRow.js';
+export { default as TableExpandedRow } from './components/DataTable/TableExpandedRow.js';
+export { default as TableHead } from './components/DataTable/TableHead.js';
+export { default as TableHeader } from './components/DataTable/TableHeader.js';
+export { default as TableRow } from './components/DataTable/TableRow.js';
+export { default as TableSelectAll } from './components/DataTable/TableSelectAll.js';
+export { default as TableSelectRow } from './components/DataTable/TableSelectRow.js';
+export { default as TableSlugRow } from './components/DataTable/TableSlugRow.js';
+export { default as TableToolbar } from './components/DataTable/TableToolbar.js';
+export { default as TableToolbarAction } from './components/DataTable/TableToolbarAction.js';
+export { default as TableToolbarContent } from './components/DataTable/TableToolbarContent.js';
+export { default as TableToolbarSearch } from './components/DataTable/TableToolbarSearch.js';
+export { default as TableToolbarMenu } from './components/DataTable/TableToolbarMenu.js';
 export { default as DataTableSkeleton } from './components/DataTableSkeleton/DataTableSkeleton.js';
 export { default as DatePicker } from './components/DatePicker/DatePicker.js';
 export { default as DatePickerSkeleton } from './components/DatePicker/DatePicker.Skeleton.js';
@@ -192,6 +214,8 @@ export { Heading, Section } from './components/Heading/index.js';
 export { IconButton, IconButtonKinds } from './components/IconButton/index.js';
 export { Layer, useLayer } from './components/Layer/index.js';
 export { Layout as unstable_Layout } from './components/Layout/index.js';
+export { LayoutDirection as unstable_LayoutDirection } from './components/LayoutDirection/LayoutDirection.js';
+export { useLayoutDirection as unstable_useLayoutDirection } from './components/LayoutDirection/useLayoutDirection.js';
 export { OverflowMenuV2 as unstable_OverflowMenuV2 } from './components/OverflowMenuV2/index.js';
 export { Popover, PopoverContent } from './components/Popover/index.js';
 export { default as ProgressBar } from './components/ProgressBar/ProgressBar.js';
@@ -214,30 +238,5 @@ export { default as unstable_Pagination } from './components/Pagination/experime
 export { default as ContainedListItem } from './components/ContainedList/ContainedListItem/ContainedListItem.js';
 export { default as ContainedList } from './components/ContainedList/ContainedList.js';
 export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.js';
-export { LayoutDirection as unstable_LayoutDirection } from './components/LayoutDirection/LayoutDirection.js';
-export { useLayoutDirection as unstable_useLayoutDirection } from './components/LayoutDirection/useLayoutDirection.js';
 export { Text as unstable_Text } from './components/Text/Text.js';
 export { TextDirection as unstable_TextDirection } from './components/Text/TextDirection.js';
-export { default as DataTable } from './components/DataTable/DataTable.js';
-export { Table } from './components/DataTable/Table.js';
-export { default as TableActionList } from './components/DataTable/TableActionList.js';
-export { default as TableBatchAction } from './components/DataTable/TableBatchAction.js';
-export { default as TableBatchActions } from './components/DataTable/TableBatchActions.js';
-export { default as TableBody } from './components/DataTable/TableBody.js';
-export { default as TableCell } from './components/DataTable/TableCell.js';
-export { default as TableContainer } from './components/DataTable/TableContainer.js';
-export { default as TableDecoratorRow } from './components/DataTable/TableDecoratorRow.js';
-export { default as TableExpandHeader } from './components/DataTable/TableExpandHeader.js';
-export { default as TableExpandRow } from './components/DataTable/TableExpandRow.js';
-export { default as TableExpandedRow } from './components/DataTable/TableExpandedRow.js';
-export { default as TableHead } from './components/DataTable/TableHead.js';
-export { default as TableHeader } from './components/DataTable/TableHeader.js';
-export { default as TableRow } from './components/DataTable/TableRow.js';
-export { default as TableSelectAll } from './components/DataTable/TableSelectAll.js';
-export { default as TableSelectRow } from './components/DataTable/TableSelectRow.js';
-export { default as TableSlugRow } from './components/DataTable/TableSlugRow.js';
-export { default as TableToolbar } from './components/DataTable/TableToolbar.js';
-export { default as TableToolbarAction } from './components/DataTable/TableToolbarAction.js';
-export { default as TableToolbarContent } from './components/DataTable/TableToolbarContent.js';
-export { default as TableToolbarSearch } from './components/DataTable/TableToolbarSearch.js';
-export { default as TableToolbarMenu } from './components/DataTable/TableToolbarMenu.js';

package/es/internal/FloatingMenu.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default, { useContext, useState, useRef, useCallback, useEffect, cloneElement } from 'react';
+import React, { useContext, useState, useRef, useCallback, useEffect, cloneElement } from 'react';
 import * as FeatureFlags from '@carbon/feature-flags';
 import ReactDOM from 'react-dom';
 import window from 'window-or-global';
@@ -276,15 +276,15 @@ const FloatingMenu = _ref2 => {
   const focusTrapWithoutSentinels = FeatureFlags.enabled('enable-experimental-focus-wrap-without-sentinels');
   if (typeof document !== 'undefined') {
     const portalTarget = target ? target() : document.body;
-    return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
       onBlur: focusTrap && !focusTrapWithoutSentinels ? handleBlur : undefined,
       onKeyDown: focusTrapWithoutSentinels ? handleKeyDown : undefined
-    }, !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("span", {
+    }, !focusTrapWithoutSentinels && /*#__PURE__*/React.createElement("span", {
       ref: startSentinelRef,
       tabIndex: 0,
       role: "link",
       className: `${prefix}--visually-hidden`
-    }, "Focus sentinel"), getChildrenWithProps(), !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("span", {
+    }, "Focus sentinel"), getChildrenWithProps(), !focusTrapWithoutSentinels && /*#__PURE__*/React.createElement("span", {
       ref: endSentinelRef,
       tabIndex: 0,
       role: "link",

package/es/internal/__mocks__/mockHTMLElement.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2025, 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 mockHTMLElement: (options: HTMLElement) => {
+    mockRestore: () => void;
+};

package/es/internal/createClassWrapper.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default from 'react';
+import React from 'react';
 
 /**
  * Wrap a class component with a functional component. This prevents an end-user
@@ -13,7 +13,7 @@ import React__default from 'react';
  */
 const createClassWrapper = Component => {
   const ClassWrapper = props => {
-    return /*#__PURE__*/React__default.createElement(Component, props);
+    return /*#__PURE__*/React.createElement(Component, props);
   };
   const name = Component.displayName || Component.name;
   ClassWrapper.displayName = `ClassWrapper(${name})`;

package/es/internal/debounce.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
+import { debounce } from 'es-toolkit/compat';
+export default debounce;

package/es/internal/environment.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+/**
+ * Indicate whether current execution environment can access the DOM.
+ *
+ * @see https://github.com/facebook/fbjs/blob/4d1751311d3f67af2dcce2e40df8512a23c7b9c6/packages/fbjs/src/core/ExecutionEnvironment.js#L12
+ */
+export declare const canUseDOM: boolean;

package/es/internal/useId.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default, { useLayoutEffect, useEffect, useState } from 'react';
+import React, { useState, useEffect, useLayoutEffect } from 'react';
 import { setupGetInstanceId } from '../tools/setupGetInstanceId.js';
 import { canUseDOM } from './environment.js';
 import { useIdPrefix } from './useIdPrefix.js';
@@ -17,7 +17,7 @@ import { useIdPrefix } from './useIdPrefix.js';
 // https://github.com/webpack/webpack/issues/14814
 // https://github.com/mui/material-ui/issues/41190
 const _React = {
-  ...React__default
+  ...React
 };
 const instanceId = setupGetInstanceId();
 const useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;

package/es/internal/useIdPrefix.js

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default from 'react';
+import React from 'react';
 
-const IdPrefixContext = /*#__PURE__*/React__default.createContext(null);
+const IdPrefixContext = /*#__PURE__*/React.createContext(null);
 function useIdPrefix() {
-  return React__default.useContext(IdPrefixContext);
+  return React.useContext(IdPrefixContext);
 }
 
 export { IdPrefixContext, useIdPrefix };

package/es/internal/useNormalizedInputProps.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default from 'react';
+import React from 'react';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import '../components/Text/index.js';
 import { usePrefix } from './usePrefix.js';
@@ -43,14 +43,14 @@ const useNormalizedInputProps = _ref => {
   };
   if (normalizedProps.invalid) {
     normalizedProps.icon = WarningFilled;
-    normalizedProps.validation = /*#__PURE__*/React__default.createElement(Text, {
+    normalizedProps.validation = /*#__PURE__*/React.createElement(Text, {
       as: "div",
       className: `${prefix}--form-requirement`,
       id: normalizedProps.invalidId
     }, invalidText);
   } else if (normalizedProps.warn) {
     normalizedProps.icon = WarningAltFilled;
-    normalizedProps.validation = /*#__PURE__*/React__default.createElement(Text, {
+    normalizedProps.validation = /*#__PURE__*/React.createElement(Text, {
       as: "div",
       className: `${prefix}--form-requirement`,
       id: normalizedProps.warnId

package/es/internal/usePrefix.js

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default from 'react';
+import React from 'react';
 
-const PrefixContext = /*#__PURE__*/React__default.createContext('cds');
+const PrefixContext = /*#__PURE__*/React.createContext('cds');
 function usePrefix() {
-  return React__default.useContext(PrefixContext);
+  return React.useContext(PrefixContext);
 }
 
 export { PrefixContext, usePrefix };

package/es/internal/usePreviousValue.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
+/**
+ * Stores the previous value of a given input.
+ *
+ * @param value - The current value.
+ * @returns The value before the current render.
+ *
+ * @example
+ * const [count, setCount] = useState(0);
+ * const prevCount = usePreviousValue(count);
+ */
+export declare const usePreviousValue: <T>(value: T) => T | undefined;

package/es/internal/usePreviousValue.js

@@ -0,0 +1,28 @@
+/**
+ * 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 { useRef, useEffect } from 'react';
+
+/**
+ * Stores the previous value of a given input.
+ *
+ * @param value - The current value.
+ * @returns The value before the current render.
+ *
+ * @example
+ * const [count, setCount] = useState(0);
+ * const prevCount = usePreviousValue(count);
+ */
+const usePreviousValue = value => {
+  const ref = useRef(undefined);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+};
+
+export { usePreviousValue };

package/es/internal/useResizeObserver.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 2025, 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.
+ */
+import { RefObject } from 'react';
+export declare const useResizeObserver: ({ ref, onResize, }: {
+    ref: RefObject<HTMLElement>;
+    onResize?: (rect: DOMRectReadOnly) => void;
+}) => {
+    width: number;
+    height: number;
+};

package/es/internal/useResizeObserver.js

@@ -0,0 +1,74 @@
+/**
+ * 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 { useState, useRef, useEffect, useLayoutEffect } from 'react';
+
+const useResizeObserver = _ref => {
+  let {
+    ref,
+    onResize
+  } = _ref;
+  const [width, setWidth] = useState(-1);
+  const [height, setHeight] = useState(-1);
+  const entriesToHandle = useRef(null);
+  const cb = useRef(onResize);
+  useEffect(() => {
+    // ref for onResize removes it as dependency from useLayoutEffect
+    // This significantly reduces repeated calls if a function is redefined on every
+    // render
+    cb.current = onResize;
+  }, [onResize]);
+  useEffect(() => {
+    const getInitialSize = () => {
+      if (ref.current) {
+        const refComputedStyle = window.getComputedStyle(ref.current);
+        const initialWidth = (ref.current?.offsetWidth ?? 0) - (typeof refComputedStyle?.paddingLeft === 'string' && refComputedStyle?.paddingLeft.length ? parseFloat(refComputedStyle?.paddingLeft) : 0) - (typeof refComputedStyle?.paddingRight === 'string' && refComputedStyle?.paddingRight.length ? parseFloat(refComputedStyle?.paddingRight) : 0);
+        const initialHeight = (ref.current?.offsetHeight ?? 0) - (typeof refComputedStyle?.paddingTop === 'string' && refComputedStyle?.paddingTop.length ? parseFloat(refComputedStyle?.paddingTop) : 0) - (typeof refComputedStyle?.paddingBottom === 'string' && refComputedStyle?.paddingBottom.length ? parseFloat(refComputedStyle?.paddingBottom) : 0);
+        setWidth(initialWidth);
+        setHeight(initialHeight);
+      }
+    };
+    if (!ref?.current || width >= 0 && height >= 0) {
+      return;
+    }
+    getInitialSize();
+  }, [width, height]);
+  useLayoutEffect(() => {
+    if (!ref?.current) {
+      return;
+    }
+    const doCallbacks = () => {
+      if (!ref?.current || !Array.isArray(entriesToHandle?.current)) {
+        return;
+      }
+      const entry = entriesToHandle.current[0];
+      setWidth(entry.contentRect.width);
+      setHeight(entry.contentRect.height);
+      cb.current && cb.current(entry.contentRect);
+    };
+    const observer = new ResizeObserver(entries => {
+      // always update entriesToHandle
+      entriesToHandle.current = entries;
+      window.requestAnimationFrame(() => {
+        // do callbacks
+        doCallbacks();
+      });
+    });
+
+    // observe all refs passed
+    observer.observe(ref.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  return {
+    width,
+    height
+  };
+};
+
+export { useResizeObserver };

package/es/internal/wrapFocus.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { useEffect } from 'react';
 import { tabbable } from 'tabbable';
 import { selectorTabbable } from './keyboard/navigation.js';
 
@@ -96,11 +95,9 @@ const wrapFocusWithoutSentinels = _ref4 => {
     event
   } = _ref4;
   if (!containerNode) return;
-  useEffect(() => {
-    if (['blur', 'focusout', 'focusin', 'focus'].includes(event.type) && process.env.NODE_ENV !== 'production') {
-      throw new Error(`Error: wrapFocusWithoutSentinels(...) called in unsupported ${event.type} event.\n\nCall wrapFocusWithoutSentinels(...) from onKeyDown instead.`);
-    }
-  }, []);
+  if (['blur', 'focusout', 'focusin', 'focus'].includes(event.type) && process.env.NODE_ENV !== 'production') {
+    throw new Error(`Error: wrapFocusWithoutSentinels(...) called in unsupported ${event.type} event.\n\nCall wrapFocusWithoutSentinels(...) from onKeyDown instead.`);
+  }
 
   // Use `tabbable` to get the focusable elements in tab order.
   // `selectorTabbable` returns elements in DOM order which is why it's not

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

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+import PropTypes from 'prop-types';
+export declare const AriaLabelPropType: PropTypes.ValidationMap<any>;

package/es/tools/wrapComponent.d.ts

@@ -1,11 +1,10 @@
 /**
- * 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.
  */
-import React from 'react';
-import { ReactAttr } from '../types/common';
+import React, { type HTMLAttributes } from 'react';
 type HTMLTagName = keyof HTMLElementTagNameMap;
 type WrapComponentArgs<T extends HTMLTagName> = {
     name: string;
@@ -16,5 +15,5 @@ type WrapComponentArgs<T extends HTMLTagName> = {
  * @param {{ name: string, type: string, className?: string | (prefix: string) => string }} props
  * @returns
  */
-declare const wrapComponent: <T extends HTMLTagName>({ name, className: getClassName, type, }: WrapComponentArgs<T>) => ((props: ReactAttr<T>) => React.ReactElement<any>);
+declare const wrapComponent: <T extends HTMLTagName>({ name, className: getClassName, type, }: WrapComponentArgs<T>) => ((props: HTMLAttributes<T>) => React.ReactElement<any>);
 export default wrapComponent;