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

package/dist/src/modules/stats/utils/driveSummaryUtils.d.ts

@@ -1,18 +0,0 @@
-import { DrivePlay } from '../interfaces/IStats';
-/**
- * Get ordinal suffix for a number (1st, 2nd, 3rd, 4th, etc.)
- */
-export declare const getOrdinalSuffix: (number: number) => string;
-/**
- * Parse drive description to get individual components
- * Format: "11 PLAYS, 61 YARDS, 5:43"
- */
-export declare const parseDriveDescription: (description: string) => {
-    plays: string;
-    yards: string;
-    time: string;
-};
-/**
- * Format the marquee text for the last play
- */
-export declare const formatLastPlayMarquee: (lastPlay: DrivePlay) => string;

package/dist/src/modules/stats/utils/driveSummaryUtils.js

@@ -1,48 +0,0 @@
-/**
- * Get ordinal suffix for a number (1st, 2nd, 3rd, 4th, etc.)
- */
-export const getOrdinalSuffix = (number) => {
-    const lastTwoDigits = number % 100;
-    if (lastTwoDigits >= 11 && lastTwoDigits <= 13) {
-        return 'th';
-    }
-    const lastDigit = number % 10;
-    switch (lastDigit) {
-        case 1:
-            return 'st';
-        case 2:
-            return 'nd';
-        case 3:
-            return 'rd';
-        default:
-            return 'th';
-    }
-};
-/**
- * Parse drive description to get individual components
- * Format: "11 PLAYS, 61 YARDS, 5:43"
- */
-export const parseDriveDescription = (description) => {
-    if (!description) {
-        return {
-            plays: '0',
-            yards: '0',
-            time: '',
-        };
-    }
-    const parts = description.split(', ');
-    const plays = parts[0]?.split(' ')[0] || '0';
-    const yards = parts[1]?.split(' ')[0] || '0';
-    const time = parts[2] || '';
-    return { plays, yards, time };
-};
-/**
- * Format the marquee text for the last play
- */
-export const formatLastPlayMarquee = (lastPlay) => {
-    if (!lastPlay?.period?.number) {
-        return '';
-    }
-    const ordinalSuffix = getOrdinalSuffix(lastPlay.period.number);
-    return `(${lastPlay.clock.displayValue} - ${lastPlay.period.number}${ordinalSuffix}) (${lastPlay.type.text}) ${lastPlay.text}`;
-};

package/dist/src/modules/stats/utils/renderTeamStatistic.d.ts

@@ -1,20 +0,0 @@
-export interface TeamStatisticProps {
-    statisticName: string;
-    firstDisplayValue: string | number;
-    secondDisplayValue: string | number;
-    awayProgressValue: number;
-    homeProgressValue: number;
-    key?: string | number;
-    classNames?: {
-        container?: string;
-        header?: string;
-        firstValue?: string;
-        secondValue?: string;
-        statisticName?: string;
-    };
-}
-/**
- * Shared utility to render a team statistic with consistent structure
- * This eliminates code duplication between Teams and TeamStatsView components
- */
-export declare const renderTeamStatistic: (props: TeamStatisticProps) => JSX.Element;

package/dist/src/modules/stats/utils/renderTeamStatistic.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import StatsProgressBar from '../view/Teams/StatsProgressBar';
-/**
- * Shared utility to render a team statistic with consistent structure
- * This eliminates code duplication between Teams and TeamStatsView components
- */
-export const renderTeamStatistic = (props) => {
-    const { statisticName, firstDisplayValue, secondDisplayValue, awayProgressValue, homeProgressValue, key, classNames = {}, } = props;
-    const { container = 'team-stat-item', header = 'stat-header', firstValue = 'stat-value away-value', secondValue = 'stat-value home-value', statisticName: statisticNameClass = 'stat-name', } = classNames;
-    return (React.createElement("div", { key: key, className: container },
-        React.createElement("div", { className: header },
-            React.createElement("span", { className: firstValue }, firstDisplayValue),
-            React.createElement("span", { className: statisticNameClass }, statisticName),
-            React.createElement("span", { className: secondValue }, secondDisplayValue)),
-        React.createElement(StatsProgressBar, { awayTeamValue: awayProgressValue, homeTeamValue: homeProgressValue })));
-};

package/dist/src/modules/stats/utils.d.ts

@@ -1,39 +0,0 @@
-/**
- * Utility functions for stats module
- */
-export interface Point {
-    x: number;
-    y: number;
-}
-/**
- * Convert polar coordinates to cartesian coordinates
- * @param centerX - Center X coordinate
- * @param centerY - Center Y coordinate
- * @param radius - Radius from center
- * @param angleInDegrees - Angle in degrees (0 degrees is at the top)
- * @returns Point with x,y coordinates
- */
-export declare const polarToCartesian: (centerX: number, centerY: number, radius: number, angleInDegrees: number) => Point;
-/**
- * Create an SVG arc path string
- * @param centerX - Center X coordinate
- * @param centerY - Center Y coordinate
- * @param radius - Arc radius
- * @param startAngle - Start angle in degrees
- * @param endAngle - End angle in degrees
- * @returns SVG path string for the arc
- */
-export declare const createArcPath: (centerX: number, centerY: number, radius: number, startAngle: number, endAngle: number) => string;
-/**
- * Convert percentage to angle in degrees
- * @param percentage - Percentage value (0-100)
- * @returns Angle in degrees (0-360)
- */
-export declare const percentageToAngle: (percentage: number) => number;
-/**
- * Get team color with fallback
- * @param teamColor - Team color from API (without #)
- * @param fallbackColor - Fallback color (with #)
- * @returns Color string with # prefix
- */
-export declare const getTeamColor: (teamColor?: string, fallbackColor?: string) => string;

package/dist/src/modules/stats/utils.js

@@ -1,62 +0,0 @@
-/**
- * Utility functions for stats module
- */
-/**
- * Convert polar coordinates to cartesian coordinates
- * @param centerX - Center X coordinate
- * @param centerY - Center Y coordinate
- * @param radius - Radius from center
- * @param angleInDegrees - Angle in degrees (0 degrees is at the top)
- * @returns Point with x,y coordinates
- */
-export const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
-    const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
-    return {
-        x: centerX + radius * Math.cos(angleInRadians),
-        y: centerY + radius * Math.sin(angleInRadians),
-    };
-};
-/**
- * Create an SVG arc path string
- * @param centerX - Center X coordinate
- * @param centerY - Center Y coordinate
- * @param radius - Arc radius
- * @param startAngle - Start angle in degrees
- * @param endAngle - End angle in degrees
- * @returns SVG path string for the arc
- */
-export const createArcPath = (centerX, centerY, radius, startAngle, endAngle) => {
-    const start = polarToCartesian(centerX, centerY, radius, endAngle);
-    const end = polarToCartesian(centerX, centerY, radius, startAngle);
-    const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
-    return [
-        'M',
-        start.x,
-        start.y,
-        'A',
-        radius,
-        radius,
-        0,
-        largeArcFlag,
-        0,
-        end.x,
-        end.y,
-    ].join(' ');
-};
-/**
- * Convert percentage to angle in degrees
- * @param percentage - Percentage value (0-100)
- * @returns Angle in degrees (0-360)
- */
-export const percentageToAngle = (percentage) => {
-    return (percentage / 100) * 360;
-};
-/**
- * Get team color with fallback
- * @param teamColor - Team color from API (without #)
- * @param fallbackColor - Fallback color (with #)
- * @returns Color string with # prefix
- */
-export const getTeamColor = (teamColor, fallbackColor = '#666666') => {
-    return teamColor ? `#${teamColor}` : fallbackColor;
-};

package/dist/src/modules/stats/view/ActiveAthletes/ActiveAthletes.d.ts

@@ -1,22 +0,0 @@
-import React from 'react';
-import './ActiveAthletes.styles.css';
-import { Direction, Layout } from '@/external/spatial-navigation/utils';
-import { ActiveAthletesItem } from '../../view-model/StatsViewModel';
-export type ActiveAthletesProps = {
-    item: ActiveAthletesItem;
-    onBecameFocused: (layout: Layout) => void;
-    onEnterPress: () => void;
-};
-declare class ActiveAthletes extends React.Component<ActiveAthletesProps, {
-    expanded: boolean;
-}> {
-    constructor(props: ActiveAthletesProps);
-    onEnterPress(): void;
-    onAthletesStatisticsArrowPress: (index: number) => (d: Direction) => boolean;
-    get cardFocusKey(): string;
-    onAthletesStatisticsBackPress: () => void;
-    onArrowPress: (d: Direction) => void;
-    renderContent(): JSX.Element;
-    render(): JSX.Element;
-}
-export default ActiveAthletes;

package/dist/src/modules/stats/view/ActiveAthletes/ActiveAthletes.js

@@ -1,98 +0,0 @@
-import React from 'react';
-import './ActiveAthletes.styles.css';
-import Icon from '@/components/atoms/SvgIcon';
-import { withFocusable, } from '@/external/spatial-navigation';
-import CollapsedAthletes from './CollapsedAthletes/CollapsedAthletes';
-import ExpandedAthletes from './ExpandedAthletes/ExpandedAthletes';
-import SDK from '@/index';
-import { slugify } from '@/helpers/strings';
-class ActiveAthletes extends React.Component {
-    constructor(props) {
-        super(props);
-        Object.defineProperty(this, "onAthletesStatisticsArrowPress", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (index) => (d) => {
-                if (d === 'left') {
-                    SDK.getMaestroEventViewModel().deliverFocus();
-                    return false;
-                }
-                if (d === 'up' && index === 0) {
-                    SDK.getMaestroEventViewModel().navigation.setFocus(this.cardFocusKey);
-                    this.setState({
-                        expanded: false,
-                    });
-                    return false;
-                }
-                if (d === 'down' && index === this.props.item.athletes.length - 1) {
-                    SDK.getMaestroEventViewModel().navigation.navigateByDirection('down');
-                    this.setState({
-                        expanded: false,
-                    });
-                    return false;
-                }
-                return true;
-            }
-        });
-        Object.defineProperty(this, "onAthletesStatisticsBackPress", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                this.setState({
-                    expanded: false,
-                }, () => {
-                    SDK.getMaestroEventViewModel().navigation.setFocus(this.cardFocusKey);
-                });
-            }
-        });
-        Object.defineProperty(this, "onArrowPress", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (d) => {
-                if (d === 'left') {
-                    SDK.getMaestroEventViewModel().deliverFocus();
-                }
-            }
-        });
-        this.state = {
-            expanded: false,
-        };
-    }
-    onEnterPress() {
-        const newValue = !this.state.expanded;
-        this.setState({
-            expanded: newValue,
-        }, () => {
-            if (newValue) {
-                const firstAthlete = this.props.item.athletes[0];
-                SDK.getMaestroEventViewModel().navigation.setFocus(`${firstAthlete.awayAthlete.id}-${firstAthlete.homeAthlete.id}-${firstAthlete.displayName}-statistics`);
-            }
-        });
-        this.props.onEnterPress();
-    }
-    get cardFocusKey() {
-        return slugify(this.props.item.displayText);
-    }
-    renderContent() {
-        if (this.state.expanded) {
-            return (React.createElement(ExpandedAthletes, { item: this.props.item, onArrowPress: this.onAthletesStatisticsArrowPress, onEnterPress: this.props.onEnterPress, onBackPress: this.onAthletesStatisticsBackPress, parentFocusKey: this.cardFocusKey }));
-        }
-        return React.createElement(CollapsedAthletes, { item: this.props.item });
-    }
-    render() {
-        return (React.createElement(FocusableWrapper, { displayText: this.props.item.displayText, onEnterPress: this.onEnterPress.bind(this), onBecameFocused: this.props.onBecameFocused, onArrowPress: this.onArrowPress, expanded: this.state.expanded, focusKey: this.cardFocusKey }, this.renderContent()));
-    }
-}
-const Wrapper = (props) => {
-    return (React.createElement("section", { className: "active-athletes focus-ring", "data-focused": props.focused },
-        React.createElement("div", { className: "header" },
-            React.createElement("h5", { className: "T05_ALT" }, props.displayText),
-            React.createElement("div", { className: "icon-container", "data-focused": props.focused },
-                React.createElement(Icon, { iconName: props.expanded ? 'collapse' : 'expand', height: 48, width: 48 }))),
-        props.children));
-};
-const FocusableWrapper = withFocusable()(Wrapper);
-export default ActiveAthletes;

package/dist/src/modules/stats/view/ActiveAthletes/CollapsedAthletes/CollapsedAthletes.d.ts

@@ -1,4 +0,0 @@
-import './CollapsedAthletes.styles.css';
-import { ActiveAthletesProps } from '../ActiveAthletes';
-declare const CollapsedAthletes: (props: Pick<ActiveAthletesProps, 'item'>) => JSX.Element;
-export default CollapsedAthletes;

package/dist/src/modules/stats/view/ActiveAthletes/CollapsedAthletes/CollapsedAthletes.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import './CollapsedAthletes.styles.css';
-import Image from '@/components/atoms/Image';
-const CollapsedAthletes = (props) => {
-    const { awayTeam, homeTeam, athletes } = props.item;
-    return (React.createElement("div", { className: "minified-content" },
-        React.createElement("div", { className: "teams-header" }, [awayTeam, homeTeam].map((team) => {
-            return (React.createElement("div", { className: "team-header", key: team.id },
-                React.createElement(Image, { src: team.logo, crossOrigin: "anonymous", alt: team.name }),
-                React.createElement("span", { className: "T05_ALT FONT_BOLD" }, team.name)));
-        })),
-        athletes.map((item, index) => {
-            return (React.createElement("div", { className: "minified-athletes", key: item.awayAthlete.id + item.homeAthlete.id },
-                React.createElement("div", { className: "athletes-jersey-row" }, [item.awayAthlete, item.homeAthlete].map((athlete) => {
-                    return (React.createElement("div", { className: "T05_ALT FONT_BOLD", key: athlete.id + index + '-jersey' },
-                        React.createElement("span", null,
-                            "#",
-                            athlete.jersey),
-                        " ",
-                        athlete.shortName));
-                })),
-                React.createElement("div", { className: "athletes-statistics-row" }, [item.awayAthlete, item.homeAthlete].map((athlete) => {
-                    return (React.createElement("span", { key: athlete.id + index + '-statistic', className: "T02" }, athlete.minifiedStatistics || ''));
-                }))));
-        })));
-};
-export default CollapsedAthletes;

package/dist/src/modules/stats/view/ActiveAthletes/ExpandedAthletes/ExpandedAthletes.d.ts

@@ -1,22 +0,0 @@
-import React from 'react';
-import './ExpandedAthletes.styles.css';
-import { ActiveAthletesProps } from '../ActiveAthletes';
-import { Direction } from '@/external/spatial-navigation/utils';
-type Props = {
-    onArrowPress: (index: number) => (direction: Direction) => void;
-    onBackPress: () => void;
-    parentFocusKey: string;
-} & Pick<ActiveAthletesProps, 'item' | 'onEnterPress'>;
-declare class ExpandedAthletes extends React.Component<Props> {
-    refsArray: HTMLDivElement[];
-    wrapperRef: HTMLDivElement | null;
-    state: {
-        maxHeight: string;
-        focusedIndex: number;
-    };
-    updateMaxHeight(focusedIndex: number): void;
-    scrollToElement(focusedIndex: number): void;
-    onBecameFocused: (focusedIndex: number) => () => void;
-    render(): JSX.Element;
-}
-export default ExpandedAthletes;

package/dist/src/modules/stats/view/ActiveAthletes/ExpandedAthletes/ExpandedAthletes.js

@@ -1,89 +0,0 @@
-import Image from '@/components/atoms/Image';
-import React from 'react';
-import './ExpandedAthletes.styles.css';
-import AthletesStatistics from '../../components/AthletesStatistics';
-class ExpandedAthletes extends React.Component {
-    constructor() {
-        super(...arguments);
-        Object.defineProperty(this, "refsArray", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: []
-        });
-        Object.defineProperty(this, "wrapperRef", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: null
-        });
-        Object.defineProperty(this, "state", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {
-                maxHeight: '0',
-                focusedIndex: -1,
-            }
-        });
-        Object.defineProperty(this, "onBecameFocused", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (focusedIndex) => () => {
-                this.updateMaxHeight(focusedIndex);
-                // set timeout to account for max-height animation transition
-                if (this.wrapperRef) {
-                    const handleTransitionEnd = () => {
-                        this.scrollToElement(focusedIndex);
-                        this.wrapperRef?.removeEventListener('transitionend', handleTransitionEnd);
-                    };
-                    this.wrapperRef.addEventListener('transitionend', handleTransitionEnd);
-                }
-            }
-        });
-    }
-    updateMaxHeight(focusedIndex) {
-        const items = this.refsArray.slice(focusedIndex);
-        const maxHeight = items.reduce((prev, curr) => {
-            if (!curr) {
-                return prev;
-            }
-            return prev + curr.clientHeight;
-        }, 0);
-        this.setState({ maxHeight: `${maxHeight}px` });
-    }
-    scrollToElement(focusedIndex) {
-        const element = this.refsArray[focusedIndex];
-        if (!element) {
-            return;
-        }
-        if (this.wrapperRef) {
-            const wrapperRect = this.wrapperRef.getBoundingClientRect();
-            const elementRect = element.getBoundingClientRect();
-            const scrollTop = elementRect.top - wrapperRect.top + this.wrapperRef.scrollTop;
-            this.wrapperRef.scrollTo({
-                top: scrollTop,
-                behavior: 'smooth',
-            });
-        }
-    }
-    render() {
-        const { awayTeam, homeTeam, athletes } = this.props.item;
-        const { onArrowPress, onBackPress, onEnterPress } = this.props;
-        return (React.createElement("div", { className: "active-athletes-statistics" },
-            React.createElement("div", { className: "divider" }),
-            React.createElement("div", { className: "active-athletes-statistics-header" }, [awayTeam, homeTeam].map((team) => (React.createElement("div", { className: "team-header", key: team.id },
-                React.createElement(Image, { src: team.logo, crossOrigin: "anonymous", alt: team.name }),
-                React.createElement("span", { className: "T05_ALT" }, team.name))))),
-            React.createElement("div", { className: "active-athletes-wrapper", style: {
-                    maxHeight: this.state.maxHeight,
-                }, ref: (ref) => {
-                    this.wrapperRef = ref;
-                } }, athletes.map((item, index) => (React.createElement("div", { className: "active-athletes-item", key: item.awayAthlete.id + item.homeAthlete.id + item.displayName, ref: (ref) => {
-                    this.refsArray[index] = ref;
-                } },
-                React.createElement(AthletesStatistics, { focusKey: `${item.awayAthlete.id}-${item.homeAthlete.id}-${item.displayName}-statistics`, item: item, onArrowPress: onArrowPress(index), onBackPress: onBackPress, onBecameFocused: this.onBecameFocused(index), onEnterPress: onEnterPress, parentFocusKey: this.props.parentFocusKey })))))));
-    }
-}
-export default ExpandedAthletes;

package/dist/src/modules/stats/view/ActiveAthletes/index.d.ts

@@ -1,2 +0,0 @@
-import ActiveAthletes from './ActiveAthletes';
-export default ActiveAthletes;

package/dist/src/modules/stats/view/ActiveAthletes/index.js

@@ -1,2 +0,0 @@
-import ActiveAthletes from './ActiveAthletes';
-export default ActiveAthletes;

package/dist/src/modules/stats/view/DriveSummary/DrivePlayCard.d.ts

@@ -1,106 +0,0 @@
-/// <reference types="prop-types" />
-import React from 'react';
-import { WithFocusableProps } from '@/external/spatial-navigation';
-import { DrivePlay } from '../../interfaces/IStats';
-import { Layout, Direction } from '@/external/spatial-navigation/utils';
-import './DrivePlayCard.styles.css';
-type DrivePlayCardProps = {
-    play: DrivePlay;
-    isLastPlay?: boolean;
-    focusKey?: string;
-    focusable?: boolean;
-    onBackPress?: () => void;
-    onBecameFocused?: (layout: Layout) => void;
-    onArrowPress?: (direction: Direction, props: any) => boolean | void;
-    parentFocusKey?: string;
-};
-declare const _default: {
-    new (props: (DrivePlayCardProps & WithFocusableProps) | Readonly<DrivePlayCardProps & WithFocusableProps>): {
-        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<DrivePlayCardProps & 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<DrivePlayCardProps & 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<DrivePlayCardProps & WithFocusableProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<DrivePlayCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<DrivePlayCardProps & WithFocusableProps>, prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<DrivePlayCardProps & WithFocusableProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<DrivePlayCardProps & WithFocusableProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<DrivePlayCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<DrivePlayCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
-    };
-    new (props: DrivePlayCardProps & 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<DrivePlayCardProps & 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<DrivePlayCardProps & 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<DrivePlayCardProps & WithFocusableProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<DrivePlayCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<DrivePlayCardProps & WithFocusableProps>, prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<DrivePlayCardProps & WithFocusableProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<DrivePlayCardProps & WithFocusableProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<DrivePlayCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<DrivePlayCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
-    };
-    contextTypes: {
-        parentFocusKey: import("prop-types").Requireable<string>;
-    };
-    childContextTypes: {
-        parentFocusKey: import("prop-types").Requireable<string>;
-    };
-    contextType?: React.Context<any> | undefined;
-};
-export default _default;