@dxos/plugin-navtree 0.8.4-main.1068cf700f → 0.8.4-main.1c7ec43d41

package/src/{components/CommandsDialog/CommandsDialog.tsx → containers/CommandsDialogContent/CommandsDialogContent.tsx}

@@ -11,11 +11,11 @@ import { Keyboard, keySymbols } from '@dxos/keyboard';
 import { Graph, Node, useActionRunner } from '@dxos/plugin-graph';
 import { useActions } from '@dxos/plugin-graph';
 import { Button, Dialog, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { SearchList, useSearchListResults } from '@dxos/react-ui-searchlist';
+import { SearchList, useSearchListResults } from '@dxos/react-ui-search';
 import { osTranslations } from '@dxos/ui-theme';
 import { getHostPlatform } from '@dxos/util';
 
-import { KEY_BINDING, meta } from '../../meta';
+import { KEY_BINDING, meta } from '#meta';
 
 export type CommandsDialogContentProps = {
   selected?: string;
@@ -25,7 +25,7 @@ export type CommandsDialogContentProps = {
 export const CommandsDialogContent = forwardRef<HTMLDivElement, CommandsDialogContentProps>(
   ({ selected: initial }, forwardedRef) => {
     const { t } = useTranslation(meta.id);
-    const { invokeSync } = useOperationInvoker();
+    const { invokePromise } = useOperationInvoker();
     const runAction = useActionRunner();
     const { graph } = useAppGraph();
     const [selected, setSelected] = useState<string | undefined>(initial);
@@ -38,12 +38,12 @@ export const CommandsDialogContent = forwardRef<HTMLDivElement, CommandsDialogCo
       const actionMap = new Set<string>();
       const actions: Node.ActionLike[] = [];
       Graph.traverse(graph, {
+        relation: ['child', 'action'],
         visitor: (node, path) => {
-          if (
-            (Node.isAction(node) || Node.isActionGroup(node)) &&
-            !actionMap.has(node.id) &&
-            current.startsWith(path.slice(0, -1).join('/'))
-          ) {
+          const isActionLike = Node.isAction(node) || Node.isActionGroup(node);
+          const parentId = path.at(-2) ?? '';
+          const matches = current === parentId || current.startsWith(parentId + '/');
+          if (isActionLike && !actionMap.has(node.id) && matches) {
             actionMap.add(node.id);
             actions.push(node);
           }
@@ -70,58 +70,57 @@ export const CommandsDialogContent = forwardRef<HTMLDivElement, CommandsDialogCo
 
     return (
       <Dialog.Content ref={forwardedRef}>
-        <Dialog.Title>{t('commands dialog title', { ns: meta.id })}</Dialog.Title>
+        <Dialog.Title srOnly>{t('commands-dialog.title', { ns: meta.id })}</Dialog.Title>
         <SearchList.Root onSearch={handleSearch}>
-          <SearchList.Content>
-            <SearchList.Input placeholder={t('command list input placeholder')} />
-            <SearchList.Viewport>
-              {results.map((action) => {
-                const shortcut =
-                  typeof action.properties.keyBinding === 'string'
-                    ? action.properties.keyBinding
-                    : action.properties.keyBinding?.[getHostPlatform()];
+          <SearchList.Input placeholder={t('command-list-input.placeholder')} />
+          <SearchList.Viewport>
+            {results.map((action) => {
+              const shortcut =
+                typeof action.properties.keyBinding === 'string'
+                  ? action.properties.keyBinding
+                  : action.properties.keyBinding?.[getHostPlatform()];
 
-                return (
-                  <SearchList.Item
-                    value={action.id}
-                    key={action.id}
-                    label={toLocalizedString(action.properties.label, t)}
-                    icon={action.properties.icon}
-                    suffix={shortcut ? keySymbols(shortcut).join('') : undefined}
-                    onSelect={() => {
-                      if (action.properties.disabled) {
-                        return;
-                      }
+              return (
+                <SearchList.Item
+                  value={action.id}
+                  key={action.id}
+                  label={toLocalizedString(action.properties.label, t)}
+                  icon={action.properties.icon}
+                  suffix={shortcut ? keySymbols(shortcut).join('') : undefined}
+                  onSelect={() => {
+                    if (action.properties.disabled) {
+                      return;
+                    }
 
-                      if (Node.isActionGroup(action)) {
-                        setSelected(action.id);
-                        return;
-                      }
+                    if (Node.isActionGroup(action)) {
+                      setSelected(action.id);
+                      return;
+                    }
 
-                      invokeSync(LayoutOperation.UpdateDialog, { state: false });
-                      setTimeout(() => {
-                        const node = Graph.getConnections(graph, group?.id ?? action.id, 'inbound')[0];
-                        if (node && Node.isAction(action)) {
-                          void runAction(action, { parent: node, caller: KEY_BINDING });
-                        }
-                      });
-                    }}
-                    classNames='flex items-center gap-2'
-                    disabled={action.properties.disabled}
-                    {...(action.properties?.testId && {
-                      'data-testid': action.properties.testId,
-                    })}
-                  />
-                );
-              })}
-            </SearchList.Viewport>
-          </SearchList.Content>
+                    void invokePromise(LayoutOperation.UpdateDialog, { state: false });
+                    setTimeout(() => {
+                      const lookupId = group?.id ?? action.id;
+                      const node = Graph.getConnections(graph, lookupId, Node.actionRelation('inbound'))[0];
+                      if (node && Node.isAction(action)) {
+                        void runAction(action, { parent: node, caller: KEY_BINDING });
+                      }
+                    });
+                  }}
+                  classNames='flex items-center gap-2'
+                  disabled={action.properties.disabled}
+                  {...(action.properties?.testId && {
+                    'data-testid': action.properties.testId,
+                  })}
+                />
+              );
+            })}
+          </SearchList.Viewport>
         </SearchList.Root>
-        <div role='none' className='pli-cardSpacingInline pbe-cardSpacingBlock'>
+        <Dialog.ActionBar>
           <Dialog.Close asChild>
-            <Button classNames='is-full'>{t('close label', { ns: osTranslations })}</Button>
+            <Button classNames='w-full'>{t('close.label', { ns: osTranslations })}</Button>
           </Dialog.Close>
-        </div>
+        </Dialog.ActionBar>
       </Dialog.Content>
     );
   },

package/src/containers/CommandsDialogContent/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export { CommandsDialogContent as default } from './CommandsDialogContent';

package/src/{components/CommandsDialog → containers/CommandsTrigger}/CommandsTrigger.tsx

@@ -8,19 +8,21 @@ import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { LayoutOperation } from '@dxos/app-toolkit';
 import { Button, Icon, useTranslation } from '@dxos/react-ui';
 
-import { COMMANDS_DIALOG, meta } from '../../meta';
+import { COMMANDS_DIALOG, meta } from '#meta';
 
 // TODO(thure): Refactor to be handled by a more appropriate plugin.
 export const CommandsTrigger = () => {
-  const { invokeSync } = useOperationInvoker();
+  const { invokePromise } = useOperationInvoker();
   const { t } = useTranslation(meta.id);
   return (
     <Button
-      classNames='m-1 pli-1 lg:pli-2'
-      onClick={() => invokeSync(LayoutOperation.UpdateDialog, { subject: COMMANDS_DIALOG, blockAlign: 'start' })}
+      classNames='m-1 px-1 lg:px-2'
+      onClick={() =>
+        void invokePromise(LayoutOperation.UpdateDialog, { subject: COMMANDS_DIALOG, blockAlign: 'start' })
+      }
     >
-      <span className='text-description font-normal grow text-start'>{t('command list input placeholder')}</span>
-      <Icon icon='ph--magnifying-glass--regular' size={5} />
+      <span className='text-description font-normal grow text-start'>{t('command-list-input.placeholder')}</span>
+      <Icon icon='ph--magnifying-glass--regular' />
     </Button>
   );
 };

package/src/containers/CommandsTrigger/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export { CommandsTrigger as default } from './CommandsTrigger';

package/src/{components → containers/NavTreeContainer}/NavTreeContainer.tsx

@@ -2,168 +2,114 @@
 // Copyright 2023 DXOS.org
 //
 
-import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { type Instruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import React, { forwardRef, memo, useCallback, useEffect, useMemo } from 'react';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
 import { LayoutOperation } from '@dxos/app-toolkit';
 import { useAppGraph, useLayout } from '@dxos/app-toolkit/ui';
-import { PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
 import { Graph, Node, useActionRunner } from '@dxos/plugin-graph';
-import { useConnections, useActions as useGraphActions } from '@dxos/plugin-graph';
 import { useMediaQuery, useSidebars } from '@dxos/react-ui';
-import { type TreeData, type TreeItemDataProps, isTreeData } from '@dxos/react-ui-list';
-import { mx } from '@dxos/ui-theme';
-import { arrayMove, byPosition } from '@dxos/util';
+import { type TreeData, isTreeData } from '@dxos/react-ui-list';
+import { arrayMove } from '@dxos/util';
 
-import { useIsAlternateTree, useIsCurrent, useIsOpen, useNavTreeState } from '../hooks';
-import { meta } from '../meta';
-import { type FlattenedActions, type NavTreeItemGraphNode } from '../types';
-import { getChildren, getParent, resolveMigrationOperation } from '../util';
+import { NAV_TREE_ITEM, NavTree, NavTreeContext } from '#components';
+import { useNavTreeModel, useNavTreeState } from '#hooks';
+import { meta } from '#meta';
+import { type NavTreeItemGraphNode } from '#types';
 
-import { NAV_TREE_ITEM, NavTree } from './NavTree';
-import { NavTreeContext } from './NavTreeContext';
-import { type NavTreeContextValue } from './types';
+import { filterItems, getParent, resolveMigrationOperation } from '../../util';
 
 // TODO(thure): Is NavTree truly authoritative in this regard?
 export const NODE_TYPE = 'dxos/app-graph/node';
 
-const renderItemEnd = ({ node, open }: { node: Node.Node; open: boolean }) => (
-  <Surface.Surface role='navtree-item-end' data={{ id: node.id, subject: node.data, open }} limit={1} />
-);
-
-const getChildrenFilter = (node: Node.Node): node is Node.Node =>
-  !Node.isActionLike(node) && node.type !== PLANK_COMPANION_TYPE && node.properties.disposition !== 'hidden';
-
-const filterItems = (node: Node.Node, disposition?: string) => {
-  if (!disposition && (node.properties.disposition === 'hidden' || node.properties.disposition === 'alternate-tree')) {
-    return false;
-  } else if (!disposition) {
-    const action = Node.isAction(node);
-    return !action || node.properties.disposition === 'item';
-  } else {
-    return node.properties.disposition === disposition;
-  }
+// TODO(wittjosiah): Avoid using Surface within the navtree, prefer declarative data flow.
+const NavTreeItemEnd = ({ node, open }: { node: Node.Node; open: boolean }) => {
+  const data = useMemo(() => ({ id: node.id, subject: node.data, open }), [node.id, node.data, open]);
+  return <Surface.Surface role='navtree-item-end' data={data} limit={1} />;
 };
 
 const getItems = (graph: Graph.ReadableGraph, node?: Node.Node, disposition?: string) => {
-  return Graph.getConnections(graph, node?.id ?? Node.RootId, 'outbound').filter((node) =>
-    filterItems(node, disposition),
-  );
-};
-
-const useItems = (node?: Node.Node, options?: { disposition?: string; sort?: boolean }) => {
-  const { graph } = useAppGraph();
-  const connections = useConnections(graph, node?.id ?? Node.RootId);
-  const filtered = connections.filter((node) => filterItems(node, options?.disposition));
-  return options?.sort ? filtered.toSorted((a, b) => byPosition(a.properties, b.properties)) : filtered;
-};
-
-const useActions = (node: Node.Node): FlattenedActions => {
-  const { graph } = useAppGraph();
-  const actions = useGraphActions(graph, node.id);
-
-  return useMemo(
-    () =>
-      actions.reduce(
-        (acc: FlattenedActions, arg) => {
-          if (arg.properties.disposition === 'item') {
-            return acc;
-          }
-
-          acc.actions.push(arg);
-          if (!Node.isAction(arg)) {
-            const actionGroup = Graph.getActions(graph, arg.id);
-            acc.groupedActions[arg.id] = actionGroup;
-          }
-          return acc;
-        },
-        { actions: [], groupedActions: {} },
-      ),
-    [actions],
-  );
+  return Graph.getConnections(graph, node?.id ?? Node.RootId, 'child').filter((node) => filterItems(node, disposition));
 };
 
 export type NavTreeContainerProps = {
   popoverAnchorId?: string;
-  topbar?: boolean;
-} & Pick<NavTreeContextValue, 'tab'>;
+  tab: string;
+};
 
 export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProps>(
-  ({ tab, popoverAnchorId, topbar }, forwardedRef) => {
+  ({ tab, popoverAnchorId }, forwardedRef) => {
     const [isLg] = useMediaQuery('lg');
-    const { invokeSync, invokePromise } = useOperationInvoker();
+    const { invokePromise } = useOperationInvoker();
     const runAction = useActionRunner();
     const { graph } = useAppGraph();
     const { getItem, setItem } = useNavTreeState();
     const layout = useLayout();
+    const model = useNavTreeModel(Node.RootId);
     const { navigationSidebarState } = useSidebars(meta.id);
+    const latestRef = useRef({
+      tab,
+      activeItems: layout.active,
+      navigationSidebarState,
+      isLg,
+    });
 
-    const getProps = useCallback(
-      (node: Node.Node, path: string[]): TreeItemDataProps => {
-        const children = getChildren(graph, node, path).filter(getChildrenFilter);
-        const parentOf =
-          children.length > 0 ? children.map(({ id }) => id) : node.properties.role === 'branch' ? [] : undefined;
-        return {
-          id: node.id,
-          parentOf,
-          disabled: node.properties.disabled,
-          label: node.properties.label ?? node.id,
-          className: mx(node.properties.className, node.properties.modified && 'italic'), // TODO(burdon): Italic?
-          headingClassName: node.properties.headingClassName,
-          icon: node.properties.icon,
-          iconHue: node.properties.iconHue,
-          testId: node.properties.testId,
-        };
-      },
-      [graph],
-    );
-
-    const loadDescendents = useCallback(
-      (node: Node.Node) => {
-        Graph.expand(graph, node.id, 'outbound');
-        // Load one level deeper, which resolves some juddering observed on open/close.
-        Graph.getConnections(graph, node.id, 'outbound').forEach((child) => {
-          Graph.expand(graph, child.id, 'outbound');
-        });
-      },
-      [graph],
-    );
+    useEffect(() => {
+      latestRef.current = {
+        tab,
+        activeItems: layout.active,
+        navigationSidebarState,
+        isLg,
+      };
+    }, [tab, layout.active, navigationSidebarState, isLg]);
 
     const handleOpenChange = useCallback(
       ({ item: { id }, path, open }: { item: Node.Node; path: string[]; open: boolean }) => {
         // TODO(thure): This might become a localstorage leak; openItemIds that no longer exist should be removed from this map.
         setItem(path, 'open', open);
-        Graph.expand(graph, id, 'outbound');
+        Graph.expand(graph, id, 'child');
       },
-      [graph],
+      [graph, setItem],
     );
 
     const handleTabChange = useCallback(
       (node: NavTreeItemGraphNode) => {
-        invokeSync(LayoutOperation.UpdateSidebar, {
+        Graph.expand(graph, node.id, 'child');
+
+        const {
+          tab: activeTab,
+          activeItems,
+          navigationSidebarState: currentSidebarState,
+          isLg: latestIsLg,
+        } = latestRef.current;
+        void invokePromise(LayoutOperation.UpdateSidebar, {
           state:
-            node.id === tab
-              ? navigationSidebarState === 'expanded'
-                ? isLg
+            node.id === activeTab
+              ? currentSidebarState === 'expanded'
+                ? latestIsLg
                   ? 'collapsed'
                   : 'closed'
                 : 'expanded'
               : 'expanded',
         });
 
-        invokeSync(LayoutOperation.SwitchWorkspace, { subject: node.id });
+        void invokePromise(LayoutOperation.SwitchWorkspace, { subject: node.id });
 
         // Open the first item if the workspace is empty.
-        if (layout.active.length === 0) {
+        if (activeItems.length === 0) {
           const [item] = getItems(graph, node).filter((node) => !Node.isActionLike(node));
           if (item && item.data) {
-            invokeSync(LayoutOperation.Open, { subject: [item.id] });
+            if (layout.mode === 'multi') {
+              void invokePromise(LayoutOperation.Set, { subject: [item.id] });
+            } else {
+              void invokePromise(LayoutOperation.Open, { subject: [item.id] });
+            }
           }
         }
       },
-      [invokeSync, layout.active, tab, navigationSidebarState, isLg],
+      [invokePromise, graph, layout.mode],
     );
 
     const blockInstruction = useCallback(
@@ -188,18 +134,22 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
         }
 
         if (Node.isAction(node)) {
-          const [parent] = Graph.getConnections(graph, node.id, 'inbound');
+          const [parent] = Graph.getConnections(graph, node.id, Node.childRelation('inbound'));
           if (parent) {
-            void runAction(node, { parent, caller: NAV_TREE_ITEM });
+            void runAction(node, { parent, path, caller: NAV_TREE_ITEM });
           }
           return;
         }
 
         const current = getItem(path).current;
         if (!current) {
-          invokeSync(LayoutOperation.Open, { subject: [node.id], key: node.properties.key });
+          if (layout.mode === 'multi') {
+            void invokePromise(LayoutOperation.Set, { subject: [node.id] });
+          } else {
+            void invokePromise(LayoutOperation.Open, { subject: [node.id], key: node.properties.key });
+          }
         } else if (option) {
-          invokeSync(LayoutOperation.Close, { subject: [node.id] });
+          void invokePromise(LayoutOperation.Close, { subject: [node.id] });
         } else {
           void invokePromise(LayoutOperation.ScrollIntoView, { subject: node.id });
         }
@@ -212,13 +162,13 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
         }
 
         if (!isLg) {
-          invokeSync(LayoutOperation.UpdateSidebar, { state: 'closed' });
+          void invokePromise(LayoutOperation.UpdateSidebar, { state: 'closed' });
         }
       },
-      [graph, invokeSync, invokePromise, getItem, isLg, runAction],
+      [graph, invokePromise, getItem, runAction, isLg, layout.mode],
     );
 
-    const handleBack = useCallback(() => invokeSync(LayoutOperation.RevertWorkspace), [invokeSync]);
+    const handleBack = useCallback(() => void invokePromise(LayoutOperation.RevertWorkspace), [invokePromise]);
 
     // TODO(wittjosiah): Factor out hook.
     useEffect(() => {
@@ -236,8 +186,9 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
             const targetNode = target.data.item as NavTreeItemGraphNode;
             const sourcePath = source.data.path as string[];
             const targetPath = target.data.path as string[];
+            const sameParent = sourcePath.slice(0, -1).join() === targetPath.slice(0, -1).join();
             const operation =
-              sourcePath.slice(0, -1).join() === targetPath.slice(0, -1).join() && instruction.type !== 'make-child'
+              sameParent && instruction.type !== 'make-child'
                 ? 'rearrange'
                 : resolveMigrationOperation(graph, sourceNode, targetPath, targetNode);
             const sourceParent = getParent(graph, sourceNode, sourcePath);
@@ -266,7 +217,7 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
               }
               case 'transfer': {
                 const target = instruction.type === 'make-child' ? targetNode : targetParent;
-                if (!target?.properties.onTransferStart || !sourceParent?.properties.onTransferEnd) {
+                if (!target?.properties.onTransferStart || target?.id === sourceParent?.id) {
                   break;
                 }
                 void target?.properties.onTransferStart(sourceNode, migrationIndex);
@@ -279,57 +230,39 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
       });
     }, [graph]);
 
-    const setAlternateTree = useCallback(
-      (path: string[], open: boolean) => {
-        setItem(path, 'alternateTree', open);
-      },
-      [setItem],
-    );
+    const onItemHover = useCallback(({ item }: { item: Node.Node }) => Graph.expand(graph, item.id, 'child'), [graph]);
 
     const navTreeContextValue = useMemo(
       () => ({
+        model,
+        popoverAnchorId,
+        renderItemEnd: NavTreeItemEnd,
         blockInstruction,
         canDrop,
         canSelect,
-        getProps,
-        useIsAlternateTree,
-        useIsCurrent,
-        useIsOpen,
-        loadDescendents,
         onBack: handleBack,
         onOpenChange: handleOpenChange,
         onSelect: handleSelect,
         onTabChange: handleTabChange,
-        popoverAnchorId,
-        renderItemEnd,
-        setAlternateTree,
-        tab,
-        topbar,
-        useActions,
-        useItems,
+        onItemHover,
       }),
       [
+        model,
+        popoverAnchorId,
         blockInstruction,
         canDrop,
         canSelect,
-        getProps,
         handleBack,
         handleOpenChange,
         handleSelect,
         handleTabChange,
-        loadDescendents,
-        popoverAnchorId,
-        renderItemEnd,
-        setAlternateTree,
-        tab,
-        topbar,
-        useActions,
+        onItemHover,
       ],
     );
 
     return (
       <NavTreeContext.Provider value={navTreeContextValue}>
-        <NavTree id={Node.RootId} root={Graph.getRoot(graph)} open={layout.sidebarOpen} ref={forwardedRef} />
+        <NavTree id={Node.RootId} root={Graph.getRoot(graph)} tab={tab} open={layout.sidebarOpen} ref={forwardedRef} />
       </NavTreeContext.Provider>
     );
   },

package/src/containers/NavTreeContainer/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export { NavTreeContainer, NODE_TYPE } from './NavTreeContainer';
+export { NavTreeContainer as default } from './NavTreeContainer';

package/src/{components → containers/NavTreeDocumentTitle}/NavTreeDocumentTitle.tsx

@@ -7,12 +7,12 @@ import { type Node } from '@dxos/app-graph';
 import { toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { osTranslations } from '@dxos/ui-theme';
 
-import { meta } from '../meta';
+import { meta } from '#meta';
 
 export const NavTreeDocumentTitle = ({ node }: { node?: Node.Node }) => {
   const { t } = useTranslation(meta.id);
   useEffect(() => {
-    document.title = node ? toLocalizedString(node.properties.label, t) : t('current app name', { ns: osTranslations });
+    document.title = node ? toLocalizedString(node.properties.label, t) : t('current-app.name', { ns: osTranslations });
   }, [node?.properties?.label]);
   return null;
 };

package/src/containers/NavTreeDocumentTitle/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export { NavTreeDocumentTitle as default } from './NavTreeDocumentTitle';

package/src/containers/index.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export { NODE_TYPE } from './NavTreeContainer';
+
+export const CommandsDialogContent: ComponentType<any> = lazy(() => import('./CommandsDialogContent'));
+export const CommandsTrigger: ComponentType<any> = lazy(() => import('./CommandsTrigger'));
+export const NavTreeContainer: ComponentType<any> = lazy(() => import('./NavTreeContainer'));
+export const NavTreeDocumentTitle: ComponentType<any> = lazy(() => import('./NavTreeDocumentTitle'));