@applicaster/zapp-react-native-utils 16.0.0-alpha.1052711356 → 16.0.0-alpha.1054344748

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"));
 
@@ -209,6 +266,42 @@ describe("RemoteEditableCollection", () => {
 
       expect(currentItems(col)).toEqual(next);
     });
+
+    it("suppresses sync updates while a local mutation is in-flight", async () => {
+      let resolveAction: () => void = () => {};
+
+      handleAction.mockImplementation(
+        () =>
+          new Promise<void>((resolve) => {
+            resolveAction = resolve;
+          })
+      );
+
+      const { col } = makeCollection([itemWithRemove, itemPlain]);
+      const staleServerItems: MenuItem[] = [{ id: "stale", title: "Stale" }];
+
+      // Initiate optimistic removal (mutation in-flight)
+      const removePromise = col.remove(0);
+
+      // Verify optimistic state applied locally
+      expect(currentItems(col)).toEqual([itemPlain]);
+
+      // Attempt sync while mutation is in-flight
+      col.sync(staleServerItems);
+
+      // Verify sync was suppressed and optimistic state remained
+      expect(currentItems(col)).toEqual([itemPlain]);
+
+      // Resolve the in-flight mutation
+      resolveAction();
+      await removePromise;
+
+      // After mutation completes, sync applies normally
+      const freshServerItems: MenuItem[] = [{ id: "fresh", title: "Fresh" }];
+      col.sync(freshServerItems);
+
+      expect(currentItems(col)).toEqual(freshServerItems);
+    });
   });
 
   describe("deleteCollection", () => {
@@ -221,6 +314,37 @@ describe("RemoteEditableCollection", () => {
       expect(currentItems(col)).toEqual([]);
       expect(refetch).toHaveBeenCalledTimes(1);
     });
+
+    it("dispatches aliased action when first item contains delete_collection alias", async () => {
+      handleAction.mockResolvedValue("success");
+
+      const deleteAction = {
+        type: "sendCloudEvent",
+        options: { subject: "delete_collection" },
+      };
+
+      const itemWithDelete: MenuItem = {
+        id: "100",
+        title: "Collection Item",
+        entryActions: [
+          {
+            button: { alias: "delete_collection" },
+            actions: [deleteAction],
+          },
+        ],
+      };
+
+      const { col, refetch } = makeCollection([itemWithDelete]);
+
+      await col.deleteCollection();
+
+      expect(handleAction).toHaveBeenCalledWith(deleteAction, {
+        entry: itemWithDelete,
+      });
+
+      expect(refetch).toHaveBeenCalledTimes(1);
+      expect(currentItems(col)).toEqual([]);
+    });
   });
 
   describe("add", () => {
@@ -255,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([]);
+    });
+  });
 });

package/modalState/__tests__/useBottomSheetContent.test.ts

@@ -172,29 +172,6 @@ describe("useBottomSheetContent", () => {
       expect(viewModel.refetch).toHaveBeenCalledTimes(1);
     });
 
-    it("does not refetch when the item has a submenu", async () => {
-      const viewModel = createViewModel({
-        items: [{ title: "Parent" }],
-        isLoading: false,
-      });
-
-      const item: MenuItem = {
-        title: "Parent",
-        submenu: [{ title: "Child" }],
-      };
-
-      const { result } = renderHook(() =>
-        useBottomSheetContent({ viewModel: viewModel as any, onPress })
-      );
-
-      await act(async () => {
-        await result.current.handleItemPress(item);
-      });
-
-      expect(onPress).toHaveBeenCalledWith(item);
-      expect(viewModel.refetch).not.toHaveBeenCalled();
-    });
-
     it("does not refetch when the item opens a present submenu action", async () => {
       const viewModel = createViewModel({
         items: [{ title: "Parent" }],

package/modalState/__tests__/useModalStoreState.test.ts

@@ -0,0 +1,142 @@
+import { act, renderHook } from "@testing-library/react-native";
+
+import { modalStore, useModalStoreState } from "../";
+
+const item = { id: "river-general", name: "Test Modal" };
+const props = { entry: { id: "modal-entry-1" } };
+
+const openModal = () =>
+  act(() => {
+    modalStore.getState().openModal({ item, props } as any);
+  });
+
+// Counts every render of the hook so the tests can assert on subscription
+// behaviour, not just on the returned value.
+const renderModalStoreState = (skipSubscription?: boolean) => {
+  const renders = { count: 0 };
+
+  const view = renderHook(() => {
+    renders.count += 1;
+
+    return skipSubscription === undefined
+      ? useModalStoreState()
+      : useModalStoreState(skipSubscription);
+  });
+
+  return { ...view, renders };
+};
+
+describe("useModalStoreState", () => {
+  afterEach(() => {
+    act(() => {
+      modalStore.getState().dismissModal();
+    });
+  });
+
+  describe("when subscribed (default)", () => {
+    it("returns the live modal state when called without arguments", () => {
+      const { result } = renderModalStoreState();
+
+      expect(result.current.visible).toBe(false);
+
+      openModal();
+
+      expect(result.current.visible).toBe(true);
+      expect(result.current.screen).toBe(item);
+      expect(result.current.props).toBe(props);
+    });
+
+    it("re-renders the consumer when the modal state changes", () => {
+      const { renders } = renderModalStoreState(false);
+
+      const rendersBeforeOpen = renders.count;
+
+      openModal();
+
+      expect(renders.count).toBeGreaterThan(rendersBeforeOpen);
+    });
+
+    // Counterpart to "returns a stable reference across store updates": an open
+    // modal is the one point where a live subscription and a skipped one hold
+    // different references, which is what makes that assertion meaningful.
+    it("returns a new reference while the modal is open", () => {
+      const { result } = renderModalStoreState(false);
+
+      const firstValue = result.current;
+
+      openModal();
+
+      expect(result.current).not.toBe(firstValue);
+    });
+  });
+
+  describe("when subscription is skipped", () => {
+    it("reports an empty modal state even while a modal is open", () => {
+      openModal();
+
+      expect(modalStore.getState().modalState.visible).toBe(true);
+
+      const { result } = renderModalStoreState(true);
+
+      expect(result.current).toMatchObject({
+        visible: false,
+        screen: null,
+        options: {},
+        props: {},
+      });
+    });
+
+    it("does not re-render the consumer when the modal state changes", () => {
+      const { renders } = renderModalStoreState(true);
+
+      const rendersBeforeOpen = renders.count;
+
+      openModal();
+
+      expect(renders.count).toBe(rendersBeforeOpen);
+    });
+
+    // The skipped branch has to hand back a module-level constant. Returning a
+    // fresh object would fail zustand's Object.is check and re-render on every
+    // store notification - the opposite of what skipping is for.
+    it("returns a stable reference across store updates", () => {
+      const { result } = renderModalStoreState(true);
+
+      const firstValue = result.current;
+
+      openModal();
+
+      // Asserted while the modal is open: dismissing resets the store to the
+      // very same initialModalState object, so an end-to-end round trip would
+      // hold this identity even for a live subscription.
+      expect(result.current).toBe(firstValue);
+
+      act(() => {
+        modalStore.getState().dismissModal();
+      });
+
+      expect(result.current).toBe(firstValue);
+    });
+  });
+
+  it("picks up the current modal state when it starts subscribing", () => {
+    let skipSubscription = true;
+
+    const { result, rerender } = renderHook(() =>
+      useModalStoreState(skipSubscription)
+    );
+
+    openModal();
+
+    expect(result.current.visible).toBe(false);
+
+    skipSubscription = false;
+
+    act(() => {
+      rerender(undefined);
+    });
+
+    expect(result.current.visible).toBe(true);
+    expect(result.current.screen).toBe(item);
+  });
+});

package/modalState/index.ts

@@ -25,6 +25,11 @@ export type {
   SelectionBehavior,
 } from "./types";
 
-export { isPresentSubMenuAction } from "./types";
+export {
+  isPresentSubMenuAction,
+  getMenuItemActions,
+  OPERATIONS,
+  hasOperation,
+} from "./types";
 
 export { useBottomSheetContent } from "./useBottomSheetContent";

package/modalState/store.ts

@@ -98,5 +98,12 @@ export const openBottomSheetModal = ({
   });
 };
 
-export const useModalStoreState = (): ModalState =>
-  useModalStore<ModalState>((state) => state.modalState);
+/**
+ * Pass `skipSubscription` from callers that render outside of a modal: the
+ * selector then returns the stable `initialModalState` reference, so the
+ * component is never re-rendered by modal state it does not read.
+ */
+export const useModalStoreState = (skipSubscription = false): ModalState =>
+  useModalStore<ModalState>((state) =>
+    skipSubscription ? initialModalState : state.modalState
+  );

package/modalState/types.ts

@@ -32,16 +32,15 @@ export interface EntryActionGroup {
 }
 
 export interface MenuItem {
-  id?: string;
+  id: string;
   title: string;
   summary?: string;
   icon?: string;
   isSelected?: boolean;
-  // When item represents an audio item, clicking on it will start playback
-  // and secondary action will allow to add it to queue or playlist
+  actions?: (Action | PresentSubMenuAction)[];
+  /** @deprecated Use `actions` array instead. Maintained for backwards compatibility. */
   action?: Action | PresentSubMenuAction;
   secondaryAction?: SecondaryAction;
-  submenu?: MenuItem[]; // todo: not needed. Must be replaced with PresentSubMenuAction
   trailingButton?: any;
   entryActions?: EntryActionGroup[];
 }
@@ -71,6 +70,28 @@ export type CollectionScopedOperation = "add" | "clearAll" | "delete";
  */
 export type UIOperation = "nowPlaying";
 
+export const OPERATIONS = {
+  REMOVE: "remove",
+  REORDER: "reorder",
+  ADD: "add",
+  CLEAR_ALL: "clearAll",
+  DELETE: "delete",
+  NOW_PLAYING: "nowPlaying",
+} as const;
+
+export function hasOperation(
+  operations: string[] | undefined,
+  target: string
+): boolean {
+  if (!Array.isArray(operations)) return false;
+
+  const targetLower = target.toLowerCase();
+
+  return operations.some(
+    (op) => typeof op === "string" && op.toLowerCase() === targetLower
+  );
+}
+
 export type Operation =
   | ItemScopedOperation
   | CollectionScopedOperation
@@ -95,6 +116,11 @@ export interface Content {
   role?: string;
   behavior?: SelectionBehavior;
   dynamicCollection?: DynamicCollectionOptions;
+  themePluginId?: string;
+  styleOverrides?: Record<string, any>;
+  /** Shown under Next Up when the queue sheet has no upcoming items. */
+  emptyMessage?: string;
+  context?: Record<string, any>;
 }
 
 export interface Menu {
@@ -108,3 +134,29 @@ export function isPresentSubMenuAction(
 ): action is PresentSubMenuAction {
   return !!action && typeof action === "object" && "menu" in action;
 }
+
+/**
+ * Normalizes an item's action/actions into an array of Action items.
+ * Supports canonical `actions: Action[]` and backwards-compatible `action: Action | Action[]`.
+ */
+export function getMenuItemActions(
+  item?: Partial<MenuItem> | null
+): (Action | PresentSubMenuAction)[] {
+  if (!item) {
+    return [];
+  }
+
+  if (Array.isArray(item.actions) && item.actions.length > 0) {
+    return item.actions;
+  }
+
+  if (Array.isArray((item as any).action)) {
+    return (item as any).action;
+  }
+
+  if (item.action) {
+    return [item.action];
+  }
+
+  return [];
+}

package/modalState/useBottomSheetContent.ts

@@ -1,14 +1,15 @@
-import React, { useState, useEffect } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
-import {
-  isPresentSubMenuAction,
-  MenuItem,
-  modalOrchestrator,
-} from "./ModalOrchestrator";
+import { MenuItem, modalOrchestrator } from "./ModalOrchestrator";
 
 import { ContentViewModel } from "./ContentViewModel";
-import type { SelectionBehavior } from "./types";
+import {
+  DynamicCollectionOptions,
+  getMenuItemActions,
+  isPresentSubMenuAction,
+  SelectionBehavior,
+} from "./types";
 import type { EditableCollection } from "./EditableCollection";
 
 type Props = {
@@ -20,14 +21,16 @@ type Return = {
   items: MenuItem[];
   isLoading: boolean;
   error?: Error | string;
-  showCentralLoading: boolean; // isLoading && items.length === 0
-  canGoBack: boolean; // modalOrchestrator.canGoBack
+  showCentralLoading: boolean;
+  canGoBack: boolean;
   handleItemPress: (item: MenuItem) => Promise<void>;
-  goBackOrClose: () => void; // canGoBack ? back() : close()
-  close: () => void; // modalOrchestrator.close()
+  goBackOrClose: () => void;
+  close: () => void;
   role?: string;
   behavior?: SelectionBehavior;
-  editableCollection?: EditableCollection | null;
+  dynamicCollection?: DynamicCollectionOptions;
+  editableCollection: EditableCollection | null;
+  themePluginId?: string;
 };
 
 export const useBottomSheetContent = (props: Props): Return => {
@@ -35,12 +38,16 @@ export const useBottomSheetContent = (props: Props): Return => {
 
   const [state, setState] = useState(viewModel?.getState());
 
-  const [editableItems, setEditableItems] = useState<MenuItem[]>([]);
+  const [editableItems, setEditableItems] = useState<MenuItem[]>(
+    () => viewModel?.getState().items || []
+  );
 
   // Subscribe to the viewModel state changes
   useEffect(() => {
     return viewModel?.subscribe((nextState) => {
-      setState(nextState);
+      setState((state) => {
+        return state === nextState ? state : nextState;
+      });
     });
   }, [viewModel]);
 
@@ -60,17 +67,19 @@ export const useBottomSheetContent = (props: Props): Return => {
    * - If the item was a leaf action (not a submenu), triggers viewModel.refetch()
    *   so that checkmarks (isSelected) reflect the updated server state.
    */
-  const handleItemPress = async (item: MenuItem) => {
-    const isSubMenu =
-      (item.submenu && item.submenu.length > 0) ||
-      (item.action && isPresentSubMenuAction(item.action));
+  const handleItemPress = useCallback(
+    async (item: MenuItem) => {
+      const actions = getMenuItemActions(item);
+      const isSubMenu = actions.some(isPresentSubMenuAction);
 
-    await onPress(item);
+      await onPress(item);
 
-    if (!isSubMenu) {
-      await viewModel?.refetch();
-    }
-  };
+      if (!isSubMenu) {
+        await viewModel?.refetch();
+      }
+    },
+    [onPress, viewModel]
+  );
 
   const goBackOrClose = React.useCallback(() => {
     if (modalOrchestrator.canGoBack) {
@@ -78,7 +87,7 @@ export const useBottomSheetContent = (props: Props): Return => {
     } else {
       modalOrchestrator.close();
     }
-  }, [modalOrchestrator.canGoBack]);
+  }, []);
 
   return {
     items: viewModel?.editableCollection ? editableItems : state?.items,
@@ -90,9 +99,11 @@ export const useBottomSheetContent = (props: Props): Return => {
     canGoBack: modalOrchestrator.canGoBack,
     handleItemPress,
     goBackOrClose,
-    close: () => modalOrchestrator.close(),
+    close: useCallback(() => modalOrchestrator.close(), []),
     role: state?.role,
     behavior: state?.behavior,
-    editableCollection: viewModel?.editableCollection,
+    dynamicCollection: state?.dynamicCollection,
+    editableCollection: viewModel?.editableCollection || null,
+    themePluginId: state?.themePluginId,
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "16.0.0-alpha.1052711356",
+  "version": "16.0.0-alpha.1054344748",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-alpha.1052711356",
+    "@applicaster/applicaster-types": "16.0.0-alpha.1054344748",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",