@macive/ui 0.0.12 → 0.0.14

package/dist/src/components/CheckboxTree/updateItemStates.js

@@ -17,23 +17,23 @@ const updateItemStates = (oldState, items, clickedId) => {
             return;
         const childIds = items.filter((i) => i.parentId === parent.id).map((i) => i.id);
         const childStates = childIds.map((childId) => getItemState(childId));
-        if (childStates.length === childStates.filter((s) => s === Tree_1.CheckboxState.CHECKED).length) {
+        if (childStates.length === childStates.filter((s) => s === Tree_1.CheckboxTreeState.CHECKED).length) {
             //@ts-expect-error
-            newState.find((i) => i.id === parent.id).state = Tree_1.CheckboxState.CHECKED;
+            newState.find((i) => i.id === parent.id).state = Tree_1.CheckboxTreeState.CHECKED;
         }
-        else if (childStates.length === childStates.filter((s) => s === Tree_1.CheckboxState.UNCHECKED).length) {
+        else if (childStates.length === childStates.filter((s) => s === Tree_1.CheckboxTreeState.UNCHECKED).length) {
             //@ts-expect-error
-            newState.find((i) => i.id === parent.id).state = Tree_1.CheckboxState.UNCHECKED;
+            newState.find((i) => i.id === parent.id).state = Tree_1.CheckboxTreeState.UNCHECKED;
         }
         else {
             //@ts-expect-error
-            newState.find((i) => i.id === parent.id).state = Tree_1.CheckboxState.INDETERMINATE;
+            newState.find((i) => i.id === parent.id).state = Tree_1.CheckboxTreeState.INDETERMINATE;
         }
         updateParent(parent.id);
     };
     const setUnchecked = (id) => {
         //@ts-expect-error
-        newState.find((i) => i.id === id).state = Tree_1.CheckboxState.UNCHECKED;
+        newState.find((i) => i.id === id).state = Tree_1.CheckboxTreeState.UNCHECKED;
         items
             .filter((i) => i.parentId === id)
             .map((i) => i.id)
@@ -42,7 +42,7 @@ const updateItemStates = (oldState, items, clickedId) => {
     };
     const setChecked = (id) => {
         //@ts-expect-error
-        newState.find((i) => i.id === id).state = Tree_1.CheckboxState.CHECKED;
+        newState.find((i) => i.id === id).state = Tree_1.CheckboxTreeState.CHECKED;
         items
             .filter((i) => i.parentId === id)
             .map((i) => i.id)
@@ -51,7 +51,7 @@ const updateItemStates = (oldState, items, clickedId) => {
     };
     // actual logic
     const itemState = getItemState(clickedId);
-    if (itemState === Tree_1.CheckboxState.CHECKED) {
+    if (itemState === Tree_1.CheckboxTreeState.CHECKED) {
         setUnchecked(clickedId);
     }
     else {

package/dist/src/components/Connected/Connected.classnames.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const ConnectedClassnames = {
     "Connected": "Connected-Connected",
     "Item": "Connected-Item",
-    "Item-primary": "Connected-primary",
-    "Item-focused": "Connected-focused",
-    "Item-left": "Connected-left",
-    "Item-right": "Connected-right",
-    "Item-connection": "Connected-connection"
+    "Item-primary": "Connected-Item-primary",
+    "Item-focused": "Connected-Item-focused",
+    "Item-left": "Connected-Item-left",
+    "Item-right": "Connected-Item-right",
+    "Item-connection": "Connected-Item-connection"
 };
 exports.default = ConnectedClassnames;

package/dist/src/components/DataTable/DataTable.classnames.js

@@ -4,13 +4,13 @@ const DataTableClassnames = {
     "TableWrapper": "DataTable-TableWrapper",
     "separate": "DataTable-separate",
     "StickyHeaderCell": "DataTable-StickyHeaderCell",
-    "Cell-separate": "DataTable-separate",
+    "Cell-separate": "DataTable-Cell-separate",
     "DataTable": "DataTable-DataTable",
     "condensed": "DataTable-condensed",
     "Navigation": "DataTable-Navigation",
     "IncreasedTableDensity": "DataTable-IncreasedTableDensity",
     "Pip": "DataTable-Pip",
-    "Pip-visible": "DataTable-visible",
+    "Pip-visible": "DataTable-Pip-visible",
     "ScrollContainer": "DataTable-ScrollContainer",
     "Table": "DataTable-Table",
     "TableRow": "DataTable-TableRow",
@@ -18,29 +18,29 @@ const DataTableClassnames = {
     "ZebraStripingOnData": "DataTable-ZebraStripingOnData",
     "RowCountIsEven": "DataTable-RowCountIsEven",
     "ShowTotalsInFooter": "DataTable-ShowTotalsInFooter",
-    "Cell-firstColumn": "DataTable-firstColumn",
-    "Cell-numeric": "DataTable-numeric",
-    "Cell-truncated": "DataTable-truncated",
-    "Cell-header": "DataTable-header",
-    "Cell-sortable": "DataTable-sortable",
-    "Heading-left": "DataTable-left",
-    "Cell-verticalAlignTop": "DataTable-verticalAlignTop",
-    "Cell-verticalAlignBottom": "DataTable-verticalAlignBottom",
-    "Cell-verticalAlignMiddle": "DataTable-verticalAlignMiddle",
-    "Cell-verticalAlignBaseline": "DataTable-verticalAlignBaseline",
+    "Cell-firstColumn": "DataTable-Cell-firstColumn",
+    "Cell-numeric": "DataTable-Cell-numeric",
+    "Cell-truncated": "DataTable-Cell-truncated",
+    "Cell-header": "DataTable-Cell-header",
+    "Cell-sortable": "DataTable-Cell-sortable",
+    "Heading-left": "DataTable-Heading-left",
+    "Cell-verticalAlignTop": "DataTable-Cell-verticalAlignTop",
+    "Cell-verticalAlignBottom": "DataTable-Cell-verticalAlignBottom",
+    "Cell-verticalAlignMiddle": "DataTable-Cell-verticalAlignMiddle",
+    "Cell-verticalAlignBaseline": "DataTable-Cell-verticalAlignBaseline",
     "hoverable": "DataTable-hoverable",
-    "Cell-hovered": "DataTable-hovered",
+    "Cell-hovered": "DataTable-Cell-hovered",
     "Icon": "DataTable-Icon",
     "Heading": "DataTable-Heading",
     "StickyHeaderEnabled": "DataTable-StickyHeaderEnabled",
     "StickyHeaderWrapper": "DataTable-StickyHeaderWrapper",
-    "Cell-sorted": "DataTable-sorted",
-    "Cell-total": "DataTable-total",
+    "Cell-sorted": "DataTable-Cell-sorted",
+    "Cell-total": "DataTable-Cell-total",
     "ShowTotals": "DataTable-ShowTotals",
-    "Cell-total-footer": "DataTable-total-footer",
+    "Cell-total-footer": "DataTable-Cell-total-footer",
     "Footer": "DataTable-Footer",
     "StickyHeaderInner": "DataTable-StickyHeaderInner",
-    "StickyHeaderInner-isSticky": "DataTable-isSticky",
+    "StickyHeaderInner-isSticky": "DataTable-StickyHeaderInner-isSticky",
     "StickyHeaderTable": "DataTable-StickyHeaderTable",
     "FixedFirstColumn": "DataTable-FixedFirstColumn",
     "StickyTableHeadingsRow": "DataTable-StickyTableHeadingsRow",

package/dist/src/components/DatePicker/DatePicker.classnames.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const DatePickerClassnames = {
+    "WeekHeadings": "DatePicker-WeekHeadings",
+    "DatePicker": "DatePicker-DatePicker",
+    "MonthLayout": "DatePicker-MonthLayout",
+    "MonthContainer": "DatePicker-MonthContainer",
+    "Month": "DatePicker-Month",
+    "Month-current": "DatePicker-Month-current",
+    "DayCell": "DatePicker-DayCell",
+    "DayCell-inRange": "DatePicker-DayCell-inRange",
+    "Day": "DatePicker-Day",
+    "Day-today": "DatePicker-Day-today",
+    "Day-inRange": "DatePicker-Day-inRange",
+    "Day-selected": "DatePicker-Day-selected",
+    "Day-disabled": "DatePicker-Day-disabled",
+    "EmptyDayCell": "DatePicker-EmptyDayCell",
+    "Weekday": "DatePicker-Weekday",
+    "Weekday-current": "DatePicker-Weekday-current",
+    "Header": "DatePicker-Header",
+    "Title": "DatePicker-Title",
+    "Day-firstInRange": "DatePicker-Day-firstInRange",
+    "Day-hasRange": "DatePicker-Day-hasRange",
+    "Day-hoverRight": "DatePicker-Day-hoverRight",
+    "Day-lastInRange": "DatePicker-Day-lastInRange",
+    "Week": "DatePicker-Week"
+};
+exports.default = DatePickerClassnames;

package/dist/src/components/DatePicker/DatePicker.js

@@ -0,0 +1,138 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Icons_1 = require("../Icons");
+const css_1 = require("../../utilities/css");
+const dates_1 = require("../../utilities/dates");
+const i18n_1 = require("../../utilities/i18n");
+const Button_1 = require("../Button");
+const components_1 = require("./components");
+const DatePicker_classnames_1 = __importDefault(require("./DatePicker.classnames"));
+const utilities_1 = require("./utilities");
+function DatePicker({ id, selected, month, year, allowRange, multiMonth, disableDatesBefore, disableDatesAfter, disableSpecificDates, weekStartsOn = 0, dayAccessibilityLabelPrefix, onMonthChange, onChange = noop, }) {
+    const i18n = (0, i18n_1.useI18n)();
+    const [hoverDate, setHoverDate] = (0, react_1.useState)(undefined);
+    const [focusDate, setFocusDate] = (0, react_1.useState)(undefined);
+    (0, react_1.useEffect)(() => {
+        setFocusDate(undefined);
+    }, [selected]);
+    const handleFocus = (0, react_1.useCallback)((date) => {
+        setFocusDate(date);
+    }, []);
+    const setFocusDateAndHandleMonthChange = (0, react_1.useCallback)((date) => {
+        if (onMonthChange) {
+            onMonthChange(date.getMonth(), date.getFullYear());
+        }
+        setHoverDate(date);
+        setFocusDate(date);
+    }, [onMonthChange]);
+    const handleDateSelection = (0, react_1.useCallback)((range) => {
+        const { end } = range;
+        setHoverDate(end);
+        setFocusDate(new Date(end));
+        onChange(range);
+    }, [onChange]);
+    const handleMonthChangeClick = (0, react_1.useCallback)((month, year) => {
+        if (!onMonthChange) {
+            return;
+        }
+        setFocusDate(undefined);
+        onMonthChange(month, year);
+    }, [onMonthChange]);
+    const handleHover = (0, react_1.useCallback)((date) => {
+        setHoverDate(date);
+    }, []);
+    const handleKeyUp = (0, react_1.useCallback)((event) => {
+        const { key } = event;
+        const range = deriveRange(selected);
+        const focusedDate = focusDate || (range && range.start);
+        if (focusedDate == null) {
+            return;
+        }
+        if (key === 'ArrowUp') {
+            const previousWeek = new Date(focusedDate);
+            previousWeek.setDate(focusedDate.getDate() - 7);
+            if (!((disableDatesBefore && (0, dates_1.isDateBefore)(previousWeek, disableDatesBefore)) ||
+                (disableSpecificDates && (0, dates_1.isDateDisabled)(previousWeek, disableSpecificDates)))) {
+                setFocusDateAndHandleMonthChange(previousWeek);
+            }
+        }
+        if (key === 'ArrowDown') {
+            const nextWeek = new Date(focusedDate);
+            nextWeek.setDate(focusedDate.getDate() + 7);
+            if (!((disableDatesAfter && (0, dates_1.isDateAfter)(nextWeek, disableDatesAfter)) ||
+                (disableSpecificDates && (0, dates_1.isDateDisabled)(nextWeek, disableSpecificDates)))) {
+                setFocusDateAndHandleMonthChange(nextWeek);
+            }
+        }
+        if (key === 'ArrowRight') {
+            const tomorrow = new Date(focusedDate);
+            tomorrow.setDate(focusedDate.getDate() + 1);
+            if (!((disableDatesAfter && (0, dates_1.isDateAfter)(tomorrow, disableDatesAfter)) ||
+                (disableSpecificDates && (0, dates_1.isDateDisabled)(tomorrow, disableSpecificDates)))) {
+                setFocusDateAndHandleMonthChange(tomorrow);
+            }
+        }
+        if (key === 'ArrowLeft') {
+            const yesterday = new Date(focusedDate);
+            yesterday.setDate(focusedDate.getDate() - 1);
+            if (!((disableDatesBefore && (0, dates_1.isDateBefore)(yesterday, disableDatesBefore)) ||
+                (disableSpecificDates && (0, dates_1.isDateDisabled)(yesterday, disableSpecificDates)))) {
+                setFocusDateAndHandleMonthChange(yesterday);
+            }
+        }
+    }, [
+        disableDatesAfter,
+        disableDatesBefore,
+        disableSpecificDates,
+        focusDate,
+        selected,
+        setFocusDateAndHandleMonthChange,
+    ]);
+    const showNextYear = (0, dates_1.getNextDisplayYear)(month, year);
+    const showNextMonth = (0, dates_1.getNextDisplayMonth)(month);
+    const showNextToNextYear = (0, dates_1.getNextDisplayYear)(showNextMonth, showNextYear);
+    const showNextToNextMonth = (0, dates_1.getNextDisplayMonth)(showNextMonth);
+    const showPreviousYear = (0, dates_1.getPreviousDisplayYear)(month, year);
+    const showPreviousMonth = (0, dates_1.getPreviousDisplayMonth)(month);
+    const previousMonthName = i18n.translate(`Macive.DatePicker.months.${(0, utilities_1.monthName)(showPreviousMonth)}`);
+    const nextMonth = multiMonth
+        ? i18n.translate(`Macive.DatePicker.months.${(0, utilities_1.monthName)(showNextToNextMonth)}`)
+        : i18n.translate(`Macive.DatePicker.months.${(0, utilities_1.monthName)(showNextMonth)}`);
+    const nextYear = multiMonth ? showNextToNextYear : showNextYear;
+    const monthIsSelected = (0, react_1.useMemo)(() => deriveRange(selected), [selected]);
+    const firstDatePickerAccessibilityLabelPrefix = allowRange
+        ? i18n.translate(`Macive.DatePicker.start`)
+        : dayAccessibilityLabelPrefix;
+    const secondDatePickerAccessibilityLabelPrefix = i18n.translate(`Macive.DatePicker.end`);
+    const accessibilityLabelPrefixes = [
+        firstDatePickerAccessibilityLabelPrefix,
+        secondDatePickerAccessibilityLabelPrefix,
+    ];
+    const secondDatePicker = multiMonth ? ((0, jsx_runtime_1.jsx)(components_1.Month, { onFocus: handleFocus, focusedDate: focusDate, month: showNextMonth, year: showNextYear, selected: monthIsSelected, hoverDate: hoverDate, onChange: handleDateSelection, onHover: handleHover, disableDatesBefore: disableDatesBefore, disableDatesAfter: disableDatesAfter, disableSpecificDates: disableSpecificDates, allowRange: allowRange, weekStartsOn: weekStartsOn, accessibilityLabelPrefixes: accessibilityLabelPrefixes })) : null;
+    const datePickerClassName = (0, css_1.classNames)(DatePicker_classnames_1.default.DatePicker);
+    return ((0, jsx_runtime_1.jsxs)("div", { id: id, className: datePickerClassName, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, children: [(0, jsx_runtime_1.jsxs)("div", { className: DatePicker_classnames_1.default.Header, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { plain: true, icon: Icons_1.MaArrowLeft, accessibilityLabel: i18n.translate('Macive.DatePicker.previousMonth', {
+                            previousMonthName,
+                            showPreviousYear,
+                        }), onClick: () => handleMonthChangeClick(showPreviousMonth, showPreviousYear) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { plain: true, icon: Icons_1.MaArrowRight, accessibilityLabel: i18n.translate('Macive.DatePicker.nextMonth', {
+                            nextMonth,
+                            nextYear,
+                        }), onClick: () => handleMonthChangeClick(showNextMonth, showNextYear) })] }), (0, jsx_runtime_1.jsxs)("div", { className: DatePicker_classnames_1.default.MonthLayout, children: [(0, jsx_runtime_1.jsx)(components_1.Month, { onFocus: handleFocus, focusedDate: focusDate, month: month, year: year, selected: deriveRange(selected), hoverDate: hoverDate, onChange: handleDateSelection, onHover: handleHover, disableDatesBefore: disableDatesBefore, disableDatesAfter: disableDatesAfter, disableSpecificDates: disableSpecificDates, allowRange: allowRange, weekStartsOn: weekStartsOn, accessibilityLabelPrefixes: accessibilityLabelPrefixes }), secondDatePicker] })] }));
+}
+exports.DatePicker = DatePicker;
+function noop() { }
+function handleKeyDown(event) {
+    const { key } = event;
+    if (key === 'ArrowUp' || key === 'ArrowDown' || key === 'ArrowLeft' || key === 'ArrowRight') {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+}
+function deriveRange(selected) {
+    return selected instanceof Date ? { start: selected, end: selected } : selected;
+}

package/dist/src/components/DatePicker/components/Day/Day.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Day = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const css_1 = require("../../../../utilities/css");
+const dates_1 = require("../../../../utilities/dates");
+const i18n_1 = require("../../../../utilities/i18n");
+const DatePicker_classnames_1 = __importDefault(require("../../DatePicker.classnames"));
+const utilities_1 = require("../../utilities");
+exports.Day = (0, react_1.memo)(function Day({ day, focused, onClick, onHover = noop, onFocus = noop, selected, inRange, inHoveringRange, disabled, lastDayOfMonth, isLastSelectedDay, isFirstSelectedDay, isHoveringRight, rangeIsDifferent, weekday, selectedAccessibilityLabelPrefix, }) {
+    const i18n = (0, i18n_1.useI18n)();
+    const dayNode = (0, react_1.useRef)(null);
+    const hoverValue = lastDayOfMonth || day;
+    (0, react_1.useEffect)(() => {
+        if (focused && dayNode.current) {
+            dayNode.current.focus();
+        }
+    }, [focused]);
+    if (!day) {
+        return (0, jsx_runtime_1.jsx)("td", { className: DatePicker_classnames_1.default.EmptyDayCell, onMouseOver: () => onHover(hoverValue) });
+    }
+    const handleClick = onClick && !disabled ? onClick.bind(null, day) : noop;
+    const today = (0, dates_1.isSameDay)(new Date(), day);
+    const dayCellClassName = (0, css_1.classNames)(DatePicker_classnames_1.default.DayCell, 
+    //@ts-expect-error
+    selected && DatePicker_classnames_1.default['DayCell-selected'], (inRange || inHoveringRange) && !disabled && DatePicker_classnames_1.default['DayCell-inRange'], 
+    //@ts-expect-error
+    isLastSelectedDay && DatePicker_classnames_1.default['DayCell-lastInRange'], 
+    //@ts-expect-error
+    isFirstSelectedDay && DatePicker_classnames_1.default['DayCell-firstInRange'], 
+    //@ts-expect-error
+    isHoveringRight && DatePicker_classnames_1.default['DayCell-hoverRight'], 
+    //@ts-expect-error
+    rangeIsDifferent && DatePicker_classnames_1.default['DayCell-hasRange']);
+    const dayClassName = (0, css_1.classNames)(DatePicker_classnames_1.default.Day, selected && DatePicker_classnames_1.default['Day-selected'], disabled && DatePicker_classnames_1.default['Day-disabled'], today && DatePicker_classnames_1.default['Day-today'], (inRange || inHoveringRange) && !disabled && DatePicker_classnames_1.default['Day-inRange'], isLastSelectedDay && DatePicker_classnames_1.default['Day-lastInRange'], isFirstSelectedDay && DatePicker_classnames_1.default['Day-firstInRange'], isHoveringRight && DatePicker_classnames_1.default['Day-hoverRight'], rangeIsDifferent && DatePicker_classnames_1.default['Day-hasRange']);
+    const date = day.getDate();
+    const tabIndex = (focused || selected || today || date === 1) && !disabled ? 0 : -1;
+    const ariaLabel = [
+        selected && selectedAccessibilityLabelPrefix ? `${selectedAccessibilityLabelPrefix} ` : '',
+        `${today ? i18n.translate('Macive.DatePicker.today') : ''}`,
+        `${weekday ? weekday : ''} `,
+        `${i18n.translate(`Macive.DatePicker.months.${(0, utilities_1.monthName)(day.getMonth())}`)} `,
+        `${date} `,
+        `${day.getFullYear()}`,
+    ].join('');
+    return ((0, jsx_runtime_1.jsx)("td", { className: dayCellClassName, children: (0, jsx_runtime_1.jsx)("button", { onFocus: () => onFocus(day), type: 'button', ref: dayNode, tabIndex: tabIndex, className: dayClassName, onMouseOver: () => onHover(hoverValue), onClick: handleClick, "aria-label": ariaLabel, "aria-disabled": disabled, "aria-pressed": selected, children: date }) }));
+});
+function noop() { }

package/dist/src/components/DatePicker/components/Day/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Day"), exports);

package/dist/src/components/DatePicker/components/Month/Month.js

@@ -0,0 +1,82 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Month = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const css_1 = require("../../../../utilities/css");
+const dates_1 = require("../../../../utilities/dates");
+const i18n_1 = require("../../../../utilities/i18n");
+const DatePicker_classnames_1 = __importDefault(require("../../DatePicker.classnames"));
+const utilities_1 = require("../../utilities");
+const Day_1 = require("../Day");
+const Weekday_1 = require("../Weekday");
+function Month({ focusedDate, selected, hoverDate, disableDatesBefore, disableDatesAfter, disableSpecificDates, allowRange, onChange = noop, onHover = noop, onFocus = noop, month, year, weekStartsOn, accessibilityLabelPrefixes, }) {
+    const i18n = (0, i18n_1.useI18n)();
+    const isInHoveringRange = allowRange ? hoveringDateIsInRange : () => false;
+    const now = new Date();
+    const current = now.getMonth() === month && now.getFullYear() === year;
+    const className = (0, css_1.classNames)(DatePicker_classnames_1.default.Title, current && DatePicker_classnames_1.default['Month-current']);
+    const weeks = (0, react_1.useMemo)(() => (0, dates_1.getWeeksForMonth)(month, year, weekStartsOn), [month, weekStartsOn, year]);
+    const weekdays = (0, dates_1.getOrderedWeekdays)(weekStartsOn).map((weekday) => ((0, jsx_runtime_1.jsx)(Weekday_1.Weekday, { title: i18n.translate(`Macive.DatePicker.daysAbbreviated.${(0, utilities_1.weekdayName)(weekday)}`), label: weekdayLabel(weekday), current: current && new Date().getDay() === weekday }, weekday)));
+    const handleDateClick = (0, react_1.useCallback)((selectedDate) => {
+        onChange((0, dates_1.getNewRange)(allowRange ? selected : undefined, selectedDate));
+    }, [allowRange, onChange, selected]);
+    const lastDayOfMonth = (0, react_1.useMemo)(() => new Date(year, month + 1, 0), [month, year]);
+    function renderWeek(day, dayIndex) {
+        if (day == null) {
+            return (0, jsx_runtime_1.jsx)(Day_1.Day, { onHover: onHover, lastDayOfMonth: lastDayOfMonth }, dayIndex);
+        }
+        const disabled = (disableDatesBefore && (0, dates_1.isDateBefore)(day, disableDatesBefore)) ||
+            (disableDatesAfter && (0, dates_1.isDateAfter)(day, disableDatesAfter)) ||
+            (disableSpecificDates && (0, dates_1.isDateDisabled)(day, disableSpecificDates));
+        const isFirstSelectedDay = allowRange && selected && isDateStart(day, selected);
+        const isLastSelectedDay = allowRange &&
+            selected &&
+            ((!(0, dates_1.isSameDay)(selected.start, selected.end) && isDateEnd(day, selected)) ||
+                (hoverDate &&
+                    (0, dates_1.isSameDay)(selected.start, selected.end) &&
+                    (0, dates_1.isDateAfter)(hoverDate, selected.start) &&
+                    (0, dates_1.isSameDay)(day, hoverDate) &&
+                    !isFirstSelectedDay));
+        const rangeIsDifferent = !(selected && (0, dates_1.isSameDay)(selected.start, selected.end));
+        const isHoveringRight = hoverDate && (0, dates_1.isDateBefore)(day, hoverDate);
+        const [firstAccessibilityLabelPrefix, lastAccessibilityLabelPrefix] = accessibilityLabelPrefixes;
+        let accessibilityLabelPrefix;
+        if ((allowRange && isFirstSelectedDay) || (!allowRange && firstAccessibilityLabelPrefix)) {
+            accessibilityLabelPrefix = firstAccessibilityLabelPrefix;
+        }
+        else if (allowRange && isLastSelectedDay) {
+            accessibilityLabelPrefix = lastAccessibilityLabelPrefix;
+        }
+        return ((0, jsx_runtime_1.jsx)(Day_1.Day, { selectedAccessibilityLabelPrefix: accessibilityLabelPrefix, weekday: weekdayLabel(dayIndex), focused: focusedDate != null && (0, dates_1.isSameDay)(day, focusedDate), day: day, onFocus: onFocus, onClick: handleDateClick, onHover: onHover, selected: selected != null && (0, dates_1.dateIsSelected)(day, selected), inRange: selected != null && (0, dates_1.dateIsInRange)(day, selected), disabled: disabled, inHoveringRange: selected != null && hoverDate != null && isInHoveringRange(day, selected, hoverDate), isLastSelectedDay: isLastSelectedDay, isFirstSelectedDay: isFirstSelectedDay, isHoveringRight: isHoveringRight, rangeIsDifferent: rangeIsDifferent }, dayIndex));
+    }
+    const weeksMarkup = weeks.map((week, index) => ((0, jsx_runtime_1.jsx)("tr", { className: DatePicker_classnames_1.default.Week, children: week.map(renderWeek) }, index)));
+    return ((0, jsx_runtime_1.jsx)("div", { className: DatePicker_classnames_1.default.MonthContainer, children: (0, jsx_runtime_1.jsxs)("table", { role: 'grid', className: DatePicker_classnames_1.default.Month, children: [(0, jsx_runtime_1.jsxs)("caption", { className: className, children: [i18n.translate(`Macive.DatePicker.months.${(0, utilities_1.monthName)(month)}`), " ", year] }), (0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { className: DatePicker_classnames_1.default.WeekHeadings, children: weekdays }) }), (0, jsx_runtime_1.jsx)("tbody", { children: weeksMarkup })] }) }));
+    function weekdayLabel(weekday) {
+        return i18n.translate(`Macive.DatePicker.days.${(0, utilities_1.weekdayName)(weekday)}`);
+    }
+}
+exports.Month = Month;
+function noop() { }
+function hoveringDateIsInRange(day, range, hoverEndDate) {
+    if (day == null) {
+        return false;
+    }
+    const { start, end } = range;
+    return Boolean((0, dates_1.isSameDay)(start, end) && day > start && day <= hoverEndDate);
+}
+function isDateEnd(day, range) {
+    if (day == null)
+        return false;
+    const { end } = range;
+    return Boolean(end && (0, dates_1.isSameDay)(end, day));
+}
+function isDateStart(day, range) {
+    if (day == null)
+        return false;
+    const { start } = range;
+    return Boolean(start && (0, dates_1.isSameDay)(start, day));
+}

package/dist/src/components/DatePicker/components/Month/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Month"), exports);

package/dist/src/components/DatePicker/components/Weekday/Weekday.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Weekday = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const css_1 = require("../../../../utilities/css");
+const DatePicker_classnames_1 = __importDefault(require("../../DatePicker.classnames"));
+exports.Weekday = (0, react_1.memo)(function Weekday({ label, title, current }) {
+    const className = (0, css_1.classNames)(DatePicker_classnames_1.default.Weekday, current && DatePicker_classnames_1.default['Weekday-current']);
+    return ((0, jsx_runtime_1.jsx)("th", { "aria-label": label, scope: 'col', className: className, children: title }));
+});

package/dist/src/components/DatePicker/components/Weekday/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Weekday"), exports);

package/dist/src/components/DatePicker/components/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Day"), exports);
+__exportStar(require("./Month"), exports);
+__exportStar(require("./Weekday"), exports);

package/dist/src/components/DatePicker/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DatePicker"), exports);

package/dist/src/components/DatePicker/utilities.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.weekdayName = exports.monthName = void 0;
+function monthName(month) {
+    switch (month) {
+        case 0:
+            return 'january';
+        case 1:
+            return 'february';
+        case 2:
+            return 'march';
+        case 3:
+            return 'april';
+        case 4:
+            return 'may';
+        case 5:
+            return 'june';
+        case 6:
+            return 'july';
+        case 7:
+            return 'august';
+        case 8:
+            return 'september';
+        case 9:
+            return 'october';
+        case 10:
+            return 'november';
+        case 11:
+            return 'december';
+    }
+}
+exports.monthName = monthName;
+function weekdayName(weekday) {
+    switch (weekday) {
+        case 0:
+            return 'sunday';
+        case 1:
+            return 'monday';
+        case 2:
+            return 'tuesday';
+        case 3:
+            return 'wednesday';
+        case 4:
+            return 'thursday';
+        case 5:
+            return 'friday';
+        case 6:
+            return 'saturday';
+    }
+}
+exports.weekdayName = weekdayName;