@mui/x-tree-view 7.0.0-beta.3 → 7.0.0-beta.5

package/legacy/TreeItem/TreeItem.js

@@ -1,360 +0,0 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["children", "className", "slots", "slotProps", "ContentComponent", "ContentProps", "nodeId", "id", "label", "onClick", "onMouseDown", "TransitionComponent", "TransitionProps"],
-  _excluded2 = ["ownerState"],
-  _excluded3 = ["ownerState"],
-  _excluded4 = ["ownerState"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import Collapse from '@mui/material/Collapse';
-import { resolveComponentProps, useSlotProps } from '@mui/base/utils';
-import { alpha, styled, useThemeProps } from '@mui/material/styles';
-import unsupportedProp from '@mui/utils/unsupportedProp';
-import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { TreeItemContent } from './TreeItemContent';
-import { treeItemClasses, getTreeItemUtilityClass } from './treeItemClasses';
-import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
-import { TreeViewCollapseIcon, TreeViewExpandIcon } from '../icons';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var classes = ownerState.classes;
-  var slots = {
-    root: ['root'],
-    content: ['content'],
-    expanded: ['expanded'],
-    selected: ['selected'],
-    focused: ['focused'],
-    disabled: ['disabled'],
-    iconContainer: ['iconContainer'],
-    label: ['label'],
-    group: ['group']
-  };
-  return composeClasses(slots, getTreeItemUtilityClass, classes);
-};
-var TreeItemRoot = styled('li', {
-  name: 'MuiTreeItem',
-  slot: 'Root',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.root;
-  }
-})({
-  listStyle: 'none',
-  margin: 0,
-  padding: 0,
-  outline: 0
-});
-var StyledTreeItemContent = styled(TreeItemContent, {
-  name: 'MuiTreeItem',
-  slot: 'Content',
-  overridesResolver: function overridesResolver(props, styles) {
-    return [styles.content, styles.iconContainer && _defineProperty({}, "& .".concat(treeItemClasses.iconContainer), styles.iconContainer), styles.label && _defineProperty({}, "& .".concat(treeItemClasses.label), styles.label)];
-  }
-})(function (_ref3) {
-  var theme = _ref3.theme;
-  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    padding: theme.spacing(0.5, 1),
-    borderRadius: theme.shape.borderRadius,
-    width: '100%',
-    boxSizing: 'border-box',
-    // prevent width + padding to overflow
-    display: 'flex',
-    alignItems: 'center',
-    gap: theme.spacing(1),
-    cursor: 'pointer',
-    WebkitTapHighlightColor: 'transparent',
-    '&:hover': {
-      backgroundColor: (theme.vars || theme).palette.action.hover,
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
-      }
-    }
-  }, "&.".concat(treeItemClasses.disabled), {
-    opacity: (theme.vars || theme).palette.action.disabledOpacity,
-    backgroundColor: 'transparent'
-  }), "&.".concat(treeItemClasses.focused), {
-    backgroundColor: (theme.vars || theme).palette.action.focus
-  }), "&.".concat(treeItemClasses.selected), _defineProperty({
-    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
-    '&:hover': {
-      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.hoverOpacity, "))") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
-      }
-    }
-  }, "&.".concat(treeItemClasses.focused), {
-    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
-  })), "& .".concat(treeItemClasses.iconContainer), {
-    width: 16,
-    display: 'flex',
-    flexShrink: 0,
-    justifyContent: 'center',
-    '& svg': {
-      fontSize: 18
-    }
-  }), "& .".concat(treeItemClasses.label), _extends({
-    width: '100%',
-    boxSizing: 'border-box',
-    // prevent width + padding to overflow
-    // fixes overflow - see https://github.com/mui/material-ui/issues/27372
-    minWidth: 0,
-    position: 'relative'
-  }, theme.typography.body1));
-});
-var TreeItemGroup = styled(Collapse, {
-  name: 'MuiTreeItem',
-  slot: 'Group',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.group;
-  }
-})({
-  margin: 0,
-  padding: 0,
-  paddingLeft: 12
-});
-
-/**
- *
- * Demos:
- *
- * - [Tree View](https://mui.com/x/react-tree-view/)
- *
- * API:
- *
- * - [TreeItem API](https://mui.com/x/api/tree-view/tree-item/)
- */
-export var TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, inRef) {
-  var _ref5, _inSlots$expandIcon, _ref6, _inSlots$collapseIcon, _inSlots$endIcon;
-  var _useTreeViewContext = useTreeViewContext(),
-    contextIcons = _useTreeViewContext.icons,
-    runItemPlugins = _useTreeViewContext.runItemPlugins,
-    multiSelect = _useTreeViewContext.selection.multiSelect,
-    disabledItemsFocusable = _useTreeViewContext.disabledItemsFocusable,
-    instance = _useTreeViewContext.instance;
-  var inPropsWithTheme = useThemeProps({
-    props: inProps,
-    name: 'MuiTreeItem'
-  });
-  var _runItemPlugins = runItemPlugins({
-      props: inPropsWithTheme,
-      ref: inRef
-    }),
-    props = _runItemPlugins.props,
-    ref = _runItemPlugins.ref,
-    wrapItem = _runItemPlugins.wrapItem;
-  var children = props.children,
-    className = props.className,
-    inSlots = props.slots,
-    inSlotProps = props.slotProps,
-    _props$ContentCompone = props.ContentComponent,
-    ContentComponent = _props$ContentCompone === void 0 ? TreeItemContent : _props$ContentCompone,
-    ContentProps = props.ContentProps,
-    nodeId = props.nodeId,
-    id = props.id,
-    label = props.label,
-    onClick = props.onClick,
-    onMouseDown = props.onMouseDown,
-    _props$TransitionComp = props.TransitionComponent,
-    TransitionComponent = _props$TransitionComp === void 0 ? Collapse : _props$TransitionComp,
-    TransitionProps = props.TransitionProps,
-    other = _objectWithoutProperties(props, _excluded);
-  var slots = {
-    expandIcon: (_ref5 = (_inSlots$expandIcon = inSlots == null ? void 0 : inSlots.expandIcon) != null ? _inSlots$expandIcon : contextIcons.slots.expandIcon) != null ? _ref5 : TreeViewExpandIcon,
-    collapseIcon: (_ref6 = (_inSlots$collapseIcon = inSlots == null ? void 0 : inSlots.collapseIcon) != null ? _inSlots$collapseIcon : contextIcons.slots.collapseIcon) != null ? _ref6 : TreeViewCollapseIcon,
-    endIcon: (_inSlots$endIcon = inSlots == null ? void 0 : inSlots.endIcon) != null ? _inSlots$endIcon : contextIcons.slots.endIcon,
-    icon: inSlots == null ? void 0 : inSlots.icon
-  };
-  var isExpandable = function isExpandable(reactChildren) {
-    if (Array.isArray(reactChildren)) {
-      return reactChildren.length > 0 && reactChildren.some(isExpandable);
-    }
-    return Boolean(reactChildren);
-  };
-  var expandable = isExpandable(children);
-  var expanded = instance.isNodeExpanded(nodeId);
-  var focused = instance.isNodeFocused(nodeId);
-  var selected = instance.isNodeSelected(nodeId);
-  var disabled = instance.isNodeDisabled(nodeId);
-  var ownerState = _extends({}, props, {
-    expanded: expanded,
-    focused: focused,
-    selected: selected,
-    disabled: disabled
-  });
-  var classes = useUtilityClasses(ownerState);
-  var ExpansionIcon = expanded ? slots.collapseIcon : slots.expandIcon;
-  var _useSlotProps = useSlotProps({
-      elementType: ExpansionIcon,
-      ownerState: {},
-      externalSlotProps: function externalSlotProps(tempOwnerState) {
-        if (expanded) {
-          return _extends({}, resolveComponentProps(contextIcons.slotProps.collapseIcon, tempOwnerState), resolveComponentProps(inSlotProps == null ? void 0 : inSlotProps.collapseIcon, tempOwnerState));
-        }
-        return _extends({}, resolveComponentProps(contextIcons.slotProps.expandIcon, tempOwnerState), resolveComponentProps(inSlotProps == null ? void 0 : inSlotProps.expandIcon, tempOwnerState));
-      }
-    }),
-    expansionIconOwnerState = _useSlotProps.ownerState,
-    expansionIconProps = _objectWithoutProperties(_useSlotProps, _excluded2);
-  var expansionIcon = expandable && !!ExpansionIcon ? /*#__PURE__*/_jsx(ExpansionIcon, _extends({}, expansionIconProps)) : null;
-  var DisplayIcon = expandable ? undefined : slots.endIcon;
-  var _useSlotProps2 = useSlotProps({
-      elementType: DisplayIcon,
-      ownerState: {},
-      externalSlotProps: function externalSlotProps(tempOwnerState) {
-        if (expandable) {
-          return {};
-        }
-        return _extends({}, resolveComponentProps(contextIcons.slotProps.endIcon, tempOwnerState), resolveComponentProps(inSlotProps == null ? void 0 : inSlotProps.endIcon, tempOwnerState));
-      }
-    }),
-    displayIconOwnerState = _useSlotProps2.ownerState,
-    displayIconProps = _objectWithoutProperties(_useSlotProps2, _excluded3);
-  var displayIcon = DisplayIcon ? /*#__PURE__*/_jsx(DisplayIcon, _extends({}, displayIconProps)) : null;
-  var Icon = slots.icon;
-  var _useSlotProps3 = useSlotProps({
-      elementType: Icon,
-      ownerState: {},
-      externalSlotProps: inSlotProps == null ? void 0 : inSlotProps.icon
-    }),
-    iconOwnerState = _useSlotProps3.ownerState,
-    iconProps = _objectWithoutProperties(_useSlotProps3, _excluded4);
-  var icon = Icon ? /*#__PURE__*/_jsx(Icon, _extends({}, iconProps)) : null;
-  var ariaSelected;
-  if (multiSelect) {
-    ariaSelected = selected;
-  } else if (selected) {
-    /* single-selection trees unset aria-selected on un-selected items.
-     *
-     * If the tree does not support multiple selection, aria-selected
-     * is set to true for the selected node and it is not present on any other node in the tree.
-     * Source: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
-     */
-    ariaSelected = true;
-  }
-  function handleFocus(event) {
-    // DOM focus stays on the tree which manages focus with aria-activedescendant
-    if (event.target === event.currentTarget) {
-      instance.focusRoot();
-    }
-    var canBeFocused = !disabled || disabledItemsFocusable;
-    if (!focused && canBeFocused && event.currentTarget === event.target) {
-      instance.focusNode(event, nodeId);
-    }
-  }
-  var idAttribute = instance.getTreeItemId(nodeId, id);
-  var item = /*#__PURE__*/_jsxs(TreeItemRoot, _extends({
-    className: clsx(classes.root, className),
-    role: "treeitem",
-    "aria-expanded": expandable ? expanded : undefined,
-    "aria-selected": ariaSelected,
-    "aria-disabled": disabled || undefined,
-    id: idAttribute,
-    tabIndex: -1
-  }, other, {
-    ownerState: ownerState,
-    onFocus: handleFocus,
-    ref: ref,
-    children: [/*#__PURE__*/_jsx(StyledTreeItemContent, _extends({
-      as: ContentComponent,
-      classes: {
-        root: classes.content,
-        expanded: classes.expanded,
-        selected: classes.selected,
-        focused: classes.focused,
-        disabled: classes.disabled,
-        iconContainer: classes.iconContainer,
-        label: classes.label
-      },
-      label: label,
-      nodeId: nodeId,
-      onClick: onClick,
-      onMouseDown: onMouseDown,
-      icon: icon,
-      expansionIcon: expansionIcon,
-      displayIcon: displayIcon,
-      ownerState: ownerState
-    }, ContentProps)), children && /*#__PURE__*/_jsx(TreeItemGroup, _extends({
-      as: TransitionComponent,
-      unmountOnExit: true,
-      className: classes.group,
-      in: expanded,
-      component: "ul",
-      role: "group"
-    }, TransitionProps, {
-      children: children
-    }))]
-  }));
-  return wrapItem(item);
-});
-TreeItem.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * The content of the component.
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  className: PropTypes.string,
-  /**
-   * The component used for the content node.
-   * @default TreeItemContent
-   */
-  ContentComponent: elementTypeAcceptingRef,
-  /**
-   * Props applied to ContentComponent.
-   */
-  ContentProps: PropTypes.object,
-  /**
-   * If `true`, the node is disabled.
-   * @default false
-   */
-  disabled: PropTypes.bool,
-  /**
-   * The tree node label.
-   */
-  label: PropTypes.node,
-  /**
-   * The id of the node.
-   */
-  nodeId: PropTypes.string.isRequired,
-  /**
-   * This prop isn't supported.
-   * Use the `onNodeFocus` callback on the tree if you need to monitor a node's focus.
-   */
-  onFocus: unsupportedProp,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps: PropTypes.object,
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  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]),
-  /**
-   * The component used for the transition.
-   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-   * @default Collapse
-   */
-  TransitionComponent: PropTypes.elementType,
-  /**
-   * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
-   */
-  TransitionProps: PropTypes.object
-};

package/legacy/TreeItem/TreeItem.types.js

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

package/legacy/TreeItem/TreeItemContent.js

@@ -1,95 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["classes", "className", "displayIcon", "expansionIcon", "icon", "label", "nodeId", "onClick", "onMouseDown"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { useTreeItemState } from './useTreeItemState';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @ignore - internal component.
- */
-var TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(props, ref) {
-  var classes = props.classes,
-    className = props.className,
-    displayIcon = props.displayIcon,
-    expansionIcon = props.expansionIcon,
-    iconProp = props.icon,
-    label = props.label,
-    nodeId = props.nodeId,
-    onClick = props.onClick,
-    onMouseDown = props.onMouseDown,
-    other = _objectWithoutProperties(props, _excluded);
-  var _useTreeItemState = useTreeItemState(nodeId),
-    disabled = _useTreeItemState.disabled,
-    expanded = _useTreeItemState.expanded,
-    selected = _useTreeItemState.selected,
-    focused = _useTreeItemState.focused,
-    handleExpansion = _useTreeItemState.handleExpansion,
-    handleSelection = _useTreeItemState.handleSelection,
-    preventSelection = _useTreeItemState.preventSelection;
-  var icon = iconProp || expansionIcon || displayIcon;
-  var handleMouseDown = function handleMouseDown(event) {
-    preventSelection(event);
-    if (onMouseDown) {
-      onMouseDown(event);
-    }
-  };
-  var handleClick = function handleClick(event) {
-    handleExpansion(event);
-    handleSelection(event);
-    if (onClick) {
-      onClick(event);
-    }
-  };
-  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(className, classes.root, expanded && classes.expanded, selected && classes.selected, focused && classes.focused, disabled && classes.disabled),
-      onClick: handleClick,
-      onMouseDown: handleMouseDown,
-      ref: ref,
-      children: [/*#__PURE__*/_jsx("div", {
-        className: classes.iconContainer,
-        children: icon
-      }), /*#__PURE__*/_jsx("div", {
-        className: classes.label,
-        children: label
-      })]
-    }))
-  );
-});
-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 "yarn 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 node's label. Either a parent or end icon.
-   */
-  displayIcon: PropTypes.node,
-  /**
-   * The icon to display next to the tree node's label. Either an expansion or collapse icon.
-   */
-  expansionIcon: PropTypes.node,
-  /**
-   * The icon to display next to the tree node's label.
-   */
-  icon: PropTypes.node,
-  /**
-   * The tree node label.
-   */
-  label: PropTypes.node,
-  /**
-   * The id of the node.
-   */
-  nodeId: PropTypes.string.isRequired
-} : void 0;
-export { TreeItemContent };

package/legacy/TreeItem/index.js

@@ -1,4 +0,0 @@
-export { TreeItem } from './TreeItem';
-export * from './treeItemClasses';
-export * from './useTreeItemState';
-export { TreeItemContent } from './TreeItemContent';

package/legacy/TreeItem/treeItemClasses.js

@@ -1,6 +0,0 @@
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-export function getTreeItemUtilityClass(slot) {
-  return generateUtilityClass('MuiTreeItem', slot);
-}
-export var treeItemClasses = generateUtilityClasses('MuiTreeItem', ['root', 'group', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label']);

package/legacy/TreeItem/useTreeItemState.js

@@ -1,58 +0,0 @@
-import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
-export function useTreeItemState(nodeId) {
-  var _useTreeViewContext = useTreeViewContext(),
-    instance = _useTreeViewContext.instance,
-    multiSelect = _useTreeViewContext.selection.multiSelect;
-  var expandable = instance.isNodeExpandable(nodeId);
-  var expanded = instance.isNodeExpanded(nodeId);
-  var focused = instance.isNodeFocused(nodeId);
-  var selected = instance.isNodeSelected(nodeId);
-  var disabled = instance.isNodeDisabled(nodeId);
-  var handleExpansion = function handleExpansion(event) {
-    if (!disabled) {
-      if (!focused) {
-        instance.focusNode(event, nodeId);
-      }
-      var multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
-
-      // If already expanded and trying to toggle selection don't close
-      if (expandable && !(multiple && instance.isNodeExpanded(nodeId))) {
-        instance.toggleNodeExpansion(event, nodeId);
-      }
-    }
-  };
-  var handleSelection = function handleSelection(event) {
-    if (!disabled) {
-      if (!focused) {
-        instance.focusNode(event, nodeId);
-      }
-      var multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
-      if (multiple) {
-        if (event.shiftKey) {
-          instance.selectRange(event, {
-            end: nodeId
-          });
-        } else {
-          instance.selectNode(event, nodeId, true);
-        }
-      } else {
-        instance.selectNode(event, nodeId);
-      }
-    }
-  };
-  var preventSelection = function preventSelection(event) {
-    if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {
-      // Prevent text selection
-      event.preventDefault();
-    }
-  };
-  return {
-    disabled: disabled,
-    expanded: expanded,
-    selected: selected,
-    focused: focused,
-    handleExpansion: handleExpansion,
-    handleSelection: handleSelection,
-    preventSelection: preventSelection
-  };
-}