@maestro_io/maestro-web-sdk 4.0.0-beta.2 → 4.0.0-beta.4

package/dist/src/components/molecules/HeadshotImage/HeadshotImage.d.ts

@@ -11,6 +11,6 @@ declare class HeadshotImage extends React.Component<HeadshotImageProps> {
     componentDidMount(): void;
     componentWillUnmount(): void;
     onLoad: () => void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default HeadshotImage;

package/dist/src/components/molecules/Overlay/Overlay.d.ts

@@ -29,6 +29,6 @@ declare class Overlay extends React.Component<OverlayProps, OverlayState> {
     get overlayMetadata(): string;
     private trackOverlayViewed;
     onLoadRiveInstance: (riveInstance: any | null) => void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default Overlay;

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

@@ -13,7 +13,7 @@ type PanelNavButtonProps = {
     width: string;
 };
 declare const _default: {
-    new (props?: (PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps) | undefined, context?: any): {
+    new (props: (PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps) | Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>): {
         state: import("../../../external/spatial-navigation/withFocusable").WithFocusableState;
         navigation: import("../../../external/spatial-navigation/spatialNavigation").default;
         getChildContext(): {
@@ -33,20 +33,65 @@ declare const _default: {
         componentDidMount(): void;
         componentDidUpdate(): void;
         componentWillUnmount(): void;
-        render(): React.ReactElement<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>;
-        setState<K extends keyof import("../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps) => import("../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../external/spatial-navigation/withFocusable").WithFocusableState, K>) | Pick<import("../../../external/spatial-navigation/withFocusable").WithFocusableState, K>, callback?: (() => any) | undefined): void;
-        forceUpdate(callBack?: (() => any) | undefined): void;
-        props: Readonly<{
-            children?: React.ReactNode;
-        }> & Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>;
+        render(): React.ReactElement<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps, string | React.JSXElementConstructor<any>>;
         context: any;
+        setState<K extends keyof import("../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>) => import("../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null) | Pick<import("../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
         refs: {
             [key: string]: React.ReactInstance;
         };
+        shouldComponentUpdate?(nextProps: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>, prevState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
         componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    new (props: PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps, context: any): {
+        state: import("../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../external/spatial-navigation/spatialNavigation").default;
+        getChildContext(): {
+            parentFocusKey: string;
+        };
+        setFocus: (focusKey: string) => void;
+        navigateByDirection: (direction: import("../../../external/spatial-navigation/utils").Direction, details?: Record<string, any>) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: import("../../../external/spatial-navigation/utils").Details) => void;
+        onEnterReleaseHandler: () => void;
+        onBackPressHandler: (details: import("../../../external/spatial-navigation/utils").Details) => void;
+        onArrowPressHandler: (direction: import("../../../external/spatial-navigation/utils").Direction, details: import("../../../external/spatial-navigation/utils").Details) => boolean | void;
+        onBecameFocusedHandler: (layout: import("../../../external/spatial-navigation/utils").Layout, details: import("../../../external/spatial-navigation/utils").Details) => void;
+        onBecameBlurredHandler: (layout: import("../../../external/spatial-navigation/utils").Layout, details: import("../../../external/spatial-navigation/utils").Details) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): React.ReactElement<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps, string | React.JSXElementConstructor<any>>;
+        context: any;
+        setState<K extends keyof import("../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>) => import("../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null) | Pick<import("../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
         shouldComponentUpdate?(nextProps: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>, prevState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<PanelNavButtonProps & import("@/external/spatial-navigation").WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
     };
     contextTypes: {
         parentFocusKey: import("prop-types").Requireable<string>;
@@ -54,5 +99,6 @@ declare const _default: {
     childContextTypes: {
         parentFocusKey: import("prop-types").Requireable<string>;
     };
+    contextType?: React.Context<any> | undefined;
 };
 export default _default;

package/dist/src/components/molecules/TabLoadError/TabLoadError.d.ts

@@ -3,7 +3,7 @@ import { WithFocusableProps } from '@/external/spatial-navigation';
 import React from 'react';
 import './TabLoadError.styles.css';
 declare const _default: {
-    new (props?: (object & WithFocusableProps) | undefined, context?: any): {
+    new (props: (object & WithFocusableProps) | Readonly<object & WithFocusableProps>): {
         state: import("../../../external/spatial-navigation/withFocusable").WithFocusableState;
         navigation: import("../../../external/spatial-navigation/spatialNavigation").default;
         getChildContext(): {
@@ -23,20 +23,65 @@ declare const _default: {
         componentDidMount(): void;
         componentDidUpdate(): void;
         componentWillUnmount(): void;
-        render(): React.ReactElement<object & WithFocusableProps>;
-        setState<K extends keyof import("../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: object & WithFocusableProps) => import("../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../external/spatial-navigation/withFocusable").WithFocusableState, K>) | Pick<import("../../../external/spatial-navigation/withFocusable").WithFocusableState, K>, callback?: (() => any) | undefined): void;
-        forceUpdate(callBack?: (() => any) | undefined): void;
-        props: Readonly<{
-            children?: React.ReactNode;
-        }> & Readonly<object & WithFocusableProps>;
+        render(): React.ReactElement<object & WithFocusableProps, string | React.JSXElementConstructor<any>>;
         context: any;
+        setState<K extends keyof import("../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: Readonly<object & WithFocusableProps>) => import("../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null) | Pick<import("../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<object & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
         refs: {
             [key: string]: React.ReactInstance;
         };
+        shouldComponentUpdate?(nextProps: Readonly<object & WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<object & WithFocusableProps>, prevState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
         componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<object & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<object & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<object & WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<object & WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    new (props: object & WithFocusableProps, context: any): {
+        state: import("../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../external/spatial-navigation/spatialNavigation").default;
+        getChildContext(): {
+            parentFocusKey: string;
+        };
+        setFocus: (focusKey: string) => void;
+        navigateByDirection: (direction: import("../../../external/spatial-navigation/utils").Direction, details?: Record<string, any>) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: import("../../../external/spatial-navigation/utils").Details) => void;
+        onEnterReleaseHandler: () => void;
+        onBackPressHandler: (details: import("../../../external/spatial-navigation/utils").Details) => void;
+        onArrowPressHandler: (direction: import("../../../external/spatial-navigation/utils").Direction, details: import("../../../external/spatial-navigation/utils").Details) => boolean | void;
+        onBecameFocusedHandler: (layout: import("../../../external/spatial-navigation/utils").Layout, details: import("../../../external/spatial-navigation/utils").Details) => void;
+        onBecameBlurredHandler: (layout: import("../../../external/spatial-navigation/utils").Layout, details: import("../../../external/spatial-navigation/utils").Details) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): React.ReactElement<object & WithFocusableProps, string | React.JSXElementConstructor<any>>;
+        context: any;
+        setState<K extends keyof import("../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: Readonly<object & WithFocusableProps>) => import("../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null) | Pick<import("../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<object & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
         shouldComponentUpdate?(nextProps: Readonly<object & WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<object & WithFocusableProps>, prevState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<object & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<object & WithFocusableProps>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<object & WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<object & WithFocusableProps>, nextState: Readonly<import("../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
     };
     contextTypes: {
         parentFocusKey: import("prop-types").Requireable<string>;
@@ -44,5 +89,6 @@ declare const _default: {
     childContextTypes: {
         parentFocusKey: import("prop-types").Requireable<string>;
     };
+    contextType?: React.Context<any> | undefined;
 };
 export default _default;

package/dist/src/components/molecules/WatchButton/WatchButton.d.ts

@@ -5,6 +5,6 @@ interface WatchButtonProps extends HTMLAttributes<HTMLButtonElement> {
 }
 declare class WatchButton extends React.Component<WatchButtonProps> {
     constructor(props: WatchButtonProps);
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default WatchButton;

package/dist/src/components/organisms/PanelNavigation/PanelNavigation.d.ts

@@ -11,6 +11,6 @@ interface PanelNavigationProps {
 }
 declare class PanelNavigation extends React.Component<PanelNavigationProps> {
     handleBecameFocused: (index: number) => () => void;
-    render(): React.JSX.Element | null;
+    render(): JSX.Element | null;
 }
 export default PanelNavigation;

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

@@ -1,3 +1,4 @@
+/// <reference types="prop-types" />
 import React from 'react';
 import './SegmentController.styles.css';
 import { Direction, Layout } from '@/external/spatial-navigation/utils';
@@ -13,9 +14,9 @@ interface SegmentControllerProps {
 declare class SegmentController extends React.Component<SegmentControllerProps> {
     context: import("@/components/core/ScrollableContainer/ScrollableContainer").ScrollableContainerContextType;
     static contextTypes: {
-        refsMap: React.Requireable<any>;
-        setRef: React.Requireable<any>;
-        scrollToFocusedElement: React.Requireable<any>;
+        refsMap: import("prop-types").Requireable<(HTMLElement | null | undefined)[]>;
+        setRef: import("prop-types").Requireable<(...args: any[]) => any>;
+        scrollToFocusedElement: import("prop-types").Requireable<(...args: any[]) => any>;
     };
     state: {
         activeIndex: number;
@@ -24,6 +25,6 @@ declare class SegmentController extends React.Component<SegmentControllerProps>
     onBecameFocused: (item: SegmentItem, i: number) => (layout: Layout) => void;
     onEnterPress: (item: SegmentItem) => () => void;
     handleArrowPress: (index: number) => (direction: Direction, _props: WithFocusableProps) => void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default SegmentController;

package/dist/src/development/TimeSeek.d.ts

@@ -17,6 +17,6 @@ export default class TimeCodeSeek extends React.Component<TimeCodeSeekProps, Tim
     setToNow: () => void;
     resetToGameStart: () => void;
     get timeCode(): number;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export {};

package/dist/src/development/development.js

@@ -1,7 +1,7 @@
+import React from 'react';
 import ReactDOM from 'react-dom';
 import SDK from '..';
 import MaestroEventDelegate from './MaestroEventDelegate';
-import React from 'react';
 import TimeCodeSeek from './TimeSeek';
 const eventDelegate = new MaestroEventDelegate();
 SDK.configure({
@@ -26,8 +26,11 @@ const init = async () => {
     setTimeout(async () => {
         await SDK.renderPanel('panel-manager');
     }, 0);
-    ReactDOM.render(React.createElement("div", null,
-        React.createElement("div", { id: "panel-manager" }),
-        React.createElement(TimeCodeSeek, { eventId: EVENT_ID })), document.getElementById('root'));
+    const rootElement = document.getElementById('root');
+    if (rootElement) {
+        ReactDOM.render((React.createElement("div", null,
+            React.createElement("div", { id: "panel-manager" }),
+            React.createElement(TimeCodeSeek, { eventId: EVENT_ID }))), rootElement);
+    }
 };
 init();

package/dist/src/external/ReactRenderer.js

@@ -15,14 +15,23 @@ class ReactRenderer {
      * @param options Options for rendering including height and width
      */
     async renderPanel(id) {
+        // Check if there's already a renderer for this ID and clean it up first
+        if (this.renderersMap.has(id)) {
+            const existingRenderer = this.renderersMap.get(id);
+            existingRenderer.unmount();
+            this.renderersMap.delete(id);
+        }
         const renderer = await this.getRenderer(id);
         const App = require('../components/core/App').default;
         const PanelManager = require('../components/core/PanelManager').default;
         renderer.render(React.createElement(App, null,
             React.createElement(PanelManager, null)));
         return () => {
-            renderer.unmount();
-            this.renderersMap.delete(id);
+            // Only unmount if this renderer is still in the map (hasn't been replaced)
+            if (this.renderersMap.has(id) && this.renderersMap.get(id) === renderer) {
+                renderer.unmount();
+                this.renderersMap.delete(id);
+            }
         };
     }
     /**
@@ -43,7 +52,10 @@ class ReactRenderer {
                 ReactDOM.render(children, el);
             },
             unmount: () => {
-                ReactDOM.unmountComponentAtNode(el);
+                const el = document.getElementById(id);
+                if (el) {
+                    ReactDOM.unmountComponentAtNode(el);
+                }
             },
         };
         this.renderersMap.set(id, renderer);

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

@@ -32,7 +32,7 @@ export interface WithFocusableState {
     parentFocusKey: string;
 }
 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): {
+    new (props: (P & WithFocusableProps) | Readonly<P & WithFocusableProps>): {
         state: WithFocusableState;
         navigation: import("./spatialNavigation").default;
         getChildContext(): {
@@ -52,20 +52,65 @@ declare const withFocusable: <P extends object>({ forgetLastFocusedChild: config
         componentDidMount(): void;
         componentDidUpdate(): void;
         componentWillUnmount(): void;
-        render(): import("react").ReactElement<P & WithFocusableProps>;
-        setState<K extends keyof WithFocusableState>(state: WithFocusableState | ((prevState: Readonly<WithFocusableState>, props: P & WithFocusableProps) => WithFocusableState | Pick<WithFocusableState, K>) | Pick<WithFocusableState, K>, callback?: (() => any) | undefined): void;
-        forceUpdate(callBack?: (() => any) | undefined): void;
-        props: Readonly<{
-            children?: import("react").ReactNode;
-        }> & Readonly<P & WithFocusableProps>;
+        render(): import("react").ReactElement<P & WithFocusableProps, string | import("react").JSXElementConstructor<any>>;
         context: any;
+        setState<K extends keyof WithFocusableState>(state: WithFocusableState | ((prevState: Readonly<WithFocusableState>, props: Readonly<P & WithFocusableProps>) => WithFocusableState | Pick<WithFocusableState, K> | null) | Pick<WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<P & WithFocusableProps> & Readonly<{
+            children?: import("react").ReactNode;
+        }>;
         refs: {
             [key: string]: import("react").ReactInstance;
         };
+        shouldComponentUpdate?(nextProps: Readonly<P & WithFocusableProps>, nextState: Readonly<WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P & WithFocusableProps>, prevState: Readonly<WithFocusableState>): any;
         componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<P & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<P & WithFocusableProps>, nextState: Readonly<WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P & WithFocusableProps>, nextState: Readonly<WithFocusableState>, nextContext: any): void;
+    };
+    new (props: P & WithFocusableProps, context: any): {
+        state: WithFocusableState;
+        navigation: import("./spatialNavigation").default;
+        getChildContext(): {
+            parentFocusKey: string;
+        };
+        setFocus: (focusKey: string) => void;
+        navigateByDirection: (direction: Direction, details?: Record<string, any>) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: Details) => void;
+        onEnterReleaseHandler: () => void;
+        onBackPressHandler: (details: Details) => void;
+        onArrowPressHandler: (direction: Direction, details: Details) => boolean | void;
+        onBecameFocusedHandler: (layout: Layout, details: Details) => void;
+        onBecameBlurredHandler: (layout: Layout, details: Details) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): import("react").ReactElement<P & WithFocusableProps, string | import("react").JSXElementConstructor<any>>;
+        context: any;
+        setState<K extends keyof WithFocusableState>(state: WithFocusableState | ((prevState: Readonly<WithFocusableState>, props: Readonly<P & WithFocusableProps>) => WithFocusableState | Pick<WithFocusableState, K> | null) | Pick<WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<P & WithFocusableProps> & Readonly<{
+            children?: import("react").ReactNode;
+        }>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
         shouldComponentUpdate?(nextProps: Readonly<P & WithFocusableProps>, nextState: Readonly<WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P & WithFocusableProps>, prevState: Readonly<WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<P & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P & WithFocusableProps>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<P & WithFocusableProps>, nextState: Readonly<WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P & WithFocusableProps>, nextState: Readonly<WithFocusableState>, nextContext: any): void;
     };
     contextTypes: {
         parentFocusKey: PropTypes.Requireable<string>;
@@ -73,5 +118,6 @@ declare const withFocusable: <P extends object>({ forgetLastFocusedChild: config
     childContextTypes: {
         parentFocusKey: PropTypes.Requireable<string>;
     };
+    contextType?: import("react").Context<any> | undefined;
 };
 export default withFocusable;

package/dist/src/index.d.ts

@@ -1,4 +1,3 @@
-import { UnmountFn } from './external/ports/renderer';
 import IMaestroEventDelegate, { PanelEvent } from './interfaces/IMaestroEventDelegate';
 import IMaestroManager, { SDKConfigParams } from './interfaces/IMaestroManager';
 import IMaestroEvent from './interfaces/IMaestroEvent';
@@ -47,7 +46,7 @@ declare class MaestroWebSDK implements IMaestroManager {
      * @returns The current event view model
      */
     getMaestroEventViewModel(): MaestroEventViewModel;
-    renderPanel(id: string): Promise<UnmountFn>;
+    renderPanel(id: string): Promise<() => Promise<void>>;
     getPageConfig(): PageConfig | null;
     getGlobalConfig(): GlobalConfig | null;
 }

package/dist/src/index.js

@@ -150,8 +150,8 @@ class MaestroWebSDK {
         await this.analyticsService.pinchBackSessionStart();
         const panelUnmountFn = await this.renderer.renderPanel(id);
         return async () => {
-            panelUnmountFn();
             await this.analyticsService.pinchBackSessionEnd();
+            panelUnmountFn();
         };
     }
     getPageConfig() {

package/dist/src/interfaces/IMaestroEvent.d.ts

@@ -91,14 +91,14 @@ export default interface IMaestroEvent {
      * @description Sets data on panel view models. Interface to pass any data to any panel.
      * @param {Record<string, any>} panelData - Object with panel names as keys and their data as values
      * @example
-     * setPanelData({
+     * setDataToPanel({
      *   [panelType]: {
      *    overrideUrl: 'https://...',
      *    customProperty: 'value'
      *   },
      * })
      */
-    setPanelData(panelData: Record<string, any>): void;
+    setDataToPanel(panelData: Record<string, any>): void;
     simulateUseCase<T = any>(useCase: TestUseCase, panelType: MaestroPanelType, testData?: T): void;
     /**
      * @description Sets the active panel in the Maestro SDK, if the panel is available and not hidden.

package/dist/src/interfaces/IMaestroManager.d.ts

@@ -39,7 +39,7 @@ export default interface IMaestroManager {
     /**
      * Render the PanelManager with the available panels for the current event in the specified HTML id element.
      * @param id - The ID of the HTML element where the panel will be rendered.
-     * @return A Promise that resolves to a function to remove the panel when no longer needed.
+     * @return A Promise that resolves to an async function to remove the panel when no longer needed.
      */
-    renderPanel(id: string): Promise<() => void>;
+    renderPanel(id: string): Promise<() => Promise<void>>;
 }

package/dist/src/modules/bets/view/BetsView.d.ts

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import './BetsView.styles.css';
 import BetsViewModel, { BetItem, BetsErrorState } from '../view-model/BetsViewModel';
 import { Direction } from '@/external/spatial-navigation/utils';
@@ -20,9 +20,9 @@ declare class BetsView extends Component<{}, BetsViewState> {
     get viewModel(): BetsViewModel;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    renderBetItem: (item: BetItem) => React.JSX.Element | null;
+    renderBetItem: (item: BetItem) => JSX.Element | null;
     clearTabLoadFailure: () => void;
     onArrowPress: (d: Direction) => void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default BetsView;

package/dist/src/modules/bets/view/HotProps/HotPropsView.d.ts

@@ -9,7 +9,7 @@ type HotPropsViewProps = {
     hasFocusedChild?: boolean;
 };
 declare const _default: {
-    new (props?: (HotPropsViewProps & WithFocusableProps) | undefined, context?: any): {
+    new (props: (HotPropsViewProps & WithFocusableProps) | Readonly<HotPropsViewProps & WithFocusableProps>): {
         state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState;
         navigation: import("../../../../external/spatial-navigation/spatialNavigation").default;
         getChildContext(): {
@@ -29,20 +29,65 @@ declare const _default: {
         componentDidMount(): void;
         componentDidUpdate(): void;
         componentWillUnmount(): void;
-        render(): React.ReactElement<HotPropsViewProps & WithFocusableProps>;
-        setState<K extends keyof import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: HotPropsViewProps & WithFocusableProps) => import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K>) | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K>, callback?: (() => any) | undefined): void;
-        forceUpdate(callBack?: (() => any) | undefined): void;
-        props: Readonly<{
-            children?: React.ReactNode;
-        }> & Readonly<HotPropsViewProps & WithFocusableProps>;
+        render(): React.ReactElement<HotPropsViewProps & WithFocusableProps, string | React.JSXElementConstructor<any>>;
         context: any;
+        setState<K extends keyof import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: Readonly<HotPropsViewProps & WithFocusableProps>) => import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null) | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<HotPropsViewProps & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
         refs: {
             [key: string]: React.ReactInstance;
         };
+        shouldComponentUpdate?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<HotPropsViewProps & WithFocusableProps>, prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
         componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    new (props: HotPropsViewProps & WithFocusableProps, context: any): {
+        state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../../external/spatial-navigation/spatialNavigation").default;
+        getChildContext(): {
+            parentFocusKey: string;
+        };
+        setFocus: (focusKey: string) => void;
+        navigateByDirection: (direction: Direction, details?: Record<string, any>) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: import("@/external/spatial-navigation/utils").Details) => void;
+        onEnterReleaseHandler: () => void;
+        onBackPressHandler: (details: import("@/external/spatial-navigation/utils").Details) => void;
+        onArrowPressHandler: (direction: Direction, details: import("@/external/spatial-navigation/utils").Details) => boolean | void;
+        onBecameFocusedHandler: (layout: Layout, details: import("@/external/spatial-navigation/utils").Details) => void;
+        onBecameBlurredHandler: (layout: Layout, details: import("@/external/spatial-navigation/utils").Details) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): React.ReactElement<HotPropsViewProps & WithFocusableProps, string | React.JSXElementConstructor<any>>;
+        context: any;
+        setState<K extends keyof import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: Readonly<HotPropsViewProps & WithFocusableProps>) => import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null) | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<HotPropsViewProps & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
         shouldComponentUpdate?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<HotPropsViewProps & WithFocusableProps>, prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
     };
     contextTypes: {
         parentFocusKey: import("prop-types").Requireable<string>;
@@ -50,5 +95,6 @@ declare const _default: {
     childContextTypes: {
         parentFocusKey: import("prop-types").Requireable<string>;
     };
+    contextType?: React.Context<any> | undefined;
 };
 export default _default;

package/dist/src/modules/bets/view/SixPack/SixPackView.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="prop-types" />
 import React from 'react';
 import './SixPackView.style.css';
 import { WithFocusableProps } from '@/external/spatial-navigation';
@@ -8,15 +9,15 @@ type Props = WithFocusableProps & {
 };
 export default class FocusableSixPackViewWrapper extends React.Component<Props> {
     static contextTypes: {
-        refsMap: React.Requireable<any>;
-        setRef: React.Requireable<any>;
-        scrollToFocusedElement: React.Requireable<any>;
+        refsMap: import("prop-types").Requireable<(HTMLElement | null | undefined)[]>;
+        setRef: import("prop-types").Requireable<(...args: any[]) => any>;
+        scrollToFocusedElement: import("prop-types").Requireable<(...args: any[]) => any>;
     };
     context: import("@/components/core/ScrollableContainer/ScrollableContainer").ScrollableContainerContextType;
     onBecameFocused: (layout: Layout) => void;
     onArrowPress: (d: Direction, _props: any) => void;
     get viewModel(): import("../../view-model/BetsViewModel").BetsViewModel;
     onEnterPress: () => void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export {};

package/dist/src/modules/bets/view/UserBets/BetResult/BetResult.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 import './BetResult.styles.css';
 declare const BetResult: ({ children }: {
     children: React.ReactNode;
-}) => React.JSX.Element;
+}) => JSX.Element;
 export default BetResult;