@pushwoosh/dumb-components 2.9.12 → 2.9.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "2.9.12",
+  "version": "2.9.13",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -18,19 +18,17 @@
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
-    "@types/jest": "^30.0.0",
     "@types/lodash": "^4.17.13",
     "@types/react": "^18.3.31",
     "@types/react-dom": "^18.3.7",
     "@types/react-transition-group": "^4.4.12",
     "@types/styled-components": "^5.1.34",
     "glob": "^11.0.3",
-    "jest": "^30.2.0",
-    "jest-environment-jsdom": "^30.2.0",
+    "jsdom": "^26.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "styled-components": "^5.3.11",
-    "ts-jest": "^29.4.6"
+    "vitest": "^4.1.10"
   },
   "dependencies": {
     "@codemirror/lang-html": "^6.4.9",
@@ -70,6 +68,6 @@
     "check:lint": "echo \"Run check:lint\" && eslint src",
     "check:lint-fix": "echo \"Run check:lint\" && eslint src --fix",
     "check:types": "echo \"Run check:types\" && pushwoosh-engine lib:check-types",
-    "test": "jest"
+    "test": "vitest run"
   }
 }

package/Banner/__tests__/Banner.test.d.ts

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

package/Banner/__tests__/Banner.test.js

@@ -1,57 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render, screen } from '@testing-library/react';
-import { Banner } from '../Banner';
-describe('Banner', () => {
-  let consoleError;
-  beforeEach(() => {
-    consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
-  });
-  afterEach(() => {
-    consoleError.mockRestore();
-  });
-  it('renders a title without children', () => {
-    render(_jsx(Banner, {
-      type: "info",
-      title: "Heading"
-    }));
-    expect(screen.getByText('Heading')).toBeInTheDocument();
-  });
-  it('renders children without a title', () => {
-    const {
-      container
-    } = render(_jsx(Banner, {
-      type: "info",
-      children: "Description"
-    }));
-    expect(screen.getByText('Description')).toBeInTheDocument();
-    expect(container.querySelector('h4')).toBeNull();
-  });
-  it('renders numeric zero children', () => {
-    render(_jsx(Banner, {
-      type: "info",
-      children: 0
-    }));
-    expect(screen.getByText('0')).toBeInTheDocument();
-  });
-  it('skips an empty title but keeps the children', () => {
-    const {
-      container
-    } = render(_jsx(Banner, {
-      type: "info",
-      title: "",
-      children: "Description"
-    }));
-    expect(screen.getByText('Description')).toBeInTheDocument();
-    expect(container.querySelector('h4')).toBeNull();
-  });
-  it('renders nothing and reports when there is neither title nor children', () => {
-    const {
-      container
-    } = render(_jsx(Banner, {
-      type: "info",
-      title: ""
-    }));
-    expect(container).toBeEmptyDOMElement();
-    expect(consoleError).toHaveBeenCalledWith('[Banner]: neither title nor children is set');
-  });
-});

package/Button/__tests__/Button.test.d.ts

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

package/Button/__tests__/Button.test.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render, screen } from '@testing-library/react';
-import { Button } from '../Button';
-describe('Button disabled colors', () => {
-  it('keeps white text on the red background for a disabled danger button', () => {
-    render(_jsx(Button, {
-      color: "danger",
-      isDisabled: true,
-      children: "Delete"
-    }));
-    const style = getComputedStyle(screen.getByRole('button'));
-    expect(style.color).toContain('--danger-shape-base-color');
-    expect(style.backgroundColor).toContain('--danger-shape-base-bg-color');
-  });
-  it('paints background, not text color, behind a disabled link-button', () => {
-    render(_jsx(Button, {
-      as: "a",
-      color: "primary",
-      isDisabled: true,
-      children: "Open"
-    }));
-    const style = getComputedStyle(screen.getByText('Open').closest('a'));
-    expect(style.color).toContain('--primary-shape-base-color');
-    expect(style.backgroundColor).toContain('--primary-shape-disabled-bg-color');
-    expect(style.borderColor).toBe('transparent');
-  });
-});

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

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

package/Calendar/__tests__/CalendarMonthSlider.test.js

@@ -1,85 +0,0 @@
-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__/CellBox.test.d.ts

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

package/Calendar/__tests__/CellBox.test.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render, screen } from '@testing-library/react';
-import { CellBox } from '../CalendarMonth/styles';
-const PERIOD_VARIANTS = ['period', 'periodOutdated'];
-function variantCss(variant) {
-  const {
-    rules
-  } = CellBox.componentStyle;
-  const flatten = part => {
-    if (Array.isArray(part)) return part.map(flatten).join('');
-    return typeof part === 'string' ? part : '';
-  };
-  return rules.filter(rule => typeof rule === 'function').map(rule => flatten(rule({
-    $variant: variant
-  }))).join('');
-}
-describe('CellBox period variants', () => {
-  it.each(PERIOD_VARIANTS)('anchors :before of %s to the cell with &, so stylis 4 does not turn it into a descendant selector', variant => {
-    const css = variantCss(variant);
-    expect(css).toContain('&:before');
-    expect(css).not.toMatch(/(^|[\s;{}])::?before/);
-  });
-  it.each(PERIOD_VARIANTS)('paints the %s background on the cell pseudo-element', variant => {
-    render(_jsx(CellBox, {
-      "data-testid": "cell",
-      "$variant": variant,
-      children: "1"
-    }));
-    const [className] = [...screen.getByTestId('cell').classList].slice(-1);
-    const styles = [...document.querySelectorAll('style')].map(node => node.textContent).join('');
-    expect(styles).toMatch(new RegExp(`\\.${className}:before\\{[^}]*background:`));
-    expect(styles).not.toContain(`.${className} :before`);
-  });
-});

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

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

package/Calendar/__tests__/helpers.test.js

@@ -1,143 +0,0 @@
-import { addPeriod, getTimezoneOffset, setPeriodStruct } from '../helpers';
-describe('addPeriod', () => {
-  it('clamps the day when the target month is shorter', () => {
-    expect(addPeriod({
-      year: 2026,
-      month: 8,
-      day: 31
-    }, 'month', 1)).toEqual({
-      year: 2026,
-      month: 9,
-      day: 30,
-      hour: 0,
-      minute: 0,
-      second: 0,
-      millisecond: 0
-    });
-    expect(addPeriod({
-      year: 2026,
-      month: 3,
-      day: 31
-    }, 'month', -1)).toEqual({
-      year: 2026,
-      month: 2,
-      day: 28,
-      hour: 0,
-      minute: 0,
-      second: 0,
-      millisecond: 0
-    });
-    expect(addPeriod({
-      year: 2024,
-      month: 2,
-      day: 29
-    }, 'year', 1)).toEqual({
-      year: 2025,
-      month: 2,
-      day: 28,
-      hour: 0,
-      minute: 0,
-      second: 0,
-      millisecond: 0
-    });
-  });
-  it('crosses year boundaries in both directions', () => {
-    expect(addPeriod({
-      year: 2026,
-      month: 12,
-      day: 15
-    }, 'month', 1)).toMatchObject({
-      year: 2027,
-      month: 1,
-      day: 15
-    });
-    expect(addPeriod({
-      year: 2026,
-      month: 1,
-      day: 15
-    }, 'month', -1)).toMatchObject({
-      year: 2025,
-      month: 12,
-      day: 15
-    });
-    expect(addPeriod({
-      year: 2026,
-      month: 5,
-      day: 10
-    }, 'month', -17)).toMatchObject({
-      year: 2024,
-      month: 12,
-      day: 10
-    });
-  });
-  it('keeps the time of day on month steps', () => {
-    expect(addPeriod({
-      year: 2026,
-      month: 1,
-      day: 31,
-      hour: 13,
-      minute: 45,
-      second: 7,
-      millisecond: 0
-    }, 'month', 1)).toMatchObject({
-      year: 2026,
-      month: 2,
-      day: 28,
-      hour: 13,
-      minute: 45,
-      second: 7
-    });
-  });
-  it('still rolls over on day steps', () => {
-    expect(addPeriod({
-      year: 2026,
-      month: 8,
-      day: 31
-    }, 'day', 1)).toMatchObject({
-      year: 2026,
-      month: 9,
-      day: 1
-    });
-  });
-});
-describe('setPeriodStruct', () => {
-  it('clamps the day when setting a shorter month', () => {
-    expect(setPeriodStruct({
-      year: 2026,
-      month: 1,
-      day: 31
-    }, 'month', 2)).toMatchObject({
-      year: 2026,
-      month: 2,
-      day: 28
-    });
-    expect(setPeriodStruct({
-      year: 2024,
-      month: 2,
-      day: 29
-    }, 'year', 2025)).toMatchObject({
-      year: 2025,
-      month: 2,
-      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/CardMetric/__tests__/CardMetric.test.d.ts

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

package/CardMetric/__tests__/CardMetric.test.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render, screen } from '@testing-library/react';
-import { CardMetric } from '../CardMetric';
-describe('CardMetric', () => {
-  it('styles a focused stacking card without leaking view/focus to the DOM', () => {
-    const {
-      container
-    } = render(_jsx(CardMetric, {
-      view: "stacking",
-      focus: true,
-      title: "Sent",
-      metric: 1
-    }));
-    const card = container.firstElementChild;
-    expect(card).not.toHaveAttribute('view');
-    expect(card).not.toHaveAttribute('focus');
-    expect(getComputedStyle(card).padding).toBe('24px');
-    expect(getComputedStyle(card).outlineWidth).toBe('4px');
-  });
-  it('collapses the body and marks the title clickable', () => {
-    render(_jsx(CardMetric, {
-      title: "Sent",
-      collapse: {
-        isCollapsed: true
-      },
-      children: "Body"
-    }));
-    expect(getComputedStyle(screen.getByText('Sent')).cursor).toBe('pointer');
-    expect(getComputedStyle(screen.getByText('Body').parentElement).gridTemplateRows).toBe('0fr');
-  });
-});

package/Chip/__tests__/Chip.test.d.ts

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

package/Chip/__tests__/Chip.test.js

@@ -1,101 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { fireEvent, render, screen } from '@testing-library/react';
-import { Chip } from '../Chip';
-describe('Chip', () => {
-  it('renders a passive chip as a div without a button role', () => {
-    const {
-      container
-    } = render(_jsx(Chip, {
-      children: "Tag"
-    }));
-    expect(container.firstChild?.nodeName).toBe('DIV');
-    expect(screen.queryByRole('button')).toBeNull();
-  });
-  it('renders a chip with onClick as a toggle button reflecting $selected', () => {
-    const onClick = jest.fn();
-    const {
-      rerender
-    } = render(_jsx(Chip, {
-      onClick: onClick,
-      children: "All"
-    }));
-    const chip = screen.getByRole('button', {
-      name: 'All'
-    });
-    expect(chip).toHaveAttribute('type', 'button');
-    expect(chip).toHaveAttribute('aria-pressed', 'false');
-    fireEvent.click(chip);
-    expect(onClick).toHaveBeenCalledTimes(1);
-    rerender(_jsx(Chip, {
-      onClick: onClick,
-      "$selected": true,
-      children: "All"
-    }));
-    expect(screen.getByRole('button', {
-      name: 'All'
-    })).toHaveAttribute('aria-pressed', 'true');
-  });
-  it('passes disabled to the button and blocks clicks', () => {
-    const onClick = jest.fn();
-    render(_jsx(Chip, {
-      onClick: onClick,
-      disabled: true,
-      children: "All"
-    }));
-    const chip = screen.getByRole('button', {
-      name: 'All'
-    });
-    expect(chip).toBeDisabled();
-    fireEvent.click(chip);
-    expect(onClick).not.toHaveBeenCalled();
-  });
-  it('keeps a closeable chip a div and exposes only the close button', () => {
-    const onClose = jest.fn();
-    const {
-      container
-    } = render(_jsx(Chip, {
-      onClick: () => {},
-      "$onClose": onClose,
-      children: "Tag"
-    }));
-    expect(container.firstChild?.nodeName).toBe('DIV');
-    const buttons = screen.getAllByRole('button');
-    expect(buttons).toHaveLength(1);
-    expect(buttons[0]).toHaveAccessibleName('Remove');
-    fireEvent.click(buttons[0]);
-    expect(onClose).toHaveBeenCalledTimes(1);
-  });
-  it('does not bubble a close click to the chip onClick', () => {
-    const onClick = jest.fn();
-    const onClose = jest.fn();
-    render(_jsx(Chip, {
-      onClick: onClick,
-      "$onClose": onClose,
-      children: "Tag"
-    }));
-    fireEvent.click(screen.getByRole('button', {
-      name: 'Remove'
-    }));
-    expect(onClose).toHaveBeenCalledTimes(1);
-    expect(onClick).not.toHaveBeenCalled();
-  });
-  it('treats explicit as="button" like the automatic interactive mode', () => {
-    render(_jsx(Chip, {
-      as: "button",
-      children: "Tag"
-    }));
-    const chip = screen.getByRole('button', {
-      name: 'Tag'
-    });
-    expect(chip).toHaveAttribute('type', 'button');
-    expect(chip).toHaveAttribute('aria-pressed', 'false');
-  });
-  it('does not become a button when read-only', () => {
-    render(_jsx(Chip, {
-      onClick: () => {},
-      "$readOnly": true,
-      children: "Tag"
-    }));
-    expect(screen.queryByRole('button')).toBeNull();
-  });
-});

package/DateTimePicker/__tests__/YearView.test.d.ts

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

package/DateTimePicker/__tests__/YearView.test.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render, screen } from '@testing-library/react';
-import { YearView } from '../components/YearView/YearView';
-describe('YearView', () => {
-  it('makes month cells 59px tall without a height attribute', () => {
-    render(_jsx(YearView, {
-      year: "2026",
-      onChange: jest.fn(),
-      onSelect: jest.fn()
-    }));
-    const cell = screen.getAllByText(/^[A-Z][a-z]{2}$/)[0].closest('div[class]');
-    expect(cell).not.toHaveAttribute('height');
-    expect(getComputedStyle(cell).height).toBe('59px');
-  });
-});

package/DropdownMenu/__tests__/DropdownMenuItem.test.d.ts

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

package/DropdownMenu/__tests__/DropdownMenuItem.test.js

@@ -1,109 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { fireEvent, render, screen } from '@testing-library/react';
-import { createRef } from 'react';
-import { DropdownMenuItem } from '../components/DropdownMenuItem';
-import { DropdownContext } from '../context';
-const renderInMenu = (ui, close = jest.fn()) => render(_jsx(DropdownContext.Provider, {
-  value: close,
-  children: ui
-}));
-describe('DropdownMenuItem', () => {
-  it('calls onClick and closes the menu', () => {
-    const onClick = jest.fn();
-    const close = jest.fn();
-    renderInMenu(_jsx(DropdownMenuItem, {
-      onClick: onClick,
-      children: "Preview"
-    }), close);
-    const item = screen.getByRole('button', {
-      name: 'Preview'
-    });
-    expect(item).toHaveAttribute('type', 'button');
-    fireEvent.click(item);
-    expect(onClick).toHaveBeenCalledTimes(1);
-    expect(close).toHaveBeenCalledWith(false);
-  });
-  it('keeps a disabled item without hint natively disabled', () => {
-    renderInMenu(_jsx(DropdownMenuItem, {
-      onClick: jest.fn(),
-      disabled: true,
-      children: "Preview"
-    }));
-    expect(screen.getByRole('button', {
-      name: 'Preview'
-    })).toBeDisabled();
-  });
-  it('makes a disabled item with hint focusable, described and inert', () => {
-    const onClick = jest.fn();
-    const close = jest.fn();
-    renderInMenu(_jsx(DropdownMenuItem, {
-      onClick: onClick,
-      disabled: true,
-      hint: "Save the template first",
-      children: "Test email"
-    }), close);
-    const item = screen.getByRole('button', {
-      name: 'Test email'
-    });
-    expect(item).not.toBeDisabled();
-    expect(item).toHaveAttribute('aria-disabled', 'true');
-    expect(item).toHaveAccessibleDescription('Save the template first');
-    fireEvent.click(item);
-    expect(onClick).not.toHaveBeenCalled();
-    expect(close).not.toHaveBeenCalled();
-  });
-  it('shows the hint tooltip on hover and focus', () => {
-    renderInMenu(_jsx(DropdownMenuItem, {
-      onClick: jest.fn(),
-      disabled: true,
-      hint: "Save first",
-      children: "Test email"
-    }));
-    const item = screen.getByRole('button', {
-      name: 'Test email'
-    });
-    fireEvent.mouseEnter(item);
-    expect(screen.getAllByText('Save first')).toHaveLength(2);
-    fireEvent.mouseLeave(item);
-    expect(screen.getAllByText('Save first')).toHaveLength(1);
-    fireEvent.focusIn(item);
-    expect(screen.getAllByText('Save first')).toHaveLength(2);
-  });
-  it('ignores hint while enabled', () => {
-    renderInMenu(_jsx(DropdownMenuItem, {
-      onClick: jest.fn(),
-      hint: "Save first",
-      children: "Test email"
-    }));
-    expect(screen.queryByText('Save first')).toBeNull();
-    expect(screen.getByRole('button', {
-      name: 'Test email'
-    })).not.toHaveAttribute('aria-describedby');
-  });
-  it('forwards ref to the item button, with and without hint', () => {
-    const ref = createRef();
-    const {
-      rerender
-    } = renderInMenu(_jsx(DropdownMenuItem, {
-      ref: ref,
-      onClick: jest.fn(),
-      children: "Preview"
-    }));
-    expect(ref.current).toBe(screen.getByRole('button', {
-      name: 'Preview'
-    }));
-    rerender(_jsx(DropdownContext.Provider, {
-      value: jest.fn(),
-      children: _jsx(DropdownMenuItem, {
-        ref: ref,
-        onClick: jest.fn(),
-        disabled: true,
-        hint: "Add content",
-        children: "Preview"
-      })
-    }));
-    expect(ref.current).toBe(screen.getByRole('button', {
-      name: 'Preview'
-    }));
-  });
-});

package/EditableField/__tests__/EditableField.test.d.ts

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