@pushwoosh/dumb-components 1.1.216 → 1.1.217

package/Calendar/CalendarMonthSlider/CalendarMonthSlider.js

@@ -24,7 +24,10 @@ export const CalendarMonthSlider = ({
   renderAfter,
   ...monthProps
 }) => {
-  const [anchor, setAnchor] = useState(startMonth);
+  const [anchor, setAnchor] = useState(() => ({
+    ...startMonth,
+    day: 1
+  }));
   const [inTransition, setInTransition] = useState(false);
   const [index, setIndex] = useState(0);
   const [panels, setPanels] = useState(() => makeBaseline(anchor, visibleCount));

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

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

package/Calendar/__tests__/helpers.test.js

@@ -0,0 +1,124 @@
+import { addPeriod, 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
+    });
+  });
+});

package/Calendar/helpers.d.ts

@@ -6,7 +6,7 @@ export declare const createUTCDate: (year: number, month?: number, day?: number,
 export declare const parseStringToDate: (date: string) => Date;
 export declare const formatTwoDigitNumber: (value: number) => string;
 export declare const formatStruct: (ds: DateStruct, template: string) => string;
-/** Returns a new struct with `value` units of `period` added (negative to subtract); rolls over correctly. */
+/** Returns a new struct with `value` units of `period` added (negative to subtract). */
 export declare const addPeriod: <T extends DateTimeStruct | DateStruct>(ds: T, period: Period, value: number) => T;
 /** Narrows a {@link DateTimeStruct} to a date-only {@link DateStruct} (drops the time fields). */
 export declare const pickDateStruct: (date: DateTimeStruct) => DateStruct;

package/Calendar/helpers.js

@@ -32,9 +32,23 @@ export const formatStruct = (ds, template) => {
     return value !== undefined ? formatTwoDigitNumber(value) : match;
   });
 };
-/** Returns a new struct with `value` units of `period` added (negative to subtract); rolls over correctly. */
+const clampDayToMonth = (year, month, day) => Math.min(day, new Date(Date.UTC(year, month, 0)).getUTCDate());
+/** Moves a struct to the absolute month `monthIndex` (`year * 12 + month - 1`), clamping the day to that month. */
+const moveToMonth = (ds, monthIndex) => {
+  const year = Math.floor(monthIndex / 12);
+  const month = monthIndex - year * 12 + 1;
+  const dts = ds;
+  const date = createUTCDate(year, month, clampDayToMonth(year, month, ds.day), dts.hour, dts.minute, dts.second, dts.millisecond);
+  return utcDateToStruct(date);
+};
+/** Returns a new struct with `value` units of `period` added (negative to subtract). */
 export const addPeriod = (ds, period, value) => {
-  const date = createUTCDate(ds.year, ds.month, ds.day, ds.hour, ds.minute, ds.second);
+  // Month/year steps clamp the day instead of letting Date overflow: Aug 31 + 1 month is Sep 30, not Oct 1.
+  if (period === 'month' || period === 'year') {
+    return moveToMonth(ds, ds.year * 12 + ds.month - 1 + (period === 'month' ? value : value * 12));
+  }
+  const dts = ds;
+  const date = createUTCDate(ds.year, ds.month, ds.day, dts.hour, dts.minute, dts.second, dts.millisecond);
   const method = periodMethodMap[period];
   date[`setUTC${method}`](date[`getUTC${method}`]() + value);
   return utcDateToStruct(date);
@@ -48,9 +62,16 @@ export const pickDateStruct = date => {
   };
 };
 export const setPeriodStruct = (ds, period, value) => {
-  const date = createUTCDate(ds.year, ds.month, ds.day, ds.hour, ds.minute, ds.second);
+  if (period === 'month') {
+    return moveToMonth(ds, ds.year * 12 + value - 1);
+  }
+  if (period === 'year') {
+    return moveToMonth(ds, value * 12 + ds.month - 1);
+  }
+  const dts = ds;
+  const date = createUTCDate(ds.year, ds.month, ds.day, dts.hour, dts.minute, dts.second, dts.millisecond);
   const method = periodMethodMap[period];
-  date[`setUTC${method}`](period === 'month' ? value - 1 : value);
+  date[`setUTC${method}`](value);
   return utcDateToStruct(date);
 };
 export const extendPeriodStruct = (struct, extend) => {

package/package.json

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