vue-dockable-desktop 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -11,6 +11,54 @@ correspondence lives, alongside the feature-by-feature map in [docs/PARITY.md](d
 
 ## [Unreleased]
 
+## [1.7.0] — 2026-10-04
+
+**Parity: react-dockable-desktop 7.6.0.** Context menus open with nothing highlighted, the same
+every time.
+
+### Changed
+
+- **A context menu opens with focus on the menu itself, no item highlighted.** It used to focus
+  its first item, and whether the browser then drew a focus ring depended on the user's previous
+  interaction: a menu opened from script (a map library's right-click calling `showContextMenu`,
+  say) showed a ring after a page load or a key press and none after a mouse click. ArrowDown
+  reaches the first item and ArrowUp the last.
+- **A keyboard `contextmenu` event** (the ContextMenu key or Shift+F10, which report no pointer
+  position) **still opens on the first item**, and so does `initialFocus: 'first-item'`.
+
+### Added
+
+- **`initialFocus?: 'menu' | 'first-item'`** on `ShowContextMenuOptions`
+  (`ws.showContextMenu`, `useContextMenu()`).
+- **Home and End** in context menus, as in rdd.
+- **`--vdd-context-menu-focus-ring`**: the outline on a menu item with keyboard focus, by default
+  `--vdd-focus-ring` (the skin's accent). Both are now documented in the theming chapter; they are
+  read with a fallback rather than declared, so they follow the skin's or your brand's accent.
+
+### Fixed
+
+- **Menu items drew the browser's default focus ring** instead of the skin's.
+- **ArrowUp from a menu with nothing highlighted would have gone to the second-to-last item**; it
+  goes to the last.
+
+### Upgrading
+
+- Nothing to change for menus opened with the mouse or from script. If you open a menu from your
+  own keyboard shortcut, pass `initialFocus: 'first-item'` so it starts on an item.
+- Tests that expected the first item to have focus right after `showContextMenu` should press
+  ArrowDown first, or open the menu with `initialFocus: 'first-item'`.
+
+### Tests
+
+- `test/components/contextMenu.test.ts`: the menu itself is focused on open; `initialFocus`;
+  keyboard and mouse `contextmenu` events; ArrowDown/ArrowUp from the menu; Home and End. Each was
+  seen failing with its part of the fix removed.
+
+### Documentation
+
+- Overlays chapter: initial focus, the option, keys, the focus ring. Theming chapter: a "Focus
+  rings" table with `--vdd-focus-ring` and `--vdd-context-menu-focus-ring`.
+
 ## [1.6.0] — 2026-10-04
 
 **Parity: react-dockable-desktop 7.5.0.** Toolbar buttons: the library sizes the icon inside its

package/dist/core/contextMenu.d.ts

@@ -46,7 +46,25 @@ export interface ShowContextMenuOptions {
     x?: number;
     y?: number;
     items: ContextMenuItem[];
+    /**
+     * Where focus goes when the menu opens. `'menu'` (the default) focuses the menu itself, with no
+     * item highlighted: ArrowDown then reaches the first item and ArrowUp the last. `'first-item'`
+     * focuses the first enabled item, for a menu opened from the keyboard. When this is left out, a
+     * keyboard `contextmenu` event (the ContextMenu key or Shift+F10, which report no pointer
+     * position) opens on the first item and everything else, including a call with no event, on
+     * the menu: the same view every time, whatever the user did before.
+     */
+    initialFocus?: 'menu' | 'first-item';
 }
+/** A menu request as the workspace holds it. */
+export interface ContextMenuRequest {
+    x: number;
+    y: number;
+    items: ContextMenuItem[];
+    initialFocus: 'menu' | 'first-item';
+}
+/** The menu's initial focus, from what the caller passed (see `ShowContextMenuOptions.initialFocus`). */
+export declare function menuInitialFocus(options: ShowContextMenuOptions): 'menu' | 'first-item';
 export declare const isSeparator: (item: ContextMenuItem) => item is ContextMenuSeparator;
 export declare const isSubMenu: (item: ContextMenuItem) => item is ContextMenuSubMenu;
 /** Where a menu should open, from whatever the caller supplied. */

package/dist/core/workspace.d.ts

@@ -2,7 +2,7 @@ import type { App, Component, ComputedRef, InjectionKey } from 'vue';
 import type { DirtyStateOptions, DropPosition, FloatAnchor, FloatingWindow, Label, LayoutNode, MessageDescriptor, MessageFormatter, PanelInfo, SplitDirection } from '../types';
 import { PanelRegistry } from './registry';
 import type { PanelDefaultOptions } from './registry';
-import type { ContextMenuItem, ShowContextMenuOptions } from './contextMenu';
+import type { ContextMenuItem, ContextMenuRequest, ShowContextMenuOptions } from './contextMenu';
 import type { BuiltInEvents } from './eventBus';
 import { defaultMessages } from './messages';
 import type { ToolbarState } from './toolbarState';
@@ -168,11 +168,7 @@ export interface Workspace<TEvents extends object = Record<string, unknown>> {
     /** Dismiss the open menu, if any. */
     closeContextMenu(): void;
     /** The pending menu request, or `null`. @internal */
-    readonly contextMenu: ComputedRef<{
-        x: number;
-        y: number;
-        items: ContextMenuItem[];
-    } | null>;
+    readonly contextMenu: ComputedRef<ContextMenuRequest | null>;
     /**
      * Toolbar selection state, for items that are not controlled by the caller.
      *