@mui/x-tree-view 7.22.1 → 8.0.0-alpha.1

package/TreeView/TreeView.js

@@ -1,211 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from "../internals/zero-styled/index.js";
-import { getTreeViewUtilityClass } from "./treeViewClasses.js";
-import { SimpleTreeView, SimpleTreeViewRoot } from "../SimpleTreeView/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTreeView');
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['root']
-  };
-  return composeClasses(slots, getTreeViewUtilityClass, classes);
-};
-const TreeViewRoot = styled(SimpleTreeViewRoot, {
-  name: 'MuiTreeView',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
-})({});
-let warnedOnce = false;
-const warn = () => {
-  if (!warnedOnce) {
-    console.warn(['MUI X: The TreeView component was renamed SimpleTreeView.', 'The component with the old naming will be removed in the version v8.0.0.', '', "You should use `import { SimpleTreeView } from '@mui/x-tree-view'`", "or `import { SimpleTreeView } from '@mui/x-tree-view/TreeView'`"].join('\n'));
-    warnedOnce = true;
-  }
-};
-
-/**
- * This component has been deprecated in favor of the new Simple Tree View component.
- * You can have a look at how to migrate to the new component in the v7 [migration guide](https://mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview)
- *
- * Demos:
- *
- * - [Tree View](https://mui.com/x/react-tree-view/)
- *
- * API:
- *
- * - [TreeView API](https://mui.com/x/api/tree-view/tree-view/)
- *
- * @deprecated
- */
-const TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
-  if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
-    warn();
-  }
-  const props = useThemeProps({
-    props: inProps,
-    name: 'MuiTreeView'
-  });
-  const classes = useUtilityClasses(props);
-  return /*#__PURE__*/_jsx(SimpleTreeView, _extends({}, props, {
-    ref: ref,
-    classes: classes,
-    slots: _extends({
-      root: TreeViewRoot
-    }, props.slots)
-  }));
-});
-process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
-   */
-  apiRef: PropTypes.shape({
-    current: PropTypes.shape({
-      focusItem: PropTypes.func.isRequired,
-      getItem: PropTypes.func.isRequired,
-      getItemDOMElement: PropTypes.func.isRequired,
-      getItemOrderedChildrenIds: PropTypes.func.isRequired,
-      getItemTree: PropTypes.func.isRequired,
-      selectItem: PropTypes.func.isRequired,
-      setItemExpansion: PropTypes.func.isRequired
-    })
-  }),
-  /**
-   * If `true`, the Tree View renders a checkbox at the left of its label that allows selecting it.
-   * @default false
-   */
-  checkboxSelection: PropTypes.bool,
-  /**
-   * The content of the component.
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  className: PropTypes.string,
-  /**
-   * Expanded item ids.
-   * Used when the item's expansion is not controlled.
-   * @default []
-   */
-  defaultExpandedItems: PropTypes.arrayOf(PropTypes.string),
-  /**
-   * Selected item ids. (Uncontrolled)
-   * When `multiSelect` is true this takes an array of strings; when false (default) a string.
-   * @default []
-   */
-  defaultSelectedItems: PropTypes.any,
-  /**
-   * If `true`, will allow focus on disabled items.
-   * @default false
-   */
-  disabledItemsFocusable: PropTypes.bool,
-  /**
-   * If `true` selection is disabled.
-   * @default false
-   */
-  disableSelection: PropTypes.bool,
-  /**
-   * Expanded item ids.
-   * Used when the item's expansion is controlled.
-   */
-  expandedItems: PropTypes.arrayOf(PropTypes.string),
-  /**
-   * The slot that triggers the item's expansion when clicked.
-   * @default 'content'
-   */
-  expansionTrigger: PropTypes.oneOf(['content', 'iconContainer']),
-  /**
-   * Unstable features, breaking changes might be introduced.
-   * For each feature, if the flag is not explicitly set to `true`,
-   * the feature will be fully disabled and any property / method call will not have any effect.
-   */
-  experimentalFeatures: PropTypes.shape({
-    indentationAtItemLevel: PropTypes.bool
-  }),
-  /**
-   * This prop is used to help implement the accessibility logic.
-   * If you don't provide this prop. It falls back to a randomly generated id.
-   */
-  id: PropTypes.string,
-  /**
-   * Horizontal indentation between an item and its children.
-   * Examples: 24, "24px", "2rem", "2em".
-   * @default 12px
-   */
-  itemChildrenIndentation: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * If `true`, `ctrl` and `shift` will trigger multiselect.
-   * @default false
-   */
-  multiSelect: PropTypes.bool,
-  /**
-   * Callback fired when Tree Items are expanded/collapsed.
-   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
-   * @param {array} itemIds The ids of the expanded items.
-   */
-  onExpandedItemsChange: PropTypes.func,
-  /**
-   * Callback fired when the `content` slot of a given Tree Item is clicked.
-   * @param {React.MouseEvent} event The DOM event that triggered the change.
-   * @param {string} itemId The id of the focused item.
-   */
-  onItemClick: PropTypes.func,
-  /**
-   * Callback fired when a Tree Item is expanded or collapsed.
-   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
-   * @param {array} itemId The itemId of the modified item.
-   * @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
-   */
-  onItemExpansionToggle: PropTypes.func,
-  /**
-   * Callback fired when a given Tree Item is focused.
-   * @param {React.SyntheticEvent | null} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
-   * @param {string} itemId The id of the focused item.
-   */
-  onItemFocus: PropTypes.func,
-  /**
-   * Callback fired when a Tree Item is selected or deselected.
-   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
-   * @param {array} itemId The itemId of the modified item.
-   * @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
-   */
-  onItemSelectionToggle: PropTypes.func,
-  /**
-   * Callback fired when Tree Items are selected/deselected.
-   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
-   * @param {string[] | string} itemIds The ids of the selected items.
-   * When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
-   */
-  onSelectedItemsChange: PropTypes.func,
-  /**
-   * Selected item ids. (Controlled)
-   * When `multiSelect` is true this takes an array of strings; when false (default) a string.
-   */
-  selectedItems: PropTypes.any,
-  /**
-   * The props used for each component slot.
-   */
-  slotProps: PropTypes.object,
-  /**
-   * Overridable component slots.
-   */
-  slots: PropTypes.object,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-} : void 0;
-export { TreeView };

package/TreeView/TreeView.types.d.ts

@@ -1,9 +0,0 @@
-import { SimpleTreeViewProps, SimpleTreeViewSlotProps, SimpleTreeViewSlots } from '../SimpleTreeView';
-export interface TreeViewProps<Multiple extends boolean | undefined> extends SimpleTreeViewProps<Multiple> {
-}
-export interface TreeViewSlots extends SimpleTreeViewSlots {
-}
-export interface TreeViewSlotProps extends SimpleTreeViewSlotProps {
-}
-export type SingleSelectTreeViewProps = SimpleTreeViewProps<false>;
-export type MultiSelectTreeViewProps = SimpleTreeViewProps<true>;

package/TreeView/index.d.ts

@@ -1,3 +0,0 @@
-export * from './TreeView';
-export * from './treeViewClasses';
-export type { TreeViewProps, SingleSelectTreeViewProps, MultiSelectTreeViewProps, TreeViewSlots, TreeViewSlotProps, } from './TreeView.types';

package/TreeView/index.js

@@ -1,3 +0,0 @@
-export * from "./TreeView.js";
-export * from "./treeViewClasses.js";
-export {};

package/TreeView/package.json

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

package/TreeView/treeViewClasses.d.ts

@@ -1,7 +0,0 @@
-export interface TreeViewClasses {
-    /** Styles applied to the root element. */
-    root: string;
-}
-export type TreeViewClassKey = keyof TreeViewClasses;
-export declare function getTreeViewUtilityClass(slot: string): string;
-export declare const treeViewClasses: TreeViewClasses;

package/TreeView/treeViewClasses.js

@@ -1,6 +0,0 @@
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-export function getTreeViewUtilityClass(slot) {
-  return generateUtilityClass('MuiTreeView', slot);
-}
-export const treeViewClasses = generateUtilityClasses('MuiTreeView', ['root']);

package/hooks/useTreeItem2Utils/index.d.ts

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

package/hooks/useTreeItem2Utils/index.js

@@ -1 +0,0 @@
-export { useTreeItem2Utils } from "./useTreeItem2Utils.js";

package/modern/TreeItem/TreeItemContent.js

@@ -1,146 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["classes", "className", "displayIcon", "expansionIcon", "icon", "label", "itemId", "onClick", "onMouseDown", "dragAndDropOverlayProps", "labelInputProps"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import Checkbox from '@mui/material/Checkbox';
-import { useTreeItemState } from "./useTreeItemState.js";
-import { TreeItem2DragAndDropOverlay } from "../TreeItem2DragAndDropOverlay/index.js";
-import { TreeItem2LabelInput } from "../TreeItem2LabelInput/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @ignore - internal component.
- */
-const TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(props, ref) {
-  const {
-      classes,
-      className,
-      displayIcon,
-      expansionIcon,
-      icon: iconProp,
-      label,
-      itemId,
-      onClick,
-      onMouseDown,
-      dragAndDropOverlayProps,
-      labelInputProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const {
-    disabled,
-    expanded,
-    selected,
-    focused,
-    editing,
-    editable,
-    disableSelection,
-    checkboxSelection,
-    handleExpansion,
-    handleSelection,
-    handleCheckboxSelection,
-    handleContentClick,
-    preventSelection,
-    expansionTrigger,
-    toggleItemEditing
-  } = useTreeItemState(itemId);
-  const icon = iconProp || expansionIcon || displayIcon;
-  const checkboxRef = React.useRef(null);
-  const handleMouseDown = event => {
-    preventSelection(event);
-    if (onMouseDown) {
-      onMouseDown(event);
-    }
-  };
-  const handleClick = event => {
-    handleContentClick?.(event, itemId);
-    if (checkboxRef.current?.contains(event.target)) {
-      return;
-    }
-    if (expansionTrigger === 'content') {
-      handleExpansion(event);
-    }
-    if (!checkboxSelection) {
-      handleSelection(event);
-    }
-    if (onClick) {
-      onClick(event);
-    }
-  };
-  const handleLabelDoubleClick = event => {
-    if (event.defaultMuiPrevented) {
-      return;
-    }
-    toggleItemEditing();
-  };
-  return /*#__PURE__*/ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */_jsxs("div", _extends({}, other, {
-    className: clsx(classes.root, className, expanded && classes.expanded, selected && classes.selected, focused && classes.focused, disabled && classes.disabled, editing && classes.editing, editable && classes.editable),
-    onClick: handleClick,
-    onMouseDown: handleMouseDown,
-    ref: ref,
-    children: [/*#__PURE__*/_jsx("div", {
-      className: classes.iconContainer,
-      children: icon
-    }), checkboxSelection && /*#__PURE__*/_jsx(Checkbox, {
-      className: classes.checkbox,
-      checked: selected,
-      onChange: handleCheckboxSelection,
-      disabled: disabled || disableSelection,
-      ref: checkboxRef,
-      tabIndex: -1
-    }), editing ? /*#__PURE__*/_jsx(TreeItem2LabelInput, _extends({}, labelInputProps, {
-      className: classes.labelInput
-    })) : /*#__PURE__*/_jsx("div", _extends({
-      className: classes.label
-    }, editable && {
-      onDoubleClick: handleLabelDoubleClick
-    }, {
-      children: label
-    })), dragAndDropOverlayProps && /*#__PURE__*/_jsx(TreeItem2DragAndDropOverlay, _extends({}, dragAndDropOverlayProps))]
-  }));
-});
-process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  /**
-   * The icon to display next to the Tree Item's label. Either a parent or end icon.
-   */
-  displayIcon: PropTypes.node,
-  dragAndDropOverlayProps: PropTypes.shape({
-    action: PropTypes.oneOf(['make-child', 'move-to-parent', 'reorder-above', 'reorder-below']),
-    style: PropTypes.object
-  }),
-  /**
-   * The icon to display next to the Tree Item's label. Either an expansion or collapse icon.
-   */
-  expansionIcon: PropTypes.node,
-  /**
-   * The icon to display next to the Tree Item's label.
-   */
-  icon: PropTypes.node,
-  /**
-   * The id of the item.
-   */
-  itemId: PropTypes.string.isRequired,
-  /**
-   * The Tree Item label.
-   */
-  label: PropTypes.node,
-  labelInputProps: PropTypes.shape({
-    autoFocus: PropTypes.oneOf([true]),
-    'data-element': PropTypes.oneOf(['labelInput']),
-    onBlur: PropTypes.func,
-    onChange: PropTypes.func,
-    onKeyDown: PropTypes.func,
-    type: PropTypes.oneOf(['text']),
-    value: PropTypes.string
-  })
-} : void 0;
-export { TreeItemContent };

package/modern/TreeItem/useTreeItemState.js

@@ -1,143 +0,0 @@
-'use client';
-
-import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
-import { useTreeViewLabel } from "../internals/plugins/useTreeViewLabel/index.js";
-import { hasPlugin } from "../internals/utils/plugins.js";
-export function useTreeItemState(itemId) {
-  const {
-    instance,
-    items: {
-      onItemClick
-    },
-    selection: {
-      multiSelect,
-      checkboxSelection,
-      disableSelection
-    },
-    expansion: {
-      expansionTrigger
-    }
-  } = useTreeViewContext();
-  const expandable = instance.isItemExpandable(itemId);
-  const expanded = instance.isItemExpanded(itemId);
-  const focused = instance.isItemFocused(itemId);
-  const selected = instance.isItemSelected(itemId);
-  const disabled = instance.isItemDisabled(itemId);
-  const editing = instance?.isItemBeingEdited ? instance?.isItemBeingEdited(itemId) : false;
-  const editable = instance.isItemEditable ? instance.isItemEditable(itemId) : false;
-  const handleExpansion = event => {
-    if (!disabled) {
-      if (!focused) {
-        instance.focusItem(event, itemId);
-      }
-      const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
-
-      // If already expanded and trying to toggle selection don't close
-      if (expandable && !(multiple && instance.isItemExpanded(itemId))) {
-        instance.toggleItemExpansion(event, itemId);
-      }
-    }
-  };
-  const handleSelection = event => {
-    if (!disabled) {
-      if (!focused) {
-        instance.focusItem(event, itemId);
-      }
-      const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
-      if (multiple) {
-        if (event.shiftKey) {
-          instance.expandSelectionRange(event, itemId);
-        } else {
-          instance.selectItem({
-            event,
-            itemId,
-            keepExistingSelection: true
-          });
-        }
-      } else {
-        instance.selectItem({
-          event,
-          itemId,
-          shouldBeSelected: true
-        });
-      }
-    }
-  };
-  const handleCheckboxSelection = event => {
-    if (disableSelection || disabled) {
-      return;
-    }
-    const hasShift = event.nativeEvent.shiftKey;
-    if (multiSelect && hasShift) {
-      instance.expandSelectionRange(event, itemId);
-    } else {
-      instance.selectItem({
-        event,
-        itemId,
-        keepExistingSelection: multiSelect,
-        shouldBeSelected: event.target.checked
-      });
-    }
-  };
-  const preventSelection = event => {
-    if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {
-      // Prevent text selection
-      event.preventDefault();
-    }
-  };
-  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);
-    }
-  };
-  return {
-    disabled,
-    expanded,
-    selected,
-    focused,
-    editable,
-    editing,
-    disableSelection,
-    checkboxSelection,
-    handleExpansion,
-    handleSelection,
-    handleCheckboxSelection,
-    handleContentClick: onItemClick,
-    preventSelection,
-    expansionTrigger,
-    toggleItemEditing,
-    handleSaveItemLabel,
-    handleCancelItemLabelEditing
-  };
-}