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

package/dist/lib/browser/index.mjs

@@ -13,7 +13,7 @@ import { createExtension, isAction as isAction5, isGraphNode } from "@dxos/app-g
 import { Keyboard as Keyboard2 } from "@dxos/keyboard";
 import { create } from "@dxos/live-object";
 import { Path } from "@dxos/react-ui-mosaic";
-import { getHostPlatform as getHostPlatform3 } from "@dxos/util";
+import { getHostPlatform as getHostPlatform2 } from "@dxos/util";
 
 // packages/plugins/plugin-navtree/src/components/CommandsDialog.tsx
 import React, { useMemo, useState } from "react";
@@ -123,175 +123,42 @@ import { Popover, toLocalizedString as toLocalizedString3, Treegrid, useTranslat
 import { Tree } from "@dxos/react-ui-list";
 
 // packages/plugins/plugin-navtree/src/components/NavTreeItemAction.tsx
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import React2, { useRef, useState as useState2 } from "react";
-import { keySymbols as keySymbols2 } from "@dxos/keyboard";
-import { Button as Button2, Dialog as Dialog2, DropdownMenu, ContextMenu, Tooltip, useTranslation as useTranslation2, toLocalizedString as toLocalizedString2, Icon as Icon2 } from "@dxos/react-ui";
-import { SearchList as SearchList2 } from "@dxos/react-ui-searchlist";
-import { descriptionText as descriptionText2, hoverableControlItem, hoverableOpenControlItem, mx as mx2 } from "@dxos/react-ui-theme";
-import { getHostPlatform as getHostPlatform2 } from "@dxos/util";
-var getShortcut = (action) => {
-  return typeof action.properties?.keyBinding === "string" ? action.properties.keyBinding : action.properties?.keyBinding?.[getHostPlatform2()];
-};
+import React2, { useRef } from "react";
+import { useTranslation as useTranslation2, toLocalizedString as toLocalizedString2, IconButton } from "@dxos/react-ui";
+import { DropdownMenu } from "@dxos/react-ui-menu";
+import { hoverableControlItem, hoverableOpenControlItem, mx as mx2 } from "@dxos/react-ui-theme";
 var fallbackIcon = "ph--placeholder--regular";
-var NavTreeItemActionDropdownMenu = ({ label, icon, testId, defaultMenuOpen, menuActions, menuOpen, suppressNextTooltip, onChangeMenuOpen, onAction }) => {
+var actionButtonProps = {
+  iconOnly: true,
+  size: 4,
+  variant: "ghost",
+  density: "fine",
+  classNames: mx2("shrink-0 !pli-2 pointer-fine:!pli-1", hoverableControlItem, hoverableOpenControlItem)
+};
+var NavTreeItemActionDropdownMenu = ({ label, icon, testId, menuActions, onAction }) => {
   const { t } = useTranslation2(NAVTREE_PLUGIN);
-  const [optionsMenuOpen, setOptionsMenuOpen] = useControllableState({
-    prop: menuOpen,
-    defaultProp: defaultMenuOpen,
-    onChange: onChangeMenuOpen
-  });
+  const suppressNextTooltip = useRef(false);
   return /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
-    open: optionsMenuOpen,
-    onOpenChange: (nextOpen) => {
-      if (!nextOpen && suppressNextTooltip) {
-        suppressNextTooltip.current = true;
-      }
-      return setOptionsMenuOpen(nextOpen);
-    }
-  }, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
-    asChild: true
+    actions: menuActions,
+    onAction,
+    suppressNextTooltip
   }, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React2.createElement(Button2, {
-    variant: "ghost",
-    density: "fine",
-    classNames: mx2("shrink-0 !pli-2 pointer-fine:!pli-1", hoverableControlItem, hoverableOpenControlItem),
-    "data-testid": testId,
-    "aria-label": t("tree item actions label")
-  }, /* @__PURE__ */ React2.createElement("span", {
-    className: "sr-only"
-  }, toLocalizedString2(label, t)), /* @__PURE__ */ React2.createElement(Icon2, {
+  }, /* @__PURE__ */ React2.createElement(IconButton, {
+    ...actionButtonProps,
     icon: icon ?? fallbackIcon,
-    size: 4
-  })))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, null, menuActions?.map((action) => {
-    const shortcut = getShortcut(action);
-    return /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
-      key: action.id,
-      onClick: (event) => {
-        if (action.properties?.disabled) {
-          return;
-        }
-        event.stopPropagation();
-        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 && /* @__PURE__ */ React2.createElement(Icon2, {
-      icon: action.properties.icon,
-      size: 4
-    }), /* @__PURE__ */ React2.createElement("span", {
-      className: "grow truncate"
-    }, toLocalizedString2(action.properties.label, t)), shortcut && /* @__PURE__ */ React2.createElement("span", {
-      className: mx2("shrink-0", descriptionText2)
-    }, keySymbols2(shortcut).join("")));
-  })), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null))));
-};
-var NavTreeItemActionSearchList = ({ menuActions, icon, label, testId, suppressNextTooltip, onAction }) => {
-  const { t } = useTranslation2(NAVTREE_PLUGIN);
-  const [optionsMenuOpen, setOptionsMenuOpen] = useState2(false);
-  const button = useRef(null);
-  const sortedActions = menuActions?.sort(({ properties: p1 }, { properties: p2 }) => {
-    const t1 = toLocalizedString2(p1.label, t).toLowerCase();
-    const t2 = toLocalizedString2(p2.label, t).toLowerCase();
-    return t1.localeCompare(t2);
-  });
-  return /* @__PURE__ */ React2.createElement(Dialog2.Root, {
-    open: optionsMenuOpen,
-    onOpenChange: (nextOpen) => {
-      if (!nextOpen && suppressNextTooltip) {
-        suppressNextTooltip.current = true;
-      }
-      return setOptionsMenuOpen(nextOpen);
-    }
-  }, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(Dialog2.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(Button2, {
-    variant: "ghost",
-    density: "fine",
-    classNames: mx2("shrink-0 !pli-2 pointer-fine:!pli-1", hoverableControlItem, hoverableOpenControlItem),
+    label: toLocalizedString2(label, t),
     "data-testid": testId,
-    onKeyDownCapture: (event) => {
-      if (button.current && button.current === event.target) {
-        switch (event.key) {
-          case "Enter":
-          case " ":
-            event.stopPropagation();
-            setOptionsMenuOpen(true);
-            break;
-          default:
-        }
-      }
-    },
-    ref: button
-  }, /* @__PURE__ */ React2.createElement(Icon2, {
-    icon: icon ?? fallbackIcon,
-    size: 4
-  })))), /* @__PURE__ */ React2.createElement(Dialog2.Portal, null, /* @__PURE__ */ React2.createElement(Dialog2.Overlay, null, /* @__PURE__ */ React2.createElement(Dialog2.Content, {
-    classNames: "is-full max-is-[24rem] pli-2 plb-1"
-  }, /* @__PURE__ */ React2.createElement(SearchList2.Root, {
-    label: t("tree item searchlist input placeholder")
-  }, /* @__PURE__ */ React2.createElement(SearchList2.Input, {
-    placeholder: t("tree item searchlist input placeholder"),
-    classNames: "pli-3"
-  }), /* @__PURE__ */ React2.createElement(SearchList2.Content, {
-    classNames: "min-bs-[12rem] bs-[50dvh] max-bs-[30rem] overflow-auto"
-  }, sortedActions?.map((action) => {
-    const label2 = toLocalizedString2(action.properties.label, t);
-    const shortcut = getShortcut(action);
-    return /* @__PURE__ */ React2.createElement(SearchList2.Item, {
-      // TODO(burdon): Value should be id since label is not unique.
-      value: label2,
-      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 && /* @__PURE__ */ React2.createElement(Icon2, {
-      icon: action.properties?.icon,
-      size: 4
-    }), /* @__PURE__ */ React2.createElement("span", {
-      className: "grow truncate"
-    }, label2), shortcut && /* @__PURE__ */ React2.createElement("span", {
-      className: mx2("shrink-0", descriptionText2)
-    }, keySymbols2(shortcut).join("")));
-  })), /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
-    className: "flex items-center plb-2 pli-3"
-  }, /* @__PURE__ */ React2.createElement("span", {
-    className: descriptionText2
-  }, toLocalizedString2(label, t))))))));
+    suppressNextTooltip
+  })));
 };
-var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, testId, label, icon } = {
+var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, testId, icon } = {
   label: "never"
-}, data: invoke }) => {
-  const { t } = useTranslation2(NAVTREE_PLUGIN);
-  return /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(Button2, {
-    variant: "ghost",
-    density: "fine",
-    classNames: mx2("shrink-0 !pli-2 pointer-fine:!pli-1", hoverableControlItem, hoverableOpenControlItem),
+}, data: invoke, baseLabel }) => {
+  return /* @__PURE__ */ React2.createElement(IconButton, {
+    ...actionButtonProps,
+    icon: icon ?? fallbackIcon,
+    label: baseLabel,
     disabled,
     onClick: (event) => {
       if (disabled) {
@@ -306,70 +173,39 @@ var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, tes
       });
     },
     "data-testid": testId
-  }, /* @__PURE__ */ React2.createElement("span", {
-    className: "sr-only"
-  }, toLocalizedString2(label, t)), /* @__PURE__ */ React2.createElement(Icon2, {
-    icon: icon ?? fallbackIcon,
-    size: 4
-  })));
+  });
 };
 var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) => {
   const { t } = useTranslation2(NAVTREE_PLUGIN);
-  const suppressNextTooltip = useRef(false);
-  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState2(false);
   const monolithicAction = menuActions?.length === 1 && menuActions[0];
   const baseLabel = toLocalizedString2(monolithicAction ? monolithicAction.properties.label : props.label, t);
-  return /* @__PURE__ */ React2.createElement(Tooltip.Root, {
-    open: triggerTooltipOpen,
-    onOpenChange: (nextOpen) => {
-      if (suppressNextTooltip.current) {
-        setTriggerTooltipOpen(false);
-        suppressNextTooltip.current = false;
-      } else {
-        setTriggerTooltipOpen(nextOpen);
-      }
-    }
-  }, baseLabel && /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, {
-    classNames: "z-[31]",
-    side: "bottom"
-  }, baseLabel, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))), monolithic && menuActions?.length === 1 ? /* @__PURE__ */ React2.createElement(NavTreeItemMonolithicAction, {
+  return monolithic && menuActions?.length === 1 ? /* @__PURE__ */ React2.createElement(NavTreeItemMonolithicAction, {
+    baseLabel,
     parent: node,
     ...menuActions[0]
-  }) : props.menuType === "searchList" ? /* @__PURE__ */ React2.createElement(NavTreeItemActionSearchList, {
-    ...props,
-    menuActions,
-    suppressNextTooltip,
-    onAction: (action) => action.data?.(props.caller ? {
-      node,
-      caller: props.caller
-    } : {
-      node
-    })
   }) : /* @__PURE__ */ React2.createElement(NavTreeItemActionDropdownMenu, {
     ...props,
+    label: baseLabel,
     parent: node,
     menuActions,
-    suppressNextTooltip,
     onAction: (action) => action.data?.(props.caller ? {
       node,
       caller: props.caller
     } : {
       node
     })
-  }));
+  });
 };
 
 // packages/plugins/plugin-navtree/src/components/NavTree.tsx
 var NAV_TREE_ITEM = "NavTreeItem";
 var NavTree = ({ getActions: getActions2, loadDescendents, renderItemEnd: renderItemEnd2, popoverAnchorId, ...props }) => {
-  const renderColumns = useCallback(({ item, path, open, menuOpen, setMenuOpen }) => {
+  const renderColumns = useCallback(({ item, path, open }) => {
     return /* @__PURE__ */ React3.createElement(NavTreeColumns, {
       path,
       node: item,
       getActions: getActions2,
       open,
-      menuOpen,
-      setMenuOpen,
       loadDescendents,
       renderItemEnd: renderItemEnd2,
       popoverAnchorId
@@ -386,7 +222,7 @@ var NavTree = ({ getActions: getActions2, loadDescendents, renderItemEnd: render
     renderColumns
   });
 };
-var NavTreeColumns = ({ path, node, getActions: getActions2, open, menuOpen, setMenuOpen, loadDescendents, renderItemEnd: ItemEnd, popoverAnchorId }) => {
+var NavTreeColumns = ({ path, node, getActions: getActions2, open, loadDescendents, renderItemEnd: ItemEnd, popoverAnchorId }) => {
   const { t } = useTranslation3(NAVTREE_PLUGIN);
   const level = path.length - 2;
   const { actions: _actions, groupedActions } = getActions2(node);
@@ -424,9 +260,7 @@ var NavTreeColumns = ({ path, node, getActions: getActions2, open, menuOpen, set
     parent: node,
     menuActions: actions,
     menuType: "dropdown",
-    caller: NAV_TREE_ITEM,
-    menuOpen,
-    onChangeMenuOpen: setMenuOpen
+    caller: NAV_TREE_ITEM
   }) : /* @__PURE__ */ React3.createElement(Treegrid.Cell, null)), ItemEnd && /* @__PURE__ */ React3.createElement(ItemEnd, {
     node,
     open
@@ -453,7 +287,7 @@ import { formatDistance } from "date-fns/formatDistance";
 import React4 from "react";
 import { SettingsAction, parseNavigationPlugin, useResolvePlugin, useIntentDispatcher as useIntentDispatcher2, createIntent as createIntent2 } from "@dxos/app-framework";
 import { useConfig } from "@dxos/react-client";
-import { Button as Button3, Link, Message, Popover as Popover2, Tooltip as Tooltip2, Trans, useDefaultValue, useSidebars, useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { Button as Button2, Link, Message, Popover as Popover2, Tooltip, Trans, useDefaultValue, useSidebars, useTranslation as useTranslation4 } from "@dxos/react-ui";
 import { LayoutControls } from "@dxos/react-ui-stack";
 import { getSize, mx as mx3 } from "@dxos/react-ui-theme";
 var buttonStyles = "pli-1.5 text-xs font-normal";
@@ -475,7 +309,7 @@ var NavTreeFooter = (props) => {
     className: mx3("flex bs-[--rail-size] pbe-[env(safe-area-inset-bottom)] box-content justify-end", layoutPart === "complementary" && "md:justify-end flex-row-reverse")
   }, /* @__PURE__ */ React4.createElement(Popover2.Root, null, /* @__PURE__ */ React4.createElement(Popover2.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React4.createElement(Button3, {
+  }, /* @__PURE__ */ React4.createElement(Button2, {
     variant: "ghost",
     classNames: buttonStyles,
     ...!navigationSidebarOpen && {
@@ -525,9 +359,9 @@ var NavTreeFooter = (props) => {
         variant: "neutral"
       })
     }
-  }))), /* @__PURE__ */ React4.createElement(Popover2.Arrow, null)))), /* @__PURE__ */ React4.createElement(Tooltip2.Root, null, /* @__PURE__ */ React4.createElement(Tooltip2.Trigger, {
+  }))), /* @__PURE__ */ React4.createElement(Popover2.Arrow, null)))), /* @__PURE__ */ React4.createElement(Tooltip.Root, null, /* @__PURE__ */ React4.createElement(Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React4.createElement(Button3, {
+  }, /* @__PURE__ */ React4.createElement(Button2, {
     variant: "ghost",
     classNames: buttonStyles,
     "data-testid": "treeView.openSettings",
@@ -540,9 +374,9 @@ var NavTreeFooter = (props) => {
     className: "sr-only"
   }, t("open settings label")), /* @__PURE__ */ React4.createElement(GearSix, {
     className: mx3(getSize(5), "rotate-90")
-  }))), /* @__PURE__ */ React4.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React4.createElement(Tooltip2.Content, {
+  }))), /* @__PURE__ */ React4.createElement(Tooltip.Portal, null, /* @__PURE__ */ React4.createElement(Tooltip.Content, {
     classNames: "z-[12]"
-  }, t("open settings label"), /* @__PURE__ */ React4.createElement(Tooltip2.Arrow, null)))), navigationPlugin?.meta.id === "dxos.org/plugin/deck" && /* @__PURE__ */ React4.createElement(LayoutControls, {
+  }, t("open settings label"), /* @__PURE__ */ React4.createElement(Tooltip.Arrow, null)))), navigationPlugin?.meta.id === "dxos.org/plugin/deck" && /* @__PURE__ */ React4.createElement(LayoutControls, {
     variant: "hide-disabled",
     capabilities: {
       incrementStart: false,
@@ -913,12 +747,12 @@ var NotchStart = () => {
 import { MagnifyingGlass } from "@phosphor-icons/react";
 import React8 from "react";
 import { createIntent as createIntent5, LayoutAction as LayoutAction3, useIntentDispatcher as useIntentDispatcher5 } from "@dxos/app-framework";
-import { Button as Button4, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { Button as Button3, useTranslation as useTranslation6 } from "@dxos/react-ui";
 import { getSize as getSize2 } from "@dxos/react-ui-theme";
 var CommandsTrigger = () => {
   const { dispatchPromise: dispatch } = useIntentDispatcher5();
   const { t } = useTranslation6(NAVTREE_PLUGIN);
-  return /* @__PURE__ */ React8.createElement(Button4, {
+  return /* @__PURE__ */ React8.createElement(Button3, {
     classNames: "w-full h-full !rounded-none",
     onClick: () => dispatch(createIntent5(LayoutAction3.SetLayout, {
       element: "dialog",
@@ -949,7 +783,6 @@ var translations_default = [
         "see release label": "See release on GitHub",
         "powered by dxos message": "Powered by <dxos>DXOS</dxos>",
         "tree item actions label": "More actions",
-        "tree item searchlist input placeholder": "Search for actions\u2026",
         "empty branch message": "\xA0"
       }
     }
@@ -1074,7 +907,7 @@ var NavTreePlugin = () => {
           let shortcut;
           if (typeof node.properties.keyBinding === "object") {
             const availablePlatforms = Object.keys(node.properties.keyBinding);
-            const platform = getHostPlatform3();
+            const platform = getHostPlatform2();
             shortcut = availablePlatforms.includes(platform) ? node.properties.keyBinding[platform] : platform === "ios" ? node.properties.keyBinding.macos : platform === "linux" || platform === "unknown" ? node.properties.keyBinding.windows : void 0;
           } else {
             shortcut = node.properties.keyBinding;