@dxos/plugin-navtree 0.7.4 → 0.7.5-main.937ce75

package/src/components/CommandsTrigger.tsx

@@ -5,24 +5,27 @@
 import { MagnifyingGlass } from '@phosphor-icons/react';
 import React from 'react';
 
-import { LayoutAction, useIntent } from '@dxos/app-framework';
+import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
 import { Button, useTranslation } from '@dxos/react-ui';
 import { getSize } from '@dxos/react-ui-theme';
 
-import { NAVTREE_PLUGIN } from '../meta';
+import { COMMANDS_DIALOG, NAVTREE_PLUGIN } from '../meta';
 
 // TODO(thure): Refactor to be handled by a more appropriate plugin.
 export const CommandsTrigger = () => {
-  const { dispatch } = useIntent();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { t } = useTranslation(NAVTREE_PLUGIN);
   return (
     <Button
       classNames='w-full h-full !rounded-none'
       onClick={() =>
-        dispatch({
-          action: LayoutAction.SET_LAYOUT,
-          data: { element: 'dialog', component: `${NAVTREE_PLUGIN}/Commands`, dialogBlockAlign: 'start' },
-        })
+        dispatch(
+          createIntent(LayoutAction.SetLayout, {
+            element: 'dialog',
+            component: COMMANDS_DIALOG,
+            dialogBlockAlign: 'start',
+          }),
+        )
       }
     >
       <span className='text-description font-normal grow text-start'>{t('command list input placeholder')}</span>

package/src/components/NavTree.tsx

@@ -23,14 +23,13 @@ export type NavTreeProps = Omit<
 
 export const NavTree = ({ getActions, loadDescendents, renderItemEnd, popoverAnchorId, ...props }: NavTreeProps) => {
   const renderColumns = useCallback<NonNullable<TreeProps<NavTreeItemGraphNode>['renderColumns']>>(
-    ({ item, path, menuOpen, setMenuOpen }) => {
+    ({ item, path, open }) => {
       return (
         <NavTreeColumns
           path={path}
           node={item}
           getActions={getActions}
-          menuOpen={menuOpen}
-          setMenuOpen={setMenuOpen}
+          open={open}
           loadDescendents={loadDescendents}
           renderItemEnd={renderItemEnd}
           popoverAnchorId={popoverAnchorId}
@@ -54,10 +53,9 @@ type NavTreeColumnsProps = {
   path: string[];
   node: Node;
   getActions: (node: Node) => FlattenedActions;
-  menuOpen: boolean;
-  setMenuOpen: (open: boolean) => void;
+  open: boolean;
   loadDescendents?: (node: Node) => MaybePromise<void>;
-  renderItemEnd?: FC<{ node: Node }>;
+  renderItemEnd?: FC<{ node: Node; open: boolean }>;
   popoverAnchorId?: string;
 };
 
@@ -65,8 +63,7 @@ const NavTreeColumns = ({
   path,
   node,
   getActions,
-  menuOpen,
-  setMenuOpen,
+  open,
   loadDescendents,
   renderItemEnd: ItemEnd,
   popoverAnchorId,
@@ -123,14 +120,12 @@ const NavTreeColumns = ({
             menuActions={actions}
             menuType='dropdown'
             caller={NAV_TREE_ITEM}
-            menuOpen={menuOpen}
-            onChangeMenuOpen={setMenuOpen}
           />
         ) : (
           <Treegrid.Cell />
         )}
       </ActionRoot>
-      {ItemEnd && <ItemEnd node={node} />}
+      {ItemEnd && <ItemEnd node={node} open={open} />}
     </>
   );
 };

package/src/components/NavTreeContainer.tsx

@@ -7,11 +7,11 @@ import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-a
 import { untracked } from '@preact/signals-core';
 import React, { memo, useCallback, useEffect } from 'react';
 
-import { LayoutAction, NavigationAction, Surface, useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent, LayoutAction, NavigationAction, Surface, useIntentDispatcher } from '@dxos/app-framework';
 import { isAction, isActionLike, type Node } from '@dxos/app-graph';
 import { useGraph } from '@dxos/plugin-graph';
 import { isEchoObject, isSpace } from '@dxos/react-client/echo';
-import { ElevationProvider, useMediaQuery, useSidebars } from '@dxos/react-ui';
+import { useMediaQuery, useSidebars } from '@dxos/react-ui';
 import { isTreeData, type TreeData, type PropsFromTreeItem } from '@dxos/react-ui-list';
 import { mx } from '@dxos/react-ui-theme';
 import { arrayMove } from '@dxos/util';
@@ -32,8 +32,8 @@ import {
 // TODO(thure): Is NavTree truly authoritative in this regard?
 export const NODE_TYPE = 'dxos/app-graph/node';
 
-const renderItemEnd = ({ node }: { node: Node }) => (
-  <Surface role='navtree-item-end' data={{ object: node.data, id: node.id }} />
+const renderItemEnd = ({ node, open }: { node: Node; open: boolean }) => (
+  <Surface role='navtree-item-end' data={{ id: node.id, subject: node.data, open }} limit={1} />
 );
 
 export type NavTreeContainerProps = {
@@ -43,7 +43,7 @@ export type NavTreeContainerProps = {
 export const NavTreeContainer = memo(({ isCurrent, popoverAnchorId, ...props }: NavTreeContainerProps) => {
   const { closeNavigationSidebar } = useSidebars(NAVTREE_PLUGIN);
   const [isLg] = useMediaQuery('lg', { ssr: false });
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { graph } = useGraph();
 
   const getActions = useCallback((node: Node) => naturalGetActions(graph, node), [graph]);
@@ -124,28 +124,11 @@ export const NavTreeContainer = memo(({ isCurrent, popoverAnchorId, ...props }:
 
       const current = isCurrent(path, node);
       if (!current) {
-        void dispatch({
-          action: NavigationAction.OPEN,
-          data: {
-            activeParts: {
-              main: [node.id],
-            },
-          },
-        });
+        void dispatch(createIntent(NavigationAction.Open, { activeParts: { main: [node.id] } }));
       } else if (option) {
-        void dispatch({
-          action: NavigationAction.CLOSE,
-          data: {
-            activeParts: {
-              main: [node.id],
-            },
-          },
-        });
+        void dispatch(createIntent(NavigationAction.Close, { activeParts: { main: [node.id] } }));
       } else {
-        void dispatch({
-          action: LayoutAction.SCROLL_INTO_VIEW,
-          data: { id: node.id },
-        });
+        void dispatch(createIntent(LayoutAction.ScrollIntoView, { id: node.id }));
       }
 
       const defaultAction = graph.actions(node).find((action) => action.properties?.disposition === 'default');
@@ -220,35 +203,30 @@ export const NavTreeContainer = memo(({ isCurrent, popoverAnchorId, ...props }:
   }, [graph]);
 
   return (
-    <ElevationProvider elevation='chrome'>
-      <div
-        role='none'
-        className='grid grid-cols-1 grid-rows-[var(--rail-size)_1fr_min-content] bs-full overflow-hidden'
-      >
-        {/* TODO(wittjosiah): Factor out surfaces to layout? */}
-        <div role='none' className='border-be border-separator'>
-          <Surface role='search-input' limit={1} />
-        </div>
-
-        {/* TODO(thure): What gives this an inline `overflow: initial`? */}
-        <div role='none' className='border-be border-separator !overflow-y-auto'>
-          <NavTree
-            id={graph.root.id}
-            getActions={getActions}
-            getItems={getItems}
-            getProps={getProps}
-            isCurrent={isCurrent}
-            loadDescendents={loadDescendents}
-            renderItemEnd={renderItemEnd}
-            popoverAnchorId={popoverAnchorId}
-            canDrop={canDrop}
-            onSelect={handleSelect}
-            {...props}
-          />
-        </div>
-
-        <NavTreeFooter />
+    <div role='none' className='grid grid-cols-1 grid-rows-[var(--rail-size)_1fr_min-content] bs-full overflow-hidden'>
+      {/* TODO(wittjosiah): Factor out surfaces to layout? */}
+      <div role='none' className='border-be border-separator'>
+        <Surface role='search-input' limit={1} />
       </div>
-    </ElevationProvider>
+
+      {/* TODO(thure): What gives this an inline `overflow: initial`? */}
+      <div role='none' className='border-be border-separator !overflow-y-auto'>
+        <NavTree
+          id={graph.root.id}
+          getActions={getActions}
+          getItems={getItems}
+          getProps={getProps}
+          isCurrent={isCurrent}
+          loadDescendents={loadDescendents}
+          renderItemEnd={renderItemEnd}
+          popoverAnchorId={popoverAnchorId}
+          canDrop={canDrop}
+          onSelect={handleSelect}
+          {...props}
+        />
+      </div>
+
+      <NavTreeFooter />
+    </div>
   );
 });

package/src/components/NavTreeFooter.tsx

@@ -12,6 +12,7 @@ import {
   parseNavigationPlugin,
   useResolvePlugin,
   useIntentDispatcher,
+  createIntent,
 } from '@dxos/app-framework';
 import { useConfig } from '@dxos/react-client';
 import {
@@ -41,7 +42,7 @@ export const NavTreeFooter = (props: { layoutPart?: LayoutPart }) => {
   const config = useConfig();
   const { t } = useTranslation(NAVTREE_PLUGIN);
   const { navigationSidebarOpen } = useSidebars(NAVTREE_PLUGIN);
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { version, timestamp, commitHash } = config.values.runtime?.app?.build ?? {};
   const navigationPlugin = useResolvePlugin(parseNavigationPlugin);
   const [_, v] = version?.match(VERSION_REGEX) ?? [];
@@ -126,7 +127,7 @@ export const NavTreeFooter = (props: { layoutPart?: LayoutPart }) => {
             data-testid='treeView.openSettings'
             data-joyride='welcome/settings'
             {...(!navigationSidebarOpen && { tabIndex: -1 })}
-            onClick={() => dispatch({ action: SettingsAction.OPEN })}
+            onClick={() => dispatch(createIntent(SettingsAction.Open))}
           >
             <span className='sr-only'>{t('open settings label')}</span>
             <GearSix className={mx(getSize(5), 'rotate-90')} />

package/src/components/NavTreeItemAction.stories.tsx

@@ -53,5 +53,3 @@ export default {
 };
 
 export const Default = {};
-
-export const SearchList = { args: { menuType: 'searchList' } };

package/src/components/NavTreeItemAction.tsx

@@ -2,24 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { type MutableRefObject, type PropsWithChildren, useRef, useState } from 'react';
+import React, { type MutableRefObject, useRef } from 'react';
 
-import { type Action, type ActionLike, type Node } from '@dxos/app-graph';
-import { keySymbols } from '@dxos/keyboard';
-import {
-  Button,
-  Dialog,
-  DropdownMenu,
-  ContextMenu,
-  Tooltip,
-  useTranslation,
-  toLocalizedString,
-  Icon,
-} from '@dxos/react-ui';
-import { SearchList } from '@dxos/react-ui-searchlist';
-import { descriptionText, hoverableControlItem, hoverableOpenControlItem, mx } from '@dxos/react-ui-theme';
-import { getHostPlatform } from '@dxos/util';
+import { type Action, type Node } from '@dxos/app-graph';
+import { useTranslation, toLocalizedString, IconButton } from '@dxos/react-ui';
+import { DropdownMenu, type MenuAction } from '@dxos/react-ui-menu';
+import { hoverableControlItem, hoverableOpenControlItem, mx } from '@dxos/react-ui-theme';
 
 import { NAVTREE_PLUGIN } from '../meta';
 import { type ActionProperties } from '../types';
@@ -30,338 +18,87 @@ export type NavTreeItemActionMenuProps = ActionProperties & {
   monolithic?: boolean;
   menuActions?: Action[];
   suppressNextTooltip?: MutableRefObject<boolean>;
-  menuOpen?: boolean;
-  defaultMenuOpen?: boolean;
-  onChangeMenuOpen?: (nextOpen: boolean) => void;
   onAction?: (action: Action) => void;
 };
 
-const getShortcut = (action: ActionLike) => {
-  return typeof action.properties?.keyBinding === 'string'
-    ? action.properties.keyBinding
-    : action.properties?.keyBinding?.[getHostPlatform()];
-};
-
 const fallbackIcon = 'ph--placeholder--regular';
 
+const actionButtonProps = {
+  iconOnly: true,
+  size: 4 as const,
+  variant: 'ghost' as const,
+  density: 'fine' as const,
+  classNames: mx('shrink-0 !pli-2 pointer-fine:!pli-1', hoverableControlItem, hoverableOpenControlItem),
+};
+
 export const NavTreeItemActionDropdownMenu = ({
   label,
   icon,
   testId,
-  defaultMenuOpen,
   menuActions,
-  menuOpen,
-  suppressNextTooltip,
-  onChangeMenuOpen,
   onAction,
 }: NavTreeItemActionMenuProps) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
-
-  const [optionsMenuOpen, setOptionsMenuOpen] = useControllableState({
-    prop: menuOpen,
-    defaultProp: defaultMenuOpen,
-    onChange: onChangeMenuOpen,
-  });
+  const suppressNextTooltip = useRef<boolean>(false);
 
   return (
     <DropdownMenu.Root
-      {...{
-        open: optionsMenuOpen,
-        onOpenChange: (nextOpen: boolean) => {
-          if (!nextOpen && suppressNextTooltip) {
-            suppressNextTooltip.current = true;
-          }
-          return setOptionsMenuOpen(nextOpen);
-        },
-      }}
+      actions={menuActions as MenuAction[]}
+      onAction={onAction}
+      suppressNextTooltip={suppressNextTooltip}
     >
-      <Tooltip.Trigger asChild>
-        <DropdownMenu.Trigger asChild>
-          <Button
-            variant='ghost'
-            density='fine'
-            classNames={mx('shrink-0 !pli-2 pointer-fine:!pli-1', hoverableControlItem, hoverableOpenControlItem)}
-            data-testid={testId}
-            aria-label={t('tree item actions label')}
-          >
-            <span className='sr-only'>{toLocalizedString(label, t)}</span>
-            <Icon icon={icon ?? fallbackIcon} size={4} />
-          </Button>
-        </DropdownMenu.Trigger>
-      </Tooltip.Trigger>
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content classNames='z-[31]'>
-          <DropdownMenu.Viewport>
-            {menuActions?.map((action) => {
-              const shortcut = getShortcut(action);
-              return (
-                <DropdownMenu.Item
-                  key={action.id}
-                  onClick={(event) => {
-                    if (action.properties?.disabled) {
-                      return;
-                    }
-                    event.stopPropagation();
-                    // TODO(thure): Why does Dialog’s modal-ness cause issues if we don’t explicitly close the menu here?
-                    if (suppressNextTooltip) {
-                      suppressNextTooltip.current = true;
-                    }
-                    setOptionsMenuOpen(false);
-                    onAction?.(action);
-                  }}
-                  classNames='gap-2'
-                  disabled={action.properties?.disabled}
-                  {...(action.properties?.testId && { 'data-testid': action.properties.testId })}
-                >
-                  {action.properties?.icon && <Icon icon={action.properties!.icon} size={4} />}
-                  <span className='grow truncate'>{toLocalizedString(action.properties!.label, t)}</span>
-                  {shortcut && <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>}
-                </DropdownMenu.Item>
-              );
-            })}
-          </DropdownMenu.Viewport>
-          <DropdownMenu.Arrow />
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
+      <DropdownMenu.Trigger asChild>
+        <IconButton
+          {...actionButtonProps}
+          icon={icon ?? fallbackIcon}
+          label={toLocalizedString(label, t)}
+          data-testid={testId}
+          suppressNextTooltip={suppressNextTooltip}
+        />
+      </DropdownMenu.Trigger>
     </DropdownMenu.Root>
   );
 };
 
-export const NavTreeItemActionContextMenu = (
-  props: PropsWithChildren<Pick<NavTreeItemActionMenuProps, 'menuActions' | 'onAction'>>,
-) => {
-  return (props.menuActions?.length ?? 0) > 0 ? <NavTreeItemActionContextMenuImpl {...props} /> : <>{props.children}</>;
-};
-
-const NavTreeItemActionContextMenuImpl = ({
-  menuActions,
-  onAction,
-  children,
-}: PropsWithChildren<Pick<NavTreeItemActionMenuProps, 'menuActions' | 'onAction'>>) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
-
-  return (
-    <ContextMenu.Root>
-      <ContextMenu.Trigger asChild>{children}</ContextMenu.Trigger>
-      <ContextMenu.Portal>
-        <ContextMenu.Content classNames='z-[31]'>
-          <ContextMenu.Viewport>
-            {menuActions?.map((action) => {
-              const shortcut = getShortcut(action);
-              return (
-                <ContextMenu.Item
-                  key={action.id}
-                  onClick={(event) => {
-                    if (action.properties?.disabled) {
-                      return;
-                    }
-                    event.stopPropagation();
-                    onAction?.(action);
-                  }}
-                  classNames='gap-2'
-                  disabled={action.properties?.disabled}
-                  {...(action.properties?.testId && { 'data-testid': action.properties.testId })}
-                >
-                  {action.properties?.icon && <Icon icon={action.properties?.icon} size={4} />}
-                  <span className='grow truncate'>{toLocalizedString(action.properties!.label, t)}</span>
-                  {shortcut && <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>}
-                </ContextMenu.Item>
-              );
-            })}
-          </ContextMenu.Viewport>
-          <ContextMenu.Arrow />
-        </ContextMenu.Content>
-      </ContextMenu.Portal>
-    </ContextMenu.Root>
-  );
-};
-
-export const NavTreeItemActionSearchList = ({
-  menuActions,
-  icon,
-  label,
-  testId,
-  suppressNextTooltip,
-  onAction,
-}: Pick<
-  NavTreeItemActionMenuProps,
-  'icon' | 'menuActions' | 'testId' | 'label' | 'onAction' | 'suppressNextTooltip'
->) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
-
-  const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
-  const button = useRef<HTMLButtonElement | null>(null);
-
-  // TODO(burdon): Optionally sort.
-  const sortedActions = menuActions?.sort(({ properties: p1 }, { properties: p2 }) => {
-    const t1 = toLocalizedString(p1!.label, t).toLowerCase();
-    const t2 = toLocalizedString(p2!.label, t).toLowerCase();
-    return t1.localeCompare(t2);
-  });
-
-  // TODO(thure): Use LayoutPlugin’s global Dialog.
-  return (
-    <Dialog.Root
-      {...{
-        open: optionsMenuOpen,
-        onOpenChange: (nextOpen: boolean) => {
-          if (!nextOpen && suppressNextTooltip) {
-            suppressNextTooltip.current = true;
-          }
-          return setOptionsMenuOpen(nextOpen);
-        },
-      }}
-    >
-      <Tooltip.Trigger asChild>
-        <Dialog.Trigger asChild>
-          <Button
-            variant='ghost'
-            density='fine'
-            classNames={mx('shrink-0 !pli-2 pointer-fine:!pli-1', hoverableControlItem, hoverableOpenControlItem)}
-            data-testid={testId}
-            onKeyDownCapture={(event) => {
-              // TODO(thure): Why is only this `Button` affected and not `DropdownMenu.Trigger`’s?
-              if (button.current && button.current === event.target) {
-                switch (event.key) {
-                  case 'Enter':
-                  case ' ':
-                    // Capture this event and stop propagation to the drag start handler.
-                    event.stopPropagation();
-                    setOptionsMenuOpen(true);
-                    break;
-                  default:
-                }
-              }
-            }}
-            ref={button}
-          >
-            <Icon icon={icon ?? fallbackIcon} size={4} />
-          </Button>
-        </Dialog.Trigger>
-      </Tooltip.Trigger>
-      <Dialog.Portal>
-        <Dialog.Overlay>
-          <Dialog.Content classNames='z-[31] is-full max-is-[24rem] pli-2 plb-1'>
-            <SearchList.Root label={t('tree item searchlist input placeholder')}>
-              <SearchList.Input placeholder={t('tree item searchlist input placeholder')} classNames='pli-3' />
-              <SearchList.Content classNames='min-bs-[12rem] bs-[50dvh] max-bs-[30rem] overflow-auto'>
-                {sortedActions?.map((action) => {
-                  const label = toLocalizedString(action.properties!.label, t);
-                  const shortcut = getShortcut(action);
-                  return (
-                    <SearchList.Item
-                      // TODO(burdon): Value should be id since label is not unique.
-                      value={label}
-                      key={action.id}
-                      onSelect={() => {
-                        if (action.properties?.disabled) {
-                          return;
-                        }
-                        if (suppressNextTooltip) {
-                          suppressNextTooltip.current = true;
-                        }
-                        setOptionsMenuOpen(false);
-                        onAction?.(action);
-                      }}
-                      classNames='flex items-center gap-2 pli-2'
-                      disabled={action.properties?.disabled}
-                      {...(action.properties?.testId && { 'data-testid': action.properties.testId })}
-                    >
-                      {action.properties?.icon && <Icon icon={action.properties?.icon} size={4} />}
-                      <span className='grow truncate'>{label}</span>
-                      {shortcut && (
-                        <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>
-                      )}
-                    </SearchList.Item>
-                  );
-                })}
-              </SearchList.Content>
-              <div role='none' className='flex items-center plb-2 pli-3'>
-                <span className={descriptionText}>{toLocalizedString(label, t)}</span>
-              </div>
-            </SearchList.Root>
-          </Dialog.Content>
-        </Dialog.Overlay>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-};
-
 export const NavTreeItemMonolithicAction = ({
   parent,
-  properties: { disabled, caller, testId, label, icon } = { label: 'never' },
+  properties: { disabled, caller, testId, icon } = { label: 'never' },
   data: invoke,
-}: Action & { parent: Node; onAction?: (action: Action) => void }) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
+  baseLabel,
+}: Action & { parent: Node; onAction?: (action: Action) => void; baseLabel: string }) => {
   return (
-    <Tooltip.Trigger asChild>
-      <Button
-        variant='ghost'
-        density='fine'
-        classNames={mx('shrink-0 !pli-2 pointer-fine:!pli-1', hoverableControlItem, hoverableOpenControlItem)}
-        disabled={disabled}
-        onClick={(event) => {
-          if (disabled) {
-            return;
-          }
-          event.stopPropagation();
-          void invoke?.(caller ? { node: parent, caller } : { node: parent });
-        }}
-        data-testid={testId}
-      >
-        <span className='sr-only'>{toLocalizedString(label, t)}</span>
-        <Icon icon={icon ?? fallbackIcon} size={4} />
-      </Button>
-    </Tooltip.Trigger>
+    <IconButton
+      {...actionButtonProps}
+      icon={icon ?? fallbackIcon}
+      label={baseLabel}
+      disabled={disabled}
+      onClick={(event) => {
+        if (disabled) {
+          return;
+        }
+        event.stopPropagation();
+        void invoke?.(caller ? { node: parent, caller } : { node: parent });
+      }}
+      data-testid={testId}
+    />
   );
 };
 
 export const NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }: NavTreeItemActionMenuProps) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
-  const suppressNextTooltip = useRef<boolean>(false);
-  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
 
   const monolithicAction = menuActions?.length === 1 && menuActions[0];
   const baseLabel = toLocalizedString(monolithicAction ? monolithicAction.properties!.label : props.label, t);
 
-  return (
-    <Tooltip.Root
-      open={triggerTooltipOpen}
-      onOpenChange={(nextOpen) => {
-        if (suppressNextTooltip.current) {
-          setTriggerTooltipOpen(false);
-          suppressNextTooltip.current = false;
-        } else {
-          setTriggerTooltipOpen(nextOpen);
-        }
-      }}
-    >
-      {baseLabel && (
-        <Tooltip.Portal>
-          <Tooltip.Content classNames='z-[31]' side='bottom'>
-            {baseLabel}
-            <Tooltip.Arrow />
-          </Tooltip.Content>
-        </Tooltip.Portal>
-      )}
-      {monolithic && menuActions?.length === 1 ? (
-        <NavTreeItemMonolithicAction parent={node} {...menuActions[0]} />
-      ) : props.menuType === 'searchList' ? (
-        <NavTreeItemActionSearchList
-          {...props}
-          menuActions={menuActions}
-          suppressNextTooltip={suppressNextTooltip}
-          onAction={(action) => action.data?.(props.caller ? { node, caller: props.caller } : { node })}
-        />
-      ) : (
-        <NavTreeItemActionDropdownMenu
-          {...props}
-          parent={node}
-          menuActions={menuActions}
-          suppressNextTooltip={suppressNextTooltip}
-          onAction={(action) => action.data?.(props.caller ? { node, caller: props.caller } : { node })}
-        />
-      )}
-    </Tooltip.Root>
+  return monolithic && menuActions?.length === 1 ? (
+    <NavTreeItemMonolithicAction baseLabel={baseLabel} parent={node} {...menuActions[0]} />
+  ) : (
+    <NavTreeItemActionDropdownMenu
+      {...props}
+      label={baseLabel}
+      parent={node}
+      menuActions={menuActions}
+      onAction={(action) => action.data?.(props.caller ? { node, caller: props.caller } : { node })}
+    />
   );
 };