@mui/x-tree-view 7.12.1 → 7.14.0

package/TreeItem2/TreeItem2.js

@@ -18,6 +18,7 @@ import { getTreeItemUtilityClass } from '../TreeItem';
 import { TreeItem2Icon } from '../TreeItem2Icon';
 import { TreeItem2DragAndDropOverlay } from '../TreeItem2DragAndDropOverlay';
 import { TreeItem2Provider } from '../TreeItem2Provider';
+import { TreeItem2LabelInput } from '../TreeItem2LabelInput';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiTreeItem2');
 export const TreeItem2Root = styled('li', {
@@ -104,7 +105,8 @@ export const TreeItem2Content = styled('div', {
 export const TreeItem2Label = styled('div', {
   name: 'MuiTreeItem2',
   slot: 'Label',
-  overridesResolver: (props, styles) => styles.label
+  overridesResolver: (props, styles) => styles.label,
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'editable'
 })(({
   theme
 }) => _extends({
@@ -113,8 +115,18 @@ export const TreeItem2Label = styled('div', {
   // prevent width + padding to overflow
   // fixes overflow - see https://github.com/mui/material-ui/issues/27372
   minWidth: 0,
-  position: 'relative'
-}, theme.typography.body1));
+  position: 'relative',
+  overflow: 'hidden'
+}, theme.typography.body1, {
+  variants: [{
+    props: ({
+      editable
+    }) => editable,
+    style: {
+      paddingLeft: '2px'
+    }
+  }]
+}));
 export const TreeItem2IconContainer = styled('div', {
   name: 'MuiTreeItem2',
   slot: 'IconContainer',
@@ -172,6 +184,8 @@ const useUtilityClasses = ownerState => {
     root: ['root'],
     content: ['content'],
     expanded: ['expanded'],
+    editing: ['editing'],
+    editable: ['editable'],
     selected: ['selected'],
     focused: ['focused'],
     disabled: ['disabled'],
@@ -179,6 +193,7 @@ const useUtilityClasses = ownerState => {
     checkbox: ['checkbox'],
     label: ['label'],
     groupTransition: ['groupTransition'],
+    labelInput: ['labelInput'],
     dragAndDropOverlay: ['dragAndDropOverlay']
   };
   return composeClasses(slots, getTreeItemUtilityClass, classes);
@@ -215,6 +230,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
     getCheckboxProps,
     getLabelProps,
     getGroupTransitionProps,
+    getLabelInputProps,
     getDragAndDropOverlayProps,
     status
   } = useTreeItem2({
@@ -244,7 +260,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
     getSlotProps: getContentProps,
     externalSlotProps: slotProps.content,
     ownerState: {},
-    className: clsx(classes.content, status.expanded && classes.expanded, status.selected && classes.selected, status.focused && classes.focused, status.disabled && classes.disabled)
+    className: clsx(classes.content, status.expanded && classes.expanded, status.selected && classes.selected, status.focused && classes.focused, status.disabled && classes.disabled, status.editing && classes.editing, status.editable && classes.editable)
   });
   const IconContainer = slots.iconContainer ?? TreeItem2IconContainer;
   const iconContainerProps = useSlotProps({
@@ -278,6 +294,14 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
     ownerState: {},
     className: classes.groupTransition
   });
+  const LabelInput = slots.labelInput ?? TreeItem2LabelInput;
+  const labelInputProps = useSlotProps({
+    elementType: LabelInput,
+    getSlotProps: getLabelInputProps,
+    externalSlotProps: slotProps.labelInput,
+    ownerState: {},
+    className: classes.labelInput
+  });
   const DragAndDropOverlay = slots.dragAndDropOverlay ?? TreeItem2DragAndDropOverlay;
   const dragAndDropOverlayProps = useSlotProps({
     elementType: DragAndDropOverlay,
@@ -296,7 +320,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
             slots: slots,
             slotProps: slotProps
           })
-        })), /*#__PURE__*/_jsx(Checkbox, _extends({}, checkboxProps)), /*#__PURE__*/_jsx(Label, _extends({}, labelProps)), /*#__PURE__*/_jsx(DragAndDropOverlay, _extends({}, dragAndDropOverlayProps))]
+        })), /*#__PURE__*/_jsx(Checkbox, _extends({}, checkboxProps)), status.editing ? /*#__PURE__*/_jsx(LabelInput, _extends({}, labelInputProps)) : /*#__PURE__*/_jsx(Label, _extends({}, labelProps)), /*#__PURE__*/_jsx(DragAndDropOverlay, _extends({}, dragAndDropOverlayProps))]
       })), children && /*#__PURE__*/_jsx(TreeItem2GroupTransition, _extends({
         as: GroupTransition
       }, groupTransitionProps))]

package/TreeItem2/TreeItem2.types.d.ts

@@ -36,6 +36,11 @@ export interface TreeItem2Slots extends TreeItem2IconSlots {
      * @default TreeItem2Label
      */
     label?: React.ElementType;
+    /**
+     * The component that renders the input to edit the label when the item is editable and is currently being edited.
+     * @default TreeItem2LabelInput
+     */
+    labelInput?: React.ElementType;
     /**
      * The component that renders the overlay when an item reordering is ongoing.
      * Warning: This slot is only useful when using the `RichTreeViewPro` component.
@@ -50,6 +55,7 @@ export interface TreeItem2SlotProps extends TreeItem2IconSlotProps {
     iconContainer?: SlotComponentProps<'div', {}, {}>;
     checkbox?: SlotComponentProps<'button', {}, {}>;
     label?: SlotComponentProps<'div', {}, {}>;
+    labelInput?: SlotComponentProps<'input', {}, {}>;
     dragAndDropOverlay?: SlotComponentProps<'div', {}, {}>;
 }
 export interface TreeItem2Props extends Omit<UseTreeItem2Parameters, 'rootRef'>, Omit<React.HTMLAttributes<HTMLLIElement>, 'onFocus'> {

package/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.js

@@ -35,9 +35,9 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', {
     style: _extends({
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
       borderTop: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`
-    }, theme.palette.mode === 'dark' && {
-      borderTop: `1px solid ${alpha((theme.vars || theme).palette.grey[100], 0.6)}`
-    })
+    }, theme.applyStyles('dark', {
+      borderTopColor: alpha((theme.vars || theme).palette.grey[100], 0.6)
+    }))
   }, {
     props: {
       action: 'reorder-below'
@@ -45,9 +45,9 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', {
     style: _extends({
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
       borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`
-    }, theme.palette.mode === 'dark' && {
-      borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[100], 0.6)}`
-    })
+    }, theme.applyStyles('dark', {
+      borderBottomColor: alpha((theme.vars || theme).palette.grey[100], 0.6)
+    }))
   }, {
     props: {
       action: 'move-to-parent'
@@ -55,9 +55,9 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', {
     style: _extends({
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * calc(var(--TreeView-itemDepth) - 1))',
       borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`
-    }, theme.palette.mode === 'dark' && {
-      borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`
-    })
+    }, theme.applyStyles('dark', {
+      borderBottomColor: alpha((theme.vars || theme).palette.grey[900], 0.6)
+    }))
   }]
 }));
 function TreeItem2DragAndDropOverlay(props) {

package/TreeItem2Icon/TreeItem2Icon.js

@@ -59,6 +59,8 @@ process.env.NODE_ENV !== "production" ? TreeItem2Icon.propTypes = {
   slots: PropTypes.object,
   status: PropTypes.shape({
     disabled: PropTypes.bool.isRequired,
+    editable: PropTypes.bool.isRequired,
+    editing: PropTypes.bool.isRequired,
     expandable: PropTypes.bool.isRequired,
     expanded: PropTypes.bool.isRequired,
     focused: PropTypes.bool.isRequired,

package/TreeItem2LabelInput/TreeItem2LabelInput.d.ts

@@ -0,0 +1,2 @@
+declare const TreeItem2LabelInput: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof import("react").ClassAttributes<HTMLInputElement> | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, {}>;
+export { TreeItem2LabelInput };

package/TreeItem2LabelInput/TreeItem2LabelInput.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { styled } from '../internals/zero-styled';
+const TreeItem2LabelInput = styled('input', {
+  name: 'MuiTreeItem2',
+  slot: 'LabelInput',
+  overridesResolver: (props, styles) => styles.labelInput
+})(({
+  theme
+}) => _extends({}, theme.typography.body1, {
+  width: '100%',
+  backgroundColor: theme.palette.background.paper,
+  borderRadius: theme.shape.borderRadius,
+  border: 'none',
+  padding: '0 2px',
+  boxSizing: 'border-box',
+  '&:focus': {
+    outline: `1px solid ${theme.palette.primary.main}`
+  }
+}));
+export { TreeItem2LabelInput };

package/TreeItem2LabelInput/TreeItem2LabelInput.types.d.ts

@@ -0,0 +1,8 @@
+export interface TreeItem2LabelInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    value?: string;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Used to determine if the target of keydown or blur events is the input and prevent the event from propagating to the root.
+     */
+    'data-element'?: 'labelInput';
+}

package/TreeItem2LabelInput/TreeItem2LabelInput.types.js

@@ -0,0 +1 @@
+export {};

package/TreeItem2LabelInput/index.d.ts

@@ -0,0 +1,2 @@
+export { TreeItem2LabelInput } from './TreeItem2LabelInput';
+export type { TreeItem2LabelInputProps } from './TreeItem2LabelInput.types';

package/TreeItem2LabelInput/index.js

@@ -0,0 +1 @@
+export { TreeItem2LabelInput } from './TreeItem2LabelInput';

package/TreeItem2LabelInput/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/TreeItem2LabelInput/index.js",
+  "types": "./index.d.ts"
+}

package/hooks/useTreeItem2Utils/useTreeItem2Utils.d.ts

@@ -1,9 +1,13 @@
 import * as React from 'react';
+import { UseTreeViewLabelSignature } from '../../internals/plugins/useTreeViewLabel';
 import type { UseTreeItem2Status } from '../../useTreeItem2';
 interface UseTreeItem2Interactions {
     handleExpansion: (event: React.MouseEvent) => void;
     handleSelection: (event: React.MouseEvent) => void;
     handleCheckboxSelection: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    toggleItemEditing: () => void;
+    handleSaveItemLabel: (event: React.SyntheticEvent, label: string) => void;
+    handleCancelItemLabelEditing: (event: React.SyntheticEvent) => void;
 }
 interface UseTreeItem2UtilsReturnValue {
     interactions: UseTreeItem2Interactions;
@@ -12,7 +16,7 @@ interface UseTreeItem2UtilsReturnValue {
 /**
  * Plugins that `useTreeItem2Utils` can use if they are present, but are not required.
  */
-export type UseTreeItem2UtilsOptionalPlugins = readonly [];
+export type UseTreeItem2UtilsOptionalPlugins = readonly [UseTreeViewLabelSignature];
 export declare const useTreeItem2Utils: ({ itemId, children, }: {
     itemId: string;
     children: React.ReactNode;

package/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -1,4 +1,6 @@
 import { useTreeViewContext } from '../../internals/TreeViewProvider';
+import { useTreeViewLabel } from '../../internals/plugins/useTreeViewLabel';
+import { hasPlugin } from '../../internals/utils/plugins';
 const isItemExpandable = reactChildren => {
   if (Array.isArray(reactChildren)) {
     return reactChildren.length > 0 && reactChildren.some(isItemExpandable);
@@ -29,7 +31,9 @@ export const useTreeItem2Utils = ({
     expanded: instance.isItemExpanded(itemId),
     focused: instance.isItemFocused(itemId),
     selected: instance.isItemSelected(itemId),
-    disabled: instance.isItemDisabled(itemId)
+    disabled: instance.isItemDisabled(itemId),
+    editing: instance?.isItemBeingEdited ? instance?.isItemBeingEdited(itemId) : false,
+    editable: instance.isItemEditable ? instance.isItemEditable(itemId) : false
   };
   const handleExpansion = event => {
     if (status.disabled) {
@@ -84,10 +88,49 @@ export const useTreeItem2Utils = ({
       });
     }
   };
+  const toggleItemEditing = () => {
+    if (!hasPlugin(instance, useTreeViewLabel)) {
+      return;
+    }
+    if (instance.isItemEditable(itemId)) {
+      if (instance.isItemBeingEdited(itemId)) {
+        instance.setEditedItemId(null);
+      } else {
+        instance.setEditedItemId(itemId);
+      }
+    }
+  };
+  const handleSaveItemLabel = (event, label) => {
+    if (!hasPlugin(instance, useTreeViewLabel)) {
+      return;
+    }
+
+    // As a side effect of `instance.focusItem` called here and in `handleCancelItemLabelEditing` the `labelInput` is blurred
+    // The `onBlur` event is triggered, which calls `handleSaveItemLabel` again.
+    // To avoid creating an unwanted behavior we need to check if the item is being edited before calling `updateItemLabel`
+    // using `instance.isItemBeingEditedRef` instead of `instance.isItemBeingEdited` since the state is not yet updated in this point
+    if (instance.isItemBeingEditedRef(itemId)) {
+      instance.updateItemLabel(itemId, label);
+      toggleItemEditing();
+      instance.focusItem(event, itemId);
+    }
+  };
+  const handleCancelItemLabelEditing = event => {
+    if (!hasPlugin(instance, useTreeViewLabel)) {
+      return;
+    }
+    if (instance.isItemBeingEditedRef(itemId)) {
+      toggleItemEditing();
+      instance.focusItem(event, itemId);
+    }
+  };
   const interactions = {
     handleExpansion,
     handleSelection,
-    handleCheckboxSelection
+    handleCheckboxSelection,
+    toggleItemEditing,
+    handleSaveItemLabel,
+    handleCancelItemLabelEditing
   };
   return {
     interactions,

package/hooks/useTreeViewApiRef.d.ts

@@ -3,4 +3,4 @@ import { TreeViewAnyPluginSignature, TreeViewPublicAPI } from '../internals/mode
 /**
  * Hook that instantiates a [[TreeViewApiRef]].
  */
-export declare const useTreeViewApiRef: <TSignatures extends readonly TreeViewAnyPluginSignature[] = readonly [import("../internals").UseTreeViewItemsSignature, import("../internals").UseTreeViewExpansionSignature, import("../internals").UseTreeViewSelectionSignature, import("../internals").UseTreeViewFocusSignature, import("../internals").UseTreeViewKeyboardNavigationSignature, import("../internals").UseTreeViewIconsSignature]>() => React.MutableRefObject<TreeViewPublicAPI<TSignatures> | undefined>;
+export declare const useTreeViewApiRef: <TSignatures extends readonly TreeViewAnyPluginSignature[] = readonly [import("../internals").UseTreeViewItemsSignature, import("../internals").UseTreeViewExpansionSignature, import("../internals").UseTreeViewSelectionSignature, import("../internals").UseTreeViewFocusSignature, import("../internals").UseTreeViewKeyboardNavigationSignature, import("../internals").UseTreeViewIconsSignature, import("../internals").UseTreeViewLabelSignature]>() => React.MutableRefObject<TreeViewPublicAPI<TSignatures> | undefined>;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v7.12.1
+ * @mui/x-tree-view v7.14.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/index.d.ts

@@ -15,6 +15,8 @@ export { useTreeViewIcons } from './plugins/useTreeViewIcons';
 export type { UseTreeViewIconsSignature, UseTreeViewIconsParameters, } from './plugins/useTreeViewIcons';
 export { useTreeViewItems, buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID, } from './plugins/useTreeViewItems';
 export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsState, } from './plugins/useTreeViewItems';
+export { useTreeViewLabel } from './plugins/useTreeViewLabel';
+export type { UseTreeViewLabelSignature, UseTreeViewLabelParameters, } from './plugins/useTreeViewLabel';
 export { useTreeViewJSXItems } from './plugins/useTreeViewJSXItems';
 export type { UseTreeViewJSXItemsSignature, UseTreeViewJSXItemsParameters, } from './plugins/useTreeViewJSXItems';
 export { isTargetInDescendants } from './utils/tree';

package/internals/index.js

@@ -11,6 +11,7 @@ export { useTreeViewFocus } from './plugins/useTreeViewFocus';
 export { useTreeViewKeyboardNavigation } from './plugins/useTreeViewKeyboardNavigation';
 export { useTreeViewIcons } from './plugins/useTreeViewIcons';
 export { useTreeViewItems, buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from './plugins/useTreeViewItems';
+export { useTreeViewLabel } from './plugins/useTreeViewLabel';
 export { useTreeViewJSXItems } from './plugins/useTreeViewJSXItems';
 export { isTargetInDescendants } from './utils/tree';
 export { warnOnce } from './utils/warning';

package/internals/models/itemPlugin.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { EventHandlers } from '@mui/utils';
-import type { UseTreeItem2ContentSlotOwnProps, UseTreeItem2DragAndDropOverlaySlotOwnProps, UseTreeItem2RootSlotOwnProps } from '../../useTreeItem2';
+import type { UseTreeItem2ContentSlotOwnProps, UseTreeItem2DragAndDropOverlaySlotOwnProps, UseTreeItem2LabelInputSlotOwnProps, UseTreeItem2RootSlotOwnProps } from '../../useTreeItem2';
 export interface TreeViewItemPluginSlotPropsEnhancerParams {
     rootRefObject: React.MutableRefObject<HTMLLIElement | null>;
     contentRefObject: React.MutableRefObject<HTMLDivElement | null>;
@@ -11,6 +11,7 @@ export interface TreeViewItemPluginSlotPropsEnhancers {
     root?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItem2RootSlotOwnProps>;
     content?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItem2ContentSlotOwnProps>;
     dragAndDropOverlay?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItem2DragAndDropOverlaySlotOwnProps>;
+    labelInput?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItem2LabelInputSlotOwnProps>;
 }
 export interface TreeViewItemPluginResponse {
     /**

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -57,8 +57,11 @@ export const useTreeViewExpansion = ({
     if (params.expansionTrigger) {
       return params.expansionTrigger;
     }
+    if (instance.isTreeViewEditable) {
+      return 'iconContainer';
+    }
     return 'content';
-  }, [params.expansionTrigger]);
+  }, [params.expansionTrigger, instance.isTreeViewEditable]);
   return {
     publicAPI: {
       setItemExpansion

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { DefaultizedProps, TreeViewPluginSignature } from '../../models';
 import { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import { TreeViewItemId } from '../../../models';
+import { UseTreeViewLabelSignature } from '../useTreeViewLabel';
 export interface UseTreeViewExpansionPublicAPI {
     /**
      * Change the expansion status of a given item.
@@ -83,5 +84,6 @@ export type UseTreeViewExpansionSignature = TreeViewPluginSignature<{
     modelNames: 'expandedItems';
     contextValue: UseTreeViewExpansionContextValue;
     dependencies: [UseTreeViewItemsSignature];
+    optionalDependencies: [UseTreeViewLabelSignature];
 }>;
 export {};

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { useRtl } from '@mui/system/RtlProvider';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { getFirstNavigableItem, getLastNavigableItem, getNextNavigableItem, getPreviousNavigableItem, isTargetInDescendants } from '../../utils/tree';
+import { hasPlugin } from '../../utils/plugins';
+import { useTreeViewLabel } from '../useTreeViewLabel';
 function isPrintableCharacter(string) {
   return !!string && string.length === 1 && !!string.match(/\S/);
 }
@@ -89,7 +91,9 @@ export const useTreeViewKeyboardNavigation = ({
       // If the focused item has no children, we select it.
       case key === 'Enter':
         {
-          if (canToggleItemExpansion(itemId)) {
+          if (hasPlugin(instance, useTreeViewLabel) && instance.isItemEditable(itemId) && !instance.isItemBeingEdited(itemId)) {
+            instance.setEditedItemId(itemId);
+          } else if (canToggleItemExpansion(itemId)) {
             instance.toggleItemExpansion(event, itemId);
             event.preventDefault();
           } else if (canToggleItemSelection(itemId)) {

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.d.ts

@@ -5,6 +5,7 @@ import { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
 import { UseTreeViewFocusSignature } from '../useTreeViewFocus';
 import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
 import { TreeViewItemId } from '../../../models';
+import { UseTreeViewLabelSignature } from '../useTreeViewLabel';
 export interface UseTreeViewKeyboardNavigationInstance {
     /**
      * Updates the `firstCharMap` to add/remove the first character of some item's labels.
@@ -29,6 +30,7 @@ export type UseTreeViewKeyboardNavigationSignature = TreeViewPluginSignature<{
         UseTreeViewFocusSignature,
         UseTreeViewExpansionSignature
     ];
+    optionalDependencies: [UseTreeViewLabelSignature];
 }>;
 export type TreeViewFirstCharMap = {
     [itemId: string]: string;

package/internals/plugins/useTreeViewLabel/index.d.ts

@@ -0,0 +1,2 @@
+export { useTreeViewLabel } from './useTreeViewLabel';
+export type { UseTreeViewLabelSignature, UseTreeViewLabelParameters, } from './useTreeViewLabel.types';

package/internals/plugins/useTreeViewLabel/index.js

@@ -0,0 +1 @@
+export { useTreeViewLabel } from './useTreeViewLabel';

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewPlugin } from '../../models';
+import { UseTreeViewLabelSignature } from './useTreeViewLabel.types';
+export declare const useTreeViewLabel: TreeViewPlugin<UseTreeViewLabelSignature>;

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewItemPlugin } from '../../models';
+export declare const isAndroid: () => boolean;
+export declare const useTreeViewLabelItemPlugin: TreeViewItemPlugin<any>;

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.js

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { useTreeViewContext } from '../../TreeViewProvider';
+export const isAndroid = () => navigator.userAgent.toLowerCase().includes('android');
+export const useTreeViewLabelItemPlugin = ({
+  props
+}) => {
+  const {
+    instance
+  } = useTreeViewContext();
+  const {
+    label,
+    itemId
+  } = props;
+  const [labelInputValue, setLabelInputValue] = React.useState(label);
+  const isItemBeingEdited = instance.isItemBeingEdited(itemId);
+  React.useEffect(() => {
+    if (!isItemBeingEdited) {
+      setLabelInputValue(label);
+    }
+  }, [isItemBeingEdited, label]);
+  return {
+    propsEnhancers: {
+      labelInput: ({
+        externalEventHandlers
+      }) => {
+        const editable = instance.isItemEditable(itemId);
+        if (!editable) {
+          return {};
+        }
+        const handleInputChange = event => {
+          externalEventHandlers.onChange?.(event);
+          setLabelInputValue(event.target.value);
+        };
+        return {
+          value: labelInputValue ?? '',
+          'data-element': 'labelInput',
+          onChange: handleInputChange,
+          autoFocus: true,
+          type: 'text'
+        };
+      }
+    }
+  };
+};

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.js

@@ -0,0 +1,81 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { warnOnce } from '../../utils/warning';
+import { useTreeViewLabelItemPlugin } from './useTreeViewLabel.itemPlugin';
+export const useTreeViewLabel = ({
+  instance,
+  state,
+  setState,
+  params,
+  experimentalFeatures
+}) => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (params.isItemEditable && !experimentalFeatures?.labelEditing) {
+      warnOnce(['MUI X: The label editing feature requires the `labelEditing` experimental feature to be enabled.', 'You can do it by passing `experimentalFeatures={{ labelEditing: true}}` to the `RichTreeViewPro` component.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/editing/']);
+    }
+  }
+  const editedItemRef = React.useRef(state.editedItemId);
+  const isItemBeingEditedRef = itemId => editedItemRef.current === itemId;
+  const setEditedItemId = editedItemId => {
+    setState(prevState => _extends({}, prevState, {
+      editedItemId
+    }));
+    editedItemRef.current = editedItemId;
+  };
+  const isItemBeingEdited = itemId => itemId === state.editedItemId;
+  const isTreeViewEditable = Boolean(params.isItemEditable) && !!experimentalFeatures.labelEditing;
+  const isItemEditable = itemId => {
+    if (itemId == null || !isTreeViewEditable) {
+      return false;
+    }
+    const item = instance.getItem(itemId);
+    if (!item) {
+      return false;
+    }
+    return typeof params.isItemEditable === 'function' ? params.isItemEditable(item) : Boolean(params.isItemEditable);
+  };
+  const updateItemLabel = (itemId, label) => {
+    if (!label) {
+      throw new Error(['MUI X: The Tree View component requires all items to have a `label` property.', 'The label of an item cannot be empty.', itemId].join('\n'));
+    }
+    setState(prevState => {
+      const item = prevState.items.itemMetaMap[itemId];
+      if (item.label !== label) {
+        return _extends({}, prevState, {
+          items: _extends({}, prevState.items, {
+            itemMetaMap: _extends({}, prevState.items.itemMetaMap, {
+              [itemId]: _extends({}, item, {
+                label
+              })
+            })
+          })
+        });
+      }
+      return prevState;
+    });
+    if (params.onItemLabelChange) {
+      params.onItemLabelChange(itemId, label);
+    }
+  };
+  return {
+    instance: {
+      setEditedItemId,
+      isItemBeingEdited,
+      updateItemLabel,
+      isItemEditable,
+      isTreeViewEditable,
+      isItemBeingEditedRef
+    },
+    publicAPI: {
+      updateItemLabel
+    }
+  };
+};
+useTreeViewLabel.itemPlugin = useTreeViewLabelItemPlugin;
+useTreeViewLabel.getInitialState = () => ({
+  editedItemId: null
+});
+useTreeViewLabel.params = {
+  onItemLabelChange: true,
+  isItemEditable: true
+};

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.types.d.ts

@@ -0,0 +1,75 @@
+import { TreeViewPluginSignature } from '../../models';
+import { TreeViewItemId } from '../../../models';
+import { UseTreeViewItemsSignature } from '../useTreeViewItems';
+import { TreeItem2LabelInputProps } from '../../../TreeItem2LabelInput';
+export interface UseTreeViewLabelPublicAPI {
+    /**
+     * Used to update the label of an item.
+     * @param {TreeViewItemId} itemId The id of the item to update the label of.
+     * @param {string} newLabel The new label of the item.
+     */
+    updateItemLabel: (itemId: TreeViewItemId, newLabel: string) => void;
+}
+export interface UseTreeViewLabelInstance extends UseTreeViewLabelPublicAPI {
+    /**
+     * Updates which item is currently being edited.
+     * @param {TreeViewItemId} itemId The id of the item that is currently being edited.
+     * @returns {void}.
+     */
+    setEditedItemId: (itemId: TreeViewItemId | null) => void;
+    /**
+     * Checks if an item is being edited or not.
+     * @param {TreeViewItemId} itemId The id of the item to check.
+     * @returns {boolean}.
+     */
+    isItemBeingEdited: (itemId: TreeViewItemId) => boolean;
+    /**
+     * Checks if an item is being edited or not.
+     * Purely internal use, used to avoid unnecessarily calling `updateItemLabel` twice.
+     * @param {TreeViewItemId} itemId The id of the item to check.
+     * @returns {boolean}.
+     */
+    isItemBeingEditedRef: (itemId: TreeViewItemId) => boolean;
+    /**
+     * Determines if a given item is editable.
+     * @param {TreeViewItemId} itemId The id of the item to check.
+     * @returns {boolean} `true` if the item is editable.
+     */
+    isItemEditable: (itemId: TreeViewItemId) => boolean;
+    /**
+     * Set to `true` if the tree view is editable.
+     */
+    isTreeViewEditable: boolean;
+}
+export interface UseTreeViewLabelParameters<R extends {}> {
+    /**
+     * Callback fired when the label of an item changes.
+     * @param {TreeViewItemId} itemId The id of the item that was edited.
+     * @param {string} newLabel The new label of the items.
+     */
+    onItemLabelChange?: (itemId: TreeViewItemId, newLabel: string) => void;
+    /**
+     * Determines if a given item is editable or not.
+     * Make sure to also enable the `labelEditing` experimental feature:
+     * `<RichTreeViewPro experimentalFeatures={{ labelEditing: true }}  />`.
+     * By default, the items are not editable.
+     * @template R
+     * @param {R} item The item to check.
+     * @returns {boolean} `true` if the item is editable.
+     */
+    isItemEditable?: boolean | ((item: R) => boolean);
+}
+export interface UseTreeViewLabelState {
+    editedItemId: string | null;
+}
+export type UseTreeViewLabelSignature = TreeViewPluginSignature<{
+    params: UseTreeViewLabelParameters<any>;
+    defaultizedParams: UseTreeViewLabelParameters<any>;
+    publicAPI: UseTreeViewLabelPublicAPI;
+    instance: UseTreeViewLabelInstance;
+    state: UseTreeViewLabelState;
+    experimentalFeatures: 'labelEditing';
+    dependencies: [UseTreeViewItemsSignature];
+}>;
+export interface UseTreeItem2LabelInputSlotPropsFromItemsReordering extends TreeItem2LabelInputProps {
+}

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.types.js

@@ -0,0 +1 @@
+export {};