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

package/dist/src/modules/bets/view/UserBets/BetsCard/BetsCard.js

@@ -0,0 +1,149 @@
+import React from 'react';
+import { withFocusable, } from '@/external/spatial-navigation';
+import BetsCard from '../../components/BetsCard/BetsCard';
+import BetsCardHeader from '../../components/BetsCard/BetsCardHeader';
+import BetsCardFooter from './BetsCardFooter';
+import BetsCardEvent from './BetsCardEvent';
+import { DEFAULT_SCROLLABLE_CONTAINER_CONTEXT, SCROLLABLE_CONTEXT_TYPE, } from '@/components/core/ScrollableContainer/ScrollableContainer';
+import SDK from '@/index';
+export const EVENTS_COUNT_THRESHOLD = 3;
+class UserBetsCard extends React.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "context", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: DEFAULT_SCROLLABLE_CONTAINER_CONTEXT
+        });
+        Object.defineProperty(this, "onEnterPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                if (!this.props.hasFocusedChild) {
+                    // Track card click for bet sub-card with bet type (always track, regardless of focusable state)
+                    const cardType = `my bets > ${this.getCurrentSegment()}`;
+                    const betType = this.betType;
+                    this.viewModel.trackCardClick(cardType, betType);
+                    // Only set focus if the bet is focusable (has more than 3 events)
+                    if (this.betsFocusable) {
+                        SDK.getMaestroEventViewModel().navigation.setFocus(`sdk-bets-card-${this.betType}-bet-${this.props.bet.id}-0-0`);
+                    }
+                }
+            }
+        });
+        Object.defineProperty(this, "getCurrentSegment", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                // Determine the current segment based on bet status
+                if (this.props.bet.betStatus === 'OPEN') {
+                    return 'live';
+                }
+                else if (this.props.bet.betStatus === 'SETTLED') {
+                    return 'settled';
+                }
+                else {
+                    return 'upcoming';
+                }
+            }
+        });
+        Object.defineProperty(this, "focusCard", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                // Focus the card itself
+                SDK.getMaestroEventViewModel().navigation.setFocus(`${this.focusKeyPrefix}-${this.props.bet.id}`);
+            }
+        });
+        Object.defineProperty(this, "handleBetArrowPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (eventIndex, legIndex) => (d, _props) => {
+                if (d === 'up' && legIndex === 0 && eventIndex === 0) {
+                    // If the first leg of the first event is focused and up arrow is pressed,
+                    this.focusCard();
+                    // Return false to prevent further propagation
+                    return false;
+                }
+                if (d === 'left') {
+                    SDK.getMaestroEventViewModel().deliverFocus();
+                }
+            }
+        });
+        Object.defineProperty(this, "handleCardArrowPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (d, _props) => {
+                if (d === 'left') {
+                    SDK.getMaestroEventViewModel().deliverFocus();
+                }
+            }
+        });
+        Object.defineProperty(this, "renderHeader", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (headerProps) => {
+                return (React.createElement(BetsCardHeader, { betCardProps: headerProps, betType: this.betType, iconUrl: this.props.bet.rewardInfo.icon?.dark, legCount: this.props.bet.legCount, outcome: this.props.bet.outcome, overrideOutcome: this.props.bet.overrideOutcome, cardExpanded: !!this.props.hasFocusedChild, legCountThreshold: EVENTS_COUNT_THRESHOLD }, this.props.renderHeaderContent?.(headerProps)));
+            }
+        });
+        Object.defineProperty(this, "renderFooter", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                return (React.createElement(BetsCardFooter, { bet: this.props.bet, hideWagers: this.props.hideWagers }));
+            }
+        });
+        Object.defineProperty(this, "becameFocused", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (layout) => {
+                this.context.scrollToFocusedElement(layout);
+            }
+        });
+    }
+    get betsFocusable() {
+        return this.props.bet.events.length > EVENTS_COUNT_THRESHOLD;
+    }
+    get events() {
+        return this.props.hasFocusedChild
+            ? this.props.bet.events
+            : this.props.bet.events.slice(0, EVENTS_COUNT_THRESHOLD);
+    }
+    get focusKeyPrefix() {
+        return `sdk-${this.props.bet.type.toLowerCase()}-card`;
+    }
+    get betType() {
+        return this.props.bet.type.toLowerCase();
+    }
+    get viewModel() {
+        const vm = SDK.getMaestroEventViewModel().betsViewModel;
+        if (!vm) {
+            throw new Error('BetsViewModel is not initialized');
+        }
+        return vm;
+    }
+    render() {
+        return (React.createElement(BetsCard, { header: this.renderHeader, footer: this.renderFooter, onEnterPress: this.onEnterPress, focusKey: `${this.focusKeyPrefix}-${this.props.bet.id}`, onArrowPress: this.handleCardArrowPress, onBecameFocused: this.becameFocused, focused: this.props.focused },
+            this.events.map((event, eventIndex) => (React.createElement(BetsCardEvent, { betType: this.betType, betsFocusable: this.betsFocusable, event: event, eventIndex: eventIndex, onBetArrowPress: this.handleBetArrowPress, key: event.displayName, betId: this.props.bet.id, parentFocusKey: this.props.focusKey, onBetBackPress: this.focusCard, hideWagers: this.props.hideWagers }))),
+            !this.props.hasFocusedChild && this.betsFocusable && (React.createElement("div", { className: "more-bets T05_ALT" },
+                "+",
+                this.props.bet.legCount - EVENTS_COUNT_THRESHOLD,
+                " more"))));
+    }
+}
+Object.defineProperty(UserBetsCard, "contextTypes", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: SCROLLABLE_CONTEXT_TYPE
+});
+export default withFocusable({ trackChildren: true })(UserBetsCard);

package/dist/src/modules/bets/view/UserBets/BetsCard/BetsCardEvent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="prop-types" />
 import { IUserBet } from '@/modules/bets/interfaces/IBets';
 import React from 'react';
 import { Details, Direction, Layout } from '@/external/spatial-navigation/utils';
@@ -14,12 +15,12 @@ type BetsCardEventProps = {
 };
 declare class BetsCardEvent extends React.Component<BetsCardEventProps> {
     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;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default BetsCardEvent;

package/dist/src/modules/bets/view/UserBets/BetsCard/BetsCardEvent.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import Bet from '../../components/Bet/Bet';
+import { DEFAULT_SCROLLABLE_CONTAINER_CONTEXT, SCROLLABLE_CONTEXT_TYPE, } from '@/components/core/ScrollableContainer/ScrollableContainer';
+class BetsCardEvent 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() {
+        return (React.createElement("div", { key: this.props.event.displayName, className: "bets-card-event T10" },
+            React.createElement("div", { className: "T10" }, this.props.event.displayName),
+            React.createElement("div", { className: "bets-card-bets" }, this.props.event.legs.map((leg, index) => (React.createElement(Bet, { key: `${this.props.betId}-${this.props.eventIndex}-${index}`, focusable: this.props.betsFocusable, focusKey: `sdk-bets-card-${this.props.betType}-bet-${this.props.betId}-${this.props.eventIndex}-${index}`, onArrowPress: this.props.onBetArrowPress(this.props.eventIndex, index), onBecameFocused: this.onBecameFocused, parentFocusKey: this.props.parentFocusKey, onBackPress: this.props.onBetBackPress, leg: leg, hideWagers: this.props.hideWagers }))))));
+    }
+}
+Object.defineProperty(BetsCardEvent, "contextTypes", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: SCROLLABLE_CONTEXT_TYPE
+});
+export default BetsCardEvent;

package/dist/src/modules/bets/view/UserBets/BetsCard/BetsCardFooter.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 import { IUserBet } from '@/modules/bets/interfaces/IBets';
 type BetsCardFooterProps = {
     bet: IUserBet;
     hideWagers?: boolean;
 };
-declare const BetsCardFooter: (props: BetsCardFooterProps) => React.JSX.Element | null;
+declare const BetsCardFooter: (props: BetsCardFooterProps) => JSX.Element | null;
 export default BetsCardFooter;

package/dist/src/modules/bets/view/UserBets/BetsCard/BetsCardFooter.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import BetPill from '../../components/BetPill/BetPill';
+import BetResult from '../../UserBets/BetResult/BetResult';
+const BetsCardFooter = (props) => {
+    // Hide entire footer when hideWagers is true
+    if (props.hideWagers) {
+        return null;
+    }
+    const outcome = props.bet.overrideOutcome !== 'NOT_SET'
+        ? props.bet.overrideOutcome
+        : props.bet.outcome;
+    return (React.createElement("div", { className: "bets-card-footer T02" },
+        React.createElement(BetPill, null, `$${props.bet.betAmount} ${props.bet.type.toLowerCase()} ${props.bet.odds}`),
+        outcome !== 'LOSS' && (React.createElement(BetResult, null,
+            props.bet.betDisplayStatement,
+            React.createElement("span", null, `$${props.bet.payoutAmount}`)))));
+};
+export default BetsCardFooter;

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

@@ -1,8 +1,7 @@
-import React from 'react';
 import { IUserBet } from '@/modules/bets/interfaces/IBets';
 type BoostProps = {
     bet: IUserBet;
     hideWagers?: boolean;
 };
-declare const Boost: ({ bet, hideWagers }: BoostProps) => React.JSX.Element;
+declare const Boost: ({ bet, hideWagers }: BoostProps) => JSX.Element;
 export default Boost;

package/dist/src/modules/bets/view/UserBets/Boost/Boost.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import UserBetsCard from '../BetsCard/BetsCard';
+const Boost = ({ bet, hideWagers }) => {
+    return (React.createElement(UserBetsCard, { focusKey: `bets-boost-card-${bet.id}`, bet: bet, hideWagers: hideWagers }));
+};
+export default Boost;

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

@@ -1,7 +1,6 @@
-import React from 'react';
 import './OutcomeBadge.styles.css';
 type Props = {
     outcome: string;
 };
-declare const OutcomeBadge: (props: Props) => React.JSX.Element;
+declare const OutcomeBadge: (props: Props) => JSX.Element;
 export default OutcomeBadge;

package/dist/src/modules/bets/view/UserBets/OutcomeBadge/OutcomeBadge.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import './OutcomeBadge.styles.css';
+import Icon from '@/components/atoms/SvgIcon';
+const OutcomeBadge = (props) => {
+    return (React.createElement("div", { className: "bet-outcome-badge T02" },
+        React.createElement(Icon, { iconName: props.outcome === 'WIN' ? 'checkmark' : 'times', width: 24, height: 24 }),
+        props.outcome));
+};
+export default OutcomeBadge;

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

@@ -1,9 +1,8 @@
-import React from 'react';
 import './Parlay.styles.css';
 import { IUserBet } from '@/modules/bets/interfaces/IBets';
 type ParlayProps = {
     bet: IUserBet;
     hideWagers?: boolean;
 };
-declare const Parlay: ({ bet, hideWagers }: ParlayProps) => React.JSX.Element;
+declare const Parlay: ({ bet, hideWagers }: ParlayProps) => JSX.Element;
 export default Parlay;

package/dist/src/modules/bets/view/UserBets/Parlay/Parlay.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import './Parlay.styles.css';
+import UserBetsCard from '../BetsCard/BetsCard';
+const Parlay = ({ bet, hideWagers }) => {
+    const renderHeaderContent = () => {
+        return (React.createElement("div", null,
+            bet.legCount,
+            " Leg",
+            bet.legCount > 1 ? 's' : ''));
+    };
+    return (React.createElement(UserBetsCard, { focusKey: `bets-parlay-card-${bet.id}`, bet: bet, renderHeaderContent: renderHeaderContent, hideWagers: hideWagers }));
+};
+export default Parlay;

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

@@ -1,8 +1,7 @@
-import React from 'react';
 import { IUserBet } from '@/modules/bets/interfaces/IBets';
 type StraightProps = {
     bet: IUserBet;
     hideWagers?: boolean;
 };
-declare const Straight: ({ bet, hideWagers }: StraightProps) => React.JSX.Element;
+declare const Straight: ({ bet, hideWagers }: StraightProps) => JSX.Element;
 export default Straight;

package/dist/src/modules/bets/view/UserBets/Straight/Straight.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import UserBetsCard from '../BetsCard/BetsCard';
+const Straight = ({ bet, hideWagers }) => {
+    return (React.createElement(UserBetsCard, { focusKey: `bets-straight-card-${bet.id}`, bet: bet, hideWagers: hideWagers }));
+};
+export default Straight;

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

@@ -1,8 +1,7 @@
-import React from 'react';
 import { IUserBet } from '@/modules/bets/interfaces/IBets';
 type TeaserProps = {
     bet: IUserBet;
     hideWagers?: boolean;
 };
-declare const Teaser: ({ bet, hideWagers }: TeaserProps) => React.JSX.Element;
+declare const Teaser: ({ bet, hideWagers }: TeaserProps) => JSX.Element;
 export default Teaser;

package/dist/src/modules/bets/view/UserBets/Teaser/Teaser.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import UserBetsCard from '../BetsCard/BetsCard';
+const Teaser = ({ bet, hideWagers }) => {
+    const renderHeaderContent = () => {
+        return (React.createElement("div", null,
+            bet.legCount,
+            " Point",
+            bet.legCount !== 1 ? 's' : '',
+            " Teaser"));
+    };
+    return (React.createElement(UserBetsCard, { focusKey: `bets-teaser-card-${bet.id}`, bet: bet, renderHeaderContent: renderHeaderContent, hideWagers: hideWagers }));
+};
+export default Teaser;

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

@@ -17,9 +17,9 @@ declare class UserBetsView extends React.Component<UserBetsViewProps, {
     segmentItems: (SegmentItem & {
         type: Segments;
     })[];
-    renderBet: (bet: IUserBet) => React.JSX.Element | null;
-    renderBets: () => React.JSX.Element | (React.JSX.Element | null)[];
+    renderBet: (bet: IUserBet) => JSX.Element | null;
+    renderBets: () => JSX.Element | (JSX.Element | null)[];
     get bets(): IUserBet[] | null;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default UserBetsView;

package/dist/src/modules/bets/view/UserBets/UserBetsView.js

@@ -0,0 +1,107 @@
+import SegmentController from '@/components/organisms/SegmentController/SegmentController';
+import React from 'react';
+import './UserBetsView.styles.css';
+import Parlay from './Parlay/Parlay';
+import Boost from './Boost/Boost';
+import Straight from './Straight/Straight';
+import Teaser from './Teaser/Teaser';
+class UserBetsView extends React.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                activeSegment: this.props.item.data.defaultTab,
+            }
+        });
+        Object.defineProperty(this, "setSegment", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (segment) => {
+                return () => {
+                    if (this.state.activeSegment !== segment) {
+                        this.setState({ activeSegment: segment });
+                    }
+                };
+            }
+        });
+        Object.defineProperty(this, "segmentItems", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: [
+                {
+                    title: 'Live',
+                    type: 'live',
+                    onEnter: this.setSegment('live'),
+                },
+                {
+                    title: 'Settled',
+                    type: 'settled',
+                    onEnter: this.setSegment('settled'),
+                },
+                {
+                    title: 'Upcoming',
+                    type: 'upcoming',
+                    onEnter: this.setSegment('upcoming'),
+                },
+            ]
+        });
+        Object.defineProperty(this, "renderBet", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (bet) => {
+                const { hideWagers } = this.props.item;
+                switch (bet.type) {
+                    case 'PARLAY':
+                        return React.createElement(Parlay, { key: bet.id, bet: bet, hideWagers: hideWagers });
+                    case 'BOOST':
+                        return React.createElement(Boost, { key: bet.id, bet: bet, hideWagers: hideWagers });
+                    case 'STRAIGHT':
+                        return React.createElement(Straight, { key: bet.id, bet: bet, hideWagers: hideWagers });
+                    case 'TEASER':
+                        return React.createElement(Teaser, { key: bet.id, bet: bet, hideWagers: hideWagers });
+                    default:
+                        console.warn('unknown type', bet.type);
+                        return null;
+                }
+            }
+        });
+        Object.defineProperty(this, "renderBets", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                if (this.bets?.length) {
+                    return this.bets.map((bet) => this.renderBet(bet));
+                }
+                return (React.createElement("div", { className: "no-user-bets T05_ALT" },
+                    "No ",
+                    this.state.activeSegment,
+                    " Bets"));
+            }
+        });
+    }
+    get bets() {
+        switch (this.state.activeSegment) {
+            case 'live':
+                return this.props.item.data.bets.live;
+            case 'settled':
+                return this.props.item.data.bets.settled;
+            case 'upcoming':
+                return this.props.item.data.bets.upcoming;
+            default:
+                return null;
+        }
+    }
+    render() {
+        return (React.createElement("section", { className: "my-bets-view" },
+            React.createElement(SegmentController, { items: this.segmentItems }),
+            this.renderBets()));
+    }
+}
+export default UserBetsView;

package/dist/src/modules/bets/view/components/Bet/Bet.d.ts

@@ -4,10 +4,13 @@ import './Bet.styles.css';
 import { WithFocusableProps } from '@/external/spatial-navigation';
 import { IBetLeg } from '@/modules/bets/interfaces/IBets';
 declare const _default: {
-    new (props?: ({
+    new (props: ({
         leg: IBetLeg;
         hideWagers?: boolean | undefined;
-    } & WithFocusableProps) | undefined, context?: any): {
+    } & WithFocusableProps) | Readonly<{
+        leg: IBetLeg;
+        hideWagers?: boolean | undefined;
+    } & WithFocusableProps>): {
         state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState;
         navigation: import("../../../../../external/spatial-navigation/spatialNavigation").default;
         getChildContext(): {
@@ -30,35 +33,119 @@ declare const _default: {
         render(): React.ReactElement<{
             leg: IBetLeg;
             hideWagers?: boolean | undefined;
-        } & 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: {
+        } & 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<{
             leg: IBetLeg;
             hideWagers?: boolean | undefined;
-        } & 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<{
+        } & 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<{
             leg: IBetLeg;
             hideWagers?: boolean | undefined;
-        } & WithFocusableProps>;
-        context: any;
+        } & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
         refs: {
             [key: string]: React.ReactInstance;
         };
+        shouldComponentUpdate?(nextProps: Readonly<{
+            leg: IBetLeg;
+            hideWagers?: boolean | undefined;
+        } & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<{
+            leg: IBetLeg;
+            hideWagers?: boolean | undefined;
+        } & WithFocusableProps>, prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
         componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<{
             leg: IBetLeg;
             hideWagers?: boolean | undefined;
         } & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{
+            leg: IBetLeg;
+            hideWagers?: boolean | undefined;
+        } & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<{
+            leg: IBetLeg;
+            hideWagers?: boolean | undefined;
+        } & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<{
+            leg: IBetLeg;
+            hideWagers?: boolean | undefined;
+        } & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    new (props: {
+        leg: IBetLeg;
+        hideWagers?: boolean | undefined;
+    } & 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<{
+            leg: IBetLeg;
+            hideWagers?: boolean | undefined;
+        } & 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<{
+            leg: IBetLeg;
+            hideWagers?: boolean | undefined;
+        } & 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<{
+            leg: IBetLeg;
+            hideWagers?: boolean | undefined;
+        } & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
         shouldComponentUpdate?(nextProps: Readonly<{
             leg: IBetLeg;
             hideWagers?: boolean | undefined;
         } & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<{
+            leg: IBetLeg;
+            hideWagers?: boolean | undefined;
+        } & WithFocusableProps>, prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<{
+            leg: IBetLeg;
+            hideWagers?: boolean | undefined;
+        } & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{
+            leg: IBetLeg;
+            hideWagers?: boolean | undefined;
+        } & WithFocusableProps>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<{
             leg: IBetLeg;
             hideWagers?: boolean | undefined;
         } & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<{
+            leg: IBetLeg;
+            hideWagers?: boolean | undefined;
+        } & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
     };
     contextTypes: {
         parentFocusKey: import("prop-types").Requireable<string>;
@@ -66,5 +153,6 @@ declare const _default: {
     childContextTypes: {
         parentFocusKey: import("prop-types").Requireable<string>;
     };
+    contextType?: React.Context<any> | undefined;
 };
 export default _default;