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

package/dist/src/components/atoms/SvgIcon/Icon.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import KeyPlaysIcon from './KeyPlaysIcon';
+import PlayIcon from './PlayIcon';
+import BetsIcon from './BetsIcon';
+import StatsIcon from './StatsIcon';
+import WarningIcon from './WarningIcon';
+import ExpandIcon from './ExpandIcon';
+import CollapseIcon from './CollapseIcon';
+import TimesIcon from './TimesIcon';
+import CheckmarkIcon from './CheckmarkIcon';
+import FlameIcon from './FlameIcon';
+import BetsWarningIcon from './BetsWarningIcon';
+import MobilePhoneIcon from './MobilePhoneIcon';
+import FantasyIcon from './FantasyIcon';
+import ShopIcon from './ShopIcon';
+const iconImports = {
+    keyPlays: KeyPlaysIcon,
+    play: PlayIcon,
+    bets: BetsIcon,
+    stats: StatsIcon,
+    warning: WarningIcon,
+    expand: ExpandIcon,
+    collapse: CollapseIcon,
+    times: TimesIcon,
+    checkmark: CheckmarkIcon,
+    flame: FlameIcon,
+    betsWarning: BetsWarningIcon,
+    mobilePhone: MobilePhoneIcon,
+    fantasy: FantasyIcon,
+    shop: ShopIcon,
+};
+// Skeleton component for loading state
+const Skeleton = (props) => (React.createElement("div", { style: { width: props.width, height: props.height } }));
+class Icon extends React.Component {
+    render() {
+        const { iconName, width, height } = this.props;
+        const IconComponent = iconImports[iconName];
+        if (!IconComponent) {
+            return React.createElement(Skeleton, { width: width, height: height });
+        }
+        return React.createElement(IconComponent, { iconName: iconName, width: width, height: height });
+    }
+}
+export default Icon;

package/dist/src/components/atoms/SvgIcon/KeyPlaysIcon.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IconProps } from './Icon';
 declare class KeyPlaysIcon extends React.Component<IconProps, {}> {
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default KeyPlaysIcon;

package/dist/src/components/atoms/SvgIcon/KeyPlaysIcon.js

@@ -0,0 +1,10 @@
+import React from 'react';
+class KeyPlaysIcon extends React.Component {
+    render() {
+        return (React.createElement("svg", { width: this.props.width, height: this.props.height, viewBox: "0 0 30 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { d: "M27.375 4.75H2.625V7H27.375V4.75Z", fill: "white" }),
+            React.createElement("path", { d: "M25.125 0.25H4.875V2.5H25.125V0.25Z", fill: "white" }),
+            React.createElement("path", { d: "M0.375 9.25V31.75H29.625V9.25H0.375ZM11.625 26.125V14.875L20.625 20.5L11.625 26.125Z", fill: "white" })));
+    }
+}
+export default KeyPlaysIcon;

package/dist/src/components/atoms/SvgIcon/MobilePhoneIcon.d.ts

@@ -2,6 +2,6 @@ import React from 'react';
 import { IconProps } from './Icon';
 declare class MobilePhoneIcon extends React.Component<IconProps> {
     constructor(props: IconProps);
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default MobilePhoneIcon;

package/dist/src/components/atoms/SvgIcon/MobilePhoneIcon.js

@@ -0,0 +1,11 @@
+import React from 'react';
+class MobilePhoneIcon extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (React.createElement("svg", { width: this.props.width, height: this.props.height, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.33333 1.66663C8.04467 1.66663 7 2.7113 7 3.99996V28C7 29.2886 8.04467 30.3333 9.33333 30.3333H22.6667C23.9553 30.3333 25 29.2886 25 28V3.99996C25 2.7113 23.9553 1.66663 22.6667 1.66663H9.33333ZM9 7.66663V23H23V7.66663H9ZM18 26H14V27.3333H18V26Z", fill: "#6C6E6F" })));
+    }
+}
+export default MobilePhoneIcon;

package/dist/src/components/atoms/SvgIcon/PlayIcon.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IconProps } from './Icon';
 declare class PlayIcon extends React.Component<IconProps, {}> {
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default PlayIcon;

package/dist/src/components/atoms/SvgIcon/PlayIcon.js

@@ -0,0 +1,8 @@
+import React from 'react';
+class PlayIcon extends React.Component {
+    render() {
+        return (React.createElement("svg", { width: this.props.width, height: this.props.height, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18.1891 8.29879C18.6116 8.5331 18.9367 8.80345 19.162 9.10985C19.3873 9.41624 19.5 9.71863 19.5 10.019C19.5 10.3194 19.396 10.6158 19.1837 10.9102C18.9713 11.2026 18.6463 11.4669 18.2108 11.7012L10.9111 15.6724L3.58975 19.6035C3.15207 19.8378 2.74256 19.9679 2.36122 19.994C1.98204 20.02 1.65703 19.9619 1.38836 19.8177C1.12185 19.6735 0.905177 19.4453 0.742673 19.1328C0.582335 18.8204 0.5 18.4419 0.5 17.9994V2.00062C0.5 1.55805 0.573669 1.17956 0.721006 0.867153C0.87051 0.554748 1.09152 0.326452 1.38836 0.182265C1.6852 0.0380777 2.02104 -0.0199976 2.39372 0.00603615C2.76639 0.0340725 3.16507 0.164241 3.58975 0.398545L10.9111 4.36769L18.1891 8.29879Z", fill: "white" })));
+    }
+}
+export default PlayIcon;

package/dist/src/components/atoms/SvgIcon/ShopIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { IconProps } from './Icon';
 export default class ShopIcon extends React.Component<IconProps> {
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }

package/dist/src/components/atoms/SvgIcon/ShopIcon.js

@@ -0,0 +1,7 @@
+import React from 'react';
+export default class ShopIcon extends React.Component {
+    render() {
+        return (React.createElement("svg", { width: this.props.width, height: this.props.height, viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.3745 7.5V9.375H6.45201L4.99216 29.813C4.88362 31.3325 6.08709 32.625 7.61049 32.625H28.3886C29.912 32.625 31.1154 31.3325 31.0069 29.813L29.547 9.375H23.6245V7.5C23.6245 4.3934 21.1061 1.875 17.9995 1.875C14.8929 1.875 12.3745 4.3934 12.3745 7.5ZM17.9995 4.125C16.1356 4.125 14.6245 5.63604 14.6245 7.5V9.375H21.3745V7.5C21.3745 5.63604 19.8635 4.125 17.9995 4.125ZM12.3745 14.25V11.625H14.6245V14.25C14.6245 14.8713 14.1208 15.375 13.4995 15.375C12.8782 15.375 12.3745 14.8713 12.3745 14.25ZM21.3745 14.25V11.625H23.6245V14.25C23.6245 14.8713 23.1208 15.375 22.4995 15.375C21.8782 15.375 21.3745 14.8713 21.3745 14.25Z", fill: "white" })));
+    }
+}

package/dist/src/components/atoms/SvgIcon/StatsIcon.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IconProps } from './Icon';
 declare class StatsIcon extends React.Component<IconProps, {}> {
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default StatsIcon;

package/dist/src/components/atoms/SvgIcon/StatsIcon.js

@@ -0,0 +1,12 @@
+import React from 'react';
+class StatsIcon extends React.Component {
+    render() {
+        return (React.createElement("svg", { width: this.props.width, height: this.props.height, viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("g", { clipPath: "url(#clip0_538_5831)" },
+                React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.5925 1.7998V32.6941H10.4849V14.8588H3.671V32.6941H0.899902V34.7641H35.099V32.6941H32.3603V8.0125H25.514V32.6941H21.4397V1.7998H14.5925Z", fill: "#9DA0A6" })),
+            React.createElement("defs", null,
+                React.createElement("clipPath", { id: "clip0_538_5831" },
+                    React.createElement("rect", { width: "36", height: "36", fill: "white" })))));
+    }
+}
+export default StatsIcon;

package/dist/src/components/atoms/SvgIcon/TimesIcon.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { IconProps } from './Icon';
-declare const TimesIcon: (props: IconProps) => React.JSX.Element;
+declare const TimesIcon: (props: IconProps) => JSX.Element;
 export default TimesIcon;

package/dist/src/components/atoms/SvgIcon/TimesIcon.js

@@ -0,0 +1,6 @@
+import React from 'react';
+const TimesIcon = (props) => {
+    return (React.createElement("svg", { width: props.width, height: props.height, viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.29999 3.73242L12.8 10.2324L19.3 3.73242L21.0678 5.50019L14.5678 12.0002L21.0678 18.5002L19.3 20.268L12.8 13.768L6.29999 20.268L4.53223 18.5002L11.0322 12.0002L4.53223 5.50019L6.29999 3.73242Z", fill: "#FF7F7F" })));
+};
+export default TimesIcon;

package/dist/src/components/atoms/SvgIcon/WarningIcon.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IconProps } from './Icon';
 declare class WarningIcon extends React.Component<IconProps, {}> {
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default WarningIcon;

package/dist/src/components/atoms/SvgIcon/WarningIcon.js

@@ -0,0 +1,8 @@
+import React from 'react';
+class WarningIcon extends React.Component {
+    render() {
+        return (React.createElement("svg", { width: this.props.width, height: this.props.height, viewBox: "0 0 22 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.0022 0.75L21.8012 19.4545H0.203125L11.0022 0.75ZM11.7522 13.5V7.5H10.2522V13.5H11.7522ZM11.8022 14.95H10.2022V16.55H11.8022V14.95Z", fill: "#F58B00" })));
+    }
+}
+export default WarningIcon;

package/dist/src/components/atoms/SvgIcon/index.js

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

package/dist/src/components/core/App/App.d.ts

@@ -6,6 +6,6 @@ declare class App extends React.Component<{
     get colors(): import("@/models/ITheme").IThemeColors;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default App;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { DARK_THEME } from '@/services/ThemeManager/constants';
+import './App.styles.css';
+import SDK from '@/index';
+const FONT_FAMILY_MAP = {
+    body: 'BentonSans',
+    headline: 'BentonSansBold',
+    title: 'BentonSansMedium',
+};
+class App extends React.Component {
+    get colors() {
+        const config = SDK.getPageConfig();
+        return config?.theme?.colors || DARK_THEME.colors;
+    }
+    componentDidMount() {
+        Object.keys(this.colors).forEach((key) => {
+            document.documentElement.style.setProperty(`--sdk-${key}`, this.colors[key]);
+        });
+        Object.keys(FONT_FAMILY_MAP).forEach((key) => {
+            document.documentElement.style.setProperty(`--sdk-font-${key}`, FONT_FAMILY_MAP[key]);
+        });
+    }
+    componentWillUnmount() {
+        Object.keys(this.colors).forEach((key) => {
+            document.documentElement.style.removeProperty(`--sdk-${key}`);
+        });
+        Object.keys(FONT_FAMILY_MAP).forEach((key) => {
+            document.documentElement.style.removeProperty(`--sdk-font-${key}`);
+        });
+    }
+    render() {
+        return React.createElement("div", { className: "sdk-wrapper" }, this.props.children);
+    }
+}
+export default App;

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

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

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

@@ -0,0 +1,58 @@
+import React from 'react';
+const OverlayContainer = React.createClass({
+    propTypes: {
+        viewModels: React.PropTypes.object,
+    },
+    getInitialState() {
+        return {
+            isVisible: false,
+            currentOverlay: null,
+        };
+    },
+    componentDidMount() {
+        if (!this.props.viewModels?.overlayViewModel)
+            return;
+        const overlayVM = this.props.viewModels.overlayViewModel;
+        // Subscribe to overlay visibility changes
+        this.unsubscribeVisible = overlayVM.isVisible.subscribe((visible) => {
+            this.setState({ isVisible: visible });
+        });
+        // Subscribe to current overlay changes
+        this.unsubscribeOverlay = overlayVM.currentOverlay.subscribe((overlay) => {
+            this.setState({ currentOverlay: overlay });
+        });
+    },
+    componentWillUnmount() {
+        if (this.unsubscribeVisible)
+            this.unsubscribeVisible();
+        if (this.unsubscribeOverlay)
+            this.unsubscribeOverlay();
+    },
+    render() {
+        if (!this.state.isVisible || !this.state.currentOverlay) {
+            return null;
+        }
+        const overlay = this.state.currentOverlay;
+        const Overlay = require('../molecules/Overlay').default;
+        return React.createElement(Overlay, {
+            key: `overlay-${overlay.type}-${Date.now()}`,
+            id: 'sdk-managed-rive-overlay',
+            overlayType: overlay.type,
+            position: overlay.position,
+            winningBet: overlay.winningBet,
+            fantasy: overlay.fantasy,
+            onOverlayViewed: (overlayType) => {
+                if (this.props.viewModels?.overlayViewModel) {
+                    this.props.viewModels.overlayViewModel.handleOverlayViewed(overlayType);
+                }
+            },
+            onOverlayAction: (overlayType) => {
+                if (this.props.viewModels?.overlayViewModel) {
+                    this.props.viewModels.overlayViewModel.handleOverlayAction(overlayType);
+                    this.props.viewModels.overlayViewModel.hideOverlay();
+                }
+            },
+        });
+    },
+});
+export default OverlayContainer;

package/dist/src/components/core/PanelManager/PanelManager.d.ts

@@ -16,6 +16,6 @@ declare class PanelManager extends React.Component<{}, PanelManagerState> {
     componentDidMount(): void;
     componentWillUnmount(): void;
     goToPanel(panel: MaestroPanelType): () => void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default PanelManager;

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

@@ -0,0 +1,86 @@
+import React from 'react';
+import './PanelManager.styles.css';
+import PanelNavigation from '@/components/organisms/PanelNavigation';
+import KeyPlaysView from '@/modules/key-plays/view/KeyPlaysView';
+import BetsView from '@/modules/bets/view/BetsView';
+import StatsView from '@/modules/stats/view';
+import SDK from '@/index';
+import FantasyView from '@/modules/fantasy/view';
+import ShopView from '@/modules/shop/view';
+const PANELS_MAP = {
+    keyPlays: React.createElement(KeyPlaysView, null),
+    bets: React.createElement(BetsView, null),
+    stats: React.createElement(StatsView, null),
+    fantasy: React.createElement(FantasyView, null),
+    shop: React.createElement(ShopView, null),
+};
+class PanelManager extends React.Component {
+    constructor(props) {
+        super(props);
+        Object.defineProperty(this, "unsubscribe", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "panelsUnsubscribe", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "viewModel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.viewModel = SDK.getMaestroEventViewModel().panelManagerViewModel;
+        this.state = {
+            activePanel: this.viewModel.currentPanel,
+            visiblePanels: this.viewModel.panelsObservable.value,
+        };
+    }
+    componentDidMount() {
+        // Subscribe to changes in the current panel
+        this.unsubscribe = this.viewModel.currentPanelObservable.subscribe(() => {
+            this.setState({ activePanel: this.viewModel.currentPanel });
+        });
+        // Subscribe to changes in the visible panels
+        this.panelsUnsubscribe = this.viewModel.panelsObservable.subscribe((panels) => {
+            this.setState({ visiblePanels: panels });
+        });
+    }
+    componentWillUnmount() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+            this.unsubscribe = null;
+        }
+        if (this.panelsUnsubscribe) {
+            this.panelsUnsubscribe();
+            this.panelsUnsubscribe = null;
+        }
+    }
+    goToPanel(panel) {
+        return () => {
+            if (this.viewModel.currentPanel === panel) {
+                return;
+            }
+            this.viewModel.currentPanel = panel;
+        };
+    }
+    render() {
+        const { activePanel, visiblePanels } = this.state;
+        // Create panel items only for visible panels
+        const PANEL_ITEMS = visiblePanels.map((panel) => ({
+            iconName: panel.type,
+            onEnter: this.goToPanel(panel.type),
+            title: panel.title,
+            active: activePanel === panel.type,
+        }));
+        return (React.createElement("div", { className: "sdk--panel-manager" },
+            React.createElement(PanelNavigation, { items: PANEL_ITEMS }),
+            activePanel && (React.createElement("div", { className: "sdk--panel-wrapper" }, PANELS_MAP[activePanel]))));
+    }
+}
+export default PanelManager;

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

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

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { DEFAULT_SCROLLABLE_CONTAINER_CONTEXT, SCROLLABLE_CONTEXT_TYPE, } from './ScrollableContainer';
+/**
+ * Component to be used as a child of `ScrollableContainer`.
+ * Wraps the focusable item and registers it in the context
+ */
+class FocusableItem extends React.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "ref", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "context", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: DEFAULT_SCROLLABLE_CONTAINER_CONTEXT
+        });
+    }
+    componentDidMount() {
+        if (this.ref && this.context.setRef) {
+            this.context.setRef(this.ref);
+        }
+    }
+    render() {
+        return (React.createElement("div", { className: "focusable-item", ref: (e) => (this.ref = e) }, this.props.children));
+    }
+}
+Object.defineProperty(FocusableItem, "contextTypes", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: SCROLLABLE_CONTEXT_TYPE
+});
+export default FocusableItem;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import './ScrollableContainer.styles.css';
 import { Layout } from '@/external/spatial-navigation/utils';
 export interface ScrollableContainerContextType {
@@ -55,9 +56,9 @@ declare class ScrollableContainer extends React.Component<ScrollableContainerPro
     };
     setRef: (ref: HTMLElement) => void;
     static childContextTypes: {
-        refsMap: React.Requireable<any>;
-        setRef: React.Requireable<any>;
-        scrollToFocusedElement: React.Requireable<any>;
+        refsMap: PropTypes.Requireable<(HTMLElement | null | undefined)[]>;
+        setRef: PropTypes.Requireable<(...args: any[]) => any>;
+        scrollToFocusedElement: PropTypes.Requireable<(...args: any[]) => any>;
     };
     getOrderedRefs: () => HTMLElement[];
     /**
@@ -66,12 +67,12 @@ declare class ScrollableContainer extends React.Component<ScrollableContainerPro
     private scrollToFocusedElement;
     getChildContext(): ScrollableContainerContextType;
     componentWillUnmount(): void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export declare const DEFAULT_SCROLLABLE_CONTAINER_CONTEXT: ScrollableContainerContextType;
 export declare const SCROLLABLE_CONTEXT_TYPE: {
-    refsMap: React.Requireable<any>;
-    setRef: React.Requireable<any>;
-    scrollToFocusedElement: React.Requireable<any>;
+    refsMap: PropTypes.Requireable<(HTMLElement | null | undefined)[]>;
+    setRef: PropTypes.Requireable<(...args: any[]) => any>;
+    scrollToFocusedElement: PropTypes.Requireable<(...args: any[]) => any>;
 };
 export default ScrollableContainer;

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

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

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

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