google · gonfunko · May 13, 2025 · May 13, 2025 · May 13, 2025 · May 13, 2025
@@ -47,7 +47,6 @@ import type {IDragStrategy, IDraggable} from './interfaces/i_draggable.js';
 import type {IFocusableNode} from './interfaces/i_focusable_node.js';
 import type {IFocusableTree} from './interfaces/i_focusable_tree.js';
 import {IIcon} from './interfaces/i_icon.js';
-import type {INavigable} from './interfaces/i_navigable.js';
 import * as internalConstants from './internal_constants.js';
 import {Msg} from './msg.js';
 import * as renderManagement from './render_management.js';
@@ -78,8 +77,7 @@ export class BlockSvg
     ICopyable<BlockCopyData>,
     IDraggable,
     IDeletable,
-    IFocusableNode,
-    INavigable<BlockSvg>
+    IFocusableNode
 {
   /**
    * Constant for identifying rows that are to be rendered inline.
@@ -1823,16 +1821,4 @@ export class BlockSvg
   canBeFocused(): boolean {
     return true;
   }
-
-  /**
-   * Returns this block's class.
-   *
-   * Used by keyboard navigation to look up the rules for navigating from this
-   * block.
-   *
-   * @returns This block's class.
-   */
-  getClass() {
-    return BlockSvg;
-  }
 }
@@ -171,7 +171,7 @@ import {
 import {IVariableMap} from './interfaces/i_variable_map.js';
 import {IVariableModel, IVariableState} from './interfaces/i_variable_model.js';
 import * as internalConstants from './internal_constants.js';
-import {CursorOptions, LineCursor} from './keyboard_nav/line_cursor.js';
+import {LineCursor} from './keyboard_nav/line_cursor.js';
 import {Marker} from './keyboard_nav/marker.js';
 import type {LayerManager} from './layer_manager.js';
 import * as layers from './layers.js';
@@ -429,7 +429,7 @@ Names.prototype.populateProcedures = function (
 };
 // clang-format on
 
-export * from './interfaces/i_navigable.js';
+export * from './flyout_navigator.js';
 export * from './interfaces/i_navigation_policy.js';
 export * from './keyboard_nav/block_navigation_policy.js';
 export * from './keyboard_nav/connection_navigation_policy.js';
@@ -457,7 +457,6 @@ export {
   ContextMenuItems,
   ContextMenuRegistry,
   Css,
-  CursorOptions,
   DeleteArea,
   DragTarget,
   Events,

@@ -26,7 +26,6 @@ import type {Input} from './inputs/input.js';
 import type {IFocusableNode} from './interfaces/i_focusable_node.js';
 import type {IFocusableTree} from './interfaces/i_focusable_tree.js';
 import type {IKeyboardAccessible} from './interfaces/i_keyboard_accessible.js';
-import type {INavigable} from './interfaces/i_navigable.js';
 import type {IRegistrable} from './interfaces/i_registrable.js';
 import {ISerializable} from './interfaces/i_serializable.js';
 import type {ConstantProvider} from './renderers/common/constants.js';
@@ -68,12 +67,7 @@ export type FieldValidator<T = any> = (newValue: T) => T | null | undefined;
  * @typeParam T - The value stored on the field.
  */
 export abstract class Field<T = any>
-  implements
-    IKeyboardAccessible,
-    IRegistrable,
-    ISerializable,
-    IFocusableNode,
-    INavigable<Field<T>>
+  implements IKeyboardAccessible, IRegistrable, ISerializable, IFocusableNode
 {
   /**
    * To overwrite the default value which is set in **Field**, directly update
@@ -1384,16 +1378,6 @@ export abstract class Field<T = any>
       `Attempted to instantiate a field from the registry that hasn't defined a 'fromJson' method.`,
     );
   }
-
-  /**
-   * Returns this field's class.
-   *
-   * Used by keyboard navigation to look up the rules for navigating from this
-   * field. Must be implemented by subclasses.
-   *
-   * @returns This field's class.
-   */
-  abstract getClass(): new (...args: any) => Field<T>;
 }
 
 /**

@@ -228,18 +228,6 @@ export class FieldCheckbox extends Field<CheckboxBool> {
     // 'override' the static fromJson method.
     return new this(options.checked, undefined, options);
   }
-
-  /**
-   * Returns this field's class.
-   *
-   * Used by keyboard navigation to look up the rules for navigating from this
-   * field.
-   *
-   * @returns This field's class.
-   */
-  getClass() {
-    return FieldCheckbox;
-  }
 }
 
 fieldRegistry.register('field_checkbox', FieldCheckbox);

@@ -796,18 +796,6 @@ export class FieldDropdown extends Field<string> {
       throw TypeError('Found invalid FieldDropdown options.');
     }
   }
-
-  /**
-   * Returns this field's class.
-   *
-   * Used by keyboard navigation to look up the rules for navigating from this
-   * field.
-   *
-   * @returns This field's class.
-   */
-  getClass() {
-    return FieldDropdown;
-  }
 }
 
 /**

@@ -273,18 +273,6 @@ export class FieldImage extends Field<string> {
       options,
     );
   }
-
-  /**
-   * Returns this field's class.
-   *
-   * Used by keyboard navigation to look up the rules for navigating from this
-   * field.
-   *
-   * @returns This field's class.
-   */
-  getClass() {
-    return FieldImage;
-  }
 }
 
 fieldRegistry.register('field_image', FieldImage);

@@ -126,18 +126,6 @@ export class FieldLabel extends Field<string> {
     // the static fromJson method.
     return new this(text, undefined, options);
   }
-
-  /**
-   * Returns this field's class.
-   *
-   * Used by keyboard navigation to look up the rules for navigating from this
-   * field.
-   *
-   * @returns This field's class.
-   */
-  getClass() {
-    return FieldLabel;
-  }
 }
 
 fieldRegistry.register('field_label', FieldLabel);

@@ -341,18 +341,6 @@ export class FieldNumber extends FieldInput<number> {
       options,
     );
   }
-
-  /**
-   * Returns this field's class.
-   *
-   * Used by keyboard navigation to look up the rules for navigating from this
-   * field.
-   *
-   * @returns This field's class.
-   */
-  getClass() {
-    return FieldNumber;
-  }
 }
 
 fieldRegistry.register('field_number', FieldNumber);

@@ -89,18 +89,6 @@ export class FieldTextInput extends FieldInput<string> {
     // override the static fromJson method.
     return new this(text, undefined, options);
   }
-
-  /**
-   * Returns this field's class.
-   *
-   * Used by keyboard navigation to look up the rules for navigating from this
-   * field.
-   *
-   * @returns This field's class.
-   */
-  getClass() {
-    return FieldTextInput;
-  }
 }
 
 fieldRegistry.register('field_input', FieldTextInput);

@@ -20,6 +20,7 @@ import {EventType} from './events/type.js';
 import * as eventUtils from './events/utils.js';
 import {FlyoutItem} from './flyout_item.js';
 import {FlyoutMetricsManager} from './flyout_metrics_manager.js';
+import {FlyoutNavigator} from './flyout_navigator.js';
 import {FlyoutSeparator, SeparatorAxis} from './flyout_separator.js';
 import {getFocusManager} from './focus_manager.js';
 import {IAutoHideable} from './interfaces/i_autohideable.js';
@@ -243,6 +244,7 @@ export abstract class Flyout
     this.workspace_.internalIsFlyout = true;
     // Keep the workspace visibility consistent with the flyout's visibility.
     this.workspace_.setVisible(this.visible);
+    this.workspace_.setNavigator(new FlyoutNavigator(this));
 
     /**
      * The unique id for this component that is used to register with the

@@ -16,7 +16,6 @@ import * as Css from './css.js';
 import type {IBoundedElement} from './interfaces/i_bounded_element.js';
 import type {IFocusableNode} from './interfaces/i_focusable_node.js';
 import type {IFocusableTree} from './interfaces/i_focusable_tree.js';
-import type {INavigable} from './interfaces/i_navigable.js';
 import type {IRenderedElement} from './interfaces/i_rendered_element.js';
 import {idGenerator} from './utils.js';
 import {Coordinate} from './utils/coordinate.js';
@@ -32,11 +31,7 @@ import type {WorkspaceSvg} from './workspace_svg.js';
  * Class for a button or label in the flyout.
  */
 export class FlyoutButton
-  implements
-    IBoundedElement,
-    IRenderedElement,
-    IFocusableNode,
-    INavigable<FlyoutButton>
+  implements IBoundedElement, IRenderedElement, IFocusableNode
 {
   /** The horizontal margin around the text in the button. */
   static TEXT_MARGIN_X = 5;
@@ -412,18 +407,6 @@ export class FlyoutButton
   canBeFocused(): boolean {
     return true;
   }
-
-  /**
-   * Returns this button's class.
-   *
-   * Used by keyboard navigation to look up the rules for navigating from this
-   * button.
-   *
-   * @returns This button's class.
-   */
-  getClass() {
-    return FlyoutButton;
-  }
 }
 
 /** CSS for buttons and labels. See css.js for use. */

@@ -1,5 +1,6 @@
 import type {IBoundedElement} from './interfaces/i_bounded_element.js';
-import type {INavigable} from './interfaces/i_navigable.js';
+import type {IFocusableNode} from './interfaces/i_focusable_node.js';
+
 /**
  * Representation of an item displayed in a flyout.
  */
@@ -12,7 +13,7 @@ export class FlyoutItem {
    *     flyout inflater that created this object.
    */
   constructor(
-    private element: IBoundedElement & INavigable<any>,
+    private element: IBoundedElement & IFocusableNode,
     private type: string,
   ) {}
 

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type {IFlyout} from './interfaces/i_flyout.js';
+import {FlyoutButtonNavigationPolicy} from './keyboard_nav/flyout_button_navigation_policy.js';
+import {FlyoutNavigationPolicy} from './keyboard_nav/flyout_navigation_policy.js';
+import {FlyoutSeparatorNavigationPolicy} from './keyboard_nav/flyout_separator_navigation_policy.js';
+import {Navigator} from './navigator.js';
+
+export class FlyoutNavigator extends Navigator {
+  constructor(flyout: IFlyout) {
+    super();
+    this.rules.push(
+      new FlyoutButtonNavigationPolicy(),
+      new FlyoutSeparatorNavigationPolicy(),
+    );
+    this.rules = this.rules.map(
+      (rule) => new FlyoutNavigationPolicy(rule, flyout),
+    );
+  }
+}
@@ -7,15 +7,12 @@
 import type {IBoundedElement} from './interfaces/i_bounded_element.js';
 import type {IFocusableNode} from './interfaces/i_focusable_node.js';
 import type {IFocusableTree} from './interfaces/i_focusable_tree.js';
-import type {INavigable} from './interfaces/i_navigable.js';
 import {Rect} from './utils/rect.js';
 
 /**
  * Representation of a gap between elements in a flyout.
  */
-export class FlyoutSeparator
-  implements IBoundedElement, INavigable<FlyoutSeparator>, IFocusableNode
-{
+export class FlyoutSeparator implements IBoundedElement, IFocusableNode {
   private x = 0;
   private y = 0;
 
@@ -66,18 +63,6 @@ export class FlyoutSeparator
     return false;
   }
 
-  /**
-   * Returns this separator's class.
-   *
-   * Used by keyboard navigation to look up the rules for navigating from this
-   * separator.
-   *
-   * @returns This separator's class.
-   */
-  getClass() {
-    return FlyoutSeparator;
-  }
-
   /** See IFocusableNode.getFocusableElement. */
   getFocusableElement(): HTMLElement | SVGElement {
     throw new Error('Cannot be focused');