@pushwoosh/dumb-components 2.1.2 → 2.2.1

package/Calendar/__tests__/CalendarMonthSlider.test.d.ts

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

package/Calendar/__tests__/CalendarMonthSlider.test.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { CalendarMonthSlider } from '../CalendarMonthSlider/CalendarMonthSlider';
+const LAST_DAY_START = {
+  year: 2026,
+  month: 1,
+  day: 31
+};
+function renderSlider(startMonth = LAST_DAY_START) {
+  return render(_jsx(CalendarMonthSlider, {
+    startMonth: startMonth,
+    onDaySelect: jest.fn()
+  }));
+}
+function selectsOf(kind) {
+  const selects = screen.getAllByRole('combobox');
+  const isYear = select => /^\d+$/.test(select.options[0].text);
+  return selects.filter(select => kind === 'year' ? isYear(select) : !isYear(select));
+}
+function visibleMonths() {
+  const years = selectsOf('year');
+  return selectsOf('month').map((month, i) => `${years[i].value}-${month.value.padStart(2, '0')}`);
+}
+function step(direction) {
+  const [prev, next] = screen.getAllByRole('button');
+  fireEvent.click(direction === 'prev' ? prev : next);
+  act(() => {
+    jest.runAllTimers();
+  });
+  fireEvent.transitionEnd(selectsOf('month')[0]);
+}
+describe('CalendarMonthSlider', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date(2026, 5, 15));
+  });
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+  it('renders the start month regardless of the day it was opened on', () => {
+    renderSlider();
+    expect(visibleMonths()).toEqual(['2026-01']);
+  });
+  it('steps to the adjacent month in both directions without skipping one', () => {
+    renderSlider();
+    step('next');
+    expect(visibleMonths()).toEqual(['2026-02']);
+    step('next');
+    expect(visibleMonths()).toEqual(['2026-03']);
+    step('prev');
+    expect(visibleMonths()).toEqual(['2026-02']);
+  });
+  it('crosses the year boundary in both directions', () => {
+    renderSlider({
+      year: 2026,
+      month: 12,
+      day: 31
+    });
+    step('next');
+    expect(visibleMonths()).toEqual(['2027-01']);
+    step('prev');
+    step('prev');
+    expect(visibleMonths()).toEqual(['2026-11']);
+  });
+  it('shows the adjacent month, not the one after, while the step animates', () => {
+    renderSlider();
+    fireEvent.click(screen.getAllByRole('button')[1]);
+    expect(visibleMonths()).toEqual(['2026-01', '2026-02']);
+  });
+  it('jumps to the month and year picked in the selects', () => {
+    renderSlider();
+    fireEvent.change(selectsOf('month')[0], {
+      target: {
+        value: '2'
+      }
+    });
+    expect(visibleMonths()).toEqual(['2026-02']);
+    fireEvent.change(selectsOf('year')[0], {
+      target: {
+        value: '2027'
+      }
+    });
+    expect(visibleMonths()).toEqual(['2027-02']);
+  });
+});

package/Calendar/__tests__/helpers.test.js

@@ -1,4 +1,4 @@
-import { addPeriod, setPeriodStruct } from '../helpers';
+import { addPeriod, getTimezoneOffset, setPeriodStruct } from '../helpers';
 describe('addPeriod', () => {
   it('clamps the day when the target month is shorter', () => {
     expect(addPeriod({
@@ -121,4 +121,23 @@ describe('setPeriodStruct', () => {
       day: 28
     });
   });
+});
+describe('getTimezoneOffset', () => {
+  it('follows DST at the given instant', () => {
+    expect(getTimezoneOffset('Australia/Melbourne', new Date('2026-06-15T12:00:00Z'))).toBe(600);
+    expect(getTimezoneOffset('Australia/Melbourne', new Date('2026-10-10T12:00:00Z'))).toBe(660);
+    expect(getTimezoneOffset('Asia/Kolkata', new Date('2026-01-15T12:00:00Z'))).toBe(330);
+  });
+  it('builds one Intl.DateTimeFormat per zone, however many instants it is asked about', () => {
+    const construct = jest.spyOn(Intl, 'DateTimeFormat');
+    try {
+      getTimezoneOffset('Pacific/Chatham', new Date('2026-01-15T12:00:00Z'));
+      const afterFirst = construct.mock.calls.length;
+      getTimezoneOffset('Pacific/Chatham', new Date('2026-06-15T12:00:00Z'));
+      getTimezoneOffset('Pacific/Chatham', new Date('2026-10-10T12:00:00Z'));
+      expect(construct.mock.calls.length).toBe(afterFirst);
+    } finally {
+      construct.mockRestore();
+    }
+  });
 });

package/Calendar/helpers.js

@@ -163,8 +163,10 @@ export const structToDate = (ds, tzOffsetMinutes) => {
   const utcTime = Date.UTC(ds.year, ds.month - 1, ds.day, hour, minute, second, millisecond);
   return new Date(utcTime - tzOffsetMinutes * 60_000);
 };
-/** Returns the offset in minutes (east of UTC) for an IANA `timezoneName` at the given instant `at`. */
-export function getTimezoneOffset(timezoneName, at = new Date()) {
+const offsetFormatters = new Map();
+function offsetFormatter(timezoneName) {
+  const cached = offsetFormatters.get(timezoneName);
+  if (cached) return cached;
   const dtf = new Intl.DateTimeFormat('en-US', {
     timeZone: timezoneName,
     hour12: false,
@@ -175,7 +177,12 @@ export function getTimezoneOffset(timezoneName, at = new Date()) {
     minute: '2-digit',
     second: '2-digit'
   });
-  const parts = dtf.formatToParts(at);
+  offsetFormatters.set(timezoneName, dtf);
+  return dtf;
+}
+/** Returns the offset in minutes (east of UTC) for an IANA `timezoneName` at the given instant `at`. */
+export function getTimezoneOffset(timezoneName, at = new Date()) {
+  const parts = offsetFormatter(timezoneName).formatToParts(at);
   const y = Number(parts.find(p => p.type === 'year')?.value);
   const mo = Number(parts.find(p => p.type === 'month')?.value) - 1;
   const d = Number(parts.find(p => p.type === 'day')?.value);

package/helpers/__tests__/timezones.test.js

@@ -1,4 +1,4 @@
-import { canonicalizeTimezone, findTimezoneOption, formatTimezoneLabel, formatTimezoneOffset, formatTimezoneShort, getTimezoneOffsetSafe, listTimezones, resolveTimezoneOption } from '../timezones';
+import { canonicalizeTimezone, findTimezoneOption, formatTimezoneLabel, formatTimezoneOffset, formatTimezoneAbbreviation, formatTimezoneBadge, formatTimezoneShort, getTimezoneOffsetSafe, listTimezones, resolveTimezoneOption } from '../timezones';
 const winter = new Date('2026-01-15T12:00:00Z');
 const melbourneDst = new Date('2026-10-10T12:00:00Z');
 const melbourneStandard = new Date('2026-06-15T12:00:00Z');
@@ -24,6 +24,41 @@ describe('formatTimezoneShort', () => {
     expect(formatTimezoneShort('Not/AZone', winter)).toBe('Not/AZone');
   });
 });
+describe('formatTimezoneAbbreviation', () => {
+  it('returns the letter abbreviation where the engine has one', () => {
+    expect(formatTimezoneAbbreviation('America/New_York', winter)).toBe('EST');
+    expect(formatTimezoneAbbreviation('America/Los_Angeles', winter)).toBe('PST');
+  });
+  it('returns null where the engine only offers a GMT-style name', () => {
+    expect(formatTimezoneAbbreviation('Asia/Karachi', winter)).toBeNull();
+    expect(formatTimezoneAbbreviation('Asia/Kolkata', winter)).toBeNull();
+    expect(formatTimezoneAbbreviation('Europe/Moscow', winter)).toBeNull();
+  });
+  it('returns null for UTC and for a zone it does not know', () => {
+    expect(formatTimezoneAbbreviation('UTC', winter)).toBeNull();
+    expect(formatTimezoneAbbreviation('Not/AZone', winter)).toBeNull();
+  });
+  it('follows DST at the given instant', () => {
+    expect(formatTimezoneAbbreviation('America/New_York', new Date('2026-07-01T12:00:00Z'))).toBe('EDT');
+  });
+});
+describe('formatTimezoneBadge', () => {
+  it('pairs the abbreviation with the offset', () => {
+    expect(formatTimezoneBadge('America/New_York', winter)).toBe('EST (UTC-05:00)');
+  });
+  it('falls back to the bare offset for a zone without an abbreviation', () => {
+    expect(formatTimezoneBadge('Asia/Karachi', winter)).toBe('UTC+05:00');
+    expect(formatTimezoneBadge('Asia/Kolkata', winter)).toBe('UTC+05:30');
+    expect(formatTimezoneBadge('UTC', winter)).toBe('UTC+00:00');
+  });
+  it('follows DST at the given instant', () => {
+    expect(formatTimezoneBadge('Australia/Melbourne', melbourneStandard)).toBe('UTC+10:00');
+    expect(formatTimezoneBadge('Australia/Melbourne', melbourneDst)).toBe('UTC+11:00');
+  });
+  it('keeps an unknown zone readable', () => {
+    expect(formatTimezoneBadge('Not/AZone', winter)).toBe('Not/AZone');
+  });
+});
 describe('formatTimezoneLabel', () => {
   it('uses the current tzdata: Kazakhstan is UTC+5 since 2024', () => {
     expect(formatTimezoneLabel('Asia/Almaty', winter)).toBe('(UTC+05:00) Asia/Almaty');
@@ -89,6 +124,19 @@ describe('listTimezones', () => {
     expect(withStored.some(option => option.value === '')).toBe(false);
     expect(withStored[withStored.length - 1].value).toBe('Not/A_Zone');
   });
+  it('answers an equal but fresh list when called again for the same minute', () => {
+    const again = listTimezones(winter);
+    expect(again).toEqual(options);
+    expect(again).not.toBe(options);
+    again.length = 0;
+    expect(listTimezones(winter)).toEqual(options);
+  });
+  it('re-resolves offsets when the instant moves across a DST boundary', () => {
+    const standard = listTimezones(melbourneStandard).find(option => option.value === 'Australia/Melbourne');
+    const dst = listTimezones(melbourneDst).find(option => option.value === 'Australia/Melbourne');
+    expect(standard?.label).toBe('(UTC+10:00) Australia/Melbourne');
+    expect(dst?.label).toBe('(UTC+11:00) Australia/Melbourne');
+  });
   it('falls back to the browser zone and UTC when the engine has no zone list', () => {
     const original = Intl.supportedValuesOf;
     Object.defineProperty(Intl, 'supportedValuesOf', {

package/helpers/timezones.d.ts

@@ -15,6 +15,10 @@ export declare function formatTimezoneOffset(minutes: number): string;
 export declare function formatTimezoneLabel(timezone: string, at?: Date): string;
 /** Compact badge for a zone, `UTC+05:00`; a zone the engine doesn't know is shown by its bare name. */
 export declare function formatTimezoneShort(timezone: string, at?: Date): string;
+/** Letter abbreviation of the zone at `at` (`EST`, `PKT`), or `null` when the engine only offers a `GMT+5`-style name or does not know the zone. */
+export declare function formatTimezoneAbbreviation(timezone: string, at?: Date): string | null;
+/** Badge naming the zone a time is shown in: `PKT (UTC+05:00)`, or the bare offset when the zone has no letter abbreviation. */
+export declare function formatTimezoneBadge(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. */

package/helpers/timezones.js

@@ -30,16 +30,37 @@ export function formatTimezoneOffset(minutes) {
   const mins = String(absolute % 60).padStart(2, '0');
   return `UTC${sign}${hours}:${mins}`;
 }
+function labelForOffset(timezone, offset) {
+  return offset === null ? timezone : `(${formatTimezoneOffset(offset)}) ${timezone}`;
+}
 /** The shared picker label, `(UTC+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}`;
+  return labelForOffset(timezone, getTimezoneOffsetSafe(timezone, at));
 }
 /** Compact badge for a zone, `UTC+05:00`; a zone the engine doesn't know is shown by its bare name. */
 export function formatTimezoneShort(timezone, at = new Date()) {
   const offset = getTimezoneOffsetSafe(timezone, at);
   return offset === null ? timezone : formatTimezoneOffset(offset);
 }
+/** Letter abbreviation of the zone at `at` (`EST`, `PKT`), or `null` when the engine only offers a `GMT+5`-style name or does not know the zone. */
+export function formatTimezoneAbbreviation(timezone, at = new Date()) {
+  try {
+    const parts = new Intl.DateTimeFormat('en-US', {
+      timeZone: timezone,
+      timeZoneName: 'short'
+    }).formatToParts(at);
+    const name = parts.find(part => part.type === 'timeZoneName')?.value ?? '';
+    return /^[A-Z]{2,5}$/.test(name) && name !== 'UTC' ? name : null;
+  } catch {
+    return null;
+  }
+}
+/** Badge naming the zone a time is shown in: `PKT (UTC+05:00)`, or the bare offset when the zone has no letter abbreviation. */
+export function formatTimezoneBadge(timezone, at = new Date()) {
+  const short = formatTimezoneShort(timezone, at);
+  const abbreviation = formatTimezoneAbbreviation(timezone, at);
+  return abbreviation ? `${abbreviation} (${short})` : short;
+}
 /** 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 {
@@ -61,18 +82,36 @@ function compareZones(a, b) {
   if (b.name === UTC) return 1;
   return a.name.localeCompare(b.name);
 }
+function buildTimezoneList(names, at) {
+  return names.map(name => ({
+    name,
+    offset: getTimezoneOffsetSafe(name, at)
+  })).sort(compareZones).map(({
+    name,
+    offset
+  }) => ({
+    value: name,
+    label: labelForOffset(name, offset)
+  }));
+}
+function listCacheKey(names, at) {
+  return `${Math.floor(at.getTime() / 60_000)}|${names.join(',')}`;
+}
+let cachedListKey = null;
+let cachedList = [];
 /** 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));
+  const zones = [...names];
+  const key = listCacheKey(zones, at);
+  if (key !== cachedListKey) {
+    cachedList = buildTimezoneList(zones, at);
+    cachedListKey = key;
+  }
+  return cachedList.slice();
 }
 /** 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()) {

package/index.d.ts

@@ -59,4 +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, formatTimezoneShort, getBrowserTimezone, getTimezoneOffsetSafe, listTimezones, resolveTimezoneOption, type TimezoneOption, } from './helpers/timezones';
+export { canonicalizeTimezone, findTimezoneOption, formatTimezoneAbbreviation, formatTimezoneBadge, formatTimezoneLabel, formatTimezoneOffset, formatTimezoneShort, getBrowserTimezone, getTimezoneOffsetSafe, listTimezones, resolveTimezoneOption, type TimezoneOption, } from './helpers/timezones';

package/index.js

@@ -57,4 +57,4 @@ export { ApplicationPreloader } from './ApplicationPreloader';
 export { NotificationInbox, NotificationBar, NotificationBell } from './NotificationInbox';
 export { LeafletTheme } from './LeafletTheme';
 export { buildBarcodeUrl, barcodePlaceholderSafeEscape, isBarcodePlaceholder } from './helpers/barcodeUrl';
-export { canonicalizeTimezone, findTimezoneOption, formatTimezoneLabel, formatTimezoneOffset, formatTimezoneShort, getBrowserTimezone, getTimezoneOffsetSafe, listTimezones, resolveTimezoneOption } from './helpers/timezones';
+export { canonicalizeTimezone, findTimezoneOption, formatTimezoneAbbreviation, formatTimezoneBadge, formatTimezoneLabel, formatTimezoneOffset, formatTimezoneShort, getBrowserTimezone, getTimezoneOffsetSafe, listTimezones, resolveTimezoneOption } from './helpers/timezones';

package/package.json

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