@applicaster/zapp-react-native-ui-components 15.1.13-alpha.1034774223 → 15.1.13

package/Components/ModalComponent/AudioPlayer/Components/index.ts

@@ -1,11 +1,7 @@
-export { AudioPlayerAction } from "./Action";
+export { Item as AudioPlayerItem } from "./Item";
 
-export { AudioPlayerButton, VARIANT_WITH_ICON } from "./Button";
+export { Item as AudioPlayerHeader } from "./Header";
 
-export { AudioPlayerHeader } from "./Header";
+export { Item as AudioPlayerButton } from "./Button";
 
-export { AudioPlayerTrackItem } from "./Item";
-
-export { NowPlayingHeaderSection } from "./NowPlayingHeaderSection";
-
-export { AudioPlayerInput } from "./Input";
+export { Item as AudioPlayerAction } from "./Action";

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -1,54 +1,16 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import {
-  ActivityIndicator,
-  ScrollView,
-  StyleSheet,
-  Text,
-  View,
-} from "react-native";
+import { View, ScrollView } from "react-native";
 import { Button } from "./Button";
 import { ItemIconProps } from "./Button/ItemIcon";
 import { ItemProps } from "./Button/Item";
 import { ItemLabelProps } from "./Button/ItemLabel";
 import { getItemIconProps, getItemLabelProps, getItemProps } from "./utils";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import {
-  ContentViewModel,
-  OPERATIONS,
-  hasOperation,
-  useBottomSheetContent,
-} from "@applicaster/zapp-react-native-utils/modalState";
-import { getCell } from "./presets";
 import type { PluginConfiguration } from "./";
+
 import { ModalHeader as DefaultModalHeader } from "./Header";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { SortableList } from "./SortableList";
-import {
-  AudioPlayerButton,
-  NowPlayingHeaderSection,
-  VARIANT_WITH_ICON,
-} from "./AudioPlayer/Components";
 import { BottomSheetDragArea } from "./BottomSheetDragArea";
-import { ModalBlocksStyleContext } from "./ModalBlocksStyleContext";
-import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
-import {
-  ModalBlocksConfig,
-  parseModalBlocksConfiguration,
-} from "@applicaster/zapp-react-native-utils/configurationUtils/modalBlocksParser";
-import { useLocalizedStrings } from "@applicaster/zapp-react-native-utils/localizationUtils";
-
-const styles = StyleSheet.create({
-  centered: {
-    justifyContent: "center",
-    alignItems: "center",
-    padding: 16,
-  },
-  errorText: {
-    color: "#ff453a",
-    fontSize: 14,
-    textAlign: "center",
-  },
-});
 
 type ModalComponentProps = {
   items: any[];
@@ -60,7 +22,13 @@ type ModalComponentProps = {
   title?: string;
   maxHeight?: number;
   dismiss: () => void;
-  headerComponent?: React.ComponentType<any>;
+  headerComponent?: React.ComponentType;
+
+  scrollViewContent?: {
+    renderItem: (item: any, index: number) => React.ReactNode;
+    items: any[];
+  } | null;
+
   buttonComponent?: React.ComponentType;
   iconProps?: ItemIconProps | ((theme: PluginConfiguration) => ItemIconProps);
   itemProps?:
@@ -69,18 +37,13 @@ type ModalComponentProps = {
   labelProps?:
     | ItemLabelProps
     | ((theme: PluginConfiguration, width: number) => ItemLabelProps);
-  getSelectedItemIcon?: (
+  getSelectedItemIcon: (
     theme: PluginConfiguration
   ) => ItemIconProps["asset"] | null;
-  getDefaultItemIcon?: (
+  getDefaultItemIcon: (
     theme: PluginConfiguration
   ) => ItemIconProps["asset"] | null;
   iconPlacement?: "left" | "right";
-  viewModel?: ContentViewModel;
-  /** Optional body that replaces the items list (header stays DefaultModalHeader). */
-  contentComponent?: React.ComponentType<any>;
-  contentComponentProps?: Record<string, any>;
-  styleOverrides?: ModalBlocksConfig | Record<string, any>;
 };
 
 export function BottomSheetModalContent(props: ModalComponentProps) {
@@ -92,17 +55,15 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     dismiss,
     summary,
     title,
-    headerComponent,
-    viewModel = null,
+    headerComponent = DefaultModalHeader,
+    scrollViewContent = null,
+
     buttonComponent: ButtonComponent = Button,
     getSelectedItemIcon = ({
       modal_bottom_sheet_item_selected_icon,
     }: BaseThemePropertiesMobile) => modal_bottom_sheet_item_selected_icon,
     getDefaultItemIcon = () => null,
     iconPlacement,
-    contentComponent: ContentComponent,
-    contentComponentProps = {},
-    styleOverrides: propStyleOverrides,
   } = props;
 
   const route = useRef(currentRoute);
@@ -110,67 +71,7 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
   const paddingTop = Number(theme.modal_bottom_sheet_padding_top);
   const paddingBottom = Number(theme.modal_bottom_sheet_padding_bottom);
 
-  const {
-    items: fetchedItems,
-    showCentralLoading,
-    error,
-    handleItemPress,
-    role,
-    behavior,
-    editableCollection,
-    themePluginId,
-  } = useBottomSheetContent({
-    onPress,
-    viewModel,
-  });
-
-  const plugins = usePlugins();
-
-  const plugin = useMemo(
-    () => plugins?.find((p) => p.identifier === themePluginId),
-    [plugins, themePluginId]
-  );
-
-  const styleOverrides = useMemo(() => {
-    if (propStyleOverrides) {
-      return propStyleOverrides;
-    }
-
-    const configuration =
-      plugin?.configuration || (plugin as any)?.configuration_json;
-
-    if (!configuration || !themePluginId) return null;
-
-    return parseModalBlocksConfiguration(configuration, themePluginId);
-  }, [propStyleOverrides, plugin, themePluginId]);
-
-  const pluginLocalizations = useLocalizedStrings({
-    localizations:
-      plugin?.configuration?.localizations ||
-      (plugin as any)?.configuration_json?.localizations,
-  });
-
-  const normalizedPluginId = themePluginId?.replace(/-/g, "_");
-
-  const localizedHeaderTitle = normalizedPluginId
-    ? pluginLocalizations?.[`${normalizedPluginId}_header_title`]
-    : undefined;
-
-  const createPlaylistTitle =
-    pluginLocalizations?.create_new_playlist_title || "Create New Playlist";
-
-  const resolvedTitle = props.title || localizedHeaderTitle || title;
-
-  const itemsToRender = viewModel ? fetchedItems : items;
-  const operations = editableCollection?.operations || [];
-  const isSortable = hasOperation(operations, OPERATIONS.REORDER);
-
-  const cell = getCell(
-    viewModel ? role : undefined,
-    viewModel ? behavior : undefined
-  );
-
-  const Header = headerComponent ?? DefaultModalHeader;
+  const Header = headerComponent;
 
   useEffect(() => {
     if (currentRoute !== route.current) {
@@ -183,24 +84,14 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
   }, [theme, props.iconProps]);
 
   const itemBaseProps = useMemo<ItemProps>(() => {
-    return getItemProps(
-      theme,
-      props.width,
-      props.itemProps,
-      styleOverrides?.item
-    );
-  }, [theme, props.width, props.itemProps, styleOverrides?.item]);
+    return getItemProps(theme, props.width, props.itemProps);
+  }, [theme, props.width, props.itemProps]);
 
   const labelBaseProps = useMemo<ItemLabelProps>(() => {
-    return getItemLabelProps(
-      theme,
-      props.width,
-      props.labelProps,
-      styleOverrides?.item
-    );
-  }, [theme, props.width, props.labelProps, styleOverrides?.item]);
+    return getItemLabelProps(theme, props.width, props.labelProps);
+  }, [theme, props.width, props.labelProps]);
 
-  const handleStaticPress = useCallback(
+  const handlePress = useCallback(
     (item: any) => {
       onPress(item);
       dismiss();
@@ -208,267 +99,58 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     [onPress, dismiss]
   );
 
-  const onItemPress = viewModel ? handleItemPress : handleStaticPress;
-
-  const handleDragEnd = useCallback(
-    (params: any) => {
-      const from = params?.fromIndex ?? params?.from;
-      const to = params?.toIndex ?? params?.to;
-
-      const reorderedItemIds = Array.isArray(params?.data)
-        ? params.data
-            .filter((item: any) => !item?.isHeader)
-            .map((item: any) => item?.id)
-            .filter(Boolean)
-        : undefined;
-
-      if (
-        (reorderedItemIds?.length ||
-          (typeof from === "number" &&
-            typeof to === "number" &&
-            from !== to)) &&
-        editableCollection?.move
-      ) {
-        editableCollection.move(reorderedItemIds || []);
-      }
-    },
-    [editableCollection]
-  );
-
-  const renderContext = useMemo(
-    () => ({
-      theme,
-      ButtonComponent,
-      current_selection,
-      iconBaseProps,
-      itemBaseProps,
-      labelBaseProps,
-      getSelectedItemIcon,
-      getDefaultItemIcon,
-      iconPlacement,
-      editableCollection,
-      behavior,
-    }),
-    [
-      theme,
-      ButtonComponent,
-      current_selection,
-      iconBaseProps,
-      itemBaseProps,
-      labelBaseProps,
-      getSelectedItemIcon,
-      getDefaultItemIcon,
-      iconPlacement,
-      editableCollection,
-      behavior,
-    ]
-  );
-
   const bottomInset = useSafeAreaInsets().bottom;
 
-  const hasNowPlaying = hasOperation(operations, OPERATIONS.NOW_PLAYING);
-  const hasClearAll = hasOperation(operations, OPERATIONS.CLEAR_ALL);
-  const hasAdd = hasOperation(operations, OPERATIONS.ADD);
-
-  const handleDeleteCollection = useCallback(() => {
-    editableCollection?.deleteCollection?.();
-  }, [editableCollection]);
-
-  const handleCreatePlaylist = useCallback(() => {
-    editableCollection?.add?.({
-      id: "create_new_playlist",
-      title: createPlaylistTitle,
-    });
-  }, [editableCollection, createPlaylistTitle]);
-
-  const headers = useMemo(() => {
-    const list: Array<{ index: number; component: () => React.ReactElement }> =
-      [];
-
-    if (hasNowPlaying) {
-      list.push({
-        index: list.length,
-        component: () => (
-          <NowPlayingHeaderSection
-            onClear={hasClearAll ? handleDeleteCollection : undefined}
-          />
-        ),
-      });
-    }
-
-    if (hasAdd) {
-      list.push({
-        index: list.length,
-        component: () => (
-          <View
-            style={{ paddingHorizontal: 20, paddingTop: 8, paddingBottom: 12 }}
-          >
-            <AudioPlayerButton
-              configuration={VARIANT_WITH_ICON}
-              data={{ title: createPlaylistTitle }}
-              onPress={handleCreatePlaylist}
-            />
-          </View>
-        ),
-      });
-    }
-
-    return list.length > 0 ? list : undefined;
-  }, [
-    hasNowPlaying,
-    hasClearAll,
-    handleDeleteCollection,
-    hasAdd,
-    handleCreatePlaylist,
-  ]);
-
-  const renderBody = () => {
-    if (ContentComponent) {
-      const shouldWrapInScrollView =
-        !contentComponentProps?.disableScrollViewWrap &&
-        !(ContentComponent as any)?.disableScrollViewWrap;
-
-      if (shouldWrapInScrollView) {
-        return (
-          <ScrollView
-            contentContainerStyle={{
-              paddingBottom: paddingBottom + bottomInset,
-            }}
-          >
-            <ContentComponent
-              {...contentComponentProps}
-              dismiss={dismiss}
-              width={props.width}
-              maxHeight={props.maxHeight}
-            />
-          </ScrollView>
-        );
-      }
-
-      return (
-        <View
-          style={{
-            flexShrink: 1,
-            paddingBottom: paddingBottom + bottomInset,
-          }}
-        >
-          <ContentComponent
-            {...contentComponentProps}
+  return (
+    <View
+      style={{
+        maxHeight: props.maxHeight,
+        paddingTop: paddingTop,
+      }}
+    >
+      {Header ? (
+        <BottomSheetDragArea>
+          <Header
             dismiss={dismiss}
-            width={props.width}
-            maxHeight={props.maxHeight}
+            configuration={theme}
+            summary={summary}
+            title={title}
           />
-        </View>
-      );
-    }
-
-    if (showCentralLoading) {
-      const loaderColor =
-        (theme as any)?.modal_bottom_sheet_activity_indicator_color ||
-        (theme as any)?.cell_title_color ||
-        "#ffffff";
-
-      return (
-        <View
-          style={[
-            styles.centered,
-            { backgroundColor: theme.modal_bottom_sheet_background_color },
-          ]}
-        >
-          <ActivityIndicator color={loaderColor} />
-        </View>
-      );
-    }
-
-    if (error) {
-      return (
-        <View style={styles.centered}>
-          <Text style={styles.errorText}>
-            {typeof error === "string" ? error : error.message}
-          </Text>
-        </View>
-      );
-    }
-
-    if (isSortable) {
-      return (
-        <SortableList
-          sortableData={itemsToRender}
-          headers={headers}
-          scrollViewStyle={{
-            flexShrink: 1,
-          }}
-          contentContainerStyle={{
-            paddingBottom: paddingBottom + bottomInset,
-          }}
-          onDragEnd={handleDragEnd}
-          renderItem={({ item, index, renderHandle }) =>
-            cell.renderItem({
-              item,
-              index,
-              onPress: onItemPress,
-              context: renderContext,
-              renderHandle,
-            })
-          }
-        />
-      );
-    }
-
-    return (
+        </BottomSheetDragArea>
+      ) : null}
       <ScrollView
         overScrollMode="never"
         bounces={false}
+        showsVerticalScrollIndicator={false}
         contentContainerStyle={{
           paddingBottom: paddingBottom + bottomInset,
         }}
       >
-        {hasNowPlaying ? (
-          <NowPlayingHeaderSection
-            onClear={hasClearAll ? handleDeleteCollection : undefined}
-          />
-        ) : null}
-        {hasAdd ? (
-          <View
-            style={{ paddingHorizontal: 20, paddingTop: 8, paddingBottom: 12 }}
-          >
-            <AudioPlayerButton
-              configuration={VARIANT_WITH_ICON}
-              data={{ title: createPlaylistTitle }}
-              onPress={handleCreatePlaylist}
-            />
-          </View>
-        ) : null}
-        {(itemsToRender || []).map((item, index) =>
-          cell.renderItem({
-            item,
-            index,
-            onPress: onItemPress,
-            context: renderContext,
-          })
-        )}
+        {scrollViewContent
+          ? scrollViewContent.items.map((item, index) =>
+              scrollViewContent.renderItem(item, index)
+            )
+          : null}
+        {!scrollViewContent &&
+          items.map((item, index) =>
+            item ? (
+              <ButtonComponent
+                key={index}
+                configuration={theme}
+                selectedItem={current_selection}
+                item={item}
+                onPress={handlePress}
+                label={theme[item?.label] ?? item?.label}
+                iconBaseProps={iconBaseProps}
+                itemBaseProps={itemBaseProps}
+                labelBaseProps={labelBaseProps}
+                selectedItemIcon={getSelectedItemIcon(theme)}
+                defaultItemIcon={getDefaultItemIcon(theme)}
+                iconPlacement={iconPlacement}
+              />
+            ) : null
+          )}
       </ScrollView>
-    );
-  };
-
-  return (
-    <ModalBlocksStyleContext.Provider value={styleOverrides as any}>
-      <View
-        style={{
-          maxHeight: props.maxHeight,
-          paddingTop: paddingTop,
-        }}
-      >
-        <BottomSheetDragArea>
-          <Header
-            dismiss={dismiss}
-            configuration={theme}
-            summary={summary}
-            title={resolvedTitle}
-          />
-        </BottomSheetDragArea>
-        {renderBody()}
-      </View>
-    </ModalBlocksStyleContext.Provider>
+    </View>
   );
 }

package/Components/ModalComponent/Button/index.tsx

@@ -43,13 +43,11 @@ export function Button({
 }: ButtonProps) {
   const [focused, setFocused] = useState(false);
 
-  const selected = selectedItem && item?.value === selectedItem?.value;
+  const selected = selectedItem && item.value === selectedItem?.value;
 
   const itemIconPropsAssets = useMemo<ItemIconProps["asset"]>(
-    () =>
-      (item ? (configuration[item.asset] ?? item.asset) : undefined) ??
-      defaultItemIcon,
-    [item?.asset, defaultItemIcon]
+    () => configuration[item.asset] ?? item.asset ?? defaultItemIcon,
+    [item.asset, defaultItemIcon]
   );
 
   const selectedItemIconPropsAssets = useMemo<ItemIconProps["asset"]>(

package/Components/ModalComponent/Header/CloseButton.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
 import { TouchableOpacity } from "react-native";
 import { QBImage } from "@applicaster/zapp-react-native-ui-components/Components";
+import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 // @ts-ignore
 import { defaultCloseAsset } from "./assets";
 
@@ -40,9 +41,20 @@ export function CloseButton(props: CloseButtonProps) {
 
   if (!enabled) return null;
 
+  // Expose the close button as its own accessible control so screen readers
+  // (e.g. iOS VoiceOver) can focus and activate it. The image-only button
+  // otherwise has no label/role, leaving it unreachable/unannounced. Uses the
+  // framework's localized "close" button config (label + hint + button role).
+  // Computed each render (not memoized) so runtime localization updates via
+  // AccessibilityManager.updateLocalizations() are picked up on re-render.
+  const accessibilityProps =
+    AccessibilityManager.getInstance().getButtonAccessibilityProps("close");
+
   return (
     <TouchableOpacity
       activeOpacity={1}
+      testID="closeButton"
+      {...accessibilityProps}
       style={{
         marginBottom,
         marginTop,

package/Components/ModalComponent/Header/__tests__/CloseButton.test.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react-native";
+import { CloseButton, CloseButtonProps } from "../CloseButton";
+
+jest.mock("@applicaster/zapp-react-native-ui-components/Components", () => {
+  const { Image } = require("react-native");
+
+  return { QBImage: Image };
+});
+
+const mockGetButtonA11yProps = jest.fn(() => ({
+  accessible: true,
+  accessibilityLabel: "Close",
+  accessibilityHint: "Closes the sheet",
+  accessibilityRole: "button",
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager",
+  () => ({
+    AccessibilityManager: {
+      getInstance: () => ({
+        getButtonAccessibilityProps: mockGetButtonA11yProps,
+      }),
+    },
+  })
+);
+
+const baseProps: CloseButtonProps = {
+  enabled: true,
+  close: jest.fn(),
+  asset: "close.png",
+  assetFocused: "close_focused.png",
+  height: 24,
+  width: 24,
+  marginTop: 0,
+  marginBottom: 0,
+  marginLeft: 0,
+  marginRight: 0,
+};
+
+describe("ModalComponent Header CloseButton", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders as an accessible button reachable by screen readers", () => {
+    render(<CloseButton {...baseProps} />);
+
+    const button = screen.getByTestId("closeButton");
+
+    expect(button.props.accessible).toBe(true);
+    expect(button.props.accessibilityRole).toBe("button");
+    expect(button.props.accessibilityLabel).toBe("Close");
+    expect(mockGetButtonA11yProps).toHaveBeenCalledWith("close");
+  });
+
+  it("invokes close on press", () => {
+    const close = jest.fn();
+    render(<CloseButton {...baseProps} close={close} />);
+
+    fireEvent.press(screen.getByTestId("closeButton"));
+
+    expect(close).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders nothing when disabled", () => {
+    render(<CloseButton {...baseProps} enabled={false} />);
+
+    expect(screen.queryByTestId("closeButton")).toBeNull();
+  });
+});