@applicaster/zapp-react-native-ui-components 14.0.0-alpha.3514550494 → 14.0.0-alpha.3652810444

package/Components/Cell/Cell.tsx

@@ -8,7 +8,6 @@ import { getItemType } from "@applicaster/zapp-react-native-utils/navigationUtil
 import { SCREEN_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/itemTypes";
 import { sendSelectCellEvent } from "@applicaster/zapp-react-native-utils/analyticsUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
-import { CellFocusedStateContextProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/CellFocusedStateContext";
 
 import { CellWithFocusable } from "./CellWithFocusable";
 import { BaseFocusable } from "../BaseFocusable";
@@ -16,7 +15,6 @@ import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUt
 import { styles } from "./styles";
 
 type Props = {
-  dataLength: number;
   item: ZappEntry;
   index: number;
   shouldScrollHorizontally: (arg1: [any]) => boolean | null | undefined;
@@ -69,12 +67,9 @@ type Props = {
 
 type State = {
   hasFocusableInside: boolean;
-  cellFocused: boolean;
 };
 
 export class CellComponent extends React.Component<Props, State> {
-  accessibilityManager: AccessibilityManager;
-
   constructor(props) {
     super(props);
     this.onPress = this.onPress.bind(this);
@@ -84,14 +79,10 @@ export class CellComponent extends React.Component<Props, State> {
     this.hasReceivedFocus = this.hasReceivedFocus.bind(this);
     this.scrollVertically = this.scrollVertically.bind(this);
     this.scrollToIndex = this.scrollToIndex.bind(this);
-    this.handleAccessibilityFocus = this.handleAccessibilityFocus.bind(this);
 
     this.state = {
       hasFocusableInside: props.CellRenderer.hasFocusableInside?.(props.item),
-      cellFocused: false,
     };
-
-    this.accessibilityManager = AccessibilityManager.getInstance();
   }
 
   setScreenLayout(componentAnchorPointY, screenLayout) {
@@ -139,8 +130,6 @@ export class CellComponent extends React.Component<Props, State> {
     } = this.props;
 
     if (isFocusable) {
-      this.setState({ cellFocused: true });
-
       if (
         shouldUpdate &&
         shouldScrollVertically?.(mouse, focusable, id, title)
@@ -150,9 +139,7 @@ export class CellComponent extends React.Component<Props, State> {
     }
   }
 
-  onBlur() {
-    this.setState({ cellFocused: false });
-  }
+  onBlur() {}
 
   willReceiveFocus() {}
 
@@ -196,25 +183,6 @@ export class CellComponent extends React.Component<Props, State> {
     return !isFocusable ? false : focused || focusableFocused;
   }
 
-  handleAccessibilityFocus(index, dataLength) {
-    // For loop scrolling, calculate the correct logical index
-    const logicalIndex = dataLength ? index % dataLength : index;
-
-    const positionLabel = dataLength
-      ? `item ${logicalIndex + 1} of ${dataLength}`
-      : "";
-
-    if (this.state.hasFocusableInside) {
-      this.accessibilityManager.readText({
-        text: " ",
-      });
-    } else {
-      this.accessibilityManager.readText({
-        text: `${positionLabel}`,
-      });
-    }
-  }
-
   componentDidUpdate(prevProps: Readonly<Props>) {
     if (prevProps.item !== this.props.item) {
       this.setState({
@@ -223,8 +191,6 @@ export class CellComponent extends React.Component<Props, State> {
         ),
       });
     }
-
-    this.handleAccessibilityFocus(this.props.index, this.props.dataLength);
   }
 
   render() {
@@ -246,6 +212,7 @@ export class CellComponent extends React.Component<Props, State> {
     } = this.props;
 
     const { id } = item;
+
     const focusableId = join("-", [component?.id, id, index]);
 
     const handleFocus = (focusable, mouse) => {
@@ -256,67 +223,73 @@ export class CellComponent extends React.Component<Props, State> {
 
     if (this.state.hasFocusableInside) {
       return (
-        <CellFocusedStateContextProvider cellFocused={this.state.cellFocused}>
-          <CellWithFocusable
-            CellRenderer={CellRenderer}
-            item={item}
-            id={focusableId}
-            groupId={groupId || component?.id}
-            onFocus={handleFocus}
-            onBlur={onBlur || this.onBlur}
-            index={index}
-            scrollTo={this.scrollToIndex()}
-            isFocusable={isFocusable}
-            skipFocusManagerRegistration={skipFocusManagerRegistration}
-            behavior={behavior}
-          />
-        </CellFocusedStateContextProvider>
+        <CellWithFocusable
+          CellRenderer={CellRenderer}
+          item={item}
+          id={focusableId}
+          groupId={groupId || component?.id}
+          onFocus={handleFocus}
+          index={index}
+          scrollTo={this.scrollToIndex()}
+          isFocusable={isFocusable}
+          skipFocusManagerRegistration={skipFocusManagerRegistration}
+          behavior={behavior}
+        />
       );
     }
 
     return (
-      <CellFocusedStateContextProvider cellFocused={this.state.cellFocused}>
-        <View
-          testID={`${component?.id}-${id}`}
-          accessible={false}
-          style={styles.touchableCell}
+      <View
+        testID={`${component?.id}-${id}`}
+        accessible={false}
+        style={styles.touchableCell}
+      >
+        <Focusable
+          id={focusableId}
+          groupId={groupId || component?.id}
+          onFocus={handleFocus}
+          onBlur={onBlur || this.onBlur}
+          onPress={this.onPress}
+          willReceiveFocus={willReceiveFocus || this.willReceiveFocus}
+          hasReceivedFocus={hasReceivedFocus || this.hasReceivedFocus}
+          preferredFocus={preferredFocus}
+          offsetUpdater={offsetUpdater}
+          style={styles.baseCell}
+          isFocusable={isFocusable}
+          skipFocusManagerRegistration={skipFocusManagerRegistration}
         >
-          <Focusable
-            id={focusableId}
-            groupId={groupId || component?.id}
-            onFocus={handleFocus}
-            onBlur={onBlur || this.onBlur}
-            onPress={this.onPress}
-            willReceiveFocus={willReceiveFocus || this.willReceiveFocus}
-            hasReceivedFocus={hasReceivedFocus || this.hasReceivedFocus}
-            preferredFocus={preferredFocus}
-            offsetUpdater={offsetUpdater}
-            style={styles.baseCell}
-            isFocusable={isFocusable}
-            skipFocusManagerRegistration={skipFocusManagerRegistration}
-            {...this.accessibilityManager.getButtonAccessibilityProps(
-              item?.extensions?.accessibility?.label || item?.title
-            )}
-          >
-            {(focused, event) => {
-              const isFocused = this.isCellFocused(focused);
-
-              return (
-                <FocusableCell
-                  {...{
-                    index,
-                    CellRenderer,
-                    item,
-                    focused: isFocused,
-                    scrollTo: this.scrollToIndex(event),
-                    behavior,
-                  }}
-                />
-              );
-            }}
-          </Focusable>
-        </View>
-      </CellFocusedStateContextProvider>
+          {(focused, event) => {
+            const isFocused = this.isCellFocused(focused);
+
+            if (isFocused) {
+              const accessibilityManager = AccessibilityManager.getInstance();
+
+              const accessibilityTitle =
+                item?.extensions?.accessibility?.label || item?.title || "";
+
+              const accessibilityHint =
+                item?.extensions?.accessibility?.hint || "";
+
+              accessibilityManager.readText({
+                text: `${accessibilityTitle} ${accessibilityHint}`,
+              });
+            }
+
+            return (
+              <FocusableCell
+                {...{
+                  index,
+                  CellRenderer,
+                  item,
+                  focused: isFocused,
+                  scrollTo: this.scrollToIndex(event),
+                  behavior,
+                }}
+              />
+            );
+          }}
+        </Focusable>
+      </View>
     );
   }
 }

package/Components/Cell/CellWithFocusable.tsx

@@ -14,7 +14,6 @@ type Props = {
   id: string;
   groupId: string;
   onFocus: Function;
-  onBlur?: Function;
   index: number;
   scrollTo: Function;
   preferredFocus?: boolean;
@@ -34,7 +33,6 @@ export function CellWithFocusable(props: Props) {
     id,
     groupId,
     onFocus,
-    onBlur = noop,
     scrollTo = noop,
     preferredFocus,
     skipFocusManagerRegistration,
@@ -80,7 +78,6 @@ export function CellWithFocusable(props: Props) {
   const onGroupBlur = React.useCallback(() => {
     if (!skipFocusManagerRegistration) {
       setIsFocused(false);
-      onBlur?.();
     }
   }, [skipFocusManagerRegistration]);
 

package/Components/FeedLoader/FeedLoader.tsx

@@ -8,7 +8,7 @@ type Props = {
     typeof import("@applicaster/zapp-react-native-utils/reactHooks/feed").useLoadPipesDataDispatch
   >;
   feedUrl: string;
-  children: (feed: ZappFeed) => React.ComponentType<any>;
+  children: (feed: ZappFeed) => React.ReactNode;
   onFeedLoaded: (feed: ZappFeed) => {};
   onError: (error: ZappPipesData["error"]) => {};
   refreshing: boolean;

package/Components/Focusable/Focusable.tsx

@@ -6,7 +6,6 @@ import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focu
 import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
 import { withFocusableContext } from "../../Contexts/FocusableGroupContext/withFocusableContext";
 import { StyleSheet, ViewStyle } from "react-native";
-import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 
 type Props = {
   initialFocus?: boolean;
@@ -21,7 +20,7 @@ type Props = {
   onPressOut?: () => void;
   onLongPress?: () => void;
   handleFocus?: ({ mouse }: { mouse: boolean }) => void;
-  children: (boolean, string) => React.ComponentType<any>;
+  children: (boolean, string) => React.ReactNode;
   selected?: boolean;
   style?: ViewStyle[] | ViewStyle;
 };
@@ -30,7 +29,6 @@ class Focusable extends BaseFocusable<Props> {
   isGroup: boolean;
   mouse: boolean;
   longPressTimeout = null;
-  accessibilityManager: AccessibilityManager;
 
   constructor(props) {
     super(props);
@@ -45,8 +43,6 @@ class Focusable extends BaseFocusable<Props> {
     this.resetLongPressTimeout = this.resetLongPressTimeout.bind(this);
     this.longPress = this.longPress.bind(this);
     this.press = this.press.bind(this);
-
-    this.accessibilityManager = AccessibilityManager.getInstance();
   }
 
   /**
@@ -127,15 +123,12 @@ class Focusable extends BaseFocusable<Props> {
   }
 
   render() {
-    const { children, style } = this.props;
+    const { children, style, ...otherProps } = this.props;
     const { focused } = this.state;
 
     const id = this.getId();
     const focusableId = `focusable-${id}`;
 
-    const accessibilityProps =
-      this.accessibilityManager.getWebAccessibilityProps(this.props);
-
     return (
       <div
         id={focusableId}
@@ -148,7 +141,7 @@ class Focusable extends BaseFocusable<Props> {
         data-testid={focusableId}
         focused-teststate={focused ? "focused" : "default"}
         style={StyleSheet.flatten(style) as any as React.CSSProperties}
-        {...accessibilityProps}
+        {...otherProps}
       >
         {children(focused, { mouse: this.mouse })}
       </div>

package/Components/Focusable/FocusableTvOS.tsx

@@ -19,7 +19,7 @@ type Props = {
   onPress?: (nativeEvent: any) => void;
   onFocus?: (nativeEvent: any) => void;
   onBlur?: (nativeEvent: any) => void;
-  children: (focused?: boolean) => React.ReactNode;
+  children: ((focused?: boolean) => React.ReactNode) | React.ReactNode;
   isParallaxDisabled: boolean;
   preferredFocus?: boolean;
   selected?: boolean;
@@ -204,7 +204,7 @@ export class Focusable extends BaseFocusable<Props> {
         {...this.nextFocusableReactTags}
         {...otherProps}
       >
-        {R.is(Function, children) ? children(focused) : children}
+        {typeof children === "function" ? children(focused) : children}
       </FocusableItemNative>
     );
   }

package/Components/Focusable/Touchable.tsx

@@ -9,7 +9,8 @@ type Props = {
   onLongPress?: (ref: FocusManager.TouchableRef) => void;
   onFocus?: (
     ref: FocusManager.TouchableRef,
-    options: FocusManager.Android.CallbackOptions
+    options: FocusManager.Android.CallbackOptions,
+    context: Option<FocusManager.FocusContext>
   ) => void;
   onBlur?: (
     ref: FocusManager.TouchableRef,
@@ -18,6 +19,7 @@ type Props = {
 
   disableFocus?: boolean;
   blockFocus?: boolean;
+  isSelected: (id?: string) => boolean;
 } & Partial<ParentFocus>;
 
 export class Touchable extends React.Component<Props> {
@@ -39,9 +41,10 @@ export class Touchable extends React.Component<Props> {
 
   onFocus(
     focusableRef: FocusManager.TouchableRef,
-    options: FocusManager.Android.CallbackOptions
+    options: FocusManager.Android.CallbackOptions,
+    context: Option<FocusManager.FocusContext>
   ): void {
-    this.props?.onFocus?.(focusableRef, options);
+    this.props?.onFocus?.(focusableRef, options, context);
   }
 
   onBlur(

package/Components/Focusable/index.android.tsx

@@ -22,7 +22,8 @@ type Props = {
   onPress?: (ref: FocusManager.FocusableRef) => void;
   onFocus?: (
     ref: FocusManager.FocusableRef,
-    options: FocusManager.Android.CallbackOptions
+    options: FocusManager.Android.CallbackOptions,
+    context?: FocusManager.FocusContext
   ) => void;
   onBlur?: (
     ref: FocusManager.FocusableRef,
@@ -32,9 +33,11 @@ type Props = {
   onPressOut?: (ref: FocusManager.FocusableRef) => void;
   onLongPress?: (ref: FocusManager.FocusableRef) => void;
   onRegister?: () => void;
+  onUnregister?: () => void;
   isFocusableCell?: boolean;
   /** only for FocusableScrollView */
   onSetIsFocusable?: (isFocusable: boolean) => void;
+  isSelected?: (id?: string) => boolean;
 } & ParentFocus;
 
 export const FocusableContext = React.createContext<
@@ -70,8 +73,10 @@ function FocusableComponent(props: Props, forwardedRef) {
     onPressOut,
     onLongPress,
     onRegister = noop,
+    onUnregister = noop,
     isFocusableCell = true,
     onSetIsFocusable,
+    isSelected,
   } = props;
 
   const isRTL = useIsRTL();
@@ -113,9 +118,10 @@ function FocusableComponent(props: Props, forwardedRef) {
 
       return () => {
         unregister();
+        onUnregister();
       };
     }
-  }, [id, onRegister, isFocusableCell, parentFocusableId]);
+  }, [id, onRegister, onUnregister, isFocusableCell, parentFocusableId]);
 
   if (R.isNil(id)) {
     // eslint-disable-next-line no-console
@@ -125,9 +131,9 @@ function FocusableComponent(props: Props, forwardedRef) {
   }
 
   const _onFocus = React.useCallback(
-    (ref, options) => {
+    (ref, options, context) => {
       setFocused(true);
-      onFocus?.(ref, options);
+      onFocus?.(ref, options, context);
     },
     [onFocus]
   );
@@ -183,6 +189,7 @@ function FocusableComponent(props: Props, forwardedRef) {
       blockFocus={blockFocus}
       onPressIn={onPressIn}
       onPressOut={onPressOut}
+      isSelected={isSelected}
       {...parentFocus}
     >
       <FocusableContext.Provider value={contextState}>

package/Components/FocusableGroup/FocusableTvOS.tsx

@@ -22,7 +22,7 @@ type FocusableGroupNativeEvent = {
 
 type Props = {
   id: string;
-  children: (arg1: boolean) => React.ComponentType<any>;
+  children: React.ReactNode;
   isFocusDisabled: boolean;
   isWithMemory: boolean;
   focusGroupRef: React.Component;

package/Components/FocusableList/FocusableItem.tsx

@@ -10,7 +10,8 @@ type FocusableItemComponentProps = {
   onFocus: (
     element: FocusManager.FocusableRef,
     renderArgs: { item: FocusableItemComponentProps["item"]; index: number },
-    direction: FocusManager.Android.FocusNavigationDirections
+    options: FocusManager.Android.CallbackOptions,
+    context: Option<FocusManager.FocusContext>
   ) => void;
   onListElementFocus?: (any, RenderItemProps, Direction) => void;
   onListElementBlur?: (any, RenderItemProps, Direction) => void;
@@ -45,8 +46,8 @@ const FocusableItemComponent = ({
   const renderArgs = { item, index };
 
   const onFocusHandler = React.useCallback(
-    (element, direction) => {
-      onFocus?.(element, renderArgs, direction);
+    (element, options, context) => {
+      onFocus?.(element, renderArgs, options, context);
     },
     [item, onFocus]
   );
@@ -79,6 +80,19 @@ const FocusableItemComponent = ({
     [item, onListElementPressOut]
   );
 
+  const isSelected = React.useCallback(
+    (itemId: Option<string>) => {
+      if (itemId) {
+        // case for checking tab item into screen-picker is selected
+        return itemId === item.id;
+      }
+
+      // case for checking top-navbar item is selected
+      return item?.data?.target === extraChildrenData;
+    },
+    [item, extraChildrenData]
+  );
+
   return (
     <Focusable
       nextFocusDown={nextFocusDown}
@@ -91,6 +105,7 @@ const FocusableItemComponent = ({
       onLongPress={onLongPressHandler}
       onPressOut={onPressOutHandler}
       id={id}
+      isSelected={isSelected}
       {...focusableItemProps}
     >
       <FocusableChild

package/Components/FocusableList/FocusableListItemWrapper.tsx

@@ -17,7 +17,8 @@ type Props = {
   onFocus: (
     element: FocusManager.FocusableRef,
     renderArgs: { item: Item; index: number },
-    direction: FocusManager.Android.FocusNavigationDirections
+    options: FocusManager.Android.CallbackOptions,
+    context: FocusManager.FocusContext
   ) => void;
   onListElementBlur?: (any, RenderItemProps, Direction) => void;
   onListElementPress?: (any, RenderItemProps) => void;

package/Components/FocusableList/hooks/useCellState.android.ts

@@ -10,15 +10,25 @@ export const useCellState = (id: string) => {
   );
 
   React.useEffect(() => {
-    const handler = (focusable) => {
+    const focusHandler = (focusable) => {
       const isChildren = focusManager.isFocusableChildOf(focusable, id);
+
       setCurrentCellFocused(isChildren);
     };
 
-    focusManager.on(FOCUS_EVENTS.FOCUS, handler);
+    focusManager.on(FOCUS_EVENTS.FOCUS, focusHandler);
+
+    const resetHandler = ({ focusedId }) => {
+      if (id === focusedId) {
+        setCurrentCellFocused(false);
+      }
+    };
+
+    focusManager.on(FOCUS_EVENTS.RESET, resetHandler);
 
     return () => {
-      focusManager.removeHandler(FOCUS_EVENTS.FOCUS, handler);
+      focusManager.removeHandler(FOCUS_EVENTS.FOCUS, focusHandler);
+      focusManager.removeHandler(FOCUS_EVENTS.RESET, resetHandler);
     };
   }, [id]);
 

package/Components/FocusableList/index.tsx

@@ -20,27 +20,34 @@ import { FocusableScrollView } from "../FocusableScrollView";
 const mapIndexed = R.addIndex(R.map);
 
 export type IListRenderItem<ItemT> = (
-  info: IListRenderItemInfo<ItemT> & {
+  info: {
     focused: boolean;
     onLoadFinished: () => void;
     onLoadFailed: () => void;
-  }
+  } & IListRenderItemInfo<ItemT>
 ) => React.ReactElement | null;
 
 export const getFocusableId = (parentId, index) =>
   `${parentId}___index:${index}`;
 
+type Item = ZappEntry | ZappUIComponent | any;
+
 export type Props<ItemT> = FlatListProps<ItemT> & {
   id?: number | string;
   horizontal?: boolean;
   loop?: boolean;
   numColumns?: number;
   data: ZappEntry[] | ZappUIComponent[] | any[];
-  onListElementFocus?: (any, RenderItemProps, Direction) => void;
-  onListElementBlur?: (any, RenderItemProps, Direction) => void;
-  onListElementPress?: (any, RenderItemProps) => void;
-  onListElementPressOut?: (any, RenderItemProps) => void;
-  onListElementLongPress?: (any, RenderItemProps) => void;
+  onListElementFocus?: (
+    element: FocusManager.FocusableRef,
+    renderItemProps: { item: Item; index: number },
+    options: FocusManager.Android.CallbackOptions,
+    context: FocusManager.FocusContext
+  ) => void;
+  onListElementBlur?: (element, renderItemProps, direction) => void;
+  onListElementPress?: (element, renderItemProps) => void;
+  onListElementPressOut?: (element, renderItemProps) => void;
+  onListElementLongPress?: (element, renderItemProps) => void;
   focusableItemProps?: any;
   focused?: boolean;
   initialScrollIndex?: number;
@@ -138,11 +145,11 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
   );
 
   const onFocus = React.useCallback(
-    (element, renderArgs, direction) => {
+    (element, renderArgs, options, context) => {
       const { index } = renderArgs;
 
       updateFocusedIndex?.(index);
-      onListElementFocus?.(element, renderArgs, direction);
+      onListElementFocus?.(element, renderArgs, options, context);
     },
     [onListElementFocus, updateFocusedIndex]
   );

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -49,7 +49,9 @@ function getAssetValue(asset, flavour, fallbackAsset = null) {
   return asset.src || fallbackAsset;
 }
 
-export function ActionButton(props: Props) {
+export const ActionButton = React.memo(function ActionButtonComponent(
+  props: Props
+) {
   const { item, action, asset, flavour = "flavour_1", cellUUID } = props;
   const actionContext = useActions(action?.identifier);
 
@@ -120,4 +122,4 @@ export function ActionButton(props: Props) {
       )}
     </TouchableOpacity>
   );
-}
+});

package/Components/MasterCell/DefaultComponents/FocusableView/index.tsx

@@ -4,6 +4,7 @@ import { Focusable } from "@applicaster/zapp-react-native-ui-components/Componen
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 const { Logger } = getXray();
 
@@ -43,6 +44,11 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
 
   const actionContext = useActions(pluginIdentifier);
 
+  const accessibilityManager = useAccessibilityManager({});
+
+  const { ttsLabel = "" } =
+    actionContext?.initialEntryState(item)?.getAccessibility?.(item) || {};
+
   const onPress = (event) => {
     event?.preventDefault?.();
 
@@ -65,6 +71,12 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
       focusedButtonId,
       mouse: focusable.mouse,
     });
+
+    if (ttsLabel) {
+      accessibilityManager.readText({
+        text: ttsLabel,
+      });
+    }
   };
 
   const handleBlur = (_focusable, _direction) => {