@mui/x-tree-view 8.0.0-alpha.11 → 8.0.0-alpha.13

package/{node → esm}/internals/useTreeView/useTreeView.js

@@ -1,21 +1,12 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useTreeView = void 0;
-exports.useTreeViewApiInitialization = useTreeViewApiInitialization;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
-var _useTreeViewModels = require("./useTreeViewModels");
-var _corePlugins = require("../corePlugins");
-var _extractPluginParamsFromProps = require("./extractPluginParamsFromProps");
-var _useTreeViewBuildContext = require("./useTreeViewBuildContext");
-var _TreeViewStore = require("../utils/TreeViewStore");
-function useTreeViewApiInitialization(inputApiRef) {
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useForkRef from '@mui/utils/useForkRef';
+import { useTreeViewModels } from "./useTreeViewModels.js";
+import { TREE_VIEW_CORE_PLUGINS } from "../corePlugins/index.js";
+import { extractPluginParamsFromProps } from "./extractPluginParamsFromProps.js";
+import { useTreeViewBuildContext } from "./useTreeViewBuildContext.js";
+import { TreeViewStore } from "../utils/TreeViewStore.js";
+export function useTreeViewApiInitialization(inputApiRef) {
   const fallbackPublicApiRef = React.useRef({});
   if (inputApiRef) {
     if (inputApiRef.current == null) {
@@ -26,12 +17,12 @@ function useTreeViewApiInitialization(inputApiRef) {
   return fallbackPublicApiRef.current;
 }
 let globalId = 0;
-const useTreeView = ({
+export const useTreeView = ({
   plugins: inPlugins,
   rootRef,
   props
 }) => {
-  const plugins = React.useMemo(() => [..._corePlugins.TREE_VIEW_CORE_PLUGINS, ...inPlugins], [inPlugins]);
+  const plugins = React.useMemo(() => [...TREE_VIEW_CORE_PLUGINS, ...inPlugins], [inPlugins]);
   const {
     pluginParams,
     forwardedProps,
@@ -39,16 +30,16 @@ const useTreeView = ({
     experimentalFeatures,
     slots,
     slotProps
-  } = (0, _extractPluginParamsFromProps.extractPluginParamsFromProps)({
+  } = extractPluginParamsFromProps({
     plugins,
     props
   });
-  const models = (0, _useTreeViewModels.useTreeViewModels)(plugins, pluginParams);
+  const models = useTreeViewModels(plugins, pluginParams);
   const instanceRef = React.useRef({});
   const instance = instanceRef.current;
   const publicAPI = useTreeViewApiInitialization(apiRef);
   const innerRootRef = React.useRef(null);
-  const handleRootRef = (0, _useForkRef.default)(innerRootRef, rootRef);
+  const handleRootRef = useForkRef(innerRootRef, rootRef);
   const storeRef = React.useRef(null);
   if (storeRef.current == null) {
     globalId += 1;
@@ -62,9 +53,9 @@ const useTreeView = ({
         Object.assign(initialState, plugin.getInitialState(pluginParams));
       }
     });
-    storeRef.current = new _TreeViewStore.TreeViewStore(initialState);
+    storeRef.current = new TreeViewStore(initialState);
   }
-  const baseContextValue = (0, _useTreeViewBuildContext.useTreeViewBuildContext)({
+  const baseContextValue = useTreeViewBuildContext({
     plugins,
     instance,
     publicAPI,
@@ -100,7 +91,7 @@ const useTreeView = ({
   };
   plugins.forEach(runPlugin);
   const getRootProps = (otherHandlers = {}) => {
-    const rootProps = (0, _extends2.default)({
+    const rootProps = _extends({
       role: 'tree'
     }, forwardedProps, otherHandlers, {
       ref: handleRootRef
@@ -111,7 +102,7 @@ const useTreeView = ({
     return rootProps;
   };
   const contextValue = React.useMemo(() => {
-    const copiedBaseContextValue = (0, _extends2.default)({}, baseContextValue);
+    const copiedBaseContextValue = _extends({}, baseContextValue);
     return Object.assign(copiedBaseContextValue, ...pluginContextValues);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [baseContextValue, ...pluginContextValues]);
@@ -120,5 +111,4 @@ const useTreeView = ({
     rootRef: handleRootRef,
     contextValue
   };
-};
-exports.useTreeView = useTreeView;
+};

package/esm/internals/useTreeView/useTreeView.types.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { EventHandlers } from '@mui/utils/types';
+import type { TreeViewContextValue } from '../TreeViewProvider';
+import { TreeViewAnyPluginSignature, ConvertSignaturesIntoPlugins, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewExperimentalFeatures } from "../models/index.js";
+export interface UseTreeViewParameters<TSignatures extends readonly TreeViewAnyPluginSignature[], TProps extends Partial<UseTreeViewBaseProps<TSignatures>>> {
+  plugins: ConvertSignaturesIntoPlugins<TSignatures>;
+  rootRef?: React.Ref<HTMLUListElement> | undefined;
+  props: TProps;
+}
+export interface UseTreeViewBaseProps<TSignatures extends readonly TreeViewAnyPluginSignature[]> {
+  apiRef: React.RefObject<TreeViewPublicAPI<TSignatures> | undefined> | undefined;
+  slots: MergeSignaturesProperty<TSignatures, 'slots'>;
+  slotProps: MergeSignaturesProperty<TSignatures, 'slotProps'>;
+  experimentalFeatures: TreeViewExperimentalFeatures<TSignatures>;
+}
+export interface UseTreeViewRootSlotProps extends Pick<React.HTMLAttributes<HTMLUListElement>, 'onFocus' | 'onBlur' | 'onKeyDown' | 'id' | 'aria-multiselectable' | 'role' | 'tabIndex'> {
+  ref: React.Ref<HTMLUListElement>;
+}
+export interface UseTreeViewReturnValue<TSignatures extends readonly TreeViewAnyPluginSignature[]> {
+  getRootProps: <TOther extends EventHandlers = {}>(otherHandlers?: TOther) => UseTreeViewRootSlotProps;
+  rootRef: React.RefCallback<HTMLUListElement> | null;
+  contextValue: TreeViewContextValue<TSignatures>;
+}

package/esm/internals/useTreeView/useTreeView.types.js

@@ -0,0 +1 @@
+export {};

package/esm/internals/useTreeView/useTreeViewBuildContext.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { TreeViewContextValue } from "../TreeViewProvider/index.js";
+import { ConvertSignaturesIntoPlugins, TreeViewAnyPluginSignature, TreeViewInstance, TreeViewPublicAPI } from "../models/index.js";
+import { TreeViewCorePluginSignatures } from "../corePlugins/index.js";
+import { TreeViewStore } from "../utils/TreeViewStore.js";
+export declare const useTreeViewBuildContext: <TSignatures extends readonly TreeViewAnyPluginSignature[]>({
+  plugins,
+  instance,
+  publicAPI,
+  store,
+  rootRef
+}: {
+  plugins: ConvertSignaturesIntoPlugins<readonly [...TreeViewCorePluginSignatures, ...TSignatures]>;
+  instance: TreeViewInstance<TSignatures>;
+  publicAPI: TreeViewPublicAPI<TSignatures>;
+  store: TreeViewStore<TSignatures>;
+  rootRef: React.RefObject<HTMLUListElement | null>;
+}) => TreeViewContextValue<TSignatures>;

package/{node → esm}/internals/useTreeView/useTreeViewBuildContext.js

@@ -1,12 +1,5 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useTreeViewBuildContext = void 0;
-var React = _interopRequireWildcard(require("react"));
-const useTreeViewBuildContext = ({
+import * as React from 'react';
+export const useTreeViewBuildContext = ({
   plugins,
   instance,
   publicAPI,
@@ -105,5 +98,4 @@ const useTreeViewBuildContext = ({
       rootRef
     };
   }, [runItemPlugins, wrapItem, wrapRoot, instance, publicAPI, store, rootRef]);
-};
-exports.useTreeViewBuildContext = useTreeViewBuildContext;
+};

package/esm/internals/useTreeView/useTreeViewModels.d.ts

@@ -0,0 +1,7 @@
+import { TreeViewAnyPluginSignature, ConvertSignaturesIntoPlugins, MergeSignaturesProperty } from "../models/index.js";
+import { TreeViewCorePluginSignatures } from "../corePlugins/index.js";
+/**
+ * Implements the same behavior as `useControlled` but for several models.
+ * The controlled models are never stored in the state, and the state is only updated if the model is not controlled.
+ */
+export declare const useTreeViewModels: <TSignatures extends readonly TreeViewAnyPluginSignature[]>(plugins: ConvertSignaturesIntoPlugins<readonly [...TreeViewCorePluginSignatures, ...TSignatures]>, props: MergeSignaturesProperty<TSignatures, "defaultizedParams">) => MergeSignaturesProperty<TSignatures, "models">;

package/{node → esm}/internals/useTreeView/useTreeViewModels.js

@@ -1,18 +1,10 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useTreeViewModels = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
 /**
  * Implements the same behavior as `useControlled` but for several models.
  * The controlled models are never stored in the state, and the state is only updated if the model is not controlled.
  */
-const useTreeViewModels = (plugins, props) => {
+export const useTreeViewModels = (plugins, props) => {
   const modelsRef = React.useRef({});
   const [modelsState, setModelsState] = React.useState(() => {
     const initialState = {};
@@ -35,7 +27,7 @@ const useTreeViewModels = (plugins, props) => {
       value,
       setControlledValue: newValue => {
         if (!model.isControlled) {
-          setModelsState(prevState => (0, _extends2.default)({}, prevState, {
+          setModelsState(prevState => _extends({}, prevState, {
             [modelName]: newValue
           }));
         }
@@ -67,5 +59,4 @@ const useTreeViewModels = (plugins, props) => {
   /* eslint-enable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
 
   return models;
-};
-exports.useTreeViewModels = useTreeViewModels;
+};

package/esm/internals/utils/TreeViewStore.d.ts

@@ -0,0 +1,12 @@
+import type { TreeViewAnyPluginSignature, TreeViewState } from '../models';
+type Listener<T> = (value: T) => void;
+export type StoreUpdater<TSignatures extends readonly TreeViewAnyPluginSignature[]> = (prevState: TreeViewState<TSignatures>) => TreeViewState<TSignatures>;
+export declare class TreeViewStore<TSignatures extends readonly TreeViewAnyPluginSignature[]> {
+  value: TreeViewState<TSignatures>;
+  private listeners;
+  constructor(value: TreeViewState<TSignatures>);
+  subscribe: (fn: Listener<TreeViewState<TSignatures>>) => () => void;
+  getSnapshot: () => TreeViewState<TSignatures>;
+  update: (updater: StoreUpdater<TSignatures>) => void;
+}
+export {};

package/{node → esm}/internals/utils/TreeViewStore.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TreeViewStore = void 0;
-class TreeViewStore {
+export class TreeViewStore {
   constructor(value) {
     this.value = void 0;
     this.listeners = void 0;
@@ -27,5 +21,4 @@ class TreeViewStore {
     this.value = value;
     this.listeners = new Set();
   }
-}
-exports.TreeViewStore = TreeViewStore;
+}

package/esm/internals/utils/cleanupTracking/CleanupTracking.d.ts

@@ -0,0 +1,9 @@
+export type UnregisterToken = {
+  cleanupToken: number;
+};
+export type UnsubscribeFn = () => void;
+export interface CleanupTracking {
+  register(object: any, unsubscribe: UnsubscribeFn, unregisterToken: UnregisterToken): void;
+  unregister(unregisterToken: UnregisterToken): void;
+  reset(): void;
+}

package/esm/internals/utils/cleanupTracking/CleanupTracking.js

@@ -0,0 +1 @@
+export {};

package/esm/internals/utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.d.ts

@@ -0,0 +1,7 @@
+import { CleanupTracking, UnsubscribeFn, UnregisterToken } from "./CleanupTracking.js";
+export declare class FinalizationRegistryBasedCleanupTracking implements CleanupTracking {
+  registry: FinalizationRegistry<UnsubscribeFn>;
+  register(object: any, unsubscribe: UnsubscribeFn, unregisterToken: UnregisterToken): void;
+  unregister(unregisterToken: UnregisterToken): void;
+  reset(): void;
+}

package/{node → esm}/internals/utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FinalizationRegistryBasedCleanupTracking = void 0;
-class FinalizationRegistryBasedCleanupTracking {
+export class FinalizationRegistryBasedCleanupTracking {
   constructor() {
     this.registry = new FinalizationRegistry(unsubscribe => {
       if (typeof unsubscribe === 'function') {
@@ -21,5 +15,4 @@ class FinalizationRegistryBasedCleanupTracking {
 
   // eslint-disable-next-line class-methods-use-this
   reset() {}
-}
-exports.FinalizationRegistryBasedCleanupTracking = FinalizationRegistryBasedCleanupTracking;
+}

package/esm/internals/utils/cleanupTracking/TimerBasedCleanupTracking.d.ts

@@ -0,0 +1,9 @@
+import { CleanupTracking, UnregisterToken, UnsubscribeFn } from "./CleanupTracking.js";
+export declare class TimerBasedCleanupTracking implements CleanupTracking {
+  timeouts?: Map<number, NodeJS.Timeout> | undefined;
+  cleanupTimeout: number;
+  constructor(timeout?: number);
+  register(object: any, unsubscribe: UnsubscribeFn, unregisterToken: UnregisterToken): void;
+  unregister(unregisterToken: UnregisterToken): void;
+  reset(): void;
+}

package/{node → esm}/internals/utils/cleanupTracking/TimerBasedCleanupTracking.js

@@ -1,12 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TimerBasedCleanupTracking = void 0;
 // If no effect ran after this amount of time, we assume that the render was not committed by React
 const CLEANUP_TIMER_LOOP_MILLIS = 1000;
-class TimerBasedCleanupTracking {
+export class TimerBasedCleanupTracking {
   constructor(timeout = CLEANUP_TIMER_LOOP_MILLIS) {
     this.timeouts = new Map();
     this.cleanupTimeout = CLEANUP_TIMER_LOOP_MILLIS;
@@ -41,5 +35,4 @@ class TimerBasedCleanupTracking {
       this.timeouts = undefined;
     }
   }
-}
-exports.TimerBasedCleanupTracking = TimerBasedCleanupTracking;
+}

package/esm/internals/utils/plugins.d.ts

@@ -0,0 +1,2 @@
+import { TreeViewAnyPluginSignature, TreeViewInstance, TreeViewPlugin } from "../models/index.js";
+export declare const hasPlugin: <TSignature extends TreeViewAnyPluginSignature, TInstance extends TreeViewInstance<[], [TSignature]>>(instance: TInstance, plugin: TreeViewPlugin<TSignature>) => instance is Omit<TInstance, keyof TSignature["instance"]> & TSignature["instance"];

package/esm/internals/utils/plugins.js

@@ -0,0 +1,4 @@
+export const hasPlugin = (instance, plugin) => {
+  const plugins = instance.getAvailablePlugins();
+  return plugins.has(plugin);
+};

package/esm/internals/utils/publishTreeViewEvent.d.ts

@@ -0,0 +1,5 @@
+import { UseTreeViewInstanceEventsInstance } from "../corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.types.js";
+import { TreeViewAnyPluginSignature, TreeViewUsedEvents } from "../models/index.js";
+export declare const publishTreeViewEvent: <Instance extends UseTreeViewInstanceEventsInstance & {
+  $$signature: TreeViewAnyPluginSignature;
+}, E extends keyof TreeViewUsedEvents<Instance["$$signature"]>>(instance: Instance, eventName: E, params: TreeViewUsedEvents<Instance["$$signature"]>[E]["params"]) => void;

package/esm/internals/utils/publishTreeViewEvent.js

@@ -0,0 +1,3 @@
+export const publishTreeViewEvent = (instance, eventName, params) => {
+  instance.$$publishEvent(eventName, params);
+};

package/esm/internals/utils/selectors.d.ts

@@ -0,0 +1,9 @@
+import { CreateSelectorFunction } from 'reselect';
+import { TreeViewAnyPluginSignature, TreeViewState } from "../models/index.js";
+export type TreeViewRootSelector<TSignature extends TreeViewAnyPluginSignature> = <TSignatures extends [TSignature]>(state: TreeViewState<TSignatures>) => TSignature['state'][keyof TSignature['state']];
+export type TreeViewSelector<TState, TArgs, TResult> = (state: TState, args: TArgs) => TResult;
+/**
+ * Method wrapping reselect's createSelector to provide caching for tree view instances.
+ *
+ */
+export declare const createSelector: CreateSelectorFunction;

package/{node → esm}/internals/utils/selectors.js

@@ -1,12 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createSelector = void 0;
-var _reselect = require("reselect");
-const reselectCreateSelector = (0, _reselect.createSelectorCreator)({
-  memoize: _reselect.lruMemoize,
+import { lruMemoize, createSelectorCreator } from 'reselect';
+const reselectCreateSelector = createSelectorCreator({
+  memoize: lruMemoize,
   memoizeOptions: {
     maxSize: 1,
     equalityCheck: Object.is
@@ -17,7 +11,7 @@ const cache = new WeakMap();
  * Method wrapping reselect's createSelector to provide caching for tree view instances.
  *
  */
-const createSelector = (...createSelectorArgs) => {
+export const createSelector = (...createSelectorArgs) => {
   const selector = (state, selectorArgs) => {
     const cacheKey = state.cacheKey;
 
@@ -40,5 +34,4 @@ const createSelector = (...createSelectorArgs) => {
     return fn(state, selectorArgs);
   };
   return selector;
-};
-exports.createSelector = createSelector;
+};

package/esm/internals/utils/tree.d.ts

@@ -0,0 +1,32 @@
+import { TreeViewState } from "../models/index.js";
+import type { UseTreeViewExpansionSignature } from '../plugins/useTreeViewExpansion';
+import type { UseTreeViewItemsSignature } from '../plugins/useTreeViewItems';
+export declare const getPreviousNavigableItem: (state: TreeViewState<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>, itemId: string) => string | null;
+export declare const getNextNavigableItem: (state: TreeViewState<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>, itemId: string) => string | null;
+export declare const getLastNavigableItem: (state: TreeViewState<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>) => string;
+export declare const getFirstNavigableItem: (state: TreeViewState<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>) => string;
+/**
+ * This is used to determine the start and end of a selection range so
+ * we can get the items between the two border items.
+ *
+ * It finds the items' common ancestor using
+ * a naive implementation of a lowest common ancestor algorithm
+ * (https://en.wikipedia.org/wiki/Lowest_common_ancestor).
+ * Then compares the ancestor's 2 children that are ancestors of itemA and ItemB
+ * so we can compare their indexes to work out which item comes first in a depth first search.
+ * (https://en.wikipedia.org/wiki/Depth-first_search)
+ *
+ * Another way to put it is which item is shallower in a trémaux tree
+ * https://en.wikipedia.org/wiki/Tr%C3%A9maux_tree
+ */
+export declare const findOrderInTremauxTree: (state: TreeViewState<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>, itemAId: string, itemBId: string) => string[];
+export declare const getNonDisabledItemsInRange: (state: TreeViewState<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>, itemAId: string, itemBId: string) => string[];
+export declare const getAllNavigableItems: (state: TreeViewState<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>) => string[];
+/**
+ * Checks if the target is in a descendant of this item.
+ * This can prevent from firing some logic on the ancestors on the interacted item when the event handler is on the root.
+ * @param {HTMLElement} target The target to check
+ * @param {HTMLElement | null} itemRoot The root of the item to check if the event target is in its descendants
+ * @returns {boolean} Whether the target is in a descendant of this item
+ */
+export declare const isTargetInDescendants: (target: HTMLElement, itemRoot: HTMLElement | null) => boolean;