@pushwoosh/dumb-components 1.1.233 → 1.1.234

package/NativeRichMediaPreview/NativeRichMediaPreview.d.ts

@@ -1,3 +1,36 @@
 import { type ReactElement } from 'react';
 import type { NativeRichMediaPreviewProps } from './types';
+/**
+ * Preview of a native rich media (modal, banner, stories, spinwheel, …)
+ * rendered from its JSON config; lays out with plain CSS in the real pixels
+ * of the given width/height box, with no fidelity to any phone's pt-metrics
+ * since this is a preview and devices vary. Content flows inside a scrollable
+ * layer above a static backdrop (the dim overlay or, for
+ * `fullscreen`/`video`/`stories`, the full-bleed background image or poster):
+ * content taller than the box scrolls, shorter content aligns per display
+ * type while the backdrop stays put. Pass `scale` to lay the content out on a
+ * larger (or smaller) reference viewport and scale the whole preview to fill
+ * the box — the way to cram a phone-sized layout into a small preview box
+ * while keeping its proportions. Shows an invalid-config placeholder when the
+ * config cannot be parsed or misses required contract fields.
+ * With `withThemeToggle` the preview carries a chip that flips it between the light
+ * values and the dark overlay merged over them; pass `theme` with `onThemeChange`
+ * to drive that from outside, when a surrounding editor has its own theme switch.
+ *
+ * @example
+ * <NativeRichMediaPreview
+ *   width={304}
+ *   height={659}
+ *   content={{
+ *     displayType: 'modal',
+ *     modal: {
+ *       showClose: true,
+ *       dimBackground: true,
+ *       background: '#FFFFFFFF',
+ *       title: { text: 'Hi', color: '#4B5057FF' },
+ *       buttons: [],
+ *     },
+ *   }}
+ * />
+ */
 export declare function NativeRichMediaPreview(props: NativeRichMediaPreviewProps): ReactElement;

package/NativeRichMediaPreview/NativeRichMediaPreview.js

@@ -152,6 +152,17 @@ function renderConfig(config, activeIndex) {
       return _jsx(NativeRichMediaInvalidView, {});
   }
 }
+function parseDarkVariant(content, withThemeToggle) {
+  if (!withThemeToggle) {
+    return null;
+  }
+  const merged = mergeNativeDarkOverlay(content);
+  // The merge hands back `content` itself, untouched, whenever there is nothing to apply.
+  if (merged === content) {
+    return null;
+  }
+  return parseNativeRichMediaConfig(merged);
+}
 /**
  * Preview of a native rich media (modal, banner, stories, spinwheel, …)
  * rendered from its JSON config; lays out with plain CSS in the real pixels
@@ -165,6 +176,9 @@ function renderConfig(config, activeIndex) {
  * the box — the way to cram a phone-sized layout into a small preview box
  * while keeping its proportions. Shows an invalid-config placeholder when the
  * config cannot be parsed or misses required contract fields.
+ * With `withThemeToggle` the preview carries a chip that flips it between the light
+ * values and the dark overlay merged over them; pass `theme` with `onThemeChange`
+ * to drive that from outside, when a surrounding editor has its own theme switch.
  *
  * @example
  * <NativeRichMediaPreview
@@ -182,17 +196,6 @@ function renderConfig(config, activeIndex) {
  *   }}
  * />
  */
-function parseDarkVariant(content, withThemeToggle) {
-  if (!withThemeToggle) {
-    return null;
-  }
-  const merged = mergeNativeDarkOverlay(content);
-  // The merge hands back `content` itself, untouched, whenever there is nothing to apply.
-  if (merged === content) {
-    return null;
-  }
-  return parseNativeRichMediaConfig(merged);
-}
 export function NativeRichMediaPreview(props) {
   const {
     content,
@@ -204,9 +207,20 @@ export function NativeRichMediaPreview(props) {
     activeIndex = 0,
     isLoading = false,
     withBackground = true,
-    withThemeToggle = false
+    withThemeToggle = false,
+    theme: controlledTheme,
+    onThemeChange
   } = props;
-  const [theme, setTheme] = useState('light');
+  const [ownTheme, setOwnTheme] = useState('light');
+  const isControlled = controlledTheme !== undefined;
+  const theme = controlledTheme ?? ownTheme;
+  const toggleTheme = () => {
+    const next = theme === 'dark' ? 'light' : 'dark';
+    if (!isControlled) {
+      setOwnTheme(next);
+    }
+    onThemeChange?.(next);
+  };
   const {
     config,
     isDarkRendered,
@@ -222,6 +236,7 @@ export function NativeRichMediaPreview(props) {
       canToggleDark: darkParsed !== null
     };
   }, [content, localization, language, theme, withThemeToggle]);
+  const renderedTheme = isDarkRendered ? 'dark' : 'light';
   const shouldDim = !isLoading && dimsScreen(config);
   return _jsxs(PreviewHost, {
     ...LIGHT_ISLAND_PROPS,
@@ -239,9 +254,9 @@ export function NativeRichMediaPreview(props) {
         })
       }, config.displayType), !isLoading && config && renderChrome(config)]
     }), !isLoading && config && withThemeToggle && _jsx(NativeRichMediaThemeChip, {
-      theme: isDarkRendered ? 'dark' : 'light',
-      disabled: !canToggleDark,
-      onToggle: () => setTheme(theme === 'dark' ? 'light' : 'dark')
+      theme: isControlled ? theme : renderedTheme,
+      disabled: !isControlled && !canToggleDark,
+      onToggle: toggleTheme
     }), isLoading && _jsx(SpinnerLayer, {
       children: _jsx(Spinner, {
         size: "medium",

package/NativeRichMediaPreview/__tests__/NativeRichMediaPreview.test.d.ts

@@ -0,0 +1 @@
+export {};

package/NativeRichMediaPreview/__tests__/NativeRichMediaPreview.test.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from '@testing-library/react';
+import { NativeRichMediaPreview } from '../NativeRichMediaPreview';
+const lightContent = {
+  displayType: 'modal',
+  modal: {
+    showClose: true,
+    dimBackground: true,
+    background: '#FFFFFFFF',
+    title: {
+      text: 'Hi',
+      color: '#4B5057FF'
+    },
+    buttons: []
+  }
+};
+const darkableContent = {
+  ...lightContent,
+  modal: {
+    ...lightContent.modal,
+    dark: {
+      background: '#14161AFF',
+      title: {
+        color: '#F2F4F7FF'
+      }
+    }
+  }
+};
+const themeChip = () => screen.getByLabelText('Switch light and dark');
+const renderPreview = (props = {}) => render(_jsx(NativeRichMediaPreview, {
+  content: darkableContent,
+  width: 304,
+  height: 659,
+  withThemeToggle: true,
+  ...props
+}));
+describe('NativeRichMediaPreview theme toggle', () => {
+  it('keeps its own theme when uncontrolled', () => {
+    renderPreview();
+    expect(themeChip()).toHaveAttribute('aria-pressed', 'false');
+    fireEvent.click(themeChip());
+    expect(themeChip()).toHaveAttribute('aria-pressed', 'true');
+  });
+  it('follows the theme prop instead of a click when controlled', () => {
+    const onThemeChange = jest.fn();
+    const {
+      rerender
+    } = renderPreview({
+      theme: 'dark',
+      onThemeChange
+    });
+    expect(themeChip()).toHaveAttribute('aria-pressed', 'true');
+    fireEvent.click(themeChip());
+    expect(onThemeChange).toHaveBeenCalledWith('light');
+    expect(themeChip()).toHaveAttribute('aria-pressed', 'true');
+    rerender(_jsx(NativeRichMediaPreview, {
+      content: darkableContent,
+      width: 304,
+      height: 659,
+      withThemeToggle: true,
+      theme: "light",
+      onThemeChange: onThemeChange
+    }));
+    expect(themeChip()).toHaveAttribute('aria-pressed', 'false');
+  });
+  it('reports the controlled theme even when the content has no dark overlay', () => {
+    renderPreview({
+      content: lightContent,
+      theme: 'dark',
+      onThemeChange: jest.fn()
+    });
+    expect(themeChip()).toHaveAttribute('aria-pressed', 'true');
+    expect(themeChip()).not.toBeDisabled();
+  });
+  it('disables the chip on content without a dark overlay when uncontrolled', () => {
+    renderPreview({
+      content: lightContent
+    });
+    expect(themeChip()).toBeDisabled();
+  });
+});

package/NativeRichMediaPreview/index.d.ts

@@ -1,4 +1,4 @@
-export type { NativeRichMediaConfig, NativeRichMediaDisplayType, NativeRichMediaDarkOverlay, NativeRichMediaText, NativeRichMediaBorder, NativeRichMediaCover, NativeRichMediaAction, NativeRichMediaButton, NativeRichMediaReward, NativeRichMediaModalBlock, NativeRichMediaSheetBlock, NativeRichMediaCarouselBlock, NativeRichMediaStoriesBlock, NativeRichMediaBannerBlock, NativeRichMediaFullscreenBlock, NativeRichMediaVideoBlock, NativeRichMediaPipBlock, NativeRichMediaScratchcardBlock, NativeRichMediaSpinwheelBlock, NativeRichMediaPreviewProps, NativeRichMediaLocalization, } from './types';
+export type { NativeRichMediaConfig, NativeRichMediaDisplayType, NativeRichMediaDarkOverlay, NativeRichMediaText, NativeRichMediaBorder, NativeRichMediaCover, NativeRichMediaAction, NativeRichMediaButton, NativeRichMediaReward, NativeRichMediaModalBlock, NativeRichMediaSheetBlock, NativeRichMediaCarouselBlock, NativeRichMediaStoriesBlock, NativeRichMediaBannerBlock, NativeRichMediaFullscreenBlock, NativeRichMediaVideoBlock, NativeRichMediaPipBlock, NativeRichMediaScratchcardBlock, NativeRichMediaSpinwheelBlock, NativeRichMediaPreviewProps, NativeRichMediaLocalization, NativeRichMediaTheme, } from './types';
 export { NATIVE_RICH_MEDIA_DISPLAY_TYPES, EDITABLE_NATIVE_RICH_MEDIA_DISPLAY_TYPES } from './types';
 export { parseNativeRichMediaConfig } from './parseNativeRichMediaConfig';
 export { parseLocalizationParams } from './parseLocalizationParams';

package/NativeRichMediaPreview/types.d.ts

@@ -319,6 +319,8 @@ export declare const EDITABLE_NATIVE_RICH_MEDIA_DISPLAY_TYPES: NativeRichMediaDi
  * fallback. Text lives here rather than inline in `content`.
  */
 export type NativeRichMediaLocalization = Record<string, Record<string, string>>;
+/** Colour scheme the preview renders: the light values, or them merged with the dark overlay. */
+export type NativeRichMediaTheme = 'light' | 'dark';
 /** Props of {@link NativeRichMediaPreview}. */
 export type NativeRichMediaPreviewProps = {
     /** Rich media config, as an object or a JSON string. */
@@ -339,6 +341,10 @@ export type NativeRichMediaPreviewProps = {
     isLoading?: boolean;
     /** Render the container chrome — white backdrop and border (default `true`). Set `false` for a transparent preview over the consumer's own background. */
     withBackground?: boolean;
-    /** Show a chip that switches the preview between the light and dark variants (default `false`). The preview always opens light. */
+    /** Show a chip that switches the preview between the light and dark variants (default `false`). Uncontrolled, the preview opens light. */
     withThemeToggle?: boolean;
+    /** Theme to render, making the chip controlled: the preview follows this value, the chip mirrors it (rather than the rendered result, since content without a dark overlay renders identically in both themes) and only reports clicks through `onThemeChange`. Omit to let the preview keep its own state. */
+    theme?: NativeRichMediaTheme;
+    /** Called with the other theme when the chip is clicked; the only way to react to the chip on a controlled preview. */
+    onThemeChange?: (theme: NativeRichMediaTheme) => void;
 };

package/index.d.ts

@@ -50,7 +50,7 @@ export { Chip, type ChipProps, type ChipVariant } from './Chip';
 export { RichmediaPreview, useRichmediaHtml } from './RichmediaPreview';
 export { SandboxedHtmlFrame, type SandboxedHtmlFrameProps, type IsolatedSandboxedHtmlFrameProps, type InspectableSandboxedHtmlFrameProps, } from './SandboxedHtmlFrame';
 export { NativeRichMediaPreview, parseNativeRichMediaConfig, parseLocalizationParams, NATIVE_RICH_MEDIA_DISPLAY_TYPES, EDITABLE_NATIVE_RICH_MEDIA_DISPLAY_TYPES, } from './NativeRichMediaPreview';
-export type { NativeRichMediaConfig, NativeRichMediaDisplayType, NativeRichMediaText, NativeRichMediaBorder, NativeRichMediaCover, NativeRichMediaAction, NativeRichMediaButton, NativeRichMediaReward, NativeRichMediaDarkOverlay, NativeRichMediaModalBlock, NativeRichMediaSheetBlock, NativeRichMediaCarouselBlock, NativeRichMediaStoriesBlock, NativeRichMediaBannerBlock, NativeRichMediaFullscreenBlock, NativeRichMediaVideoBlock, NativeRichMediaPipBlock, NativeRichMediaScratchcardBlock, NativeRichMediaSpinwheelBlock, NativeRichMediaPreviewProps, NativeRichMediaLocalization, } from './NativeRichMediaPreview';
+export type { NativeRichMediaConfig, NativeRichMediaDisplayType, NativeRichMediaText, NativeRichMediaBorder, NativeRichMediaCover, NativeRichMediaAction, NativeRichMediaButton, NativeRichMediaReward, NativeRichMediaDarkOverlay, NativeRichMediaModalBlock, NativeRichMediaSheetBlock, NativeRichMediaCarouselBlock, NativeRichMediaStoriesBlock, NativeRichMediaBannerBlock, NativeRichMediaFullscreenBlock, NativeRichMediaVideoBlock, NativeRichMediaPipBlock, NativeRichMediaScratchcardBlock, NativeRichMediaSpinwheelBlock, NativeRichMediaPreviewProps, NativeRichMediaLocalization, NativeRichMediaTheme, } from './NativeRichMediaPreview';
 export { RichMessageEditor, RichMessageViewer, type DynamicContent, } from './RichMessageEditor';
 export { FrequencyCappingEdit, FrequencyCappingReadonly, FrequencyCappingInApps, CappingCountingMode, CountingMode, type CountingModeProps, type LocalCapping, type CappingInAppBase, } from './FrequencyCapping';
 export { SendRateEdit, SendRateReadonly, type SendRateBase, type SendRateEditProps, type SendRateReadonlyProps, } from './SendRate';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.233",
+  "version": "1.1.234",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",