chore(example): update example isRootActive

Author: Pierre Poupin

packages/example/src/design-system/components/Button.tsx

@@ -26,7 +26,9 @@ ButtonContent.displayName = 'ButtonContent';
 export const Button = ({ label, onSelect }: ButtonProps) => {
   return (
     <SpatialNavigationFocusableView onSelect={onSelect}>
-      {({ isFocused }) => <ButtonContent label={label} isFocused={isFocused} />}
+      {({ isFocused, isRootActive }) => (
+        <ButtonContent label={label} isFocused={isFocused && isRootActive} />
+      )}
     </SpatialNavigationFocusableView>
   );
 };

packages/example/src/modules/program/view/ProgramNode.tsx

@@ -22,8 +22,8 @@ export const ProgramNode = forwardRef<SpatialNavigationNodeRef, Props>(
         viewProps={{ accessibilityLabel: programInfo.title }}
         ref={ref}
       >
-        {({ isFocused }) => (
-          <Program isFocused={isFocused} programInfo={programInfo} label={label} />
+        {({ isFocused, isRootActive }) => (
+          <Program isFocused={isFocused && isRootActive} programInfo={programInfo} label={label} />
         )}
       </SpatialNavigationFocusableView>
     );

packages/example/src/modules/program/view/ProgramNodeLandscape.tsx

@@ -12,8 +12,12 @@ type Props = {
 export const ProgramNodeLandscape = ({ programInfo, onSelect, label }: Props) => {
   return (
     <SpatialNavigationFocusableView onSelect={onSelect}>
-      {({ isFocused }) => (
-        <ProgramLandscape isFocused={isFocused} programInfo={programInfo} label={label} />
+      {({ isFocused, isRootActive }) => (
+        <ProgramLandscape
+          isFocused={isFocused && isRootActive}
+          programInfo={programInfo}
+          label={label}
+        />
       )}
     </SpatialNavigationFocusableView>
   );