@pushwoosh/dumb-components 1.1.233 → 1.1.235

package/Calendar/CalendarSuperForm/components/CalendarTimezoneSelect.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { Combobox } from '../../../Combobox';
-import { getSortedTimezones } from '../../helpers-tz';
+import { findTimezoneOption, listTimezones } from '../../../helpers/timezones';
 export const CalendarTimezoneSelect = ({
   timezone,
   onChange,
   isDisabled
 }) => {
-  const timezonesOptions = useMemo(() => getSortedTimezones(), []);
-  const value = useMemo(() => timezonesOptions.find(op => op.value === timezone) ?? null, [timezonesOptions, timezone]);
+  const timezonesOptions = useMemo(() => listTimezones(new Date(), [timezone]), [timezone]);
+  const value = useMemo(() => findTimezoneOption(timezonesOptions, timezone), [timezonesOptions, timezone]);
   return _jsx(Combobox, {
     select: true,
     items: timezonesOptions,

package/Calendar/helpers-tz.d.ts

@@ -1,7 +1,2 @@
-export type TimezoneOption = {
-    value: string;
-    label: string;
-};
-export declare function getSortedTimezones(): TimezoneOption[];
 export declare function groupTimezonesByOffset(at?: Date): [number, string[]][];
 export declare function formatTimezoneShort(timezone: string): string;

package/Calendar/helpers-tz.js

@@ -13,37 +13,6 @@ function formatTimezoneOffset(minutes) {
     return `UTC${sign}${hours}:${formatTwoDigitNumber(mins)}`;
   }
 }
-export function getSortedTimezones() {
-  const timezones = getAllTimeZones();
-  const now = new Date();
-  return [...timezones, 'UTC'].map(tz => {
-    const offset = getTimezoneOffset(tz, now);
-    const offsetFormatted = formatTimezoneOffset(offset);
-    let displayName;
-    if (tz === 'UTC') {
-      displayName = 'Coordinated Universal Time';
-    } else if (tz.includes('/')) {
-      const parts = tz.split('/');
-      if (parts.length >= 2) {
-        const country = parts[0].replace(/_/g, ' ');
-        const city = parts[parts.length - 1].replace(/_/g, ' ');
-        displayName = `${city} / ${country}`;
-      } else {
-        displayName = tz.replace(/_/g, ' ');
-      }
-    } else {
-      displayName = tz.replace(/_/g, ' ');
-    }
-    return {
-      value: tz,
-      label: `${offsetFormatted} – ${displayName}`
-    };
-  }).sort((a, b) => {
-    if (a.value === 'UTC') return -1;
-    if (b.value === 'UTC') return 1;
-    return a.label.localeCompare(b.label);
-  });
-}
 export function groupTimezonesByOffset(at = new Date()) {
   const zones = getAllTimeZones();
   const groups = new Map();

package/Calendar/index.d.ts

@@ -1,5 +1,4 @@
 export { CalendarSuperForm, type CalendarSuperFormProps } from './CalendarSuperForm';
-export { getSortedTimezones, type TimezoneOption } from './helpers-tz';
 export { CalendarDropdown, stringifyValue, type CalendarDropdownProps, type CalendarDropdownRangeDateProps, } from './CalendarDropdown';
 export { dateToStruct, structToDate, dateToStructTz, structToDateTz, getTimezoneOffset, addPeriod, compareStructs, getPeriodEnd, getPeriodStart, pickDateStruct, } from './helpers';
 export type { DateStruct, RangeValue } from './types';

package/Calendar/index.js

@@ -1,4 +1,3 @@
 export { CalendarSuperForm } from './CalendarSuperForm';
-export { getSortedTimezones } from './helpers-tz';
 export { CalendarDropdown, stringifyValue } from './CalendarDropdown';
 export { dateToStruct, structToDate, dateToStructTz, structToDateTz, getTimezoneOffset, addPeriod, compareStructs, getPeriodEnd, getPeriodStart, pickDateStruct } from './helpers';

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/helpers/__tests__/timezones.test.d.ts

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

package/helpers/__tests__/timezones.test.js

@@ -0,0 +1,125 @@
+import { canonicalizeTimezone, findTimezoneOption, formatTimezoneLabel, formatTimezoneOffset, getTimezoneOffsetSafe, listTimezones, resolveTimezoneOption } from '../timezones';
+const winter = new Date('2026-01-15T12:00:00Z');
+const melbourneDst = new Date('2026-10-10T12:00:00Z');
+describe('formatTimezoneOffset', () => {
+  it('renders sign, hours and minutes', () => {
+    expect(formatTimezoneOffset(300)).toBe('GMT+05:00');
+    expect(formatTimezoneOffset(330)).toBe('GMT+05:30');
+    expect(formatTimezoneOffset(-210)).toBe('GMT-03:30');
+    expect(formatTimezoneOffset(0)).toBe('GMT+00:00');
+  });
+});
+describe('formatTimezoneLabel', () => {
+  it('uses the current tzdata: Kazakhstan is UTC+5 since 2024', () => {
+    expect(formatTimezoneLabel('Asia/Almaty', winter)).toBe('(GMT+05:00) Asia/Almaty');
+    expect(formatTimezoneLabel('Asia/Qostanay', winter)).toBe('(GMT+05:00) Asia/Qostanay');
+  });
+  it('keeps half-hour zones east of UTC exact', () => {
+    expect(formatTimezoneLabel('Asia/Kolkata', winter)).toBe('(GMT+05:30) Asia/Kolkata');
+    expect(formatTimezoneLabel('Asia/Kathmandu', winter)).toBe('(GMT+05:45) Asia/Kathmandu');
+    expect(formatTimezoneLabel('America/St_Johns', winter)).toBe('(GMT-03:30) America/St_Johns');
+  });
+  it('resolves the offset at the given instant, not today', () => {
+    expect(getTimezoneOffsetSafe('Australia/Melbourne', winter)).toBe(660);
+    expect(getTimezoneOffsetSafe('Australia/Melbourne', new Date('2026-07-01T00:00:00Z'))).toBe(600);
+    expect(getTimezoneOffsetSafe('Australia/Melbourne', melbourneDst)).toBe(660);
+  });
+  it('labels Etc and POSIX names the backend accepts but the picker does not list', () => {
+    expect(formatTimezoneLabel('Etc/GMT+3', winter)).toBe('(GMT-03:00) Etc/GMT+3');
+    expect(formatTimezoneLabel('Etc/GMT-0', winter)).toBe('(GMT+00:00) Etc/GMT-0');
+    expect(formatTimezoneLabel('EST', winter)).toBe('(GMT-05:00) EST');
+  });
+  it('falls back to the bare name for a zone the engine does not know', () => {
+    expect(getTimezoneOffsetSafe('Not/A_Zone')).toBeNull();
+    expect(formatTimezoneLabel('Not/A_Zone')).toBe('Not/A_Zone');
+  });
+});
+describe('canonicalizeTimezone', () => {
+  it('maps aliases onto one engine name and rejects unknown zones', () => {
+    expect(canonicalizeTimezone('Europe/Kiev')).toBe(canonicalizeTimezone('Europe/Kyiv'));
+    expect(canonicalizeTimezone('Asia/Calcutta')).toBe(canonicalizeTimezone('Asia/Kolkata'));
+    expect(canonicalizeTimezone('Etc/UTC')).toBe('UTC');
+    expect(canonicalizeTimezone('Not/A_Zone')).toBeNull();
+  });
+});
+describe('listTimezones', () => {
+  const options = listTimezones(winter);
+  it('contains UTC exactly once and no duplicates', () => {
+    expect(options.filter(option => option.value === 'UTC')).toHaveLength(1);
+    expect(new Set(options.map(option => option.value)).size).toBe(options.length);
+  });
+  it('covers every zone the engine reports', () => {
+    const supported = Intl.supportedValuesOf('timeZone');
+    expect(options.length).toBeGreaterThanOrEqual(supported.length);
+    supported.forEach(name => {
+      expect(options.some(option => option.value === name)).toBe(true);
+    });
+  });
+  it('is sorted by offset, UTC first among the zero-offset zones, then by name', () => {
+    const offsets = options.map(option => getTimezoneOffsetSafe(option.value, winter) ?? Infinity);
+    expect([...offsets].sort((a, b) => a - b)).toEqual(offsets);
+    const zeroOffset = options.filter(option => getTimezoneOffsetSafe(option.value, winter) === 0);
+    expect(zeroOffset[0].value).toBe('UTC');
+  });
+  it('labels every option in the shared format', () => {
+    options.forEach(option => {
+      expect(option.label).toBe(formatTimezoneLabel(option.value, winter));
+    });
+  });
+  it('keeps stored values selectable verbatim, skipping blanks', () => {
+    const withStored = listTimezones(winter, ['Asia/Calcutta', 'Etc/GMT-0', 'EST', 'Not/A_Zone', '', null, undefined]);
+    ['Asia/Calcutta', 'Etc/GMT-0', 'EST', 'Not/A_Zone'].forEach(name => {
+      expect(withStored.filter(option => option.value === name)).toHaveLength(1);
+    });
+    expect(withStored.some(option => option.value === '')).toBe(false);
+    expect(withStored[withStored.length - 1].value).toBe('Not/A_Zone');
+  });
+  it('falls back to the browser zone and UTC when the engine has no zone list', () => {
+    const original = Intl.supportedValuesOf;
+    Object.defineProperty(Intl, 'supportedValuesOf', {
+      value: undefined,
+      configurable: true
+    });
+    try {
+      const fallback = listTimezones(winter).map(option => option.value);
+      expect(fallback).toContain('UTC');
+      expect(fallback).toContain(Intl.DateTimeFormat().resolvedOptions().timeZone);
+      expect(fallback.length).toBeLessThanOrEqual(2);
+    } finally {
+      Object.defineProperty(Intl, 'supportedValuesOf', {
+        value: original,
+        configurable: true
+      });
+    }
+  });
+});
+describe('findTimezoneOption', () => {
+  const options = listTimezones(winter, ['Asia/Calcutta']);
+  it('matches a stored name exactly, aliases included', () => {
+    expect(findTimezoneOption(options, 'Asia/Almaty', winter)?.value).toBe('Asia/Almaty');
+    expect(findTimezoneOption(options, 'Asia/Calcutta', winter)?.value).toBe('Asia/Calcutta');
+    expect(findTimezoneOption(options, 'Not/Stored', winter)).toBeNull();
+  });
+  it('maps a legacy numeric offset onto a zone with that offset at the instant', () => {
+    expect(getTimezoneOffsetSafe(findTimezoneOption(options, 330, winter).value, winter)).toBe(330);
+    expect(getTimezoneOffsetSafe(findTimezoneOption(options, '-210', winter).value, winter)).toBe(-210);
+    expect(findTimezoneOption(options, 7, winter)).toBeNull();
+  });
+  it('returns null for an empty value', () => {
+    expect(findTimezoneOption(options, '', winter)).toBeNull();
+    expect(findTimezoneOption(options, null, winter)).toBeNull();
+    expect(findTimezoneOption(options, undefined, winter)).toBeNull();
+  });
+});
+describe('resolveTimezoneOption', () => {
+  it('never rewrites the stored value', () => {
+    expect(resolveTimezoneOption('Europe/Kiev', winter)).toEqual({
+      value: 'Europe/Kiev',
+      label: '(GMT+02:00) Europe/Kiev'
+    });
+    expect(resolveTimezoneOption('Not/A_Zone', winter)).toEqual({
+      value: 'Not/A_Zone',
+      label: 'Not/A_Zone'
+    });
+  });
+});

package/helpers/index.d.ts

@@ -1,2 +1,3 @@
 export * from './assignRef';
 export * from './barcodeUrl';
+export * from './timezones';

package/helpers/index.js

@@ -1,2 +1,3 @@
 export * from './assignRef';
-export * from './barcodeUrl';
+export * from './barcodeUrl';
+export * from './timezones';

package/helpers/timezones.d.ts

@@ -0,0 +1,23 @@
+/** A timezone picker option: `value` is the IANA name the backend receives, `label` is what the user reads. */
+export type TimezoneOption = {
+    value: string;
+    label: string;
+};
+/** IANA name of the zone the browser runs in. */
+export declare function getBrowserTimezone(): string;
+/** The engine's own primary name for `timezone` (an alias like `Europe/Kyiv` may map to `Europe/Kiev`), or `null` for a zone it doesn't know. */
+export declare function canonicalizeTimezone(timezone: string): string | null;
+/** Offset of `timezone` in minutes east of UTC at instant `at`, or `null` for a zone the engine doesn't know. */
+export declare function getTimezoneOffsetSafe(timezone: string, at?: Date): number | null;
+/** Minutes east of UTC rendered as `GMT+05:00` / `GMT-03:30`. */
+export declare function formatTimezoneOffset(minutes: number): string;
+/** The shared picker label, `(GMT+05:00) Asia/Almaty` at instant `at`; a zone the engine doesn't know is labelled by its bare name. */
+export declare function formatTimezoneLabel(timezone: string, at?: Date): string;
+/** Option for any stored zone name — aliases, `Etc/GMT±N`, POSIX abbreviations — kept verbatim as the value. */
+export declare function resolveTimezoneOption(timezone: string, at?: Date): TimezoneOption;
+/** Zones the browser knows plus `UTC` and every non-empty `include` value, sorted by offset at `at` then by name. Pass the stored value as `include` so an old alias stays selectable and is re-saved unchanged. */
+export declare function listTimezones(at?: Date, include?: Array<string | null | undefined>): TimezoneOption[];
+/** Option matching a stored value: by zone name, or for a legacy numeric offset (minutes east of UTC) the first zone with that offset at `at`. */
+export declare function findTimezoneOption(options: TimezoneOption[], value: string | number | null | undefined, at?: Date): TimezoneOption | null;
+/** @deprecated Use `listTimezones`; kept for one release so consumers can migrate without a build break. */
+export declare const getSortedTimezones: typeof listTimezones;

package/helpers/timezones.js

@@ -0,0 +1,82 @@
+import { getTimezoneOffset } from '../Calendar/helpers';
+const UTC = 'UTC';
+/** IANA name of the zone the browser runs in. */
+export function getBrowserTimezone() {
+  return Intl.DateTimeFormat().resolvedOptions().timeZone || UTC;
+}
+/** The engine's own primary name for `timezone` (an alias like `Europe/Kyiv` may map to `Europe/Kiev`), or `null` for a zone it doesn't know. */
+export function canonicalizeTimezone(timezone) {
+  try {
+    return new Intl.DateTimeFormat('en-US', {
+      timeZone: timezone
+    }).resolvedOptions().timeZone;
+  } catch {
+    return null;
+  }
+}
+/** Offset of `timezone` in minutes east of UTC at instant `at`, or `null` for a zone the engine doesn't know. */
+export function getTimezoneOffsetSafe(timezone, at = new Date()) {
+  try {
+    return getTimezoneOffset(timezone, at);
+  } catch {
+    return null;
+  }
+}
+/** Minutes east of UTC rendered as `GMT+05:00` / `GMT-03:30`. */
+export function formatTimezoneOffset(minutes) {
+  const sign = minutes < 0 ? '-' : '+';
+  const absolute = Math.abs(minutes);
+  const hours = String(Math.floor(absolute / 60)).padStart(2, '0');
+  const mins = String(absolute % 60).padStart(2, '0');
+  return `GMT${sign}${hours}:${mins}`;
+}
+/** The shared picker label, `(GMT+05:00) Asia/Almaty` at instant `at`; a zone the engine doesn't know is labelled by its bare name. */
+export function formatTimezoneLabel(timezone, at = new Date()) {
+  const offset = getTimezoneOffsetSafe(timezone, at);
+  return offset === null ? timezone : `(${formatTimezoneOffset(offset)}) ${timezone}`;
+}
+/** Option for any stored zone name — aliases, `Etc/GMT±N`, POSIX abbreviations — kept verbatim as the value. */
+export function resolveTimezoneOption(timezone, at = new Date()) {
+  return {
+    value: timezone,
+    label: formatTimezoneLabel(timezone, at)
+  };
+}
+function supportedTimezones() {
+  const names = typeof Intl.supportedValuesOf === 'function' ? Intl.supportedValuesOf('timeZone') : [];
+  return names.length > 0 ? names : [getBrowserTimezone()];
+}
+function compareZones(a, b) {
+  if (a.offset !== b.offset) {
+    if (a.offset === null) return 1;
+    if (b.offset === null) return -1;
+    return a.offset - b.offset;
+  }
+  if (a.name === UTC) return -1;
+  if (b.name === UTC) return 1;
+  return a.name.localeCompare(b.name);
+}
+/** Zones the browser knows plus `UTC` and every non-empty `include` value, sorted by offset at `at` then by name. Pass the stored value as `include` so an old alias stays selectable and is re-saved unchanged. */
+export function listTimezones(at = new Date(), include = []) {
+  const names = new Set([UTC, ...supportedTimezones()]);
+  include.forEach(name => {
+    if (name) names.add(name);
+  });
+  return [...names].map(name => ({
+    name,
+    offset: getTimezoneOffsetSafe(name, at)
+  })).sort(compareZones).map(({
+    name
+  }) => resolveTimezoneOption(name, at));
+}
+/** Option matching a stored value: by zone name, or for a legacy numeric offset (minutes east of UTC) the first zone with that offset at `at`. */
+export function findTimezoneOption(options, value, at = new Date()) {
+  if (value === null || value === undefined || value === '') return null;
+  const byName = options.find(option => option.value === String(value));
+  if (byName) return byName;
+  const offset = Number(value);
+  if (!Number.isFinite(offset)) return null;
+  return options.find(option => getTimezoneOffsetSafe(option.value, at) === offset) ?? null;
+}
+/** @deprecated Use `listTimezones`; kept for one release so consumers can migrate without a build break. */
+export const getSortedTimezones = listTimezones;

package/index.d.ts

@@ -7,7 +7,7 @@ export { Checkbox } from './Checkbox';
 export { CrashScreen } from './CrashScreen';
 export { Divider } from './Divider';
 export { Drawer, DrawerHeader, DrawerTitle, DrawerBody, DrawerDocs, useDocs, } from './Drawer';
-export { CalendarSuperForm, CalendarDropdown, addPeriod, compareStructs, dateToStruct, dateToStructTz, getSortedTimezones, getTimezoneOffset, getPeriodEnd, getPeriodStart, structToDate, structToDateTz, stringifyValue, pickDateStruct, type CalendarDropdownProps, type CalendarDropdownRangeDateProps, type CalendarSuperFormProps, type DateStruct, type RangeValue, type TimezoneOption, } from './Calendar';
+export { CalendarSuperForm, CalendarDropdown, addPeriod, compareStructs, dateToStruct, dateToStructTz, getTimezoneOffset, getPeriodEnd, getPeriodStart, structToDate, structToDateTz, stringifyValue, pickDateStruct, type CalendarDropdownProps, type CalendarDropdownRangeDateProps, type CalendarSuperFormProps, type DateStruct, type RangeValue, } from './Calendar';
 export { DatePicker, DatePickerField, DateTimePicker, DateTimePickerField, } from './DateTimePicker';
 export { DropdownMenu, DropdownMenuButton, DropdownMenuSection, DropdownMenuItem, DropdownMenuSubmenu, } from './DropdownMenu';
 export { GetStartedPage } from './GetStartedPage';
@@ -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';
@@ -59,3 +59,4 @@ export { ApplicationPreloader, type ApplicationPreloaderProps, } from './Applica
 export { NotificationInbox, NotificationBar, NotificationBell, type Notification, type NotificationInboxProps, type NotificationSeverity, type NotificationBarType, type NotificationBarProps, type NotificationBellProps, } from './NotificationInbox';
 export { LeafletTheme } from './LeafletTheme';
 export { buildBarcodeUrl, barcodePlaceholderSafeEscape, isBarcodePlaceholder, type BarcodeSymbology, type BarcodeUrlParams, } from './helpers/barcodeUrl';
+export { canonicalizeTimezone, findTimezoneOption, formatTimezoneLabel, formatTimezoneOffset, getBrowserTimezone, getSortedTimezones, getTimezoneOffsetSafe, listTimezones, resolveTimezoneOption, type TimezoneOption, } from './helpers/timezones';

package/index.js

@@ -7,7 +7,7 @@ export { Checkbox } from './Checkbox';
 export { CrashScreen } from './CrashScreen';
 export { Divider } from './Divider';
 export { Drawer, DrawerHeader, DrawerTitle, DrawerBody, DrawerDocs, useDocs } from './Drawer';
-export { CalendarSuperForm, CalendarDropdown, addPeriod, compareStructs, dateToStruct, dateToStructTz, getSortedTimezones, getTimezoneOffset, getPeriodEnd, getPeriodStart, structToDate, structToDateTz, stringifyValue, pickDateStruct } from './Calendar';
+export { CalendarSuperForm, CalendarDropdown, addPeriod, compareStructs, dateToStruct, dateToStructTz, getTimezoneOffset, getPeriodEnd, getPeriodStart, structToDate, structToDateTz, stringifyValue, pickDateStruct } from './Calendar';
 export { DatePicker, DatePickerField, DateTimePicker, DateTimePickerField } from './DateTimePicker';
 export { DropdownMenu, DropdownMenuButton, DropdownMenuSection, DropdownMenuItem, DropdownMenuSubmenu } from './DropdownMenu';
 export { GetStartedPage } from './GetStartedPage';
@@ -56,4 +56,5 @@ export { Alert } from './Alert';
 export { ApplicationPreloader } from './ApplicationPreloader';
 export { NotificationInbox, NotificationBar, NotificationBell } from './NotificationInbox';
 export { LeafletTheme } from './LeafletTheme';
-export { buildBarcodeUrl, barcodePlaceholderSafeEscape, isBarcodePlaceholder } from './helpers/barcodeUrl';
+export { buildBarcodeUrl, barcodePlaceholderSafeEscape, isBarcodePlaceholder } from './helpers/barcodeUrl';
+export { canonicalizeTimezone, findTimezoneOption, formatTimezoneLabel, formatTimezoneOffset, getBrowserTimezone, getSortedTimezones, getTimezoneOffsetSafe, listTimezones, resolveTimezoneOption } from './helpers/timezones';

package/package.json

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