@maestro_io/maestro-web-sdk 4.0.2 → 5.1.0

package/dist/src/components/core/ScrollableContainer/ScrollableContainer.js

@@ -1,7 +1,14 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { useState, useRef, useCallback, useMemo } from 'react';
 import './ScrollableContainer.styles.css';
 const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+/**
+ * Context for ScrollableContainer
+ */
+export const ScrollableContainerContext = React.createContext({
+    setRef: () => { },
+    removeRef: () => { },
+    scrollToFocusedElement: () => { },
+});
 /**
  * ScrollableContainer component provides a context for focusable items
  * that allows them to register themselves and handle scrolling
@@ -15,155 +22,90 @@ const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
  * </ScrollableContainer>
  * ```
  */
-class ScrollableContainer extends React.Component {
-    constructor() {
-        super(...arguments);
-        Object.defineProperty(this, "refsMap", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: []
+export const ScrollableContainer = ({ children, scrollableContainerRef, containerTopOffset = 0, ...rest }) => {
+    const [scrolled, setScrolled] = useState(false);
+    const refsSet = useRef(new Set());
+    const hashRef = useRef('');
+    const lastHashRef = useRef('');
+    const sortedRefsCache = useRef([]);
+    const setRef = useCallback((ref) => {
+        refsSet.current.add(ref);
+        hashRef.current = Math.random().toString(36).substring(2, 15);
+    }, []);
+    const removeRef = useCallback((ref) => {
+        refsSet.current.delete(ref);
+        hashRef.current = Math.random().toString(36).substring(2, 15);
+    }, []);
+    const getOrderedRefs = useCallback(() => {
+        if (hashRef.current === lastHashRef.current) {
+            return sortedRefsCache.current;
+        }
+        const refsArray = Array.from(refsSet.current);
+        sortedRefsCache.current = refsArray.sort((a, b) => {
+            if (!scrollableContainerRef)
+                return 0;
+            const containerRect = scrollableContainerRef.getBoundingClientRect();
+            const aRect = a ? a.getBoundingClientRect() : { top: 0, bottom: 0 };
+            const bRect = b ? b.getBoundingClientRect() : { top: 0, bottom: 0 };
+            // Calculate the actual distance from container top (positive means below, negative means above)
+            const aDistance = aRect.top - containerRect.top;
+            const bDistance = bRect.top - containerRect.top;
+            return aDistance - bDistance;
         });
-        Object.defineProperty(this, "hash", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: ''
-        });
-        Object.defineProperty(this, "lastHash", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: ''
-        });
-        Object.defineProperty(this, "state", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {
-                scrolled: false,
+        lastHashRef.current = hashRef.current;
+        return sortedRefsCache.current;
+    }, [scrollableContainerRef]);
+    /**
+     * @description - Scrolls the container to the focused element if necessary
+     */
+    const scrollToFocusedElement = useCallback(async (layout, options) => {
+        if (!scrollableContainerRef || !layout.node)
+            return;
+        const offsetTop = options?.offsetTop || 0;
+        const refs = getOrderedRefs();
+        // Wait for the next frame to ensure the layout is updated
+        if (process.env.NODE_ENV !== 'test') {
+            await wait(0);
+        }
+        const containerRect = scrollableContainerRef.getBoundingClientRect();
+        const nodeRect = layout.node.getBoundingClientRect();
+        let index = -1;
+        for (let i = refs.length - 1; i >= 0; i--) {
+            if (refs[i].contains(layout.node)) {
+                index = i;
+                break;
             }
-        });
-        Object.defineProperty(this, "setRef", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (ref) => {
-                this.refsMap.push(ref);
-                this.hash = Math.random().toString(36).substring(2, 15);
+        }
+        if (index === -1) {
+            console.warn('Element not found in refsMap to focus to. Register the element wrapping it with <FocusableItem />');
+            return;
+        }
+        let hasOutside = false;
+        refs.slice(index).forEach((el) => {
+            const rect = el.getBoundingClientRect();
+            if (rect.bottom > containerRect.bottom ||
+                rect.top < containerRect.top) {
+                hasOutside = true;
             }
         });
-        Object.defineProperty(this, "getOrderedRefs", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                if (this.hash === this.lastHash) {
-                    return this.refsMap;
-                }
-                this.refsMap = this.refsMap.sort((a, b) => {
-                    if (!this.props.scrollableContainerRef)
-                        return 0;
-                    const containerRect = this.props.scrollableContainerRef.getBoundingClientRect();
-                    const aRect = a ? a.getBoundingClientRect() : { top: 0, bottom: 0 };
-                    const bRect = b ? b.getBoundingClientRect() : { top: 0, bottom: 0 };
-                    // Calculate the actual distance from container top (positive means below, negative means above)
-                    const aDistance = aRect.top - containerRect.top;
-                    const bDistance = bRect.top - containerRect.top;
-                    return aDistance - bDistance;
-                });
-                this.lastHash = this.hash;
-                return this.refsMap;
-            }
-        });
-        /**
-         * @description - Scrolls the container to the focused element if necessary
-         */
-        Object.defineProperty(this, "scrollToFocusedElement", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: async (layout, options) => {
-                if (!this.props.scrollableContainerRef || !layout.node)
-                    return;
-                const offsetTop = options?.offsetTop || 0;
-                const refs = this.getOrderedRefs();
-                // Wait for the next frame to ensure the layout is updated
-                if (process.env.NODE_ENV !== 'test') {
-                    await wait(0);
-                }
-                const containerRect = this.props.scrollableContainerRef.getBoundingClientRect();
-                const nodeRect = layout.node.getBoundingClientRect();
-                let index = -1;
-                for (let i = refs.length - 1; i >= 0; i--) {
-                    if (refs[i].contains(layout.node)) {
-                        index = i;
-                        break;
-                    }
-                }
-                if (index === -1) {
-                    console.warn('Element not found in refsMap to focus to. Register the element wrapping it with <FocusableItem />');
-                    return;
-                }
-                let hasOutside = false;
-                refs.slice(index).forEach((el) => {
-                    const rect = el.getBoundingClientRect();
-                    if (rect.bottom > containerRect.bottom || rect.top < containerRect.top) {
-                        hasOutside = true;
-                    }
-                });
-                if (!hasOutside)
-                    return;
-                const target = index === 0
-                    ? 0
-                    : this.props.scrollableContainerRef.scrollTop +
-                        (nodeRect.top -
-                            containerRect.top -
-                            (this.props.containerTopOffset || 0) -
-                            offsetTop);
-                this.props.scrollableContainerRef.scrollTop = target;
-                const newScrolled = target > 0;
-                if (this.state.scrolled !== newScrolled) {
-                    this.setState({ scrolled: newScrolled });
-                }
-            }
+        if (!hasOutside)
+            return;
+        const target = index === 0
+            ? 0
+            : scrollableContainerRef.scrollTop +
+                (nodeRect.top - containerRect.top - containerTopOffset - offsetTop);
+        scrollableContainerRef.scrollTop = target;
+        setScrolled((prev) => {
+            const newScrolled = target > 0;
+            return prev !== newScrolled ? newScrolled : prev;
         });
-    }
-    getChildContext() {
-        return {
-            refsMap: this.refsMap,
-            setRef: this.setRef,
-            scrollToFocusedElement: this.scrollToFocusedElement,
-        };
-    }
-    componentWillUnmount() {
-        this.refsMap = [];
-        this.hash = '';
-        this.lastHash = '';
-    }
-    render() {
-        const { scrollableContainerRef: _, containerTopOffset: __, ...rest } = this.props;
-        return (React.createElement("div", { className: "scrollable-container", "data-scrolled": this.state.scrolled, ...rest }, this.props.children));
-    }
-}
-Object.defineProperty(ScrollableContainer, "childContextTypes", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: {
-        refsMap: PropTypes.arrayOf(PropTypes.instanceOf(HTMLElement)),
-        setRef: PropTypes.func,
-        scrollToFocusedElement: PropTypes.func,
-    }
-});
-export const DEFAULT_SCROLLABLE_CONTAINER_CONTEXT = {
-    setRef: (_) => { },
-    scrollToFocusedElement: () => { },
-    refsMap: [],
-};
-export const SCROLLABLE_CONTEXT_TYPE = {
-    refsMap: PropTypes.arrayOf(PropTypes.instanceOf(HTMLElement)),
-    setRef: PropTypes.func,
-    scrollToFocusedElement: PropTypes.func,
+    }, [scrollableContainerRef, containerTopOffset, getOrderedRefs]);
+    const contextValue = useMemo(() => ({
+        setRef,
+        removeRef,
+        scrollToFocusedElement,
+    }), [setRef, removeRef, scrollToFocusedElement]);
+    return (React.createElement(ScrollableContainerContext.Provider, { value: contextValue },
+        React.createElement("div", { className: "scrollable-container", "data-scrolled": scrolled, ...rest }, children)));
 };
 export default ScrollableContainer;

package/dist/src/components/core/ScrollableContainer/index.d.ts

@@ -1,2 +1,6 @@
 import ScrollableContainer from './ScrollableContainer';
+export { ScrollableContainerContext } from './ScrollableContainer';
+export { useScrollableContainer } from './useScrollableContainer';
+export { default as FocusableItem } from './FocusableItem';
+export type { ScrollableContainerContextType } from './ScrollableContainer';
 export default ScrollableContainer;

package/dist/src/components/core/ScrollableContainer/index.js

@@ -1,2 +1,5 @@
 import ScrollableContainer from './ScrollableContainer';
+export { ScrollableContainerContext } from './ScrollableContainer';
+export { useScrollableContainer } from './useScrollableContainer';
+export { default as FocusableItem } from './FocusableItem';
 export default ScrollableContainer;

package/dist/src/components/core/ScrollableContainer/useScrollableContainer.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Custom hook to access the ScrollableContainer context.
+ * Use this hook in components that need to interact with the scrollable container.
+ *
+ * @example
+ * ```tsx
+ * const { scrollToFocusedElement } = useScrollableContainer();
+ *
+ * const handleFocus = (layout: Layout) => {
+ *   scrollToFocusedElement(layout, { offsetTop: 20 });
+ * };
+ * ```
+ */
+export declare const useScrollableContainer: () => import("./ScrollableContainer").ScrollableContainerContextType;

package/dist/src/components/core/ScrollableContainer/useScrollableContainer.js

@@ -0,0 +1,22 @@
+import { useContext } from 'react';
+import { ScrollableContainerContext } from './ScrollableContainer';
+/**
+ * Custom hook to access the ScrollableContainer context.
+ * Use this hook in components that need to interact with the scrollable container.
+ *
+ * @example
+ * ```tsx
+ * const { scrollToFocusedElement } = useScrollableContainer();
+ *
+ * const handleFocus = (layout: Layout) => {
+ *   scrollToFocusedElement(layout, { offsetTop: 20 });
+ * };
+ * ```
+ */
+export const useScrollableContainer = () => {
+    const context = useContext(ScrollableContainerContext);
+    if (!context) {
+        throw new Error('useScrollableContainer must be used within a ScrollableContainer');
+    }
+    return context;
+};

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

@@ -10,11 +10,12 @@ declare const _default: {
             parentFocusKey: string;
         };
         setFocus: (focusKey: string) => void;
-        navigateByDirection: (direction: import("../../../external/spatial-navigation/utils").Direction, details?: Record<string, any>) => void;
+        navigateByDirection: (direction: import("../../../external/spatial-navigation/utils").Direction, details?: import("../../../external/spatial-navigation/utils").Details) => void;
         stealFocus: () => void;
         onUpdateFocus: (focused: boolean) => void;
         onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
         onEnterPressHandler: (details: import("../../../external/spatial-navigation/utils").Details) => void;
+        onClickPressHandler: (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;
@@ -50,11 +51,12 @@ declare const _default: {
             parentFocusKey: string;
         };
         setFocus: (focusKey: string) => void;
-        navigateByDirection: (direction: import("../../../external/spatial-navigation/utils").Direction, details?: Record<string, any>) => void;
+        navigateByDirection: (direction: import("../../../external/spatial-navigation/utils").Direction, details?: import("../../../external/spatial-navigation/utils").Details) => void;
         stealFocus: () => void;
         onUpdateFocus: (focused: boolean) => void;
         onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
         onEnterPressHandler: (details: import("../../../external/spatial-navigation/utils").Details) => void;
+        onClickPressHandler: (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;

package/dist/src/components/molecules/ActionButton/ActionButton.js

@@ -4,7 +4,12 @@ import { withFocusable, } from '@/external/spatial-navigation';
 import React from 'react';
 class ActionButton extends React.Component {
     render() {
-        return (React.createElement(BaseButton, { className: "action-button T05_ALT", ...this.props }, this.props.children));
+        const { children, 
+        // spatial-navigation props (must not hit DOM)
+        focused: _focused, focusKey: _focusKey, parentFocusKey: _parentFocusKey, preferredChildFocusKey: _preferredChildFocusKey, forgetLastFocusedChild: _forgetLastFocusedChild, trackChildren: _trackChildren, autoRestoreFocus: _autoRestoreFocus, blockNavigationOut: _blockNavigationOut, hasFocusedChild: _hasFocusedChild, focusable: _focusable, onEnterPress: _onEnterPress, onEnterRelease: _onEnterRelease, onBackPress: _onBackPress, onArrowPress: _onArrowPress, onBecameFocused: _onBecameFocused, onBecameBlurred: _onBecameBlurred, 
+        // injected/internal props (also must not hit DOM)
+        realFocusKey: _realFocusKey, setFocus: _setFocus, navigateByDirection: _navigateByDirection, stealFocus: _stealFocus, onUpdateFocus: _onUpdateFocus, onUpdateHasFocusedChild: _onUpdateHasFocusedChild, ...buttonProps } = this.props;
+        return (React.createElement(BaseButton, { className: "action-button T05_ALT", ...buttonProps }, children));
     }
 }
 export default withFocusable()(ActionButton);

package/dist/src/components/molecules/HeadshotImage/HeadshotImage.js

@@ -39,7 +39,7 @@ class HeadshotImage extends React.Component {
         this.mounted = false;
     }
     render() {
-        return (React.createElement("div", null,
+        return (React.createElement(React.Fragment, null,
             !this.state.loaded && (React.createElement(Image, { crossOrigin: "anonymous", ...this.props, src: BASE_64_HEADSHOT_THUMBNAIL_FALLBACK, alt: "Player Headshot Loading" })),
             React.createElement(Image, { crossOrigin: "anonymous", onLoad: this.onLoad, alt: "Athlete Thumbnail", style: {
                     ...(this.props.style || {}),

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

@@ -20,11 +20,12 @@ declare const _default: {
             parentFocusKey: string;
         };
         setFocus: (focusKey: string) => void;
-        navigateByDirection: (direction: import("../../../external/spatial-navigation/utils").Direction, details?: Record<string, any>) => void;
+        navigateByDirection: (direction: import("../../../external/spatial-navigation/utils").Direction, details?: import("../../../external/spatial-navigation/utils").Details) => void;
         stealFocus: () => void;
         onUpdateFocus: (focused: boolean) => void;
         onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
         onEnterPressHandler: (details: import("../../../external/spatial-navigation/utils").Details) => void;
+        onClickPressHandler: (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;
@@ -60,11 +61,12 @@ declare const _default: {
             parentFocusKey: string;
         };
         setFocus: (focusKey: string) => void;
-        navigateByDirection: (direction: import("../../../external/spatial-navigation/utils").Direction, details?: Record<string, any>) => void;
+        navigateByDirection: (direction: import("../../../external/spatial-navigation/utils").Direction, details?: import("../../../external/spatial-navigation/utils").Details) => void;
         stealFocus: () => void;
         onUpdateFocus: (focused: boolean) => void;
         onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
         onEnterPressHandler: (details: import("../../../external/spatial-navigation/utils").Details) => void;
+        onClickPressHandler: (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;

package/dist/src/components/molecules/PanelNavButton/PanelNavButton.js

@@ -15,7 +15,7 @@ class PanelNavButton extends React.Component {
             } },
             React.createElement(BaseButton, null,
                 React.createElement(Icon, { iconName: iconName, height: 36, width: 36 })),
-            React.createElement("div", { className: "FONT_BOLD" }, children)));
+            React.createElement("div", { className: "panel-nav-label FONT_BOLD" }, children)));
     }
 }
 Object.defineProperty(PanelNavButton, "displayName", {

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

@@ -10,11 +10,12 @@ declare const _default: {
             parentFocusKey: string;
         };
         setFocus: (focusKey: string) => void;
-        navigateByDirection: (direction: import("../../../external/spatial-navigation/utils").Direction, details?: Record<string, any>) => void;
+        navigateByDirection: (direction: import("../../../external/spatial-navigation/utils").Direction, details?: import("../../../external/spatial-navigation/utils").Details) => void;
         stealFocus: () => void;
         onUpdateFocus: (focused: boolean) => void;
         onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
         onEnterPressHandler: (details: import("../../../external/spatial-navigation/utils").Details) => void;
+        onClickPressHandler: (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;
@@ -50,11 +51,12 @@ declare const _default: {
             parentFocusKey: string;
         };
         setFocus: (focusKey: string) => void;
-        navigateByDirection: (direction: import("../../../external/spatial-navigation/utils").Direction, details?: Record<string, any>) => void;
+        navigateByDirection: (direction: import("../../../external/spatial-navigation/utils").Direction, details?: import("../../../external/spatial-navigation/utils").Details) => void;
         stealFocus: () => void;
         onUpdateFocus: (focused: boolean) => void;
         onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
         onEnterPressHandler: (details: import("../../../external/spatial-navigation/utils").Details) => void;
+        onClickPressHandler: (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;

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

@@ -1,8 +1,5 @@
-/// <reference types="prop-types" />
 import React from 'react';
 import './SegmentController.styles.css';
-import { Direction, Layout } from '@/external/spatial-navigation/utils';
-import { WithFocusableProps } from '@/external/spatial-navigation';
 export type SegmentItem = {
     title: string;
     onEnter: () => void;
@@ -11,20 +8,5 @@ interface SegmentControllerProps {
     backgroundColor?: string;
     items: SegmentItem[];
 }
-declare class SegmentController extends React.Component<SegmentControllerProps> {
-    context: import("@/components/core/ScrollableContainer/ScrollableContainer").ScrollableContainerContextType;
-    static contextTypes: {
-        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;
-        lastActiveIndex: number;
-    };
-    onBecameFocused: (item: SegmentItem, i: number) => (layout: Layout) => void;
-    onEnterPress: (item: SegmentItem) => () => void;
-    handleArrowPress: (index: number) => (direction: Direction, _props: WithFocusableProps) => void;
-    render(): JSX.Element;
-}
+declare const SegmentController: React.FC<SegmentControllerProps>;
 export default SegmentController;

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

@@ -1,76 +1,35 @@
-import React from 'react';
+import React, { useState } 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 { useScrollableContainer } from '@/components/core/ScrollableContainer';
 import SDK from '@/index';
-class SegmentController extends React.Component {
-    constructor() {
-        super(...arguments);
-        Object.defineProperty(this, "context", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: DEFAULT_SCROLLABLE_CONTAINER_CONTEXT
-        });
-        Object.defineProperty(this, "state", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {
-                activeIndex: 0,
-                lastActiveIndex: 0,
-            }
-        });
-        Object.defineProperty(this, "onBecameFocused", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (item, i) => (layout) => {
-                if (this.state.lastActiveIndex !== i &&
-                    this.state.lastActiveIndex !== null) {
-                    SDK.getMaestroEventViewModel().navigation.setFocus(`segment-controller-${this.state.lastActiveIndex}`);
-                    return;
-                }
-                this.setState({
-                    activeIndex: i,
-                    lastActiveIndex: null,
-                });
-                item.onEnter();
-                this.context.scrollToFocusedElement(layout);
-            }
-        });
-        Object.defineProperty(this, "onEnterPress", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (item) => () => {
-                item.onEnter();
-            }
-        });
-        Object.defineProperty(this, "handleArrowPress", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (index) => (direction, _props) => {
-                if (direction === 'down' || direction === 'up') {
-                    this.setState({ lastActiveIndex: this.state.activeIndex });
-                }
-                if (direction === 'left' && index === 0) {
-                    SDK.getMaestroEventViewModel().deliverFocus();
-                }
-            }
-        });
-    }
-    render() {
-        return (React.createElement("div", { className: "segment-controller", style: {
-                backgroundColor: this.props.backgroundColor,
-            } }, this.props.items.map((item, index) => (React.createElement(SegmentButton, { focusKey: `segment-controller-${index}`, key: item.title, onBecameFocused: this.onBecameFocused(item, index), onArrowPress: this.handleArrowPress(index), onEnterPress: this.onEnterPress(item), active: this.state.activeIndex === index }, item.title)))));
-    }
-}
-Object.defineProperty(SegmentController, "contextTypes", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: SCROLLABLE_CONTEXT_TYPE
-});
+const SegmentController = ({ backgroundColor, items, }) => {
+    const { scrollToFocusedElement } = useScrollableContainer();
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [lastActiveIndex, setLastActiveIndex] = useState(0);
+    const onBecameFocused = (item, i) => (layout) => {
+        if (lastActiveIndex !== i && lastActiveIndex !== null) {
+            SDK.getMaestroEventViewModel().navigation.setFocus(`segment-controller-${lastActiveIndex}`);
+            return;
+        }
+        setActiveIndex(i);
+        setLastActiveIndex(null);
+        item.onEnter();
+        scrollToFocusedElement(layout);
+    };
+    const onEnterPress = (item) => () => {
+        item.onEnter();
+    };
+    const handleArrowPress = (index) => (direction, _props) => {
+        if (direction === 'down' || direction === 'up') {
+            setLastActiveIndex(activeIndex);
+        }
+        if (direction === 'left' && index === 0) {
+            SDK.getMaestroEventViewModel().deliverFocus();
+        }
+    };
+    return (React.createElement("div", { className: "segment-controller", style: {
+            backgroundColor,
+        } }, items.map((item, index) => (React.createElement(SegmentButton, { focusKey: `segment-controller-${index}`, key: item.title, onBecameFocused: onBecameFocused(item, index), onArrowPress: handleArrowPress(index), onEnterPress: onEnterPress(item), active: activeIndex === index }, item.title)))));
+};
 export default SegmentController;

package/dist/src/development/MaestroEventDelegate.js

@@ -1,5 +1,5 @@
 import SDK from '..';
-import { KEY_PLAYS_RESPONSE_MOCK_DATA } from '../modules/key-plays/constants';
+import { KEY_PLAYS_RESPONSE_MOCK_DATA } from '../modules/espn/key-plays/constants';
 const playbackProgressIntervals = {};
 let keyPlayClipError = true;
 const LOGGED_IN_USER_SWID = '{45636D22-B82E-494E-B0BD-DBF25AB34BB5}';

package/dist/src/development/development.js

@@ -20,7 +20,10 @@ const EVENT_ID = '401790363'; // fallback
  */
 const init = async () => {
     const keyplays = await (await fetch(`https://site.api.espn.com/apis/site/v2/sports/keyplays/${EVENT_ID}`)).json();
-    await SDK.userDidStartWatchingEvent(EVENT_ID, eventDelegate);
+    await SDK.userDidStartWatchingEvent({
+        eventId: EVENT_ID,
+        delegate: eventDelegate,
+    });
     SDK.getMaestroEventViewModel().startFocusManagement();
     await SDK.getMaestroEventViewModel().updateKeyPlaysData(keyplays);
     setTimeout(async () => {

package/dist/src/external/ReactRenderer.js

@@ -52,10 +52,11 @@ class ReactRenderer {
                 ReactDOM.render(children, el);
             },
             unmount: () => {
-                const el = document.getElementById(id);
-                if (el) {
-                    ReactDOM.unmountComponentAtNode(el);
-                }
+                // Use the captured element reference so unmount still works even if
+                // the node was detached from the DOM.
+                ReactDOM.unmountComponentAtNode(el);
+                // Defensive cleanup in case any nodes remain.
+                el.innerHTML = '';
             },
         };
         this.renderersMap.set(id, renderer);