@pushwoosh/dumb-components 2.1.1 → 2.2.0

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');

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

@@ -40,6 +40,25 @@ 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 {

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.1",
+  "version": "2.2.0",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -42,7 +42,7 @@
     "@lezer/highlight": "^1.2.1",
     "@pushwoosh/kit-constants": "^2.0.0",
     "@pushwoosh/kit-helpers": "^4.12.5",
-    "@pushwoosh/kit-icons": "^2.1.16",
+    "@pushwoosh/kit-icons": "^2.3.3",
     "@pushwoosh/kit-typography": "^1.8.5",
     "@tippyjs/react": "^4.2.6",
     "@uiw/codemirror-themes": "^4.23.8",