@mui/x-tree-view
Version:
The community edition of the MUI X Tree View components.
423 lines (422 loc) • 16.8 kB
JavaScript
"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.TreeItemRoot = exports.TreeItemLoadingContainer = exports.TreeItemLabel = exports.TreeItemIconContainer = exports.TreeItemGroupTransition = exports.TreeItemErrorContainer = exports.TreeItemContent = exports.TreeItemCheckbox = exports.TreeItem = 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 _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
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("../useTreeItem");
var _treeItemClasses = require("./treeItemClasses");
var _TreeItemIcon = require("../TreeItemIcon");
var _TreeItemDragAndDropOverlay = require("../TreeItemDragAndDropOverlay");
var _TreeItemProvider = require("../TreeItemProvider");
var _TreeItemLabelInput = require("../TreeItemLabelInput");
var _TreeViewStyleContext = require("../internals/TreeViewProvider/TreeViewStyleContext");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["visible"],
_excluded2 = ["id", "itemId", "label", "disabled", "disableSelection", "children", "slots", "slotProps", "classes"];
const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiTreeItem');
const TreeItemRoot = exports.TreeItemRoot = (0, _zeroStyled.styled)('li', {
name: 'MuiTreeItem',
slot: 'Root'
})({
listStyle: 'none',
margin: 0,
padding: 0,
outline: 0
});
const TreeItemContent = exports.TreeItemContent = (0, _zeroStyled.styled)('div', {
name: 'MuiTreeItem',
slot: 'Content',
shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'status'
})(({
theme
}) => ({
padding: theme.spacing(0.5, 1),
paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`,
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'
}
},
'&[data-disabled]': {
opacity: (theme.vars || theme).palette.action.disabledOpacity,
backgroundColor: 'transparent',
cursor: 'auto'
},
'&[data-focused]': {
backgroundColor: (theme.vars || theme).palette.action.focus
},
'&[data-selected]': {
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)
}
}
},
'&[data-selected][data-focused]': {
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 TreeItemLabel = exports.TreeItemLabel = (0, _zeroStyled.styled)('div', {
name: 'MuiTreeItem',
slot: '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 TreeItemIconContainer = exports.TreeItemIconContainer = (0, _zeroStyled.styled)('div', {
name: 'MuiTreeItem',
slot: 'IconContainer'
})({
width: 16,
display: 'flex',
flexShrink: 0,
justifyContent: 'center',
position: 'relative',
cursor: 'inherit',
'& svg': {
fontSize: 18
}
});
const TreeItemGroupTransition = exports.TreeItemGroupTransition = (0, _zeroStyled.styled)(_Collapse.default, {
name: 'MuiTreeItem',
slot: 'GroupTransition',
overridesResolver: (props, styles) => styles.groupTransition
})({
margin: 0,
padding: 0
});
const TreeItemErrorContainer = exports.TreeItemErrorContainer = (0, _zeroStyled.styled)('div', {
name: 'MuiTreeItem',
slot: 'ErrorIcon'
})({
position: 'absolute',
right: -3,
width: 7,
height: 7,
borderRadius: '50%',
backgroundColor: 'red'
});
const TreeItemLoadingContainer = exports.TreeItemLoadingContainer = (0, _zeroStyled.styled)(_CircularProgress.default, {
name: 'MuiTreeItem',
slot: 'LoadingIcon'
})({
color: 'text.primary'
});
const TreeItemCheckbox = exports.TreeItemCheckbox = (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: 'MuiTreeItem',
slot: 'Checkbox'
})({
padding: 0
});
if (process.env.NODE_ENV !== "production") TreeItemCheckbox.displayName = "TreeItemCheckbox";
const useUtilityClasses = classesProp => {
const {
classes: classesFromTreeView
} = (0, _TreeViewStyleContext.useTreeViewStyleContext)();
const classes = (0, _extends2.default)({}, classesProp, {
root: (0, _clsx.default)(classesProp?.root, classesFromTreeView.root),
content: (0, _clsx.default)(classesProp?.content, classesFromTreeView.itemContent),
iconContainer: (0, _clsx.default)(classesProp?.iconContainer, classesFromTreeView.itemIconContainer),
checkbox: (0, _clsx.default)(classesProp?.checkbox, classesFromTreeView.itemCheckbox),
label: (0, _clsx.default)(classesProp?.label, classesFromTreeView.itemLabel),
groupTransition: (0, _clsx.default)(classesProp?.groupTransition, classesFromTreeView.itemGroupTransition),
labelInput: (0, _clsx.default)(classesProp?.labelInput, classesFromTreeView.itemLabelInput),
dragAndDropOverlay: (0, _clsx.default)(classesProp?.dragAndDropOverlay, classesFromTreeView.itemDragAndDropOverlay),
errorIcon: (0, _clsx.default)(classesProp?.errorIcon, classesFromTreeView.itemErrorIcon),
loadingIcon: (0, _clsx.default)(classesProp?.loadingIcon, classesFromTreeView.itemLoadingIcon)
});
const slots = {
root: ['root'],
content: ['content'],
iconContainer: ['iconContainer'],
checkbox: ['checkbox'],
label: ['label'],
groupTransition: ['groupTransition'],
labelInput: ['labelInput'],
dragAndDropOverlay: ['dragAndDropOverlay'],
errorIcon: ['errorIcon'],
loadingIcon: ['loadingIcon'],
expanded: ['expanded'],
editing: ['editing'],
editable: ['editable'],
selected: ['selected'],
focused: ['focused'],
disabled: ['disabled']
};
return (0, _composeClasses.default)(slots, _treeItemClasses.getTreeItemUtilityClass, classes);
};
/**
*
* Demos:
*
* - [Tree View](https://mui.com/x/react-tree-view/)
*
* API:
*
* - [TreeItem API](https://mui.com/x/api/tree-view/tree-item-2/)
*/
const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, forwardedRef) {
const props = useThemeProps({
props: inProps,
name: 'MuiTreeItem'
});
const {
id,
itemId,
label,
disabled,
disableSelection,
children,
slots = {},
slotProps = {},
classes: classesProp
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
const {
getContextProviderProps,
getRootProps,
getContentProps,
getIconContainerProps,
getCheckboxProps,
getLabelProps,
getGroupTransitionProps,
getLabelInputProps,
getDragAndDropOverlayProps,
getErrorContainerProps,
getLoadingContainerProps,
status
} = (0, _useTreeItem.useTreeItem)({
id,
itemId,
children,
label,
disabled,
disableSelection
});
const classes = useUtilityClasses(classesProp);
const Root = slots.root ?? TreeItemRoot;
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 ?? TreeItemContent;
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 ?? TreeItemIconContainer;
const iconContainerProps = (0, _useSlotProps.default)({
elementType: IconContainer,
getSlotProps: getIconContainerProps,
externalSlotProps: slotProps.iconContainer,
ownerState: {},
className: classes.iconContainer
});
const Label = slots.label ?? TreeItemLabel;
const labelProps = (0, _useSlotProps.default)({
elementType: Label,
getSlotProps: getLabelProps,
externalSlotProps: slotProps.label,
ownerState: {},
className: classes.label
});
const Checkbox = slots.checkbox ?? TreeItemCheckbox;
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 ?? _TreeItemLabelInput.TreeItemLabelInput;
const labelInputProps = (0, _useSlotProps.default)({
elementType: LabelInput,
getSlotProps: getLabelInputProps,
externalSlotProps: slotProps.labelInput,
ownerState: {},
className: classes.labelInput
});
const DragAndDropOverlay = slots.dragAndDropOverlay ?? _TreeItemDragAndDropOverlay.TreeItemDragAndDropOverlay;
const dragAndDropOverlayProps = (0, _useSlotProps.default)({
elementType: DragAndDropOverlay,
getSlotProps: getDragAndDropOverlayProps,
externalSlotProps: slotProps.dragAndDropOverlay,
ownerState: {},
className: classes.dragAndDropOverlay
});
const ErrorIcon = slots.errorIcon ?? TreeItemErrorContainer;
const errorContainerProps = (0, _useSlotProps.default)({
elementType: ErrorIcon,
getSlotProps: getErrorContainerProps,
externalSlotProps: slotProps.errorIcon,
ownerState: {},
className: classes.errorIcon
});
const LoadingIcon = slots.loadingIcon ?? TreeItemLoadingContainer;
const loadingContainerProps = (0, _useSlotProps.default)({
elementType: LoadingIcon,
getSlotProps: getLoadingContainerProps,
externalSlotProps: slotProps.loadingIcon,
ownerState: {},
className: classes.loadingIcon
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItemProvider.TreeItemProvider, (0, _extends2.default)({}, getContextProviderProps(), {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Content, (0, _extends2.default)({}, contentProps, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(IconContainer, (0, _extends2.default)({}, iconContainerProps, {
children: [status.error && /*#__PURE__*/(0, _jsxRuntime.jsx)(ErrorIcon, (0, _extends2.default)({}, errorContainerProps)), status.loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LoadingIcon, (0, _extends2.default)({}, loadingContainerProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItemIcon.TreeItemIcon, {
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)(TreeItemGroupTransition, (0, _extends2.default)({
as: GroupTransition
}, groupTransitionProps))]
}))
}));
});
if (process.env.NODE_ENV !== "production") TreeItem.displayName = "TreeItem";
process.env.NODE_ENV !== "production" ? TreeItem.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 /* @typescript-to-proptypes-ignore */.any,
/**
* 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,
/**
* If `true`, the item cannot be selected.
* @default false
*/
disableSelection: _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,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
} : void 0;