@carbon/react 1.80.0-rc.0 → 1.80.0

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

package/lib/components/TreeView/TreeView.js

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

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

@@ -9,75 +9,43 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
-var PropTypes = require('prop-types');
 var React = require('react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-/**
- * Generic component used for reacting to a click event happening outside of a
- * given `children` element.
- */
-class ClickListener extends React__default["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 = React.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') {
+  };
+  React.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["default"].cloneElement(this.props.children, {
-      ref: this.handleRef
-    });
-  }
-}
-_rollupPluginBabelHelpers.defineProperty(ClickListener, "propTypes", {
-  children: PropTypes__default["default"].element.isRequired,
-  onClickOutside: PropTypes__default["default"].func.isRequired
-});
+  };
+  return /*#__PURE__*/React.cloneElement(children, {
+    ref: handleRef
+  });
+};
 
-exports["default"] = ClickListener;
+exports.ClickListener = ClickListener;

package/lib/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 {};