@dxos/plugin-navtree 0.7.5-labs.e27f9b9 → 0.7.5-main.2567c87

package/src/components/L0Menu.tsx

@@ -1,210 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type MouseEvent, useCallback, useMemo } from 'react';
-
-import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
-import { type Node } from '@dxos/app-graph';
-import { Icon, toLocalizedString, Tooltip, useMediaQuery, useSidebars, useTranslation } from '@dxos/react-ui';
-import { Tabs } from '@dxos/react-ui-tabs';
-import { mx } from '@dxos/react-ui-theme';
-
-import { useNavTreeContext } from './NavTreeContext';
-import { NotchStart } from './NotchStart';
-import { useLoadDescendents } from '../hooks';
-import { NAVTREE_PLUGIN } from '../meta';
-import { getFirstTwoRenderableChars, l0ItemType } from '../util';
-
-type L0ItemProps = {
-  item: Node<any>;
-  parent?: Node<any>;
-  path: string[];
-  pinned?: boolean;
-};
-
-const useL0ItemClick = ({ item, parent, path }: L0ItemProps, type: string) => {
-  const { tab, onTabChange, onSelect, isCurrent } = useNavTreeContext();
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const { navigationSidebarState } = useSidebars(NAVTREE_PLUGIN);
-  const [isLg] = useMediaQuery('lg', { ssr: false });
-
-  return useCallback(
-    (event: MouseEvent) => {
-      switch (type) {
-        case 'tab':
-          // TODO(thure): This dispatch should rightly be in `onTabChange`, but that callback wasn’t reacting to changes
-          //  to its dependencies.
-          void dispatch(
-            createIntent(LayoutAction.UpdateSidebar, {
-              part: 'sidebar',
-              options: {
-                state:
-                  item.id === tab
-                    ? navigationSidebarState === 'expanded'
-                      ? isLg
-                        ? 'collapsed'
-                        : 'closed'
-                      : 'expanded'
-                    : 'expanded',
-              },
-            }),
-          );
-          return onTabChange?.(item);
-        case 'link':
-          return onSelect?.({ item, path, current: !isCurrent(path, item), option: event.altKey });
-        case 'action': {
-          const {
-            data: invoke,
-            properties: { caller },
-          } = item;
-          return invoke?.(caller ? { node: parent, caller } : { node: parent });
-        }
-      }
-    },
-    [item, type, onSelect, isCurrent, parent, tab, navigationSidebarState, isLg, dispatch],
-  );
-};
-
-const l0Breakpoints: Record<string, string> = {
-  lg: 'hidden lg:grid',
-};
-
-const L0Item = ({ item, parent, path, pinned }: L0ItemProps) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
-  const type = l0ItemType(item);
-  const itemPath = useMemo(() => [...path, item.id], [item.id, path]);
-  const { getProps } = useNavTreeContext();
-  const { id, testId } = getProps?.(item, path) ?? {};
-  const Root = type === 'collection' ? 'h2' : type === 'tab' ? Tabs.TabPrimitive : 'button';
-  const handleClick = useL0ItemClick({ item, path: itemPath, parent }, type);
-  const rootProps =
-    type === 'tab'
-      ? { value: item.id, tabIndex: 0, onClick: handleClick, 'data-testid': testId, 'data-itemid': id }
-      : type !== 'collection'
-        ? { onClick: handleClick, 'data-testid': testId, 'data-itemid': id }
-        : { onClick: handleClick };
-  const localizedString = toLocalizedString(item.properties.label, t);
-  const avatarValue = useMemo(
-    () => (type === 'tab' ? getFirstTwoRenderableChars(localizedString).join('') : []),
-    [type, item.properties.label, t],
-  );
-
-  return (
-    <Tooltip.Root delayDuration={0}>
-      <Tooltip.Trigger asChild>
-        <Root
-          {...(rootProps as any)}
-          data-type={type}
-          className={mx(
-            'group/l0i dx-focus-ring-group grid overflow-hidden relative data[type!="collection"]:cursor-pointer app-no-drag',
-            l0Breakpoints[item.properties.l0Breakpoint],
-          )}
-        >
-          {type !== 'collection' && (
-            <div
-              role='none'
-              className={mx(
-                'absolute -z-[1] group-hover/l0i:bg-input dx-focus-ring-group-indicator transition-colors',
-                type === 'tab' || pinned ? 'rounded' : 'rounded-full',
-                pinned ? 'bg-transparent inset-inline-3 inset-block-0' : 'bg-input inset-inline-3 inset-block-2',
-              )}
-            />
-          )}
-          <div
-            role='none'
-            className='hidden group-aria-selected/l0i:block absolute inline-start-0 inset-block-4 is-1 bg-accentSurface rounded-ie'
-          />
-          {type === 'tab' && item.properties.disposition !== 'pin-end' ? (
-            <span role='img' className='place-self-center text-3xl font-light'>
-              {avatarValue}
-            </span>
-          ) : (
-            item.properties.icon && (
-              <Icon icon={item.properties.icon} size={pinned ? 5 : 7} classNames='place-self-center' />
-            )
-          )}
-          <span id={`${item.id}__label`} className='sr-only'>
-            {localizedString}
-          </span>
-        </Root>
-      </Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content side='right'>
-          {localizedString}
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
-  );
-};
-
-const L0Collection = ({ item, path, parent }: L0ItemProps) => {
-  const navTreeContext = useNavTreeContext();
-  useLoadDescendents(item);
-  const collectionItems = navTreeContext.getItems(item);
-  const groupPath = useMemo(() => [...path, item.id], [item.id, path]);
-  const { id, testId } = navTreeContext.getProps?.(item, path) ?? {};
-  return (
-    <div
-      role='group'
-      className='contents group/l0c'
-      aria-labelledby={`${item.id}__label`}
-      data-itemid={id}
-      data-testid={testId}
-    >
-      {/* TODO(burdon): Option. */}
-      {/* <L0Item item={item} parent={parent} path={groupPath} /> */}
-      {collectionItems.map((collectionItem) => (
-        <L0Item key={collectionItem.id} item={collectionItem} parent={item} path={groupPath} />
-      ))}
-    </div>
-  );
-};
-
-export const L0Menu = ({
-  topLevelItems,
-  pinnedItems,
-  parent,
-  path,
-}: {
-  topLevelItems: Node<any>[];
-  pinnedItems: Node<any>[];
-  parent?: Node<any>;
-  path: string[];
-}) => {
-  return (
-    <Tabs.Tablist classNames='group/l0 absolute z-[1] inset-block-0 inline-start-0 rounded-is-lg grid grid-cols-[var(--l0-size)] grid-rows-[1fr_min-content_var(--l0-size)] contain-layout !is-[--l0-size] bg-baseSurface border-ie border-separator app-drag'>
-      <div
-        role='none'
-        className='grid auto-rows-[calc(var(--l0-size)-.5rem)] min-bs-0 !overflow-y-auto plb-1 [body[data-platform="darwin"]_&]:pbs-[calc(30px+0.25rem)]'
-      >
-        {topLevelItems.map((item) => {
-          if (l0ItemType(item) === 'collection') {
-            return <L0Collection key={item.id} item={item} parent={parent} path={path} />;
-          } else {
-            return <L0Item key={item.id} item={item} parent={parent} path={path} />;
-          }
-        })}
-      </div>
-      <div role='none' className='grid grid-cols-1 auto-rows-[--rail-action] pbs-2'>
-        {pinnedItems
-          .filter((item) => l0ItemType(item) !== 'collection')
-          .map((item) => (
-            <L0Item key={item.id} item={item} parent={parent} path={path} pinned />
-          ))}
-      </div>
-      <div role='none' className='grid p-2 app-no-drag'>
-        <NotchStart />
-      </div>
-      <div
-        role='none'
-        className='hidden [body[data-platform="darwin"]_&]:block absolute block-start-0 is-[calc(var(--l0-size)-1px)] bs-[calc(40px+0.25rem)]'
-        style={{
-          background:
-            'linear-gradient(to bottom, var(--dx-baseSurface) 0%, var(--dx-baseSurface) 70%, transparent 100%)',
-        }}
-      />
-    </Tabs.Tablist>
-  );
-};

package/src/components/L1Panels.tsx

@@ -1,100 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useMemo } from 'react';
-
-import { useLayout } from '@dxos/app-framework';
-import { type Node } from '@dxos/app-graph';
-import { toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Tree } from '@dxos/react-ui-list';
-import { Tabs } from '@dxos/react-ui-tabs';
-
-import { useNavTreeContext } from './NavTreeContext';
-import { NavTreeItemColumns } from './NavTreeItemColumns';
-import { useLoadDescendents } from '../hooks';
-import { NAVTREE_PLUGIN } from '../meta';
-import { l0ItemType } from '../util';
-
-type L1PanelProps = { item: Node<any>; path: string[]; currentItemId: string };
-
-const L1Panel = ({ item, path, currentItemId }: L1PanelProps) => {
-  const layout = useLayout();
-  const navTreeContext = useNavTreeContext();
-  const { t } = useTranslation(NAVTREE_PLUGIN);
-  return (
-    <Tabs.Tabpanel
-      key={item.id}
-      value={item.id}
-      classNames={[
-        'absolute inset-block-0 inline-end-0 is-[calc(100%-var(--l0-size))] lg:is-[--l1-size] grid-cols-1 grid-rows-[var(--rail-size)_1fr]',
-        item.id === currentItemId && 'grid',
-      ]}
-      tabIndex={-1}
-      {...(!layout.sidebarOpen && { inert: 'true' })}
-    >
-      {item.id === currentItemId && (
-        <>
-          <h2 className='flex items-center border-be border-separator pis-4 app-drag'>
-            <span className='flex-1 truncate cursor-default'>{toLocalizedString(item.properties.label, t)}</span>
-            <NavTreeItemColumns path={path} item={item} open />
-          </h2>
-          <div role='none' className='overflow-y-auto'>
-            <Tree
-              {...navTreeContext}
-              id={item.id}
-              root={item}
-              path={path}
-              levelOffset={5}
-              draggable
-              gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
-              renderColumns={NavTreeItemColumns}
-            />
-          </div>
-        </>
-      )}
-    </Tabs.Tabpanel>
-  );
-};
-
-const L1PanelCollection = ({ item, path, currentItemId }: L1PanelProps) => {
-  const { getItems } = useNavTreeContext();
-  useLoadDescendents(item);
-  const collectionItems = getItems(item);
-  const groupPath = useMemo(() => [...path, item.id], [item.id, path]);
-  return (
-    <>
-      {collectionItems
-        .filter((item) => l0ItemType(item) === 'tab')
-        .map((item) => (
-          <L1Panel key={item.id} item={item} path={groupPath} currentItemId={currentItemId} />
-        ))}
-    </>
-  );
-};
-
-export const L1Panels = ({
-  topLevelItems,
-  path,
-  currentItemId,
-}: {
-  topLevelItems: Node<any>[];
-  path: string[];
-  currentItemId: string;
-}) => {
-  return (
-    <>
-      {topLevelItems.map((item) => {
-        const type = l0ItemType(item);
-        switch (type) {
-          case 'collection':
-            return <L1PanelCollection key={item.id} item={item} path={path} currentItemId={currentItemId} />;
-          case 'tab':
-            return <L1Panel key={item.id} item={item} path={path} currentItemId={currentItemId} />;
-          default:
-            return null;
-        }
-      })}
-    </>
-  );
-};

package/src/components/NavTreeContext.tsx

@@ -1,13 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { createContext, useContext } from 'react';
-
-import { raise } from '@dxos/debug';
-
-import { type NavTreeContextValue } from './types';
-
-export const NavTreeContext = createContext<NavTreeContextValue | null>(null);
-
-export const useNavTreeContext = () => useContext(NavTreeContext) ?? raise(new Error('NavTreeContext not found'));

package/src/components/NavTreeItemColumns.tsx

@@ -1,71 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { Fragment, memo } from 'react';
-
-import { isAction } from '@dxos/app-graph';
-import { Popover, toLocalizedString, Treegrid, useTranslation } from '@dxos/react-ui';
-
-import { NAV_TREE_ITEM } from './NavTree';
-import { useNavTreeContext } from './NavTreeContext';
-import { NavTreeItemAction } from './NavTreeItemAction';
-import type { NavTreeItemColumnsProps } from './types';
-import { useLoadDescendents } from '../hooks';
-import { NAVTREE_PLUGIN } from '../meta';
-
-export const NavTreeItemColumns = memo(({ path, item, open }: NavTreeItemColumnsProps) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
-  const { getActions, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
-
-  const level = path.length - 2;
-
-  const { actions: _actions, groupedActions } = getActions(item);
-  const [primaryAction, ...secondaryActions] = _actions.toSorted((a, b) =>
-    a.properties?.disposition === 'toolbar' ? -1 : 1,
-  );
-
-  const actions = (primaryAction?.properties?.disposition === 'toolbar' ? secondaryActions : _actions)
-    .flatMap((action) => (isAction(action) ? [action] : []))
-    .filter((action) => !action.properties?.hidden);
-
-  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
-
-  useLoadDescendents(item);
-  useLoadDescendents(primaryAction && !isAction(primaryAction) ? primaryAction : undefined);
-
-  return (
-    <div role='none' className='contents app-no-drag'>
-      {primaryAction?.properties?.disposition === 'toolbar' && !primaryAction?.properties?.disabled ? (
-        <NavTreeItemAction
-          testId={primaryAction.properties?.testId}
-          label={toLocalizedString(primaryAction.properties?.label, t)}
-          icon={primaryAction.properties?.icon ?? 'ph--placeholder--regular'}
-          parent={item}
-          monolithic={isAction(primaryAction)}
-          menuActions={isAction(primaryAction) ? [primaryAction] : groupedActions[primaryAction.id]}
-          menuType={primaryAction.properties?.menuType}
-          caller={NAV_TREE_ITEM}
-        />
-      ) : (
-        <Treegrid.Cell />
-      )}
-      <ActionRoot>
-        {actions.length > 0 ? (
-          <NavTreeItemAction
-            testId={`navtree.treeItem.actionsLevel${level}`}
-            label={t('tree item actions label')}
-            icon='ph--dots-three-vertical--regular'
-            parent={item}
-            menuActions={actions}
-            menuType='dropdown'
-            caller={NAV_TREE_ITEM}
-          />
-        ) : (
-          <Treegrid.Cell />
-        )}
-      </ActionRoot>
-      {ItemEnd && <ItemEnd node={item} open={open} />}
-    </div>
-  );
-});

package/src/components/types.ts

@@ -1,33 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import type { FC } from 'react';
-
-import type { Node } from '@dxos/app-graph';
-import type { TreeProps } from '@dxos/react-ui-list';
-import type { MaybePromise } from '@dxos/util';
-
-import type { FlattenedActions, NavTreeItemGraphNode } from '../types';
-
-export type NavTreeItemColumnsProps = {
-  path: string[];
-  item: Node;
-  open: boolean;
-};
-
-export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'>;
-
-export type NavTreeContextValue = Pick<
-  TreeProps<NavTreeItemGraphNode>,
-  'getProps' | 'isCurrent' | 'isOpen' | 'onOpenChange' | 'canDrop' | 'onSelect'
-> & {
-  tab: string;
-  onTabChange?: (node: NavTreeItemGraphNode) => void;
-  getItems: (node?: NavTreeItemGraphNode, disposition?: string) => NavTreeItemGraphNode[];
-  getActions: (node: Node) => FlattenedActions;
-  loadDescendents?: (node: Node) => MaybePromise<void>;
-  renderItemEnd?: FC<{ node: Node; open: boolean }>;
-  popoverAnchorId?: string;
-  topbar?: boolean;
-};

package/src/hooks.ts

@@ -1,21 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { useEffect } from 'react';
-
-import { type Node } from '@dxos/app-graph';
-
-import { useNavTreeContext } from './components/NavTreeContext';
-
-export const useLoadDescendents = (root?: Node) => {
-  const { loadDescendents } = useNavTreeContext();
-  useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      if (root) {
-        void loadDescendents?.(root);
-      }
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [root]);
-};

package/src/stories/StorybookNavTree.tsx

@@ -1,63 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useMemo, useState } from 'react';
-
-import { NavTree, NavTreeContext, type NavTreeContextValue, type NavTreeProps } from '../components';
-import { type NavTreeItemGraphNode } from '../types';
-
-export const StorybookNavTree = ({
-  getActions,
-  loadDescendents,
-  renderItemEnd,
-  popoverAnchorId,
-  getItems,
-  getProps,
-  isCurrent,
-  canDrop,
-  onSelect,
-  isOpen,
-  onOpenChange,
-  ...props
-}: NavTreeProps & NavTreeContextValue) => {
-  const [tab, setTab] = useState('never');
-
-  const contextValue = useMemo(
-    () => ({
-      tab,
-      onTabChange: (node: NavTreeItemGraphNode) => setTab(node.id),
-      getActions,
-      loadDescendents,
-      renderItemEnd,
-      popoverAnchorId,
-      getItems,
-      getProps,
-      isCurrent,
-      isOpen,
-      onOpenChange,
-      canDrop,
-      onSelect,
-    }),
-    [
-      tab,
-      setTab,
-      getActions,
-      loadDescendents,
-      renderItemEnd,
-      popoverAnchorId,
-      getItems,
-      getProps,
-      isCurrent,
-      isOpen,
-      onOpenChange,
-      canDrop,
-      onSelect,
-    ],
-  );
-  return (
-    <NavTreeContext.Provider value={contextValue}>
-      <NavTree {...props} />
-    </NavTreeContext.Provider>
-  );
-};