@dxos/plugin-navtree 0.7.5-main.9d2a38b → 0.7.5-main.b19bfc8

package/src/stories/StorybookNavTree.tsx

@@ -0,0 +1,63 @@
+//
+// 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>
+  );
+};

package/src/translations.ts

@@ -13,12 +13,6 @@ export default [
         'commands dialog title': 'Commands',
         'command list input placeholder': 'Search for commands…',
         'node actions menu invoker label': 'More options',
-        'warning title': 'WARNING',
-        'technology preview message': 'Composer is still in technology preview.',
-        'learn more label': 'Learn more',
-        'released message': 'This version released {{released}}.',
-        'see release label': 'See release on GitHub',
-        'powered by dxos message': 'Powered by <dxos>DXOS</dxos>',
         'tree item actions label': 'More actions',
         'empty branch message': ' ',
       },

package/src/types.ts

@@ -4,7 +4,7 @@
 
 import { type Action, type ActionLike, type Node } from '@dxos/app-graph';
 import { type Label } from '@dxos/react-ui';
-import { type MaybePromise } from '@dxos/util';
+import { type MaybePromise, type Position } from '@dxos/util';
 
 export type NavTreeItemGraphNode = Node<
   any,
@@ -31,6 +31,7 @@ type SharedProperties = {
   label: Label;
   icon?: string;
   disabled?: boolean;
+  position?: Position;
   testId?: string;
   className?: string;
   headingClassName?: string;

package/src/util.ts

@@ -10,8 +10,9 @@ import {
   ACTION_TYPE,
   ACTION_GROUP_TYPE,
   isAction,
+  isActionLike,
 } from '@dxos/app-graph';
-import { nonNullable } from '@dxos/util';
+import { isNonNullable } from '@dxos/util';
 
 import { type FlattenedActions, type NavTreeItemGraphNode } from './types';
 
@@ -94,7 +95,7 @@ export const getChildren = (
       const nextPath = [...path, node.id];
       return nextPath.includes(n.id) ? undefined : (n as NavTreeItemGraphNode);
     })
-    .filter(nonNullable) as NavTreeItemGraphNode[];
+    .filter(isNonNullable) as NavTreeItemGraphNode[];
 };
 
 export const getActions = (graph: Graph, node: Node): FlattenedActions => {
@@ -126,3 +127,56 @@ export const expandChildren = (graph: Graph, node: Node) => {
 export const expandActions = (graph: Graph, node: Node) => {
   return Promise.all([graph.expand(node, 'outbound', ACTION_TYPE), graph.expand(node, 'outbound', ACTION_GROUP_TYPE)]);
 };
+
+export const l0ItemType = (item: Node<any>) => {
+  if (item.properties.disposition === 'collection') {
+    return 'collection';
+  } else if (isActionLike(item)) {
+    return 'action';
+  } else if (item.properties.disposition === 'navigation') {
+    return 'link';
+  } else {
+    return 'tab';
+  }
+};
+
+// Regular expression to match renderable characters
+// Excludes control characters, combining marks, and other non-renderable characters
+const renderableCharRegex =
+  /^(?![\p{Control}\p{Mark}\p{Separator}\p{Surrogate}\p{Unassigned}])[\p{L}\p{N}\p{P}\p{S}\p{Emoji}]$/u;
+
+/**
+ * Returns the first two renderable characters from a string that are separated by non-word characters.
+ * Handles Unicode characters correctly.
+ *
+ * @param {string} label - The input string to process
+ * @returns {[string, string]} Array containing the two characters, or empty strings if not found
+ */
+export const getFirstTwoRenderableChars = (label: string) => {
+  // Convert string to array of Unicode characters
+  const characters = Array.from(label);
+
+  // Keep track of found renderable characters
+  const result = ['', ''];
+  let foundFirst = false;
+
+  for (let i = 0; i < characters.length; i++) {
+    const char = characters[i];
+
+    if (renderableCharRegex.test(char)) {
+      if (!foundFirst) {
+        result[0] = char;
+        foundFirst = true;
+      } else {
+        // Check if there's at least one non-word character between the first and current char
+        const textBetween = characters.slice(result[0].length, i).join('');
+        if (/[^\p{L}\p{N}_]/u.test(textBetween)) {
+          result[1] = char;
+          break;
+        }
+      }
+    }
+  }
+
+  return result;
+};