@acusti/date-picker 0.8.1 → 0.10.0

package/README.md

@@ -11,7 +11,7 @@ support for ranges via a two-up month calendar view.
 See the [storybook docs and demo][] to get a feel for what it can do.
 
 [storybook docs and demo]:
-    https://acusti-uikit.netlify.app/?path=/docs/uikit-controls-datepicker-datepicker--docs
+    https://uikit.acusti.ca/?path=/docs/uikit-controls-datepicker-datepicker--docs
 
 ## Usage
 

package/dist/DatePicker.d.ts

@@ -8,7 +8,10 @@ export type Props = {
     isTwoUp?: boolean;
     monthLimitFirst?: number;
     monthLimitLast?: number;
-    onChange: (payload: { dateEnd?: null | string; dateStart: string }) => void;
+    onChange: (payload: {
+        dateEnd?: null | string;
+        dateStart: string;
+    }) => void;
     /**
      * Boolean to specify that date picker should initially render with the
      * end date’s month visible. The default behavior is to initially render
@@ -17,16 +20,4 @@ export type Props = {
     showEndInitially?: boolean;
     useMonthAbbreviations?: boolean;
 };
-export default function DatePicker({
-    className,
-    dateEnd: _dateEnd,
-    dateStart: _dateStart,
-    initialMonth,
-    isRange,
-    isTwoUp,
-    monthLimitFirst,
-    monthLimitLast,
-    onChange,
-    showEndInitially,
-    useMonthAbbreviations,
-}: Props): React.JSX.Element;
+export default function DatePicker({ className, dateEnd: _dateEnd, dateStart: _dateStart, initialMonth, isRange, isTwoUp, monthLimitFirst, monthLimitLast, onChange, showEndInitially, useMonthAbbreviations, }: Props): React.JSX.Element;

package/dist/DatePicker.js

@@ -4,52 +4,27 @@ import clsx from 'clsx';
 import * as React from 'react';
 import MonthCalendar from './MonthCalendar.js';
 import { ROOT_CLASS_NAME, STYLES } from './styles/date-picker.js';
-import {
-    getMonthAbbreviationFromMonth,
-    getMonthFromDate,
-    getYearFromMonth,
-} from './utils.js';
+import { getMonthAbbreviationFromMonth, getMonthFromDate, getYearFromMonth, } from './utils.js';
 const { Fragment, useCallback, useEffect, useRef, useState } = React;
-const getAbbreviatedMonthTitle = (month) =>
-    `${getMonthAbbreviationFromMonth(month)} ${getYearFromMonth(month)}`;
-export default function DatePicker({
-    className,
-    dateEnd: _dateEnd,
-    dateStart: _dateStart,
-    initialMonth,
-    isRange = _dateEnd != null,
-    isTwoUp,
-    monthLimitFirst,
-    monthLimitLast,
-    onChange,
-    showEndInitially,
-    useMonthAbbreviations,
-}) {
-    const dateEndFromProps =
-        _dateEnd != null && typeof _dateEnd !== 'string'
-            ? new Date(_dateEnd).toISOString()
-            : _dateEnd;
-    const dateStartFromProps =
-        _dateStart != null && typeof _dateStart !== 'string'
-            ? new Date(_dateStart).toISOString()
-            : _dateStart;
-    const [dateEnd, setDateEnd] = useState(
-        dateEndFromProps !== null && dateEndFromProps !== void 0
-            ? dateEndFromProps
-            : null,
-    );
-    const [dateStart, setDateStart] = useState(
-        dateStartFromProps !== null && dateStartFromProps !== void 0
-            ? dateStartFromProps
-            : null,
-    );
+const getAbbreviatedMonthTitle = (month) => `${getMonthAbbreviationFromMonth(month)} ${getYearFromMonth(month)}`;
+export default function DatePicker({ className, dateEnd: _dateEnd, dateStart: _dateStart, initialMonth, isRange = _dateEnd != null, isTwoUp, monthLimitFirst, monthLimitLast, onChange, showEndInitially, useMonthAbbreviations, }) {
+    const dateEndFromProps = _dateEnd != null && typeof _dateEnd !== 'string'
+        ? new Date(_dateEnd).toISOString()
+        : _dateEnd;
+    const dateStartFromProps = _dateStart != null && typeof _dateStart !== 'string'
+        ? new Date(_dateStart).toISOString()
+        : _dateStart;
+    const [dateEnd, setDateEnd] = useState(dateEndFromProps !== null && dateEndFromProps !== void 0 ? dateEndFromProps : null);
+    const [dateStart, setDateStart] = useState(dateStartFromProps !== null && dateStartFromProps !== void 0 ? dateStartFromProps : null);
     const updatingDateEndRef = useRef(false);
     useEffect(() => {
-        if (dateEndFromProps == null) return;
+        if (dateEndFromProps == null)
+            return;
         setDateEnd(dateEndFromProps);
     }, [dateEndFromProps]);
     useEffect(() => {
-        if (dateStartFromProps == null) return;
+        if (dateStartFromProps == null)
+            return;
         setDateStart(dateStartFromProps);
     }, [dateStartFromProps]);
     if (initialMonth == null) {
@@ -57,9 +32,7 @@ export default function DatePicker({
         const useDateEnd = dateStart == null || Boolean(showEndInitially && dateEnd);
         // use date from props if set
         const initialDate = useDateEnd ? dateEnd : dateStart;
-        initialMonth = getMonthFromDate(
-            initialDate == null ? new Date() : new Date(initialDate),
-        );
+        initialMonth = getMonthFromDate(initialDate == null ? new Date() : new Date(initialDate));
         if (useDateEnd && isTwoUp) {
             initialMonth -= 1;
         }
@@ -71,111 +44,65 @@ export default function DatePicker({
         monthLimitLast -= 1;
     }
     const handleClickLeftArrow = useCallback(() => {
-        setMonth((existingMonth) =>
-            monthLimitFirst == null || existingMonth > monthLimitFirst
-                ? existingMonth - 1
-                : existingMonth,
-        );
+        setMonth((existingMonth) => monthLimitFirst == null || existingMonth > monthLimitFirst
+            ? existingMonth - 1
+            : existingMonth);
     }, [monthLimitFirst]);
     const handleClickRightArrow = useCallback(() => {
-        setMonth((existingMonth) =>
-            monthLimitLast == null || existingMonth < monthLimitLast
-                ? existingMonth + 1
-                : existingMonth,
-        );
+        setMonth((existingMonth) => monthLimitLast == null || existingMonth < monthLimitLast
+            ? existingMonth + 1
+            : existingMonth);
     }, [monthLimitLast]);
-    const handleChange = useCallback(
-        (date) => {
-            // If we last set the dateStart or we have a dateStart but no dateEnd, set dateEnd
-            if (
-                isRange &&
-                dateStart != null &&
-                (updatingDateEndRef.current || dateEnd == null)
-            ) {
-                // Ensure that dateEnd is after dateStart; if not, swap them
-                if (date < dateStart) {
-                    setDateStart(date);
-                    setDateEnd(dateStart);
-                    onChange({ dateEnd: dateStart, dateStart: date });
-                } else {
-                    setDateEnd(date);
-                    onChange({ dateEnd: date, dateStart });
-                }
-                updatingDateEndRef.current = false;
-            } else {
+    const handleChange = useCallback((date) => {
+        // If we last set the dateStart or we have a dateStart but no dateEnd, set dateEnd
+        if (isRange &&
+            dateStart != null &&
+            (updatingDateEndRef.current || dateEnd == null)) {
+            // Ensure that dateEnd is after dateStart; if not, swap them
+            if (date < dateStart) {
                 setDateStart(date);
-                setDateEnd(null);
-                if (isRange) {
-                    onChange({ dateEnd: null, dateStart: date });
-                    updatingDateEndRef.current = true;
-                } else {
-                    onChange({ dateStart: date });
-                }
+                setDateEnd(dateStart);
+                onChange({ dateEnd: dateStart, dateStart: date });
             }
-        },
-        [dateEnd, dateStart, isRange, onChange],
-    );
+            else {
+                setDateEnd(date);
+                onChange({ dateEnd: date, dateStart });
+            }
+            updatingDateEndRef.current = false;
+        }
+        else {
+            setDateStart(date);
+            setDateEnd(null);
+            if (isRange) {
+                onChange({ dateEnd: null, dateStart: date });
+                updatingDateEndRef.current = true;
+            }
+            else {
+                onChange({ dateStart: date });
+            }
+        }
+    }, [dateEnd, dateStart, isRange, onChange]);
     const handleChangeEndPreview = useCallback((date) => {
         setDateEndPreview(date);
     }, []);
-    return React.createElement(
-        Fragment,
-        null,
-        React.createElement(Style, { href: '@acusti/date-picker/DatePicker' }, STYLES),
-        React.createElement(
-            'div',
-            {
-                className: clsx(ROOT_CLASS_NAME, className, {
-                    'two-up': isTwoUp,
-                }),
-            },
-            React.createElement(
-                'div',
-                { className: `${ROOT_CLASS_NAME}-range-arrow-wrap` },
-                React.createElement('div', {
-                    className: clsx(`${ROOT_CLASS_NAME}-range-arrow left-arrow`, {
+    return (React.createElement(Fragment, null,
+        React.createElement(Style, { href: "@acusti/date-picker/DatePicker" }, STYLES),
+        React.createElement("div", { className: clsx(ROOT_CLASS_NAME, className, {
+                'two-up': isTwoUp,
+            }) },
+            React.createElement("div", { className: `${ROOT_CLASS_NAME}-range-arrow-wrap` },
+                React.createElement("div", { className: clsx(`${ROOT_CLASS_NAME}-range-arrow left-arrow`, {
                         disabled: monthLimitFirst != null && month <= monthLimitFirst,
-                    }),
-                    onClick: handleClickLeftArrow,
-                }),
-                React.createElement('div', {
-                    className: clsx(`${ROOT_CLASS_NAME}-range-arrow right-arrow`, {
+                    }), onClick: handleClickLeftArrow }),
+                React.createElement("div", { className: clsx(`${ROOT_CLASS_NAME}-range-arrow right-arrow`, {
                         disabled: monthLimitLast != null && month >= monthLimitLast,
-                    }),
-                    onClick: handleClickRightArrow,
-                }),
-            ),
-            React.createElement(
-                'div',
-                { className: `${ROOT_CLASS_NAME}-month-container` },
-                React.createElement(MonthCalendar, {
-                    dateEnd: dateEnd,
-                    dateEndPreview: dateEndPreview,
-                    dateStart: dateStart,
-                    isRange: isRange,
-                    month: month,
-                    onChange: handleChange,
-                    onChangeEndPreview: handleChangeEndPreview,
-                    title: useMonthAbbreviations
+                    }), onClick: handleClickRightArrow })),
+            React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-container` },
+                React.createElement(MonthCalendar, { dateEnd: dateEnd, dateEndPreview: dateEndPreview, dateStart: dateStart, isRange: isRange, month: month, onChange: handleChange, onChangeEndPreview: handleChangeEndPreview, title: useMonthAbbreviations
                         ? getAbbreviatedMonthTitle(month)
-                        : undefined,
-                }),
-                isTwoUp
-                    ? React.createElement(MonthCalendar, {
-                          dateEnd: dateEnd,
-                          dateEndPreview: dateEndPreview,
-                          dateStart: dateStart,
-                          isRange: isRange,
-                          month: month + 1,
-                          onChange: handleChange,
-                          onChangeEndPreview: handleChangeEndPreview,
-                          title: useMonthAbbreviations
-                              ? getAbbreviatedMonthTitle(month + 1)
-                              : undefined,
-                      })
-                    : null,
-            ),
-        ),
-    );
+                        : undefined }),
+                isTwoUp ? (React.createElement(MonthCalendar, { dateEnd: dateEnd, dateEndPreview: dateEndPreview, dateStart: dateStart, isRange: isRange, month: month + 1, onChange: handleChange, onChangeEndPreview: handleChangeEndPreview, title: useMonthAbbreviations
+                        ? getAbbreviatedMonthTitle(month + 1)
+                        : undefined })) : null))));
 }
-//# sourceMappingURL=DatePicker.js.map
+//# sourceMappingURL=DatePicker.js.map

package/dist/DatePicker.js.flow

@@ -1,31 +1,31 @@
 /**
  * Flowtype definitions for DatePicker
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 
-import * as React from 'react';
+import * as React from "react";
 export type Props = {|
-    className?: string,
-    dateEnd?: Date | number | string,
-    dateStart?: Date | number | string,
-    initialMonth?: number,
-    isRange?: boolean,
-    isTwoUp?: boolean,
-    monthLimitFirst?: number,
-    monthLimitLast?: number,
-    onChange: (payload: {|
-        dateEnd?: null | string,
-        dateStart: string,
-    |}) => void,
+  className?: string,
+  dateEnd?: Date | number | string,
+  dateStart?: Date | number | string,
+  initialMonth?: number,
+  isRange?: boolean,
+  isTwoUp?: boolean,
+  monthLimitFirst?: number,
+  monthLimitLast?: number,
+  onChange: (payload: {|
+    dateEnd?: null | string,
+    dateStart: string,
+  |}) => void,
 
-    /**
-     * Boolean to specify that date picker should initially render with the
-     * end date’s month visible. The default behavior is to initially render
-     * with the start date’s month visible.
-     */
-    showEndInitially?: boolean,
-    useMonthAbbreviations?: boolean,
+  /**
+   * Boolean to specify that date picker should initially render with the
+   * end date’s month visible. The default behavior is to initially render
+   * with the start date’s month visible.
+   */
+  showEndInitially?: boolean,
+  useMonthAbbreviations?: boolean,
 |};
 declare export default function DatePicker(x: Props): React.Node;

package/dist/MonthCalendar.d.ts

@@ -10,14 +10,4 @@ export type Props = {
     onChangeEndPreview?: (date: string) => void;
     title?: string;
 };
-export default function MonthCalendar({
-    className,
-    dateEnd,
-    dateEndPreview,
-    dateStart,
-    isRange,
-    month,
-    onChange,
-    onChangeEndPreview,
-    title,
-}: Props): React.JSX.Element;
+export default function MonthCalendar({ className, dateEnd, dateEndPreview, dateStart, isRange, month, onChange, onChangeEndPreview, title, }: Props): React.JSX.Element;

package/dist/MonthCalendar.js

@@ -2,31 +2,12 @@ import { Style } from '@acusti/styling';
 import clsx from 'clsx';
 import * as React from 'react';
 import { ROOT_CLASS_NAME, STYLES } from './styles/month-calendar.js';
-import {
-    getDateFromMonthAndDay,
-    getLastDateFromMonth,
-    getMonthFromDate,
-    getMonthNameFromMonth,
-    getYearFromMonth,
-} from './utils.js';
+import { getDateFromMonthAndDay, getLastDateFromMonth, getMonthFromDate, getMonthNameFromMonth, getYearFromMonth, } from './utils.js';
 const { Fragment, useCallback } = React;
 const DAYS = Array(7).fill(null);
-export default function MonthCalendar({
-    className,
-    dateEnd,
-    dateEndPreview,
-    dateStart,
-    isRange,
-    month,
-    onChange,
-    onChangeEndPreview,
-    title,
-}) {
+export default function MonthCalendar({ className, dateEnd, dateEndPreview, dateStart, isRange, month, onChange, onChangeEndPreview, title, }) {
     const year = getYearFromMonth(month);
-    title =
-        title !== null && title !== void 0
-            ? title
-            : `${getMonthNameFromMonth(month)} ${year}`;
+    title = title !== null && title !== void 0 ? title : `${getMonthNameFromMonth(month)} ${year}`;
     const firstDate = getDateFromMonthAndDay(month, 1);
     const lastDate = getLastDateFromMonth(month);
     const totalDays = lastDate.getDate();
@@ -37,198 +18,88 @@ export default function MonthCalendar({
         dateStart,
         dateEnd,
         dateEndPreview,
-    ].reduce(
-        (acc, date, index) => {
-            if (date != null && !(date instanceof Date)) {
-                date = new Date(date);
-            }
-            if (date == null || Number.isNaN(date.getTime())) return acc;
-            const dateMonth = getMonthFromDate(date);
-            if (dateMonth < month) acc[index] = -1;
-            else if (dateMonth > month) acc[index] = totalDays + 1;
-            else acc[index] = date.getDate();
-            if (index === 1) {
-                const startDay = acc[index - 1];
-                const endDay = acc[index];
-                // Ensure that end date is after start date and swap them if not
-                if (startDay != null && endDay != null && startDay > endDay) {
-                    acc[index - 1] = endDay;
-                    acc[index] = startDay;
-                }
-            }
+    ].reduce((acc, date, index) => {
+        if (date != null && !(date instanceof Date)) {
+            date = new Date(date);
+        }
+        if (date == null || Number.isNaN(date.getTime()))
             return acc;
-        },
-        [null, null, null],
-    );
-    const handleClickDay = useCallback(
-        (event) => {
-            const { date } = event.currentTarget.dataset;
-            if (date && onChange) onChange(date);
-        },
-        [onChange],
-    );
-    const handleMouseEnterDay = useCallback(
-        (event) => {
-            if (isRange && onChangeEndPreview) {
-                const { date } = event.currentTarget.dataset;
-                if (date) onChangeEndPreview(date);
+        const dateMonth = getMonthFromDate(date);
+        if (dateMonth < month)
+            acc[index] = -1;
+        else if (dateMonth > month)
+            acc[index] = totalDays + 1;
+        else
+            acc[index] = date.getDate();
+        if (index === 1) {
+            const startDay = acc[index - 1];
+            const endDay = acc[index];
+            // Ensure that end date is after start date and swap them if not
+            if (startDay != null && endDay != null && startDay > endDay) {
+                acc[index - 1] = endDay;
+                acc[index] = startDay;
             }
-        },
-        [isRange, onChangeEndPreview],
-    );
-    return React.createElement(
-        Fragment,
-        null,
-        React.createElement(Style, { href: '@acusti/date-picker/MonthCalendar' }, STYLES),
-        React.createElement(
-            'div',
-            { className: clsx(ROOT_CLASS_NAME, className) },
-            React.createElement(
-                'div',
-                { className: `${ROOT_CLASS_NAME}-month-title` },
-                React.createElement(
-                    'h3',
-                    { className: `${ROOT_CLASS_NAME}-month-title-text` },
-                    title,
-                ),
-            ),
-            React.createElement(
-                'div',
-                { className: `${ROOT_CLASS_NAME}-month-week` },
-                React.createElement(
-                    'div',
-                    { className: 'week-day-item' },
-                    React.createElement(
-                        'span',
-                        { className: 'week-day-item-text' },
-                        'Su',
-                    ),
-                ),
-                React.createElement(
-                    'div',
-                    { className: 'week-day-item' },
-                    React.createElement(
-                        'span',
-                        { className: 'week-day-item-text' },
-                        'Mo',
-                    ),
-                ),
-                React.createElement(
-                    'div',
-                    { className: 'week-day-item' },
-                    React.createElement(
-                        'span',
-                        { className: 'week-day-item-text' },
-                        'Tu',
-                    ),
-                ),
-                React.createElement(
-                    'div',
-                    { className: 'week-day-item' },
-                    React.createElement(
-                        'span',
-                        { className: 'week-day-item-text' },
-                        'We',
-                    ),
-                ),
-                React.createElement(
-                    'div',
-                    { className: 'week-day-item' },
-                    React.createElement(
-                        'span',
-                        { className: 'week-day-item-text' },
-                        'Th',
-                    ),
-                ),
-                React.createElement(
-                    'div',
-                    { className: 'week-day-item' },
-                    React.createElement(
-                        'span',
-                        { className: 'week-day-item-text' },
-                        'Fr',
-                    ),
-                ),
-                React.createElement(
-                    'div',
-                    { className: 'week-day-item' },
-                    React.createElement(
-                        'span',
-                        { className: 'week-day-item-text' },
-                        'Sa',
-                    ),
-                ),
-            ),
-            React.createElement(
-                'div',
-                { className: `${ROOT_CLASS_NAME}-month-days` },
-                Array(Math.floor(daySpaces / 7))
-                    .fill(null)
-                    .map((_, weekIndex) =>
-                        React.createElement(
-                            'div',
-                            {
-                                className: `${ROOT_CLASS_NAME}-month-row`,
-                                key: `MonthRow-${weekIndex}`,
-                            },
-                            DAYS.map((__, dayIndex) => {
-                                dayIndex += weekIndex * 7;
-                                const dayNumber = (dayIndex - firstDay) + 1; // prettier-ignore
-                                const isEmpty = dayNumber < 1 || dayNumber > totalDays;
-                                const date = isEmpty
-                                    ? null
-                                    : getDateFromMonthAndDay(month, dayNumber);
-                                const isAfterDateRangeStart =
-                                    dateRangeStartDay != null &&
-                                    dayNumber > dateRangeStartDay;
-                                const isBeforeDateRangeEnd =
-                                    (dateRangeEndDay == null &&
-                                        dateRangeEndPreviewDay != null &&
-                                        dayNumber < dateRangeEndPreviewDay) ||
-                                    (dateRangeEndDay != null &&
-                                        dayNumber < dateRangeEndDay);
-                                return React.createElement(
-                                    'button',
-                                    {
-                                        className: clsx(
-                                            `${ROOT_CLASS_NAME}-month-day-item`,
-                                            {
-                                                'end-date':
-                                                    !isEmpty &&
-                                                    dayNumber === dateRangeEndDay,
-                                                'is-empty': isEmpty,
-                                                'is-selected':
-                                                    !isEmpty &&
-                                                    isAfterDateRangeStart &&
-                                                    isBeforeDateRangeEnd,
-                                                'start-date':
-                                                    !isEmpty &&
-                                                    dayNumber === dateRangeStartDay,
-                                            },
-                                        ),
-                                        'data-date':
-                                            date === null || date === void 0
-                                                ? void 0
-                                                : date.toISOString(),
-                                        disabled: isEmpty,
-                                        key: `MonthDayItem-${dayNumber}`,
-                                        onClick: handleClickDay,
-                                        onMouseEnter: handleMouseEnterDay,
-                                        type: 'button',
-                                    },
-                                    isEmpty
-                                        ? null
-                                        : React.createElement(
-                                              'span',
-                                              { className: 'month-day-item-text' },
-                                              dayNumber,
-                                          ),
-                                );
-                            }),
-                        ),
-                    ),
-            ),
-        ),
-    );
+        }
+        return acc;
+    }, [null, null, null]);
+    const handleClickDay = useCallback((event) => {
+        const { date } = event.currentTarget.dataset;
+        if (date && onChange)
+            onChange(date);
+    }, [onChange]);
+    const handleMouseEnterDay = useCallback((event) => {
+        if (isRange && onChangeEndPreview) {
+            const { date } = event.currentTarget.dataset;
+            if (date)
+                onChangeEndPreview(date);
+        }
+    }, [isRange, onChangeEndPreview]);
+    return (React.createElement(Fragment, null,
+        React.createElement(Style, { href: "@acusti/date-picker/MonthCalendar" }, STYLES),
+        React.createElement("div", { className: clsx(ROOT_CLASS_NAME, className) },
+            React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-title` },
+                React.createElement("h3", { className: `${ROOT_CLASS_NAME}-month-title-text` }, title)),
+            React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-week` },
+                React.createElement("div", { className: "week-day-item" },
+                    React.createElement("span", { className: "week-day-item-text" }, "Su")),
+                React.createElement("div", { className: "week-day-item" },
+                    React.createElement("span", { className: "week-day-item-text" }, "Mo")),
+                React.createElement("div", { className: "week-day-item" },
+                    React.createElement("span", { className: "week-day-item-text" }, "Tu")),
+                React.createElement("div", { className: "week-day-item" },
+                    React.createElement("span", { className: "week-day-item-text" }, "We")),
+                React.createElement("div", { className: "week-day-item" },
+                    React.createElement("span", { className: "week-day-item-text" }, "Th")),
+                React.createElement("div", { className: "week-day-item" },
+                    React.createElement("span", { className: "week-day-item-text" }, "Fr")),
+                React.createElement("div", { className: "week-day-item" },
+                    React.createElement("span", { className: "week-day-item-text" }, "Sa"))),
+            React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-days` }, Array(Math.floor(daySpaces / 7))
+                .fill(null)
+                .map((_, weekIndex) => (React.createElement("div", { className: `${ROOT_CLASS_NAME}-month-row`, key: `MonthRow-${weekIndex}` }, DAYS.map((__, dayIndex) => {
+                dayIndex += weekIndex * 7;
+                const dayNumber = (dayIndex - firstDay) + 1; // prettier-ignore
+                const isEmpty = dayNumber < 1 || dayNumber > totalDays;
+                const date = isEmpty
+                    ? null
+                    : getDateFromMonthAndDay(month, dayNumber);
+                const isAfterDateRangeStart = dateRangeStartDay != null &&
+                    dayNumber > dateRangeStartDay;
+                const isBeforeDateRangeEnd = (dateRangeEndDay == null &&
+                    dateRangeEndPreviewDay != null &&
+                    dayNumber < dateRangeEndPreviewDay) ||
+                    (dateRangeEndDay != null &&
+                        dayNumber < dateRangeEndDay);
+                return (React.createElement("button", { className: clsx(`${ROOT_CLASS_NAME}-month-day-item`, {
+                        'end-date': !isEmpty &&
+                            dayNumber === dateRangeEndDay,
+                        'is-empty': isEmpty,
+                        'is-selected': !isEmpty &&
+                            isAfterDateRangeStart &&
+                            isBeforeDateRangeEnd,
+                        'start-date': !isEmpty &&
+                            dayNumber === dateRangeStartDay,
+                    }), "data-date": date === null || date === void 0 ? void 0 : date.toISOString(), disabled: isEmpty, key: `MonthDayItem-${dayNumber}`, onClick: handleClickDay, onMouseEnter: handleMouseEnterDay, type: "button" }, isEmpty ? null : (React.createElement("span", { className: "month-day-item-text" }, dayNumber))));
+            }))))))));
 }
-//# sourceMappingURL=MonthCalendar.js.map
+//# sourceMappingURL=MonthCalendar.js.map

package/dist/MonthCalendar.js.flow

@@ -1,20 +1,20 @@
 /**
  * Flowtype definitions for MonthCalendar
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 
-import * as React from 'react';
+import * as React from "react";
 export type Props = {|
-    className?: string,
-    dateEnd?: Date | null | number | string,
-    dateEndPreview?: null | string,
-    dateStart?: Date | null | number | string,
-    isRange?: boolean,
-    month: number,
-    onChange?: (date: string) => void,
-    onChangeEndPreview?: (date: string) => void,
-    title?: string,
+  className?: string,
+  dateEnd?: Date | null | number | string,
+  dateEndPreview?: null | string,
+  dateStart?: Date | null | number | string,
+  isRange?: boolean,
+  month: number,
+  onChange?: (date: string) => void,
+  onChangeEndPreview?: (date: string) => void,
+  title?: string,
 |};
 declare export default function MonthCalendar(x: Props): React.Node;

package/dist/index.js

@@ -1,4 +1,4 @@
 export { default as DatePicker } from './DatePicker.js';
 export { default as MonthCalendar } from './MonthCalendar.js';
 export * from './utils.js';
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.flow

@@ -1,10 +1,10 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 
-declare export { default as DatePicker } from './DatePicker.js';
-declare export { default as MonthCalendar } from './MonthCalendar.js';
-declare export * from './utils.js';
+declare export { default as DatePicker } from "./DatePicker.js";
+declare export { default as MonthCalendar } from "./MonthCalendar.js";
+declare export * from "./utils.js";

package/dist/styles/date-picker.d.ts

@@ -1,3 +1,2 @@
-export declare const ROOT_CLASS_NAME = 'uktdatepicker';
-export declare const STYLES =
-    '\n.uktdatepicker {\n    display: flex;\n    box-sizing: border-box;\n    padding: 40px 60px 60px;\n    flex: 1 1 auto;\n    position: relative;\n    max-width: 450px;\n}\n\n.uktdatepicker.two-up {\n    max-width: 820px;\n}\n\n.uktdatepicker-range-arrow-wrap {\n    position: absolute;\n    top: 30px;\n    left: 0px;\n    display: flex;\n    justify-content: space-between;\n    height: 0px;\n    width: 100%;\n    padding: 0px 60px;\n    box-sizing: border-box;\n}\n\n.uktdatepicker-range-arrow {\n    width: 35px;\n    height: 35px;\n    text-align: center;\n    cursor: pointer;\n}\n\n.uktdatepicker-range-arrow.disabled {\n    color: #ccc;\n    cursor: default;\n}\n\n.uktdatepicker-range-arrow:active {\n    transform: translateY(1px);\n}\n\n.uktdatepicker-range-arrow.left-arrow:after,\n.uktdatepicker-range-arrow.right-arrow:after {\n    content: "\u2039";\n    font-size: 24px;\n    line-height: 35px;\n    font-weight: bold;\n}\n\n.uktdatepicker-range-arrow.right-arrow:after {\n    content: "\u203A";\n}\n\n.uktdatepicker-month-container {\n    display: flex;\n    flex: 1 1 auto;\n    justify-content: space-between;\n}\n';
+export declare const ROOT_CLASS_NAME = "uktdatepicker";
+export declare const STYLES = "\n.uktdatepicker {\n    display: flex;\n    box-sizing: border-box;\n    padding: 40px 60px 60px;\n    flex: 1 1 auto;\n    position: relative;\n    max-width: 450px;\n}\n\n.uktdatepicker.two-up {\n    max-width: 820px;\n}\n\n.uktdatepicker-range-arrow-wrap {\n    position: absolute;\n    top: 30px;\n    left: 0px;\n    display: flex;\n    justify-content: space-between;\n    height: 0px;\n    width: 100%;\n    padding: 0px 60px;\n    box-sizing: border-box;\n}\n\n.uktdatepicker-range-arrow {\n    width: 35px;\n    height: 35px;\n    text-align: center;\n    cursor: pointer;\n}\n\n.uktdatepicker-range-arrow.disabled {\n    color: #ccc;\n    cursor: default;\n}\n\n.uktdatepicker-range-arrow:active {\n    transform: translateY(1px);\n}\n\n.uktdatepicker-range-arrow.left-arrow:after,\n.uktdatepicker-range-arrow.right-arrow:after {\n    content: \"\u2039\";\n    font-size: 24px;\n    line-height: 35px;\n    font-weight: bold;\n}\n\n.uktdatepicker-range-arrow.right-arrow:after {\n    content: \"\u203A\";\n}\n\n.uktdatepicker-month-container {\n    display: flex;\n    flex: 1 1 auto;\n    justify-content: space-between;\n}\n";

package/dist/styles/date-picker.js

@@ -59,4 +59,4 @@ export const STYLES = `
     justify-content: space-between;
 }
 `;
-//# sourceMappingURL=date-picker.js.map
+//# sourceMappingURL=date-picker.js.map

package/dist/styles/month-calendar.d.ts

@@ -1,3 +1,2 @@
-export declare const ROOT_CLASS_NAME = 'uktmonthcalendar';
-export declare const STYLES =
-    '\n.uktmonthcalendar {\n    display: flex;\n    flex-direction: column;\n    flex: 1 1 auto;\n    box-sizing: border-box;\n    max-width: 325px;\n}\n\n.uktmonthcalendar-month-title {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex: 0 0 auto;\n    box-sizing: border-box;\n    padding-bottom: 25px;\n}\n\nh3.uktmonthcalendar-month-title-text {\n    font-size: 18px;\n    line-height: 23px;\n    font-weight: 600;\n    color: #000;\n    margin: 0px;\n    text-align: center;\n}\n\n.uktmonthcalendar-month-week {\n    flex: 0 0 auto;\n    display: grid;\n    grid-column-gap: 0px;\n    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));\n    grid-auto-flow: dense;\n    box-sizing: border-box;\n    padding-bottom: 12px;\n}\n\n.uktmonthcalendar-month-week .week-day-item {\n    flex: 1 1 auto;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n.uktmonthcalendar-month-week span.week-day-item-text {\n    text-align: center;\n    font-size: 13px;\n    line-height: 21px;\n    margin: 0px;\n    color: #9a9a9a;\n}\n\n.uktmonthcalendar-month-days {\n    flex: 1 1 auto;\n    display: flex;\n    flex-direction: column;\n}\n\n.uktmonthcalendar-month-row {\n    flex: 1 1 auto;\n    display: grid;\n    grid-column-gap: 0px;\n    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));\n    grid-auto-flow: dense;\n    margin-bottom: 1px;\n}\n\n.uktmonthcalendar-month-day-item {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    height: 46px;\n    width: 46px;\n    cursor: pointer;\n    border: none;\n    background-color: transparent;\n}\n\n.uktmonthcalendar-month-day-item:disabled {\n    cursor: auto;\n}\n\n.uktmonthcalendar-month-day-item.is-selected {\n    background-color: #f8f8f8;\n}\n\n.uktmonthcalendar-month-day-item.start-date {\n    background-color: #f8f8f8;\n    border-top-left-radius: 50%;\n    border-bottom-left-radius: 50%;\n}\n\n.uktmonthcalendar-month-day-item.start-date:after {\n    background-color: #000;\n    opacity: 1;\n    visibility: visible;\n}\n.uktmonthcalendar-month-day-item.start-date span.month-day-item-text {\n    color: #fff;\n}\n\n.uktmonthcalendar-month-day-item.end-date {\n    background-color: #f8f8f8;\n    border-top-right-radius: 50%;\n    border-bottom-right-radius: 50%;\n}\n\n.uktmonthcalendar-month-day-item.end-date:after {\n    background-color: #000;\n    opacity: 1;\n    visibility: visible;\n}\n.uktmonthcalendar-month-day-item.end-date span.month-day-item-text {\n    color: #fff;\n}\n\n.uktmonthcalendar-month-day-item:hover:after {\n    opacity: 1;\n    visibility: visible;\n}\n\n.uktmonthcalendar-month-day-item:after {\n    content: "";\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    pointer-events: none;\n    border-radius: 50%;\n    border: 1px solid #000;\n    width: 43px;\n    height: 43px;\n    transition: opacity 0.25s ease-in-out;\n    opacity: 0;\n    visibility: hidden;\n}\n\n.uktmonthcalendar-month-day-item.is-empty:after {\n    content: none;\n}\n\n.uktmonthcalendar-month-day-item span.month-day-item-text {\n    text-align: center;\n    font-size: 13px;\n    line-height: 21px;\n    margin: 0px;\n    color: #000;\n    position: relative;\n    z-index: 1;\n}\n';
+export declare const ROOT_CLASS_NAME = "uktmonthcalendar";
+export declare const STYLES = "\n.uktmonthcalendar {\n    display: flex;\n    flex-direction: column;\n    flex: 1 1 auto;\n    box-sizing: border-box;\n    max-width: 325px;\n}\n\n.uktmonthcalendar-month-title {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex: 0 0 auto;\n    box-sizing: border-box;\n    padding-bottom: 25px;\n}\n\nh3.uktmonthcalendar-month-title-text {\n    font-size: 18px;\n    line-height: 23px;\n    font-weight: 600;\n    color: #000;\n    margin: 0px;\n    text-align: center;\n}\n\n.uktmonthcalendar-month-week {\n    flex: 0 0 auto;\n    display: grid;\n    grid-column-gap: 0px;\n    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));\n    grid-auto-flow: dense;\n    box-sizing: border-box;\n    padding-bottom: 12px;\n}\n\n.uktmonthcalendar-month-week .week-day-item {\n    flex: 1 1 auto;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n.uktmonthcalendar-month-week span.week-day-item-text {\n    text-align: center;\n    font-size: 13px;\n    line-height: 21px;\n    margin: 0px;\n    color: #9a9a9a;\n}\n\n.uktmonthcalendar-month-days {\n    flex: 1 1 auto;\n    display: flex;\n    flex-direction: column;\n}\n\n.uktmonthcalendar-month-row {\n    flex: 1 1 auto;\n    display: grid;\n    grid-column-gap: 0px;\n    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));\n    grid-auto-flow: dense;\n    margin-bottom: 1px;\n}\n\n.uktmonthcalendar-month-day-item {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    height: 46px;\n    width: 46px;\n    cursor: pointer;\n    border: none;\n    background-color: transparent;\n}\n\n.uktmonthcalendar-month-day-item:disabled {\n    cursor: auto;\n}\n\n.uktmonthcalendar-month-day-item.is-selected {\n    background-color: #f8f8f8;\n}\n\n.uktmonthcalendar-month-day-item.start-date {\n    background-color: #f8f8f8;\n    border-top-left-radius: 50%;\n    border-bottom-left-radius: 50%;\n}\n\n.uktmonthcalendar-month-day-item.start-date:after {\n    background-color: #000;\n    opacity: 1;\n    visibility: visible;\n}\n.uktmonthcalendar-month-day-item.start-date span.month-day-item-text {\n    color: #fff;\n}\n\n.uktmonthcalendar-month-day-item.end-date {\n    background-color: #f8f8f8;\n    border-top-right-radius: 50%;\n    border-bottom-right-radius: 50%;\n}\n\n.uktmonthcalendar-month-day-item.end-date:after {\n    background-color: #000;\n    opacity: 1;\n    visibility: visible;\n}\n.uktmonthcalendar-month-day-item.end-date span.month-day-item-text {\n    color: #fff;\n}\n\n.uktmonthcalendar-month-day-item:hover:after {\n    opacity: 1;\n    visibility: visible;\n}\n\n.uktmonthcalendar-month-day-item:after {\n    content: \"\";\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    pointer-events: none;\n    border-radius: 50%;\n    border: 1px solid #000;\n    width: 43px;\n    height: 43px;\n    transition: opacity 0.25s ease-in-out;\n    opacity: 0;\n    visibility: hidden;\n}\n\n.uktmonthcalendar-month-day-item.is-empty:after {\n    content: none;\n}\n\n.uktmonthcalendar-month-day-item span.month-day-item-text {\n    text-align: center;\n    font-size: 13px;\n    line-height: 21px;\n    margin: 0px;\n    color: #000;\n    position: relative;\n    z-index: 1;\n}\n";

package/dist/styles/month-calendar.js

@@ -151,4 +151,4 @@ h3.${ROOT_CLASS_NAME}-month-title-text {
     z-index: 1;
 }
 `;
-//# sourceMappingURL=month-calendar.js.map
+//# sourceMappingURL=month-calendar.js.map

package/dist/utils.d.ts

@@ -2,9 +2,5 @@ export declare const getMonthFromDate: (date: Date, asUTC?: boolean) => number;
 export declare const getYearFromMonth: (month: number) => number;
 export declare const getMonthNameFromMonth: (month: number) => string;
 export declare const getMonthAbbreviationFromMonth: (month: number) => string;
-export declare const getDateFromMonthAndDay: (
-    month: number,
-    day: number,
-    asUTC?: boolean,
-) => Date;
+export declare const getDateFromMonthAndDay: (month: number, day: number, asUTC?: boolean) => Date;
 export declare const getLastDateFromMonth: (month: number, asUTC?: boolean) => Date;

package/dist/utils.js

@@ -15,8 +15,7 @@ const MONTH_NAMES = [
     'November',
     'December',
 ];
-const getYearFromDate = (date, asUTC) =>
-    (asUTC ? date.getUTCFullYear() : date.getFullYear()) - START_YEAR;
+const getYearFromDate = (date, asUTC) => (asUTC ? date.getUTCFullYear() : date.getFullYear()) - START_YEAR;
 export const getMonthFromDate = (date, asUTC) => {
     const yearAsMonths = getYearFromDate(date, asUTC) * 12;
     return yearAsMonths + (asUTC ? date.getUTCMonth() : date.getMonth());
@@ -24,13 +23,16 @@ export const getMonthFromDate = (date, asUTC) => {
 export const getYearFromMonth = (month) => Math.floor(month / 12) + START_YEAR;
 export const getMonthNameFromMonth = (month) => {
     let index = month % 12;
-    if (Number.isNaN(index)) return '';
-    if (index < 0) index = 12 + index;
+    if (Number.isNaN(index))
+        return '';
+    if (index < 0)
+        index = 12 + index;
     return MONTH_NAMES[index];
 };
 export const getMonthAbbreviationFromMonth = (month) => {
     const monthName = getMonthNameFromMonth(month);
-    if (monthName === 'September') return 'Sept';
+    if (monthName === 'September')
+        return 'Sept';
     return monthName.substring(0, 3);
 };
 export const getDateFromMonthAndDay = (month, day, asUTC) => {
@@ -44,4 +46,4 @@ export const getLastDateFromMonth = (month, asUTC) => {
     // day 0 of the next month is the last day of the current month
     return getDateFromMonthAndDay(month + 1, 0, asUTC);
 };
-//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for utils
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 
@@ -10,8 +10,11 @@ declare export var getYearFromMonth: (month: number) => number;
 declare export var getMonthNameFromMonth: (month: number) => string;
 declare export var getMonthAbbreviationFromMonth: (month: number) => string;
 declare export var getDateFromMonthAndDay: (
-    month: number,
-    day: number,
-    asUTC?: boolean,
+  month: number,
+  day: number,
+  asUTC?: boolean
+) => Date;
+declare export var getLastDateFromMonth: (
+  month: number,
+  asUTC?: boolean
 ) => Date;
-declare export var getLastDateFromMonth: (month: number, asUTC?: boolean) => Date;

package/dist/utils.test.js

@@ -1,11 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import {
-    getDateFromMonthAndDay,
-    getLastDateFromMonth,
-    getMonthFromDate,
-    getMonthNameFromMonth,
-    getYearFromMonth,
-} from './utils.js';
+import { getDateFromMonthAndDay, getLastDateFromMonth, getMonthFromDate, getMonthNameFromMonth, getYearFromMonth, } from './utils.js';
 const INVALID_DATE = new Date('');
 describe('@acusti/date-picker', () => {
     describe('utils', () => {
@@ -23,9 +17,7 @@ describe('@acusti/date-picker', () => {
                 expect(getMonthFromDate(date, true)).toBe(0);
                 // if test is run in a timezone behind UTC, ommitting asUTC returns -1
                 // if not, the month should be the same with or without asUTC flag
-                expect(getMonthFromDate(date)).toBe(
-                    date.getTimezoneOffset() >= 60 ? -1 : 0,
-                );
+                expect(getMonthFromDate(date)).toBe(date.getTimezoneOffset() >= 60 ? -1 : 0);
             });
             it('returns NaN for an Invalid Date', () => {
                 expect(getMonthFromDate(INVALID_DATE)).toBe(NaN);
@@ -33,20 +25,12 @@ describe('@acusti/date-picker', () => {
         });
         describe('getYearFromMonth', () => {
             it('returns the correct year for a post-unix epoch date', () => {
-                expect(getYearFromMonth(getMonthFromDate(new Date(1970, 0, 1)))).toBe(
-                    1970,
-                );
-                expect(getYearFromMonth(getMonthFromDate(new Date(2048, 4, 31)))).toBe(
-                    2048,
-                );
+                expect(getYearFromMonth(getMonthFromDate(new Date(1970, 0, 1)))).toBe(1970);
+                expect(getYearFromMonth(getMonthFromDate(new Date(2048, 4, 31)))).toBe(2048);
             });
             it('returns the correct year digit for a pre-unix epoch date', () => {
-                expect(getYearFromMonth(getMonthFromDate(new Date(1970, 0, 0)))).toBe(
-                    1969,
-                );
-                expect(getYearFromMonth(getMonthFromDate(new Date(100, 11, 31)))).toBe(
-                    100,
-                );
+                expect(getYearFromMonth(getMonthFromDate(new Date(1970, 0, 0)))).toBe(1969);
+                expect(getYearFromMonth(getMonthFromDate(new Date(100, 11, 31)))).toBe(100);
             });
             it('returns NaN for an Invalid Date', () => {
                 expect(getYearFromMonth(getMonthFromDate(INVALID_DATE))).toBe(NaN);
@@ -54,14 +38,10 @@ describe('@acusti/date-picker', () => {
         });
         describe('getMonthNameFromMonth', () => {
             it('returns the correct month name for a post-unix epoch month', () => {
-                expect(
-                    getMonthNameFromMonth(getMonthFromDate(new Date(2023, 5, 19))),
-                ).toBe('June');
+                expect(getMonthNameFromMonth(getMonthFromDate(new Date(2023, 5, 19)))).toBe('June');
             });
             it('returns the correct month name for a pre-unix epoch month', () => {
-                expect(
-                    getMonthNameFromMonth(getMonthFromDate(new Date(1865, 5, 2))),
-                ).toBe('June');
+                expect(getMonthNameFromMonth(getMonthFromDate(new Date(1865, 5, 2)))).toBe('June');
             });
             it('returns an empty string if given NaN (e.g. if dealing with an Invalid Date)', () => {
                 expect(getMonthNameFromMonth(getMonthFromDate(INVALID_DATE))).toBe('');
@@ -69,76 +49,40 @@ describe('@acusti/date-picker', () => {
         });
         describe('getDateFromMonthAndDay', () => {
             it('returns the date of the specified day for a post-unix epoch month', () => {
-                expect(
-                    getDateFromMonthAndDay(getMonthFromDate(new Date(2008, 2, 13)), 1),
-                ).toEqual(new Date(2008, 2, 1));
-                expect(
-                    getDateFromMonthAndDay(getMonthFromDate(new Date(1999, 11, 1)), 31),
-                ).toEqual(new Date(1999, 11, 31));
-                expect(
-                    getDateFromMonthAndDay(getMonthFromDate(new Date(2000, 0, 0)), 31),
-                ).toEqual(new Date(1999, 11, 31));
+                expect(getDateFromMonthAndDay(getMonthFromDate(new Date(2008, 2, 13)), 1)).toEqual(new Date(2008, 2, 1));
+                expect(getDateFromMonthAndDay(getMonthFromDate(new Date(1999, 11, 1)), 31)).toEqual(new Date(1999, 11, 31));
+                expect(getDateFromMonthAndDay(getMonthFromDate(new Date(2000, 0, 0)), 31)).toEqual(new Date(1999, 11, 31));
             });
             it('returns the correct date for a pre-unix epoch month', () => {
-                expect(
-                    getDateFromMonthAndDay(getMonthFromDate(new Date(1865, 5, 2)), 30),
-                ).toEqual(new Date(1865, 5, 30));
-                expect(
-                    getDateFromMonthAndDay(getMonthFromDate(new Date(101, 0, 0)), 1),
-                ).toEqual(new Date(100, 11, 1));
+                expect(getDateFromMonthAndDay(getMonthFromDate(new Date(1865, 5, 2)), 30)).toEqual(new Date(1865, 5, 30));
+                expect(getDateFromMonthAndDay(getMonthFromDate(new Date(101, 0, 0)), 1)).toEqual(new Date(100, 11, 1));
             });
             it('returns date for start of day as UTC time if asUTC is true', () => {
-                expect(
-                    getDateFromMonthAndDay(
-                        getMonthFromDate(new Date(1865, 5, 2)),
-                        30,
-                        true,
-                    ),
-                ).toEqual(new Date(Date.UTC(1865, 5, 30)));
-                expect(
-                    getDateFromMonthAndDay(
-                        getMonthFromDate(new Date(101, 0, 0)),
-                        1,
-                        true,
-                    ),
-                ).toEqual(new Date(Date.UTC(100, 11, 1)));
+                expect(getDateFromMonthAndDay(getMonthFromDate(new Date(1865, 5, 2)), 30, true)).toEqual(new Date(Date.UTC(1865, 5, 30)));
+                expect(getDateFromMonthAndDay(getMonthFromDate(new Date(101, 0, 0)), 1, true)).toEqual(new Date(Date.UTC(100, 11, 1)));
             });
             it('returns an invalid date if given NaN (e.g. if dealing with an Invalid Date)', () => {
-                expect(getDateFromMonthAndDay(getMonthFromDate(INVALID_DATE), 1)).toEqual(
-                    INVALID_DATE,
-                );
+                expect(getDateFromMonthAndDay(getMonthFromDate(INVALID_DATE), 1)).toEqual(INVALID_DATE);
             });
         });
         describe('getLastDateFromMonth', () => {
             it('returns the date of the last day for a post-unix epoch month', () => {
-                expect(
-                    getLastDateFromMonth(getMonthFromDate(new Date(2008, 2, 13))),
-                ).toEqual(new Date(2008, 2, 31));
+                expect(getLastDateFromMonth(getMonthFromDate(new Date(2008, 2, 13)))).toEqual(new Date(2008, 2, 31));
                 // february in a leap year
-                expect(
-                    getLastDateFromMonth(getMonthFromDate(new Date(2024, 1, 23))),
-                ).toEqual(new Date(2024, 1, 29));
+                expect(getLastDateFromMonth(getMonthFromDate(new Date(2024, 1, 23)))).toEqual(new Date(2024, 1, 29));
                 // february in a non-leap year
-                expect(
-                    getLastDateFromMonth(getMonthFromDate(new Date(1985, 1, 1))),
-                ).toEqual(new Date(1985, 1, 28));
+                expect(getLastDateFromMonth(getMonthFromDate(new Date(1985, 1, 1)))).toEqual(new Date(1985, 1, 28));
             });
             it('returns the correct date for a pre-unix epoch month', () => {
-                expect(
-                    getLastDateFromMonth(getMonthFromDate(new Date(1865, 5, 2))),
-                ).toEqual(new Date(1865, 5, 30));
+                expect(getLastDateFromMonth(getMonthFromDate(new Date(1865, 5, 2)))).toEqual(new Date(1865, 5, 30));
             });
             it('returns date for start of day as UTC time if asUTC is true', () => {
-                expect(
-                    getLastDateFromMonth(getMonthFromDate(new Date(1865, 5, 2)), true),
-                ).toEqual(new Date(Date.UTC(1865, 5, 30)));
+                expect(getLastDateFromMonth(getMonthFromDate(new Date(1865, 5, 2)), true)).toEqual(new Date(Date.UTC(1865, 5, 30)));
             });
             it('returns an invalid date if given NaN (e.g. if dealing with an Invalid Date)', () => {
-                expect(getLastDateFromMonth(getMonthFromDate(INVALID_DATE))).toEqual(
-                    INVALID_DATE,
-                );
+                expect(getLastDateFromMonth(getMonthFromDate(INVALID_DATE))).toEqual(INVALID_DATE);
             });
         });
     });
 });
-//# sourceMappingURL=utils.test.js.map
+//# sourceMappingURL=utils.test.js.map

package/dist/utils.test.js.flow

@@ -1,6 +1,6 @@
 /**
  * Flowtype definitions for utils.test
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@acusti/date-picker",
-    "version": "0.8.1",
+    "version": "0.10.0",
     "type": "module",
     "sideEffects": false,
     "exports": "./dist/index.js",
@@ -43,17 +43,17 @@
     "homepage": "https://github.com/acusti/uikit/tree/main/packages/date-picker#readme",
     "devDependencies": {
         "@testing-library/dom": "^10.4.0",
-        "@testing-library/react": "^16.1.0",
-        "@testing-library/user-event": "^14.5.2",
-        "@types/react": "^19.0.2",
-        "happy-dom": "^15.11.7",
+        "@testing-library/react": "^16.3.0",
+        "@testing-library/user-event": "^14.6.1",
+        "@types/react": "^19.1.1",
+        "happy-dom": "^17.4.4",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
-        "typescript": "5.7.3",
-        "vitest": "^2.1.8"
+        "typescript": "5.8.3",
+        "vitest": "^3.1.1"
     },
     "dependencies": {
-        "@acusti/styling": "^1.0.1",
+        "@acusti/styling": "^0.7.2 || ^1.1.0",
         "clsx": "^2"
     },
     "peerDependencies": {