@carbon/react 1.89.0-rc.1 → 1.90.0-rc.0

package/es/components/FileUploader/FileUploader.d.ts

@@ -5,6 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type HTMLAttributes } from 'react';
+interface FileItem {
+    name: string;
+    uuid: string;
+    file: File;
+}
+export interface FileChangeData {
+    addedFiles: FileItem[];
+    removedFiles: FileItem[];
+    currentFiles: FileItem[];
+    action: 'add' | 'remove' | 'clear';
+}
+export interface FileDeleteData {
+    deletedFile: FileItem;
+    remainingFiles: FileItem[];
+}
 export interface FileUploaderProps extends HTMLAttributes<HTMLSpanElement> {
     /**
      * Specify the types of files that this input should be able to receive
@@ -52,20 +67,23 @@ export interface FileUploaderProps extends HTMLAttributes<HTMLSpanElement> {
      */
     name?: string;
     /**
-     * Provide an optional `onChange` hook that is called each time the input is
-     * changed
+     * Provide an optional `onChange` hook that is called each time the input is changed.
+     * When 'enable-enhanced-file-uploader' feature flag is enabled:
+     * - Also fires for file deletions and clearFiles operations
+     * - Event includes enhanced file information in event.target
      */
-    onChange?: (event: any) => void;
+    onChange?: (event: any, data?: FileChangeData) => void;
     /**
      * Provide an optional `onClick` hook that is called each time the
      * FileUploader is clicked
      */
     onClick?: (event: any) => void;
     /**
-     * Provide an optional `onDelete` hook that is called when an uploaded item
-     * is removed
+     * Provide an optional `onDelete` hook that is called when an uploaded item is removed.
+     * When 'enable-enhanced-file-uploader' feature flag is enabled:
+     * - Event includes deleted file information in event.target
      */
-    onDelete?: (event: any) => void;
+    onDelete?: (event: any, data?: FileDeleteData) => void;
     /**
      * Specify the size of the FileUploaderButton, from a list of available
      * sizes.
@@ -77,6 +95,10 @@ export interface FileUploaderHandle {
      * Clear internal state
      */
     clearFiles: () => void;
+    /**
+     * Get current files (only available when 'enable-enhanced-file-uploader' feature flag is enabled)
+     */
+    getCurrentFiles?: () => FileItem[];
 }
 declare const FileUploader: {
     <ItemType>(props: FileUploaderProps): React.ReactElement<any>;

package/es/components/FileUploader/FileUploader.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useState, useImperativeHandle } from 'react';
+import React, { useState, useCallback, useImperativeHandle } from 'react';
 import Filename from './Filename.js';
 import FileUploaderButton from './FileUploaderButton.js';
 import { ButtonKinds } from '../Button/Button.js';
@@ -17,6 +17,7 @@ import { matches } from '../../internal/keyboard/match.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../Text/index.js';
 import { useId } from '../../internal/useId.js';
+import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { Text } from '../Text/Text.js';
 
 const FileUploader = /*#__PURE__*/React.forwardRef(({
@@ -38,45 +39,149 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
   ...other
 }, ref) => {
   const fileUploaderInstanceId = useId('file-uploader');
-  const [state, updateState] = useState({
-    fileNames: []
-  });
-  const nodes = [];
   const prefix = usePrefix();
-  const handleChange = evt => {
+  const enhancedFileUploaderEnabled = useFeatureFlag('enable-enhanced-file-uploader');
+  const [fileItems, setFileItems] = useState([]);
+  const [legacyFileNames, setLegacyFileNames] = useState([]);
+  const [fileObjects, setFileObjects] = useState(new Map());
+  const nodes = [];
+  const createFileItem = file => ({
+    name: file.name,
+    uuid: `${fileUploaderInstanceId}-${Date.now()}-${Array.from(crypto.getRandomValues(new Uint8Array(8))).map(b => b.toString(36)).join('')}`,
+    file
+  });
+  const handleChange = useCallback(evt => {
     evt.stopPropagation();
-    const filenames = Array.prototype.map.call(evt.target.files, file => file.name);
-    updateState(prevState => ({
-      fileNames: multiple ? [...new Set([...prevState.fileNames, ...filenames])] : filenames
-    }));
-    if (onChange) {
-      onChange(evt);
+    const newFiles = Array.from(evt.target.files);
+    if (enhancedFileUploaderEnabled) {
+      const newFileItems = newFiles.map(createFileItem);
+      let updatedFileItems;
+      if (multiple) {
+        const existingNames = new Set(fileItems.map(item => item.name));
+        const uniqueNewItems = newFileItems.filter(item => !existingNames.has(item.name));
+        updatedFileItems = [...fileItems, ...uniqueNewItems];
+      } else {
+        updatedFileItems = newFileItems;
+      }
+      setFileItems(updatedFileItems);
+      if (onChange) {
+        const allFiles = updatedFileItems.map(item => item.file);
+        const enhancedEvent = {
+          ...evt,
+          target: {
+            ...evt.target,
+            files: Object.assign(allFiles, {
+              item: index => allFiles[index] || null
+            }),
+            addedFiles: newFileItems,
+            currentFiles: updatedFileItems,
+            action: 'add'
+          }
+        };
+        onChange(enhancedEvent);
+      }
+    } else {
+      const filenames = newFiles.map(file => file.name);
+      const updatedFileNames = multiple ? [...new Set([...legacyFileNames, ...filenames])] : filenames;
+      setLegacyFileNames(updatedFileNames);
+      setFileObjects(prevMap => {
+        const newMap = multiple ? new Map(prevMap) : new Map();
+        newFiles.forEach(file => {
+          newMap.set(file.name, file);
+        });
+        return newMap;
+      });
+      if (onChange) {
+        onChange(evt);
+      }
     }
-  };
-  const handleClick = (evt, {
+  }, [enhancedFileUploaderEnabled, fileItems, legacyFileNames, multiple, onChange]);
+  const handleClick = useCallback((evt, {
     index,
     filenameStatus
   }) => {
     if (filenameStatus === 'edit') {
       evt.stopPropagation();
-      const filteredArray = state.fileNames.filter(filename => filename !== nodes[index]?.innerText?.trim());
-      updateState({
-        fileNames: filteredArray
-      });
-      if (onDelete) {
-        onDelete(evt);
-        uploaderButton.current?.focus?.();
+      if (enhancedFileUploaderEnabled) {
+        const deletedItem = fileItems[index];
+        if (!deletedItem) return;
+        const remainingItems = fileItems.filter((_, i) => i !== index);
+        setFileItems(remainingItems);
+        const remainingFiles = remainingItems.map(item => item.file);
+        const enhancedEvent = {
+          ...evt,
+          target: {
+            ...evt.target,
+            files: Object.assign(remainingFiles, {
+              item: index => remainingFiles[index] || null
+            }),
+            deletedFile: deletedItem,
+            deletedFileName: deletedItem.name,
+            remainingFiles: remainingItems,
+            currentFiles: remainingItems,
+            action: 'remove'
+          }
+        };
+        if (onDelete) {
+          onDelete(enhancedEvent);
+        }
+        if (onChange) {
+          onChange(enhancedEvent);
+        }
+      } else {
+        const deletedFileName = legacyFileNames[index];
+        const filteredArray = legacyFileNames.filter(filename => filename !== deletedFileName);
+        setLegacyFileNames(filteredArray);
+
+        // Update File objects
+        setFileObjects(prevMap => {
+          const newMap = new Map(prevMap);
+          if (deletedFileName) {
+            newMap.delete(deletedFileName);
+          }
+          return newMap;
+        });
+        if (onDelete) {
+          onDelete(evt);
+        }
+      }
+      if (onClick) {
+        onClick(evt);
       }
-      onClick?.(evt);
+      uploaderButton.current?.focus?.();
     }
-  };
+  }, [enhancedFileUploaderEnabled, fileItems, legacyFileNames, onDelete, onChange, onClick]);
   useImperativeHandle(ref, () => ({
     clearFiles() {
-      updateState({
-        fileNames: []
-      });
-    }
-  }));
+      if (enhancedFileUploaderEnabled) {
+        const previousItems = [...fileItems];
+        setFileItems([]);
+        if (onChange && previousItems.length > 0) {
+          const enhancedEvent = {
+            target: {
+              files: Object.assign([], {
+                item: () => null
+              }),
+              clearedFiles: previousItems,
+              currentFiles: [],
+              action: 'clear'
+            },
+            preventDefault: () => {},
+            stopPropagation: () => {}
+          };
+          onChange(enhancedEvent);
+        }
+      } else {
+        setLegacyFileNames([]);
+        setFileObjects(new Map());
+      }
+    },
+    ...(enhancedFileUploaderEnabled && {
+      getCurrentFiles() {
+        return [...fileItems];
+      }
+    })
+  }), [enhancedFileUploaderEnabled, fileItems, onChange]);
   const uploaderButton = /*#__PURE__*/React.createRef();
   const classes = cx({
     [`${prefix}--form-item`]: true,
@@ -89,6 +194,15 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
     [`${prefix}--file__selected-file--md`]: size === 'field' || size === 'md',
     [`${prefix}--file__selected-file--sm`]: size === 'small' || size === 'sm'
   });
+  const displayFiles = enhancedFileUploaderEnabled ? fileItems.map((item, index) => ({
+    name: item.name,
+    key: item.uuid,
+    index
+  })) : legacyFileNames.map((name, index) => ({
+    name,
+    key: index,
+    index
+  }));
   return /*#__PURE__*/React.createElement("div", _extends({
     className: classes
   }, other), !labelTitle ? null : /*#__PURE__*/React.createElement(Text, {
@@ -112,32 +226,32 @@ const FileUploader = /*#__PURE__*/React.forwardRef(({
     "aria-describedby": fileUploaderInstanceId
   }), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--file-container`
-  }, state.fileNames.length === 0 ? null : state.fileNames.map((name, index) => /*#__PURE__*/React.createElement("span", _extends({
-    key: index,
+  }, displayFiles.length === 0 ? null : displayFiles.map(file => /*#__PURE__*/React.createElement("span", _extends({
+    key: file.key,
     className: selectedFileClasses,
     ref: node => {
-      nodes[index] = node;
-    } // eslint-disable-line
+      nodes[file.index] = node;
+    }
   }, other), /*#__PURE__*/React.createElement(Text, {
     as: "p",
     className: `${prefix}--file-filename`,
-    id: name
-  }, name), /*#__PURE__*/React.createElement("span", {
+    id: enhancedFileUploaderEnabled ? `${fileUploaderInstanceId}-file-${fileItems[file.index]?.uuid || file.index}` : `${fileUploaderInstanceId}-file-${file.index}`
+  }, file.name), /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--file__state-container`
   }, /*#__PURE__*/React.createElement(Filename, {
-    name: name,
+    name: file.name,
     iconDescription: iconDescription,
     status: filenameStatus,
     onKeyDown: evt => {
       if (matches(evt, [Enter, Space])) {
         handleClick(evt, {
-          index,
+          index: file.index,
           filenameStatus
         });
       }
     },
     onClick: evt => handleClick(evt, {
-      index,
+      index: file.index,
       filenameStatus
     })
   }))))));
@@ -207,7 +321,7 @@ FileUploader.propTypes = {
    * Specify the size of the FileUploaderButton, from a list of available
    * sizes.
    */
-  size: PropTypes.oneOf(['sm', 'md', 'lg'])
+  size: PropTypes.oneOf(['sm', 'small', 'md', 'field', 'lg'])
 };
 
 export { FileUploader as default };

package/es/components/Menu/MenuItem.js

@@ -49,7 +49,8 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem({
     middleware: [offset({
       mainAxis: -6,
       crossAxis: -6
-    })]
+    })],
+    strategy: 'fixed'
   });
   const {
     getReferenceProps,

package/es/components/Modal/Modal.js

@@ -30,7 +30,7 @@ import '../Text/index.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 { Dialog } from '../Dialog/Dialog.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
 import { warning } from '../../internal/warning.js';
@@ -38,7 +38,7 @@ import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/deb
 import { Text } from '../Text/Text.js';
 
 const ModalSizes = ['xs', 'sm', 'md', 'lg'];
-const invalidOutsideClickMessage = '`Modal`: `preventCloseOnClickOutside` should not be `false` when `passiveModal` is `false`. Non-passive `Modal`s should not be dismissible by clicking outside.';
+const invalidOutsideClickMessage = '`<Modal>` prop `preventCloseOnClickOutside` should not be `false` when ' + '`passiveModal` is `false`. Transactional, non-passive Modals should ' + 'not be dissmissable by clicking outside. ' + 'See: https://carbondesignsystem.com/components/modal/usage/#transactional-modal';
 const Modal = /*#__PURE__*/React.forwardRef(function Modal({
   'aria-label': ariaLabelProp,
   children,
@@ -64,7 +64,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
   size,
   hasScrollingContent = false,
   closeButtonLabel = 'Close',
-  preventCloseOnClickOutside = !passiveModal,
+  preventCloseOnClickOutside,
   isFullWidth,
   launcherButtonRef,
   loadingStatus = 'inactive',
@@ -96,9 +96,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
   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;
-  if (!passiveModal && preventCloseOnClickOutside === false) {
-    console.error(invalidOutsideClickMessage);
-  }
+  process.env.NODE_ENV !== "production" ? warning(!(!passiveModal && preventCloseOnClickOutside === false), invalidOutsideClickMessage) : void 0;
   function isCloseButton(element) {
     return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
   }
@@ -125,7 +123,15 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
       target
     } = evt;
     evt.stopPropagation();
-    if (!preventCloseOnClickOutside && target instanceof Node && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
+    const shouldCloseOnOutsideClick =
+    // Passive modals can close on clicks outside the modal when
+    // preventCloseOnClickOutside is undefined or explicitly set to false.
+    passiveModal && !preventCloseOnClickOutside ||
+    // Non-passive modals have to explicitly opt-in for close on outside
+    // behavior by explicitly setting preventCloseOnClickOutside to false,
+    // rather than just leaving it undefined.
+    !passiveModal && preventCloseOnClickOutside === false;
+    if (shouldCloseOnOutsideClick && target instanceof Node && !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
       onRequestClose(evt);
     }
   }
@@ -314,7 +320,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
   // alertdialog is the only permitted aria role for a native dialog element
   // https://www.w3.org/TR/html-aria/#docconformance:~:text=Role%3A-,alertdialog,-.%20(dialog%20is
   const isAlertDialog = alert && !passiveModal;
-  const modalBody = enableDialogElement ? /*#__PURE__*/React.createElement(unstable__Dialog, {
+  const modalBody = enableDialogElement ? /*#__PURE__*/React.createElement(Dialog, {
     open: open,
     focusAfterCloseRef: launcherButtonRef,
     modal: true,

package/es/components/NumberInput/NumberInput.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { Subtract, Add } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useContext, useState, useMemo, useCallback, useRef, cloneElement, useEffect } from 'react';
+import React, { useContext, useState, useMemo, useCallback, useRef, useEffect, cloneElement } from 'react';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -173,11 +173,16 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
     [`${prefix}--number__invalid`]: normalizedProps.invalid || normalizedProps.warn,
     [`${prefix}--number__invalid--warning`]: normalizedProps.warn
   });
-  if (controlledValue !== prevControlledValue && !(isNaN(Number(controlledValue)) === isNaN(Number(prevControlledValue)))) {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    setValue(controlledValue);
-    setPrevControlledValue(controlledValue);
-  }
+  useEffect(() => {
+    if (type === 'number' && controlledValue !== undefined) {
+      if (allowEmpty && controlledValue === '') {
+        setValue('');
+      } else {
+        setValue(controlledValue);
+      }
+      setPrevControlledValue(controlledValue);
+    }
+  }, [controlledValue, type, allowEmpty]);
   let ariaDescribedBy = undefined;
   if (normalizedProps.invalid) {
     ariaDescribedBy = normalizedProps.invalidId;

package/es/components/Popover/index.js

@@ -61,8 +61,12 @@ forwardRef) {
   // The `Popover` should close whenever it and its children loses focus
   useEvent(popover, 'focusout', event => {
     const relatedTarget = event.relatedTarget;
-
-    // No relatedTarget, focus moved to nowhere, so close the popover
+    if (isTabTip) {
+      if (relatedTarget && !popover.current?.contains(relatedTarget)) {
+        onRequestClose?.();
+      }
+      return;
+    }
     if (!relatedTarget) {
       onRequestClose?.();
       return;

package/es/components/StructuredList/StructuredList.js

@@ -189,8 +189,10 @@ function StructuredListRow(props) {
         setHasFocusWithin(true);
       }
     },
-    onFocus: () => {
-      setHasFocusWithin(true);
+    onFocus: event => {
+      if (selection || event.currentTarget === event.target) {
+        setHasFocusWithin(true);
+      }
     },
     onBlur: () => {
       setHasFocusWithin(false);

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

@@ -7,6 +7,7 @@
 import React, { type ReactNode } from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { SIZES, TYPES } from './Tag';
+import { PopoverAlignment } from '../Popover';
 export interface DismissibleTagBaseProps {
     /**
      * Provide a custom className that is applied to the containing <span>
@@ -20,6 +21,10 @@ export interface DismissibleTagBaseProps {
      * Specify if the `DismissibleTag` is disabled
      */
     disabled?: boolean;
+    /**
+     * Specify the tooltip alignment for the dismiss button
+     */
+    dismissTooltipAlignment?: PopoverAlignment;
     /**
      * Provide a custom tooltip label for the dismiss button
      */

package/es/components/Tag/DismissibleTag.js

@@ -37,6 +37,7 @@ const DismissibleTag = /*#__PURE__*/forwardRef(({
   text,
   tagTitle,
   type,
+  dismissTooltipAlignment = 'bottom',
   dismissTooltipLabel = 'Dismiss tag',
   ...other
 }, forwardRef) => {
@@ -88,7 +89,7 @@ const DismissibleTag = /*#__PURE__*/forwardRef(({
     className: `${prefix}--tag__decorator`
   }, normalizedDecorator) : '', /*#__PURE__*/React.createElement(Tooltip, {
     label: dismissActionLabel,
-    align: "bottom",
+    align: dismissTooltipAlignment,
     className: tooltipClasses,
     leaveDelayMs: 0,
     closeOnActivation: true
@@ -113,6 +114,10 @@ DismissibleTag.propTypes = {
    * Specify if the `DismissibleTag` is disabled
    */
   disabled: PropTypes.bool,
+  /**
+   * Specify the tooltip alignment for the dismiss button
+   */
+  dismissTooltipAlignment: PropTypes.oneOf(['top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
   /**
    * Provide a custom tooltip label for the dismiss button
    */

package/es/components/Toggletip/index.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useContext, useRef, useState } from 'react';
+import React, { useContext, useRef, useState, useEffect } from 'react';
 import { Popover, PopoverContent } from '../Popover/index.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
@@ -100,6 +100,7 @@ function Toggletip({
   };
   const onKeyDown = event => {
     if (open && match(event, Escape)) {
+      event.stopPropagation();
       actions.close();
 
       // If the menu is closed while focus is still inside the menu, it should return to the trigger button  (#12922)
@@ -126,13 +127,24 @@ function Toggletip({
       actions.close();
     }
   });
-  useWindowEvent('click', ({
-    target
-  }) => {
-    if (open && target instanceof Node && !ref.current?.contains(target)) {
-      actions.close();
-    }
-  });
+  useEffect(() => {
+    if (!ref.current) return;
+    const targetDocument = ref.current.ownerDocument || document;
+    const eventType = 'PointerEvent' in window ? 'pointerdown' : 'mousedown';
+    const handleOutsideClick = event => {
+      const node = event.target;
+      if (open && node && !ref.current.contains(node)) {
+        setOpen(false);
+      }
+    };
+    const options = {
+      capture: true
+    };
+    targetDocument.addEventListener(eventType, handleOutsideClick, options);
+    return () => {
+      targetDocument.removeEventListener(eventType, handleOutsideClick, options);
+    };
+  }, [open]);
   return /*#__PURE__*/React.createElement(ToggletipContext.Provider, {
     value: value
   }, /*#__PURE__*/React.createElement(Popover, _extends({

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

@@ -11,6 +11,9 @@ export type TreeNodeProps = {
     /**
      * **Note:** this is controlled by the parent TreeView component, do not set manually.
      * The ID of the active node in the tree
+     *
+     * @deprecated The `active` prop for `TreeNode` has
+     * been deprecated after the introduction of context. It will be removed in the next major release.
      */
     active?: string | number;
     /**
@@ -29,6 +32,9 @@ export type TreeNodeProps = {
     /**
      * **Note:** this is controlled by the parent TreeView component, do not set manually.
      * TreeNode depth to determine spacing
+     *
+     * @deprecated The `depth` prop for `TreeNode` has
+     * been deprecated after the introduction of context. It will be removed in the next major release.
      */
     depth?: number;
     /**
@@ -49,6 +55,9 @@ export type TreeNodeProps = {
     label: React.ReactNode;
     /**
      * Callback function for when the node receives or loses focus
+     *
+     * @deprecated The `onNodeFocusEvent` prop for `TreeNode` has
+     * been deprecated after the introduction of context. It will be removed in the next major release.
      */
     onNodeFocusEvent?: (event: React.FocusEvent<HTMLElement>) => void;
     /**
@@ -61,6 +70,9 @@ export type TreeNodeProps = {
     onToggle?: UncontrolledOnToggle | ControlledOnToggle;
     /**
      * Callback function for when any node in the tree is selected
+     *
+     * @deprecated The `onTreeSelect` prop for `TreeNode` has
+     * been deprecated after the introduction of context. It will be removed in the next major release.
      */
     onTreeSelect?: (event: React.MouseEvent | React.KeyboardEvent, node: Pick<TreeNodeProps, 'id' | 'label' | 'value'>) => void;
     /**
@@ -70,6 +82,8 @@ export type TreeNodeProps = {
     /**
      * **Note:** this is controlled by the parent TreeView component, do not set manually.
      * Array containing all selected node IDs in the tree
+     * @deprecated The `selected` prop for `TreeNode` has
+     * been deprecated after the introduction of context. It will be removed in the next major release.
      */
     selected?: Array<string | number>;
     /**
@@ -97,6 +111,9 @@ declare const TreeNode: React.ForwardRefExoticComponent<{
     /**
      * **Note:** this is controlled by the parent TreeView component, do not set manually.
      * The ID of the active node in the tree
+     *
+     * @deprecated The `active` prop for `TreeNode` has
+     * been deprecated after the introduction of context. It will be removed in the next major release.
      */
     active?: string | number;
     /**
@@ -115,6 +132,9 @@ declare const TreeNode: React.ForwardRefExoticComponent<{
     /**
      * **Note:** this is controlled by the parent TreeView component, do not set manually.
      * TreeNode depth to determine spacing
+     *
+     * @deprecated The `depth` prop for `TreeNode` has
+     * been deprecated after the introduction of context. It will be removed in the next major release.
      */
     depth?: number;
     /**
@@ -135,6 +155,9 @@ declare const TreeNode: React.ForwardRefExoticComponent<{
     label: React.ReactNode;
     /**
      * Callback function for when the node receives or loses focus
+     *
+     * @deprecated The `onNodeFocusEvent` prop for `TreeNode` has
+     * been deprecated after the introduction of context. It will be removed in the next major release.
      */
     onNodeFocusEvent?: (event: React.FocusEvent<HTMLElement>) => void;
     /**
@@ -147,6 +170,9 @@ declare const TreeNode: React.ForwardRefExoticComponent<{
     onToggle?: UncontrolledOnToggle | ControlledOnToggle;
     /**
      * Callback function for when any node in the tree is selected
+     *
+     * @deprecated The `onTreeSelect` prop for `TreeNode` has
+     * been deprecated after the introduction of context. It will be removed in the next major release.
      */
     onTreeSelect?: (event: React.MouseEvent | React.KeyboardEvent, node: Pick<TreeNodeProps, "id" | "label" | "value">) => void;
     /**
@@ -156,6 +182,8 @@ declare const TreeNode: React.ForwardRefExoticComponent<{
     /**
      * **Note:** this is controlled by the parent TreeView component, do not set manually.
      * Array containing all selected node IDs in the tree
+     * @deprecated The `selected` prop for `TreeNode` has
+     * been deprecated after the introduction of context. It will be removed in the next major release.
      */
     selected?: Array<string | number>;
     /**