@carbon/react 1.80.0-rc.0 → 1.80.0

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/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 };

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;