@maestro_io/maestro-web-sdk 2.1.2 → 2.1.3

package/dist/components/atoms/Rive/index.d.ts

@@ -10,6 +10,7 @@ declare const _default: {
         onLoadRiveInstance: (riveInstance: any) => void;
     } & WithFocusableProps) | undefined, context?: any): {
         state: import("../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../external/spatial-navigation/spatialNavigation").default;
         getChildContext(): {
             parentFocusKey: string;
         };

package/dist/components/atoms/Rive/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { setFocus, withFocusable, } from '@/external/spatial-navigation';
+import { withFocusable, } from '@/external/spatial-navigation';
+import SDK from '@/index';
 class Rive extends React.Component {
     constructor() {
         super(...arguments);
@@ -36,7 +37,7 @@ class Rive extends React.Component {
         }
         setTimeout(() => {
             if (this.props.focusKey && this.props.autoFocus) {
-                setFocus(this.props.focusKey);
+                SDK.getMaestroEventViewModel().navigation.setFocus(this.props.focusKey);
             }
         }, 0);
     }

package/dist/components/molecules/ActionButton/ActionButton.d.ts

@@ -5,6 +5,7 @@ import React from 'react';
 declare const _default: {
     new (props?: (object & WithFocusableProps) | undefined, context?: any): {
         state: import("../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../external/spatial-navigation/spatialNavigation").default;
         getChildContext(): {
             parentFocusKey: string;
         };

package/dist/components/molecules/PanelNavButton/PanelNavButton.d.ts

@@ -14,6 +14,7 @@ type PanelNavButtonProps = {
 declare const _default: {
     new (props?: (PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps) | undefined, context?: any): {
         state: import("../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../external/spatial-navigation/spatialNavigation").default;
         getChildContext(): {
             parentFocusKey: string;
         };

package/dist/components/organisms/PanelNavigation/PanelNavigation.js

@@ -1,8 +1,7 @@
 import PanelNavButton from '@/components/molecules/PanelNavButton';
 import './PanelNavigation.styles.css';
 import React from 'react';
-import deliverFocus from '@/helpers/deliver-focus';
-import { setFocus } from '@/external/spatial-navigation';
+import SDK from '@/index';
 class PanelNavigationButton extends React.Component {
     constructor() {
         super(...arguments);
@@ -10,9 +9,9 @@ class PanelNavigationButton extends React.Component {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: (d, _props, details) => {
-                if (d === 'left' && this.props.itemFocused === 0 && details.layout) {
-                    deliverFocus(details.layout.node);
+            value: (d, _props) => {
+                if (d === 'left' && this.props.itemFocused === 0) {
+                    SDK.getMaestroEventViewModel().deliverFocus();
                     return;
                 }
                 if (this.props.onArrowPress) {
@@ -44,7 +43,7 @@ class PanelNavigation extends React.Component {
             writable: true,
             value: (index) => () => {
                 if (this.state.lastFocused !== index && this.state.lastFocused) {
-                    setFocus(`PANEL_NAV_BUTTON_${this.state.lastFocused}`);
+                    SDK.getMaestroEventViewModel().navigation.setFocus(`PANEL_NAV_BUTTON_${this.state.lastFocused}`);
                     return;
                 }
                 this.setState({ itemFocused: index, lastFocused: null }, () => {

package/dist/components/organisms/SegmentController/SegmentController.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import './SegmentController.styles.css';
-import { Details, Direction, Layout } from '@/external/spatial-navigation/utils';
+import { Direction, Layout } from '@/external/spatial-navigation/utils';
 import { WithFocusableProps } from '@/external/spatial-navigation';
 export type SegmentItem = {
     title: string;
@@ -22,7 +22,7 @@ declare class SegmentController extends React.Component<SegmentControllerProps>
         lastActiveIndex: number;
     };
     onBecameFocused: (item: SegmentItem, i: number) => (layout: Layout) => void;
-    handleArrowPress: (index: number) => (direction: Direction, _props: WithFocusableProps, details: Details) => void;
+    handleArrowPress: (index: number) => (direction: Direction, _props: WithFocusableProps) => void;
     render(): React.JSX.Element;
 }
 export default SegmentController;

package/dist/components/organisms/SegmentController/SegmentController.js

@@ -2,8 +2,7 @@ import React from 'react';
 import SegmentButton from '@/components/molecules/SegmentButton';
 import './SegmentController.styles.css';
 import { DEFAULT_SCROLLABLE_CONTAINER_CONTEXT, SCROLLABLE_CONTEXT_TYPE, } from '@/components/core/ScrollableContainer/ScrollableContainer';
-import { setFocus } from '@/external/spatial-navigation';
-import deliverFocus from '@/helpers/deliver-focus';
+import SDK from '@/index';
 class SegmentController extends React.Component {
     constructor() {
         super(...arguments);
@@ -29,7 +28,7 @@ class SegmentController extends React.Component {
             value: (item, i) => (layout) => {
                 if (this.state.lastActiveIndex !== i &&
                     this.state.lastActiveIndex !== null) {
-                    setFocus(`segment-controller-${this.state.lastActiveIndex}`);
+                    SDK.getMaestroEventViewModel().navigation.setFocus(`segment-controller-${this.state.lastActiveIndex}`);
                     return;
                 }
                 this.setState({
@@ -44,12 +43,12 @@ class SegmentController extends React.Component {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: (index) => (direction, _props, details) => {
+            value: (index) => (direction, _props) => {
                 if (direction === 'down' || direction === 'up') {
                     this.setState({ lastActiveIndex: this.state.activeIndex });
                 }
-                if (direction === 'left' && index === 0 && details.layout) {
-                    deliverFocus(details.layout.node.firstElementChild);
+                if (direction === 'left' && index === 0) {
+                    SDK.getMaestroEventViewModel().deliverFocus();
                 }
             }
         });

package/dist/external/spatial-navigation/index.d.ts

@@ -1,5 +1,4 @@
 import withFocusable, { WithFocusableProps } from './withFocusable';
-import { InitOptions, KeyMap } from './spatialNavigation';
-declare const destroy: () => void, pause: () => void, resume: () => void, setFocus: (targetFocusKey: string, details?: Record<string, any>) => void, init: ({ debug, visualDebug, nativeMode, throttle, throttleKeypresses, }?: InitOptions) => void, setKeyMap: (keyMap: KeyMap) => void;
-export { withFocusable, init, setKeyMap, destroy, pause, resume, setFocus };
+import SpatialNavigation, { InitOptions, KeyMap } from './spatialNavigation';
+export { withFocusable, SpatialNavigation };
 export { InitOptions, KeyMap, WithFocusableProps };

package/dist/external/spatial-navigation/index.js

@@ -1,4 +1,3 @@
 import withFocusable from './withFocusable';
 import SpatialNavigation from './spatialNavigation';
-const { destroy, pause, resume, setFocus, init, setKeyMap } = SpatialNavigation;
-export { withFocusable, init, setKeyMap, destroy, pause, resume, setFocus };
+export { withFocusable, SpatialNavigation };

package/dist/external/spatial-navigation/spatialNavigation.d.ts

@@ -72,7 +72,6 @@ declare class SpatialNavigation {
     private focusableComponents;
     private focusKey;
     private parentsHavingFocusedChild;
-    private enabled;
     private nativeMode;
     private throttle;
     private throttleKeypresses;
@@ -105,7 +104,7 @@ declare class SpatialNavigation {
      * They used as a base to measure adjacent slices
      */
     sortSiblingsByPriority(siblings: FocusableComponent[], currentLayout: Layout, direction: Direction, _focusKey: string): FocusableComponent[];
-    constructor();
+    constructor(options?: InitOptions);
     init({ debug, visualDebug, nativeMode, throttle, throttleKeypresses, }?: InitOptions): void;
     startDrawLayouts(): void;
     destroy(): void;
@@ -153,5 +152,4 @@ declare class SpatialNavigation {
 /**
  * Export singleton
  */
-declare const _default: SpatialNavigation;
-export default _default;
+export default SpatialNavigation;

package/dist/external/spatial-navigation/spatialNavigation.js

@@ -235,7 +235,7 @@ class SpatialNavigation {
             return aPriority - bPriority;
         });
     }
-    constructor() {
+    constructor(options = {}) {
         Object.defineProperty(this, "focusableComponents", {
             enumerable: true,
             configurable: true,
@@ -254,12 +254,6 @@ class SpatialNavigation {
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "enabled", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
         Object.defineProperty(this, "nativeMode", {
             enumerable: true,
             configurable: true,
@@ -329,12 +323,11 @@ class SpatialNavigation {
         this.focusableComponents = {};
         this.focusKey = null;
         this.parentsHavingFocusedChild = [];
-        this.enabled = false;
         this.nativeMode = false;
         this.throttle = 0;
         this.throttleKeypresses = false;
         this.pressedKeys = {};
-        this.paused = false;
+        this.paused = true;
         this.keyDownEventListener = null;
         this.keyUpEventListener = null;
         this.keyMap = DEFAULT_KEY_MAP;
@@ -349,22 +342,20 @@ class SpatialNavigation {
         this.navigateByDirection = this.navigateByDirection.bind(this);
         this.init = this.init.bind(this);
         this.setKeyMap = this.setKeyMap.bind(this);
+        this.init(options);
     }
     init({ debug = false, visualDebug = false, nativeMode = false, throttle = 0, throttleKeypresses = false, } = {}) {
-        if (!this.enabled) {
-            this.enabled = true;
-            this.nativeMode = nativeMode;
-            this.throttleKeypresses = throttleKeypresses;
-            this.debug = debug;
-            if (!this.nativeMode) {
-                if (Number.isInteger(throttle) && throttle > 0) {
-                    this.throttle = throttle;
-                }
-                this.bindEventHandlers();
-                if (visualDebug) {
-                    this.visualDebugger = new VisualDebugger();
-                    this.startDrawLayouts();
-                }
+        this.nativeMode = nativeMode;
+        this.throttleKeypresses = throttleKeypresses;
+        this.debug = debug;
+        if (!this.nativeMode) {
+            if (Number.isInteger(throttle) && throttle > 0) {
+                this.throttle = throttle;
+            }
+            this.bindEventHandlers();
+            if (visualDebug) {
+                this.visualDebugger = new VisualDebugger();
+                this.startDrawLayouts();
             }
         }
     }
@@ -381,18 +372,7 @@ class SpatialNavigation {
         draw();
     }
     destroy() {
-        if (this.enabled) {
-            this.enabled = false;
-            this.nativeMode = false;
-            this.throttle = 0;
-            this.throttleKeypresses = false;
-            this.focusKey = null;
-            this.parentsHavingFocusedChild = [];
-            this.focusableComponents = {};
-            this.paused = false;
-            this.keyMap = DEFAULT_KEY_MAP;
-            this.unbindEventHandlers();
-        }
+        this.unbindEventHandlers();
     }
     getEventType(keyCode) {
         return Object.keys(this.getKeyMap()).find((key) => this.getKeyMap()[key].includes(keyCode));
@@ -806,6 +786,15 @@ class SpatialNavigation {
             this.focusableComponents[focusKey].onBecameBlurredHandler?.(this.getNodeLayoutByFocusKey(focusKey), details);
     }
     pause() {
+        this.focusKey = null;
+        this.parentsHavingFocusedChild = [];
+        this.pressedKeys = {};
+        this.log('pause', 'paused');
+        this.visualDebugger?.clear();
+        this.visualDebugger?.clearLayouts();
+        this.getFocusableComponents().forEach((component) => {
+            component.onUpdateFocus?.(false);
+        });
         this.paused = true;
     }
     resume() {
@@ -872,4 +861,4 @@ class SpatialNavigation {
 /**
  * Export singleton
  */
-export default new SpatialNavigation();
+export default SpatialNavigation;

package/dist/external/spatial-navigation/withFocusable.d.ts

@@ -34,6 +34,7 @@ export interface WithFocusableState {
 declare const withFocusable: <P extends object>({ forgetLastFocusedChild: configForgetLastFocusedChild, trackChildren: configTrackChildren, autoRestoreFocus: configAutoRestoreFocus, blockNavigationOut: configBlockNavigationOut, }?: WithFocusableConfig) => (WrappedComponent: import("react").ComponentType<P & WithFocusableProps>) => {
     new (props?: (P & WithFocusableProps) | undefined, context?: any): {
         state: WithFocusableState;
+        navigation: import("./spatialNavigation").default;
         getChildContext(): {
             parentFocusKey: string;
         };

package/dist/external/spatial-navigation/withFocusable.js

@@ -2,7 +2,8 @@
 import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
 import { Component, createElement } from 'react';
-import SpatialNavigation, { ROOT_FOCUS_KEY } from './spatialNavigation';
+import { ROOT_FOCUS_KEY } from './spatialNavigation';
+import SDK from '@/index';
 // Helper functions to replace lodash and recompose
 const uniqueId = (prefix) => `${prefix}${Math.random().toString(36).substr(2, 9)}`;
 const noop = () => { };
@@ -28,13 +29,19 @@ const withFocusable = ({ forgetLastFocusedChild: configForgetLastFocusedChild =
                             parentFocusKey: this.props.parentFocusKey || ROOT_FOCUS_KEY,
                         }
                     });
+                    Object.defineProperty(this, "navigation", {
+                        enumerable: true,
+                        configurable: true,
+                        writable: true,
+                        value: SDK.getMaestroEventViewModel().navigation
+                    });
                     Object.defineProperty(this, "setFocus", {
                         enumerable: true,
                         configurable: true,
                         writable: true,
                         value: (focusKey) => {
-                            if (!SpatialNavigation.isNativeMode()) {
-                                SpatialNavigation.setFocus(focusKey);
+                            if (!this.navigation.isNativeMode()) {
+                                this.navigation.setFocus(focusKey);
                             }
                         }
                     });
@@ -42,14 +49,14 @@ const withFocusable = ({ forgetLastFocusedChild: configForgetLastFocusedChild =
                         enumerable: true,
                         configurable: true,
                         writable: true,
-                        value: SpatialNavigation.navigateByDirection
+                        value: this.navigation.navigateByDirection
                     });
                     Object.defineProperty(this, "stealFocus", {
                         enumerable: true,
                         configurable: true,
                         writable: true,
                         value: () => {
-                            SpatialNavigation.setFocus(this.state.realFocusKey, {
+                            this.navigation.setFocus(this.state.realFocusKey, {
                                 focusKey: this.state.realFocusKey,
                             });
                         }
@@ -134,7 +141,7 @@ const withFocusable = ({ forgetLastFocusedChild: configForgetLastFocusedChild =
                     const { realFocusKey: focusKey, parentFocusKey } = this.state;
                     const { preferredChildFocusKey, forgetLastFocusedChild = false, trackChildren, focusable = true, autoRestoreFocus = true, blockNavigationOut = false, } = this.props;
                     let node;
-                    if (SpatialNavigation.isNativeMode()) {
+                    if (this.navigation.isNativeMode()) {
                         node = document.createElement('div');
                     }
                     else {
@@ -144,7 +151,7 @@ const withFocusable = ({ forgetLastFocusedChild: configForgetLastFocusedChild =
                         }
                         node = domNode;
                     }
-                    SpatialNavigation.addFocusable({
+                    this.navigation.addFocusable({
                         focusKey,
                         node,
                         parentFocusKey,
@@ -170,7 +177,7 @@ const withFocusable = ({ forgetLastFocusedChild: configForgetLastFocusedChild =
                     const { realFocusKey: focusKey } = this.state;
                     const { preferredChildFocusKey, focusable = true, blockNavigationOut = false, } = this.props;
                     let node;
-                    if (SpatialNavigation.isNativeMode()) {
+                    if (this.navigation.isNativeMode()) {
                         node = document.createElement('div');
                     }
                     else {
@@ -180,7 +187,7 @@ const withFocusable = ({ forgetLastFocusedChild: configForgetLastFocusedChild =
                         }
                         node = domNode;
                     }
-                    SpatialNavigation.updateFocusable(focusKey, {
+                    this.navigation.updateFocusable(focusKey, {
                         node,
                         preferredChildFocusKey,
                         focusable,
@@ -189,7 +196,7 @@ const withFocusable = ({ forgetLastFocusedChild: configForgetLastFocusedChild =
                 }
                 componentWillUnmount() {
                     const { realFocusKey: focusKey } = this.state;
-                    SpatialNavigation.removeFocusable({ focusKey });
+                    this.navigation.removeFocusable({ focusKey });
                 }
                 render() {
                     const props = {