@carbon/react 1.80.0-rc.0 → 1.80.1

package/es/internal/useControllableState.d.ts

@@ -0,0 +1,34 @@
+/**
+ * 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.
+ */
+interface UseControllableStateConfig<T> {
+    /** The name of the component. */
+    name?: string;
+    /**
+     * The default value for the component. This value is used when the component
+     * is uncontrolled (i.e., when `value` is not provided).
+     */
+    defaultValue: T;
+    /**
+     * This callback is called whenever the state changes. It's useful for
+     * communicating state updates to parent components of controlled components.
+     */
+    onChange?: (value: T) => void;
+    /**
+     * Controlled value. If this prop is omitted, the state will be uncontrolled.
+     */
+    value?: T;
+}
+/**
+ * This hook simplifies the behavior of a component that has state which can be
+ * both controlled and uncontrolled. It works like `useState`. You can use the
+ * `onChange` callback to communicate state updates to parent components.
+ *
+ * Note: This hook will warn if the component switches between controlled and
+ * uncontrolled states.
+ */
+export declare const useControllableState: <T>({ defaultValue, name, onChange, value, }: UseControllableStateConfig<T>) => [T, (stateOrUpdater: T | ((prev: T) => T)) => void];
+export {};

package/es/internal/useControllableState.js

@@ -9,58 +9,43 @@ import { useState, useRef, useEffect } from 'react';
 import { warning } from './warning.js';
 
 /**
- * This custom hook simplifies the behavior of a component if it has state that
- * can be both controlled and uncontrolled. It functions identical to a
- * useState() hook and provides [state, setState] for you to use. You can use
- * the `onChange` argument to allow updates to the `state` to be communicated to
- * owners of controlled components.
+ * This hook simplifies the behavior of a component that has state which can be
+ * both controlled and uncontrolled. It works like `useState`. You can use the
+ * `onChange` callback to communicate state updates to parent components.
  *
- * Note: this hook will warn if a component is switching from controlled to
- * uncontrolled, or vice-versa.
- *
- * @param {object} config
- * @param {string} [config.name] - the name of the custom component
- * @param {any} config.defaultValue - the default value used for the state. This will be
- * the fallback value used if `value` is not defined.
- * @param {Function|undefined} config.onChange - an optional function that is called when
- * the value of the state changes. This is useful for communicating to parents of
- * controlled components that the value is requesting to be changed.
- * @param {any} config.value - a controlled value. Omitting this means that the state is
- * uncontrolled
- * @returns {[any, (v: any) => void]}
+ * Note: This hook will warn if the component switches between controlled and
+ * uncontrolled states.
  */
-function useControllableState(_ref) {
+const useControllableState = _ref => {
   let {
     defaultValue,
     name = 'custom',
     onChange,
     value
   } = _ref;
-  const [state, internalSetState] = useState(value ?? defaultValue);
+  const [state, internalSetState] = useState(typeof value !== 'undefined' ? value : defaultValue);
   const controlled = useRef(null);
   if (controlled.current === null) {
-    controlled.current = value !== undefined;
+    controlled.current = typeof value !== 'undefined';
   }
-  function setState(stateOrUpdater) {
-    const value = typeof stateOrUpdater === 'function' ? stateOrUpdater(state) : stateOrUpdater;
+  const setState = stateOrUpdater => {
+    const newValue = typeof stateOrUpdater === 'function' ? stateOrUpdater(state) : stateOrUpdater;
     if (controlled.current === false) {
-      internalSetState(value);
+      internalSetState(newValue);
     }
     if (onChange) {
-      onChange(value);
+      onChange(newValue);
     }
-  }
+  };
   useEffect(() => {
-    const controlledValue = value !== undefined;
+    const controlledValue = typeof value !== 'undefined';
 
     // Uncontrolled -> Controlled
-    // If the component prop is uncontrolled, the prop value should be undefined
     if (controlled.current === false && controlledValue) {
       process.env.NODE_ENV !== "production" ? warning(false, `A component is changing an uncontrolled ${name} component to be controlled. ` + 'This is likely caused by the value changing to a defined value ' + 'from undefined. Decide between using a controlled or uncontrolled ' + 'value for the lifetime of the component. ' + 'More info: https://reactjs.org/link/controlled-components') : void 0;
     }
 
     // Controlled -> Uncontrolled
-    // If the component prop is controlled, the prop value should be defined
     if (controlled.current === true && !controlledValue) {
       process.env.NODE_ENV !== "production" ? warning(false, `A component is changing a controlled ${name} component to be uncontrolled. ` + 'This is likely caused by the value changing to an undefined value ' + 'from a defined one. Decide between using a controlled or ' + 'uncontrolled value for the lifetime of the component. ' + 'More info: https://reactjs.org/link/controlled-components') : void 0;
     }
@@ -69,6 +54,6 @@ function useControllableState(_ref) {
     return [value, setState];
   }
   return [state, setState];
-}
+};
 
 export { useControllableState };

package/es/internal/useOutsideClick.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 { type RefObject } from 'react';
+export declare const useOutsideClick: <T extends HTMLElement>(ref: RefObject<T>, callback: (event: MouseEvent) => void) => void;

package/es/internal/useOutsideClick.js

@@ -6,26 +6,29 @@
  */
 
 import { useRef, useEffect } from 'react';
-import { useEvent } from './useEvent.js';
 import { canUseDOM } from './environment.js';
+import { useWindowEvent } from './useEvent.js';
 
-function useOutsideClick(ref, callback) {
+const useOutsideClick = (ref, callback) => {
   const savedCallback = useRef(callback);
   useEffect(() => {
     savedCallback.current = callback;
-  });
+  }, [callback]);
 
   // We conditionally guard the `useEvent` hook for SSR. `canUseDOM` can be
   // treated as a constant as it will be false when executed in a Node.js
   // environment and true when executed in the browser
   if (canUseDOM) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEvent(window, 'click', event => {
-      if (ref.current && !ref.current.contains(event.target)) {
+    useWindowEvent('click', event => {
+      const {
+        target
+      } = event;
+      if (target instanceof Node && ref.current && !ref.current.contains(target)) {
         savedCallback.current(event);
       }
     });
   }
-}
+};
 
 export { useOutsideClick };

package/lib/components/ComposedModal/ComposedModal.js

@@ -29,6 +29,7 @@ var index$1 = require('../FeatureFlags/index.js');
 var events = require('../../tools/events.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var index$2 = require('../Dialog/index.js');
+var warning = require('../../internal/warning.js');
 var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -131,9 +132,9 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
   const startSentinel = React.useRef(null);
   const endSentinel = React.useRef(null);
   const onMouseDownTarget = React.useRef(null);
-  const enableDialogElement =
-  // useFeatureFlag('enable-experimental-focus-wrap-without-sentinels') ||
-  index$1.useFeatureFlag('enable-dialog-element');
+  const enableDialogElement = index$1.useFeatureFlag('enable-dialog-element');
+  const focusTrapWithoutSentinels = index$1.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
+  process.env.NODE_ENV !== "production" ? warning.warning(!(focusTrapWithoutSentinels && enableDialogElement), '`<Modal>` detected both `focusTrapWithoutSentinels` and ' + '`enableDialogElement` feature flags are enabled. The native dialog ' + 'element handles focus, so `enableDialogElement` must be off for ' + '`focusTrapWithoutSentinels` to have any effect.') : void 0;
 
   // Keep track of modal open/close state
   // and propagate it to the document.body
@@ -159,6 +160,13 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
       if (match.match(event, keys.Escape)) {
         closeModal(event);
       }
+      if (focusTrapWithoutSentinels && open && match.match(event, keys.Tab) && innerModal.current) {
+        wrapFocus.wrapFocusWithoutSentinels({
+          containerNode: innerModal.current,
+          currentActiveNode: event.target,
+          event: event
+        });
+      }
     }
     onKeyDown?.(event);
   }
@@ -293,7 +301,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     "aria-modal": "true",
     "aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
     "aria-labelledby": ariaLabelledBy
-  }, /*#__PURE__*/React__default["default"].createElement("button", {
+  }, !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     ref: startSentinel,
     className: `${prefix}--visually-hidden`
@@ -302,7 +310,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     className: `${prefix}--modal-container-body`
   }, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--modal--inner__decorator`
-  }, normalizedDecorator) : '', childrenWithProps), /*#__PURE__*/React__default["default"].createElement("button", {
+  }, normalizedDecorator) : '', childrenWithProps), !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     ref: endSentinel,
     className: `${prefix}--visually-hidden`
@@ -312,7 +320,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     role: "presentation",
     ref: ref,
     "aria-hidden": !open,
-    onBlur: !enableDialogElement ? handleBlur : () => {},
+    onBlur: !enableDialogElement && !focusTrapWithoutSentinels ? handleBlur : () => {},
     onClick: events.composeEventHandlers([rest?.onClick, handleOnClick]),
     onMouseDown: events.composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
     onKeyDown: handleKeyDown,

package/lib/components/InlineLoading/InlineLoading.js

@@ -63,9 +63,9 @@ const InlineLoading = _ref => {
         className: `${prefix}--inline-loading__checkmark-container`
       }, /*#__PURE__*/React__default["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["default"].createElement(Loading["default"], {
         small: true,
@@ -74,6 +74,14 @@ const InlineLoading = _ref => {
         active: status === 'active'
       });
     }
+    if (status === 'inactive') {
+      if (!iconDescription) {
+        iconLabel = 'not loading';
+      }
+      return /*#__PURE__*/React__default["default"].createElement("title", {
+        className: `${prefix}--inline-loading__inactive-status`
+      }, iconLabel);
+    }
     return undefined;
   };
   const loadingText = description && /*#__PURE__*/React__default["default"].createElement("div", {

package/lib/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/lib/components/Menu/MenuItem.js

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

package/lib/components/Modal/Modal.js

@@ -34,6 +34,7 @@ var index = require('../FeatureFlags/index.js');
 var events = require('../../tools/events.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var index$1 = require('../Dialog/index.js');
+var warning = require('../../internal/warning.js');
 var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js');
 var Text = require('../Text/Text.js');
 
@@ -97,7 +98,9 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     [`${prefix}--btn--loading`]: loadingStatus !== 'inactive'
   });
   const loadingActive = loadingStatus !== 'inactive';
-  const enableDialogElement = index.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels') || index.useFeatureFlag('enable-dialog-element');
+  const focusTrapWithoutSentinels = index.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
+  const enableDialogElement = index.useFeatureFlag('enable-dialog-element');
+  process.env.NODE_ENV !== "production" ? warning.warning(!(focusTrapWithoutSentinels && enableDialogElement), '`<Modal>` detected both `focusTrapWithoutSentinels` and ' + '`enableDialogElement` feature flags are enabled. The native dialog ' + 'element handles focus, so `enableDialogElement` must be off for ' + '`focusTrapWithoutSentinels` to have any effect.') : void 0;
   function isCloseButton(element) {
     return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
   }
@@ -110,6 +113,15 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
       if (match.match(evt, keys.Enter) && shouldSubmitOnEnter && !isCloseButton(evt.target)) {
         onRequestSubmit(evt);
       }
+      if (focusTrapWithoutSentinels && !enableDialogElement && match.match(evt, keys.Tab) && innerModal.current) {
+        wrapFocus.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) {
@@ -336,7 +348,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     iconDescription: loadingIconDescription,
     className: `${prefix}--inline-loading--btn`,
     onSuccess: onLoadingSuccess
-  })))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !enableDialogElement && /*#__PURE__*/React__default["default"].createElement("span", {
+  })))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !enableDialogElement && !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("span", {
     ref: startTrap,
     tabIndex: 0,
     role: "link",
@@ -395,7 +407,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     iconDescription: loadingIconDescription,
     className: `${prefix}--inline-loading--btn`,
     onSuccess: onLoadingSuccess
-  })))), !enableDialogElement && /*#__PURE__*/React__default["default"].createElement("span", {
+  })))), !enableDialogElement && !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("span", {
     ref: endTrap,
     tabIndex: 0,
     role: "link",

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -212,7 +212,7 @@ const OverflowMenu = /*#__PURE__*/React.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();
     }
   };
@@ -325,7 +325,7 @@ const OverflowMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }, /*#__PURE__*/React.cloneElement(menuBody, {
     'data-floating-menu-direction': direction
   }));
-  return /*#__PURE__*/React__default["default"].createElement(ClickListener["default"], {
+  return /*#__PURE__*/React__default["default"].createElement(ClickListener.ClickListener, {
     onClickOutside: handleClickOutside
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--overflow-menu__wrapper`,

package/lib/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/lib/components/Tag/DismissibleTag.js

@@ -22,6 +22,7 @@ require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
 require('../Text/index.js');
 var isEllipsisActive = require('./isEllipsisActive.js');
+var mergeRefs = require('../../tools/mergeRefs.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -31,7 +32,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _Close;
-const DismissibleTag = _ref => {
+const DismissibleTag = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   let {
     className,
     decorator,
@@ -56,6 +57,7 @@ const DismissibleTag = _ref => {
     const newElement = tagLabelRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
     setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
   }, [prefix, tagLabelRef]);
+  const combinedRef = mergeRefs["default"](tagLabelRef, forwardRef);
   const handleClose = event => {
     if (onClose) {
       event.stopPropagation();
@@ -79,7 +81,7 @@ const DismissibleTag = _ref => {
   } = other;
   const dismissLabel = `Dismiss "${text}"`;
   return /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
-    ref: tagLabelRef,
+    ref: combinedRef,
     type: type,
     size: size,
     renderIcon: renderIcon,
@@ -106,7 +108,7 @@ const DismissibleTag = _ref => {
     disabled: disabled,
     "aria-label": title
   }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))))));
-};
+});
 DismissibleTag.propTypes = {
   /**
    * Provide a custom className that is applied to the containing <span>

package/lib/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/lib/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/lib/components/Tag/SelectableTag.js

@@ -20,6 +20,7 @@ require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
 require('../Text/index.js');
 var isEllipsisActive = require('./isEllipsisActive.js');
+var mergeRefs = require('../../tools/mergeRefs.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -28,7 +29,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const SelectableTag = _ref => {
+const SelectableTag = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   let {
     className,
     disabled,
@@ -54,6 +55,7 @@ const SelectableTag = _ref => {
     setIsEllipsisApplied(isEllipsisActive.isEllipsisActive(newElement));
   }, [prefix, tagRef]);
   const tooltipClasses = cx__default["default"](`${prefix}--icon-tooltip`, `${prefix}--tag-label-tooltip`);
+  const combinedRef = mergeRefs["default"](tagRef, forwardRef);
   const handleClick = e => {
     setSelectedTag(!selectedTag);
     onChange?.(!selectedTag);
@@ -68,7 +70,7 @@ const SelectableTag = _ref => {
       onMouseEnter: () => false
     }, /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
       "aria-pressed": selectedTag !== false,
-      ref: tagRef,
+      ref: combinedRef,
       size: size,
       renderIcon: renderIcon,
       disabled: disabled,
@@ -82,7 +84,7 @@ const SelectableTag = _ref => {
   }
   return /*#__PURE__*/React__default["default"].createElement(Tag["default"], _rollupPluginBabelHelpers["extends"]({
     "aria-pressed": selectedTag !== false,
-    ref: tagRef,
+    ref: combinedRef,
     size: size,
     renderIcon: renderIcon,
     disabled: disabled,
@@ -93,7 +95,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/lib/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/lib/components/TreeView/TreeNode.js

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

package/lib/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.