@maestro_io/maestro-web-sdk 3.3.0 → 4.0.0-beta.1

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

@@ -0,0 +1,48 @@
+/**
+ * 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,4 +1,3 @@
-import React from 'react';
 export interface TeamStatisticProps {
     statisticName: string;
     firstDisplayValue: string | number;
@@ -18,4 +17,4 @@ export interface TeamStatisticProps {
  * 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) => React.JSX.Element;
+export declare const renderTeamStatistic: (props: TeamStatisticProps) => JSX.Element;

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

@@ -0,0 +1,16 @@
+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.js

@@ -0,0 +1,62 @@
+/**
+ * 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

@@ -16,7 +16,7 @@ declare class ActiveAthletes extends React.Component<ActiveAthletesProps, {
     get cardFocusKey(): string;
     onAthletesStatisticsBackPress: () => void;
     onArrowPress: (d: Direction) => void;
-    renderContent(): React.JSX.Element;
-    render(): React.JSX.Element;
+    renderContent(): JSX.Element;
+    render(): JSX.Element;
 }
 export default ActiveAthletes;

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

@@ -0,0 +1,98 @@
+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,5 +1,4 @@
-import React from 'react';
 import './CollapsedAthletes.styles.css';
 import { ActiveAthletesProps } from '../ActiveAthletes';
-declare const CollapsedAthletes: (props: Pick<ActiveAthletesProps, 'item'>) => React.JSX.Element;
+declare const CollapsedAthletes: (props: Pick<ActiveAthletesProps, 'item'>) => JSX.Element;
 export default CollapsedAthletes;

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

@@ -0,0 +1,27 @@
+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

@@ -17,6 +17,6 @@ declare class ExpandedAthletes extends React.Component<Props> {
     updateMaxHeight(focusedIndex: number): void;
     scrollToElement(focusedIndex: number): void;
     onBecameFocused: (focusedIndex: number) => () => void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default ExpandedAthletes;

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

@@ -0,0 +1,89 @@
+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.js

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

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

@@ -15,7 +15,7 @@ type DrivePlayCardProps = {
     parentFocusKey?: string;
 };
 declare const _default: {
-    new (props?: (DrivePlayCardProps & WithFocusableProps) | undefined, context?: any): {
+    new (props: (DrivePlayCardProps & WithFocusableProps) | Readonly<DrivePlayCardProps & WithFocusableProps>): {
         state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState;
         navigation: import("../../../../external/spatial-navigation/spatialNavigation").default;
         getChildContext(): {
@@ -35,20 +35,65 @@ declare const _default: {
         componentDidMount(): void;
         componentDidUpdate(): void;
         componentWillUnmount(): void;
-        render(): React.ReactElement<DrivePlayCardProps & 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: DrivePlayCardProps & 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<DrivePlayCardProps & WithFocusableProps>;
+        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>;
@@ -56,5 +101,6 @@ declare const _default: {
     childContextTypes: {
         parentFocusKey: import("prop-types").Requireable<string>;
     };
+    contextType?: React.Context<any> | undefined;
 };
 export default _default;

package/dist/src/modules/stats/view/DriveSummary/DrivePlayCard.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { withFocusable, } from '@/external/spatial-navigation';
+import { DEFAULT_SCROLLABLE_CONTAINER_CONTEXT, SCROLLABLE_CONTEXT_TYPE, } from '@/components/core/ScrollableContainer/ScrollableContainer';
+import SDK from '@/index';
+import './DrivePlayCard.styles.css';
+class DrivePlayCard extends React.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "context", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: DEFAULT_SCROLLABLE_CONTAINER_CONTEXT
+        });
+        Object.defineProperty(this, "onBecameFocused", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (layout) => {
+                this.context.scrollToFocusedElement(layout);
+            }
+        });
+        Object.defineProperty(this, "onArrowPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (direction, _props) => {
+                if (direction === 'left') {
+                    SDK.getMaestroEventViewModel().deliverFocus();
+                }
+            }
+        });
+    }
+    render() {
+        const { play, isLastPlay, focused } = this.props;
+        return (React.createElement("div", { className: "drive-play-card focus-ring focus-opacity", "data-focused": focused },
+            isLastPlay && (React.createElement("div", { className: "drive-play-card-label" },
+                React.createElement("span", { className: "last-play-label T10" }, "LAST PLAY"))),
+            React.createElement("table", { className: "drive-play-card-content" },
+                React.createElement("tbody", null,
+                    React.createElement("tr", null,
+                        React.createElement("td", null,
+                            React.createElement("table", { className: "drive-play-card-header" },
+                                React.createElement("tbody", null,
+                                    React.createElement("tr", null,
+                                        React.createElement("td", null,
+                                            React.createElement("span", { className: "drive-play-card-title T05_ALT" }, play.start.downDistanceText))))))),
+                    React.createElement("tr", null,
+                        React.createElement("td", null,
+                            React.createElement("table", { className: "drive-play-card-description" },
+                                React.createElement("tbody", null,
+                                    React.createElement("tr", null,
+                                        React.createElement("td", null,
+                                            React.createElement("span", { className: "drive-play-card-text T01" },
+                                                "(",
+                                                play.clock.displayValue,
+                                                " - ",
+                                                play.period.number,
+                                                ").",
+                                                ' ',
+                                                play.text)))))))))));
+    }
+}
+Object.defineProperty(DrivePlayCard, "contextTypes", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: SCROLLABLE_CONTEXT_TYPE
+});
+export default withFocusable()(DrivePlayCard);

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

@@ -12,6 +12,6 @@ export default class DriveSummary extends React.Component<DriveSummaryProps & Wi
     };
     handleEnterPress: (_props: any, _details: any) => void;
     collapseCard: () => void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export {};

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import { withFocusable, } from '@/external/spatial-navigation';
+import { DEFAULT_SCROLLABLE_CONTAINER_CONTEXT, SCROLLABLE_CONTEXT_TYPE, } from '@/components/core/ScrollableContainer/ScrollableContainer';
+import SDK from '@/index';
+import './DriveSummary.styles.css';
+import DriveSummaryHeader from './Header/DriveSummaryHeader';
+import MainStat from './MainStat/MainStat';
+import DriveSummaryExpanded from './ExpandedItems/DriveSummaryExpanded';
+class DriveSummaryInner extends React.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "context", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: DEFAULT_SCROLLABLE_CONTAINER_CONTEXT
+        });
+        Object.defineProperty(this, "onBecameFocused", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (layout) => {
+                this.context.scrollToFocusedElement(layout);
+            }
+        });
+    }
+    render() {
+        const { expanded, focused, item } = this.props;
+        const { team, playsQuantity, yards, time, lastPlayMarquee, plays, id, } = item;
+        const hasPlays = item.plays && item.plays.length > 0;
+        return (React.createElement("section", { className: "drive-summary focus-ring", "data-focused": focused, "data-expanded": expanded },
+            React.createElement(DriveSummaryHeader, { team: team, expanded: expanded, focused: !!focused, hasPlays: hasPlays }),
+            !expanded ? (React.createElement(MainStat, { playsQuantity: playsQuantity, yards: yards, time: time, lastPlayMarquee: lastPlayMarquee, focused: !!focused })) : (React.createElement(DriveSummaryExpanded, { plays: plays, id: id, parentFocusKey: this.props.focusKey, collapseCard: this.props.collapseCard, onItemEnterPress: this.props.onItemEnterPress }))));
+    }
+}
+Object.defineProperty(DriveSummaryInner, "contextTypes", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: SCROLLABLE_CONTEXT_TYPE
+});
+const FocusableDriveSummary = withFocusable({ trackChildren: true })(DriveSummaryInner);
+export default class DriveSummary extends React.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                expanded: false,
+            }
+        });
+        Object.defineProperty(this, "handleEnterPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (_props, _details) => {
+                this.props.onItemEnterPress();
+                if (!this.state.expanded) {
+                    this.setState({ expanded: true });
+                    // Focus first play card when expanding - withFocusable will handle this automatically
+                    if (this.props.item.plays && this.props.item.plays.length > 0) {
+                        SDK.getMaestroEventViewModel().navigation.setFocus(`drive-play-${this.props.item.id}-${this.props.item.plays[0].id}`);
+                    }
+                }
+                else {
+                    this.setState({ expanded: false });
+                }
+            }
+        });
+        // Collapse back to minified mode and focus card
+        Object.defineProperty(this, "collapseCard", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.setState({ expanded: false }, () => {
+                    SDK.getMaestroEventViewModel().navigation.setFocus(this.props.focusKey || '');
+                });
+            }
+        });
+    }
+    render() {
+        return (React.createElement(FocusableDriveSummary, { ...this.props, expanded: this.state.expanded, collapseCard: this.collapseCard, onEnterPress: this.handleEnterPress }));
+    }
+}

package/dist/src/modules/stats/view/DriveSummary/ExpandedItems/DriveSummaryExpanded.d.ts

@@ -22,6 +22,6 @@ declare class DriveSummaryExpanded extends React.Component<Props> {
     updateMaxHeight(focusedIndex: number): void;
     scrollToElement(focusedIndex: number): void;
     onBecameFocused: (focusedIndex: number) => () => void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default DriveSummaryExpanded;