@mui/x-tree-view
Version:
The community edition of the MUI X Tree View components.
337 lines (336 loc) • 13.6 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.RichTreeViewRoot = exports.RichTreeView = 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 _Alert = _interopRequireDefault(require("@mui/material/Alert"));
var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
var _warning = require("@mui/x-internals/warning");
var _richTreeViewClasses = require("./richTreeViewClasses");
var _zeroStyled = require("../internals/zero-styled");
var _useTreeView = require("../internals/useTreeView");
var _TreeViewProvider = require("../internals/TreeViewProvider");
var _RichTreeView2 = require("./RichTreeView.plugins");
var _RichTreeViewItems = require("../internals/components/RichTreeViewItems");
var _useSelector = require("../internals/hooks/useSelector");
var _useTreeViewItems = require("../internals/plugins/useTreeViewItems/useTreeViewItems.selectors");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["slots", "slotProps"];
const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiRichTreeView');
const useUtilityClasses = ownerState => {
const {
classes
} = ownerState;
return React.useMemo(() => {
const slots = {
root: ['root'],
item: ['item'],
itemContent: ['itemContent'],
itemGroupTransition: ['itemGroupTransition'],
itemIconContainer: ['itemIconContainer'],
itemLabel: ['itemLabel'],
itemLabelInput: ['itemLabelInput'],
itemCheckbox: ['itemCheckbox']
// itemDragAndDropOverlay: ['itemDragAndDropOverlay'], => feature not available on this component
// itemErrorIcon: ['itemErrorIcon'], => feature not available on this component
};
return (0, _composeClasses.default)(slots, _richTreeViewClasses.getRichTreeViewUtilityClass, classes);
}, [classes]);
};
const RichTreeViewRoot = exports.RichTreeViewRoot = (0, _zeroStyled.styled)('ul', {
name: 'MuiRichTreeView',
slot: 'Root'
})({
padding: 0,
margin: 0,
listStyle: 'none',
outline: 0,
position: 'relative'
});
/**
*
* Demos:
*
* - [Tree View](https://mui.com/x/react-tree-view/)
*
* API:
*
* - [RichTreeView API](https://mui.com/x/api/tree-view/rich-tree-view/)
*/
const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps, ref) {
const props = useThemeProps({
props: inProps,
name: 'MuiRichTreeView'
});
const {
slots,
slotProps
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
if (process.env.NODE_ENV !== 'production') {
if (props.children != null) {
(0, _warning.warnOnce)(['MUI X: The Rich Tree View component does not support JSX children.', 'If you want to add items, you need to use the `items` prop.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/.']);
}
}
const {
getRootProps,
contextValue
} = (0, _useTreeView.useTreeView)({
plugins: _RichTreeView2.RICH_TREE_VIEW_PLUGINS,
rootRef: ref,
props: other
});
const isLoading = (0, _useSelector.useSelector)(contextValue.store, _useTreeViewItems.selectorIsTreeViewLoading);
const treeViewError = (0, _useSelector.useSelector)(contextValue.store, _useTreeViewItems.selectorGetTreeViewError);
const classes = useUtilityClasses(props);
const Root = slots?.root ?? RichTreeViewRoot;
const rootProps = (0, _useSlotProps.default)({
elementType: Root,
externalSlotProps: slotProps?.root,
className: classes.root,
getSlotProps: getRootProps,
ownerState: props
});
if (isLoading) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
children: "Loading..."
});
}
if (treeViewError) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
severity: "error",
children: treeViewError.message
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewProvider.TreeViewProvider, {
contextValue: contextValue,
classes: classes,
slots: slots,
slotProps: slotProps,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RichTreeViewItems.RichTreeViewItems, {
slots: slots,
slotProps: slotProps
})
}))
});
});
if (process.env.NODE_ENV !== "production") RichTreeView.displayName = "RichTreeView";
process.env.NODE_ENV !== "production" ? RichTreeView.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.default.shape({
current: _propTypes.default.shape({
focusItem: _propTypes.default.func.isRequired,
getItem: _propTypes.default.func.isRequired,
getItemDOMElement: _propTypes.default.func.isRequired,
getItemOrderedChildrenIds: _propTypes.default.func.isRequired,
getItemTree: _propTypes.default.func.isRequired,
getParentId: _propTypes.default.func.isRequired,
setEditedItem: _propTypes.default.func.isRequired,
setIsItemDisabled: _propTypes.default.func.isRequired,
setItemExpansion: _propTypes.default.func.isRequired,
setItemSelection: _propTypes.default.func.isRequired,
updateItemLabel: _propTypes.default.func.isRequired
})
}),
/**
* If `true`, the Tree View renders a checkbox at the left of its label that allows selecting it.
* @default false
*/
checkboxSelection: _propTypes.default.bool,
/**
* Override or extend the styles applied to the component.
*/
classes: _propTypes.default.object,
className: _propTypes.default.string,
/**
* Expanded item ids.
* Used when the item's expansion is not controlled.
* @default []
*/
defaultExpandedItems: _propTypes.default.arrayOf(_propTypes.default.string),
/**
* Selected item ids. (Uncontrolled)
* When `multiSelect` is true this takes an array of strings; when false (default) a string.
* @default []
*/
defaultSelectedItems: _propTypes.default.any,
/**
* If `true`, will allow focus on disabled items.
* @default false
*/
disabledItemsFocusable: _propTypes.default.bool,
/**
* If `true` selection is disabled.
* @default false
*/
disableSelection: _propTypes.default.bool,
/**
* Expanded item ids.
* Used when the item's expansion is controlled.
*/
expandedItems: _propTypes.default.arrayOf(_propTypes.default.string),
/**
* The slot that triggers the item's expansion when clicked.
* @default 'content'
*/
expansionTrigger: _propTypes.default.oneOf(['content', 'iconContainer']),
/**
* Used to determine the children of a given item.
*
* @template R
* @param {R} item The item to check.
* @returns {R[]} The children of the item.
* @default (item) => item.children
*/
getItemChildren: _propTypes.default.func,
/**
* Used to determine the id of a given item.
*
* @template R
* @param {R} item The item to check.
* @returns {string} The id of the item.
* @default (item) => item.id
*/
getItemId: _propTypes.default.func,
/**
* Used to determine the string label for a given item.
*
* @template R
* @param {R} item The item to check.
* @returns {string} The label of the item.
* @default (item) => item.label
*/
getItemLabel: _propTypes.default.func,
/**
* 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.default.string,
/**
* Used to determine if a given item should be disabled.
* @template R
* @param {R} item The item to check.
* @returns {boolean} `true` if the item should be disabled.
*/
isItemDisabled: _propTypes.default.func,
/**
* Determine if a given item can be edited.
* @template R
* @param {R} item The item to check.
* @returns {boolean} `true` if the item can be edited.
* @default () => false
*/
isItemEditable: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
/**
* Horizontal indentation between an item and its children.
* Examples: 24, "24px", "2rem", "2em".
* @default 12px
*/
itemChildrenIndentation: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
items: _propTypes.default.array.isRequired,
/**
* If `true`, `ctrl` and `shift` will trigger multiselect.
* @default false
*/
multiSelect: _propTypes.default.bool,
/**
* Callback fired when Tree Items are expanded/collapsed.
* @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemExpansion()` method.
* @param {array} itemIds The ids of the expanded items.
*/
onExpandedItemsChange: _propTypes.default.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.default.func,
/**
* Callback fired when a Tree Item is expanded or collapsed.
* @param {React.SyntheticEvent | null} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemExpansion()` method.
* @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.default.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.default.func,
/**
* 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: _propTypes.default.func,
/**
* Callback fired when a Tree Item is selected or deselected.
* @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemSelection()` method.
* @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.default.func,
/**
* Callback fired when Tree Items are selected/deselected.
* @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemSelection()` method.
* @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.default.func,
/**
* Selected item ids. (Controlled)
* When `multiSelect` is true this takes an array of strings; when false (default) a string.
*/
selectedItems: _propTypes.default.any,
/**
* When `selectionPropagation.descendants` is set to `true`.
*
* - Selecting a parent selects all its descendants automatically.
* - Deselecting a parent deselects all its descendants automatically.
*
* When `selectionPropagation.parents` is set to `true`.
*
* - Selecting all the descendants of a parent selects the parent automatically.
* - Deselecting a descendant of a selected parent deselects the parent automatically.
*
* Only works when `multiSelect` is `true`.
* On the <SimpleTreeView />, only the expanded items are considered (since the collapsed item are not passed to the Tree View component at all)
*
* @default { parents: false, descendants: false }
*/
selectionPropagation: _propTypes.default.shape({
descendants: _propTypes.default.bool,
parents: _propTypes.default.bool
}),
/**
* 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;