@applicaster/zapp-react-native-utils 16.0.0-alpha.4004661200 → 16.0.0-alpha.4065452341

package/configurationUtils/__tests__/modalBlocksParser.test.ts

@@ -104,4 +104,157 @@ describe("parseModalBlocksConfiguration", () => {
     expect(result.button.title).toEqual({ default: {} });
     expect(result.action.leadingIcon).toEqual({ default: {} });
   });
+
+  it("should map Studio item.background.focus.* onto focused state", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "item.background.default.background_color": "transparent",
+        "item.background.focus.background_color": "#FF3B30",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.item.background.default).toEqual(
+      expect.objectContaining({
+        backgroundColor: "transparent",
+      })
+    );
+
+    expect(result.item.background.focused).toEqual(
+      expect.objectContaining({
+        backgroundColor: "#FF3B30",
+      })
+    );
+  });
+
+  it("should accept Studio text_label1 keys without underscore before digit", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "item.text_label1.font_color": "#00FF00",
+        "item.text_label1.font_size": 28,
+        "item.text_label2.font_color": "#00FFFF",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.item.textLabel1.default).toEqual(
+      expect.objectContaining({
+        fontColor: "#00FF00",
+        fontSize: 28,
+      })
+    );
+
+    expect(result.item.textLabel2.default).toEqual(
+      expect.objectContaining({
+        fontColor: "#00FFFF",
+      })
+    );
+  });
+
+  it("should map button.create_new_playlist_asset onto leadingIcon.asset", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "button.create_new_playlist_asset":
+          "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.button.leadingIcon.default).toEqual(
+      expect.objectContaining({
+        asset: "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN",
+      })
+    );
+  });
+
+  it("should map item.checkbox_asset and checked_checkbox_asset onto item.checkbox", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "item.checkbox_asset":
+          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=CB",
+        "item.checked_checkbox_asset":
+          "https://placehold.co/24x24/FFD60A/000000/png?text=CK",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.item.checkbox.default).toEqual(
+      expect.objectContaining({
+        asset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=CB",
+        checkedAsset: "https://placehold.co/24x24/FFD60A/000000/png?text=CK",
+      })
+    );
+  });
+
+  it("should map reorder/remove Studio assets onto item.actionButtons", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "reorder_playlist_item.remove_from_playlist_asset":
+          "https://placehold.co/24x24/00FF00/000000/png?text=RM",
+        "reorder_playlist_item.reorder_handle_asset":
+          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.item.actionButtons.default).toEqual(
+      expect.objectContaining({
+        removeAsset: "https://placehold.co/24x24/00FF00/000000/png?text=RM",
+        dragAsset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      })
+    );
+  });
+
+  it("should fall back to flavor1 reorder/remove assets", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "playlist_experience_assets_flavor1.remove_from_playlist_asset":
+          "https://placehold.co/24x24/00FF00/000000/png?text=RM",
+        "playlist_experience_assets_flavor1.reorder_handle_asset":
+          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.item.actionButtons.default).toEqual(
+      expect.objectContaining({
+        removeAsset: "https://placehold.co/24x24/00FF00/000000/png?text=RM",
+        dragAsset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      })
+    );
+  });
+
+  it("should fall back to flavor2 reorder/remove assets", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "playlist_experience_assets_flavor2.remove_from_playlist_asset":
+          "https://placehold.co/24x24/00FF00/000000/png?text=RM",
+        "playlist_experience_assets_flavor2.reorder_handle_asset":
+          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.item.actionButtons.default).toEqual(
+      expect.objectContaining({
+        removeAsset: "https://placehold.co/24x24/00FF00/000000/png?text=RM",
+        dragAsset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      })
+    );
+  });
+
+  it("should ignore playlist-only asset keys for other theme plugins", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "button.create_new_playlist_asset":
+          "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN",
+        "playlist_experience_assets_flavor1.reorder_handle_asset":
+          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      },
+      "queue-action"
+    );
+
+    expect(result.button.leadingIcon.default?.asset).toBeUndefined();
+    expect(result.item.actionButtons.default?.dragAsset).toBeUndefined();
+  });
 });

package/configurationUtils/manifestKeyParser.ts

@@ -11,11 +11,17 @@ const currentPlatform = platformSelect({
   android_tv: "android",
 });
 
-// Do not change the order, focused_selected should be first
+// Do not change the order: focused_selected must be first, and "focus" must
+// come *after* "focused". Matching uses startsWith(state + "_"), so putting
+// "focus" first would steal focused_* / focused_selected_* keys. Adding
+// "focus" here affects every getAllSpecificStyles consumer (not only modals);
+// property names that themselves start with focus_ (e.g. focus_font_color as
+// a non-state style) would also be classified as the focus state.
 const states = [
   "focused_selected",
   "pressed",
   "focused",
+  "focus",
   "selected",
   "default",
 ];
@@ -112,6 +118,11 @@ export const getAllSpecificStyles = ({
       state = defaultKey;
     }
 
+    // Normalize Studio "focus" keys onto the runtime "focused" state bucket.
+    if (state === "focus") {
+      state = "focused";
+    }
+
     if (!styleName) return;
 
     const camelCaseKey = toCamelCase(styleName);

package/configurationUtils/modalBlocksParser.ts

@@ -25,6 +25,10 @@ export type ModalBlocksConfig = {
     buttonsContainer: Record<string, any>;
     button1: Record<string, any>;
     button2: Record<string, any>;
+    /** Studio item.checkbox_asset / item.checked_checkbox_asset */
+    checkbox?: Record<string, any>;
+    /** Studio reorder/remove icons for Edit Order rows */
+    actionButtons?: Record<string, any>;
   };
   nowPlayingItem?: {
     background: Record<string, any>;
@@ -37,6 +41,8 @@ export type ModalBlocksConfig = {
     buttonsContainer: Record<string, any>;
     button1: Record<string, any>;
     button2: Record<string, any>;
+    checkbox?: Record<string, any>;
+    actionButtons?: Record<string, any>;
   };
   button: {
     background: Record<string, any>;
@@ -75,6 +81,8 @@ export const parseModalBlocksConfiguration = (
       buttonsContainer: {},
       button1: {},
       button2: {},
+      checkbox: {},
+      actionButtons: {},
     },
     nowPlayingItem: {
       background: {},
@@ -87,6 +95,8 @@ export const parseModalBlocksConfiguration = (
       buttonsContainer: {},
       button1: {},
       button2: {},
+      checkbox: {},
+      actionButtons: {},
     },
     button: {
       background: {},
@@ -152,8 +162,12 @@ export const parseModalBlocksConfiguration = (
     "now_playing_container",
     "now_playing_asset",
     "now_playing_label",
+    // Underscored form (QB convention) and Studio/manifest-generator form
+    // without the underscore before the digit (text_label1).
     "text_label_1",
     "text_label_2",
+    "text_label1",
+    "text_label2",
     "buttons_container",
     "button_1",
     "button_2",
@@ -167,6 +181,8 @@ export const parseModalBlocksConfiguration = (
     "now_playing_label",
     "text_label_1",
     "text_label_2",
+    "text_label1",
+    "text_label2",
     "buttons_container",
     "button_1",
     "button_2",
@@ -174,5 +190,107 @@ export const parseModalBlocksConfiguration = (
 
   parseBlock("button", ["background", "title", "icons", "leading_icon"]);
 
+  // Playlist-experience Studio keys live in this shared parser because modal
+  // blocks are themed by themePluginId. Gate them so other plugins are not
+  // affected by playlist-only asset names.
+  const isPlaylistExperience =
+    normalizedComponentName === "playlist_experience";
+
+  // Studio uploads Create New icon as button.create_new_playlist_asset (not
+  // button.leading_icon.asset). Map it onto leadingIcon so AudioPlayerButton
+  // can override the hardcoded action-type asset.
+  const createNewPlaylistAsset = isPlaylistExperience
+    ? configuration["button.create_new_playlist_asset"] ||
+      configuration[
+        `${normalizedComponentName}_button_create_new_playlist_asset`
+      ]
+    : undefined;
+
+  if (createNewPlaylistAsset) {
+    if (!result.button.leadingIcon.default) {
+      result.button.leadingIcon.default = {};
+    }
+
+    result.button.leadingIcon.default.asset = createNewPlaylistAsset;
+  }
+
+  // Studio checkbox assets are top-level item.* keys (not a parseBlock
+  // sub-component). Map onto item.checkbox so multiSelect can render them.
+  const checkboxAsset =
+    configuration["item.checkbox_asset"] ||
+    configuration[`${normalizedComponentName}_item_checkbox_asset`];
+
+  const checkedCheckboxAsset =
+    configuration["item.checked_checkbox_asset"] ||
+    configuration[`${normalizedComponentName}_item_checked_checkbox_asset`];
+
+  if (checkboxAsset || checkedCheckboxAsset) {
+    if (!result.item.checkbox.default) {
+      result.item.checkbox.default = {};
+    }
+
+    if (checkboxAsset) {
+      result.item.checkbox.default.asset = checkboxAsset;
+    }
+
+    if (checkedCheckboxAsset) {
+      result.item.checkbox.default.checkedAsset = checkedCheckboxAsset;
+    }
+  }
+
+  // Edit Order row icons: prefer reorder_playlist_item.*, then flavor1, then
+  // flavor2 playlist_experience_assets_* (playlist-experience theme only).
+  const removeAsset = isPlaylistExperience
+    ? configuration["reorder_playlist_item.remove_from_playlist_asset"] ||
+      configuration[
+        `${normalizedComponentName}_reorder_playlist_item_remove_from_playlist_asset`
+      ] ||
+      configuration[
+        "playlist_experience_assets_flavor1.remove_from_playlist_asset"
+      ] ||
+      configuration[
+        `${normalizedComponentName}_assets_flavor1_remove_from_playlist_asset`
+      ] ||
+      configuration[
+        "playlist_experience_assets_flavor2.remove_from_playlist_asset"
+      ] ||
+      configuration[
+        `${normalizedComponentName}_assets_flavor2_remove_from_playlist_asset`
+      ]
+    : undefined;
+
+  const dragAsset = isPlaylistExperience
+    ? configuration["reorder_playlist_item.reorder_handle_asset"] ||
+      configuration[
+        `${normalizedComponentName}_reorder_playlist_item_reorder_handle_asset`
+      ] ||
+      configuration[
+        "playlist_experience_assets_flavor1.reorder_handle_asset"
+      ] ||
+      configuration[
+        `${normalizedComponentName}_assets_flavor1_reorder_handle_asset`
+      ] ||
+      configuration[
+        "playlist_experience_assets_flavor2.reorder_handle_asset"
+      ] ||
+      configuration[
+        `${normalizedComponentName}_assets_flavor2_reorder_handle_asset`
+      ]
+    : undefined;
+
+  if (removeAsset || dragAsset) {
+    if (!result.item.actionButtons.default) {
+      result.item.actionButtons.default = {};
+    }
+
+    if (removeAsset) {
+      result.item.actionButtons.default.removeAsset = removeAsset;
+    }
+
+    if (dragAsset) {
+      result.item.actionButtons.default.dragAsset = dragAsset;
+    }
+  }
+
   return result;
 };

package/entryActions/__tests__/buildEntryActions.test.ts

@@ -154,3 +154,42 @@ describe("buildEntryActions - alias & label resolution", () => {
     });
   });
 });
+
+describe("buildEntryActions - invokeAction execution context", () => {
+  it("forwards the List component from invoke options into handleActions", async () => {
+    const handleActions = jest.fn();
+
+    const component = {
+      id: "list-1",
+      data: { source: "https://example.com/user/collections/abc" },
+    };
+
+    const deps = {
+      actionExecutor: { handleActions } as any,
+      actionContext: { screenData: { id: "playlist-screen" } },
+    };
+
+    const entry = {
+      id: "entry-1",
+      extensions: {
+        entry_action: [
+          {
+            button: { title: "Edit Name" },
+            actions: [{ type: "refreshComponent" }],
+          },
+        ],
+      },
+    };
+
+    const [action] = buildEntryActions(entry as any, deps);
+
+    await action.action.invokeAction(entry as any, { component });
+
+    expect(handleActions).toHaveBeenCalledWith([{ type: "refreshComponent" }], {
+      entry,
+      entryContext: entry,
+      screenData: { id: "playlist-screen" },
+      component,
+    });
+  });
+});

package/entryActions/buildEntryActions.ts

@@ -105,6 +105,7 @@ function createEntryAction(
             entry: invokedEntry,
             entryContext: invokedEntry,
             ...deps.actionContext,
+            ...(options.component ? { component: options.component } : {}),
           } as ActionExecutionContext);
         } catch (error) {
           log_error(

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/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.
@@ -136,15 +142,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__/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([]);
+    });
+  });
 });