@carbon/react 1.80.0-rc.0 → 1.80.1

package/es/components/ComposedModal/ComposedModal.js

@@ -17,14 +17,15 @@ import mergeRefs from '../../tools/mergeRefs.js';
 import cx from 'classnames';
 import toggleClass from '../../tools/toggleClass.js';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
-import wrapFocus, { elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
+import wrapFocus, { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { Escape } from '../../internal/keyboard/keys.js';
+import { Escape, Tab } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { unstable__Dialog } from '../Dialog/index.js';
+import { warning } from '../../internal/warning.js';
 import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js';
 
 const ModalBody = /*#__PURE__*/React__default.forwardRef(function ModalBody(_ref, ref) {
@@ -121,9 +122,9 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
   const startSentinel = useRef(null);
   const endSentinel = useRef(null);
   const onMouseDownTarget = useRef(null);
-  const enableDialogElement =
-  // useFeatureFlag('enable-experimental-focus-wrap-without-sentinels') ||
-  useFeatureFlag('enable-dialog-element');
+  const enableDialogElement = useFeatureFlag('enable-dialog-element');
+  const focusTrapWithoutSentinels = useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
+  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;
 
   // Keep track of modal open/close state
   // and propagate it to the document.body
@@ -149,6 +150,13 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
       if (match(event, Escape)) {
         closeModal(event);
       }
+      if (focusTrapWithoutSentinels && open && match(event, Tab) && innerModal.current) {
+        wrapFocusWithoutSentinels({
+          containerNode: innerModal.current,
+          currentActiveNode: event.target,
+          event: event
+        });
+      }
     }
     onKeyDown?.(event);
   }
@@ -283,7 +291,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     "aria-modal": "true",
     "aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
     "aria-labelledby": ariaLabelledBy
-  }, /*#__PURE__*/React__default.createElement("button", {
+  }, !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     ref: startSentinel,
     className: `${prefix}--visually-hidden`
@@ -292,7 +300,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     className: `${prefix}--modal-container-body`
   }, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--modal--inner__decorator`
-  }, normalizedDecorator) : '', childrenWithProps), /*#__PURE__*/React__default.createElement("button", {
+  }, normalizedDecorator) : '', childrenWithProps), !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     ref: endSentinel,
     className: `${prefix}--visually-hidden`
@@ -302,7 +310,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
     role: "presentation",
     ref: ref,
     "aria-hidden": !open,
-    onBlur: !enableDialogElement ? handleBlur : () => {},
+    onBlur: !enableDialogElement && !focusTrapWithoutSentinels ? handleBlur : () => {},
     onClick: composeEventHandlers([rest?.onClick, handleOnClick]),
     onMouseDown: composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
     onKeyDown: handleKeyDown,

package/es/components/InlineLoading/InlineLoading.js

@@ -53,9 +53,9 @@ const InlineLoading = _ref => {
         className: `${prefix}--inline-loading__checkmark-container`
       }, /*#__PURE__*/React__default.createElement("title", null, iconLabel));
     }
-    if (status === 'inactive' || status === 'active') {
+    if (status === 'active') {
       if (!iconDescription) {
-        iconLabel = status === 'active' ? 'loading' : 'not loading';
+        iconLabel = 'loading';
       }
       return /*#__PURE__*/React__default.createElement(Loading, {
         small: true,
@@ -64,6 +64,14 @@ const InlineLoading = _ref => {
         active: status === 'active'
       });
     }
+    if (status === 'inactive') {
+      if (!iconDescription) {
+        iconLabel = 'not loading';
+      }
+      return /*#__PURE__*/React__default.createElement("title", {
+        className: `${prefix}--inline-loading__inactive-status`
+      }, iconLabel);
+    }
     return undefined;
   };
   const loadingText = description && /*#__PURE__*/React__default.createElement("div", {

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

@@ -4,7 +4,7 @@
  * 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, { ChangeEventHandler, ComponentProps, FC, KeyboardEvent, LiHTMLAttributes, MouseEvent, ReactNode } from 'react';
+import React, { ComponentProps, FC, KeyboardEvent, LiHTMLAttributes, MouseEvent, ReactNode } from 'react';
 export interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
     /**
      * Optionally provide another Menu to create a submenu. props.children can't be used to specify the content of the MenuItem itself. Use props.label instead.
@@ -48,7 +48,7 @@ export interface MenuItemSelectableProps extends Omit<MenuItemProps, 'onChange'>
     /**
      * Provide an optional function to be called when the selection state changes.
      */
-    onChange?: ChangeEventHandler<HTMLLIElement>;
+    onChange?: (checked: boolean) => void;
     /**
      * Controls the state of this option.
      */
@@ -94,7 +94,7 @@ export interface MenuItemRadioGroupProps<Item> extends Omit<ComponentProps<'ul'>
     /**
      * Provide an optional function to be called when the selection changes.
      */
-    onChange?: ChangeEventHandler<HTMLLIElement>;
+    onChange?: (selectedItem: Item) => void;
     /**
      * Provide props.selectedItem to control the state of this radio group. Must match the type of props.items.
      */

package/es/components/Menu/MenuItem.js

@@ -333,7 +333,7 @@ const MenuItemRadioGroup = /*#__PURE__*/forwardRef(function MenuItemRadioGroup(_
   const [selection, setSelection] = useControllableState({
     value: selectedItem,
     onChange,
-    defaultValue: defaultSelectedItem
+    defaultValue: defaultSelectedItem ?? {}
   });
   function handleClick(item, e) {
     setSelection(item);

package/es/components/Modal/Modal.js

@@ -17,11 +17,11 @@ import ButtonSet from '../ButtonSet/ButtonSet.js';
 import InlineLoading from '../InlineLoading/InlineLoading.js';
 import { Layer } from '../Layer/index.js';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
-import wrapFocus, { elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
+import wrapFocus, { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { Escape, Enter } from '../../internal/keyboard/keys.js';
+import { Escape, Enter, Tab } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { IconButton } from '../IconButton/index.js';
 import { noopFn } from '../../internal/noopFn.js';
@@ -30,6 +30,7 @@ import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { unstable__Dialog } from '../Dialog/index.js';
+import { warning } from '../../internal/warning.js';
 import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js';
 import { Text } from '../Text/Text.js';
 
@@ -87,7 +88,9 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     [`${prefix}--btn--loading`]: loadingStatus !== 'inactive'
   });
   const loadingActive = loadingStatus !== 'inactive';
-  const enableDialogElement = useFeatureFlag('enable-experimental-focus-wrap-without-sentinels') || useFeatureFlag('enable-dialog-element');
+  const focusTrapWithoutSentinels = useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
+  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;
   function isCloseButton(element) {
     return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
   }
@@ -100,6 +103,15 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
       if (match(evt, Enter) && shouldSubmitOnEnter && !isCloseButton(evt.target)) {
         onRequestSubmit(evt);
       }
+      if (focusTrapWithoutSentinels && !enableDialogElement && match(evt, Tab) && innerModal.current) {
+        wrapFocusWithoutSentinels({
+          containerNode: innerModal.current,
+          currentActiveNode: evt.target,
+          // TODO: Delete type assertion following util rewrite.
+          // https://github.com/carbon-design-system/carbon/pull/18913
+          event: evt
+        });
+      }
     }
   }
   function handleOnClick(evt) {
@@ -326,7 +338,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     iconDescription: loadingIconDescription,
     className: `${prefix}--inline-loading--btn`,
     onSuccess: onLoadingSuccess
-  })))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !enableDialogElement && /*#__PURE__*/React__default.createElement("span", {
+  })))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !enableDialogElement && !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("span", {
     ref: startTrap,
     tabIndex: 0,
     role: "link",
@@ -385,7 +397,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     iconDescription: loadingIconDescription,
     className: `${prefix}--inline-loading--btn`,
     onSuccess: onLoadingSuccess
-  })))), !enableDialogElement && /*#__PURE__*/React__default.createElement("span", {
+  })))), !enableDialogElement && !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("span", {
     ref: endTrap,
     tabIndex: 0,
     role: "link",

package/es/components/OverflowMenu/OverflowMenu.js

@@ -11,7 +11,7 @@ import { OverflowMenuVertical } from '@carbon/icons-react';
 import cx from 'classnames';
 import invariant from 'invariant';
 import PropTypes from 'prop-types';
-import ClickListener from '../../internal/ClickListener.js';
+import { ClickListener } from '../../internal/ClickListener.js';
 import { DIRECTION_TOP, DIRECTION_BOTTOM, FloatingMenu } from '../../internal/FloatingMenu.js';
 import { ArrowUp, ArrowRight, ArrowDown, ArrowLeft, Escape } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
@@ -201,7 +201,7 @@ const OverflowMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
   };
   const handleClickOutside = evt => {
-    if (open && (!menuBodyRef.current || !menuBodyRef.current.contains(evt.target))) {
+    if (open && (!menuBodyRef.current || evt.target instanceof Node && !menuBodyRef.current.contains(evt.target))) {
       closeMenu();
     }
   };

package/es/components/Tag/DismissibleTag.d.ts

@@ -4,7 +4,6 @@
  * 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';
 import React, { ReactNode } from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { SIZES, TYPES } from './Tag';
@@ -61,59 +60,6 @@ export interface DismissibleTagBaseProps {
     type?: keyof typeof TYPES;
 }
 export type DismissibleTagProps<T extends React.ElementType> = PolymorphicProps<T, DismissibleTagBaseProps>;
-declare const DismissibleTag: {
-    <T extends React.ElementType>({ className, decorator, disabled, id, renderIcon, title, onClose, slug, size, text, tagTitle, type, ...other }: DismissibleTagProps<T>): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        /**
-         * Provide a custom className that is applied to the containing <span>
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * **Experimental:** Provide a `decorator` component to be rendered inside the `DismissibleTag` component
-         */
-        decorator: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Specify if the `DismissibleTag` is disabled
-         */
-        disabled: PropTypes.Requireable<boolean>;
-        /**
-         * Specify the id for the tag.
-         */
-        id: PropTypes.Requireable<string>;
-        /**
-         * Click handler for filter tag close button.
-         */
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * A component used to render an icon.
-         */
-        renderIcon: PropTypes.Requireable<object>;
-        /**
-         * Specify the size of the Tag. Currently supports either `sm`,
-         * `md` (default) or `lg` sizes.
-         */
-        size: PropTypes.Requireable<string>;
-        /**
-         * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
-         */
-        slug: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
-        /**
-         * Provide text to be rendered inside of a the tag.
-         */
-        text: PropTypes.Requireable<string>;
-        /**
-         * Provide a custom `title` to be inserted in the tag.
-         */
-        tagTitle: PropTypes.Requireable<string>;
-        /**
-         * Text to show on clear filters
-         */
-        title: PropTypes.Requireable<string>;
-        /**
-         * Specify the type of the `Tag`
-         */
-        type: PropTypes.Requireable<string>;
-    };
-};
+declare const DismissibleTag: React.ForwardRefExoticComponent<Omit<DismissibleTagProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const types: string[];
 export default DismissibleTag;

package/es/components/Tag/DismissibleTag.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useRef, useState, useLayoutEffect } from 'react';
+import React__default, { forwardRef, useRef, useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -18,10 +18,11 @@ import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Text/index.js';
 import { isEllipsisActive } from './isEllipsisActive.js';
+import mergeRefs from '../../tools/mergeRefs.js';
 import { Text } from '../Text/Text.js';
 
 var _Close;
-const DismissibleTag = _ref => {
+const DismissibleTag = /*#__PURE__*/forwardRef((_ref, forwardRef) => {
   let {
     className,
     decorator,
@@ -46,6 +47,7 @@ const DismissibleTag = _ref => {
     const newElement = tagLabelRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
     setIsEllipsisApplied(isEllipsisActive(newElement));
   }, [prefix, tagLabelRef]);
+  const combinedRef = mergeRefs(tagLabelRef, forwardRef);
   const handleClose = event => {
     if (onClose) {
       event.stopPropagation();
@@ -69,7 +71,7 @@ const DismissibleTag = _ref => {
   } = other;
   const dismissLabel = `Dismiss "${text}"`;
   return /*#__PURE__*/React__default.createElement(Tag, _extends({
-    ref: tagLabelRef,
+    ref: combinedRef,
     type: type,
     size: size,
     renderIcon: renderIcon,
@@ -96,7 +98,7 @@ const DismissibleTag = _ref => {
     disabled: disabled,
     "aria-label": title
   }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))))));
-};
+});
 DismissibleTag.propTypes = {
   /**
    * Provide a custom className that is applied to the containing <span>

package/es/components/Tag/OperationalTag.d.ts

@@ -52,6 +52,6 @@ export interface OperationalTagBaseProps {
     type?: keyof typeof TYPES;
 }
 export type OperationalTagProps<T extends React.ElementType> = PolymorphicProps<T, OperationalTagBaseProps>;
-declare const OperationalTag: React.ForwardRefExoticComponent<Omit<OperationalTagProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const OperationalTag: React.ForwardRefExoticComponent<Omit<OperationalTagProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export declare const types: string[];
 export default OperationalTag;

package/es/components/Tag/SelectableTag.d.ts

@@ -4,7 +4,6 @@
  * 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';
 import React, { MouseEvent } from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { SIZES } from './Tag';
@@ -48,46 +47,5 @@ export interface SelectableTagBaseProps {
     text?: string;
 }
 export type SelectableTagProps<T extends React.ElementType> = PolymorphicProps<T, SelectableTagBaseProps>;
-declare const SelectableTag: {
-    <T extends React.ElementType>({ className, disabled, id, renderIcon, onChange, onClick, selected, size, text, ...other }: SelectableTagProps<T>): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        /**
-         * Provide a custom className that is applied to the containing <span>
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * Specify if the `SelectableTag` is disabled
-         */
-        disabled: PropTypes.Requireable<boolean>;
-        /**
-         * Specify the id for the tag.
-         */
-        id: PropTypes.Requireable<string>;
-        /**
-         * A component used to render an icon.
-         */
-        renderIcon: PropTypes.Requireable<object>;
-        /**
-         * Provide an optional hook that is called when selected is changed
-         */
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Provide an optional function to be called when the tag is clicked.
-         */
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Specify the state of the selectable tag.
-         */
-        selected: PropTypes.Requireable<boolean>;
-        /**
-         * Specify the size of the Tag. Currently supports either `sm`,
-         * `md` (default) or `lg` sizes.
-         */
-        size: PropTypes.Requireable<string>;
-        /**
-         * Provide text to be rendered inside of a the tag.
-         */
-        text: PropTypes.Requireable<string>;
-    };
-};
+declare const SelectableTag: React.ForwardRefExoticComponent<Omit<SelectableTagProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default SelectableTag;

package/es/components/Tag/SelectableTag.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useRef, useState, useLayoutEffect } from 'react';
+import React__default, { forwardRef, useRef, useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -16,9 +16,10 @@ import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 import '../Text/index.js';
 import { isEllipsisActive } from './isEllipsisActive.js';
+import mergeRefs from '../../tools/mergeRefs.js';
 import { Text } from '../Text/Text.js';
 
-const SelectableTag = _ref => {
+const SelectableTag = /*#__PURE__*/forwardRef((_ref, forwardRef) => {
   let {
     className,
     disabled,
@@ -44,6 +45,7 @@ const SelectableTag = _ref => {
     setIsEllipsisApplied(isEllipsisActive(newElement));
   }, [prefix, tagRef]);
   const tooltipClasses = cx(`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
+  const combinedRef = mergeRefs(tagRef, forwardRef);
   const handleClick = e => {
     setSelectedTag(!selectedTag);
     onChange?.(!selectedTag);
@@ -58,7 +60,7 @@ const SelectableTag = _ref => {
       onMouseEnter: () => false
     }, /*#__PURE__*/React__default.createElement(Tag, _extends({
       "aria-pressed": selectedTag !== false,
-      ref: tagRef,
+      ref: combinedRef,
       size: size,
       renderIcon: renderIcon,
       disabled: disabled,
@@ -72,7 +74,7 @@ const SelectableTag = _ref => {
   }
   return /*#__PURE__*/React__default.createElement(Tag, _extends({
     "aria-pressed": selectedTag !== false,
-    ref: tagRef,
+    ref: combinedRef,
     size: size,
     renderIcon: renderIcon,
     disabled: disabled,
@@ -83,7 +85,7 @@ const SelectableTag = _ref => {
     title: text,
     className: `${prefix}--tag__label`
   }, text));
-};
+});
 SelectableTag.propTypes = {
   /**
    * Provide a custom className that is applied to the containing <span>

package/es/components/TreeView/TreeNode.d.ts

@@ -4,7 +4,7 @@
  * 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, { ComponentType, FunctionComponent } from 'react';
+import React, { type ComponentType, type FunctionComponent } from 'react';
 export type TreeNodeProps = {
     /**
      * **Note:** this is controlled by the parent TreeView component, do not set manually.

package/es/components/TreeView/TreeNode.js

@@ -47,10 +47,17 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) =>
   } = useRef(nodeId || uniqueId());
   const controllableExpandedState = useControllableState({
     value: isExpanded,
-    onChange: onToggle,
-    defaultValue: defaultIsExpanded
+    onChange: newValue => {
+      onToggle?.(undefined, {
+        id,
+        isExpanded: newValue,
+        label,
+        value
+      });
+    },
+    defaultValue: defaultIsExpanded ?? false
   });
-  const uncontrollableExpandedState = useState(isExpanded);
+  const uncontrollableExpandedState = useState(isExpanded ?? false);
   const [expanded, setExpanded] = enableTreeviewControllable ? controllableExpandedState : uncontrollableExpandedState;
   const currentNode = useRef(null);
   const currentNodeLabel = useRef(null);
@@ -244,7 +251,7 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) =>
     }
     if (!enableTreeviewControllable) {
       // sync props and state
-      setExpanded(isExpanded);
+      setExpanded(isExpanded ?? false);
     }
   }, [children, depth, Icon, isExpanded, enableTreeviewControllable, setExpanded]);
   const treeNodeProps = {

package/es/components/TreeView/TreeView.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/components/TreeView/TreeView.js

@@ -44,7 +44,11 @@ const TreeView = _ref => {
   const treeWalker = useRef(treeRootRef?.current);
   const controllableSelectionState = useControllableState({
     value: preselected,
-    onChange: onSelect,
+    onChange: newSelected => {
+      onSelect?.(undefined, {
+        activeNodeId: newSelected[0]
+      });
+    },
     defaultValue: []
   });
   const uncontrollableSelectionState = useState(preselected ?? []);
@@ -127,11 +131,7 @@ const TreeView = _ref => {
   });
   function handleKeyDown(event) {
     event.stopPropagation();
-    if (matches(event, [ArrowUp, ArrowDown, Home, End,
-    // @ts-ignore - `matches` doesn't like the object syntax without missing properties
-    {
-      code: 'KeyA'
-    }])) {
+    if (matches(event, [ArrowUp, ArrowDown, Home, End])) {
       event.preventDefault();
     }
     if (!treeWalker.current) {

package/es/internal/ClickListener.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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, { type ReactElement } from 'react';
+interface ClickListenerProps {
+    children: ReactElement;
+    onClickOutside: (event: MouseEvent) => void;
+}
+export declare const ClickListener: ({ children, onClickOutside, }: ClickListenerProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export {};

package/es/internal/ClickListener.js

@@ -5,70 +5,43 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty } from '../_virtual/_rollupPluginBabelHelpers.js';
-import PropTypes from 'prop-types';
-import React__default from 'react';
+import { useRef, useEffect, cloneElement } from 'react';
 
-/**
- * Generic component used for reacting to a click event happening outside of a
- * given `children` element.
- */
-class ClickListener extends React__default.Component {
-  static getEventTarget(evt) {
-    // support Shadow DOM
-    if (evt.composed && typeof evt.composedPath === 'function') {
-      return evt.composedPath()[0];
+const ClickListener = _ref => {
+  let {
+    children,
+    onClickOutside
+  } = _ref;
+  const elementRef = useRef(null);
+  const getEventTarget = event => {
+    if (event.composed && typeof event.composedPath === 'function') {
+      return event.composedPath()[0];
     }
-    return evt.target;
-  }
-  constructor(props) {
-    super(props);
-    // We manually bind handlers in this Component, versus using class
-    // properties, so that we can properly test the `handleRef` handler.
-    this.handleRef = this.handleRef.bind(this);
-    this.handleDocumentClick = this.handleDocumentClick.bind(this);
-  }
-  componentDidMount() {
-    document.addEventListener('click', this.handleDocumentClick);
-  }
-  componentWillUnmount() {
-    document.removeEventListener('click', this.handleDocumentClick);
-  }
-  handleDocumentClick(evt) {
-    if (this.element) {
-      if (this.element.contains && !this.element.contains(ClickListener.getEventTarget(evt))) {
-        this.props.onClickOutside(evt);
+    return event.target;
+  };
+  const handleDocumentClick = event => {
+    if (elementRef.current?.contains) {
+      const eventTarget = getEventTarget(event);
+      if (eventTarget instanceof Node && !elementRef.current.contains(eventTarget)) {
+        onClickOutside(event);
       }
     }
-  }
-  handleRef(el) {
-    const {
-      children
-    } = this.props;
-    this.element = el;
-
-    /**
-     * One important note, `children.ref` corresponds to a `ref` prop passed in
-     * directly to the child, not necessarily a `ref` defined in the component.
-     * This means that here we target the following `ref` location:
-     *
-     * <ClickListener onClickOutside={() => {}}>
-     *   <Child ref={targetedRefHere} />
-     * </ClickListener>
-     */
-    if (children.ref && typeof children.ref === 'function') {
+  };
+  useEffect(() => {
+    document.addEventListener('click', handleDocumentClick);
+    return () => {
+      document.removeEventListener('click', handleDocumentClick);
+    };
+  }, [onClickOutside]);
+  const handleRef = el => {
+    elementRef.current = el;
+    if ('ref' in children && typeof children.ref === 'function') {
       children.ref(el);
     }
-  }
-  render() {
-    return /*#__PURE__*/React__default.cloneElement(this.props.children, {
-      ref: this.handleRef
-    });
-  }
-}
-_defineProperty(ClickListener, "propTypes", {
-  children: PropTypes.element.isRequired,
-  onClickOutside: PropTypes.func.isRequired
-});
+  };
+  return /*#__PURE__*/cloneElement(children, {
+    ref: handleRef
+  });
+};
 
-export { ClickListener as default };
+export { ClickListener };