@astryxdesign/lab 0.7.1-canary.e199fa4 → 0.7.1-canary.e71c4e9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.7.1-canary.e199fa4",
+  "version": "0.7.1-canary.e71c4e9",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -47,7 +47,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.7.1-canary.e199fa4",
+    "@astryxdesign/core": "0.7.1-canary.e71c4e9",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -57,8 +57,8 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.1-canary.e199fa4",
-    "@astryxdesign/cli": "0.7.1-canary.e199fa4",
+    "@astryxdesign/a11y-spec": "0.7.1-canary.e71c4e9",
+    "@astryxdesign/cli": "0.7.1-canary.e71c4e9",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/Schedule/Schedule.test.tsx

@@ -634,6 +634,103 @@ describe('Schedule', () => {
   });
 });
 
+describe('Schedule across a midnight that daylight saving skips', () => {
+  // Both zones spring forward at local midnight: the day starts at 01:00.
+  const cases = [
+    {
+      timezoneID: 'America/Santiago',
+      date: Date.UTC(2026, 8, 8, 15),
+      week: [
+        'Sunday, September 6, 2026',
+        'Monday, September 7, 2026',
+        'Tuesday, September 8, 2026',
+        'Wednesday, September 9, 2026',
+        'Thursday, September 10, 2026',
+        'Friday, September 11, 2026',
+        'Saturday, September 12, 2026',
+      ],
+    },
+    {
+      timezoneID: 'America/Havana',
+      date: Date.UTC(2026, 2, 10, 15),
+      week: [
+        'Sunday, March 8, 2026',
+        'Monday, March 9, 2026',
+        'Tuesday, March 10, 2026',
+        'Wednesday, March 11, 2026',
+        'Thursday, March 12, 2026',
+        'Friday, March 13, 2026',
+        'Saturday, March 14, 2026',
+      ],
+    },
+  ];
+  const renderPopover = () => null;
+  const dayGroups = () =>
+    screen
+      .getAllByRole('group')
+      .map(group => group.getAttribute('aria-label') ?? '')
+      .filter(name => /, \d{4}$/u.test(name));
+
+  it.each(cases)(
+    'keeps seven days in the week and one in the day view in $timezoneID',
+    ({timezoneID, date, week}) => {
+      const {unmount} = render(
+        <Schedule
+          view={createScheduleWeeklyView({renderPopover})}
+          events={[]}
+          date={date}
+          timezoneID={timezoneID}
+        />,
+      );
+      expect(dayGroups()).toEqual(week);
+      unmount();
+      render(
+        <Schedule
+          view={createScheduleDayView({renderPopover})}
+          events={[]}
+          date={date - 2 * 24 * 60 * 60 * 1000}
+          timezoneID={timezoneID}
+        />,
+      );
+      expect(dayGroups()).toEqual([week[0]]);
+    },
+  );
+
+  it('keeps seven days in the week and one in the day view that end at the skipped midnight', () => {
+    // Santiago's week of Sunday, August 30, 2026 ends on Saturday, September 5;
+    // its end is the start of September 6, a midnight that never happens.
+    const timezoneID = 'America/Santiago';
+    const date = Date.UTC(2026, 8, 5, 15);
+    const {unmount} = render(
+      <Schedule
+        view={createScheduleWeeklyView({renderPopover})}
+        events={[]}
+        date={date}
+        timezoneID={timezoneID}
+      />,
+    );
+    expect(dayGroups()).toEqual([
+      'Sunday, August 30, 2026',
+      'Monday, August 31, 2026',
+      'Tuesday, September 1, 2026',
+      'Wednesday, September 2, 2026',
+      'Thursday, September 3, 2026',
+      'Friday, September 4, 2026',
+      'Saturday, September 5, 2026',
+    ]);
+    unmount();
+    render(
+      <Schedule
+        view={createScheduleDayView({renderPopover})}
+        events={[]}
+        date={date}
+        timezoneID={timezoneID}
+      />,
+    );
+    expect(dayGroups()).toEqual(['Saturday, September 5, 2026']);
+  });
+});
+
 describe('sortEvents', () => {
   it('sorts mixed all-day and instant events by start time', () => {
     const sortedEvents = sortEvents(

package/src/Schedule/__tests__/ScheduleTimeGridSkippedMidnight.a11y.chromium.spec.ts

@@ -0,0 +1,113 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ScheduleTimeGridSkippedMidnight.a11y.chromium.spec.ts
+ * @input The built Lab/Schedule SkippedMidnight story in real Chromium
+ * @output Receipted evidence that a week and a day whose midnight daylight
+ *   saving skips keep their own dates: seven day columns in the week, one in
+ *   the day view, in America/Santiago and America/Havana
+ * @position Browser binding for `component:Schedule` FR8 (no event or day is
+ *   dropped) across a skipped midnight
+ */
+
+import {expect, test, type Page} from '@playwright/test';
+import {
+  finishEvidence,
+  record,
+  startEvidence,
+  storyUrl,
+  WIDE,
+  type Evidence,
+} from './timeGridProbe';
+
+const STORY = 'lab-schedule--skipped-midnight';
+const ZONES = [
+  {
+    timezoneID: 'America/Santiago',
+    week: [
+      'Sunday, September 6, 2026',
+      'Monday, September 7, 2026',
+      'Tuesday, September 8, 2026',
+      'Wednesday, September 9, 2026',
+      'Thursday, September 10, 2026',
+      'Friday, September 11, 2026',
+      'Saturday, September 12, 2026',
+    ],
+  },
+  {
+    timezoneID: 'America/Havana',
+    week: [
+      'Sunday, March 8, 2026',
+      'Monday, March 9, 2026',
+      'Tuesday, March 10, 2026',
+      'Wednesday, March 11, 2026',
+      'Thursday, March 12, 2026',
+      'Friday, March 13, 2026',
+      'Saturday, March 14, 2026',
+    ],
+  },
+] as const;
+
+let evidence: Evidence;
+
+/** The story holds four schedules, so wait for each zone's pair. */
+async function openSkippedMidnight(page: Page, globals?: string) {
+  await page.setViewportSize(WIDE);
+  await page.goto(storyUrl(evidence, STORY, globals), {waitUntil: 'load'});
+  await expect(page.locator('.astryx-schedule')).toHaveCount(4);
+  await page.evaluate(() => document.fonts.ready);
+  await page.waitForTimeout(100);
+}
+test.beforeAll(async () => {
+  evidence = await startEvidence();
+});
+test.afterAll(async () => {
+  await finishEvidence(evidence, 'skipped-midnight');
+});
+
+for (const [direction, globals] of [
+  ['ltr', undefined],
+  ['rtl', 'direction:rtl'],
+] as const) {
+  test(`a skipped midnight keeps seven days in the week and one in the day view (${direction})`, async ({
+    page,
+  }) => {
+    await openSkippedMidnight(page, globals);
+    const readings = [];
+    for (const zone of ZONES) {
+      const section = page.getByRole('region', {name: zone.timezoneID});
+      const grids = section.getByRole('grid', {name: 'Schedule time grid'});
+      await expect(grids).toHaveCount(2);
+      const days = async (index: number) =>
+        (
+          await grids
+            .nth(index)
+            .getByRole('columnheader')
+            .evaluateAll(headers =>
+              headers.map(header => header.textContent?.trim() ?? ''),
+            )
+        ).filter(name => /, \d{4}$/u.test(name));
+      const week = await days(0);
+      const day = await days(1);
+      // The first hour's event paints in the first day's column.
+      const firstHour = await section
+        .getByText('First hour', {exact: true})
+        .first()
+        .isVisible();
+      readings.push({zone: zone.timezoneID, week, day, firstHour});
+      expect(week, `${zone.timezoneID} week`).toEqual([...zone.week]);
+      expect(day, `${zone.timezoneID} day`).toEqual([zone.week[0]]);
+      expect(firstHour, `${zone.timezoneID} first hour painted`).toBe(true);
+    }
+    await record(
+      evidence,
+      page,
+      `skipped-midnight-${direction}`,
+      STORY,
+      direction,
+      {
+        readings,
+      },
+    );
+  });
+}