@maestro_io/maestro-web-sdk 4.0.2 → 5.1.0

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@maestro_io/maestro-web-sdk",
     "private": false,
-    "version": "4.0.0",
+    "version": "5.0.0",
     "type": "commonjs",
     "license": "MIT",
     "main": "dist/maestro-web-sdk.umd.js",
@@ -29,10 +29,12 @@
         "lint": "eslint src --ext .ts,.tsx --ignore-pattern '**/*.test.*'",
         "test": "jest",
         "build": "webpack --config webpack/webpack.prod.js && tsc --emitDeclarationOnly --declarationDir dist/types && dts-bundle --name @maestro_io/maestro-web-sdk --main dist/types/src/index.d.ts --out ../../index.d.ts && rm -rf dist/types",
-        "types": "tsc -b"
+        "types": "tsc -b",
+        "analyze": "ANALYZE=true webpack --config webpack/webpack.prod.js",
+        "format": "prettier --write .",
+        "format:check": "prettier --check ."
     },
     "devDependencies": {
-        "dts-bundle": "^0.7.3",
         "@babel/core": "7.12.3",
         "@babel/plugin-proposal-class-properties": "7.12.1",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
@@ -50,6 +52,7 @@
         "babel-jest": "26.6.3",
         "babel-loader": "8",
         "css-loader": "5",
+        "dts-bundle": "^0.7.3",
         "enzyme": "3.11.0",
         "enzyme-adapter-react-16": "1.15.7",
         "eslint": "6.8.0",
@@ -68,14 +71,13 @@
         "tsconfig-paths-webpack-plugin": "^4.2.0",
         "typescript": "^4",
         "webpack": "4",
+        "webpack-bundle-analyzer": "3.9.0",
         "webpack-cli": "3.3.12",
         "webpack-dev-server": "3.11.2"
     },
     "dependencies": {
-        "@rive-app/canvas": "^2.27.3",
         "@sentry/browser": "7.68.0",
         "axios": "^0.27.2",
-        "flexibility": "^2.0.1",
         "prop-types": "15.8.1",
         "react": "16.14.0",
         "react-dom": "16.14.0"

package/dist/src/components/atoms/Rive/index.d.ts

@@ -21,11 +21,12 @@ declare const _default: {
             parentFocusKey: string;
         };
         setFocus: (focusKey: string) => void;
-        navigateByDirection: (direction: import("../../../external/spatial-navigation/utils").Direction, details?: Record<string, any>) => void;
+        navigateByDirection: (direction: import("../../../external/spatial-navigation/utils").Direction, details?: import("../../../external/spatial-navigation/utils").Details) => void;
         stealFocus: () => void;
         onUpdateFocus: (focused: boolean) => void;
         onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
         onEnterPressHandler: (details: import("../../../external/spatial-navigation/utils").Details) => void;
+        onClickPressHandler: (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;
@@ -121,11 +122,12 @@ declare const _default: {
             parentFocusKey: string;
         };
         setFocus: (focusKey: string) => void;
-        navigateByDirection: (direction: import("../../../external/spatial-navigation/utils").Direction, details?: Record<string, any>) => void;
+        navigateByDirection: (direction: import("../../../external/spatial-navigation/utils").Direction, details?: import("../../../external/spatial-navigation/utils").Details) => void;
         stealFocus: () => void;
         onUpdateFocus: (focused: boolean) => void;
         onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
         onEnterPressHandler: (details: import("../../../external/spatial-navigation/utils").Details) => void;
+        onClickPressHandler: (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;

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

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+const BuilderIcon = (props) => {
+    return (React.createElement("svg", { width: props.width, height: props.height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M5.25 1.25C3.84987 1.25 3.1498 1.25 2.61502 1.52248C2.14462 1.76217 1.76217 2.14462 1.52248 2.61502C1.25 3.1498 1.25 3.84987 1.25 5.25V18.75C1.25 20.1501 1.25 20.8502 1.52248 21.385C1.76217 21.8554 2.14462 22.2378 2.61502 22.4775C3.1498 22.75 3.84987 22.75 5.25 22.75H6.75C8.15013 22.75 8.8502 22.75 9.38498 22.4775C9.85538 22.2378 10.2378 21.8554 10.4775 21.385C10.75 20.8502 10.75 20.1501 10.75 18.75V5.25C10.75 3.84987 10.75 3.1498 10.4775 2.61502C10.2378 2.14462 9.85538 1.76217 9.38498 1.52248C8.8502 1.25 8.15013 1.25 6.75 1.25H5.25Z", fill: "#F3F7FF" }),
+        React.createElement("path", { d: "M13.25 5.25C13.25 3.84987 13.25 3.1498 13.5225 2.61502C13.7622 2.14462 14.1446 1.76217 14.615 1.52248C15.1498 1.25 15.8499 1.25 17.25 1.25H18.75C20.1501 1.25 20.8502 1.25 21.385 1.52248C21.8554 1.76217 22.2378 2.14462 22.4775 2.61502C22.75 3.1498 22.75 3.84987 22.75 5.25V6.75C22.75 8.15013 22.75 8.8502 22.4775 9.38498C22.2378 9.85538 21.8554 10.2378 21.385 10.4775C20.8502 10.75 20.1501 10.75 18.75 10.75H17.25C15.8499 10.75 15.1498 10.75 14.615 10.4775C14.1446 10.2378 13.7622 9.85538 13.5225 9.38498C13.25 8.8502 13.25 8.15013 13.25 6.75V5.25Z", fill: "#F3F7FF" }),
+        React.createElement("path", { d: "M17.25 13.25C15.8499 13.25 15.1498 13.25 14.615 13.5225C14.1446 13.7622 13.7622 14.1446 13.5225 14.615C13.25 15.1498 13.25 15.8499 13.25 17.25V18.75C13.25 20.1501 13.25 20.8502 13.5225 21.385C13.7622 21.8554 14.1446 22.2378 14.615 22.4775C15.1498 22.75 15.8499 22.75 17.25 22.75H18.75C20.1501 22.75 20.8502 22.75 21.385 22.4775C21.8554 22.2378 22.2378 21.8554 22.4775 21.385C22.75 20.8502 22.75 20.1501 22.75 18.75V17.25C22.75 15.8499 22.75 15.1498 22.4775 14.615C22.2378 14.1446 21.8554 13.7622 21.385 13.5225C20.8502 13.25 20.1501 13.25 18.75 13.25H17.25Z", fill: "#F3F7FF" })));
+};
+export default BuilderIcon;

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

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

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

@@ -0,0 +1,7 @@
+import React from 'react';
+const FoxKeyPlays = (props) => {
+    return (React.createElement("svg", { width: props.width, height: props.height, viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { opacity: "0.32", d: "M7.6902 12.1923C6.29977 14.2689 4.875 17.2976 4.875 21C4.875 28.4437 10.6329 34.125 18 34.125C25.3671 34.125 31.125 28.4437 31.125 21C31.125 14.4646 27.9227 9.69389 24.7909 6.59775C22.435 4.26863 19.7633 2.75674 16.875 1.21655C16.875 3.5901 19.6772 16.875 15 16.875C11.2618 16.875 12.375 9.95151 12.375 7.32813C10.5553 8.86421 9.06483 10.1393 7.6902 12.1923Z", fill: "white" }),
+        React.createElement("path", { d: "M4.875 21.3387C4.875 28.5 10.5 34.125 18 34.125C25.5 34.125 31.125 28.478 31.125 21C31.125 21 30.6562 26.2742 27.2812 26.2742C23.9062 26.2742 23.0625 18.0484 23.0625 18.0484C23.0625 18.0484 21.375 27.9194 16.3125 27.9194C7.5375 27.9194 7.92375 13.9355 10.455 9C10.455 9 4.875 13.5 4.875 21.3387Z", fill: "white" })));
+};
+export default FoxKeyPlays;

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+const FoxMultiView = (props) => {
+    return (React.createElement("svg", { width: props.width, height: props.height, viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("g", { opacity: "0.32" },
+            React.createElement("path", { d: "M7.5 22.875C5.75272 22.875 4.87908 22.875 4.18994 23.1604C3.27108 23.5411 2.54105 24.2711 2.16045 25.1899C1.875 25.8791 1.875 26.7527 1.875 28.5C1.875 30.2473 1.875 31.1209 2.16045 31.8101C2.54105 32.7289 3.27108 33.4589 4.18994 33.8395C4.87908 34.125 5.75272 34.125 7.5 34.125H10.5C12.2473 34.125 13.1209 34.125 13.8101 33.8395C14.7289 33.4589 15.4589 32.7289 15.8395 31.8101C16.125 31.1209 16.125 30.2473 16.125 28.5C16.125 26.7527 16.125 25.8791 15.8395 25.1899C15.4589 24.2711 14.7289 23.5411 13.8101 23.1604C13.1209 22.875 12.2473 22.875 10.5 22.875H7.5Z", fill: "white" }),
+            React.createElement("path", { d: "M19.875 7.5C19.875 5.75272 19.875 4.87908 20.1604 4.18994C20.5411 3.27108 21.2711 2.54105 22.1899 2.16045C22.8791 1.875 23.7527 1.875 25.5 1.875H28.5C30.2473 1.875 31.1209 1.875 31.8101 2.16045C32.7289 2.54105 33.4589 3.27108 33.8395 4.18994C34.125 4.87908 34.125 5.75272 34.125 7.5C34.125 9.24728 34.125 10.1209 33.8395 10.8101C33.4589 11.7289 32.7289 12.4589 31.8101 12.8395C31.1209 13.125 30.2473 13.125 28.5 13.125H25.5C23.7527 13.125 22.8791 13.125 22.1899 12.8395C21.2711 12.4589 20.5411 11.7289 20.1604 10.8101C19.875 10.1209 19.875 9.24728 19.875 7.5Z", fill: "white" })),
+        React.createElement("path", { d: "M1.875 7.875C1.875 5.7748 1.875 4.7247 2.28373 3.92254C2.64325 3.21693 3.21693 2.64325 3.92254 2.28373C4.7247 1.875 5.7748 1.875 7.875 1.875H10.125C12.2252 1.875 13.2753 1.875 14.0775 2.28373C14.7831 2.64325 15.3567 3.21693 15.7163 3.92254C16.125 4.7247 16.125 5.7748 16.125 7.875V13.125C16.125 15.2252 16.125 16.2753 15.7163 17.0775C15.3567 17.7831 14.7831 18.3567 14.0775 18.7163C13.2753 19.125 12.2252 19.125 10.125 19.125H7.875C5.7748 19.125 4.7247 19.125 3.92254 18.7163C3.21693 18.3567 2.64325 17.7831 2.28373 17.0775C1.875 16.2753 1.875 15.2252 1.875 13.125V7.875Z", fill: "white" }),
+        React.createElement("path", { d: "M25.875 16.875C23.7748 16.875 22.7247 16.875 21.9225 17.2837C21.2169 17.6432 20.6432 18.2169 20.2837 18.9225C19.875 19.7247 19.875 20.7748 19.875 22.875V28.125C19.875 30.2252 19.875 31.2753 20.2837 32.0775C20.6432 32.7831 21.2169 33.3567 21.9225 33.7163C22.7247 34.125 23.7748 34.125 25.875 34.125H28.125C30.2252 34.125 31.2753 34.125 32.0775 33.7163C32.7831 33.3567 33.3567 32.7831 33.7163 32.0775C34.125 31.2753 34.125 30.2252 34.125 28.125V22.875C34.125 20.7748 34.125 19.7247 33.7163 18.9225C33.3567 18.2169 32.7831 17.6432 32.0775 17.2837C31.2753 16.875 30.2252 16.875 28.125 16.875H25.875Z", fill: "white" })));
+};
+export default FoxMultiView;

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

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

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

@@ -0,0 +1,7 @@
+import React from 'react';
+const FoxStats = (props) => {
+    return (React.createElement("svg", { width: props.width, height: props.height, viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("rect", { opacity: "0.32", x: "2.25", y: "2.25", width: "31.5", height: "31.5", rx: "6.3", fill: "white" }),
+        React.createElement("path", { d: "M17.8648 25.6875L17.8648 10.5M10.9492 25.6875L10.9492 18.9375M24.5456 25.6875L24.5456 16.3125", stroke: "white", strokeWidth: "3", strokeLinecap: "round" })));
+};
+export default FoxStats;

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

@@ -1,29 +1,5 @@
 import React from 'react';
-import KeyPlaysIcon from './KeyPlaysIcon';
-import PlayIcon from './PlayIcon';
-import StatsIcon from './StatsIcon';
-import WarningIcon from './WarningIcon';
-import FlameIcon from './FlameIcon';
-import BetsWarningIcon from './BetsWarningIcon';
-import MobilePhoneIcon from './MobilePhoneIcon';
-import FantasyIcon from './FantasyIcon';
-import ShopIcon from './ShopIcon';
-declare const iconImports: {
-    keyPlays: typeof KeyPlaysIcon;
-    play: typeof PlayIcon;
-    bets: (props: IconProps) => JSX.Element;
-    stats: typeof StatsIcon;
-    warning: typeof WarningIcon;
-    expand: (props: IconProps) => JSX.Element;
-    collapse: (props: IconProps) => JSX.Element;
-    times: (props: IconProps) => JSX.Element;
-    checkmark: (props: IconProps) => JSX.Element;
-    flame: typeof FlameIcon;
-    betsWarning: typeof BetsWarningIcon;
-    mobilePhone: typeof MobilePhoneIcon;
-    fantasy: typeof FantasyIcon;
-    shop: typeof ShopIcon;
-};
+declare const iconImports: Record<string, React.LazyExoticComponent<any>>;
 export type IconsName = keyof typeof iconImports;
 export type IconProps = {
     iconName: IconsName;

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

@@ -1,23 +1,42 @@
-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,
+import React, { Suspense, lazy } from 'react';
+import { MaestroPanelType } from '@/models/IPanel';
+// Lazy load all icon components
+const KeyPlaysIcon = lazy(() => import('./KeyPlaysIcon'));
+const PlayIcon = lazy(() => import('./PlayIcon'));
+const BetsIcon = lazy(() => import('./BetsIcon'));
+const StatsIcon = lazy(() => import('./StatsIcon'));
+const WarningIcon = lazy(() => import('./WarningIcon'));
+const ExpandIcon = lazy(() => import('./ExpandIcon'));
+const CollapseIcon = lazy(() => import('./CollapseIcon'));
+const TimesIcon = lazy(() => import('./TimesIcon'));
+const CheckmarkIcon = lazy(() => import('./CheckmarkIcon'));
+const FlameIcon = lazy(() => import('./FlameIcon'));
+const BetsWarningIcon = lazy(() => import('./BetsWarningIcon'));
+const MobilePhoneIcon = lazy(() => import('./MobilePhoneIcon'));
+const FantasyIcon = lazy(() => import('./FantasyIcon'));
+const ShopIcon = lazy(() => import('./ShopIcon'));
+const HelloWorldIcon = lazy(() => import('./HelloWorldIcon'));
+const ChatIcon = lazy(() => import('./ChatIcon'));
+const ShopifyIcon = lazy(() => import('./ShopifyIcon'));
+const BuilderIcon = lazy(() => import('./BuilderIcon'));
+const FoxKeyPlaysIcon = lazy(() => import('./FoxKeyPlaysIcon'));
+const FoxStatsIcon = lazy(() => import('./FoxStatsIcon'));
+const FoxMultiViewIcon = lazy(() => import('./FoxMultiViewIcon'));
+// Ensures all MaestroPanelType values have icons
+const panelIcons = {
+    [MaestroPanelType.ESPN_KEY_PLAYS]: KeyPlaysIcon,
+    [MaestroPanelType.ESPN_BETS]: BetsIcon,
+    [MaestroPanelType.ESPN_STATS]: StatsIcon,
+    [MaestroPanelType.ESPN_FANTASY]: FantasyIcon,
+    [MaestroPanelType.ESPN_SHOP]: ShopIcon,
+    [MaestroPanelType.HELLO_WORLD]: HelloWorldIcon,
+    [MaestroPanelType.FOX_STATS]: FoxStatsIcon,
+    [MaestroPanelType.FOX_KEY_PLAYS]: FoxKeyPlaysIcon,
+    [MaestroPanelType.FOX_MULTI_VIEW]: FoxMultiViewIcon,
+    [MaestroPanelType.BUILDER_BLOCK_PANEL]: BuilderIcon,
+};
+const otherIcons = {
     play: PlayIcon,
-    bets: BetsIcon,
-    stats: StatsIcon,
     warning: WarningIcon,
     expand: ExpandIcon,
     collapse: CollapseIcon,
@@ -26,8 +45,12 @@ const iconImports = {
     flame: FlameIcon,
     betsWarning: BetsWarningIcon,
     mobilePhone: MobilePhoneIcon,
-    fantasy: FantasyIcon,
-    shop: ShopIcon,
+    chat: ChatIcon,
+    shopifyBlockPanel: ShopifyIcon,
+};
+const iconImports = {
+    ...panelIcons,
+    ...otherIcons,
 };
 // Skeleton component for loading state
 const Skeleton = (props) => (React.createElement("div", { style: { width: props.width, height: props.height } }));
@@ -38,7 +61,8 @@ class Icon extends React.Component {
         if (!IconComponent) {
             return React.createElement(Skeleton, { width: width, height: height });
         }
-        return React.createElement(IconComponent, { iconName: iconName, width: width, height: height });
+        return (React.createElement(Suspense, { fallback: React.createElement(Skeleton, { width: width, height: height }) },
+            React.createElement(IconComponent, { iconName: iconName, width: width, height: height })));
     }
 }
 export default Icon;

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

@@ -1,18 +1,31 @@
-import React from 'react';
+import React, { Suspense, lazy } 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';
+// Lazy load panel components
+const KeyPlaysView = lazy(() => import('@/modules/espn/key-plays/view/KeyPlaysView'));
+const BetsView = lazy(() => import('@/modules/espn/bets/view/BetsView'));
+const StatsView = lazy(() => import('@/modules/espn/stats/view'));
+const FantasyView = lazy(() => import('@/modules/espn/fantasy/view'));
+const ShopView = lazy(() => import('@/modules/espn/shop/view'));
+const HelloWorldView = lazy(() => import('@/modules/maestro/hello-world'));
+const BuilderView = lazy(() => import('@/modules/maestro/builder'));
+const FoxKeyPlays = lazy(() => import('@/modules/fox/key-plays/view/FoxKeyPlays'));
+const FoxMultiView = lazy(() => import('@/modules/fox/multi-view/view/FoxMultiView'));
+const FoxStatsView = lazy(() => import('@/modules/fox/stats/view/FoxStatsView'));
+// Loading fallback component
+const PanelLoading = () => React.createElement("div", { className: "sdk--panel-loading" });
 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),
+    espnKeyPlays: KeyPlaysView,
+    espnBet: BetsView,
+    espnStats: StatsView,
+    espnFantasy: FantasyView,
+    espnShop: ShopView,
+    helloWorld: HelloWorldView,
+    foxKeyPlays: FoxKeyPlays,
+    foxMultiview: FoxMultiView,
+    foxStats: FoxStatsView,
+    builderBlockPanel: BuilderView,
 };
 class PanelManager extends React.Component {
     constructor(props) {
@@ -78,9 +91,12 @@ class PanelManager extends React.Component {
             title: panel.title,
             active: activePanel === panel.type,
         }));
+        const ActivePanelComponent = activePanel ? PANELS_MAP[activePanel] : null;
         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]))));
+            ActivePanelComponent && (React.createElement("div", { className: "sdk--panel-wrapper" },
+                React.createElement(Suspense, { fallback: React.createElement(PanelLoading, null) },
+                    React.createElement(ActivePanelComponent, null))))));
     }
 }
 export default PanelManager;

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

@@ -2,5 +2,10 @@ import React from 'react';
 type Props = {
     children: React.ReactNode;
 };
-declare const _default: React.ComponentType<Props>;
-export default _default;
+/**
+ * Component to be used as a child of `ScrollableContainer`.
+ * Wraps the focusable item and registers it in the context.
+ * Automatically unregisters on unmount to prevent memory leaks.
+ */
+declare const FocusableItem: React.FC<Props>;
+export default FocusableItem;

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

@@ -1,38 +1,24 @@
-import React from 'react';
-import { DEFAULT_SCROLLABLE_CONTAINER_CONTEXT, SCROLLABLE_CONTEXT_TYPE, } from './ScrollableContainer';
+import React, { useEffect, useRef } from 'react';
+import { useScrollableContainer } from './useScrollableContainer';
 /**
  * Component to be used as a child of `ScrollableContainer`.
- * Wraps the focusable item and registers it in the context
+ * Wraps the focusable item and registers it in the context.
+ * Automatically unregisters on unmount to prevent memory leaks.
  */
-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);
+const FocusableItem = ({ children }) => {
+    const ref = useRef(null);
+    const { setRef, removeRef } = useScrollableContainer();
+    useEffect(() => {
+        const element = ref.current;
+        if (element) {
+            setRef(element);
         }
-    }
-    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
-});
+        return () => {
+            if (element) {
+                removeRef(element);
+            }
+        };
+    }, [setRef, removeRef]);
+    return (React.createElement("div", { className: "focusable-item", ref: ref }, children));
+};
 export default FocusableItem;

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import './ScrollableContainer.styles.css';
 import { Layout } from '@/external/spatial-navigation/utils';
 export interface ScrollableContainerContextType {
@@ -8,6 +7,11 @@ export interface ScrollableContainerContextType {
      * This is used to register the item in the context so it can be focused later.
      */
     setRef: (ref: HTMLElement) => void;
+    /**
+     * Removes a reference for a focusable item.
+     * This is used to unregister the item when it unmounts to prevent memory leaks.
+     */
+    removeRef: (ref: HTMLElement) => void;
     /**
      * Called when an item is focused.
      * This function scrolls the container to the focused item if necessary.
@@ -15,11 +19,6 @@ export interface ScrollableContainerContextType {
     scrollToFocusedElement: (layout: Layout, options?: {
         offsetTop?: number;
     }) => void;
-    /**
-     * An array of all registered focusable items.
-     * This is used to determine the order of focusable items.
-     */
-    refsMap: HTMLElement[];
 }
 type ScrollableContainerProps = {
     children?: React.ReactNode;
@@ -34,6 +33,10 @@ type ScrollableContainerProps = {
      */
     containerTopOffset?: number;
 } & React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Context for ScrollableContainer
+ */
+export declare const ScrollableContainerContext: React.Context<ScrollableContainerContextType>;
 /**
  * ScrollableContainer component provides a context for focusable items
  * that allows them to register themselves and handle scrolling
@@ -47,32 +50,5 @@ type ScrollableContainerProps = {
  * </ScrollableContainer>
  * ```
  */
-declare class ScrollableContainer extends React.Component<ScrollableContainerProps> {
-    private refsMap;
-    private hash;
-    private lastHash;
-    state: {
-        scrolled: boolean;
-    };
-    setRef: (ref: HTMLElement) => void;
-    static childContextTypes: {
-        refsMap: PropTypes.Requireable<(HTMLElement | null | undefined)[]>;
-        setRef: PropTypes.Requireable<(...args: any[]) => any>;
-        scrollToFocusedElement: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    getOrderedRefs: () => HTMLElement[];
-    /**
-     * @description - Scrolls the container to the focused element if necessary
-     */
-    private scrollToFocusedElement;
-    getChildContext(): ScrollableContainerContextType;
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-}
-export declare const DEFAULT_SCROLLABLE_CONTAINER_CONTEXT: ScrollableContainerContextType;
-export declare const SCROLLABLE_CONTEXT_TYPE: {
-    refsMap: PropTypes.Requireable<(HTMLElement | null | undefined)[]>;
-    setRef: PropTypes.Requireable<(...args: any[]) => any>;
-    scrollToFocusedElement: PropTypes.Requireable<(...args: any[]) => any>;
-};
+export declare const ScrollableContainer: React.FC<ScrollableContainerProps>;
 export default ScrollableContainer;