@mui/x-tree-view 7.12.1 → 7.14.0

package/useTreeItem2/useTreeItem2.js

@@ -5,6 +5,7 @@ import useForkRef from '@mui/utils/useForkRef';
 import { useTreeViewContext } from '../internals/TreeViewProvider';
 import { useTreeItem2Utils } from '../hooks/useTreeItem2Utils';
 import { TreeViewItemDepthContext } from '../internals/TreeViewItemDepthContext';
+import { isTargetInDescendants } from '../internals/utils/tree';
 export const useTreeItem2 = parameters => {
   const {
     runItemPlugins,
@@ -50,6 +51,7 @@ export const useTreeItem2 = parameters => {
   const handleRootRef = useForkRef(rootRef, pluginRootRef, rootRefObject);
   const handleContentRef = useForkRef(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
+  const rootTabIndex = instance.canItemBeTabbed(itemId) ? 0 : -1;
   const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
     if (event.defaultMuiPrevented) {
@@ -65,15 +67,33 @@ export const useTreeItem2 = parameters => {
     if (event.defaultMuiPrevented) {
       return;
     }
+    const rootElement = instance.getItemDOMElement(itemId);
+
+    // Don't blur the root when switching to editing mode
+    // the input that triggers the root blur can be either the relatedTarget (when entering editing state) or the target (when exiting editing state)
+    // when we enter the editing state, we focus the input -> we don't want to remove the focused item from the state
+    if (status.editing ||
+    // we can exit the editing state by clicking outside the input (within the tree item) or by pressing Enter or Escape -> we don't want to remove the focused item from the state in these cases
+    // we can also exit the editing state by clicking on the root itself -> want to remove the focused item from the state in this case
+    event.relatedTarget && isTargetInDescendants(event.relatedTarget, rootElement) && (event.target && event.target?.dataset?.element === 'labelInput' && isTargetInDescendants(event.target, rootElement) || event.relatedTarget?.dataset?.element === 'labelInput')) {
+      return;
+    }
     instance.removeFocusedItem();
   };
   const createRootHandleKeyDown = otherHandlers => event => {
     otherHandlers.onKeyDown?.(event);
-    if (event.defaultMuiPrevented) {
+    if (event.defaultMuiPrevented || event.target?.dataset?.element === 'labelInput') {
       return;
     }
     instance.handleItemKeyDown(event, itemId);
   };
+  const createLabelHandleDoubleClick = otherHandlers => event => {
+    otherHandlers.onDoubleClick?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    interactions.toggleItemEditing();
+  };
   const createContentHandleClick = otherHandlers => event => {
     otherHandlers.onClick?.(event);
     onItemClick?.(event, itemId);
@@ -108,6 +128,27 @@ export const useTreeItem2 = parameters => {
     }
     interactions.handleCheckboxSelection(event);
   };
+  const createInputHandleKeydown = otherHandlers => event => {
+    otherHandlers.onKeyDown?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    const target = event.target;
+    if (event.key === 'Enter' && target.value) {
+      interactions.handleSaveItemLabel(event, target.value);
+    } else if (event.key === 'Escape') {
+      interactions.handleCancelItemLabelEditing(event);
+    }
+  };
+  const createInputHandleBlur = otherHandlers => event => {
+    otherHandlers.onBlur?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    if (event.target.value) {
+      interactions.handleSaveItemLabel(event, event.target.value);
+    }
+  };
   const createIconContainerHandleClick = otherHandlers => event => {
     otherHandlers.onClick?.(event);
     if (event.defaultMuiPrevented) {
@@ -134,7 +175,7 @@ export const useTreeItem2 = parameters => {
     const props = _extends({}, externalEventHandlers, {
       ref: handleRootRef,
       role: 'treeitem',
-      tabIndex: instance.canItemBeTabbed(itemId) ? 0 : -1,
+      tabIndex: rootTabIndex,
       id: idAttribute,
       'aria-expanded': status.expandable ? status.expanded : undefined,
       'aria-selected': ariaSelected,
@@ -188,9 +229,28 @@ export const useTreeItem2 = parameters => {
   };
   const getLabelProps = (externalProps = {}) => {
     const externalEventHandlers = _extends({}, extractEventHandlers(externalProps));
-    return _extends({}, externalEventHandlers, {
+    const props = _extends({}, externalEventHandlers, {
       children: label
-    }, externalProps);
+    }, externalProps, {
+      onDoubleClick: createLabelHandleDoubleClick(externalEventHandlers)
+    });
+    if (instance.isTreeViewEditable) {
+      props.editable = status.editable;
+    }
+    return props;
+  };
+  const getLabelInputProps = (externalProps = {}) => {
+    const externalEventHandlers = extractEventHandlers(externalProps);
+    const props = _extends({}, externalEventHandlers, externalProps, {
+      onKeyDown: createInputHandleKeydown(externalEventHandlers),
+      onBlur: createInputHandleBlur(externalEventHandlers)
+    });
+    const enhancedlabelInputProps = propsEnhancers.labelInput?.({
+      rootRefObject,
+      contentRefObject,
+      externalEventHandlers
+    }) ?? {};
+    return _extends({}, props, enhancedlabelInputProps);
   };
   const getIconContainerProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);
@@ -228,6 +288,7 @@ export const useTreeItem2 = parameters => {
     getIconContainerProps,
     getCheckboxProps,
     getLabelProps,
+    getLabelInputProps,
     getDragAndDropOverlayProps,
     rootRef: handleRootRef,
     status,

package/useTreeItem2/useTreeItem2.types.d.ts

@@ -5,6 +5,7 @@ import { UseTreeViewSelectionSignature } from '../internals/plugins/useTreeViewS
 import { UseTreeViewItemsSignature } from '../internals/plugins/useTreeViewItems';
 import { UseTreeViewFocusSignature } from '../internals/plugins/useTreeViewFocus';
 import { UseTreeViewKeyboardNavigationSignature } from '../internals/plugins/useTreeViewKeyboardNavigation';
+import { UseTreeViewLabelSignature } from '../internals/plugins/useTreeViewLabel';
 import { UseTreeViewExpansionSignature } from '../internals/plugins/useTreeViewExpansion';
 export interface UseTreeItem2Parameters {
     /**
@@ -69,8 +70,18 @@ export interface UseTreeItem2IconContainerSlotOwnProps {
 export type UseTreeItemIconContainerSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2IconContainerSlotOwnProps;
 export interface UseTreeItem2LabelSlotOwnProps {
     children: React.ReactNode;
+    onDoubleClick: MuiCancellableEventHandler<React.MouseEvent>;
+    /**
+     * Only defined when the `isItemEditable` experimental feature is enabled.
+     */
+    editable?: boolean;
 }
 export type UseTreeItem2LabelSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2LabelSlotOwnProps;
+export type UseTreeItem2LabelInputSlotOwnProps = {
+    onBlur: MuiCancellableEventHandler<React.FocusEvent<HTMLInputElement>>;
+    onKeyDown: MuiCancellableEventHandler<React.KeyboardEvent<HTMLInputElement>>;
+};
+export type UseTreeItem2LabelInputSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2LabelInputSlotOwnProps;
 export interface UseTreeItem2CheckboxSlotOwnProps {
     visible: boolean;
     checked: boolean;
@@ -101,49 +112,57 @@ export interface UseTreeItem2Status {
     focused: boolean;
     selected: boolean;
     disabled: boolean;
+    editing: boolean;
+    editable: boolean;
 }
 export interface UseTreeItem2ReturnValue<TSignatures extends UseTreeItem2MinimalPlugins, TOptionalSignatures extends UseTreeItem2OptionalPlugins> {
     /**
      * Resolver for the root slot's props.
-     * @param {ExternalProps} externalProps Additional props for the root slot
-     * @returns {UseTreeItem2RootSlotProps<ExternalProps>} Props that should be spread on the root slot
+     * @param {ExternalProps} externalProps Additional props for the root slot.
+     * @returns {UseTreeItem2RootSlotProps<ExternalProps>} Props that should be spread on the root slot.
      */
     getRootProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItem2RootSlotProps<ExternalProps>;
     /**
      * Resolver for the content slot's props.
-     * @param {ExternalProps} externalProps Additional props for the content slot
-     * @returns {UseTreeItem2ContentSlotProps<ExternalProps>} Props that should be spread on the content slot
+     * @param {ExternalProps} externalProps Additional props for the content slot.
+     * @returns {UseTreeItem2ContentSlotProps<ExternalProps>} Props that should be spread on the content slot.
      */
     getContentProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItem2ContentSlotProps<ExternalProps>;
     /**
      * Resolver for the label slot's props.
-     * @param {ExternalProps} externalProps Additional props for the label slot
-     * @returns {UseTreeItem2LabelSlotProps<ExternalProps>} Props that should be spread on the label slot
+     * @param {ExternalProps} externalProps Additional props for the label slot.
+     * @returns {UseTreeItem2LabelSlotProps<ExternalProps>} Props that should be spread on the label slot.
      */
     getLabelProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItem2LabelSlotProps<ExternalProps>;
+    /**
+     * Resolver for the labelInput slot's props.
+     * @param {ExternalProps} externalProps Additional props for the labelInput slot.
+     * @returns {UseTreeItem2LabelInputSlotProps<ExternalProps>} Props that should be spread on the labelInput slot.
+     */
+    getLabelInputProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItem2LabelInputSlotProps<ExternalProps>;
     /**
      * Resolver for the checkbox slot's props.
-     * @param {ExternalProps} externalProps Additional props for the checkbox slot
-     * @returns {UseTreeItem2CheckboxSlotProps<ExternalProps>} Props that should be spread on the checkbox slot
+     * @param {ExternalProps} externalProps Additional props for the checkbox slot.
+     * @returns {UseTreeItem2CheckboxSlotProps<ExternalProps>} Props that should be spread on the checkbox slot.
      */
     getCheckboxProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItem2CheckboxSlotProps<ExternalProps>;
     /**
      * Resolver for the iconContainer slot's props.
-     * @param {ExternalProps} externalProps Additional props for the iconContainer slot
-     * @returns {UseTreeItemIconContainerSlotProps<ExternalProps>} Props that should be spread on the iconContainer slot
+     * @param {ExternalProps} externalProps Additional props for the iconContainer slot.
+     * @returns {UseTreeItemIconContainerSlotProps<ExternalProps>} Props that should be spread on the iconContainer slot.
      */
     getIconContainerProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItemIconContainerSlotProps<ExternalProps>;
     /**
      * Resolver for the GroupTransition slot's props.
-     * @param {ExternalProps} externalProps Additional props for the GroupTransition slot
-     * @returns {UseTreeItem2GroupTransitionSlotProps<ExternalProps>} Props that should be spread on the GroupTransition slot
+     * @param {ExternalProps} externalProps Additional props for the GroupTransition slot.
+     * @returns {UseTreeItem2GroupTransitionSlotProps<ExternalProps>} Props that should be spread on the GroupTransition slot.
      */
     getGroupTransitionProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItem2GroupTransitionSlotProps<ExternalProps>;
     /**
      * Resolver for the DragAndDropOverlay slot's props.
      * Warning: This slot is only useful when using the `RichTreeViewPro` component.
-     * @param {ExternalProps} externalProps Additional props for the DragAndDropOverlay slot
-     * @returns {UseTreeItem2DragAndDropOverlaySlotProps<ExternalProps>} Props that should be spread on the DragAndDropOverlay slot
+     * @param {ExternalProps} externalProps Additional props for the DragAndDropOverlay slot.
+     * @returns {UseTreeItem2DragAndDropOverlaySlotProps<ExternalProps>} Props that should be spread on the DragAndDropOverlay slot.
      */
     getDragAndDropOverlayProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItem2DragAndDropOverlaySlotProps<ExternalProps>;
     /**
@@ -167,7 +186,8 @@ export type UseTreeItem2MinimalPlugins = readonly [
     UseTreeViewExpansionSignature,
     UseTreeViewItemsSignature,
     UseTreeViewFocusSignature,
-    UseTreeViewKeyboardNavigationSignature
+    UseTreeViewKeyboardNavigationSignature,
+    UseTreeViewLabelSignature
 ];
 /**
  * Plugins that `useTreeItem2` can use if they are present, but are not required.