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

package/node/TreeItem/TreeItemContent.js

@@ -1,153 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TreeItemContent = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
-var _useTreeItemState = require("./useTreeItemState");
-var _TreeItem2DragAndDropOverlay = require("../TreeItem2DragAndDropOverlay");
-var _TreeItem2LabelInput = require("../TreeItem2LabelInput");
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["classes", "className", "displayIcon", "expansionIcon", "icon", "label", "itemId", "onClick", "onMouseDown", "dragAndDropOverlayProps", "labelInputProps"];
-/**
- * @ignore - internal component.
- */
-const TreeItemContent = exports.TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(props, ref) {
-  const {
-      classes,
-      className,
-      displayIcon,
-      expansionIcon,
-      icon: iconProp,
-      label,
-      itemId,
-      onClick,
-      onMouseDown,
-      dragAndDropOverlayProps,
-      labelInputProps
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const {
-    disabled,
-    expanded,
-    selected,
-    focused,
-    editing,
-    editable,
-    disableSelection,
-    checkboxSelection,
-    handleExpansion,
-    handleSelection,
-    handleCheckboxSelection,
-    handleContentClick,
-    preventSelection,
-    expansionTrigger,
-    toggleItemEditing
-  } = (0, _useTreeItemState.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 */(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({}, other, {
-    className: (0, _clsx.default)(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__*/(0, _jsxRuntime.jsx)("div", {
-      className: classes.iconContainer,
-      children: icon
-    }), checkboxSelection && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
-      className: classes.checkbox,
-      checked: selected,
-      onChange: handleCheckboxSelection,
-      disabled: disabled || disableSelection,
-      ref: checkboxRef,
-      tabIndex: -1
-    }), editing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2LabelInput.TreeItem2LabelInput, (0, _extends2.default)({}, labelInputProps, {
-      className: classes.labelInput
-    })) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
-      className: classes.label
-    }, editable && {
-      onDoubleClick: handleLabelDoubleClick
-    }, {
-      children: label
-    })), dragAndDropOverlayProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2DragAndDropOverlay.TreeItem2DragAndDropOverlay, (0, _extends2.default)({}, 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.default.object.isRequired,
-  className: _propTypes.default.string,
-  /**
-   * The icon to display next to the Tree Item's label. Either a parent or end icon.
-   */
-  displayIcon: _propTypes.default.node,
-  dragAndDropOverlayProps: _propTypes.default.shape({
-    action: _propTypes.default.oneOf(['make-child', 'move-to-parent', 'reorder-above', 'reorder-below']),
-    style: _propTypes.default.object
-  }),
-  /**
-   * The icon to display next to the Tree Item's label. Either an expansion or collapse icon.
-   */
-  expansionIcon: _propTypes.default.node,
-  /**
-   * The icon to display next to the Tree Item's label.
-   */
-  icon: _propTypes.default.node,
-  /**
-   * The id of the item.
-   */
-  itemId: _propTypes.default.string.isRequired,
-  /**
-   * The Tree Item label.
-   */
-  label: _propTypes.default.node,
-  labelInputProps: _propTypes.default.shape({
-    autoFocus: _propTypes.default.oneOf([true]),
-    'data-element': _propTypes.default.oneOf(['labelInput']),
-    onBlur: _propTypes.default.func,
-    onChange: _propTypes.default.func,
-    onKeyDown: _propTypes.default.func,
-    type: _propTypes.default.oneOf(['text']),
-    value: _propTypes.default.string
-  })
-} : void 0;

package/node/TreeItem/useTreeItemState.js

@@ -1,148 +0,0 @@
-"use strict";
-'use client';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useTreeItemState = useTreeItemState;
-var _TreeViewProvider = require("../internals/TreeViewProvider");
-var _useTreeViewLabel = require("../internals/plugins/useTreeViewLabel");
-var _plugins = require("../internals/utils/plugins");
-function useTreeItemState(itemId) {
-  const {
-    instance,
-    items: {
-      onItemClick
-    },
-    selection: {
-      multiSelect,
-      checkboxSelection,
-      disableSelection
-    },
-    expansion: {
-      expansionTrigger
-    }
-  } = (0, _TreeViewProvider.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 (!(0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel)) {
-      return;
-    }
-    if (instance.isItemEditable(itemId)) {
-      if (instance.isItemBeingEdited(itemId)) {
-        instance.setEditedItemId(null);
-      } else {
-        instance.setEditedItemId(itemId);
-      }
-    }
-  };
-  const handleSaveItemLabel = (event, label) => {
-    if (!(0, _plugins.hasPlugin)(instance, _useTreeViewLabel.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 (!(0, _plugins.hasPlugin)(instance, _useTreeViewLabel.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
-  };
-}

package/node/TreeItem2/TreeItem2.js

@@ -1,394 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TreeItem2Root = exports.TreeItem2Label = exports.TreeItem2IconContainer = exports.TreeItem2GroupTransition = exports.TreeItem2Content = exports.TreeItem2Checkbox = exports.TreeItem2 = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _unsupportedProp = _interopRequireDefault(require("@mui/utils/unsupportedProp"));
-var _styles = require("@mui/material/styles");
-var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
-var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
-var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
-var _createStyled = require("@mui/system/createStyled");
-var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _zeroStyled = require("../internals/zero-styled");
-var _useTreeItem = require("../useTreeItem2");
-var _TreeItem = require("../TreeItem");
-var _TreeItem2Icon = require("../TreeItem2Icon");
-var _TreeItem2DragAndDropOverlay = require("../TreeItem2DragAndDropOverlay");
-var _TreeItem2Provider = require("../TreeItem2Provider");
-var _TreeItem2LabelInput = require("../TreeItem2LabelInput");
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["visible"],
-  _excluded2 = ["id", "itemId", "label", "disabled", "children", "slots", "slotProps"];
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiTreeItem2');
-const TreeItem2Root = exports.TreeItem2Root = (0, _zeroStyled.styled)('li', {
-  name: 'MuiTreeItem2',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
-})({
-  listStyle: 'none',
-  margin: 0,
-  padding: 0,
-  outline: 0
-});
-const TreeItem2Content = exports.TreeItem2Content = (0, _zeroStyled.styled)('div', {
-  name: 'MuiTreeItem2',
-  slot: 'Content',
-  overridesResolver: (props, styles) => styles.content,
-  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'status' && prop !== 'indentationAtItemLevel'
-})(({
-  theme
-}) => ({
-  padding: theme.spacing(0.5, 1),
-  borderRadius: theme.shape.borderRadius,
-  width: '100%',
-  boxSizing: 'border-box',
-  // prevent width + padding to overflow
-  position: 'relative',
-  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'
-    }
-  },
-  variants: [{
-    props: {
-      indentationAtItemLevel: true
-    },
-    style: {
-      paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`
-    }
-  }, {
-    props: ({
-      status
-    }) => status.disabled,
-    style: {
-      opacity: (theme.vars || theme).palette.action.disabledOpacity,
-      backgroundColor: 'transparent'
-    }
-  }, {
-    props: ({
-      status
-    }) => status.focused,
-    style: {
-      backgroundColor: (theme.vars || theme).palette.action.focus
-    }
-  }, {
-    props: ({
-      status
-    }) => status.selected,
-    style: {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity),
-      '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _styles.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(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity)
-        }
-      }
-    }
-  }, {
-    props: ({
-      status
-    }) => status.selected && status.focused,
-    style: {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
-    }
-  }]
-}));
-const TreeItem2Label = exports.TreeItem2Label = (0, _zeroStyled.styled)('div', {
-  name: 'MuiTreeItem2',
-  slot: 'Label',
-  overridesResolver: (props, styles) => styles.label,
-  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'editable'
-})(({
-  theme
-}) => (0, _extends2.default)({
-  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',
-  overflow: 'hidden'
-}, theme.typography.body1, {
-  variants: [{
-    props: ({
-      editable
-    }) => editable,
-    style: {
-      paddingLeft: '2px'
-    }
-  }]
-}));
-const TreeItem2IconContainer = exports.TreeItem2IconContainer = (0, _zeroStyled.styled)('div', {
-  name: 'MuiTreeItem2',
-  slot: 'IconContainer',
-  overridesResolver: (props, styles) => styles.iconContainer
-})({
-  width: 16,
-  display: 'flex',
-  flexShrink: 0,
-  justifyContent: 'center',
-  '& svg': {
-    fontSize: 18
-  }
-});
-const TreeItem2GroupTransition = exports.TreeItem2GroupTransition = (0, _zeroStyled.styled)(_Collapse.default, {
-  name: 'MuiTreeItem2',
-  slot: 'GroupTransition',
-  overridesResolver: (props, styles) => styles.groupTransition,
-  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'indentationAtItemLevel'
-})({
-  margin: 0,
-  padding: 0,
-  paddingLeft: 'var(--TreeView-itemChildrenIndentation)',
-  variants: [{
-    props: {
-      indentationAtItemLevel: true
-    },
-    style: {
-      paddingLeft: 0
-    }
-  }]
-});
-const TreeItem2Checkbox = exports.TreeItem2Checkbox = (0, _zeroStyled.styled)(/*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-      visible
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  if (!visible) {
-    return null;
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, (0, _extends2.default)({}, other, {
-    ref: ref
-  }));
-}), {
-  name: 'MuiTreeItem2',
-  slot: 'Checkbox',
-  overridesResolver: (props, styles) => styles.checkbox
-})({
-  padding: 0
-});
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['root'],
-    content: ['content'],
-    expanded: ['expanded'],
-    editing: ['editing'],
-    editable: ['editable'],
-    selected: ['selected'],
-    focused: ['focused'],
-    disabled: ['disabled'],
-    iconContainer: ['iconContainer'],
-    checkbox: ['checkbox'],
-    label: ['label'],
-    groupTransition: ['groupTransition'],
-    labelInput: ['labelInput'],
-    dragAndDropOverlay: ['dragAndDropOverlay']
-  };
-  return (0, _composeClasses.default)(slots, _TreeItem.getTreeItemUtilityClass, classes);
-};
-/**
- *
- * Demos:
- *
- * - [Tree View](https://mui.com/x/react-tree-view/)
- *
- * API:
- *
- * - [TreeItem2 API](https://mui.com/x/api/tree-view/tree-item-2/)
- */
-const TreeItem2 = exports.TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProps, forwardedRef) {
-  const props = useThemeProps({
-    props: inProps,
-    name: 'MuiTreeItem2'
-  });
-  const {
-      id,
-      itemId,
-      label,
-      disabled,
-      children,
-      slots = {},
-      slotProps = {}
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
-  const {
-    getRootProps,
-    getContentProps,
-    getIconContainerProps,
-    getCheckboxProps,
-    getLabelProps,
-    getGroupTransitionProps,
-    getLabelInputProps,
-    getDragAndDropOverlayProps,
-    status
-  } = (0, _useTreeItem.useTreeItem2)({
-    id,
-    itemId,
-    children,
-    label,
-    disabled
-  });
-  const ownerState = (0, _extends2.default)({}, props, status);
-  const classes = useUtilityClasses(ownerState);
-  const Root = slots.root ?? TreeItem2Root;
-  const rootProps = (0, _useSlotProps.default)({
-    elementType: Root,
-    getSlotProps: getRootProps,
-    externalForwardedProps: other,
-    externalSlotProps: slotProps.root,
-    additionalProps: {
-      ref: forwardedRef
-    },
-    ownerState: {},
-    className: classes.root
-  });
-  const Content = slots.content ?? TreeItem2Content;
-  const contentProps = (0, _useSlotProps.default)({
-    elementType: Content,
-    getSlotProps: getContentProps,
-    externalSlotProps: slotProps.content,
-    ownerState: {},
-    className: (0, _clsx.default)(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 = (0, _useSlotProps.default)({
-    elementType: IconContainer,
-    getSlotProps: getIconContainerProps,
-    externalSlotProps: slotProps.iconContainer,
-    ownerState: {},
-    className: classes.iconContainer
-  });
-  const Label = slots.label ?? TreeItem2Label;
-  const labelProps = (0, _useSlotProps.default)({
-    elementType: Label,
-    getSlotProps: getLabelProps,
-    externalSlotProps: slotProps.label,
-    ownerState: {},
-    className: classes.label
-  });
-  const Checkbox = slots.checkbox ?? TreeItem2Checkbox;
-  const checkboxProps = (0, _useSlotProps.default)({
-    elementType: Checkbox,
-    getSlotProps: getCheckboxProps,
-    externalSlotProps: slotProps.checkbox,
-    ownerState: {},
-    className: classes.checkbox
-  });
-  const GroupTransition = slots.groupTransition ?? undefined;
-  const groupTransitionProps = (0, _useSlotProps.default)({
-    elementType: GroupTransition,
-    getSlotProps: getGroupTransitionProps,
-    externalSlotProps: slotProps.groupTransition,
-    ownerState: {},
-    className: classes.groupTransition
-  });
-  const LabelInput = slots.labelInput ?? _TreeItem2LabelInput.TreeItem2LabelInput;
-  const labelInputProps = (0, _useSlotProps.default)({
-    elementType: LabelInput,
-    getSlotProps: getLabelInputProps,
-    externalSlotProps: slotProps.labelInput,
-    ownerState: {},
-    className: classes.labelInput
-  });
-  const DragAndDropOverlay = slots.dragAndDropOverlay ?? _TreeItem2DragAndDropOverlay.TreeItem2DragAndDropOverlay;
-  const dragAndDropOverlayProps = (0, _useSlotProps.default)({
-    elementType: DragAndDropOverlay,
-    getSlotProps: getDragAndDropOverlayProps,
-    externalSlotProps: slotProps.dragAndDropOverlay,
-    ownerState: {},
-    className: classes.dragAndDropOverlay
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2Provider.TreeItem2Provider, {
-    itemId: itemId,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Content, (0, _extends2.default)({}, contentProps, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, (0, _extends2.default)({}, iconContainerProps, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2Icon.TreeItem2Icon, {
-            status: status,
-            slots: slots,
-            slotProps: slotProps
-          })
-        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Checkbox, (0, _extends2.default)({}, checkboxProps)), status.editing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelInput, (0, _extends2.default)({}, labelInputProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(DragAndDropOverlay, (0, _extends2.default)({}, dragAndDropOverlayProps))]
-      })), children && /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeItem2GroupTransition, (0, _extends2.default)({
-        as: GroupTransition
-      }, groupTransitionProps))]
-    }))
-  });
-});
-process.env.NODE_ENV !== "production" ? TreeItem2.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * The content of the component.
-   */
-  children: _propTypes.default.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: _propTypes.default.object,
-  className: _propTypes.default.string,
-  /**
-   * If `true`, the item is disabled.
-   * @default false
-   */
-  disabled: _propTypes.default.bool,
-  /**
-   * The id attribute of the item. If not provided, it will be generated.
-   */
-  id: _propTypes.default.string,
-  /**
-   * The id of the item.
-   * Must be unique.
-   */
-  itemId: _propTypes.default.string.isRequired,
-  /**
-   * The label of the item.
-   */
-  label: _propTypes.default.node,
-  /**
-   * Callback fired when the item root is blurred.
-   */
-  onBlur: _propTypes.default.func,
-  /**
-   * This prop isn't supported.
-   * Use the `onItemFocus` callback on the tree if you need to monitor an item's focus.
-   */
-  onFocus: _unsupportedProp.default,
-  /**
-   * Callback fired when a key is pressed on the keyboard and the tree is in focus.
-   */
-  onKeyDown: _propTypes.default.func,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps: _propTypes.default.object,
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots: _propTypes.default.object
-} : void 0;