@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.
Files changed (76) hide show
  1. package/CHANGELOG.md +3682 -0
  2. package/LICENSE +21 -0
  3. package/README.md +34 -0
  4. package/TreeItem/TreeItem.d.ts +13 -0
  5. package/TreeItem/TreeItem.js +392 -0
  6. package/TreeItem/TreeItem.types.d.ts +84 -0
  7. package/TreeItem/TreeItem.types.js +1 -0
  8. package/TreeItem/TreeItemContent.d.ts +52 -0
  9. package/TreeItem/TreeItemContent.js +101 -0
  10. package/TreeItem/index.d.ts +5 -0
  11. package/TreeItem/index.js +4 -0
  12. package/TreeItem/package.json +6 -0
  13. package/TreeItem/treeItemClasses.d.ts +23 -0
  14. package/TreeItem/treeItemClasses.js +6 -0
  15. package/TreeItem/useTreeItem.d.ts +10 -0
  16. package/TreeItem/useTreeItem.js +68 -0
  17. package/TreeView/TreeView.d.ts +14 -0
  18. package/TreeView/TreeView.js +854 -0
  19. package/TreeView/TreeView.types.d.ts +170 -0
  20. package/TreeView/TreeView.types.js +1 -0
  21. package/TreeView/TreeViewContext.d.ts +6 -0
  22. package/TreeView/TreeViewContext.js +31 -0
  23. package/TreeView/descendants.d.ts +42 -0
  24. package/TreeView/descendants.js +186 -0
  25. package/TreeView/index.d.ts +3 -0
  26. package/TreeView/index.js +3 -0
  27. package/TreeView/package.json +6 -0
  28. package/TreeView/treeViewClasses.d.ts +7 -0
  29. package/TreeView/treeViewClasses.js +6 -0
  30. package/index.d.ts +2 -0
  31. package/index.js +9 -0
  32. package/internals/models.d.ts +1 -0
  33. package/internals/models.js +1 -0
  34. package/legacy/TreeItem/TreeItem.js +391 -0
  35. package/legacy/TreeItem/TreeItem.types.js +1 -0
  36. package/legacy/TreeItem/TreeItemContent.js +98 -0
  37. package/legacy/TreeItem/index.js +4 -0
  38. package/legacy/TreeItem/treeItemClasses.js +6 -0
  39. package/legacy/TreeItem/useTreeItem.js +67 -0
  40. package/legacy/TreeView/TreeView.js +907 -0
  41. package/legacy/TreeView/TreeView.types.js +1 -0
  42. package/legacy/TreeView/TreeViewContext.js +41 -0
  43. package/legacy/TreeView/descendants.js +199 -0
  44. package/legacy/TreeView/index.js +3 -0
  45. package/legacy/TreeView/treeViewClasses.js +6 -0
  46. package/legacy/index.js +9 -0
  47. package/legacy/internals/models.js +1 -0
  48. package/modern/TreeItem/TreeItem.js +391 -0
  49. package/modern/TreeItem/TreeItem.types.js +1 -0
  50. package/modern/TreeItem/TreeItemContent.js +101 -0
  51. package/modern/TreeItem/index.js +4 -0
  52. package/modern/TreeItem/treeItemClasses.js +6 -0
  53. package/modern/TreeItem/useTreeItem.js +68 -0
  54. package/modern/TreeView/TreeView.js +853 -0
  55. package/modern/TreeView/TreeView.types.js +1 -0
  56. package/modern/TreeView/TreeViewContext.js +31 -0
  57. package/modern/TreeView/descendants.js +186 -0
  58. package/modern/TreeView/index.js +3 -0
  59. package/modern/TreeView/treeViewClasses.js +6 -0
  60. package/modern/index.js +9 -0
  61. package/modern/internals/models.js +1 -0
  62. package/node/TreeItem/TreeItem.js +400 -0
  63. package/node/TreeItem/TreeItem.types.js +5 -0
  64. package/node/TreeItem/TreeItemContent.js +109 -0
  65. package/node/TreeItem/index.js +38 -0
  66. package/node/TreeItem/treeItemClasses.js +15 -0
  67. package/node/TreeItem/useTreeItem.js +76 -0
  68. package/node/TreeView/TreeView.js +862 -0
  69. package/node/TreeView/TreeView.types.js +5 -0
  70. package/node/TreeView/TreeViewContext.js +40 -0
  71. package/node/TreeView/descendants.js +194 -0
  72. package/node/TreeView/index.js +27 -0
  73. package/node/TreeView/treeViewClasses.js +15 -0
  74. package/node/index.js +34 -0
  75. package/node/internals/models.js +5 -0
  76. 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,3 @@
1
+ export * from './TreeView';
2
+ export * from './treeViewClasses';
3
+ export {};
@@ -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']);
@@ -0,0 +1,9 @@
1
+ /**
2
+ * @mui/x-tree-view v6.0.0-alpha.0
3
+ *
4
+ * @license MIT
5
+ * This source code is licensed under the MIT license found in the
6
+ * LICENSE file in the root directory of this source tree.
7
+ */
8
+ export * from './TreeItem';
9
+ export * from './TreeView';
@@ -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;
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });