voyager-ionic-core 7.2.3 → 7.4.4

package/dist/collection/components/datetime/test/basic/datetime.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * This behavior does not differ across
@@ -348,3 +348,28 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
     });
   });
 });
+/**
+ * This behavior does not differ across
+ * directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('datetime: focus'), () => {
+    test('should focus the selected day and then the day after', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime value="2023-08-01"></ion-datetime>
+      `, config);
+      await page.waitForSelector('.datetime-ready');
+      const datetime = page.locator('ion-datetime');
+      const day = datetime.locator(`.calendar-day[data-day='1'][data-month='8']`);
+      await day.focus();
+      await page.waitForChanges();
+      await expect(day).toBeFocused();
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-focus-selected-calendar-day`));
+      await page.keyboard.press('ArrowRight');
+      await page.waitForChanges();
+      const nextDay = datetime.locator(`.calendar-day[data-day='2'][data-month='8']`);
+      await expect(nextDay).toBeFocused();
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-focus-calendar-day`));
+    });
+  });
+});

package/dist/collection/components/datetime/test/color/datetime.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * This behavior does not vary across directions
@@ -10,7 +10,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('datetime: color'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto('/src/components/datetime/test/color', config);
-      const datetime = page.locator('ion-datetime');
+      const datetime = page.locator('#color-datetime');
       await expect(datetime).toHaveScreenshot(screenshot(`datetime-color`));
       await page.evaluate(() => document.body.classList.toggle('dark'));
       await page.waitForChanges();

package/dist/collection/components/datetime/test/custom/datetime.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('datetime: custom'), () => {
@@ -12,15 +12,8 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       const datetime = page.locator('#custom-wheel');
       await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-wheel`));
     });
-    test('should allow styling month/year picker in grid style datetimes', async ({ page }) => {
-      const datetime = page.locator('#custom-grid');
-      const monthYearToggle = datetime.locator('.calendar-month-year');
-      await monthYearToggle.click();
-      await page.waitForChanges();
-      await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-month-year`));
-    });
     test('should allow styling time picker in grid style datetimes', async ({ page }) => {
-      const timeButton = page.locator('ion-datetime .time-body');
+      const timeButton = page.locator('#custom-grid .time-body');
       const popover = page.locator('.popover-viewport');
       const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
       await expect(timeButton).toHaveScreenshot(screenshot(`datetime-custom-time-button`));
@@ -29,5 +22,31 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await expect(popover).toHaveScreenshot(screenshot(`datetime-custom-time-picker`));
       await expect(timeButton).toHaveScreenshot(screenshot(`datetime-custom-time-button-active`));
     });
+    test('should allow styling calendar days in grid style datetimes', async ({ page }) => {
+      const datetime = page.locator('#custom-calendar-days');
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-calendar-days`));
+    });
+  });
+});
+/**
+ * This behavior does not differ across
+ * directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('datetime: custom focus'), () => {
+    test('should focus the selected day and then the day after', async ({ page }) => {
+      await page.goto(`/src/components/datetime/test/custom`, config);
+      const datetime = page.locator('#custom-calendar-days');
+      const day = datetime.locator(`.calendar-day[data-day='15'][data-month='6']`);
+      await day.focus();
+      await page.waitForChanges();
+      await expect(day).toBeFocused();
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-focus-selected-calendar-day`));
+      await page.keyboard.press('ArrowRight');
+      await page.waitForChanges();
+      const nextDay = datetime.locator(`.calendar-day[data-day='16'][data-month='6']`);
+      await expect(nextDay).toBeFocused();
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-focus-calendar-day`));
+    });
   });
 });

package/dist/collection/components/datetime/test/datetime.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../utils/test/playwright/index";
 configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('datetime: switching months with different number of days'), () => {

package/dist/collection/components/datetime/test/disable-dates/datetime.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 const DISABLED_CALENDAR_DAY_SELECTOR = '.calendar-day[disabled]:not(.calendar-day-padding)';
 const queryAllDisabledDays = (page, datetimeSelector = 'ion-datetime') => {

package/dist/collection/components/datetime/test/display/datetime.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * This behavior does not vary across directions

package/dist/collection/components/datetime/test/first-day-of-week/datetime.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('datetime: first day of the week'), () => {

package/dist/collection/components/datetime/test/highlighted-dates/datetime.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('datetime: highlightedDates'), () => {

package/dist/collection/components/datetime/test/hour-cycle/datetime.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('datetime: hour cycle'), () => {

package/dist/collection/components/datetime/test/locale/datetime.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * This is testing text content of the

package/dist/collection/components/datetime/test/minmax/datetime.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * This behavior is the same across

package/dist/collection/components/datetime/test/month-year-picker/datetime.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * This is testing element rendering which

package/dist/collection/components/datetime/test/multiple/datetime.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 const SINGLE_DATE = '2022-06-01';
 const MULTIPLE_DATES = ['2022-06-01', '2022-06-02', '2022-06-03'];

package/dist/collection/components/datetime/test/position/datetime.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('datetime: position'), () => {

package/dist/collection/components/datetime/test/prefer-wheel/datetime.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs().forEach(({ title, screenshot, config }) => {
   /**
@@ -184,6 +184,21 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         await yearValues.nth(10).click();
         await ionChange.next();
       });
+      test('should jump to selected date when programmatically updating value', async ({ page }) => {
+        await page.setContent(`
+            <ion-datetime presentation="date" prefer-wheel="true" min="2019-05-05" max="2023-10-01" value="2019-05-30"></ion-datetime>
+          `, config);
+        await page.waitForSelector('.datetime-ready');
+        const datetime = page.locator('ion-datetime');
+        await datetime.evaluate((el) => (el.value = '2021-05-25T12:40:00.000Z'));
+        await page.waitForChanges();
+        const selectedMonth = datetime.locator('.month-column .picker-item-active');
+        const selectedDay = datetime.locator('.day-column .picker-item-active');
+        const selectedYear = datetime.locator('.year-column .picker-item-active');
+        await expect(selectedMonth).toHaveText(/May/);
+        await expect(selectedDay).toHaveText(/25/);
+        await expect(selectedYear).toHaveText(/2021/);
+      });
       test.describe('datetime: date wheel localization', () => {
         test('should correctly localize the date data', async ({ page }) => {
           await page.setContent(`

package/dist/collection/components/datetime/test/presentation/datetime.e2e.js

@@ -1,26 +1,42 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs().forEach(({ title, screenshot, config }) => {
-  test(title('should not have visual regressions'), async ({ page }) => {
-    await page.goto(`/src/components/datetime/test/presentation`, config);
-    await page.waitForSelector('.datetime-ready');
-    const datetime = page.locator('ion-datetime');
-    const compares = [];
-    const presentations = ['date-time', 'time-date', 'time', 'date', 'month-year', 'month', 'year'];
-    for (const presentation of presentations) {
-      await page.locator('select').selectOption(presentation);
-      await page.waitForChanges();
-      compares.push({
-        presentation,
-        screenshot: datetime,
-      });
-    }
-    for (const compare of compares) {
-      await expect(compare.screenshot).toHaveScreenshot(screenshot(`datetime-presentation-${compare.presentation}-diff`));
-    }
+  test.describe(title('datetime: presentation rendering'), () => {
+    let presentationFixture;
+    test.beforeEach(({ page }) => {
+      presentationFixture = new DatetimePresentationFixture(page);
+    });
+    test('should not have visual regressions with date-time presentation', async () => {
+      await presentationFixture.goto('date-time', config);
+      await presentationFixture.screenshot('datetime-presentation-date-time-diff', screenshot);
+    });
+    test('should not have visual regressions with time-date presentation', async () => {
+      await presentationFixture.goto('time-date', config);
+      await presentationFixture.screenshot('datetime-presentation-time-date-diff', screenshot);
+    });
+    test('should not have visual regressions with time presentation', async () => {
+      await presentationFixture.goto('time', config);
+      await presentationFixture.screenshot('datetime-presentation-time-diff', screenshot);
+    });
+    test('should not have visual regressions with date presentation', async () => {
+      await presentationFixture.goto('date', config);
+      await presentationFixture.screenshot('datetime-presentation-date-diff', screenshot);
+    });
+    test('should not have visual regressions with month-year presentation', async () => {
+      await presentationFixture.goto('month-year', config);
+      await presentationFixture.screenshot('datetime-presentation-month-year-diff', screenshot);
+    });
+    test('should not have visual regressions with month presentation', async () => {
+      await presentationFixture.goto('month', config);
+      await presentationFixture.screenshot('datetime-presentation-month-diff', screenshot);
+    });
+    test('should not have visual regressions with year presentation', async () => {
+      await presentationFixture.goto('year', config);
+      await presentationFixture.screenshot('datetime-presentation-year-diff', screenshot);
+    });
   });
 });
 /**
@@ -112,6 +128,21 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     });
   });
 });
+class DatetimePresentationFixture {
+  constructor(page) {
+    this.page = page;
+  }
+  async goto(presentation, config) {
+    await this.page.setContent(`
+      <ion-datetime presentation="${presentation}" value="2010-03-10T13:00:00"></ion-datetime>
+    `, config);
+    await this.page.waitForSelector('.datetime-ready');
+    this.datetime = this.page.locator('ion-datetime');
+  }
+  async screenshot(name, screenshotFn) {
+    await expect(this.datetime).toHaveScreenshot(screenshotFn(name));
+  }
+}
 class TimePickerFixture {
   constructor(page) {
     this.page = page;

package/dist/collection/components/datetime/test/set-value/datetime.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('datetime: set-value'), () => {
@@ -30,24 +30,21 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await page.waitForSelector('.datetime-ready');
       const datetime = page.locator('ion-datetime');
       const activeDayButton = page.locator('.calendar-day-active');
-      const monthYearButton = page.locator('.calendar-month-year');
-      const monthColumn = page.locator('.month-column');
-      const ionChange = await page.spyOnEvent('ionChange');
       await datetime.evaluate((el) => (el.value = '2021-10-05'));
-      // Open month/year picker
-      await monthYearButton.click();
-      await page.waitForChanges();
-      // Select October 2021
-      // The year will automatically switch to 2021 when selecting 10
-      await monthColumn.locator('.picker-item[data-value="10"]').click();
-      await ionChange.next();
-      // Close month/year picker
-      await monthYearButton.click();
       await page.waitForChanges();
       // Check that correct day is highlighted
       await expect(activeDayButton).toHaveAttribute('data-day', '5');
       await expect(activeDayButton).toHaveAttribute('data-month', '10');
       await expect(activeDayButton).toHaveAttribute('data-year', '2021');
     });
+    test('should scroll to new month when value is initially set and then updated', async ({ page }) => {
+      await page.goto('/src/components/datetime/test/set-value', config);
+      await page.waitForSelector('.datetime-ready');
+      const datetime = page.locator('ion-datetime');
+      await datetime.evaluate((el) => (el.value = '2021-05-25T12:40:00.000Z'));
+      await page.waitForChanges();
+      const calendarHeader = datetime.locator('.calendar-month-year');
+      await expect(calendarHeader).toHaveText(/May 2021/);
+    });
   });
 });

package/dist/collection/components/datetime/test/time-label/datetime.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('datetime: time label'), () => {

package/dist/collection/components/datetime/test/values/datetime.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('datetime: values'), () => {

package/dist/collection/components/datetime/utils/data.js

@@ -1,10 +1,10 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { isAfter, isBefore, isSameDay } from './comparison';
-import { getLocalizedDayPeriod, removeDateTzOffset, getFormattedHour, addTimePadding, getTodayLabel, getYear, } from './format';
-import { getNumDaysInMonth, is24Hour } from './helpers';
-import { getNextMonth, getPreviousMonth, getInternalHourValue } from './manipulation';
+import { isAfter, isBefore, isSameDay } from "./comparison";
+import { getLocalizedDayPeriod, removeDateTzOffset, getFormattedHour, addTimePadding, getTodayLabel, getYear, } from "./format";
+import { getNumDaysInMonth, is24Hour } from "./helpers";
+import { getNextMonth, getPreviousMonth, getInternalHourValue } from "./manipulation";
 /**
  * Returns the current date as
  * an ISO string in the user's
@@ -220,12 +220,20 @@ export const generateTime = (refParts, hourCycle = 'h12', minParts, maxParts, ho
  * Given DatetimeParts, generate the previous,
  * current, and and next months.
  */
-export const generateMonths = (refParts) => {
-  return [
-    getPreviousMonth(refParts),
-    { month: refParts.month, year: refParts.year, day: refParts.day },
-    getNextMonth(refParts),
-  ];
+export const generateMonths = (refParts, forcedDate) => {
+  const current = { month: refParts.month, year: refParts.year, day: refParts.day };
+  /**
+   * If we're forcing a month to appear, and it's different from the current month,
+   * ensure it appears by replacing the next or previous month as appropriate.
+   */
+  if (forcedDate !== undefined && (refParts.month !== forcedDate.month || refParts.year !== forcedDate.year)) {
+    const forced = { month: forcedDate.month, year: forcedDate.year, day: forcedDate.day };
+    const forcedMonthIsBefore = isBefore(forced, current);
+    return forcedMonthIsBefore
+      ? [forced, current, getNextMonth(refParts)]
+      : [getPreviousMonth(refParts), current, forced];
+  }
+  return [getPreviousMonth(refParts), current, getNextMonth(refParts)];
 };
 export const getMonthColumnData = (locale, refParts, minParts, maxParts, monthValues, formatOptions = {
   month: 'long',

package/dist/collection/components/datetime/utils/format.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { convertDataToISO } from './manipulation';
+import { convertDataToISO } from "./manipulation";
 const getFormattedDayPeriod = (dayPeriod) => {
   if (dayPeriod === undefined) {
     return '';

package/dist/collection/components/datetime/utils/manipulation.js

@@ -1,9 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { isSameDay } from './comparison';
-import { getNumDaysInMonth } from './helpers';
-import { clampDate, parseAmPm } from './parse';
+import { isSameDay } from "./comparison";
+import { getNumDaysInMonth } from "./helpers";
+import { clampDate, parseAmPm } from "./parse";
 const twoDigit = (val) => {
   return ('0' + (val !== undefined ? Math.abs(val) : '0')).slice(-2);
 };

package/dist/collection/components/datetime/utils/parse.js

@@ -1,8 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { isAfter, isBefore } from './comparison';
-import { getNumDaysInMonth } from './helpers';
+import { printIonWarning } from "../../../utils/logging/index";
+import { isAfter, isBefore } from "./comparison";
+import { getNumDaysInMonth } from "./helpers";
 const ISO_8601_REGEXP = 
 // eslint-disable-next-line no-useless-escape
 /^(\d{4}|[+\-]\d{6})(?:-(\d{2})(?:-(\d{2}))?)?(?:T(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{3}))?)?(?:(Z)|([+\-])(\d{2})(?::(\d{2}))?)?)?$/;
@@ -47,7 +48,22 @@ export const getPartsFromCalendarDay = (el) => {
 };
 export function parseDate(val) {
   if (Array.isArray(val)) {
-    return val.map((valStr) => parseDate(valStr));
+    const parsedArray = [];
+    for (const valStr of val) {
+      const parsedVal = parseDate(valStr);
+      /**
+       * If any of the values weren't parsed correctly, consider
+       * the entire batch incorrect. This simplifies the type
+       * signatures by having "undefined" be a general error case
+       * instead of returning (Datetime | undefined)[], which is
+       * harder for TS to perform type narrowing on.
+       */
+      if (!parsedVal) {
+        return undefined;
+      }
+      parsedArray.push(parsedVal);
+    }
+    return parsedArray;
   }
   // manually parse IS0 cuz Date.parse cannot be trusted
   // ISO 8601 format: 1994-12-15T13:47:20Z
@@ -67,6 +83,7 @@ export function parseDate(val) {
   }
   if (parse === null) {
     // wasn't able to parse the ISO datetime
+    printIonWarning(`Unable to parse date string: ${val}. Please provide a valid ISO 8601 datetime string.`);
     return undefined;
   }
   // ensure all the parse values exist with at least 0
@@ -107,7 +124,14 @@ export const parseAmPm = (hour) => {
  * month, day, hour, and minute information.
  */
 export const parseMaxParts = (max, todayParts) => {
-  const { month, day, year, hour, minute } = parseDate(max);
+  const result = parseDate(max);
+  /**
+   * If min was not a valid date then return undefined.
+   */
+  if (result === undefined) {
+    return;
+  }
+  const { month, day, year, hour, minute } = result;
   /**
    * When passing in `max` or `min`, developers
    * can pass in any ISO-8601 string. This means
@@ -140,7 +164,14 @@ export const parseMaxParts = (max, todayParts) => {
  * month, day, hour, and minute information.
  */
 export const parseMinParts = (min, todayParts) => {
-  const { month, day, year, hour, minute } = parseDate(min);
+  const result = parseDate(min);
+  /**
+   * If min was not a valid date then return undefined.
+   */
+  if (result === undefined) {
+    return;
+  }
+  const { month, day, year, hour, minute } = result;
   /**
    * When passing in `max` or `min`, developers
    * can pass in any ISO-8601 string. This means

package/dist/collection/components/datetime/utils/state.js

@@ -2,9 +2,9 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { printIonError } from "../../../utils/logging/index";
-import { isAfter, isBefore, isSameDay } from './comparison';
-import { generateDayAriaLabel, getDay } from './format';
-import { getNextMonth, getPreviousMonth } from './manipulation';
+import { isAfter, isBefore, isSameDay } from "./comparison";
+import { generateDayAriaLabel, getDay } from "./format";
+import { getNextMonth, getPreviousMonth } from "./manipulation";
 export const isYearDisabled = (refYear, minParts, maxParts) => {
   if (minParts && minParts.year > refYear) {
     return true;

package/dist/collection/components/datetime-button/datetime-button.js

@@ -1,15 +1,15 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 import { componentOnReady, addEventListener } from "../../utils/helpers";
 import { printIonError } from "../../utils/logging/index";
 import { createColorClasses } from "../../utils/theme";
-import { getIonMode } from '../../global/ionic-global';
-import { getToday } from '../datetime/utils/data';
-import { getMonthAndYear, getMonthDayAndYear, getLocalizedDateTime, getLocalizedTime } from '../datetime/utils/format';
-import { is24Hour } from '../datetime/utils/helpers';
-import { parseDate } from '../datetime/utils/parse';
+import { getIonMode } from "../../global/ionic-global";
+import { getToday } from "../datetime/utils/data";
+import { getMonthAndYear, getMonthDayAndYear, getLocalizedDateTime, getLocalizedTime } from "../datetime/utils/format";
+import { is24Hour } from "../datetime/utils/helpers";
+import { parseDate } from "../datetime/utils/parse";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
@@ -54,6 +54,9 @@ export class DatetimeButton {
        * to today's date and time if no value is set.
        */
       const parsedDatetimes = parseDate(parsedValues.length > 0 ? parsedValues : [getToday()]);
+      if (!parsedDatetimes) {
+        return;
+      }
       /**
        * If developers incorrectly use multiple="true"
        * with non "date" datetimes, then just select
@@ -364,7 +367,8 @@ export class DatetimeButton {
           "references": {
             "Color": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../interface",
+              "id": "src/interface.d.ts::Color"
             }
           }
         },

package/dist/collection/components/datetime-button/test/basic/datetime-button.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * The tested behavior does not

package/dist/collection/components/datetime-button/test/disabled/datetime-button.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('datetime-button: disabled buttons'), () => {

package/dist/collection/components/datetime-button/test/multiple/datetime-button.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * The tested behavior does not