@applicaster/quick-brick-core 16.0.0-alpha.1042942411 → 16.0.0-alpha.1052711356

package/App/ModalProvider/ModalBottomSheet/ModalBottomSheetFrame.tsx

@@ -14,6 +14,8 @@ import {
   platformSelect,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
 
+import { useKeyboardHeight } from "./hooks";
+
 type Props = {
   children: React.ReactChild;
   backgroundColor: string;
@@ -104,6 +106,8 @@ export function ModalBottomSheetFrame(props: Props) {
 
   const sheetHeight = useGetSheetHeight(height, maxHeight);
 
+  const keyboardHeight = useKeyboardHeight();
+
   return (
     <DraggableBottomSheet
       sheetHeight={sheetHeight}
@@ -113,7 +117,11 @@ export function ModalBottomSheetFrame(props: Props) {
       header={(dragging) => <Handle {...handleProps} focused={dragging} />}
       maxWidth={maxWidth}
       {...dimensions}
-      height={safeAreaDims.height - (Platform.OS === "ios" ? bottom : 0)}
+      height={
+        safeAreaDims.height -
+        (Platform.OS === "ios" ? bottom : 0) -
+        keyboardHeight
+      }
     >
       <SafeAreaView
         edges={["left", "right", "bottom"]}

package/App/ModalProvider/ModalBottomSheet/hooks/__tests__/useKeyboardHeight.android.test.ts

@@ -0,0 +1,105 @@
+import { act, renderHook } from "@testing-library/react-native";
+import { Keyboard } from "react-native";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+  isApplePlatform: () => false,
+}));
+
+// Import after mocks so module-level isApple resolves to false.
+// eslint-disable-next-line import/first
+import { useKeyboardHeight } from "../useKeyboardHeight";
+
+type KeyboardListener = (event?: {
+  endCoordinates: { height: number };
+}) => void;
+
+function setupKeyboardListenerMock() {
+  const listeners: Record<string, KeyboardListener> = {};
+  const removeMocks: Record<string, jest.Mock> = {};
+
+  const addListenerSpy = jest
+    .spyOn(Keyboard, "addListener")
+    .mockImplementation((event: string, callback: KeyboardListener) => {
+      listeners[event] = callback;
+
+      const remove = jest.fn();
+      removeMocks[event] = remove;
+
+      return { remove };
+    });
+
+  return { listeners, removeMocks, addListenerSpy };
+}
+
+describe("useKeyboardHeight (non-Apple platforms)", () => {
+  let listeners: Record<string, KeyboardListener>;
+  let removeMocks: Record<string, jest.Mock>;
+  let addListenerSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    const mock = setupKeyboardListenerMock();
+    listeners = mock.listeners;
+    removeMocks = mock.removeMocks;
+    addListenerSpy = mock.addListenerSpy;
+  });
+
+  afterEach(() => {
+    addListenerSpy.mockRestore();
+  });
+
+  it("returns 0 initially and subscribes to didShow / didHide events", () => {
+    const { result } = renderHook(() => useKeyboardHeight());
+
+    expect(result.current).toBe(0);
+    expect(addListenerSpy).toHaveBeenCalledTimes(2);
+
+    expect(addListenerSpy).toHaveBeenCalledWith(
+      "keyboardDidShow",
+      expect.any(Function)
+    );
+
+    expect(addListenerSpy).toHaveBeenCalledWith(
+      "keyboardDidHide",
+      expect.any(Function)
+    );
+  });
+
+  it("updates height when keyboardDidShow fires", () => {
+    const { result } = renderHook(() => useKeyboardHeight());
+
+    act(() => {
+      listeners.keyboardDidShow?.({
+        endCoordinates: { height: 412 },
+      });
+    });
+
+    expect(result.current).toBe(412);
+  });
+
+  it("resets height to 0 when keyboardDidHide fires", () => {
+    const { result } = renderHook(() => useKeyboardHeight());
+
+    act(() => {
+      listeners.keyboardDidShow?.({
+        endCoordinates: { height: 412 },
+      });
+    });
+
+    expect(result.current).toBe(412);
+
+    act(() => {
+      listeners.keyboardDidHide?.();
+    });
+
+    expect(result.current).toBe(0);
+  });
+
+  it("removes listeners on unmount", () => {
+    const { unmount } = renderHook(() => useKeyboardHeight());
+
+    unmount();
+
+    expect(removeMocks.keyboardDidShow).toHaveBeenCalledTimes(1);
+    expect(removeMocks.keyboardDidHide).toHaveBeenCalledTimes(1);
+  });
+});

package/App/ModalProvider/ModalBottomSheet/hooks/__tests__/useKeyboardHeight.test.ts

@@ -0,0 +1,102 @@
+import { act, renderHook } from "@testing-library/react-native";
+import { Keyboard } from "react-native";
+import { useKeyboardHeight } from "../useKeyboardHeight";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+  isApplePlatform: () => true,
+}));
+
+type KeyboardListener = (event?: {
+  endCoordinates: { height: number };
+}) => void;
+
+function setupKeyboardListenerMock() {
+  const listeners: Record<string, KeyboardListener> = {};
+  const removeMocks: Record<string, jest.Mock> = {};
+
+  const addListenerSpy = jest
+    .spyOn(Keyboard, "addListener")
+    .mockImplementation((event: string, callback: KeyboardListener) => {
+      listeners[event] = callback;
+
+      const remove = jest.fn();
+      removeMocks[event] = remove;
+
+      return { remove };
+    });
+
+  return { listeners, removeMocks, addListenerSpy };
+}
+
+describe("useKeyboardHeight (Apple platforms)", () => {
+  let listeners: Record<string, KeyboardListener>;
+  let removeMocks: Record<string, jest.Mock>;
+  let addListenerSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    const mock = setupKeyboardListenerMock();
+    listeners = mock.listeners;
+    removeMocks = mock.removeMocks;
+    addListenerSpy = mock.addListenerSpy;
+  });
+
+  afterEach(() => {
+    addListenerSpy.mockRestore();
+  });
+
+  it("returns 0 initially and subscribes to willShow / willHide events", () => {
+    const { result } = renderHook(() => useKeyboardHeight());
+
+    expect(result.current).toBe(0);
+    expect(addListenerSpy).toHaveBeenCalledTimes(2);
+
+    expect(addListenerSpy).toHaveBeenCalledWith(
+      "keyboardWillShow",
+      expect.any(Function)
+    );
+
+    expect(addListenerSpy).toHaveBeenCalledWith(
+      "keyboardWillHide",
+      expect.any(Function)
+    );
+  });
+
+  it("updates height when keyboardWillShow fires", () => {
+    const { result } = renderHook(() => useKeyboardHeight());
+
+    act(() => {
+      listeners.keyboardWillShow?.({
+        endCoordinates: { height: 336 },
+      });
+    });
+
+    expect(result.current).toBe(336);
+  });
+
+  it("resets height to 0 when keyboardWillHide fires", () => {
+    const { result } = renderHook(() => useKeyboardHeight());
+
+    act(() => {
+      listeners.keyboardWillShow?.({
+        endCoordinates: { height: 280 },
+      });
+    });
+
+    expect(result.current).toBe(280);
+
+    act(() => {
+      listeners.keyboardWillHide?.();
+    });
+
+    expect(result.current).toBe(0);
+  });
+
+  it("removes listeners on unmount", () => {
+    const { unmount } = renderHook(() => useKeyboardHeight());
+
+    unmount();
+
+    expect(removeMocks.keyboardWillShow).toHaveBeenCalledTimes(1);
+    expect(removeMocks.keyboardWillHide).toHaveBeenCalledTimes(1);
+  });
+});

package/App/ModalProvider/ModalBottomSheet/hooks/index.ts

@@ -0,0 +1 @@
+export { useKeyboardHeight } from "./useKeyboardHeight";

package/App/ModalProvider/ModalBottomSheet/hooks/useKeyboardHeight.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { Keyboard, KeyboardEvent } from "react-native";
+import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+
+const isApple = isApplePlatform();
+
+export function useKeyboardHeight() {
+  const [keyboardHeight, setKeyboardHeight] = React.useState(0);
+
+  React.useEffect(() => {
+    // iOS supports smooth 'willShow' / 'willHide' events
+    const showEvent = isApple ? "keyboardWillShow" : "keyboardDidShow";
+    const hideEvent = isApple ? "keyboardWillHide" : "keyboardDidHide";
+
+    const showListener = Keyboard.addListener(showEvent, (e: KeyboardEvent) => {
+      setKeyboardHeight(e.endCoordinates.height);
+    });
+
+    const hideListener = Keyboard.addListener(hideEvent, () => {
+      setKeyboardHeight(0);
+    });
+
+    return () => {
+      showListener.remove();
+      hideListener.remove();
+    };
+  }, []);
+
+  return keyboardHeight;
+}

package/App/NotificationToastRenderer/NotificationToastManager.ts

@@ -24,11 +24,13 @@ export interface ToastStyle {
   letterSpacing?: number;
 }
 
+export const DEFAULT_TOAST_TIMEOUT = 4000;
+
 export interface ToastPayload {
   id?: string;
   message: string;
   extraMessage?: string; // secondary line; TV renderers show it as a subtitle, mobile ignores it
-  timeout?: number; // ms; if omitted, toast stays until dismissed
+  timeout?: number; // ms; defaults to DEFAULT_TOAST_TIMEOUT (4000) if omitted
   style?: ToastStyle;
   [key: string]: unknown;
 }
@@ -122,7 +124,11 @@ class NotificationToastManager {
   };
 
   private handleShowToast = (payload: ToastPayload) => {
-    const item = { ...payload, id: payload.id ?? String(this.nextId++) };
+    const item = {
+      ...payload,
+      id: payload.id ?? String(this.nextId++),
+      timeout: payload.timeout ?? DEFAULT_TOAST_TIMEOUT,
+    };
 
     const queuedIndex = this.queue.findIndex((queued) => queued.id === item.id);
 

package/App/NotificationToastRenderer/__tests__/NotificationToastManager.test.ts

@@ -1,6 +1,7 @@
 import {
   notificationToastManager,
   NOTIFICATION_TOAST_EVENTS,
+  DEFAULT_TOAST_TIMEOUT,
 } from "../NotificationToastManager";
 import { postEvent } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
 
@@ -210,4 +211,27 @@ describe("NotificationToastManager", () => {
 
     expect(onShow).not.toHaveBeenCalled();
   });
+
+  it("defaults timeout to DEFAULT_TOAST_TIMEOUT (4000ms) when omitted and auto-hides", () => {
+    const onShow = jest.fn();
+    const onHide = jest.fn();
+    on(NOTIFICATION_TOAST_EVENTS.SHOW, onShow);
+    on(NOTIFICATION_TOAST_EVENTS.HIDE, onHide);
+
+    notificationToastManager.showToast({
+      message: "Added to queue",
+    });
+
+    expect(onShow).toHaveBeenCalledWith(
+      expect.objectContaining({
+        message: "Added to queue",
+        timeout: DEFAULT_TOAST_TIMEOUT,
+      }),
+      expect.any(Function)
+    );
+
+    jest.advanceTimersByTime(DEFAULT_TOAST_TIMEOUT);
+
+    expect(onHide).toHaveBeenCalledTimes(1);
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-core",
-  "version": "16.0.0-alpha.1042942411",
+  "version": "16.0.0-alpha.1052711356",
   "description": "Core package for Applicaster's Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,13 +28,13 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-alpha.1042942411",
-    "@applicaster/quick-brick-core-plugins": "16.0.0-alpha.1042942411",
-    "@applicaster/zapp-pipes-v2-client": "16.0.0-alpha.1042942411",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-alpha.1042942411",
-    "@applicaster/zapp-react-native-redux": "16.0.0-alpha.1042942411",
-    "@applicaster/zapp-react-native-ui-components": "16.0.0-alpha.1042942411",
-    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.1042942411",
+    "@applicaster/applicaster-types": "16.0.0-alpha.1052711356",
+    "@applicaster/quick-brick-core-plugins": "16.0.0-alpha.1052711356",
+    "@applicaster/zapp-pipes-v2-client": "16.0.0-alpha.1052711356",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-alpha.1052711356",
+    "@applicaster/zapp-react-native-redux": "16.0.0-alpha.1052711356",
+    "@applicaster/zapp-react-native-ui-components": "16.0.0-alpha.1052711356",
+    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.1052711356",
     "atob": "^2.1.2",
     "axios": "^0.28.0",
     "btoa": "^1.2.1",