@mui/x-tree-view 7.6.1 → 7.7.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 +147 -0
- package/RichTreeView/RichTreeView.d.ts +1 -3
- package/RichTreeView/RichTreeView.js +12 -15
- package/RichTreeView/RichTreeView.plugins.d.ts +13 -0
- package/RichTreeView/RichTreeView.plugins.js +10 -0
- package/RichTreeView/RichTreeView.types.d.ts +6 -6
- package/RichTreeView/index.d.ts +2 -0
- package/RichTreeView/index.js +1 -1
- package/SimpleTreeView/SimpleTreeView.d.ts +1 -1
- package/SimpleTreeView/SimpleTreeView.js +11 -14
- package/SimpleTreeView/SimpleTreeView.plugins.d.ts +12 -7
- package/SimpleTreeView/SimpleTreeView.plugins.js +8 -2
- package/SimpleTreeView/SimpleTreeView.types.d.ts +3 -3
- package/TreeItem/TreeItem.js +7 -1
- package/TreeItem/TreeItem.types.d.ts +22 -1
- package/TreeItem2/TreeItem2.js +12 -2
- package/TreeItem2/TreeItem2.types.d.ts +10 -1
- package/TreeView/TreeView.js +2 -1
- package/hooks/useTreeViewApiRef.d.ts +1 -1
- package/index.js +1 -1
- package/internals/TreeViewProvider/TreeViewContext.d.ts +2 -2
- package/internals/TreeViewProvider/TreeViewProvider.d.ts +1 -1
- package/internals/TreeViewProvider/TreeViewProvider.types.d.ts +10 -9
- package/internals/TreeViewProvider/index.d.ts +1 -1
- package/internals/TreeViewProvider/useTreeViewContext.d.ts +1 -1
- package/internals/corePlugins/corePlugins.d.ts +2 -2
- package/internals/corePlugins/index.d.ts +1 -1
- package/internals/hooks/useInstanceEventHandler.d.ts +2 -2
- package/internals/index.d.ts +1 -5
- package/internals/index.js +1 -3
- package/internals/models/helpers.d.ts +3 -16
- package/internals/models/plugin.d.ts +9 -9
- package/internals/models/treeView.d.ts +5 -4
- package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +4 -5
- package/internals/useTreeView/extractPluginParamsFromProps.d.ts +13 -0
- package/internals/{utils → useTreeView}/extractPluginParamsFromProps.js +16 -16
- package/internals/useTreeView/index.d.ts +0 -1
- package/internals/useTreeView/useTreeView.d.ts +4 -4
- package/internals/useTreeView/useTreeView.js +85 -72
- package/internals/useTreeView/useTreeView.types.d.ts +13 -12
- package/internals/useTreeView/useTreeViewModels.d.ts +3 -2
- package/internals/utils/publishTreeViewEvent.d.ts +1 -1
- package/internals/zero-styled/index.d.ts +3 -0
- package/internals/zero-styled/index.js +7 -0
- package/modern/RichTreeView/RichTreeView.js +12 -15
- package/modern/RichTreeView/RichTreeView.plugins.js +10 -0
- package/modern/RichTreeView/index.js +1 -1
- package/modern/SimpleTreeView/SimpleTreeView.js +11 -14
- package/modern/SimpleTreeView/SimpleTreeView.plugins.js +8 -2
- package/modern/TreeItem/TreeItem.js +7 -1
- package/modern/TreeItem2/TreeItem2.js +12 -2
- package/modern/TreeView/TreeView.js +2 -1
- package/modern/index.js +1 -1
- package/modern/internals/index.js +1 -3
- package/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +4 -5
- package/modern/internals/{utils → useTreeView}/extractPluginParamsFromProps.js +16 -16
- package/modern/internals/useTreeView/useTreeView.js +85 -72
- package/modern/internals/zero-styled/index.js +7 -0
- package/node/RichTreeView/RichTreeView.js +14 -17
- package/node/RichTreeView/RichTreeView.plugins.js +16 -0
- package/node/RichTreeView/index.js +13 -1
- package/node/SimpleTreeView/SimpleTreeView.js +13 -16
- package/node/SimpleTreeView/SimpleTreeView.plugins.js +8 -2
- package/node/TreeItem/TreeItem.js +10 -4
- package/node/TreeItem2/TreeItem2.js +18 -8
- package/node/TreeView/TreeView.js +4 -3
- package/node/index.js +1 -1
- package/node/internals/index.js +1 -15
- package/node/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +4 -5
- package/node/internals/{utils → useTreeView}/extractPluginParamsFromProps.js +16 -16
- package/node/internals/useTreeView/useTreeView.js +85 -72
- package/node/internals/zero-styled/index.js +17 -0
- package/package.json +2 -2
- package/useTreeItem2/useTreeItem2.d.ts +2 -2
- package/useTreeItem2/useTreeItem2.types.d.ts +14 -2
- package/internals/plugins/defaultPlugins.d.ts +0 -13
- package/internals/plugins/defaultPlugins.js +0 -10
- package/internals/plugins/index.d.ts +0 -2
- package/internals/plugins/index.js +0 -1
- package/internals/utils/extractPluginParamsFromProps.d.ts +0 -18
- package/modern/internals/plugins/defaultPlugins.js +0 -10
- package/modern/internals/plugins/index.js +0 -1
- package/node/internals/plugins/defaultPlugins.js +0 -16
- package/node/internals/plugins/index.js +0 -12
|
@@ -3,10 +3,10 @@ import * as React from 'react';
|
|
|
3
3
|
* @ignore - internal component.
|
|
4
4
|
*/
|
|
5
5
|
export declare const TreeViewContext: React.Context<{
|
|
6
|
-
instance:
|
|
6
|
+
instance: import("../corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.types").UseTreeViewInstanceEventsInstance;
|
|
7
7
|
publicAPI: {};
|
|
8
8
|
rootRef: React.RefObject<HTMLUListElement>;
|
|
9
9
|
wrapItem: import("../models").TreeItemWrapper<any>;
|
|
10
10
|
wrapRoot: import("../models").TreeRootWrapper<any>;
|
|
11
|
-
runItemPlugins:
|
|
11
|
+
runItemPlugins: import("./TreeViewProvider.types").TreeViewItemPluginsRunner;
|
|
12
12
|
} | null>;
|
|
@@ -6,4 +6,4 @@ import { TreeViewAnyPluginSignature } from '../models';
|
|
|
6
6
|
*
|
|
7
7
|
* @ignore - do not document.
|
|
8
8
|
*/
|
|
9
|
-
export declare function TreeViewProvider<
|
|
9
|
+
export declare function TreeViewProvider<TSignatures extends readonly TreeViewAnyPluginSignature[]>(props: TreeViewProviderProps<TSignatures>): React.JSX.Element;
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
export type
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
import { MergeSignaturesProperty, TreeItemWrapper, TreeRootWrapper, TreeViewAnyPluginSignature, TreeViewInstance, TreeViewItemPluginResponse, TreeViewPublicAPI } from '../models';
|
|
3
|
+
export type TreeViewItemPluginsRunner = <TProps extends {}>(props: TProps) => Required<TreeViewItemPluginResponse>;
|
|
4
|
+
export type TreeViewContextValue<TSignatures extends readonly TreeViewAnyPluginSignature[]> = MergeSignaturesProperty<TSignatures, 'contextValue'> & {
|
|
5
|
+
instance: TreeViewInstance<TSignatures>;
|
|
6
|
+
publicAPI: TreeViewPublicAPI<TSignatures>;
|
|
6
7
|
rootRef: React.RefObject<HTMLUListElement>;
|
|
7
|
-
wrapItem: TreeItemWrapper<
|
|
8
|
-
wrapRoot: TreeRootWrapper<
|
|
9
|
-
runItemPlugins:
|
|
8
|
+
wrapItem: TreeItemWrapper<TSignatures>;
|
|
9
|
+
wrapRoot: TreeRootWrapper<TSignatures>;
|
|
10
|
+
runItemPlugins: TreeViewItemPluginsRunner;
|
|
10
11
|
};
|
|
11
|
-
export interface TreeViewProviderProps<
|
|
12
|
-
value: TreeViewContextValue<
|
|
12
|
+
export interface TreeViewProviderProps<TSignatures extends readonly TreeViewAnyPluginSignature[]> {
|
|
13
|
+
value: TreeViewContextValue<TSignatures>;
|
|
13
14
|
children: React.ReactNode;
|
|
14
15
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { TreeViewProvider } from './TreeViewProvider';
|
|
2
|
-
export type { TreeViewProviderProps, TreeViewContextValue } from './TreeViewProvider.types';
|
|
2
|
+
export type { TreeViewProviderProps, TreeViewContextValue, TreeViewItemPluginsRunner, } from './TreeViewProvider.types';
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { TreeViewAnyPluginSignature } from '../models';
|
|
2
2
|
import { TreeViewContextValue } from './TreeViewProvider.types';
|
|
3
|
-
export declare const useTreeViewContext: <
|
|
3
|
+
export declare const useTreeViewContext: <TSignatures extends readonly TreeViewAnyPluginSignature[]>() => NonNullable<TreeViewContextValue<TSignatures>>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { ConvertPluginsIntoSignatures
|
|
1
|
+
import { ConvertPluginsIntoSignatures } from '../models';
|
|
2
2
|
/**
|
|
3
3
|
* Internal plugins that create the tools used by the other plugins.
|
|
4
4
|
* These plugins are used by the tree view components.
|
|
5
5
|
*/
|
|
6
6
|
export declare const TREE_VIEW_CORE_PLUGINS: readonly [import("../models").TreeViewPlugin<import("./useTreeViewInstanceEvents").UseTreeViewInstanceEventsSignature>];
|
|
7
|
-
export type
|
|
7
|
+
export type TreeViewCorePluginSignatures = ConvertPluginsIntoSignatures<typeof TREE_VIEW_CORE_PLUGINS>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { TREE_VIEW_CORE_PLUGINS } from './corePlugins';
|
|
2
|
-
export type {
|
|
2
|
+
export type { TreeViewCorePluginSignatures } from './corePlugins';
|
|
@@ -7,9 +7,9 @@ interface RegistryContainer {
|
|
|
7
7
|
}
|
|
8
8
|
export declare function createUseInstanceEventHandler(registryContainer: RegistryContainer): <Instance extends UseTreeViewInstanceEventsInstance & {
|
|
9
9
|
$$signature: TreeViewAnyPluginSignature;
|
|
10
|
-
}, E extends keyof Instance["$$signature"]["events"] | keyof import("../models").
|
|
10
|
+
}, E extends keyof Instance["$$signature"]["events"] | keyof import("../models").MergeSignaturesProperty<[import("../corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.types").UseTreeViewInstanceEventsSignature, ...Instance["$$signature"]["dependantPlugins"]], "events">>(instance: Instance, eventName: E, handler: TreeViewEventListener<TreeViewUsedEvents<Instance['$$signature']>[E]>) => void;
|
|
11
11
|
export declare const unstable_resetCleanupTracking: () => void;
|
|
12
12
|
export declare const useInstanceEventHandler: <Instance extends UseTreeViewInstanceEventsInstance & {
|
|
13
13
|
$$signature: TreeViewAnyPluginSignature;
|
|
14
|
-
}, E extends keyof Instance["$$signature"]["events"] | keyof import("../models").
|
|
14
|
+
}, E extends keyof Instance["$$signature"]["events"] | keyof import("../models").MergeSignaturesProperty<[import("../corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.types").UseTreeViewInstanceEventsSignature, ...Instance["$$signature"]["dependantPlugins"]], "events">>(instance: Instance, eventName: E, handler: TreeViewEventListener<TreeViewUsedEvents<Instance['$$signature']>[E]>) => void;
|
|
15
15
|
export {};
|
package/internals/index.d.ts
CHANGED
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
export { useTreeView } from './useTreeView';
|
|
2
2
|
export { TreeViewProvider } from './TreeViewProvider';
|
|
3
3
|
export { unstable_resetCleanupTracking } from './hooks/useInstanceEventHandler';
|
|
4
|
-
export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures,
|
|
5
|
-
export { DEFAULT_TREE_VIEW_PLUGINS } from './plugins/defaultPlugins';
|
|
6
|
-
export type { DefaultTreeViewPlugins, DefaultTreeViewPluginSlots, DefaultTreeViewPluginSlotProps, } from './plugins/defaultPlugins';
|
|
7
|
-
export type { DefaultTreeViewPluginParameters } from './plugins/defaultPlugins';
|
|
4
|
+
export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewExperimentalFeatures, } from './models';
|
|
8
5
|
export { useTreeViewExpansion } from './plugins/useTreeViewExpansion';
|
|
9
6
|
export type { UseTreeViewExpansionSignature, UseTreeViewExpansionParameters, } from './plugins/useTreeViewExpansion';
|
|
10
7
|
export { useTreeViewSelection } from './plugins/useTreeViewSelection';
|
|
@@ -22,4 +19,3 @@ export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, } from './p
|
|
|
22
19
|
export { useTreeViewJSXItems } from './plugins/useTreeViewJSXItems';
|
|
23
20
|
export type { UseTreeViewJSXItemsSignature, UseTreeViewJSXItemsParameters, } from './plugins/useTreeViewJSXItems';
|
|
24
21
|
export { buildWarning } from './utils/warning';
|
|
25
|
-
export { extractPluginParamsFromProps } from './utils/extractPluginParamsFromProps';
|
package/internals/index.js
CHANGED
|
@@ -2,7 +2,6 @@ export { useTreeView } from './useTreeView';
|
|
|
2
2
|
export { TreeViewProvider } from './TreeViewProvider';
|
|
3
3
|
export { unstable_resetCleanupTracking } from './hooks/useInstanceEventHandler';
|
|
4
4
|
// Plugins
|
|
5
|
-
export { DEFAULT_TREE_VIEW_PLUGINS } from './plugins/defaultPlugins';
|
|
6
5
|
export { useTreeViewExpansion } from './plugins/useTreeViewExpansion';
|
|
7
6
|
export { useTreeViewSelection } from './plugins/useTreeViewSelection';
|
|
8
7
|
export { useTreeViewFocus } from './plugins/useTreeViewFocus';
|
|
@@ -11,5 +10,4 @@ export { useTreeViewId } from './plugins/useTreeViewId';
|
|
|
11
10
|
export { useTreeViewIcons } from './plugins/useTreeViewIcons';
|
|
12
11
|
export { useTreeViewItems } from './plugins/useTreeViewItems';
|
|
13
12
|
export { useTreeViewJSXItems } from './plugins/useTreeViewJSXItems';
|
|
14
|
-
export { buildWarning } from './utils/warning';
|
|
15
|
-
export { extractPluginParamsFromProps } from './utils/extractPluginParamsFromProps';
|
|
13
|
+
export { buildWarning } from './utils/warning';
|
|
@@ -3,20 +3,7 @@ export type DefaultizedProps<P extends {}, RequiredProps extends keyof P, Additi
|
|
|
3
3
|
export type SlotComponentPropsFromProps<TProps extends {}, TOverrides extends {}, TOwnerState extends {}> = (Partial<TProps> & TOverrides) | ((ownerState: TOwnerState) => Partial<TProps> & TOverrides);
|
|
4
4
|
type IsAny<T> = 0 extends 1 & T ? true : false;
|
|
5
5
|
export type OptionalIfEmpty<A extends string, B> = keyof B extends never ? Partial<Record<A, B>> : IsAny<B> extends true ? Partial<Record<A, B>> : Record<A, B>;
|
|
6
|
-
export type
|
|
7
|
-
export type ConvertPluginsIntoSignatures<TPlugins extends readonly
|
|
8
|
-
export
|
|
9
|
-
state: MergePluginsProperty<TPlugins, 'state'>;
|
|
10
|
-
instance: MergePluginsProperty<TPlugins, 'instance'>;
|
|
11
|
-
publicAPI: MergePluginsProperty<TPlugins, 'publicAPI'>;
|
|
12
|
-
params: MergePluginsProperty<TPlugins, 'params'>;
|
|
13
|
-
defaultizedParams: MergePluginsProperty<TPlugins, 'defaultizedParams'>;
|
|
14
|
-
dependantPlugins: MergePluginsProperty<TPlugins, 'dependantPlugins'>;
|
|
15
|
-
contextValue: MergePluginsProperty<TPlugins, 'contextValue'>;
|
|
16
|
-
slots: MergePluginsProperty<TPlugins, 'slots'>;
|
|
17
|
-
slotProps: MergePluginsProperty<TPlugins, 'slotProps'>;
|
|
18
|
-
events: MergePluginsProperty<TPlugins, 'events'>;
|
|
19
|
-
models: MergePluginsProperty<TPlugins, 'models'>;
|
|
20
|
-
experimentalFeatures: MergePluginsProperty<TPlugins, 'experimentalFeatures'>;
|
|
21
|
-
}
|
|
6
|
+
export type MergeSignaturesProperty<TSignatures extends readonly any[], TProperty extends keyof TreeViewAnyPluginSignature> = TSignatures extends readonly [plugin: infer P, ...otherPlugin: infer R] ? P extends TreeViewAnyPluginSignature ? P[TProperty] & MergeSignaturesProperty<R, TProperty> : {} : {};
|
|
7
|
+
export type ConvertPluginsIntoSignatures<TPlugins extends readonly TreeViewPlugin<TreeViewAnyPluginSignature>[]> = TPlugins extends readonly [plugin: infer TPlugin, ...otherPlugin: infer R] ? R extends readonly TreeViewPlugin<any>[] ? TPlugin extends TreeViewPlugin<infer TSignature> ? readonly [TSignature, ...ConvertPluginsIntoSignatures<R>] : never : never : [];
|
|
8
|
+
export type ConvertSignaturesIntoPlugins<TSignatures extends readonly TreeViewAnyPluginSignature[]> = TSignatures extends readonly [signature: infer TSignature, ...otherSignatures: infer R] ? R extends readonly TreeViewAnyPluginSignature[] ? TSignature extends TreeViewAnyPluginSignature ? readonly [TreeViewPlugin<TSignature>, ...ConvertSignaturesIntoPlugins<R>] : never : never : [];
|
|
22
9
|
export {};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { EventHandlers } from '@mui/base/utils';
|
|
3
3
|
import { TreeViewExperimentalFeatures, TreeViewInstance, TreeViewModel } from './treeView';
|
|
4
|
-
import type {
|
|
4
|
+
import type { MergeSignaturesProperty, OptionalIfEmpty } from './helpers';
|
|
5
5
|
import { TreeViewEventLookupElement } from './events';
|
|
6
|
-
import type {
|
|
6
|
+
import type { TreeViewCorePluginSignatures } from '../corePlugins';
|
|
7
7
|
import { TreeViewItemId } from '../../models';
|
|
8
8
|
export interface TreeViewPluginOptions<TSignature extends TreeViewAnyPluginSignature> {
|
|
9
9
|
instance: TreeViewUsedInstance<TSignature>;
|
|
@@ -97,24 +97,24 @@ export type TreeViewAnyPluginSignature = {
|
|
|
97
97
|
publicAPI: any;
|
|
98
98
|
};
|
|
99
99
|
type TreeViewUsedPlugins<TSignature extends TreeViewAnyPluginSignature> = [
|
|
100
|
-
|
|
100
|
+
...TreeViewCorePluginSignatures,
|
|
101
101
|
...TSignature['dependantPlugins']
|
|
102
102
|
];
|
|
103
|
-
export type TreeViewUsedParams<TSignature extends TreeViewAnyPluginSignature> = TSignature['params'] &
|
|
104
|
-
type TreeViewUsedDefaultizedParams<TSignature extends TreeViewAnyPluginSignature> = TSignature['defaultizedParams'] &
|
|
105
|
-
export type TreeViewUsedInstance<TSignature extends TreeViewAnyPluginSignature> = TSignature['instance'] &
|
|
103
|
+
export type TreeViewUsedParams<TSignature extends TreeViewAnyPluginSignature> = TSignature['params'] & MergeSignaturesProperty<TreeViewUsedPlugins<TSignature>, 'params'>;
|
|
104
|
+
type TreeViewUsedDefaultizedParams<TSignature extends TreeViewAnyPluginSignature> = TSignature['defaultizedParams'] & MergeSignaturesProperty<TreeViewUsedPlugins<TSignature>, 'defaultizedParams'>;
|
|
105
|
+
export type TreeViewUsedInstance<TSignature extends TreeViewAnyPluginSignature> = TSignature['instance'] & MergeSignaturesProperty<TreeViewUsedPlugins<TSignature>, 'instance'> & {
|
|
106
106
|
/**
|
|
107
107
|
* Private property only defined in TypeScript to be able to access the plugin signature from the instance object.
|
|
108
108
|
*/
|
|
109
109
|
$$signature: TSignature;
|
|
110
110
|
};
|
|
111
|
-
type TreeViewUsedState<TSignature extends TreeViewAnyPluginSignature> = TSignature['state'] &
|
|
111
|
+
type TreeViewUsedState<TSignature extends TreeViewAnyPluginSignature> = TSignature['state'] & MergeSignaturesProperty<TreeViewUsedPlugins<TSignature>, 'state'>;
|
|
112
112
|
type TreeViewUsedExperimentalFeatures<TSignature extends TreeViewAnyPluginSignature> = TreeViewExperimentalFeatures<[TSignature, ...TSignature['dependantPlugins']]>;
|
|
113
113
|
type RemoveSetValue<Models extends Record<string, TreeViewModel<any>>> = {
|
|
114
114
|
[K in keyof Models]: Omit<Models[K], 'setValue'>;
|
|
115
115
|
};
|
|
116
|
-
export type TreeViewUsedModels<TSignature extends TreeViewAnyPluginSignature> = TSignature['models'] & RemoveSetValue<
|
|
117
|
-
export type TreeViewUsedEvents<TSignature extends TreeViewAnyPluginSignature> = TSignature['events'] &
|
|
116
|
+
export type TreeViewUsedModels<TSignature extends TreeViewAnyPluginSignature> = TSignature['models'] & RemoveSetValue<MergeSignaturesProperty<TreeViewUsedPlugins<TSignature>, 'models'>>;
|
|
117
|
+
export type TreeViewUsedEvents<TSignature extends TreeViewAnyPluginSignature> = TSignature['events'] & MergeSignaturesProperty<TreeViewUsedPlugins<TSignature>, 'events'>;
|
|
118
118
|
export interface TreeViewItemPluginOptions<TProps extends {}> extends TreeViewItemPluginResponse {
|
|
119
119
|
props: TProps;
|
|
120
120
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { TreeViewAnyPluginSignature } from './plugin';
|
|
2
|
-
import type {
|
|
2
|
+
import type { MergeSignaturesProperty } from './helpers';
|
|
3
|
+
import type { TreeViewCorePluginSignatures } from '../corePlugins';
|
|
3
4
|
export interface TreeViewItemMeta {
|
|
4
5
|
id: string;
|
|
5
6
|
idAttribute: string | undefined;
|
|
@@ -20,8 +21,8 @@ export interface TreeViewModel<TValue> {
|
|
|
20
21
|
value: TValue;
|
|
21
22
|
setControlledValue: (value: TValue | ((prevValue: TValue) => TValue)) => void;
|
|
22
23
|
}
|
|
23
|
-
export type TreeViewInstance<TSignatures extends readonly TreeViewAnyPluginSignature[]> =
|
|
24
|
-
export type TreeViewPublicAPI<TSignatures extends readonly TreeViewAnyPluginSignature[]> =
|
|
24
|
+
export type TreeViewInstance<TSignatures extends readonly TreeViewAnyPluginSignature[]> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'instance'>;
|
|
25
|
+
export type TreeViewPublicAPI<TSignatures extends readonly TreeViewAnyPluginSignature[]> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'publicAPI'>;
|
|
25
26
|
export type TreeViewExperimentalFeatures<TSignatures extends readonly TreeViewAnyPluginSignature[]> = {
|
|
26
|
-
[key in
|
|
27
|
+
[key in MergeSignaturesProperty<TSignatures, 'experimentalFeatures'>]?: boolean;
|
|
27
28
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { useRtl } from '@mui/system/RtlProvider';
|
|
3
3
|
import useEventCallback from '@mui/utils/useEventCallback';
|
|
4
4
|
import { getFirstNavigableItem, getLastNavigableItem, getNextNavigableItem, getPreviousNavigableItem } from '../../utils/tree';
|
|
5
5
|
function isPrintableCharacter(string) {
|
|
@@ -10,8 +10,7 @@ export const useTreeViewKeyboardNavigation = ({
|
|
|
10
10
|
params,
|
|
11
11
|
state
|
|
12
12
|
}) => {
|
|
13
|
-
const
|
|
14
|
-
const isRTL = theme.direction === 'rtl';
|
|
13
|
+
const isRtl = useRtl();
|
|
15
14
|
const firstCharMap = React.useRef({});
|
|
16
15
|
const updateFirstCharMap = useEventCallback(callback => {
|
|
17
16
|
firstCharMap.current = callback(firstCharMap.current);
|
|
@@ -138,7 +137,7 @@ export const useTreeViewKeyboardNavigation = ({
|
|
|
138
137
|
|
|
139
138
|
// If the focused item is expanded, we move the focus to its first child
|
|
140
139
|
// If the focused item is collapsed and has children, we expand it
|
|
141
|
-
case key === 'ArrowRight' && !
|
|
140
|
+
case key === 'ArrowRight' && !isRtl || key === 'ArrowLeft' && isRtl:
|
|
142
141
|
{
|
|
143
142
|
if (instance.isItemExpanded(itemId)) {
|
|
144
143
|
const nextItemId = getNextNavigableItem(instance, itemId);
|
|
@@ -155,7 +154,7 @@ export const useTreeViewKeyboardNavigation = ({
|
|
|
155
154
|
|
|
156
155
|
// If the focused item is expanded, we collapse it
|
|
157
156
|
// If the focused item is collapsed and has a parent, we move the focus to this parent
|
|
158
|
-
case key === 'ArrowLeft' && !
|
|
157
|
+
case key === 'ArrowLeft' && !isRtl || key === 'ArrowRight' && isRtl:
|
|
159
158
|
{
|
|
160
159
|
if (canToggleItemExpansion(itemId) && instance.isItemExpanded(itemId)) {
|
|
161
160
|
instance.toggleItemExpansion(event, itemId);
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ConvertSignaturesIntoPlugins, MergeSignaturesProperty, TreeViewAnyPluginSignature, TreeViewPluginSignature } from '../models';
|
|
2
|
+
import { UseTreeViewBaseProps } from './useTreeView.types';
|
|
3
|
+
import { TreeViewCorePluginSignatures } from '../corePlugins';
|
|
4
|
+
interface ExtractPluginParamsFromPropsParameters<TSignatures extends readonly TreeViewAnyPluginSignature[], TProps extends Partial<UseTreeViewBaseProps<TSignatures>>> {
|
|
5
|
+
plugins: ConvertSignaturesIntoPlugins<readonly [...TreeViewCorePluginSignatures, ...TSignatures]>;
|
|
6
|
+
props: TProps;
|
|
7
|
+
}
|
|
8
|
+
interface ExtractPluginParamsFromPropsReturnValue<TSignatures extends readonly TreeViewAnyPluginSignature[], TProps extends Partial<UseTreeViewBaseProps<TSignatures>>> extends UseTreeViewBaseProps<TSignatures> {
|
|
9
|
+
pluginParams: MergeSignaturesProperty<TSignatures, 'defaultizedParams'>;
|
|
10
|
+
forwardedProps: Omit<TProps, keyof MergeSignaturesProperty<TSignatures, 'params'>>;
|
|
11
|
+
}
|
|
12
|
+
export declare const extractPluginParamsFromProps: <TSignatures extends readonly TreeViewPluginSignature<any>[], TProps extends Partial<UseTreeViewBaseProps<TSignatures>>>({ props: { slots, slotProps, apiRef, experimentalFeatures, ...props }, plugins, }: ExtractPluginParamsFromPropsParameters<TSignatures, TProps>) => ExtractPluginParamsFromPropsReturnValue<TSignatures, TProps>;
|
|
13
|
+
export {};
|
|
@@ -8,35 +8,35 @@ export const extractPluginParamsFromProps = _ref => {
|
|
|
8
8
|
apiRef,
|
|
9
9
|
experimentalFeatures
|
|
10
10
|
},
|
|
11
|
-
plugins
|
|
12
|
-
rootRef
|
|
11
|
+
plugins
|
|
13
12
|
} = _ref,
|
|
14
13
|
props = _objectWithoutPropertiesLoose(_ref.props, _excluded);
|
|
15
14
|
const paramsLookup = {};
|
|
16
15
|
plugins.forEach(plugin => {
|
|
17
16
|
Object.assign(paramsLookup, plugin.params);
|
|
18
17
|
});
|
|
19
|
-
const pluginParams = {
|
|
20
|
-
|
|
21
|
-
rootRef,
|
|
22
|
-
slots: slots ?? {},
|
|
23
|
-
slotProps: slotProps ?? {},
|
|
24
|
-
experimentalFeatures: experimentalFeatures ?? {},
|
|
25
|
-
apiRef
|
|
26
|
-
};
|
|
27
|
-
const otherProps = {};
|
|
18
|
+
const pluginParams = {};
|
|
19
|
+
const forwardedProps = {};
|
|
28
20
|
Object.keys(props).forEach(propName => {
|
|
29
21
|
const prop = props[propName];
|
|
30
22
|
if (paramsLookup[propName]) {
|
|
31
23
|
pluginParams[propName] = prop;
|
|
32
24
|
} else {
|
|
33
|
-
|
|
25
|
+
forwardedProps[propName] = prop;
|
|
34
26
|
}
|
|
35
27
|
});
|
|
28
|
+
const defaultizedPluginParams = plugins.reduce((acc, plugin) => {
|
|
29
|
+
if (plugin.getDefaultizedParams) {
|
|
30
|
+
return plugin.getDefaultizedParams(acc);
|
|
31
|
+
}
|
|
32
|
+
return acc;
|
|
33
|
+
}, pluginParams);
|
|
36
34
|
return {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
35
|
+
apiRef,
|
|
36
|
+
forwardedProps,
|
|
37
|
+
pluginParams: defaultizedPluginParams,
|
|
38
|
+
slots: slots ?? {},
|
|
39
|
+
slotProps: slotProps ?? {},
|
|
40
|
+
experimentalFeatures: experimentalFeatures ?? {}
|
|
41
41
|
};
|
|
42
42
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { TreeViewAnyPluginSignature
|
|
3
|
-
import { UseTreeViewParameters, UseTreeViewReturnValue } from './useTreeView.types';
|
|
4
|
-
export declare function useTreeViewApiInitialization<T>(inputApiRef: React.MutableRefObject<T> | undefined): T;
|
|
5
|
-
export declare const useTreeView: <
|
|
2
|
+
import { TreeViewAnyPluginSignature } from '../models';
|
|
3
|
+
import { UseTreeViewBaseProps, UseTreeViewParameters, UseTreeViewReturnValue } from './useTreeView.types';
|
|
4
|
+
export declare function useTreeViewApiInitialization<T>(inputApiRef: React.MutableRefObject<T | undefined> | undefined): T;
|
|
5
|
+
export declare const useTreeView: <TSignatures extends readonly TreeViewAnyPluginSignature[], TProps extends Partial<UseTreeViewBaseProps<TSignatures>>>({ plugins: inPlugins, rootRef, props, }: UseTreeViewParameters<TSignatures, TProps>) => UseTreeViewReturnValue<TSignatures>;
|
|
@@ -3,6 +3,7 @@ import * as React from 'react';
|
|
|
3
3
|
import useForkRef from '@mui/utils/useForkRef';
|
|
4
4
|
import { useTreeViewModels } from './useTreeViewModels';
|
|
5
5
|
import { TREE_VIEW_CORE_PLUGINS } from '../corePlugins';
|
|
6
|
+
import { extractPluginParamsFromProps } from './extractPluginParamsFromProps';
|
|
6
7
|
export function useTreeViewApiInitialization(inputApiRef) {
|
|
7
8
|
const fallbackPublicApiRef = React.useRef({});
|
|
8
9
|
if (inputApiRef) {
|
|
@@ -13,62 +14,69 @@ export function useTreeViewApiInitialization(inputApiRef) {
|
|
|
13
14
|
}
|
|
14
15
|
return fallbackPublicApiRef.current;
|
|
15
16
|
}
|
|
16
|
-
export const useTreeView =
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
17
|
+
export const useTreeView = ({
|
|
18
|
+
plugins: inPlugins,
|
|
19
|
+
rootRef,
|
|
20
|
+
props
|
|
21
|
+
}) => {
|
|
22
|
+
const plugins = [...TREE_VIEW_CORE_PLUGINS, ...inPlugins];
|
|
23
|
+
const {
|
|
24
|
+
pluginParams,
|
|
25
|
+
forwardedProps,
|
|
26
|
+
apiRef,
|
|
27
|
+
experimentalFeatures,
|
|
28
|
+
slots,
|
|
29
|
+
slotProps
|
|
30
|
+
} = extractPluginParamsFromProps({
|
|
31
|
+
plugins,
|
|
32
|
+
props
|
|
33
|
+
});
|
|
34
|
+
const models = useTreeViewModels(plugins, pluginParams);
|
|
25
35
|
const instanceRef = React.useRef({});
|
|
26
36
|
const instance = instanceRef.current;
|
|
27
|
-
const publicAPI = useTreeViewApiInitialization(
|
|
37
|
+
const publicAPI = useTreeViewApiInitialization(apiRef);
|
|
28
38
|
const innerRootRef = React.useRef(null);
|
|
29
|
-
const handleRootRef = useForkRef(innerRootRef,
|
|
39
|
+
const handleRootRef = useForkRef(innerRootRef, rootRef);
|
|
30
40
|
const [state, setState] = React.useState(() => {
|
|
31
41
|
const temp = {};
|
|
32
42
|
plugins.forEach(plugin => {
|
|
33
43
|
if (plugin.getInitialState) {
|
|
34
|
-
Object.assign(temp, plugin.getInitialState(
|
|
44
|
+
Object.assign(temp, plugin.getInitialState(pluginParams));
|
|
35
45
|
}
|
|
36
46
|
});
|
|
37
47
|
return temp;
|
|
38
48
|
});
|
|
39
|
-
const
|
|
40
|
-
const
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
49
|
+
const itemWrappers = plugins.map(plugin => plugin.wrapItem).filter(wrapItem => !!wrapItem);
|
|
50
|
+
const wrapItem = ({
|
|
51
|
+
itemId,
|
|
52
|
+
children
|
|
53
|
+
}) => {
|
|
54
|
+
let finalChildren = children;
|
|
55
|
+
itemWrappers.forEach(itemWrapper => {
|
|
56
|
+
finalChildren = itemWrapper({
|
|
57
|
+
itemId,
|
|
58
|
+
children: finalChildren,
|
|
59
|
+
instance
|
|
60
|
+
});
|
|
61
|
+
});
|
|
62
|
+
return finalChildren;
|
|
44
63
|
};
|
|
45
|
-
const
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
64
|
+
const rootWrappers = plugins.map(plugin => plugin.wrapRoot).filter(wrapRoot => !!wrapRoot)
|
|
65
|
+
// The wrappers are reversed to ensure that the first wrapper is the outermost one.
|
|
66
|
+
.reverse();
|
|
67
|
+
const wrapRoot = ({
|
|
68
|
+
children
|
|
69
|
+
}) => {
|
|
70
|
+
let finalChildren = children;
|
|
71
|
+
rootWrappers.forEach(rootWrapper => {
|
|
72
|
+
finalChildren = rootWrapper({
|
|
73
|
+
children: finalChildren,
|
|
74
|
+
instance
|
|
75
|
+
});
|
|
56
76
|
});
|
|
57
|
-
|
|
58
|
-
rootPropsGetters.push(pluginResponse.getRootProps);
|
|
59
|
-
}
|
|
60
|
-
if (pluginResponse.publicAPI) {
|
|
61
|
-
Object.assign(publicAPI, pluginResponse.publicAPI);
|
|
62
|
-
}
|
|
63
|
-
if (pluginResponse.instance) {
|
|
64
|
-
Object.assign(instance, pluginResponse.instance);
|
|
65
|
-
}
|
|
66
|
-
if (pluginResponse.contextValue) {
|
|
67
|
-
Object.assign(contextValue, pluginResponse.contextValue);
|
|
68
|
-
}
|
|
77
|
+
return finalChildren;
|
|
69
78
|
};
|
|
70
|
-
|
|
71
|
-
contextValue.runItemPlugins = itemPluginProps => {
|
|
79
|
+
const runItemPlugins = itemPluginProps => {
|
|
72
80
|
let finalRootRef = null;
|
|
73
81
|
let finalContentRef = null;
|
|
74
82
|
plugins.forEach(plugin => {
|
|
@@ -92,40 +100,45 @@ export const useTreeView = inParams => {
|
|
|
92
100
|
rootRef: finalRootRef
|
|
93
101
|
};
|
|
94
102
|
};
|
|
95
|
-
const
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
finalChildren = itemWrapper({
|
|
103
|
-
itemId,
|
|
104
|
-
children: finalChildren,
|
|
105
|
-
instance
|
|
106
|
-
});
|
|
107
|
-
});
|
|
108
|
-
return finalChildren;
|
|
103
|
+
const contextValue = {
|
|
104
|
+
publicAPI,
|
|
105
|
+
wrapItem,
|
|
106
|
+
wrapRoot,
|
|
107
|
+
runItemPlugins,
|
|
108
|
+
instance: instance,
|
|
109
|
+
rootRef: innerRootRef
|
|
109
110
|
};
|
|
110
|
-
const
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
111
|
+
const rootPropsGetters = [];
|
|
112
|
+
const runPlugin = plugin => {
|
|
113
|
+
const pluginResponse = plugin({
|
|
114
|
+
instance,
|
|
115
|
+
params: pluginParams,
|
|
116
|
+
slots,
|
|
117
|
+
slotProps,
|
|
118
|
+
experimentalFeatures,
|
|
119
|
+
state,
|
|
120
|
+
setState,
|
|
121
|
+
rootRef: innerRootRef,
|
|
122
|
+
models
|
|
122
123
|
});
|
|
123
|
-
|
|
124
|
+
if (pluginResponse.getRootProps) {
|
|
125
|
+
rootPropsGetters.push(pluginResponse.getRootProps);
|
|
126
|
+
}
|
|
127
|
+
if (pluginResponse.publicAPI) {
|
|
128
|
+
Object.assign(publicAPI, pluginResponse.publicAPI);
|
|
129
|
+
}
|
|
130
|
+
if (pluginResponse.instance) {
|
|
131
|
+
Object.assign(instance, pluginResponse.instance);
|
|
132
|
+
}
|
|
133
|
+
if (pluginResponse.contextValue) {
|
|
134
|
+
Object.assign(contextValue, pluginResponse.contextValue);
|
|
135
|
+
}
|
|
124
136
|
};
|
|
137
|
+
plugins.forEach(runPlugin);
|
|
125
138
|
const getRootProps = (otherHandlers = {}) => {
|
|
126
139
|
const rootProps = _extends({
|
|
127
140
|
role: 'tree'
|
|
128
|
-
}, otherHandlers, {
|
|
141
|
+
}, forwardedProps, otherHandlers, {
|
|
129
142
|
ref: handleRootRef
|
|
130
143
|
});
|
|
131
144
|
rootPropsGetters.forEach(rootPropsGetter => {
|
|
@@ -136,7 +149,7 @@ export const useTreeView = inParams => {
|
|
|
136
149
|
return {
|
|
137
150
|
getRootProps,
|
|
138
151
|
rootRef: handleRootRef,
|
|
139
|
-
contextValue
|
|
140
|
-
instance
|
|
152
|
+
contextValue,
|
|
153
|
+
instance
|
|
141
154
|
};
|
|
142
155
|
};
|
|
@@ -1,23 +1,24 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { EventHandlers } from '@mui/base/utils';
|
|
3
3
|
import type { TreeViewContextValue } from '../TreeViewProvider';
|
|
4
|
-
import { TreeViewAnyPluginSignature,
|
|
5
|
-
export
|
|
6
|
-
|
|
7
|
-
apiRef: React.MutableRefObject<TreeViewPublicAPI<ConvertPluginsIntoSignatures<TPlugins>>> | undefined;
|
|
4
|
+
import { TreeViewAnyPluginSignature, ConvertSignaturesIntoPlugins, MergeSignaturesProperty, TreeViewInstance, TreeViewPublicAPI, TreeViewExperimentalFeatures } from '../models';
|
|
5
|
+
export interface UseTreeViewParameters<TSignatures extends readonly TreeViewAnyPluginSignature[], TProps extends Partial<UseTreeViewBaseProps<TSignatures>>> {
|
|
6
|
+
plugins: ConvertSignaturesIntoPlugins<TSignatures>;
|
|
8
7
|
rootRef?: React.Ref<HTMLUListElement> | undefined;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
props: TProps;
|
|
9
|
+
}
|
|
10
|
+
export interface UseTreeViewBaseProps<TSignatures extends readonly TreeViewAnyPluginSignature[]> {
|
|
11
|
+
apiRef: React.MutableRefObject<TreeViewPublicAPI<TSignatures> | undefined> | undefined;
|
|
12
|
+
slots: MergeSignaturesProperty<TSignatures, 'slots'>;
|
|
13
|
+
slotProps: MergeSignaturesProperty<TSignatures, 'slotProps'>;
|
|
14
|
+
experimentalFeatures: TreeViewExperimentalFeatures<TSignatures>;
|
|
13
15
|
}
|
|
14
|
-
export type UseTreeViewDefaultizedParameters<TPlugins extends readonly TreeViewPlugin<TreeViewAnyPluginSignature>[]> = UseTreeViewBaseParameters<TPlugins> & MergePluginsProperty<ConvertPluginsIntoSignatures<TPlugins>, 'defaultizedParams'>;
|
|
15
16
|
export interface UseTreeViewRootSlotProps extends Pick<React.HTMLAttributes<HTMLUListElement>, 'onFocus' | 'onBlur' | 'onKeyDown' | 'id' | 'aria-multiselectable' | 'role' | 'tabIndex'> {
|
|
16
17
|
ref: React.Ref<HTMLUListElement>;
|
|
17
18
|
}
|
|
18
|
-
export interface UseTreeViewReturnValue<
|
|
19
|
+
export interface UseTreeViewReturnValue<TSignatures extends readonly TreeViewAnyPluginSignature[]> {
|
|
19
20
|
getRootProps: <TOther extends EventHandlers = {}>(otherHandlers?: TOther) => UseTreeViewRootSlotProps;
|
|
20
21
|
rootRef: React.RefCallback<HTMLUListElement> | null;
|
|
21
|
-
contextValue: TreeViewContextValue<
|
|
22
|
-
instance: TreeViewInstance<
|
|
22
|
+
contextValue: TreeViewContextValue<TSignatures>;
|
|
23
|
+
instance: TreeViewInstance<TSignatures>;
|
|
23
24
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { TreeViewAnyPluginSignature,
|
|
1
|
+
import { TreeViewAnyPluginSignature, ConvertSignaturesIntoPlugins, MergeSignaturesProperty } from '../models';
|
|
2
|
+
import { TreeViewCorePluginSignatures } from '../corePlugins';
|
|
2
3
|
/**
|
|
3
4
|
* Implements the same behavior as `useControlled` but for several models.
|
|
4
5
|
* The controlled models are never stored in the state, and the state is only updated if the model is not controlled.
|
|
5
6
|
*/
|
|
6
|
-
export declare const useTreeViewModels: <
|
|
7
|
+
export declare const useTreeViewModels: <TSignatures extends readonly TreeViewAnyPluginSignature[]>(plugins: ConvertSignaturesIntoPlugins<readonly [...TreeViewCorePluginSignatures, ...TSignatures]>, props: MergeSignaturesProperty<TSignatures, 'defaultizedParams'>) => MergeSignaturesProperty<TSignatures, "models">;
|
|
@@ -2,4 +2,4 @@ import { UseTreeViewInstanceEventsInstance } from '../corePlugins/useTreeViewIns
|
|
|
2
2
|
import { TreeViewAnyPluginSignature, TreeViewUsedEvents } from '../models';
|
|
3
3
|
export declare const publishTreeViewEvent: <Instance extends UseTreeViewInstanceEventsInstance & {
|
|
4
4
|
$$signature: TreeViewAnyPluginSignature;
|
|
5
|
-
}, E extends keyof Instance["$$signature"]["events"] | keyof import("../models").
|
|
5
|
+
}, E extends keyof Instance["$$signature"]["events"] | keyof import("../models").MergeSignaturesProperty<[import("../corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.types").UseTreeViewInstanceEventsSignature, ...Instance["$$signature"]["dependantPlugins"]], "events">>(instance: Instance, eventName: E, params: TreeViewUsedEvents<Instance['$$signature']>[E]['params']) => void;
|