@applicaster/zapp-react-native-utils 16.0.0-alpha.2024822855 → 16.0.0-alpha.2105365027

package/logger/__tests__/xrayToolbox.test.ts

@@ -0,0 +1,69 @@
+const xray = require("@applicaster/quick-brick-xray");
+
+const toolbox = { name: "test", description: "", tools: [] };
+
+const load = (): typeof import("../xrayToolbox") => {
+  let module;
+
+  jest.isolateModules(() => {
+    module = require("../xrayToolbox");
+  });
+
+  return module;
+};
+
+describe("registerXrayToolbox", () => {
+  afterEach(() => {
+    delete xray.registerReactToolbox;
+  });
+
+  it("registers once per name", async () => {
+    xray.registerReactToolbox = jest.fn().mockResolvedValue(undefined);
+    const { registerXrayToolbox } = load();
+
+    await expect(registerXrayToolbox(toolbox)).resolves.toBe(true);
+    await expect(registerXrayToolbox(toolbox)).resolves.toBe(true);
+
+    expect(xray.registerReactToolbox).toHaveBeenCalledTimes(1);
+  });
+
+  it("resolves false without a toolbox API", async () => {
+    await expect(load().registerXrayToolbox(toolbox)).resolves.toBe(false);
+  });
+
+  it("keeps a failed registration instead of retrying it", async () => {
+    xray.registerReactToolbox = jest
+      .fn()
+      .mockRejectedValue(new Error("XRayToolboxBridge is not available"));
+
+    const { registerXrayToolbox } = load();
+
+    await expect(registerXrayToolbox(toolbox)).resolves.toBe(false);
+    await expect(registerXrayToolbox(toolbox)).resolves.toBe(false);
+
+    expect(xray.registerReactToolbox).toHaveBeenCalledTimes(1);
+  });
+
+  it("registers new tools under the same name again (Fast Refresh)", async () => {
+    xray.registerReactToolbox = jest.fn().mockResolvedValue(undefined);
+    const { registerXrayToolbox } = load();
+
+    await registerXrayToolbox(toolbox);
+    await registerXrayToolbox({ ...toolbox, tools: [] });
+
+    expect(xray.registerReactToolbox).toHaveBeenCalledTimes(2);
+  });
+
+  it("stops trying every toolbox once the bridge is missing", async () => {
+    xray.registerReactToolbox = jest.fn().mockRejectedValue(new Error("no"));
+    const { registerXrayToolbox } = load();
+
+    await registerXrayToolbox(toolbox);
+
+    await expect(
+      registerXrayToolbox({ ...toolbox, name: "other" })
+    ).resolves.toBe(false);
+
+    expect(xray.registerReactToolbox).toHaveBeenCalledTimes(1);
+  });
+});

package/logger/xrayToolbox.ts

@@ -0,0 +1,67 @@
+import { getXray } from ".";
+
+/** One tool of an X-Ray React toolbox: an agent calls it by name with JSON arguments. */
+export type XrayToolSpec = {
+  name: string;
+  description: string;
+  parameters?: Array<{
+    name: string;
+    type: "number" | "string";
+    description: string;
+  }>;
+  handler: (args: Record<string, unknown>) => unknown;
+};
+
+export type XrayToolbox = {
+  name: string;
+  description: string;
+  tools: XrayToolSpec[];
+};
+
+type RegisterReactToolbox = (toolbox: XrayToolbox) => Promise<void>;
+
+const registered = new Map<
+  string,
+  { tools: XrayToolSpec[]; registration: Promise<boolean> }
+>();
+
+/** Set once a registration fails: the build has no X-Ray bridge, which cannot appear later. */
+let bridgeMissing = false;
+
+/**
+ * Registers an X-Ray React toolbox and resolves whether it is registered. The same tools are
+ * registered once; new tools under the same name (Fast Refresh re-ran the module) replace them.
+ * A build without the X-Ray native bridge (release builds) rejects the first attempt and every
+ * later call resolves false at once, so callers on hot paths pay for one attempt only.
+ */
+export const registerXrayToolbox = (toolbox: XrayToolbox): Promise<boolean> => {
+  const cached = registered.get(toolbox.name);
+
+  if (cached?.tools === toolbox.tools) return cached.registration;
+
+  if (bridgeMissing) return Promise.resolve(false);
+
+  const register = (
+    getXray() as
+      | { registerReactToolbox?: RegisterReactToolbox }
+      | null
+      | undefined
+  )?.registerReactToolbox;
+
+  const registration = register
+    ? register(toolbox).then(
+        () => true,
+        () => {
+          bridgeMissing = true;
+
+          return false;
+        }
+      )
+    : Promise.resolve(false);
+
+  if (!register) bridgeMissing = true;
+
+  registered.set(toolbox.name, { tools: toolbox.tools, registration });
+
+  return registration;
+};

package/manifestUtils/_internals/index.js

@@ -135,7 +135,8 @@ function generateFieldsFromDefaults(label, defaults, fields) {
 function generateFieldsFromDefaultsWithoutPrefixedLabel(
   label,
   defaults,
-  fields
+  fields,
+  { withStyle = false } = {}
 ) {
   const keyPrefix = toSnakeCase(label);
 
@@ -151,7 +152,9 @@ function generateFieldsFromDefaultsWithoutPrefixedLabel(
         const generatedField = {
           ...fieldProps,
           label: capitalizeFirstLetter(field.suffix),
-          key: `${keyPrefix}_${toSnakeCase(field.suffix)}`,
+          key: withStyle
+            ? `${keyPrefix}_style_${toSnakeCase(field.suffix)}`
+            : `${keyPrefix}_${toSnakeCase(field.suffix)}`,
           initial_value: R.when(R.is(Array), R.head)(initialValue),
         };
 
@@ -164,7 +167,9 @@ function generateFieldsFromDefaultsWithoutPrefixedLabel(
             const section = condition.section ? `${condition.section}/` : "";
 
             return {
-              key: `${section}${keyPrefix}_${toSnakeCase(condition.key)}`,
+              key: withStyle
+                ? `${section}${keyPrefix}_style_${toSnakeCase(condition.key)}`
+                : `${section}${keyPrefix}_${toSnakeCase(condition.key)}`,
               condition_value: condition.value,
             };
           });

package/manifestUtils/defaultManifestConfigurations/generalContent.js

@@ -12,6 +12,12 @@ const generalContent = () => ({
         label: "Navigation Bar",
         placeholder: "Choose Nav Bar",
       },
+      {
+        key: "hide_menu",
+        type: "switch",
+        label: "Hide Menu",
+        initial_value: false,
+      },
     ],
   },
   styles: {

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -204,6 +204,20 @@ function getPlayerConfiguration({ platform, version }) {
         label_tooltip: "Label for close button accessibility",
         type: "text_input",
       },
+      {
+        key: "accessibility_overflow_label",
+        label: "Accessibility overflow label",
+        initial_value: "More actions",
+        label_tooltip: "Label for the overflow (…) button accessibility",
+        type: "text_input",
+      },
+      {
+        key: "accessibility_overflow_hint",
+        label: "Accessibility overflow hint",
+        initial_value: "Opens the remaining player actions",
+        label_tooltip: "Hint for the overflow (…) button accessibility",
+        type: "text_input",
+      },
       {
         key: "accessibility_close_hint",
         label: "Accessibility close hint",
@@ -791,7 +805,7 @@ function getPlayerConfiguration({ platform, version }) {
         label: "Player action buttons",
         initial_value: null,
         label_tooltip:
-          "type here the identifiers of the action buttons you want to show on the player, separated by commas. Only 2 action buttons may be added at the same time",
+          "Comma-separated action identifiers. The entry_actions token expands from the playing entry's extensions.entry_action. When more than 2 actions resolve, the video and fullscreen audio players show Overflow (…) plus one companion - the first action that did not come from the entry, otherwise the first one - and the Overflow sheet lists every resolved action. A repeated identifier is counted once. No extra plugin is required.",
         type: "text_input",
       },
       {
@@ -816,6 +830,14 @@ function getPlayerConfiguration({ platform, version }) {
         type: "switch",
         label_tooltip:
           "Enable this option to have a floating video player when the app is in the background.",
+      },
+      {
+        key: "vertical_video_player",
+        label: "Vertical video mode",
+        initial_value: false,
+        type: "switch",
+        label_tooltip:
+          "Enable this option to use the vertical video player layout.",
       }
     );
 
@@ -1091,6 +1113,13 @@ function getPlayerConfiguration({ platform, version }) {
             type: "uploader",
             label_tooltip: "Override default close badge / icon",
           },
+          {
+            key: "overflow",
+            label: "Overflow badge",
+            type: "uploader",
+            label_tooltip:
+              "Override default overflow (…) badge / icon, shown when more action buttons resolve than fit on the player overlay",
+          },
           {
             key: "lock",
             label: "Lock player badge",

package/manifestUtils/keys.js

@@ -412,6 +412,12 @@ const mobileActionButtonContainerFields = (positionOptions) => [
     type: ZAPPIFEST_FIELDS.switch,
     suffix: "buttons enabled",
   },
+  {
+    type: ZAPPIFEST_FIELDS.switch,
+    suffix: "cell navigation enabled",
+    label_tooltip:
+      "Controls whether tapping on the cell (outside the buttons) triggers its navigation behavior. When disabled, only the configured buttons are interactive. Useful for Home screens (tap anywhere to open) vs. Details screens (only buttons should work).",
+  },
   {
     type: ZAPPIFEST_FIELDS.select,
     suffix: "position",
@@ -472,7 +478,6 @@ const MOBILE_ACTION_BUTTON_FIELDS = [
     suffix: "assign action",
     options: [
       { text: "primary navigation", value: "navigation_action" },
-      { text: "secondary navigation", value: "secondary_navigation" },
       { text: "favorite", value: "local_storage_favourites_action" },
       { text: "more", value: "open-modal-bottom-sheet-cell-action" },
       { text: "add to calendar", value: "add_to_calendar_action" },

package/manifestUtils/mobileAction/container/__tests__/mobileActionButtonsContainer.test.js

@@ -7,6 +7,7 @@ describe("mobileActionButtonsContainer", () => {
       description: "container",
       defaults: {
         buttonsEnabled: false,
+        cellNavigationEnabled: false,
         position: ["over_image", "text_label_1", "text_label_2"],
         align: "left",
         overImagePosition: "bottom_left",
@@ -31,6 +32,26 @@ describe("mobileActionButtonsContainer", () => {
     expect(enabledField).toBeTruthy();
     expect(enabledField.type).toBe("switch");
 
+    const cellNavigationField = result.fields.find(
+      (field) =>
+        field.key === "mobile_buttons_container_cell_navigation_enabled"
+    );
+
+    expect(cellNavigationField).toMatchObject({
+      type: "switch",
+      label: "Cell navigation enabled",
+      initial_value: false,
+      label_tooltip: expect.stringContaining(
+        "Controls whether tapping on the cell"
+      ),
+      conditional_fields: [
+        {
+          key: "styles/mobile_buttons_container_buttons_enabled",
+          condition_value: true,
+        },
+      ],
+    });
+
     const positionField = result.fields.find(
       (field) => field.key === "mobile_buttons_container_position"
     );

package/manifestUtils/mobileAction/groups/__tests__/buildMobileActionButtonGroups.test.js

@@ -67,7 +67,7 @@ describe("buildMobileActionButtonGroups", () => {
     );
 
     expect(button2EnabledField.initial_value).toBe(false);
-    expect(button2AssignActionField.initial_value).toBe("secondary_navigation");
+    expect(button2AssignActionField.initial_value).toBe("trailer_action");
 
     const button3Fields = groups[3].fields;
 

package/manifestUtils/mobileAction/groups/defaults.js

@@ -1,5 +1,6 @@
 const DEFAULT_MOBILE_ACTION_BUTTONS_CONTAINER_DEFAULTS = {
   buttonsEnabled: false,
+  cellNavigationEnabled: false,
 
   align: "left",
   overImagePosition: "bottom_left",
@@ -63,7 +64,7 @@ const DEFAULT_MOBILE_ACTION_BUTTON_PRESETS = {
   },
   2: {
     buttonEnabled: false,
-    assignAction: "secondary_navigation",
+    assignAction: "trailer_action",
   },
   3: {
     buttonEnabled: false,

package/modalState/ModalOrchestrator.ts

@@ -1,10 +1,16 @@
 import { dismissModal, modalStore, openBottomSheetModal } from "./store";
-import { isPresentSubMenuAction, Menu, MenuItem } from "./types";
+import {
+  getMenuItemActions,
+  isPresentSubMenuAction,
+  Menu,
+  MenuItem,
+  PresentSubMenuAction,
+} from "./types";
 import { ContentViewModel } from "./ContentViewModel";
 
 export type { Menu, MenuItem };
 
-export { isPresentSubMenuAction };
+export { isPresentSubMenuAction, getMenuItemActions };
 
 /**
  * Converts a Menu model into the props expected by BottomSheetModalContent.
@@ -38,6 +44,7 @@ function menuToModalArgs(
       title: menu.header?.title ?? menu.content.title,
       summary: menu.header?.subtitle,
       styleOverrides: menu.content.styleOverrides,
+      emptyMessage: menu.content.emptyMessage,
       onPress: onItemPress,
       viewModel,
     },
@@ -136,15 +143,21 @@ class ModalOrchestrator {
   private _buildOnPress(
     onItemPress?: (item: MenuItem) => void | Promise<void>
   ): (item: MenuItem) => void | Promise<void> {
-    return (item: MenuItem) => {
-      if (isPresentSubMenuAction(item.action)) {
-        // Navigate deeper into the sub-menu
-        this.open(item.action.menu, onItemPress);
-
-        return;
+    return async (item: MenuItem) => {
+      if (onItemPress) {
+        await onItemPress(item);
       }
 
-      return onItemPress?.(item);
+      const actions = getMenuItemActions(item);
+
+      const subMenuAction = actions.find(isPresentSubMenuAction) as
+        | PresentSubMenuAction
+        | undefined;
+
+      if (subMenuAction) {
+        // Navigate deeper into the sub-menu
+        this.open(subMenuAction.menu, onItemPress);
+      }
     };
   }
 

package/modalState/RemoteEditableCollection.ts

@@ -123,7 +123,14 @@ export class RemoteEditableCollection implements EditableCollection {
 
     try {
       for (const action of addEvents) {
-        await actionExecutor.handleAction(action as any);
+        if (this.content.context) {
+          await actionExecutor.handleAction(
+            action as any,
+            this.content.context
+          );
+        } else {
+          await actionExecutor.handleAction(action as any);
+        }
       }
     } catch (e) {
       actionFailed = true;
@@ -219,6 +226,7 @@ export class RemoteEditableCollection implements EditableCollection {
       await actionExecutor.handleAction(
         actionToExecute as any,
         {
+          ...this.content.context,
           entry: item as any,
         } as any
       );

package/modalState/__tests__/ModalOrchestrator.phase3.test.ts

@@ -44,4 +44,20 @@ describe("ModalOrchestrator phase 3", () => {
     expect(props.title).toBe("Sleep Timer");
     expect(props.summary).toBe("remaining");
   });
+
+  it("forwards the queue empty message onto the sheet props", () => {
+    modalOrchestrator.open({
+      header: { title: "Queue" },
+      content: {
+        title: "Queue",
+        items: [],
+        emptyMessage: "Queued items will be added here",
+      },
+    });
+
+    const props = (modalStore.getState().modalState.screen as any)
+      ?.modalBottomSheetContentProps;
+
+    expect(props.emptyMessage).toBe("Queued items will be added here");
+  });
 });

package/modalState/__tests__/RemoteEditableCollection.test.ts

@@ -34,16 +34,26 @@ const itemPlain: MenuItem = { id: "2", title: "B" };
 function makeCollection(
   items: MenuItem[],
   refetch = jest.fn().mockResolvedValue(undefined),
-  operations = ["remove", "reorder"]
+  operations = ["remove", "reorder"],
+  context?: Record<string, unknown>
 ) {
   const content = {
     items,
+    context,
     dynamicCollection: { operations, postUrl: "https://x/cloud-events" },
   } as unknown as Content;
 
   return { col: new RemoteEditableCollection(content, refetch), refetch };
 }
 
+const openingContext = {
+  component: {
+    id: "list-1",
+    data: { source: "https://example.com/user/collections/abc" },
+  },
+  screenData: { id: "playlist-screen" },
+};
+
 describe("RemoteEditableCollection", () => {
   beforeEach(() => jest.clearAllMocks());
 
@@ -118,6 +128,24 @@ describe("RemoteEditableCollection", () => {
       expect(refetch).toHaveBeenCalledTimes(1);
       expect(currentItems(col)).toEqual([itemWithRemove]);
     });
+
+    it("forwards stored sheet context plus the removed item as entry", async () => {
+      handleAction.mockResolvedValue("success");
+
+      const { col } = makeCollection(
+        [itemWithRemove, itemPlain],
+        jest.fn().mockResolvedValue(undefined),
+        ["remove", "reorder"],
+        openingContext
+      );
+
+      await col.remove(0);
+
+      expect(handleAction).toHaveBeenCalledWith(removeAction, {
+        ...openingContext,
+        entry: itemWithRemove,
+      });
+    });
   });
 
   describe("move", () => {
@@ -164,6 +192,35 @@ describe("RemoteEditableCollection", () => {
       expect(refetch).toHaveBeenCalledTimes(1);
     });
 
+    it("forwards stored sheet context plus the moved item as entry", async () => {
+      handleAction.mockResolvedValue("success");
+
+      const itemA: MenuItem = {
+        id: "2",
+        title: "B",
+        entryActions: [
+          { button: { alias: "reorder_item" }, actions: [removeAction] },
+        ],
+      };
+
+      const { col } = makeCollection(
+        [itemA],
+        jest.fn().mockResolvedValue(undefined),
+        ["remove", "reorder"],
+        openingContext
+      );
+
+      await col.move(["2"]);
+
+      expect(handleAction).toHaveBeenCalledWith(
+        expect.objectContaining({ type: "sendCloudEvent" }),
+        {
+          ...openingContext,
+          entry: itemA,
+        }
+      );
+    });
+
     it("rolls back on failure", async () => {
       handleAction.mockRejectedValue(new Error("nope"));
 
@@ -322,5 +379,37 @@ describe("RemoteEditableCollection", () => {
       expect(handleAction).toHaveBeenCalledWith(addAction);
       expect(refetch).toHaveBeenCalledTimes(1);
     });
+
+    it("forwards stored sheet context into events.add actions", async () => {
+      handleAction.mockResolvedValue("success");
+
+      const addAction = {
+        type: "showTextInput",
+        options: {
+          headerTitle: "Create Playlist",
+          buttonLabel: "Create",
+          actions: [{ type: "sendCloudEvent" }],
+        },
+      };
+
+      const content = {
+        items: [],
+        context: openingContext,
+        dynamicCollection: {
+          operations: ["add"],
+          postUrl: "https://x/cloud-events",
+          events: {
+            add: [addAction],
+          },
+        },
+      } as any;
+
+      const refetch = jest.fn().mockResolvedValue(undefined);
+      const col = new RemoteEditableCollection(content, refetch);
+
+      await col.add();
+
+      expect(handleAction).toHaveBeenCalledWith(addAction, openingContext);
+    });
   });
 });

package/modalState/__tests__/index.test.ts

@@ -1,4 +1,4 @@
-import { modalStore } from "../";
+import { modalStore, getMenuItemActions } from "../";
 
 describe("Modal State", () => {
   it("should have initial state", () => {
@@ -48,4 +48,33 @@ describe("Modal State", () => {
       });
     });
   });
+
+  describe("getMenuItemActions", () => {
+    it("returns actions array when actions is provided", () => {
+      const actions = [{ type: "action1" }, { type: "action2" }];
+      const item = { id: "1", title: "Item", actions };
+
+      expect(getMenuItemActions(item)).toEqual(actions);
+    });
+
+    it("returns [action] when single action is provided", () => {
+      const action = { type: "action1" };
+      const item = { id: "1", title: "Item", action };
+
+      expect(getMenuItemActions(item)).toEqual([action]);
+    });
+
+    it("returns action when action is passed as an array", () => {
+      const actions = [{ type: "action1" }];
+      const item = { id: "1", title: "Item", action: actions as any };
+
+      expect(getMenuItemActions(item)).toEqual(actions);
+    });
+
+    it("returns empty array when no action or actions are provided", () => {
+      expect(getMenuItemActions({ id: "1", title: "Item" })).toEqual([]);
+      expect(getMenuItemActions(null)).toEqual([]);
+      expect(getMenuItemActions(undefined)).toEqual([]);
+    });
+  });
 });