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

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

@@ -0,0 +1,129 @@
+import React from 'react';
+import DrivePlayCard from '../DrivePlayCard';
+import './DriveSummaryExpanded.styles.css';
+import SDK from '@/index';
+class DriveSummaryExpanded extends React.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "refsArray", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "transitionEndListenerAttached", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "transitionEndHandler", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        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, "onPlayArrowPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (index) => (direction, _props) => {
+                if (direction === 'left') {
+                    SDK.getMaestroEventViewModel().deliverFocus();
+                }
+                if (index === 0 && direction === 'up') {
+                    // If the first play is focused and up arrow is pressed, collapse to minified mode
+                    this.props.collapseCard();
+                    return false; // Prevent further propagation
+                }
+                // If the last play is focused and down arrow is pressed, collapse to minified mode
+                const totalPlays = this.props.plays?.length || 0;
+                if (index === totalPlays - 1 && direction === 'down') {
+                    this.props.collapseCard();
+                    SDK.getMaestroEventViewModel().navigation.navigateByDirection('down');
+                    return false; // Prevent further propagation
+                }
+            }
+        });
+        Object.defineProperty(this, "onBecameFocused", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (focusedIndex) => () => {
+                this.updateMaxHeight(focusedIndex);
+                // Scroll to element when max height transition ends
+                if (this.wrapperRef) {
+                    // Remove any existing listener before adding a new one
+                    if (this.transitionEndListenerAttached && this.transitionEndHandler) {
+                        this.wrapperRef.removeEventListener('transitionend', this.transitionEndHandler);
+                        this.transitionEndListenerAttached = false;
+                    }
+                    // Create a stable handler that closes over the current focusedIndex
+                    this.transitionEndHandler = () => {
+                        this.scrollToElement(focusedIndex);
+                        if (this.wrapperRef && this.transitionEndHandler) {
+                            this.wrapperRef.removeEventListener('transitionend', this.transitionEndHandler);
+                            this.transitionEndListenerAttached = false;
+                        }
+                    };
+                    this.wrapperRef.addEventListener('transitionend', this.transitionEndHandler);
+                    this.transitionEndListenerAttached = true;
+                }
+            }
+        });
+    }
+    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 { plays, id } = this.props;
+        return (React.createElement("div", null,
+            React.createElement("div", { className: "drive-summary-divider" }),
+            React.createElement("div", { className: "drive-summary-expanded-wrapper", style: {
+                    maxHeight: this.state.maxHeight,
+                }, ref: (ref) => {
+                    this.wrapperRef = ref;
+                } }, plays.map((play, index) => (React.createElement("div", { className: "summary-item", key: play.id, ref: (ref) => {
+                    this.refsArray[index] = ref;
+                } },
+                React.createElement(DrivePlayCard, { focusKey: `drive-play-${id}-${play.id}`, play: play, isLastPlay: index === 0, onBackPress: this.props.collapseCard, onBecameFocused: this.onBecameFocused(index), onEnterPress: this.props.onItemEnterPress, onArrowPress: this.onPlayArrowPress(index), parentFocusKey: this.props.parentFocusKey })))))));
+    }
+}
+export default DriveSummaryExpanded;

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

@@ -1,5 +1,4 @@
 import './DriveSummaryHeader.styles.css';
-import React from 'react';
 type Props = {
     team: {
         displayName: string;
@@ -9,5 +8,5 @@ type Props = {
     focused: boolean;
     hasPlays: boolean;
 };
-declare const DriveSummaryHeader: (props: Props) => React.JSX.Element;
+declare const DriveSummaryHeader: (props: Props) => JSX.Element;
 export default DriveSummaryHeader;

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

@@ -0,0 +1,26 @@
+import Image from '@/components/atoms/Image';
+import Icon from '@/components/atoms/SvgIcon';
+import './DriveSummaryHeader.styles.css';
+import React from 'react';
+const DriveSummaryHeader = (props) => {
+    const { team, expanded, focused, hasPlays } = props;
+    return (React.createElement("table", { className: "drive-summary-header" },
+        React.createElement("tbody", null,
+            React.createElement("tr", null,
+                React.createElement("td", { className: "drive-summary-team-info" },
+                    React.createElement("table", { className: "drive-summary-team-info-table" },
+                        React.createElement("tbody", null,
+                            React.createElement("tr", null,
+                                team.logo && (React.createElement("td", { className: "drive-summary-team-logo-cell" },
+                                    React.createElement(Image, { src: team.logo, alt: team.displayName, crossOrigin: "anonymous", className: "drive-summary-team-logo" }))),
+                                React.createElement("td", { className: "drive-summary-team-name-cell" },
+                                    React.createElement("span", { className: "drive-summary-team-name T05_ALT" },
+                                        team.displayName,
+                                        " Drive Summary")))))),
+                React.createElement("td", { className: "drive-summary-expand-icon-cell" }, hasPlays && (React.createElement("table", { className: "drive-summary-expand-icon", "data-focused": focused },
+                    React.createElement("tbody", null,
+                        React.createElement("tr", null,
+                            React.createElement("td", null,
+                                React.createElement(Icon, { iconName: expanded ? 'collapse' : 'expand', width: 48, height: 48 })))))))))));
+};
+export default DriveSummaryHeader;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import './MainStat.styles.css';
 type Props = {
     playsQuantity: string;
@@ -7,5 +6,5 @@ type Props = {
     lastPlayMarquee?: string;
     focused: boolean;
 };
-declare const MainStat: (props: Props) => React.JSX.Element;
+declare const MainStat: (props: Props) => JSX.Element;
 export default MainStat;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import './MainStat.styles.css';
+const MainStat = (props) => {
+    const { playsQuantity, yards, time, lastPlayMarquee, focused } = props;
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "drive-summary-stats-container" },
+            React.createElement("div", { className: "drive-summary-stat-left" },
+                React.createElement("div", { className: "drive-summary-stat-number T30 FONT_BOLD" }, playsQuantity),
+                React.createElement("div", { className: "drive-summary-stat-label T10" }, "PLAYS")),
+            React.createElement("div", { className: "drive-summary-stat-center" },
+                React.createElement("div", { className: "drive-summary-stat-number T30 FONT_BOLD" }, yards),
+                React.createElement("div", { className: "drive-summary-stat-label T10" }, "YARDS")),
+            React.createElement("div", { className: "drive-summary-stat-right" },
+                React.createElement("div", { className: "drive-summary-stat-number T30 FONT_BOLD" }, time))),
+        lastPlayMarquee && (React.createElement("div", { className: "drive-summary-marquee", "data-focused": focused },
+            React.createElement("div", { className: "drive-summary-marquee-background" }),
+            React.createElement("div", { className: "drive-summary-marquee-indicator" }),
+            React.createElement("table", { className: "drive-summary-marquee-content" },
+                React.createElement("tbody", null,
+                    React.createElement("tr", null,
+                        React.createElement("td", null,
+                            React.createElement("div", { className: `drive-summary-marquee-text T01 ${focused ? 'drive-summary-marquee-text-animate' : ''}` }, lastPlayMarquee)))))))));
+};
+export default MainStat;

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

@@ -0,0 +1,2 @@
+export { default } from './DriveSummary';
+export { default as DrivePlayCard } from './DrivePlayCard';

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

@@ -1,3 +1,4 @@
+/// <reference types="prop-types" />
 import React from 'react';
 import './GameLeaders.styles.css';
 import { GameLeadersStatsItem } from '../../view-model/StatsViewModel';
@@ -8,13 +9,13 @@ export type GameLeaderProps = {
 };
 declare class GameLeaders extends React.Component<GameLeaderProps> {
     static contextTypes: {
-        refsMap: React.Requireable<any>;
-        setRef: React.Requireable<any>;
-        scrollToFocusedElement: React.Requireable<any>;
+        refsMap: import("prop-types").Requireable<(HTMLElement | null | undefined)[]>;
+        setRef: import("prop-types").Requireable<(...args: any[]) => any>;
+        scrollToFocusedElement: import("prop-types").Requireable<(...args: any[]) => any>;
     };
     context: import("@/components/core/ScrollableContainer/ScrollableContainer").ScrollableContainerContextType;
     onBecameFocused: (layout: Layout) => void;
     onArrowPress: (d: Direction) => void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default GameLeaders;

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import './GameLeaders.styles.css';
+import AthletesStatistics from '../components/AthletesStatistics';
+import { DEFAULT_SCROLLABLE_CONTAINER_CONTEXT, SCROLLABLE_CONTEXT_TYPE, } from '@/components/core/ScrollableContainer/ScrollableContainer';
+import SDK from '@/index';
+class GameLeaders 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, {
+                    offsetTop: 40,
+                });
+            }
+        });
+        Object.defineProperty(this, "onArrowPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (d) => {
+                if (d === 'left') {
+                    SDK.getMaestroEventViewModel().deliverFocus();
+                }
+            }
+        });
+    }
+    render() {
+        return (React.createElement("section", { className: "game-leaders" },
+            React.createElement("h5", { className: "T05_ALT" }, this.props.item.displayText),
+            this.props.item.items.map((item, index) => (React.createElement(AthletesStatistics, { key: `${index}-${item.awayAthlete.id}`, item: item, focusKey: String(index), onBecameFocused: this.onBecameFocused, onArrowPress: this.onArrowPress, onEnterPress: this.props.onEnterPress })))));
+    }
+}
+Object.defineProperty(GameLeaders, "contextTypes", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: SCROLLABLE_CONTEXT_TYPE
+});
+export default GameLeaders;

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

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

package/dist/src/modules/stats/view/MatchPredictor/DonutChart/DonutChart.d.ts

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 export interface DonutChartProps {
     awayPercentage: number;
     homePercentage: number;
@@ -12,6 +12,6 @@ declare class DonutChart extends Component<DonutChartProps> {
     };
     private patternId;
     constructor(props: DonutChartProps);
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default DonutChart;

package/dist/src/modules/stats/view/MatchPredictor/DonutChart/DonutChart.js

@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import { createArcPath, percentageToAngle } from '../../../utils';
+class DonutChart extends Component {
+    constructor(props) {
+        super(props);
+        Object.defineProperty(this, "patternId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.patternId = `homeStripes-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    render() {
+        const { awayPercentage, size = 280, strokeWidth = 32 } = this.props;
+        const radius = (size - strokeWidth) / 2;
+        const centerX = size / 2;
+        const centerY = size / 2;
+        // Calculate angles with equal gaps between sections
+        const awayAngle = percentageToAngle(awayPercentage);
+        const homeAngle = percentageToAngle(100 - awayPercentage);
+        const gapAngle = 3; // 3 degree gap between sections
+        const totalGaps = gapAngle * 2; // Two gaps total
+        // Adjust angles to account for gaps
+        const adjustedAwayAngle = (awayAngle * (360 - totalGaps)) / 360;
+        const adjustedHomeAngle = (homeAngle * (360 - totalGaps)) / 360;
+        const startAngle = 270; // Start from top
+        const awayEndAngle = startAngle + adjustedAwayAngle; // Away team section
+        const homeStartAngle = awayEndAngle + gapAngle; // Gap after away team
+        const homeEndAngle = homeStartAngle + adjustedHomeAngle; // Home team section
+        // Use consistent text-100 color for both teams
+        const chartColor = 'var(--sdk-text100)';
+        return (React.createElement("svg", { width: size, height: size, className: "donut-svg" },
+            React.createElement("defs", null,
+                React.createElement("pattern", { id: this.patternId, patternUnits: "userSpaceOnUse", width: "6", height: "6", patternTransform: "rotate(45)" },
+                    React.createElement("rect", { width: "1", height: "6", fill: chartColor }),
+                    React.createElement("rect", { x: "1", width: "2", height: "6", fill: "transparent" }),
+                    React.createElement("rect", { x: "3", width: "1", height: "6", fill: chartColor }),
+                    React.createElement("rect", { x: "4", width: "2", height: "6", fill: "transparent" }))),
+            React.createElement("path", { d: createArcPath(centerX, centerY, radius, startAngle, awayEndAngle), fill: "transparent", stroke: chartColor, strokeWidth: strokeWidth, strokeLinecap: "butt" }),
+            React.createElement("path", { d: createArcPath(centerX, centerY, radius, homeStartAngle, homeEndAngle), fill: "transparent", stroke: `url(#${this.patternId})`, strokeWidth: strokeWidth, strokeLinecap: "butt" }),
+            React.createElement("path", { d: createArcPath(centerX, centerY, radius, awayEndAngle, homeStartAngle), fill: "transparent", stroke: "var(--sdk-surface4)", strokeWidth: strokeWidth, strokeLinecap: "butt" }),
+            React.createElement("path", { d: createArcPath(centerX, centerY, radius, homeEndAngle, startAngle + 360), fill: "transparent", stroke: "var(--sdk-surface4)", strokeWidth: strokeWidth, strokeLinecap: "butt" })));
+    }
+}
+Object.defineProperty(DonutChart, "defaultProps", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: {
+        size: 280,
+        strokeWidth: 32,
+    }
+});
+export default DonutChart;

package/dist/src/modules/stats/view/MatchPredictor/DonutChart/index.js

@@ -0,0 +1 @@
+export { default } from './DonutChart';

package/dist/src/modules/stats/view/MatchPredictor/MatchPredictorView.d.ts

@@ -7,7 +7,7 @@ export interface MatchPredictorProps {
     item: StatsMatchPredictorItem;
 }
 declare const _default: {
-    new (props?: (MatchPredictorProps & WithFocusableProps) | undefined, context?: any): {
+    new (props: (MatchPredictorProps & WithFocusableProps) | Readonly<MatchPredictorProps & WithFocusableProps>): {
         state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState;
         navigation: import("../../../../external/spatial-navigation/spatialNavigation").default;
         getChildContext(): {
@@ -27,20 +27,65 @@ declare const _default: {
         componentDidMount(): void;
         componentDidUpdate(): void;
         componentWillUnmount(): void;
-        render(): React.ReactElement<MatchPredictorProps & 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: MatchPredictorProps & 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<MatchPredictorProps & WithFocusableProps>;
+        render(): React.ReactElement<MatchPredictorProps & 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<MatchPredictorProps & 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<MatchPredictorProps & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
         refs: {
             [key: string]: React.ReactInstance;
         };
+        shouldComponentUpdate?(nextProps: Readonly<MatchPredictorProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<MatchPredictorProps & WithFocusableProps>, prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
         componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<MatchPredictorProps & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<MatchPredictorProps & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<MatchPredictorProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<MatchPredictorProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    new (props: MatchPredictorProps & WithFocusableProps, context: any): {
+        state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../../external/spatial-navigation/spatialNavigation").default;
+        getChildContext(): {
+            parentFocusKey: string;
+        };
+        setFocus: (focusKey: string) => void;
+        navigateByDirection: (direction: import("../../../../external/spatial-navigation/utils").Direction, details?: Record<string, any>) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        onEnterReleaseHandler: () => void;
+        onBackPressHandler: (details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        onArrowPressHandler: (direction: import("../../../../external/spatial-navigation/utils").Direction, details: import("../../../../external/spatial-navigation/utils").Details) => boolean | void;
+        onBecameFocusedHandler: (layout: import("../../../../external/spatial-navigation/utils").Layout, details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        onBecameBlurredHandler: (layout: import("../../../../external/spatial-navigation/utils").Layout, details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): React.ReactElement<MatchPredictorProps & 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<MatchPredictorProps & 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<MatchPredictorProps & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
         shouldComponentUpdate?(nextProps: Readonly<MatchPredictorProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<MatchPredictorProps & WithFocusableProps>, prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<MatchPredictorProps & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<MatchPredictorProps & WithFocusableProps>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<MatchPredictorProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<MatchPredictorProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
     };
     contextTypes: {
         parentFocusKey: import("prop-types").Requireable<string>;
@@ -48,5 +93,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/MatchPredictor/MatchPredictorView.js

@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import './MatchPredictorView.styles.css';
+import { withFocusable, } from '@/external/spatial-navigation';
+import DonutChart from './DonutChart/DonutChart';
+import Image from '@/components/atoms/Image';
+class MatchPredictorView extends Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                shouldRenderPredictorImage: Boolean(this.props.item.imageUrl),
+            }
+        });
+        Object.defineProperty(this, "handleImageError", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.setState({ shouldRenderPredictorImage: false });
+            }
+        });
+    }
+    render() {
+        const { item } = this.props;
+        const { shouldRenderPredictorImage } = this.state;
+        return (React.createElement("section", { className: "match-predictor-view focus-ring", "data-focused": this.props.focused },
+            React.createElement("div", { className: "match-predictor-header" },
+                React.createElement("h2", { className: "T05_ALT" }, item.header)),
+            React.createElement("div", { className: "match-predictor-percentages" },
+                React.createElement("div", { className: "team-percentage away-team" },
+                    React.createElement("span", { className: "percentage-value T70" },
+                        item.awayTeam.percentage,
+                        "%"),
+                    React.createElement("div", { className: "team-info" },
+                        React.createElement("div", { className: "legend-item away" },
+                            React.createElement("div", { className: "legend-pattern away-pattern" }),
+                            React.createElement("span", { className: "T02" }, item.awayTeam.abbreviation)))),
+                React.createElement("div", { className: "team-percentage home-team" },
+                    React.createElement("span", { className: "percentage-value T70" },
+                        item.homeTeam.percentage,
+                        "%"),
+                    React.createElement("div", { className: "team-info" },
+                        React.createElement("div", { className: "legend-item home" },
+                            React.createElement("div", { className: "legend-pattern home-pattern" }),
+                            React.createElement("span", { className: "T02" }, item.homeTeam.abbreviation))))),
+            React.createElement("div", { className: "donut-chart-container" }, shouldRenderPredictorImage && item.imageUrl ? (React.createElement("div", { className: "actual-chart" },
+                React.createElement(Image, { src: item.imageUrl, alt: "Match Predictor Chart", className: "predictor-chart-image", onError: this.handleImageError }))) : (React.createElement("div", { className: "svg-chart-fallback" },
+                React.createElement("div", { className: "svg-donut-container" },
+                    React.createElement(DonutChart, { awayPercentage: item.awayTeam.percentage, homePercentage: item.homeTeam.percentage }),
+                    React.createElement("div", { className: "donut-center" },
+                        React.createElement("div", { className: "center-team-logos" },
+                            React.createElement("div", { className: "center-logo away-center-logo" }, item.awayTeam.logo ? (React.createElement(Image, { src: item.awayTeam.logo, alt: item.awayTeam.displayName, className: "center-logo-image" })) : (React.createElement("span", { className: "center-logo-fallback T30" }, item.awayTeam.abbreviation))),
+                            React.createElement("div", { className: "center-divider" }),
+                            React.createElement("div", { className: "center-logo home-center-logo" }, item.homeTeam.logo ? (React.createElement(Image, { src: item.homeTeam.logo, alt: item.homeTeam.displayName, className: "center-logo-image" })) : (React.createElement("span", { className: "center-logo-fallback T30" }, item.homeTeam.abbreviation)))))))))));
+    }
+}
+export default withFocusable()(MatchPredictorView);

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

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

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { PenaltiesItem } from '../../view-model/StatsViewModel';
 import { Layout } from '@/external/spatial-navigation/utils';
 type PenaltiesProps = {
@@ -6,5 +5,5 @@ type PenaltiesProps = {
     onBecameFocused: (layout: Layout) => void;
     onEnterPress: () => void;
 };
-declare const Penalties: (props: PenaltiesProps) => React.JSX.Element;
+declare const Penalties: (props: PenaltiesProps) => JSX.Element;
 export default Penalties;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import ScoringSummary from '../ScoringSummary';
+const Penalties = (props) => {
+    return (React.createElement(ScoringSummary, { item: props.item, noScoresText: "No Penalties", onBecameFocused: props.onBecameFocused, onEnterPress: props.onEnterPress }));
+};
+export default Penalties;

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

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