@pushwoosh/dumb-components 2.2.0 → 2.3.0

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/Tooltip/Tooltip.d.ts

@@ -2,11 +2,11 @@ import { type ReactElement } from 'react';
 import type { TooltipProps } from './types';
 /**
  * Wraps an element and shows a contextual tooltip on hover/focus, with configurable
- * position and width. Positioning is handled by floating-ui, so the tooltip flips to a
- * fallback placement when the requested one would overflow the viewport. Use
+ * position, width and color. Positioning is handled by floating-ui, so the tooltip
+ * flips to a fallback placement when the requested one would overflow the viewport. Use
  * {@link TooltipTrigger} for a standalone help icon.
  *
  * @example
  * <Tooltip content="Copy to clipboard" position="top-middle"><IconButton /></Tooltip>
  */
-export declare function Tooltip({ content, position, offset, arrowOffset, maxWidth, zIndex, isDisabled, isVisible, reference, children, }: TooltipProps): ReactElement;
+export declare function Tooltip({ content, color, position, offset, arrowOffset, maxWidth, zIndex, isDisabled, isVisible, reference, children, }: TooltipProps): ReactElement;

package/Tooltip/Tooltip.js

@@ -7,8 +7,8 @@ import { Arrow, TooltipBox } from './styles';
 import { useTooltipPosition } from './useTooltipPosition';
 /**
  * Wraps an element and shows a contextual tooltip on hover/focus, with configurable
- * position and width. Positioning is handled by floating-ui, so the tooltip flips to a
- * fallback placement when the requested one would overflow the viewport. Use
+ * position, width and color. Positioning is handled by floating-ui, so the tooltip
+ * flips to a fallback placement when the requested one would overflow the viewport. Use
  * {@link TooltipTrigger} for a standalone help icon.
  *
  * @example
@@ -16,6 +16,7 @@ import { useTooltipPosition } from './useTooltipPosition';
  */
 export function Tooltip({
   content,
+  color = 'main',
   position = 'top-start',
   offset,
   arrowOffset,
@@ -88,10 +89,12 @@ export function Tooltip({
         zIndex
       },
       "$maxWidth": maxWidth,
+      "$tooltipColor": color,
       "data-placement": placement,
       children: [content, _jsx(Arrow, {
         ref: arrowRef,
-        style: arrowStyles
+        style: arrowStyles,
+        "$tooltipColor": color
       })]
     }), document.body)]
   });

package/Tooltip/index.d.ts

@@ -1,3 +1,3 @@
 export { Tooltip } from './Tooltip';
 export { TooltipTrigger } from './TooltipTrigger';
-export type { TooltipPosition } from './types';
+export type { TooltipPosition, TooltipColor } from './types';

package/Tooltip/styles.d.ts

@@ -1,8 +1,12 @@
 import { Color } from '@pushwoosh/kit-constants';
+import type { TooltipColor } from './types';
 export declare const TooltipBox: import("styled-components").StyledComponent<"div", any, {
     $maxWidth?: number | "none";
+    $tooltipColor?: TooltipColor;
+}, never>;
+export declare const Arrow: import("styled-components").StyledComponent<"div", any, {
+    $tooltipColor?: TooltipColor;
 }, never>;
-export declare const Arrow: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HelpIconWrapper: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
     $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue;
     $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue;

package/Tooltip/styles.js

@@ -1,17 +1,23 @@
-import styled from 'styled-components';
-import { Color, FontSize, ShapeRadius } from '@pushwoosh/kit-constants';
+import styled, { css } from 'styled-components';
+import { Color, FontSize, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
 import { Horizontal } from '@pushwoosh/kit-helpers';
 import { DEFAULT_MAX_WIDTH } from './constants';
+const clearBox = css(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ";"], Color.MAIN, Color.CLEAR, Color.FORM, Shadow.REGULAR);
 export const TooltipBox = styled.div.withConfig({
   displayName: "TooltipBox",
   componentId: "sc-1hariht-0"
-})(["padding:12px;color:", ";background-color:", ";border-radius:", ";font-size:", ";line-height:inherit;outline:0;pointer-events:none;max-width:", ";"], Color.CLEAR, Color.MAIN, ShapeRadius.DIALOG, FontSize.REGULAR, ({
+})(["padding:12px;color:", ";background-color:", ";border-radius:", ";font-size:", ";line-height:inherit;outline:0;pointer-events:none;max-width:", ";", ""], Color.CLEAR, Color.MAIN, ShapeRadius.DIALOG, FontSize.REGULAR, ({
   $maxWidth
-}) => $maxWidth === 'none' ? 'min(var(--pw-page-max-width, 100vw), calc(100vw - 16px))' : `min(${$maxWidth ?? DEFAULT_MAX_WIDTH}px, var(--pw-page-max-width, 100vw), calc(100vw - 16px))`);
+}) => $maxWidth === 'none' ? 'min(var(--pw-page-max-width, 100vw), calc(100vw - 16px))' : `min(${$maxWidth ?? DEFAULT_MAX_WIDTH}px, var(--pw-page-max-width, 100vw), calc(100vw - 16px))`, ({
+  $tooltipColor
+}) => $tooltipColor === 'clear' && clearBox);
+const clearArrowBorder = css(["[data-placement^='top'] &{border-right:1px solid ", ";border-bottom:1px solid ", ";}[data-placement^='bottom'] &{border-top:1px solid ", ";border-left:1px solid ", ";}[data-placement^='left'] &{border-top:1px solid ", ";border-right:1px solid ", ";}[data-placement^='right'] &{border-bottom:1px solid ", ";border-left:1px solid ", ";}"], Color.FORM, Color.FORM, Color.FORM, Color.FORM, Color.FORM, Color.FORM, Color.FORM, Color.FORM);
 export const Arrow = styled.div.withConfig({
   displayName: "Arrow",
   componentId: "sc-1hariht-1"
-})(["position:absolute;width:10px;height:10px;border-radius:2px;background-color:", ";transform:rotate(45deg);"], Color.MAIN);
+})(["position:absolute;width:10px;height:10px;border-radius:2px;background-color:", ";transform:rotate(45deg);", ""], Color.MAIN, ({
+  $tooltipColor
+}) => $tooltipColor === 'clear' && css(["background-color:", ";", ""], Color.CLEAR, clearArrowBorder));
 export const HelpIconWrapper = styled(Horizontal).withConfig({
   displayName: "HelpIconWrapper",
   componentId: "sc-1hariht-2"

package/Tooltip/types.d.ts

@@ -1,10 +1,14 @@
 import type { RefObject, ReactElement, ReactNode } from 'react';
 /** Placement of a {@link Tooltip} relative to its anchor (side + alignment). */
 export type TooltipPosition = 'top-start' | 'top-middle' | 'top-end' | 'right-start' | 'right-middle' | 'right-end' | 'bottom-start' | 'bottom-middle' | 'bottom-end' | 'left-start' | 'left-middle' | 'left-end';
+/** Color of a {@link Tooltip}, named after the background token it uses. */
+export type TooltipColor = 'main' | 'clear';
 /** Props of {@link Tooltip}. */
 export type TooltipProps = {
     /** Tooltip content. */
     readonly content: ReactNode;
+    /** Background color (default `main`); `clear` is a card on the page background, with border and shadow. */
+    readonly color?: TooltipColor;
     /** Placement relative to the anchor (default `top-start`). */
     readonly position?: TooltipPosition;
     /** `[skidding, distance]` offset from the anchor; defaults per position. */

package/helpers/__tests__/timezones.test.js

@@ -124,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.js

@@ -30,10 +30,12 @@ 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()) {
@@ -80,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

@@ -28,7 +28,7 @@ export { Combobox, type ComboboxProps, type ComboboxChangeSource, type ComboboxC
 export { ComboboxMulti, type ComboboxMultiProps } from './ComboboxMulti';
 export { Switch } from './Switch';
 export { TextSkeleton, RectangularSkeleton, CircularSkeleton } from './Skeleton';
-export { Tooltip, type TooltipPosition, TooltipTrigger } from './Tooltip';
+export { Tooltip, type TooltipPosition, type TooltipColor, TooltipTrigger } from './Tooltip';
 export { Tab, TabBar, TabPanel, Tabs, type TabCode } from './Tabs';
 export { Link, type LinkPropsWithoutAs, type LinkPropsWithAsTag, type LinkPropsWithAsComponent, } from './Link';
 export { StatisticCard } from './StatisticCard';

package/package.json

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