@mui/x-tree-view 8.16.0 → 8.18.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 +208 -1
- package/RichTreeView/RichTreeView.js +11 -11
- package/SimpleTreeView/SimpleTreeView.js +10 -10
- package/TreeItem/TreeItem.d.ts +1 -1
- package/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.d.ts +1 -2
- package/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.js +0 -2
- package/TreeItemIcon/TreeItemIcon.d.ts +1 -2
- package/TreeItemProvider/TreeItemProvider.d.ts +1 -2
- package/esm/RichTreeView/RichTreeView.js +11 -11
- package/esm/SimpleTreeView/SimpleTreeView.js +10 -10
- package/esm/TreeItem/TreeItem.d.ts +1 -1
- package/esm/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.d.ts +1 -2
- package/esm/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.js +0 -1
- package/esm/TreeItemIcon/TreeItemIcon.d.ts +1 -2
- package/esm/TreeItemProvider/TreeItemProvider.d.ts +1 -2
- package/esm/icons/icons.js +0 -1
- package/esm/index.js +1 -1
- package/esm/internals/TreeViewProvider/TreeViewChildrenItemProvider.d.ts +1 -1
- package/esm/internals/TreeViewProvider/TreeViewProvider.d.ts +1 -2
- package/esm/internals/components/RichTreeViewItems.d.ts +1 -1
- package/esm/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.d.ts +1 -1
- package/esm/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts +11 -11
- package/esm/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.d.ts +5 -4
- package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.types.d.ts +7 -7
- package/esm/internals/plugins/useTreeViewJSXItems/itemPlugin.d.ts +2 -0
- package/esm/internals/plugins/useTreeViewJSXItems/itemPlugin.js +74 -0
- package/esm/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js +2 -71
- package/esm/internals/plugins/useTreeViewLabel/itemPlugin.d.ts +11 -0
- package/esm/internals/plugins/useTreeViewLabel/useTreeViewLabel.js +1 -1
- package/esm/internals/plugins/useTreeViewLabel/useTreeViewLabel.types.d.ts +2 -11
- package/esm/internals/plugins/useTreeViewSelection/itemPlugin.d.ts +20 -0
- package/esm/internals/plugins/useTreeViewSelection/{useTreeViewSelection.itemPlugin.js → itemPlugin.js} +23 -3
- package/esm/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +1 -1
- package/esm/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.d.ts +20 -31
- package/esm/models/items.d.ts +1 -0
- package/esm/useTreeItem/useTreeItem.js +0 -15
- package/esm/useTreeItem/useTreeItem.types.d.ts +0 -1
- package/icons/icons.js +0 -2
- package/index.js +1 -1
- package/internals/TreeViewProvider/TreeViewChildrenItemProvider.d.ts +1 -1
- package/internals/TreeViewProvider/TreeViewProvider.d.ts +1 -2
- package/internals/components/RichTreeViewItems.d.ts +1 -1
- package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.d.ts +1 -1
- package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts +11 -11
- package/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.d.ts +5 -4
- package/internals/plugins/useTreeViewItems/useTreeViewItems.types.d.ts +7 -7
- package/internals/plugins/useTreeViewJSXItems/itemPlugin.d.ts +2 -0
- package/internals/plugins/useTreeViewJSXItems/itemPlugin.js +81 -0
- package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js +2 -71
- package/internals/plugins/useTreeViewLabel/itemPlugin.d.ts +11 -0
- package/internals/plugins/useTreeViewLabel/useTreeViewLabel.js +4 -4
- package/internals/plugins/useTreeViewLabel/useTreeViewLabel.types.d.ts +2 -11
- package/internals/plugins/useTreeViewSelection/itemPlugin.d.ts +20 -0
- package/internals/plugins/useTreeViewSelection/{useTreeViewSelection.itemPlugin.js → itemPlugin.js} +23 -3
- package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +2 -2
- package/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.d.ts +20 -31
- package/models/items.d.ts +1 -0
- package/package.json +3 -3
- package/useTreeItem/useTreeItem.js +0 -15
- package/useTreeItem/useTreeItem.types.d.ts +0 -1
- package/esm/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.d.ts +0 -2
- package/esm/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.d.ts +0 -2
- package/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.d.ts +0 -2
- package/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.d.ts +0 -2
- /package/esm/internals/plugins/useTreeViewLabel/{useTreeViewLabel.itemPlugin.js → itemPlugin.js} +0 -0
- /package/internals/plugins/useTreeViewLabel/{useTreeViewLabel.itemPlugin.js → itemPlugin.js} +0 -0
|
@@ -15,7 +15,7 @@ export declare const TreeItemErrorContainer: import("@emotion/styled").StyledCom
|
|
|
15
15
|
export declare const TreeItemLoadingContainer: import("@emotion/styled").StyledComponent<Pick<import("@mui/material/CircularProgress").CircularProgressProps, keyof import("@mui/material/CircularProgress").CircularProgressProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
16
16
|
export declare const TreeItemCheckbox: import("@emotion/styled").StyledComponent<Pick<Omit<CheckboxProps & {
|
|
17
17
|
visible?: boolean;
|
|
18
|
-
}, "ref"> & React.RefAttributes<HTMLButtonElement>, "form" | "slot" | "style" | "title" | "id" | "value" | "
|
|
18
|
+
}, "ref"> & React.RefAttributes<HTMLButtonElement>, "form" | "slot" | "style" | "title" | "id" | "value" | "content" | "disabled" | "slots" | "slotProps" | "className" | "classes" | "color" | "sx" | "suppressHydrationWarning" | "lang" | "name" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "icon" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "action" | "checked" | "visible" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "readOnly" | "required" | "size" | "indeterminate" | "component" | "checkedIcon" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "inputProps" | "inputRef" | "indeterminateIcon" | keyof React.RefAttributes<HTMLButtonElement>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
19
19
|
type TreeItemComponent = ((props: TreeItemProps & React.RefAttributes<HTMLLIElement>) => React.JSX.Element) & {
|
|
20
20
|
propTypes?: any;
|
|
21
21
|
};
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
import { TreeItemDragAndDropOverlayProps } from "./TreeItemDragAndDropOverlay.types.js";
|
|
3
|
-
declare function TreeItemDragAndDropOverlay(props: TreeItemDragAndDropOverlayProps):
|
|
2
|
+
declare function TreeItemDragAndDropOverlay(props: TreeItemDragAndDropOverlayProps): import("react/jsx-runtime").JSX.Element | null;
|
|
4
3
|
declare namespace TreeItemDragAndDropOverlay {
|
|
5
4
|
var propTypes: any;
|
|
6
5
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
import { TreeItemIconProps } from "./TreeItemIcon.types.js";
|
|
3
|
-
declare function TreeItemIcon(props: TreeItemIconProps):
|
|
2
|
+
declare function TreeItemIcon(props: TreeItemIconProps): import("react/jsx-runtime").JSX.Element | null;
|
|
4
3
|
declare namespace TreeItemIcon {
|
|
5
4
|
var propTypes: any;
|
|
6
5
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
import { TreeItemProviderProps } from "./TreeItemProvider.types.js";
|
|
3
|
-
declare function TreeItemProvider(props: TreeItemProviderProps):
|
|
2
|
+
declare function TreeItemProvider(props: TreeItemProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
4
3
|
declare namespace TreeItemProvider {
|
|
5
4
|
var propTypes: any;
|
|
6
5
|
}
|
package/esm/icons/icons.js
CHANGED
package/esm/index.js
CHANGED
|
@@ -5,7 +5,7 @@ interface TreeViewChildrenItemProviderProps {
|
|
|
5
5
|
idAttribute: string | null;
|
|
6
6
|
children: React.ReactNode;
|
|
7
7
|
}
|
|
8
|
-
export declare function TreeViewChildrenItemProvider(props: TreeViewChildrenItemProviderProps):
|
|
8
|
+
export declare function TreeViewChildrenItemProvider(props: TreeViewChildrenItemProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
export declare namespace TreeViewChildrenItemProvider {
|
|
10
10
|
var propTypes: any;
|
|
11
11
|
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
import { TreeViewProviderProps } from "./TreeViewProvider.types.js";
|
|
3
2
|
import { TreeViewAnyPluginSignature } from "../models/index.js";
|
|
4
3
|
/**
|
|
@@ -6,4 +5,4 @@ import { TreeViewAnyPluginSignature } from "../models/index.js";
|
|
|
6
5
|
*
|
|
7
6
|
* @ignore - do not document.
|
|
8
7
|
*/
|
|
9
|
-
export declare function TreeViewProvider<TSignatures extends readonly TreeViewAnyPluginSignature[]>(props: TreeViewProviderProps<TSignatures>):
|
|
8
|
+
export declare function TreeViewProvider<TSignatures extends readonly TreeViewAnyPluginSignature[]>(props: TreeViewProviderProps<TSignatures>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { SlotComponentProps } from '@mui/utils/types';
|
|
3
3
|
import { TreeItem, TreeItemProps } from "../../TreeItem/index.js";
|
|
4
4
|
import { TreeViewItemId } from "../../models/index.js";
|
|
5
|
-
export declare function RichTreeViewItems(props: RichTreeViewItemsProps):
|
|
5
|
+
export declare function RichTreeViewItems(props: RichTreeViewItemsProps): import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
interface RichTreeViewItemsOwnerState {
|
|
7
7
|
itemId: TreeViewItemId;
|
|
8
8
|
label: string;
|
|
@@ -4,7 +4,7 @@ export declare const expansionSelectors: {
|
|
|
4
4
|
/**
|
|
5
5
|
* Gets the expanded items as provided to the component.
|
|
6
6
|
*/
|
|
7
|
-
expandedItemsRaw: (state: TreeViewState<[UseTreeViewExpansionSignature]>) => string[];
|
|
7
|
+
expandedItemsRaw: (state: TreeViewState<[UseTreeViewExpansionSignature]>) => readonly string[];
|
|
8
8
|
/**
|
|
9
9
|
* Gets the expanded items as a Map.
|
|
10
10
|
*/
|
|
@@ -8,12 +8,12 @@ export interface UseTreeViewExpansionPublicAPI {
|
|
|
8
8
|
/**
|
|
9
9
|
* Change the expansion status of a given item.
|
|
10
10
|
* @param {object} parameters The parameters of the method.
|
|
11
|
-
* @param {
|
|
11
|
+
* @param {TreeViewItemId} parameters.itemId The id of the item to expand of collapse.
|
|
12
12
|
* @param {React.SyntheticEvent} parameters.event The DOM event that triggered the change.
|
|
13
13
|
* @param {boolean} parameters.shouldBeExpanded If `true` the item will be expanded. If `false` the item will be collapsed. If not defined, the item's expansion status will be the toggled.
|
|
14
14
|
*/
|
|
15
15
|
setItemExpansion: (parameters: {
|
|
16
|
-
itemId:
|
|
16
|
+
itemId: TreeViewItemId;
|
|
17
17
|
event?: React.SyntheticEvent;
|
|
18
18
|
shouldBeExpanded?: boolean;
|
|
19
19
|
}) => void;
|
|
@@ -36,12 +36,12 @@ export interface UseTreeViewExpansionInstance extends Omit<UseTreeViewExpansionP
|
|
|
36
36
|
* Is used by the `setItemExpansion` method and by the `useTreeViewLazyLoading` plugin.
|
|
37
37
|
* Unlike `setItemExpansion`, this method does not trigger the lazy loading.
|
|
38
38
|
* @param {object} parameters The parameters of the method.
|
|
39
|
-
* @param {
|
|
39
|
+
* @param {TreeViewItemId} parameters.itemId The id of the item to expand of collapse.
|
|
40
40
|
* @param {React.SyntheticEvent | null} parameters.event The DOM event that triggered the change.
|
|
41
41
|
* @param {boolean} parameters.shouldBeExpanded If `true` the item will be expanded. If `false` the item will be collapsed.
|
|
42
42
|
*/
|
|
43
43
|
applyItemExpansion: (parameters: {
|
|
44
|
-
itemId:
|
|
44
|
+
itemId: TreeViewItemId;
|
|
45
45
|
event: React.SyntheticEvent | null;
|
|
46
46
|
shouldBeExpanded: boolean;
|
|
47
47
|
}) => void;
|
|
@@ -55,26 +55,26 @@ export interface UseTreeViewExpansionParameters {
|
|
|
55
55
|
* Expanded item ids.
|
|
56
56
|
* Used when the item's expansion is controlled.
|
|
57
57
|
*/
|
|
58
|
-
expandedItems?:
|
|
58
|
+
expandedItems?: readonly TreeViewItemId[];
|
|
59
59
|
/**
|
|
60
60
|
* Expanded item ids.
|
|
61
61
|
* Used when the item's expansion is not controlled.
|
|
62
62
|
* @default []
|
|
63
63
|
*/
|
|
64
|
-
defaultExpandedItems?:
|
|
64
|
+
defaultExpandedItems?: readonly TreeViewItemId[];
|
|
65
65
|
/**
|
|
66
66
|
* Callback fired when Tree Items are expanded/collapsed.
|
|
67
67
|
* @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemExpansion()` method.
|
|
68
|
-
* @param {
|
|
68
|
+
* @param {TreeViewItemId[]} itemIds The ids of the expanded items.
|
|
69
69
|
*/
|
|
70
|
-
onExpandedItemsChange?: (event: React.SyntheticEvent | null, itemIds:
|
|
70
|
+
onExpandedItemsChange?: (event: React.SyntheticEvent | null, itemIds: TreeViewItemId[]) => void;
|
|
71
71
|
/**
|
|
72
72
|
* Callback fired when a Tree Item is expanded or collapsed.
|
|
73
73
|
* @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.
|
|
74
|
-
* @param {
|
|
74
|
+
* @param {TreeViewItemId} itemId The itemId of the modified item.
|
|
75
75
|
* @param {boolean} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
|
|
76
76
|
*/
|
|
77
|
-
onItemExpansionToggle?: (event: React.SyntheticEvent | null, itemId:
|
|
77
|
+
onItemExpansionToggle?: (event: React.SyntheticEvent | null, itemId: TreeViewItemId, isExpanded: boolean) => void;
|
|
78
78
|
/**
|
|
79
79
|
* The slot that triggers the item's expansion when clicked.
|
|
80
80
|
* @default 'content'
|
|
@@ -84,7 +84,7 @@ export interface UseTreeViewExpansionParameters {
|
|
|
84
84
|
export type UseTreeViewExpansionParametersWithDefaults = DefaultizedProps<UseTreeViewExpansionParameters, 'defaultExpandedItems'>;
|
|
85
85
|
export interface UseTreeViewExpansionState {
|
|
86
86
|
expansion: {
|
|
87
|
-
expandedItems:
|
|
87
|
+
expandedItems: readonly TreeViewItemId[];
|
|
88
88
|
expansionTrigger: 'content' | 'iconContainer';
|
|
89
89
|
};
|
|
90
90
|
}
|
|
@@ -3,6 +3,7 @@ import { TreeViewPluginSignature } from "../../models/index.js";
|
|
|
3
3
|
import type { UseTreeViewItemsSignature } from "../useTreeViewItems/index.js";
|
|
4
4
|
import type { UseTreeViewSelectionSignature } from "../useTreeViewSelection/index.js";
|
|
5
5
|
import { UseTreeViewExpansionSignature } from "../useTreeViewExpansion/index.js";
|
|
6
|
+
import { TreeViewItemId } from "../../../models/index.js";
|
|
6
7
|
export interface UseTreeViewFocusPublicAPI {
|
|
7
8
|
/**
|
|
8
9
|
* Focus the item with the given id.
|
|
@@ -12,7 +13,7 @@ export interface UseTreeViewFocusPublicAPI {
|
|
|
12
13
|
* @param {React.SyntheticEvent | null} event The DOM event that triggered the change.
|
|
13
14
|
* @param {TreeViewItemId} itemId The id of the item to focus.
|
|
14
15
|
*/
|
|
15
|
-
focusItem: (event: React.SyntheticEvent | null, itemId:
|
|
16
|
+
focusItem: (event: React.SyntheticEvent | null, itemId: TreeViewItemId) => void;
|
|
16
17
|
}
|
|
17
18
|
export interface UseTreeViewFocusInstance extends UseTreeViewFocusPublicAPI {
|
|
18
19
|
/**
|
|
@@ -24,14 +25,14 @@ export interface UseTreeViewFocusParameters {
|
|
|
24
25
|
/**
|
|
25
26
|
* Callback fired when a given Tree Item is focused.
|
|
26
27
|
* @param {React.SyntheticEvent | null} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
|
|
27
|
-
* @param {
|
|
28
|
+
* @param {TreeViewItemId} itemId The id of the focused item.
|
|
28
29
|
*/
|
|
29
|
-
onItemFocus?: (event: React.SyntheticEvent | null, itemId:
|
|
30
|
+
onItemFocus?: (event: React.SyntheticEvent | null, itemId: TreeViewItemId) => void;
|
|
30
31
|
}
|
|
31
32
|
export type UseTreeViewFocusParametersWithDefaults = UseTreeViewFocusParameters;
|
|
32
33
|
export interface UseTreeViewFocusState {
|
|
33
34
|
focus: {
|
|
34
|
-
focusedItemId:
|
|
35
|
+
focusedItemId: TreeViewItemId | null;
|
|
35
36
|
};
|
|
36
37
|
}
|
|
37
38
|
export type UseTreeViewFocusSignature = TreeViewPluginSignature<{
|
|
@@ -11,7 +11,7 @@ export interface UseTreeViewItemsPublicAPI<R extends {}> {
|
|
|
11
11
|
/**
|
|
12
12
|
* Get the item with the given id.
|
|
13
13
|
* When used in the Simple Tree View, it returns an object with the `id` and `label` properties.
|
|
14
|
-
* @param {
|
|
14
|
+
* @param {TreeViewItemId} itemId The id of the item to retrieve.
|
|
15
15
|
* @returns {R} The item with the given id.
|
|
16
16
|
*/
|
|
17
17
|
getItem: (itemId: TreeViewItemId) => R;
|
|
@@ -45,7 +45,7 @@ export interface UseTreeViewItemsPublicAPI<R extends {}> {
|
|
|
45
45
|
shouldBeDisabled?: boolean;
|
|
46
46
|
}) => void;
|
|
47
47
|
/** * Get the id of the parent item.
|
|
48
|
-
* @param {
|
|
48
|
+
* @param {TreeViewItemId} itemId The id of the item to whose parentId we want to retrieve.
|
|
49
49
|
* @returns {TreeViewItemId | null} The id of the parent item.
|
|
50
50
|
*/
|
|
51
51
|
getParentId: (itemId: TreeViewItemId) => TreeViewItemId | null;
|
|
@@ -88,7 +88,7 @@ export interface UseTreeViewItemsParameters<R extends {
|
|
|
88
88
|
children?: R[];
|
|
89
89
|
}> {
|
|
90
90
|
/**
|
|
91
|
-
*
|
|
91
|
+
* Whether the items should be focusable when disabled.
|
|
92
92
|
* @default false
|
|
93
93
|
*/
|
|
94
94
|
disabledItemsFocusable?: boolean;
|
|
@@ -123,16 +123,16 @@ export interface UseTreeViewItemsParameters<R extends {
|
|
|
123
123
|
*
|
|
124
124
|
* @template R
|
|
125
125
|
* @param {R} item The item to check.
|
|
126
|
-
* @returns {
|
|
126
|
+
* @returns {TreeViewItemId} The id of the item.
|
|
127
127
|
* @default (item) => item.id
|
|
128
128
|
*/
|
|
129
129
|
getItemId?: (item: R) => TreeViewItemId;
|
|
130
130
|
/**
|
|
131
131
|
* Callback fired when the `content` slot of a given Tree Item is clicked.
|
|
132
132
|
* @param {React.MouseEvent} event The DOM event that triggered the change.
|
|
133
|
-
* @param {
|
|
133
|
+
* @param {TreeViewItemId} itemId The id of the focused item.
|
|
134
134
|
*/
|
|
135
|
-
onItemClick?: (event: React.MouseEvent, itemId:
|
|
135
|
+
onItemClick?: (event: React.MouseEvent, itemId: TreeViewItemId) => void;
|
|
136
136
|
/**
|
|
137
137
|
* Horizontal indentation between an item and its children.
|
|
138
138
|
* Examples: 24, "24px", "2rem", "2em".
|
|
@@ -146,7 +146,7 @@ export type UseTreeViewItemsParametersWithDefaults<R extends {
|
|
|
146
146
|
export interface UseTreeViewItemsState<R extends {}> {
|
|
147
147
|
items: {
|
|
148
148
|
/**
|
|
149
|
-
*
|
|
149
|
+
* Whether the items should be focusable when disabled.
|
|
150
150
|
* Always equal to `props.disabledItemsFocusable` (or `false` if not provided).
|
|
151
151
|
*/
|
|
152
152
|
disabledItemsFocusable: boolean;
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { useStore } from '@mui/x-internals/store';
|
|
5
|
+
import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs';
|
|
6
|
+
import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
|
|
7
|
+
import { useTreeViewContext } from "../../TreeViewProvider/index.js";
|
|
8
|
+
import { TreeViewChildrenItemContext } from "../../TreeViewProvider/TreeViewChildrenItemProvider.js";
|
|
9
|
+
import { itemHasChildren } from "../../../hooks/useTreeItemUtils/useTreeItemUtils.js";
|
|
10
|
+
import { idSelectors } from "../../corePlugins/useTreeViewId/index.js";
|
|
11
|
+
import { generateTreeItemIdAttribute } from "../../corePlugins/useTreeViewId/useTreeViewId.utils.js";
|
|
12
|
+
export const useTreeViewJSXItemsItemPlugin = ({
|
|
13
|
+
props,
|
|
14
|
+
rootRef,
|
|
15
|
+
contentRef
|
|
16
|
+
}) => {
|
|
17
|
+
const {
|
|
18
|
+
instance,
|
|
19
|
+
store
|
|
20
|
+
} = useTreeViewContext();
|
|
21
|
+
const {
|
|
22
|
+
children,
|
|
23
|
+
disabled = false,
|
|
24
|
+
label,
|
|
25
|
+
itemId,
|
|
26
|
+
id
|
|
27
|
+
} = props;
|
|
28
|
+
const parentContext = React.useContext(TreeViewChildrenItemContext);
|
|
29
|
+
if (parentContext == null) {
|
|
30
|
+
throw new Error(['MUI X: Could not find the Tree View Children Item context.', 'It looks like you rendered your component outside of a SimpleTreeView parent component.', 'This can also happen if you are bundling multiple versions of the Tree View.'].join('\n'));
|
|
31
|
+
}
|
|
32
|
+
const {
|
|
33
|
+
registerChild,
|
|
34
|
+
unregisterChild,
|
|
35
|
+
parentId
|
|
36
|
+
} = parentContext;
|
|
37
|
+
const expandable = itemHasChildren(children);
|
|
38
|
+
const pluginContentRef = React.useRef(null);
|
|
39
|
+
const handleContentRef = useMergedRefs(pluginContentRef, contentRef);
|
|
40
|
+
const treeId = useStore(store, idSelectors.treeId);
|
|
41
|
+
|
|
42
|
+
// Prevent any flashing
|
|
43
|
+
useIsoLayoutEffect(() => {
|
|
44
|
+
const idAttribute = generateTreeItemIdAttribute({
|
|
45
|
+
itemId,
|
|
46
|
+
treeId,
|
|
47
|
+
id
|
|
48
|
+
});
|
|
49
|
+
registerChild(idAttribute, itemId);
|
|
50
|
+
return () => {
|
|
51
|
+
unregisterChild(idAttribute);
|
|
52
|
+
unregisterChild(idAttribute);
|
|
53
|
+
};
|
|
54
|
+
}, [store, instance, registerChild, unregisterChild, itemId, id, treeId]);
|
|
55
|
+
useIsoLayoutEffect(() => {
|
|
56
|
+
return instance.insertJSXItem({
|
|
57
|
+
id: itemId,
|
|
58
|
+
idAttribute: id,
|
|
59
|
+
parentId,
|
|
60
|
+
expandable,
|
|
61
|
+
disabled
|
|
62
|
+
});
|
|
63
|
+
}, [instance, parentId, itemId, expandable, disabled, id]);
|
|
64
|
+
React.useEffect(() => {
|
|
65
|
+
if (label) {
|
|
66
|
+
return instance.mapLabelFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').toLowerCase());
|
|
67
|
+
}
|
|
68
|
+
return undefined;
|
|
69
|
+
}, [instance, itemId, label]);
|
|
70
|
+
return {
|
|
71
|
+
contentRef: handleContentRef,
|
|
72
|
+
rootRef
|
|
73
|
+
};
|
|
74
|
+
};
|
|
@@ -2,17 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
4
|
import * as React from 'react';
|
|
5
|
-
import { useStore } from '@mui/x-internals/store';
|
|
6
5
|
import { useEventCallback } from '@base-ui-components/utils/useEventCallback';
|
|
7
|
-
import {
|
|
8
|
-
import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
|
|
9
|
-
import { useTreeViewContext } from "../../TreeViewProvider/index.js";
|
|
10
|
-
import { TreeViewChildrenItemContext, TreeViewChildrenItemProvider } from "../../TreeViewProvider/TreeViewChildrenItemProvider.js";
|
|
6
|
+
import { TreeViewChildrenItemProvider } from "../../TreeViewProvider/TreeViewChildrenItemProvider.js";
|
|
11
7
|
import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "../useTreeViewItems/useTreeViewItems.utils.js";
|
|
12
8
|
import { TreeViewItemDepthContext } from "../../TreeViewItemDepthContext/index.js";
|
|
13
|
-
import {
|
|
14
|
-
import { itemHasChildren } from "../../../hooks/useTreeItemUtils/useTreeItemUtils.js";
|
|
15
|
-
import { idSelectors } from "../../corePlugins/useTreeViewId/index.js";
|
|
9
|
+
import { useTreeViewJSXItemsItemPlugin } from "./itemPlugin.js";
|
|
16
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
17
11
|
export const useTreeViewJSXItems = ({
|
|
18
12
|
instance,
|
|
@@ -78,69 +72,6 @@ export const useTreeViewJSXItems = ({
|
|
|
78
72
|
}
|
|
79
73
|
};
|
|
80
74
|
};
|
|
81
|
-
const useTreeViewJSXItemsItemPlugin = ({
|
|
82
|
-
props,
|
|
83
|
-
rootRef,
|
|
84
|
-
contentRef
|
|
85
|
-
}) => {
|
|
86
|
-
const {
|
|
87
|
-
instance,
|
|
88
|
-
store
|
|
89
|
-
} = useTreeViewContext();
|
|
90
|
-
const {
|
|
91
|
-
children,
|
|
92
|
-
disabled = false,
|
|
93
|
-
label,
|
|
94
|
-
itemId,
|
|
95
|
-
id
|
|
96
|
-
} = props;
|
|
97
|
-
const parentContext = React.useContext(TreeViewChildrenItemContext);
|
|
98
|
-
if (parentContext == null) {
|
|
99
|
-
throw new Error(['MUI X: Could not find the Tree View Children Item context.', 'It looks like you rendered your component outside of a SimpleTreeView parent component.', 'This can also happen if you are bundling multiple versions of the Tree View.'].join('\n'));
|
|
100
|
-
}
|
|
101
|
-
const {
|
|
102
|
-
registerChild,
|
|
103
|
-
unregisterChild,
|
|
104
|
-
parentId
|
|
105
|
-
} = parentContext;
|
|
106
|
-
const expandable = itemHasChildren(children);
|
|
107
|
-
const pluginContentRef = React.useRef(null);
|
|
108
|
-
const handleContentRef = useMergedRefs(pluginContentRef, contentRef);
|
|
109
|
-
const treeId = useStore(store, idSelectors.treeId);
|
|
110
|
-
|
|
111
|
-
// Prevent any flashing
|
|
112
|
-
useIsoLayoutEffect(() => {
|
|
113
|
-
const idAttribute = generateTreeItemIdAttribute({
|
|
114
|
-
itemId,
|
|
115
|
-
treeId,
|
|
116
|
-
id
|
|
117
|
-
});
|
|
118
|
-
registerChild(idAttribute, itemId);
|
|
119
|
-
return () => {
|
|
120
|
-
unregisterChild(idAttribute);
|
|
121
|
-
unregisterChild(idAttribute);
|
|
122
|
-
};
|
|
123
|
-
}, [store, instance, registerChild, unregisterChild, itemId, id, treeId]);
|
|
124
|
-
useIsoLayoutEffect(() => {
|
|
125
|
-
return instance.insertJSXItem({
|
|
126
|
-
id: itemId,
|
|
127
|
-
idAttribute: id,
|
|
128
|
-
parentId,
|
|
129
|
-
expandable,
|
|
130
|
-
disabled
|
|
131
|
-
});
|
|
132
|
-
}, [instance, parentId, itemId, expandable, disabled, id]);
|
|
133
|
-
React.useEffect(() => {
|
|
134
|
-
if (label) {
|
|
135
|
-
return instance.mapLabelFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').toLowerCase());
|
|
136
|
-
}
|
|
137
|
-
return undefined;
|
|
138
|
-
}, [instance, itemId, label]);
|
|
139
|
-
return {
|
|
140
|
-
contentRef: handleContentRef,
|
|
141
|
-
rootRef
|
|
142
|
-
};
|
|
143
|
-
};
|
|
144
75
|
useTreeViewJSXItems.itemPlugin = useTreeViewJSXItemsItemPlugin;
|
|
145
76
|
useTreeViewJSXItems.wrapItem = ({
|
|
146
77
|
children,
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { TreeViewItemPlugin } from "../../models/index.js";
|
|
2
|
+
import { TreeItemLabelInputProps } from "../../../TreeItemLabelInput/index.js";
|
|
3
|
+
export declare const useTreeViewLabelItemPlugin: TreeViewItemPlugin;
|
|
4
|
+
export interface UseTreeItemLabelInputSlotPropsFromLabelEditing extends TreeItemLabelInputProps {}
|
|
5
|
+
export interface UseTreeItemLabelSlotPropsFromLabelEditing {
|
|
6
|
+
editable?: boolean;
|
|
7
|
+
}
|
|
8
|
+
declare module '@mui/x-tree-view/useTreeItem' {
|
|
9
|
+
interface UseTreeItemLabelInputSlotOwnProps extends UseTreeItemLabelInputSlotPropsFromLabelEditing {}
|
|
10
|
+
interface UseTreeItemLabelSlotOwnProps extends UseTreeItemLabelSlotPropsFromLabelEditing {}
|
|
11
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
|
|
3
|
-
import { useTreeViewLabelItemPlugin } from "./
|
|
3
|
+
import { useTreeViewLabelItemPlugin } from "./itemPlugin.js";
|
|
4
4
|
import { labelSelectors } from "./useTreeViewLabel.selectors.js";
|
|
5
5
|
export const useTreeViewLabel = ({
|
|
6
6
|
store,
|
|
@@ -2,7 +2,6 @@ import { DefaultizedProps } from '@mui/x-internals/types';
|
|
|
2
2
|
import { TreeViewPluginSignature } from "../../models/index.js";
|
|
3
3
|
import { TreeViewItemId } from "../../../models/index.js";
|
|
4
4
|
import { UseTreeViewItemsSignature } from "../useTreeViewItems/index.js";
|
|
5
|
-
import { TreeItemLabelInputProps } from "../../../TreeItemLabelInput/index.js";
|
|
6
5
|
export interface UseTreeViewLabelPublicAPI {
|
|
7
6
|
/**
|
|
8
7
|
* Used to update the label of an item.
|
|
@@ -38,7 +37,7 @@ export type UseTreeViewLabelParametersWithDefaults<R extends {}> = DefaultizedPr
|
|
|
38
37
|
export interface UseTreeViewLabelState {
|
|
39
38
|
label: {
|
|
40
39
|
isItemEditable: ((item: any) => boolean) | boolean;
|
|
41
|
-
editedItemId:
|
|
40
|
+
editedItemId: TreeViewItemId | null;
|
|
42
41
|
};
|
|
43
42
|
}
|
|
44
43
|
export type UseTreeViewLabelSignature = TreeViewPluginSignature<{
|
|
@@ -48,12 +47,4 @@ export type UseTreeViewLabelSignature = TreeViewPluginSignature<{
|
|
|
48
47
|
instance: UseTreeViewLabelInstance;
|
|
49
48
|
state: UseTreeViewLabelState;
|
|
50
49
|
dependencies: [UseTreeViewItemsSignature];
|
|
51
|
-
}>;
|
|
52
|
-
export interface UseTreeItemLabelInputSlotPropsFromLabelEditing extends TreeItemLabelInputProps {}
|
|
53
|
-
export interface UseTreeItemLabelSlotPropsFromLabelEditing {
|
|
54
|
-
editable?: boolean;
|
|
55
|
-
}
|
|
56
|
-
declare module '@mui/x-tree-view/useTreeItem' {
|
|
57
|
-
interface UseTreeItemLabelInputSlotOwnProps extends UseTreeItemLabelInputSlotPropsFromLabelEditing {}
|
|
58
|
-
interface UseTreeItemLabelSlotOwnProps extends UseTreeItemLabelSlotPropsFromLabelEditing {}
|
|
59
|
-
}
|
|
50
|
+
}>;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { TreeViewCancellableEventHandler } from "../../../models/index.js";
|
|
3
|
+
import { TreeViewItemPlugin } from "../../models/index.js";
|
|
4
|
+
export declare const useTreeViewSelectionItemPlugin: TreeViewItemPlugin;
|
|
5
|
+
interface UseTreeItemRootSlotPropsFromSelection {
|
|
6
|
+
'aria-checked': React.AriaAttributes['aria-checked'];
|
|
7
|
+
}
|
|
8
|
+
interface UseTreeItemCheckboxSlotPropsFromSelection {
|
|
9
|
+
visible?: boolean;
|
|
10
|
+
checked?: boolean;
|
|
11
|
+
indeterminate?: boolean;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
tabIndex?: -1;
|
|
14
|
+
onChange?: TreeViewCancellableEventHandler<React.ChangeEvent<HTMLInputElement>>;
|
|
15
|
+
}
|
|
16
|
+
declare module '@mui/x-tree-view/useTreeItem' {
|
|
17
|
+
interface UseTreeItemRootSlotOwnProps extends UseTreeItemRootSlotPropsFromSelection {}
|
|
18
|
+
interface UseTreeItemCheckboxSlotOwnProps extends UseTreeItemCheckboxSlotPropsFromSelection {}
|
|
19
|
+
}
|
|
20
|
+
export {};
|
|
@@ -45,9 +45,29 @@ export const useTreeViewSelectionItemPlugin = ({
|
|
|
45
45
|
} = useTreeViewContext();
|
|
46
46
|
const isCheckboxSelectionEnabled = useStore(store, selectionSelectors.isCheckboxSelectionEnabled);
|
|
47
47
|
const isItemSelectionEnabled = useStore(store, selectionSelectors.canItemBeSelected, itemId);
|
|
48
|
-
const
|
|
48
|
+
const selectionStatus = useStore(store, selectorCheckboxSelectionStatus, itemId);
|
|
49
|
+
const isSelectionEnabledForItem = useStore(store, selectionSelectors.canItemBeSelected, itemId);
|
|
49
50
|
return {
|
|
50
51
|
propsEnhancers: {
|
|
52
|
+
root: () => {
|
|
53
|
+
// https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
|
|
54
|
+
let ariaChecked;
|
|
55
|
+
if (selectionStatus === 'checked') {
|
|
56
|
+
// - each selected node has aria-checked set to true.
|
|
57
|
+
ariaChecked = true;
|
|
58
|
+
} else if (selectionStatus === 'indeterminate') {
|
|
59
|
+
ariaChecked = 'mixed';
|
|
60
|
+
} else if (!isSelectionEnabledForItem) {
|
|
61
|
+
// - if the tree contains nodes that are not selectable, aria-checked is not present on those nodes.
|
|
62
|
+
ariaChecked = undefined;
|
|
63
|
+
} else {
|
|
64
|
+
// - all nodes that are selectable but not selected have aria-checked set to false.
|
|
65
|
+
ariaChecked = false;
|
|
66
|
+
}
|
|
67
|
+
return {
|
|
68
|
+
'aria-checked': ariaChecked
|
|
69
|
+
};
|
|
70
|
+
},
|
|
51
71
|
checkbox: ({
|
|
52
72
|
externalEventHandlers,
|
|
53
73
|
interactions
|
|
@@ -67,8 +87,8 @@ export const useTreeViewSelectionItemPlugin = ({
|
|
|
67
87
|
onChange: handleChange,
|
|
68
88
|
visible: isCheckboxSelectionEnabled,
|
|
69
89
|
disabled: !isItemSelectionEnabled,
|
|
70
|
-
checked:
|
|
71
|
-
indeterminate:
|
|
90
|
+
checked: selectionStatus === 'checked',
|
|
91
|
+
indeterminate: selectionStatus === 'indeterminate'
|
|
72
92
|
};
|
|
73
93
|
}
|
|
74
94
|
}
|
|
@@ -5,7 +5,7 @@ import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect
|
|
|
5
5
|
import { findOrderInTremauxTree, getAllNavigableItems, getFirstNavigableItem, getLastNavigableItem, getNonDisabledItemsInRange } from "../../utils/tree.js";
|
|
6
6
|
import { propagateSelection, getAddedAndRemovedItems, getLookupFromArray } from "./useTreeViewSelection.utils.js";
|
|
7
7
|
import { selectionSelectors } from "./useTreeViewSelection.selectors.js";
|
|
8
|
-
import { useTreeViewSelectionItemPlugin } from "./
|
|
8
|
+
import { useTreeViewSelectionItemPlugin } from "./itemPlugin.js";
|
|
9
9
|
export const useTreeViewSelection = ({
|
|
10
10
|
store,
|
|
11
11
|
params
|