@momentum-design/components 0.134.9 → 0.134.11

package/dist/components/popover/popover.component.d.ts

@@ -415,8 +415,16 @@ declare class Popover extends Popover_base implements StackedOverlayComponent {
      * Sets up the trigger related event listeners, based on the trigger type.
      * Includes fallback for mouseenter trigger to also handle focusin for non-interactive popovers.
      *
-     * We are using capture phase for to make sure we capture trigger events even when they are not propagated during the
-     * bubble phase (e.g.: buttons in list item)
+     * We use capture phase on `document` for all trigger listeners to make sure we capture trigger
+     * events even when they are not propagated during the bubble phase (e.g.: buttons in list item).
+     *
+     * Hover is detected via `mouseover`/`mouseout` (not `mouseenter`/`mouseleave`). The latter are
+     * spec'd as `composed: false` and do not bubble, so a document-level listener never sees them
+     * when the trigger lives inside a shadow root (e.g. wrapped in `mdc-iconprovider` or
+     * `mdc-themeprovider`). `mouseover`/`mouseout` are `composed: true` and bubble, so they cross
+     * shadow boundaries and reach `document`, letting us keep event delegation (no direct reference
+     * to the trigger element and no dependency on its mount/unmount lifecycle). The handlers filter
+     * out movements that stay within the trigger's subtree, recreating enter/leave semantics.
      * @internal
      */
     private setupTriggerListeners;
@@ -465,13 +473,25 @@ declare class Popover extends Popover_base implements StackedOverlayComponent {
      */
     protected isOpenUpdated(oldValue: boolean, newValue: boolean): Promise<void>;
     /**
-     * Handles mouse enter event on the trigger element.
-     * This method sets the `isHovered` flag to true and shows the popover
+     * Determines whether a delegated `mouseover`/`mouseout` event is movement that stays within the
+     * trigger's subtree rather than a genuine enter/leave of the trigger.
+     *
+     * Both events fire repeatedly while the pointer moves between elements inside the trigger
+     * (e.g. an icon with internal SVG elements). `relatedTarget` is the element on the other side of
+     * the boundary (the element being left for `mouseover`, or entered for `mouseout`); if it
+     * resolves to the trigger or one of its shadow hosts, the pointer has not crossed the trigger
+     * boundary and the event should be ignored.
+     * @internal
+     */
+    private isHoverWithinTrigger;
+    /**
+     * Handles the pointer moving over the trigger element (delegated `mouseover`).
+     * This method sets the `isHovered` flag to true and shows the popover.
      * @internal
      */
     private handleMouseEnter;
     /**
-     * Handles mouse leave event on the trigger element.
+     * Handles the pointer leaving the trigger element (delegated `mouseout`).
      * This method sets the `isHovered` flag to false and starts the close delay
      * timer to hide the popover.
      * @internal

package/dist/components/popover/popover.component.js

@@ -437,8 +437,16 @@ class Popover extends KeyDownHandledMixin(KeyToActionMixin(BackdropMixin(Prevent
          * Sets up the trigger related event listeners, based on the trigger type.
          * Includes fallback for mouseenter trigger to also handle focusin for non-interactive popovers.
          *
-         * We are using capture phase for to make sure we capture trigger events even when they are not propagated during the
-         * bubble phase (e.g.: buttons in list item)
+         * We use capture phase on `document` for all trigger listeners to make sure we capture trigger
+         * events even when they are not propagated during the bubble phase (e.g.: buttons in list item).
+         *
+         * Hover is detected via `mouseover`/`mouseout` (not `mouseenter`/`mouseleave`). The latter are
+         * spec'd as `composed: false` and do not bubble, so a document-level listener never sees them
+         * when the trigger lives inside a shadow root (e.g. wrapped in `mdc-iconprovider` or
+         * `mdc-themeprovider`). `mouseover`/`mouseout` are `composed: true` and bubble, so they cross
+         * shadow boundaries and reach `document`, letting us keep event delegation (no direct reference
+         * to the trigger element and no dependency on its mount/unmount lifecycle). The handlers filter
+         * out movements that stay within the trigger's subtree, recreating enter/leave semantics.
          * @internal
          */
         this.setupTriggerListeners = () => {
@@ -451,10 +459,10 @@ class Popover extends KeyDownHandledMixin(KeyToActionMixin(BackdropMixin(Prevent
             if (this.trigger.includes('mouseenter')) {
                 const hoverBridge = this.renderRoot.querySelector('div[part="popover-hover-bridge"]');
                 hoverBridge === null || hoverBridge === void 0 ? void 0 : hoverBridge.addEventListener('mouseenter', this.show);
-                document.addEventListener('mouseenter', this.handleMouseEnter, { capture: true });
-                document.addEventListener('mouseleave', this.handleMouseLeave, { capture: true });
                 this.addEventListener('mouseenter', this.cancelCloseDelay);
                 this.addEventListener('mouseleave', this.startCloseDelay);
+                document.addEventListener('mouseover', this.handleMouseEnter, { capture: true });
+                document.addEventListener('mouseout', this.handleMouseLeave, { capture: true });
             }
             if (this.trigger.includes('focusin')) {
                 document.addEventListener('focusin', this.handleFocusIn, { capture: true });
@@ -473,8 +481,8 @@ class Popover extends KeyDownHandledMixin(KeyToActionMixin(BackdropMixin(Prevent
             // mouseenter trigger
             const hoverBridge = this.renderRoot.querySelector('div[part="popover-hover-bridge"]');
             hoverBridge === null || hoverBridge === void 0 ? void 0 : hoverBridge.removeEventListener('mouseenter', this.show);
-            document.removeEventListener('mouseenter', this.handleMouseEnter, { capture: true });
-            document.removeEventListener('mouseleave', this.handleMouseLeave, { capture: true });
+            document.removeEventListener('mouseover', this.handleMouseEnter, { capture: true });
+            document.removeEventListener('mouseout', this.handleMouseLeave, { capture: true });
             this.removeEventListener('mouseenter', this.cancelCloseDelay);
             this.removeEventListener('mouseleave', this.startCloseDelay);
             // focusin trigger
@@ -551,18 +559,39 @@ class Popover extends KeyDownHandledMixin(KeyToActionMixin(BackdropMixin(Prevent
             }
         };
         /**
-         * Handles mouse enter event on the trigger element.
-         * This method sets the `isHovered` flag to true and shows the popover
+         * Determines whether a delegated `mouseover`/`mouseout` event is movement that stays within the
+         * trigger's subtree rather than a genuine enter/leave of the trigger.
+         *
+         * Both events fire repeatedly while the pointer moves between elements inside the trigger
+         * (e.g. an icon with internal SVG elements). `relatedTarget` is the element on the other side of
+         * the boundary (the element being left for `mouseover`, or entered for `mouseout`); if it
+         * resolves to the trigger or one of its shadow hosts, the pointer has not crossed the trigger
+         * boundary and the event should be ignored.
+         * @internal
+         */
+        this.isHoverWithinTrigger = (event) => {
+            const { triggerElement } = this;
+            const { relatedTarget } = event;
+            if (triggerElement && relatedTarget instanceof Element) {
+                return getHostComposePath(relatedTarget).includes(triggerElement);
+            }
+            return false;
+        };
+        /**
+         * Handles the pointer moving over the trigger element (delegated `mouseover`).
+         * This method sets the `isHovered` flag to true and shows the popover.
          * @internal
          */
         this.handleMouseEnter = (event) => {
             if (!this.isEventFromTrigger(event))
                 return;
+            if (this.isHoverWithinTrigger(event))
+                return;
             this.isHovered = true;
             this.show();
         };
         /**
-         * Handles mouse leave event on the trigger element.
+         * Handles the pointer leaving the trigger element (delegated `mouseout`).
          * This method sets the `isHovered` flag to false and starts the close delay
          * timer to hide the popover.
          * @internal
@@ -570,16 +599,8 @@ class Popover extends KeyDownHandledMixin(KeyToActionMixin(BackdropMixin(Prevent
         this.handleMouseLeave = (event) => {
             if (!this.isEventFromTrigger(event))
                 return;
-            // When the trigger contains shadow DOM children (e.g. an icon with internal SVG elements),
-            // mouseleave fires on internal elements as the mouse moves between them.
-            // Only close if the mouse has actually left the trigger element.
-            const mouseEvent = event;
-            const { triggerElement } = this;
-            if (triggerElement && mouseEvent.relatedTarget instanceof Element) {
-                if (getHostComposePath(mouseEvent.relatedTarget).includes(triggerElement)) {
-                    return;
-                }
-            }
+            if (this.isHoverWithinTrigger(event))
+                return;
             this.isHovered = false;
             this.startCloseDelay();
         };

package/dist/components/spatialnavigationprovider/spatialnavigationprovider.component.d.ts

@@ -1,24 +1,43 @@
 import { Provider } from '../../models';
 import { ShortestDistanceWeights, SpatialNavigationContextValue, SpatialNavigationActionToKeyMap } from './spatialnavigationprovider.types';
 /**
- * This component manages focus using spatial navigation and provides context for child components.
- *
- * Place it at the root of the application.
+ * Spatial navigation focus manager
  *
  * [Spatial navigation](https://en.wikipedia.org/wiki/Spatial_navigation) lets users move focus among
  * elements on a 2D plane, common on TVs and game consoles with remotes or gamepads.
  *
+ * It should have only one instance and it should placed at the root of the application.
+ *
  * ## Focus management
  *
  * The provider listens to keyboard events and moves focus among elements based on arrow key input.
  * You can influence or override this behavior.
  *
- * Note: The algorithm is distance-based, so the UI should be designed so focusable elements are
- * predictably reachable. Relative element positions should remain stable; responsive layouts can
- * make navigation unpredictable. This is less of an issue on fixed-size TV UIs but can show unexpected
- * behavior in Storybook when resizing. See the "Limitations" section.
+ * ### Steps
  *
- * ### Automatic
+ * Spatial navigation goes trough the following steps after each keydown:
+ *
+ * 1. Handle `keydown` in the capture phase.
+ *    When active element has `data-spatial-{direction}` attribute then prevent all component navigation and call the
+ *    provider own `keydown` handler (see step 3).
+ * 2. Component own `keydown` handler executed (bubble phase) (e.g., list moves focus internally) it it was not
+ *    prevented.
+ * 3. Spatial Navigation Provider's `keydown` handler executed (bubble phase)
+ *    - If key event was not prevented in step 1. emit `navbeforeprocess` to check if any component want to handle
+ *      the key event itself. If `navbeforeprocess` event is prevented, stop here.
+ *    - If the component did not handle `keydown`, it calculate the next focusable item
+ *      - if the active element has `data-spatial-{direction}` attribute, it will try to focus the element with the id.
+ *      - Otherwise calculate the next focused item based on the direction and distances.
+ *    - If there is no next item, it emits `navnotarget` event
+ *    - Otherwise emit `navbeforefocus`,
+ *      - If this event prevented, nothing happens
+ *      - Otherwise the focus moves to the next element
+ *
+ * ### Determine next focus
+ *
+ * The provider use multiple ways to determine the next focused element. The order defined in the "Steps" section.
+ *
+ * #### Calculated focus
  *
  * By default, the next focus target is computed from element positions:
  *
@@ -35,9 +54,14 @@ import { ShortestDistanceWeights, SpatialNavigationContextValue, SpatialNavigati
  * Elements with `data-spatial-exclude` are excluded (with its subtree) from the navigation, even if they
  * are focusable.
  *
- * ### Overwrite next element
+ * Note: The algorithm is distance-based, so the UI should be designed to focusable elements are
+ * predictably reachable. Relative element positions should remain stable; responsive layouts can
+ * make navigation unpredictable. This is less of an issue on fixed-size TV UIs but can show unexpected
+ * behavior in Storybook when resizing. See the "Limitations" section.
+ *
+ * #### Overwrite next element
  *
- * Override automatic navigation by adding one of these attributes to a focusable element:
+ * Override calculated navigation by adding one of these attributes to a focusable element:
  *
  * - `data-spatial-up`
  * - `data-spatial-down`
@@ -46,7 +70,7 @@ import { ShortestDistanceWeights, SpatialNavigationContextValue, SpatialNavigati
  *
  * Each attribute value must be the id of the element to focus when the corresponding key is pressed.
  *
- * ### Element internal navigation
+ * #### Element internal navigation
  *
  * Complex components (List, Combobox, Tree, etc.) may handle their own navigation. For example, a List moves
  * focus internally on Down until the last item, after which Down should fall back to provider navigation.
@@ -78,15 +102,15 @@ import { ShortestDistanceWeights, SpatialNavigationContextValue, SpatialNavigati
  *
  * Supported data attributes:
  *
- * | Attribute              | Value       | Default | Description                                                                         |
- * |------------------------|-------------|---------|-------------------------------------------------------------------------------------|
- * | `data-spatial-left`    | element id  | N/A     | Focus this element when Left is pressed                                             |
- * | `data-spatial-up`      | element id  | N/A     | Focus this element when Up is pressed                                               |
- * | `data-spatial-right`   | element id  | N/A     | Focus this element when Right is pressed                                            |
- * | `data-spatial-down`    | element id  | N/A     | Focus this element when Down is pressed                                             |
- * | `data-spatial-go-back` | N/A         | N/A     | First focusable element with this attribute is clicked on Back/Escape               |
- * | `data-spatial-focusable` | N/A       | N/A     | Treat element as focusable even if it normally is not (e.g., `tabindex="-1"`)       |
- * | `data-spatial-exclude` | N/A         | N/A     | Exclude focusable element (and its subtree) from the navigation                     |
+ * | Attribute                | Value                     | Default | Description                                                                   |
+ * |--------------------------|---------------------------|---------|-------------------------------------------------------------------------------|
+ * | `data-spatial-left`      | empty string / element id | N/A     | Prevent native navigation in Left direction and focus element if exists       |
+ * | `data-spatial-up`        | empty string / element id | N/A     | Prevent native navigation in Up direction and focus element if exists         |
+ * | `data-spatial-right`     | empty string / element id | N/A     | Prevent native navigation in Right direction and focus element if exists      |
+ * | `data-spatial-down`      | empty string / element id | N/A     | Prevent native navigation in Down direction and focus element if exists       |
+ * | `data-spatial-go-back`   | N/A                       | N/A     | First focusable element with this attribute is clicked on Back/Escape         |
+ * | `data-spatial-focusable` | N/A                       | N/A     | Treat element as focusable even if it normally is not (e.g., `tabindex="-1"`) |
+ * | `data-spatial-exclude`   | N/A                       | N/A     | Exclude focusable element (and its subtree) from the navigation               |
  *
  * ## Event emitting order
  *
@@ -246,7 +270,11 @@ declare class SpatialNavigationProvider extends Provider<SpatialNavigationContex
     /**
      * List of navigation keys
      */
-    get navigationKeys(): string[];
+    isNavigationKey(key: string): boolean;
+    /**
+     * List of navigation keys
+     */
+    isDirectionKey(key: string): boolean;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -285,6 +313,15 @@ declare class SpatialNavigationProvider extends Provider<SpatialNavigationContex
      * @internal
      */
     private emitNavBeforeFocusEvent;
+    /**
+     * Check if the current active element has instruction to find the next focusable
+     * We look for the element in all the shadow DOMs in the composed path of the active element,
+     * so mdc component can use this feature as well.
+     *
+     * @param currentDomActiveElement - The current active element in the DOM
+     * @param direction - Direction
+     */
+    private getElementIdForDirectionAttr;
     /**
      * Focus the next element in the given direction.
      *
@@ -322,6 +359,7 @@ declare class SpatialNavigationProvider extends Provider<SpatialNavigationContex
      * @internal
      */
     private getActiveElement;
+    private handleKeyDownBefore;
     /**
      * Handle keydown event
      *

package/dist/components/spatialnavigationprovider/spatialnavigationprovider.component.js

@@ -17,24 +17,43 @@ import { orderElementsByDistance } from './spatialnavigationprovider.utils';
 import { SpatialNavigationEvent } from './spatialnavigationprovider.events';
 // AI-Assisted
 /**
- * This component manages focus using spatial navigation and provides context for child components.
- *
- * Place it at the root of the application.
+ * Spatial navigation focus manager
  *
  * [Spatial navigation](https://en.wikipedia.org/wiki/Spatial_navigation) lets users move focus among
  * elements on a 2D plane, common on TVs and game consoles with remotes or gamepads.
  *
+ * It should have only one instance and it should placed at the root of the application.
+ *
  * ## Focus management
  *
  * The provider listens to keyboard events and moves focus among elements based on arrow key input.
  * You can influence or override this behavior.
  *
- * Note: The algorithm is distance-based, so the UI should be designed so focusable elements are
- * predictably reachable. Relative element positions should remain stable; responsive layouts can
- * make navigation unpredictable. This is less of an issue on fixed-size TV UIs but can show unexpected
- * behavior in Storybook when resizing. See the "Limitations" section.
+ * ### Steps
+ *
+ * Spatial navigation goes trough the following steps after each keydown:
  *
- * ### Automatic
+ * 1. Handle `keydown` in the capture phase.
+ *    When active element has `data-spatial-{direction}` attribute then prevent all component navigation and call the
+ *    provider own `keydown` handler (see step 3).
+ * 2. Component own `keydown` handler executed (bubble phase) (e.g., list moves focus internally) it it was not
+ *    prevented.
+ * 3. Spatial Navigation Provider's `keydown` handler executed (bubble phase)
+ *    - If key event was not prevented in step 1. emit `navbeforeprocess` to check if any component want to handle
+ *      the key event itself. If `navbeforeprocess` event is prevented, stop here.
+ *    - If the component did not handle `keydown`, it calculate the next focusable item
+ *      - if the active element has `data-spatial-{direction}` attribute, it will try to focus the element with the id.
+ *      - Otherwise calculate the next focused item based on the direction and distances.
+ *    - If there is no next item, it emits `navnotarget` event
+ *    - Otherwise emit `navbeforefocus`,
+ *      - If this event prevented, nothing happens
+ *      - Otherwise the focus moves to the next element
+ *
+ * ### Determine next focus
+ *
+ * The provider use multiple ways to determine the next focused element. The order defined in the "Steps" section.
+ *
+ * #### Calculated focus
  *
  * By default, the next focus target is computed from element positions:
  *
@@ -51,9 +70,14 @@ import { SpatialNavigationEvent } from './spatialnavigationprovider.events';
  * Elements with `data-spatial-exclude` are excluded (with its subtree) from the navigation, even if they
  * are focusable.
  *
- * ### Overwrite next element
+ * Note: The algorithm is distance-based, so the UI should be designed to focusable elements are
+ * predictably reachable. Relative element positions should remain stable; responsive layouts can
+ * make navigation unpredictable. This is less of an issue on fixed-size TV UIs but can show unexpected
+ * behavior in Storybook when resizing. See the "Limitations" section.
+ *
+ * #### Overwrite next element
  *
- * Override automatic navigation by adding one of these attributes to a focusable element:
+ * Override calculated navigation by adding one of these attributes to a focusable element:
  *
  * - `data-spatial-up`
  * - `data-spatial-down`
@@ -62,7 +86,7 @@ import { SpatialNavigationEvent } from './spatialnavigationprovider.events';
  *
  * Each attribute value must be the id of the element to focus when the corresponding key is pressed.
  *
- * ### Element internal navigation
+ * #### Element internal navigation
  *
  * Complex components (List, Combobox, Tree, etc.) may handle their own navigation. For example, a List moves
  * focus internally on Down until the last item, after which Down should fall back to provider navigation.
@@ -94,15 +118,15 @@ import { SpatialNavigationEvent } from './spatialnavigationprovider.events';
  *
  * Supported data attributes:
  *
- * | Attribute              | Value       | Default | Description                                                                         |
- * |------------------------|-------------|---------|-------------------------------------------------------------------------------------|
- * | `data-spatial-left`    | element id  | N/A     | Focus this element when Left is pressed                                             |
- * | `data-spatial-up`      | element id  | N/A     | Focus this element when Up is pressed                                               |
- * | `data-spatial-right`   | element id  | N/A     | Focus this element when Right is pressed                                            |
- * | `data-spatial-down`    | element id  | N/A     | Focus this element when Down is pressed                                             |
- * | `data-spatial-go-back` | N/A         | N/A     | First focusable element with this attribute is clicked on Back/Escape               |
- * | `data-spatial-focusable` | N/A       | N/A     | Treat element as focusable even if it normally is not (e.g., `tabindex="-1"`)       |
- * | `data-spatial-exclude` | N/A         | N/A     | Exclude focusable element (and its subtree) from the navigation                     |
+ * | Attribute                | Value                     | Default | Description                                                                   |
+ * |--------------------------|---------------------------|---------|-------------------------------------------------------------------------------|
+ * | `data-spatial-left`      | empty string / element id | N/A     | Prevent native navigation in Left direction and focus element if exists       |
+ * | `data-spatial-up`        | empty string / element id | N/A     | Prevent native navigation in Up direction and focus element if exists         |
+ * | `data-spatial-right`     | empty string / element id | N/A     | Prevent native navigation in Right direction and focus element if exists      |
+ * | `data-spatial-down`      | empty string / element id | N/A     | Prevent native navigation in Down direction and focus element if exists       |
+ * | `data-spatial-go-back`   | N/A                       | N/A     | First focusable element with this attribute is clicked on Back/Escape         |
+ * | `data-spatial-focusable` | N/A                       | N/A     | Treat element as focusable even if it normally is not (e.g., `tabindex="-1"`) |
+ * | `data-spatial-exclude`   | N/A                       | N/A     | Exclude focusable element (and its subtree) from the navigation               |
  *
  * ## Event emitting order
  *
@@ -220,7 +244,7 @@ class SpatialNavigationProvider extends Provider {
     /**
      * List of navigation keys
      */
-    get navigationKeys() {
+    isNavigationKey(key) {
         return [
             this.navigationKeyMapping.up,
             this.navigationKeyMapping.down,
@@ -228,7 +252,18 @@ class SpatialNavigationProvider extends Provider {
             this.navigationKeyMapping.right,
             this.navigationKeyMapping.enter,
             this.navigationKeyMapping.escape,
-        ];
+        ].includes(key);
+    }
+    /**
+     * List of navigation keys
+     */
+    isDirectionKey(key) {
+        return [
+            this.navigationKeyMapping.up,
+            this.navigationKeyMapping.down,
+            this.navigationKeyMapping.left,
+            this.navigationKeyMapping.right,
+        ].includes(key);
     }
     constructor() {
         // initialize the context by running the Provider constructor:
@@ -266,6 +301,21 @@ class SpatialNavigationProvider extends Provider {
          * @internal
          */
         this.initialHistoryLength = window.history.length;
+        this.handleKeyDownBefore = (evt) => {
+            if (evt.shiftKey || evt.ctrlKey || evt.altKey || evt.metaKey || !this.isNavigationKey(evt.key)) {
+                return;
+            }
+            const action = this.context.value.keyToActionMap[evt.key];
+            if (this.isDirectionKey(evt.key) &&
+                this.getElementIdForDirectionAttr(evt.target, action) !== undefined) {
+                // prevent native key events
+                evt.preventDefault();
+                // prevent MDC component key events
+                evt.stopImmediatePropagation();
+                // Need to call Spatial navigation key handler manually after all propagation stopped
+                this.handleKeyDown(evt);
+            }
+        };
         /**
          * Handle keydown event
          *
@@ -274,7 +324,7 @@ class SpatialNavigationProvider extends Provider {
          */
         this.handleKeyDown = (evt) => {
             var _a;
-            if (evt.shiftKey || evt.ctrlKey || evt.altKey || evt.metaKey || !this.navigationKeys.includes(evt.key)) {
+            if (evt.shiftKey || evt.ctrlKey || evt.altKey || evt.metaKey || !this.isNavigationKey(evt.key)) {
                 return;
             }
             const action = this.context.value.keyToActionMap[evt.key];
@@ -352,12 +402,14 @@ class SpatialNavigationProvider extends Provider {
     }
     connectedCallback() {
         super.connectedCallback();
+        document.addEventListener('keydown', this.handleKeyDownBefore, { capture: true });
         document.addEventListener('keydown', this.handleKeyDown);
         document.addEventListener('focus', this.handleFocus);
         this.initActiveElement();
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        document.removeEventListener('keydown', this.handleKeyDownBefore, { capture: true });
         document.removeEventListener('keydown', this.handleKeyDown);
         document.removeEventListener('focus', this.handleFocus);
         this.activeElement = undefined;
@@ -461,6 +513,19 @@ class SpatialNavigationProvider extends Provider {
         }
         return false;
     }
+    /**
+     * Check if the current active element has instruction to find the next focusable
+     * We look for the element in all the shadow DOMs in the composed path of the active element,
+     * so mdc component can use this feature as well.
+     *
+     * @param currentDomActiveElement - The current active element in the DOM
+     * @param direction - Direction
+     */
+    getElementIdForDirectionAttr(currentDomActiveElement, direction) {
+        var _a;
+        const dataAttrName = `data-spatial-${direction}`;
+        return (_a = currentDomActiveElement === null || currentDomActiveElement === void 0 ? void 0 : currentDomActiveElement.getAttribute(dataAttrName)) !== null && _a !== void 0 ? _a : undefined;
+    }
     /**
      * Focus the next element in the given direction.
      *
@@ -471,10 +536,6 @@ class SpatialNavigationProvider extends Provider {
      */
     focusNextInFocusableAria(elements, direction) {
         var _a, _b;
-        // Do nothing when there is no focusable element
-        if (elements.length === 0) {
-            return undefined;
-        }
         let currentActiveElement = this.getActiveElement();
         const currentDomActiveElement = getDomActiveElement();
         // Sync current active element if necessary
@@ -492,10 +553,6 @@ class SpatialNavigationProvider extends Provider {
             }
             this.setActiveElement(currentActiveElement);
         }
-        // If DOM active element is not in the ficus area then move focus back to the current active element
-        if (currentActiveElement !== getDomActiveElement()) {
-            return currentActiveElement;
-        }
         // Check if the current active element has instruction to find the next focusable
         // We look for the element in all the shadow DOMs in the composed path of the active element,
         // so mdc component can use this feature as well.
@@ -510,6 +567,14 @@ class SpatialNavigationProvider extends Provider {
                 }
             }
         }
+        // If DOM active element is not in the focus area then move focus back to the current active element
+        if (currentActiveElement !== getDomActiveElement()) {
+            return currentActiveElement;
+        }
+        // Do nothing when there is no focusable element
+        if (elements.length === 0) {
+            return undefined;
+        }
         // Find the closest element in the given direction
         const results = orderElementsByDistance(currentActiveElement, elements, direction, this.distanceCalculationWeights);
         return (_b = results[0]) === null || _b === void 0 ? void 0 : _b.candidate;