@mui/x-tree-view 6.0.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +3682 -0
- package/LICENSE +21 -0
- package/README.md +34 -0
- package/TreeItem/TreeItem.d.ts +13 -0
- package/TreeItem/TreeItem.js +392 -0
- package/TreeItem/TreeItem.types.d.ts +84 -0
- package/TreeItem/TreeItem.types.js +1 -0
- package/TreeItem/TreeItemContent.d.ts +52 -0
- package/TreeItem/TreeItemContent.js +101 -0
- package/TreeItem/index.d.ts +5 -0
- package/TreeItem/index.js +4 -0
- package/TreeItem/package.json +6 -0
- package/TreeItem/treeItemClasses.d.ts +23 -0
- package/TreeItem/treeItemClasses.js +6 -0
- package/TreeItem/useTreeItem.d.ts +10 -0
- package/TreeItem/useTreeItem.js +68 -0
- package/TreeView/TreeView.d.ts +14 -0
- package/TreeView/TreeView.js +854 -0
- package/TreeView/TreeView.types.d.ts +170 -0
- package/TreeView/TreeView.types.js +1 -0
- package/TreeView/TreeViewContext.d.ts +6 -0
- package/TreeView/TreeViewContext.js +31 -0
- package/TreeView/descendants.d.ts +42 -0
- package/TreeView/descendants.js +186 -0
- package/TreeView/index.d.ts +3 -0
- package/TreeView/index.js +3 -0
- package/TreeView/package.json +6 -0
- package/TreeView/treeViewClasses.d.ts +7 -0
- package/TreeView/treeViewClasses.js +6 -0
- package/index.d.ts +2 -0
- package/index.js +9 -0
- package/internals/models.d.ts +1 -0
- package/internals/models.js +1 -0
- package/legacy/TreeItem/TreeItem.js +391 -0
- package/legacy/TreeItem/TreeItem.types.js +1 -0
- package/legacy/TreeItem/TreeItemContent.js +98 -0
- package/legacy/TreeItem/index.js +4 -0
- package/legacy/TreeItem/treeItemClasses.js +6 -0
- package/legacy/TreeItem/useTreeItem.js +67 -0
- package/legacy/TreeView/TreeView.js +907 -0
- package/legacy/TreeView/TreeView.types.js +1 -0
- package/legacy/TreeView/TreeViewContext.js +41 -0
- package/legacy/TreeView/descendants.js +199 -0
- package/legacy/TreeView/index.js +3 -0
- package/legacy/TreeView/treeViewClasses.js +6 -0
- package/legacy/index.js +9 -0
- package/legacy/internals/models.js +1 -0
- package/modern/TreeItem/TreeItem.js +391 -0
- package/modern/TreeItem/TreeItem.types.js +1 -0
- package/modern/TreeItem/TreeItemContent.js +101 -0
- package/modern/TreeItem/index.js +4 -0
- package/modern/TreeItem/treeItemClasses.js +6 -0
- package/modern/TreeItem/useTreeItem.js +68 -0
- package/modern/TreeView/TreeView.js +853 -0
- package/modern/TreeView/TreeView.types.js +1 -0
- package/modern/TreeView/TreeViewContext.js +31 -0
- package/modern/TreeView/descendants.js +186 -0
- package/modern/TreeView/index.js +3 -0
- package/modern/TreeView/treeViewClasses.js +6 -0
- package/modern/index.js +9 -0
- package/modern/internals/models.js +1 -0
- package/node/TreeItem/TreeItem.js +400 -0
- package/node/TreeItem/TreeItem.types.js +5 -0
- package/node/TreeItem/TreeItemContent.js +109 -0
- package/node/TreeItem/index.js +38 -0
- package/node/TreeItem/treeItemClasses.js +15 -0
- package/node/TreeItem/useTreeItem.js +76 -0
- package/node/TreeView/TreeView.js +862 -0
- package/node/TreeView/TreeView.types.js +5 -0
- package/node/TreeView/TreeViewContext.js +40 -0
- package/node/TreeView/descendants.js +194 -0
- package/node/TreeView/index.js +27 -0
- package/node/TreeView/treeViewClasses.js +15 -0
- package/node/index.js +34 -0
- package/node/internals/models.js +5 -0
- package/package.json +59 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* @ignore - internal component.
|
|
4
|
+
*/
|
|
5
|
+
export const TreeViewContext = /*#__PURE__*/React.createContext({
|
|
6
|
+
registerNode: () => {},
|
|
7
|
+
unregisterNode: () => {},
|
|
8
|
+
isFocused: () => false,
|
|
9
|
+
isSelected: () => false,
|
|
10
|
+
isExpanded: () => false,
|
|
11
|
+
isExpandable: () => false,
|
|
12
|
+
isDisabled: () => false,
|
|
13
|
+
mapFirstChar: () => {},
|
|
14
|
+
unMapFirstChar: () => {},
|
|
15
|
+
focus: () => {},
|
|
16
|
+
toggleExpansion: () => {},
|
|
17
|
+
selectNode: () => {},
|
|
18
|
+
selectRange: () => {},
|
|
19
|
+
multiSelect: false,
|
|
20
|
+
disabledItemsFocusable: false,
|
|
21
|
+
treeId: undefined,
|
|
22
|
+
icons: {
|
|
23
|
+
defaultCollapseIcon: null,
|
|
24
|
+
defaultExpandIcon: null,
|
|
25
|
+
defaultParentIcon: null,
|
|
26
|
+
defaultEndIcon: null
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
30
|
+
TreeViewContext.displayName = 'TreeViewContext';
|
|
31
|
+
}
|
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
2
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
|
+
const _excluded = ["element"];
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import PropTypes from 'prop-types';
|
|
6
|
+
import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
|
|
7
|
+
|
|
8
|
+
/** Credit: https://github.com/reach/reach-ui/blob/86a046f54d53b6420e392b3fa56dd991d9d4e458/packages/descendants/README.md
|
|
9
|
+
* Modified slightly to suit our purposes.
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
// To replace with .findIndex() once we stop IE11 support.
|
|
13
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
|
+
function findIndex(array, comp) {
|
|
15
|
+
for (let i = 0; i < array.length; i += 1) {
|
|
16
|
+
if (comp(array[i])) {
|
|
17
|
+
return i;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
return -1;
|
|
21
|
+
}
|
|
22
|
+
function binaryFindElement(array, element) {
|
|
23
|
+
let start = 0;
|
|
24
|
+
let end = array.length - 1;
|
|
25
|
+
while (start <= end) {
|
|
26
|
+
const middle = Math.floor((start + end) / 2);
|
|
27
|
+
if (array[middle].element === element) {
|
|
28
|
+
return middle;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
// eslint-disable-next-line no-bitwise
|
|
32
|
+
if (array[middle].element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING) {
|
|
33
|
+
end = middle - 1;
|
|
34
|
+
} else {
|
|
35
|
+
start = middle + 1;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
return start;
|
|
39
|
+
}
|
|
40
|
+
const DescendantContext = /*#__PURE__*/React.createContext({});
|
|
41
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
42
|
+
DescendantContext.displayName = 'DescendantContext';
|
|
43
|
+
}
|
|
44
|
+
function usePrevious(value) {
|
|
45
|
+
const ref = React.useRef(null);
|
|
46
|
+
React.useEffect(() => {
|
|
47
|
+
ref.current = value;
|
|
48
|
+
}, [value]);
|
|
49
|
+
return ref.current;
|
|
50
|
+
}
|
|
51
|
+
const noop = () => {};
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* This hook registers our descendant by passing it into an array. We can then
|
|
55
|
+
* search that array by to find its index when registering it in the component.
|
|
56
|
+
* We use this for focus management, keyboard navigation, and typeahead
|
|
57
|
+
* functionality for some components.
|
|
58
|
+
*
|
|
59
|
+
* The hook accepts the element node
|
|
60
|
+
*
|
|
61
|
+
* Our main goals with this are:
|
|
62
|
+
* 1) maximum composability,
|
|
63
|
+
* 2) minimal API friction
|
|
64
|
+
* 3) SSR compatibility*
|
|
65
|
+
* 4) concurrent safe
|
|
66
|
+
* 5) index always up-to-date with the tree despite changes
|
|
67
|
+
* 6) works with memoization of any component in the tree (hopefully)
|
|
68
|
+
*
|
|
69
|
+
* * As for SSR, the good news is that we don't actually need the index on the
|
|
70
|
+
* server for most use-cases, as we are only using it to determine the order of
|
|
71
|
+
* composed descendants for keyboard navigation.
|
|
72
|
+
*/
|
|
73
|
+
export function useDescendant(descendant) {
|
|
74
|
+
const [, forceUpdate] = React.useState();
|
|
75
|
+
const {
|
|
76
|
+
registerDescendant = noop,
|
|
77
|
+
unregisterDescendant = noop,
|
|
78
|
+
descendants = [],
|
|
79
|
+
parentId = null
|
|
80
|
+
} = React.useContext(DescendantContext);
|
|
81
|
+
|
|
82
|
+
// This will initially return -1 because we haven't registered the descendant
|
|
83
|
+
// on the first render. After we register, this will then return the correct
|
|
84
|
+
// index on the following render, and we will re-register descendants
|
|
85
|
+
// so that everything is up-to-date before the user interacts with a
|
|
86
|
+
// collection.
|
|
87
|
+
const index = findIndex(descendants, item => item.element === descendant.element);
|
|
88
|
+
const previousDescendants = usePrevious(descendants);
|
|
89
|
+
|
|
90
|
+
// We also need to re-register descendants any time ANY of the other
|
|
91
|
+
// descendants have changed. My brain was melting when I wrote this and it
|
|
92
|
+
// feels a little off, but checking in render and using the result in the
|
|
93
|
+
// effect's dependency array works well enough.
|
|
94
|
+
const someDescendantsHaveChanged = descendants.some((newDescendant, position) => {
|
|
95
|
+
return previousDescendants && previousDescendants[position] && previousDescendants[position].element !== newDescendant.element;
|
|
96
|
+
});
|
|
97
|
+
|
|
98
|
+
// Prevent any flashing
|
|
99
|
+
useEnhancedEffect(() => {
|
|
100
|
+
if (descendant.element) {
|
|
101
|
+
registerDescendant(_extends({}, descendant, {
|
|
102
|
+
index
|
|
103
|
+
}));
|
|
104
|
+
return () => {
|
|
105
|
+
unregisterDescendant(descendant.element);
|
|
106
|
+
};
|
|
107
|
+
}
|
|
108
|
+
forceUpdate({});
|
|
109
|
+
return undefined;
|
|
110
|
+
}, [registerDescendant, unregisterDescendant, index, someDescendantsHaveChanged, descendant]);
|
|
111
|
+
return {
|
|
112
|
+
parentId,
|
|
113
|
+
index
|
|
114
|
+
};
|
|
115
|
+
}
|
|
116
|
+
export function DescendantProvider(props) {
|
|
117
|
+
const {
|
|
118
|
+
children,
|
|
119
|
+
id
|
|
120
|
+
} = props;
|
|
121
|
+
const [items, set] = React.useState([]);
|
|
122
|
+
const registerDescendant = React.useCallback(_ref => {
|
|
123
|
+
let {
|
|
124
|
+
element
|
|
125
|
+
} = _ref,
|
|
126
|
+
other = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
127
|
+
set(oldItems => {
|
|
128
|
+
if (oldItems.length === 0) {
|
|
129
|
+
// If there are no items, register at index 0 and bail.
|
|
130
|
+
return [_extends({}, other, {
|
|
131
|
+
element,
|
|
132
|
+
index: 0
|
|
133
|
+
})];
|
|
134
|
+
}
|
|
135
|
+
const index = binaryFindElement(oldItems, element);
|
|
136
|
+
let newItems;
|
|
137
|
+
if (oldItems[index] && oldItems[index].element === element) {
|
|
138
|
+
// If the element is already registered, just use the same array
|
|
139
|
+
newItems = oldItems;
|
|
140
|
+
} else {
|
|
141
|
+
// When registering a descendant, we need to make sure we insert in
|
|
142
|
+
// into the array in the same order that it appears in the DOM. So as
|
|
143
|
+
// new descendants are added or maybe some are removed, we always know
|
|
144
|
+
// that the array is up-to-date and correct.
|
|
145
|
+
//
|
|
146
|
+
// So here we look at our registered descendants and see if the new
|
|
147
|
+
// element we are adding appears earlier than an existing descendant's
|
|
148
|
+
// DOM node via `node.compareDocumentPosition`. If it does, we insert
|
|
149
|
+
// the new element at this index. Because `registerDescendant` will be
|
|
150
|
+
// called in an effect every time the descendants state value changes,
|
|
151
|
+
// we should be sure that this index is accurate when descendent
|
|
152
|
+
// elements come or go from our component.
|
|
153
|
+
|
|
154
|
+
const newItem = _extends({}, other, {
|
|
155
|
+
element,
|
|
156
|
+
index
|
|
157
|
+
});
|
|
158
|
+
|
|
159
|
+
// If an index is not found we will push the element to the end.
|
|
160
|
+
newItems = oldItems.slice();
|
|
161
|
+
newItems.splice(index, 0, newItem);
|
|
162
|
+
}
|
|
163
|
+
newItems.forEach((item, position) => {
|
|
164
|
+
item.index = position;
|
|
165
|
+
});
|
|
166
|
+
return newItems;
|
|
167
|
+
});
|
|
168
|
+
}, []);
|
|
169
|
+
const unregisterDescendant = React.useCallback(element => {
|
|
170
|
+
set(oldItems => oldItems.filter(item => element !== item.element));
|
|
171
|
+
}, []);
|
|
172
|
+
const value = React.useMemo(() => ({
|
|
173
|
+
descendants: items,
|
|
174
|
+
registerDescendant,
|
|
175
|
+
unregisterDescendant,
|
|
176
|
+
parentId: id
|
|
177
|
+
}), [items, registerDescendant, unregisterDescendant, id]);
|
|
178
|
+
return /*#__PURE__*/_jsx(DescendantContext.Provider, {
|
|
179
|
+
value: value,
|
|
180
|
+
children: children
|
|
181
|
+
});
|
|
182
|
+
}
|
|
183
|
+
process.env.NODE_ENV !== "production" ? DescendantProvider.propTypes = {
|
|
184
|
+
children: PropTypes.node,
|
|
185
|
+
id: PropTypes.string
|
|
186
|
+
} : void 0;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
|
2
|
+
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
|
3
|
+
export function getTreeViewUtilityClass(slot) {
|
|
4
|
+
return generateUtilityClass('MuiTreeView', slot);
|
|
5
|
+
}
|
|
6
|
+
export const treeViewClasses = generateUtilityClasses('MuiTreeView', ['root']);
|
package/modern/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,400 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.TreeItem = void 0;
|
|
8
|
+
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
9
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
|
+
var React = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
12
|
+
var _clsx = _interopRequireDefault(require("clsx"));
|
|
13
|
+
var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
|
|
14
|
+
var _styles = require("@mui/material/styles");
|
|
15
|
+
var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
|
|
16
|
+
var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
|
|
17
|
+
var _unsupportedProp = _interopRequireDefault(require("@mui/utils/unsupportedProp"));
|
|
18
|
+
var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
|
|
19
|
+
var _base = require("@mui/base");
|
|
20
|
+
var _TreeViewContext = require("../TreeView/TreeViewContext");
|
|
21
|
+
var _descendants = require("../TreeView/descendants");
|
|
22
|
+
var _TreeItemContent = require("./TreeItemContent");
|
|
23
|
+
var _treeItemClasses = require("./treeItemClasses");
|
|
24
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
25
|
+
const _excluded = ["children", "className", "collapseIcon", "ContentComponent", "ContentProps", "endIcon", "expandIcon", "disabled", "icon", "id", "label", "nodeId", "onClick", "onMouseDown", "TransitionComponent", "TransitionProps"];
|
|
26
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
27
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
28
|
+
const useUtilityClasses = ownerState => {
|
|
29
|
+
const {
|
|
30
|
+
classes
|
|
31
|
+
} = ownerState;
|
|
32
|
+
const slots = {
|
|
33
|
+
root: ['root'],
|
|
34
|
+
content: ['content'],
|
|
35
|
+
expanded: ['expanded'],
|
|
36
|
+
selected: ['selected'],
|
|
37
|
+
focused: ['focused'],
|
|
38
|
+
disabled: ['disabled'],
|
|
39
|
+
iconContainer: ['iconContainer'],
|
|
40
|
+
label: ['label'],
|
|
41
|
+
group: ['group']
|
|
42
|
+
};
|
|
43
|
+
return (0, _base.unstable_composeClasses)(slots, _treeItemClasses.getTreeItemUtilityClass, classes);
|
|
44
|
+
};
|
|
45
|
+
const TreeItemRoot = (0, _styles.styled)('li', {
|
|
46
|
+
name: 'MuiTreeItem',
|
|
47
|
+
slot: 'Root',
|
|
48
|
+
overridesResolver: (props, styles) => styles.root
|
|
49
|
+
})({
|
|
50
|
+
listStyle: 'none',
|
|
51
|
+
margin: 0,
|
|
52
|
+
padding: 0,
|
|
53
|
+
outline: 0
|
|
54
|
+
});
|
|
55
|
+
const StyledTreeItemContent = (0, _styles.styled)(_TreeItemContent.TreeItemContent, {
|
|
56
|
+
name: 'MuiTreeItem',
|
|
57
|
+
slot: 'Content',
|
|
58
|
+
overridesResolver: (props, styles) => {
|
|
59
|
+
return [styles.content, styles.iconContainer && {
|
|
60
|
+
[`& .${_treeItemClasses.treeItemClasses.iconContainer}`]: styles.iconContainer
|
|
61
|
+
}, styles.label && {
|
|
62
|
+
[`& .${_treeItemClasses.treeItemClasses.label}`]: styles.label
|
|
63
|
+
}];
|
|
64
|
+
}
|
|
65
|
+
})(({
|
|
66
|
+
theme
|
|
67
|
+
}) => ({
|
|
68
|
+
padding: '0 8px',
|
|
69
|
+
width: '100%',
|
|
70
|
+
display: 'flex',
|
|
71
|
+
alignItems: 'center',
|
|
72
|
+
cursor: 'pointer',
|
|
73
|
+
WebkitTapHighlightColor: 'transparent',
|
|
74
|
+
'&:hover': {
|
|
75
|
+
backgroundColor: (theme.vars || theme).palette.action.hover,
|
|
76
|
+
// Reset on touch devices, it doesn't add specificity
|
|
77
|
+
'@media (hover: none)': {
|
|
78
|
+
backgroundColor: 'transparent'
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
[`&.${_treeItemClasses.treeItemClasses.disabled}`]: {
|
|
82
|
+
opacity: (theme.vars || theme).palette.action.disabledOpacity,
|
|
83
|
+
backgroundColor: 'transparent'
|
|
84
|
+
},
|
|
85
|
+
[`&.${_treeItemClasses.treeItemClasses.focused}`]: {
|
|
86
|
+
backgroundColor: (theme.vars || theme).palette.action.focus
|
|
87
|
+
},
|
|
88
|
+
[`&.${_treeItemClasses.treeItemClasses.selected}`]: {
|
|
89
|
+
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),
|
|
90
|
+
'&:hover': {
|
|
91
|
+
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),
|
|
92
|
+
// Reset on touch devices, it doesn't add specificity
|
|
93
|
+
'@media (hover: none)': {
|
|
94
|
+
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)
|
|
95
|
+
}
|
|
96
|
+
},
|
|
97
|
+
[`&.${_treeItemClasses.treeItemClasses.focused}`]: {
|
|
98
|
+
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)
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
[`& .${_treeItemClasses.treeItemClasses.iconContainer}`]: {
|
|
102
|
+
marginRight: 4,
|
|
103
|
+
width: 15,
|
|
104
|
+
display: 'flex',
|
|
105
|
+
flexShrink: 0,
|
|
106
|
+
justifyContent: 'center',
|
|
107
|
+
'& svg': {
|
|
108
|
+
fontSize: 18
|
|
109
|
+
}
|
|
110
|
+
},
|
|
111
|
+
[`& .${_treeItemClasses.treeItemClasses.label}`]: (0, _extends2.default)({
|
|
112
|
+
width: '100%',
|
|
113
|
+
// fixes overflow - see https://github.com/mui/material-ui/issues/27372
|
|
114
|
+
minWidth: 0,
|
|
115
|
+
paddingLeft: 4,
|
|
116
|
+
position: 'relative'
|
|
117
|
+
}, theme.typography.body1)
|
|
118
|
+
}));
|
|
119
|
+
const TreeItemGroup = (0, _styles.styled)(_Collapse.default, {
|
|
120
|
+
name: 'MuiTreeItem',
|
|
121
|
+
slot: 'Group',
|
|
122
|
+
overridesResolver: (props, styles) => styles.group
|
|
123
|
+
})({
|
|
124
|
+
margin: 0,
|
|
125
|
+
padding: 0,
|
|
126
|
+
marginLeft: 17
|
|
127
|
+
});
|
|
128
|
+
|
|
129
|
+
/**
|
|
130
|
+
*
|
|
131
|
+
* Demos:
|
|
132
|
+
*
|
|
133
|
+
* - [Tree View](https://mui.com/material-ui/react-tree-view/)
|
|
134
|
+
*
|
|
135
|
+
* API:
|
|
136
|
+
*
|
|
137
|
+
* - [TreeItem API](https://mui.com/material-ui/api/tree-item/)
|
|
138
|
+
*/
|
|
139
|
+
const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, ref) {
|
|
140
|
+
const props = (0, _styles.useThemeProps)({
|
|
141
|
+
props: inProps,
|
|
142
|
+
name: 'MuiTreeItem'
|
|
143
|
+
});
|
|
144
|
+
const {
|
|
145
|
+
children,
|
|
146
|
+
className,
|
|
147
|
+
collapseIcon,
|
|
148
|
+
ContentComponent = _TreeItemContent.TreeItemContent,
|
|
149
|
+
ContentProps,
|
|
150
|
+
endIcon,
|
|
151
|
+
expandIcon,
|
|
152
|
+
disabled: disabledProp,
|
|
153
|
+
icon,
|
|
154
|
+
id: idProp,
|
|
155
|
+
label,
|
|
156
|
+
nodeId,
|
|
157
|
+
onClick,
|
|
158
|
+
onMouseDown,
|
|
159
|
+
TransitionComponent = _Collapse.default,
|
|
160
|
+
TransitionProps
|
|
161
|
+
} = props,
|
|
162
|
+
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
|
|
163
|
+
const {
|
|
164
|
+
icons: contextIcons,
|
|
165
|
+
focus,
|
|
166
|
+
isExpanded,
|
|
167
|
+
isFocused,
|
|
168
|
+
isSelected,
|
|
169
|
+
isDisabled,
|
|
170
|
+
multiSelect,
|
|
171
|
+
disabledItemsFocusable,
|
|
172
|
+
mapFirstChar,
|
|
173
|
+
unMapFirstChar,
|
|
174
|
+
registerNode,
|
|
175
|
+
unregisterNode,
|
|
176
|
+
treeId
|
|
177
|
+
} = React.useContext(_TreeViewContext.TreeViewContext);
|
|
178
|
+
let id;
|
|
179
|
+
if (idProp != null) {
|
|
180
|
+
id = idProp;
|
|
181
|
+
} else if (treeId && nodeId) {
|
|
182
|
+
id = `${treeId}-${nodeId}`;
|
|
183
|
+
}
|
|
184
|
+
const [treeItemElement, setTreeItemElement] = React.useState(null);
|
|
185
|
+
const contentRef = React.useRef(null);
|
|
186
|
+
const handleRef = (0, _useForkRef.default)(setTreeItemElement, ref);
|
|
187
|
+
const descendant = React.useMemo(() => ({
|
|
188
|
+
element: treeItemElement,
|
|
189
|
+
id: nodeId
|
|
190
|
+
}), [nodeId, treeItemElement]);
|
|
191
|
+
const {
|
|
192
|
+
index,
|
|
193
|
+
parentId
|
|
194
|
+
} = (0, _descendants.useDescendant)(descendant);
|
|
195
|
+
const expandable = Boolean(Array.isArray(children) ? children.length : children);
|
|
196
|
+
const expanded = isExpanded ? isExpanded(nodeId) : false;
|
|
197
|
+
const focused = isFocused ? isFocused(nodeId) : false;
|
|
198
|
+
const selected = isSelected ? isSelected(nodeId) : false;
|
|
199
|
+
const disabled = isDisabled ? isDisabled(nodeId) : false;
|
|
200
|
+
const ownerState = (0, _extends2.default)({}, props, {
|
|
201
|
+
expanded,
|
|
202
|
+
focused,
|
|
203
|
+
selected,
|
|
204
|
+
disabled
|
|
205
|
+
});
|
|
206
|
+
const classes = useUtilityClasses(ownerState);
|
|
207
|
+
let displayIcon;
|
|
208
|
+
let expansionIcon;
|
|
209
|
+
if (expandable) {
|
|
210
|
+
if (!expanded) {
|
|
211
|
+
expansionIcon = expandIcon || contextIcons.defaultExpandIcon;
|
|
212
|
+
} else {
|
|
213
|
+
expansionIcon = collapseIcon || contextIcons.defaultCollapseIcon;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
if (expandable) {
|
|
217
|
+
displayIcon = contextIcons.defaultParentIcon;
|
|
218
|
+
} else {
|
|
219
|
+
displayIcon = endIcon || contextIcons.defaultEndIcon;
|
|
220
|
+
}
|
|
221
|
+
React.useEffect(() => {
|
|
222
|
+
// On the first render a node's index will be -1. We want to wait for the real index.
|
|
223
|
+
if (registerNode && unregisterNode && index !== -1) {
|
|
224
|
+
registerNode({
|
|
225
|
+
id: nodeId,
|
|
226
|
+
idAttribute: id,
|
|
227
|
+
index,
|
|
228
|
+
parentId,
|
|
229
|
+
expandable,
|
|
230
|
+
disabled: disabledProp
|
|
231
|
+
});
|
|
232
|
+
return () => {
|
|
233
|
+
unregisterNode(nodeId);
|
|
234
|
+
};
|
|
235
|
+
}
|
|
236
|
+
return undefined;
|
|
237
|
+
}, [registerNode, unregisterNode, parentId, index, nodeId, expandable, disabledProp, id]);
|
|
238
|
+
React.useEffect(() => {
|
|
239
|
+
if (mapFirstChar && unMapFirstChar && label) {
|
|
240
|
+
mapFirstChar(nodeId, (contentRef.current?.textContent ?? '').substring(0, 1).toLowerCase());
|
|
241
|
+
return () => {
|
|
242
|
+
unMapFirstChar(nodeId);
|
|
243
|
+
};
|
|
244
|
+
}
|
|
245
|
+
return undefined;
|
|
246
|
+
}, [mapFirstChar, unMapFirstChar, nodeId, label]);
|
|
247
|
+
let ariaSelected;
|
|
248
|
+
if (multiSelect) {
|
|
249
|
+
ariaSelected = selected;
|
|
250
|
+
} else if (selected) {
|
|
251
|
+
/* single-selection trees unset aria-selected on un-selected items.
|
|
252
|
+
*
|
|
253
|
+
* If the tree does not support multiple selection, aria-selected
|
|
254
|
+
* is set to true for the selected node and it is not present on any other node in the tree.
|
|
255
|
+
* Source: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
|
|
256
|
+
*/
|
|
257
|
+
ariaSelected = true;
|
|
258
|
+
}
|
|
259
|
+
function handleFocus(event) {
|
|
260
|
+
// DOM focus stays on the tree which manages focus with aria-activedescendant
|
|
261
|
+
if (event.target === event.currentTarget) {
|
|
262
|
+
let rootElement;
|
|
263
|
+
if (typeof event.target.getRootNode === 'function') {
|
|
264
|
+
rootElement = event.target.getRootNode();
|
|
265
|
+
} else {
|
|
266
|
+
rootElement = (0, _ownerDocument.default)(event.target);
|
|
267
|
+
}
|
|
268
|
+
rootElement.getElementById(treeId).focus({
|
|
269
|
+
preventScroll: true
|
|
270
|
+
});
|
|
271
|
+
}
|
|
272
|
+
const unfocusable = !disabledItemsFocusable && disabled;
|
|
273
|
+
if (!focused && event.currentTarget === event.target && !unfocusable) {
|
|
274
|
+
focus(event, nodeId);
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TreeItemRoot, (0, _extends2.default)({
|
|
278
|
+
className: (0, _clsx.default)(classes.root, className),
|
|
279
|
+
role: "treeitem",
|
|
280
|
+
"aria-expanded": expandable ? expanded : undefined,
|
|
281
|
+
"aria-selected": ariaSelected,
|
|
282
|
+
"aria-disabled": disabled || undefined,
|
|
283
|
+
id: id,
|
|
284
|
+
tabIndex: -1
|
|
285
|
+
}, other, {
|
|
286
|
+
ownerState: ownerState,
|
|
287
|
+
onFocus: handleFocus,
|
|
288
|
+
ref: handleRef,
|
|
289
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTreeItemContent, (0, _extends2.default)({
|
|
290
|
+
as: ContentComponent,
|
|
291
|
+
ref: contentRef,
|
|
292
|
+
classes: {
|
|
293
|
+
root: classes.content,
|
|
294
|
+
expanded: classes.expanded,
|
|
295
|
+
selected: classes.selected,
|
|
296
|
+
focused: classes.focused,
|
|
297
|
+
disabled: classes.disabled,
|
|
298
|
+
iconContainer: classes.iconContainer,
|
|
299
|
+
label: classes.label
|
|
300
|
+
},
|
|
301
|
+
label: label,
|
|
302
|
+
nodeId: nodeId,
|
|
303
|
+
onClick: onClick,
|
|
304
|
+
onMouseDown: onMouseDown,
|
|
305
|
+
icon: icon,
|
|
306
|
+
expansionIcon: expansionIcon,
|
|
307
|
+
displayIcon: displayIcon,
|
|
308
|
+
ownerState: ownerState
|
|
309
|
+
}, ContentProps)), children && /*#__PURE__*/(0, _jsxRuntime.jsx)(_descendants.DescendantProvider, {
|
|
310
|
+
id: nodeId,
|
|
311
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeItemGroup, (0, _extends2.default)({
|
|
312
|
+
as: TransitionComponent,
|
|
313
|
+
unmountOnExit: true,
|
|
314
|
+
className: classes.group,
|
|
315
|
+
in: expanded,
|
|
316
|
+
component: "ul",
|
|
317
|
+
role: "group"
|
|
318
|
+
}, TransitionProps, {
|
|
319
|
+
children: children
|
|
320
|
+
}))
|
|
321
|
+
})]
|
|
322
|
+
}));
|
|
323
|
+
});
|
|
324
|
+
exports.TreeItem = TreeItem;
|
|
325
|
+
process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
|
|
326
|
+
// ----------------------------- Warning --------------------------------
|
|
327
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
328
|
+
// | To update them edit the TypeScript types and run "yarn proptypes" |
|
|
329
|
+
// ----------------------------------------------------------------------
|
|
330
|
+
/**
|
|
331
|
+
* The content of the component.
|
|
332
|
+
*/
|
|
333
|
+
children: _propTypes.default.node,
|
|
334
|
+
/**
|
|
335
|
+
* Override or extend the styles applied to the component.
|
|
336
|
+
*/
|
|
337
|
+
classes: _propTypes.default.object,
|
|
338
|
+
/**
|
|
339
|
+
* className applied to the root element.
|
|
340
|
+
*/
|
|
341
|
+
className: _propTypes.default.string,
|
|
342
|
+
/**
|
|
343
|
+
* The icon used to collapse the node.
|
|
344
|
+
*/
|
|
345
|
+
collapseIcon: _propTypes.default.node,
|
|
346
|
+
/**
|
|
347
|
+
* The component used for the content node.
|
|
348
|
+
* @default TreeItemContent
|
|
349
|
+
*/
|
|
350
|
+
ContentComponent: _elementTypeAcceptingRef.default,
|
|
351
|
+
/**
|
|
352
|
+
* Props applied to ContentComponent.
|
|
353
|
+
*/
|
|
354
|
+
ContentProps: _propTypes.default.object,
|
|
355
|
+
/**
|
|
356
|
+
* If `true`, the node is disabled.
|
|
357
|
+
* @default false
|
|
358
|
+
*/
|
|
359
|
+
disabled: _propTypes.default.bool,
|
|
360
|
+
/**
|
|
361
|
+
* The icon displayed next to an end node.
|
|
362
|
+
*/
|
|
363
|
+
endIcon: _propTypes.default.node,
|
|
364
|
+
/**
|
|
365
|
+
* The icon used to expand the node.
|
|
366
|
+
*/
|
|
367
|
+
expandIcon: _propTypes.default.node,
|
|
368
|
+
/**
|
|
369
|
+
* The icon to display next to the tree node's label.
|
|
370
|
+
*/
|
|
371
|
+
icon: _propTypes.default.node,
|
|
372
|
+
/**
|
|
373
|
+
* The tree node label.
|
|
374
|
+
*/
|
|
375
|
+
label: _propTypes.default.node,
|
|
376
|
+
/**
|
|
377
|
+
* The id of the node.
|
|
378
|
+
*/
|
|
379
|
+
nodeId: _propTypes.default.string.isRequired,
|
|
380
|
+
/**
|
|
381
|
+
* This prop isn't supported.
|
|
382
|
+
* Use the `onNodeFocus` callback on the tree if you need to monitor a node's focus.
|
|
383
|
+
*/
|
|
384
|
+
onFocus: _unsupportedProp.default,
|
|
385
|
+
/**
|
|
386
|
+
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
387
|
+
*/
|
|
388
|
+
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]),
|
|
389
|
+
/**
|
|
390
|
+
* The component used for the transition.
|
|
391
|
+
* [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
|
|
392
|
+
* @default Collapse
|
|
393
|
+
*/
|
|
394
|
+
TransitionComponent: _propTypes.default.elementType,
|
|
395
|
+
/**
|
|
396
|
+
* Props applied to the transition element.
|
|
397
|
+
* By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
|
|
398
|
+
*/
|
|
399
|
+
TransitionProps: _propTypes.default.object
|
|
400
|
+
} : void 0;
|