@zag-js/date-picker
Version:
Core logic for the date-picker widget implemented as a state machine
916 lines (914 loc) • 39.9 kB
JavaScript
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/date-picker.connect.ts
var date_picker_connect_exports = {};
__export(date_picker_connect_exports, {
connect: () => connect
});
module.exports = __toCommonJS(date_picker_connect_exports);
var import_date = require("@internationalized/date");
var import_date_utils = require("@zag-js/date-utils");
var import_dom_query = require("@zag-js/dom-query");
var import_popper = require("@zag-js/popper");
var import_utils = require("@zag-js/utils");
var import_date_picker = require("./date-picker.anatomy.js");
var dom = __toESM(require("./date-picker.dom.js"));
var import_date_picker2 = require("./date-picker.utils.js");
function connect(service, normalize) {
const { state, context, prop, send, computed, scope } = service;
const startValue = context.get("startValue");
const endValue = computed("endValue");
const selectedValue = context.get("value");
const focusedValue = context.get("focusedValue");
const hoveredValue = context.get("hoveredValue");
const hoveredRangeValue = hoveredValue ? (0, import_date_picker2.adjustStartAndEndDate)([selectedValue[0], hoveredValue]) : [];
const disabled = Boolean(prop("disabled"));
const readOnly = Boolean(prop("readOnly"));
const invalid = Boolean(prop("invalid"));
const interactive = computed("isInteractive");
const empty = selectedValue.length === 0;
const min = prop("min");
const max = prop("max");
const locale = prop("locale");
const timeZone = prop("timeZone");
const startOfWeek = prop("startOfWeek");
const focused = state.matches("focused");
const open = state.matches("open");
const isRangePicker = prop("selectionMode") === "range";
const isMultiPicker = prop("selectionMode") === "multiple";
const isDateUnavailableFn = prop("isDateUnavailable");
const maxSelectedDates = prop("maxSelectedDates");
const isMaxSelected = isMultiPicker && maxSelectedDates != null && selectedValue.length >= maxSelectedDates;
const currentPlacement = context.get("currentPlacement");
const currentPlacementSide = currentPlacement ? (0, import_popper.getPlacementSide)(currentPlacement) : void 0;
const popperStyles = (0, import_popper.getPlacementStyles)({
...prop("positioning"),
placement: currentPlacement
});
const separator = (0, import_date_utils.getLocaleSeparator)(locale);
const translations = { ...import_date_picker2.defaultTranslations, ...prop("translations") };
function getMonthWeeks(from = startValue) {
const numOfWeeks = prop("fixedWeeks") ? 6 : void 0;
return (0, import_date_utils.getMonthDays)(from, locale, numOfWeeks, startOfWeek);
}
function getMonths(props = {}) {
const { format } = props;
return (0, import_date_utils.getMonthNames)(locale, format, focusedValue).map((label, index) => {
const value = index + 1;
const dateValue = focusedValue.set({ month: value });
const disabled2 = (0, import_date_utils.isDateOutsideRange)(dateValue, min, max);
return { label, value, disabled: disabled2 };
});
}
function getYears() {
const defaultRange = (0, import_date_utils.getDefaultYearRange)(focusedValue, min, max);
const range = (0, import_date_utils.getYearsRange)(defaultRange);
return range.map((year) => ({
label: year.toString(),
value: year,
disabled: !(0, import_utils.isValueWithinRange)(year, min?.year, max?.year)
}));
}
function isUnavailable(date) {
return (0, import_date_utils.isDateUnavailable)(date, isDateUnavailableFn, locale, min, max);
}
function focusMonth(month) {
const date = startValue ?? (0, import_date_utils.getTodayDate)(timeZone, focusedValue.calendar);
send({ type: "FOCUS.SET", value: date.set({ month }) });
}
function focusYear(year) {
const date = startValue ?? (0, import_date_utils.getTodayDate)(timeZone, focusedValue.calendar);
send({ type: "FOCUS.SET", value: date.set({ year }) });
}
function getYearTableCellState(props) {
const { value, disabled: disabled2 } = props;
const dateValue = focusedValue.set({ year: value });
const decadeYears = (0, import_date_utils.getDecadeRange)(startValue.year, { strict: true });
const isOutsideVisibleRange = !decadeYears.includes(value);
const isWithinMinMax = (0, import_utils.isValueWithinRange)(value, min?.year, max?.year);
const isInSelectedRange = isRangePicker && (0, import_date_picker2.isDateWithinRange)(dateValue, selectedValue);
const isFirstInSelectedRange = isRangePicker && selectedValue[0] && (0, import_date.isEqualYear)(dateValue, selectedValue[0]);
const isLastInSelectedRange = isRangePicker && selectedValue[1] && (0, import_date.isEqualYear)(dateValue, selectedValue[1]);
const hasHoveredRange = isRangePicker && hoveredRangeValue.length > 0;
const isInHoveredRange = hasHoveredRange && (0, import_date_picker2.isDateWithinRange)(dateValue, hoveredRangeValue);
const isFirstInHoveredRange = hasHoveredRange && hoveredRangeValue[0] && (0, import_date.isEqualYear)(dateValue, hoveredRangeValue[0]);
const isLastInHoveredRange = hasHoveredRange && hoveredRangeValue[1] && (0, import_date.isEqualYear)(dateValue, hoveredRangeValue[1]);
const cellState = {
focused: focusedValue.year === props.value,
selectable: !isOutsideVisibleRange && isWithinMinMax,
outsideRange: isOutsideVisibleRange,
selected: !!selectedValue.find((date) => date && date.year === value),
valueText: value.toString(),
inRange: isInSelectedRange || isInHoveredRange,
firstInRange: !!isFirstInSelectedRange,
lastInRange: !!isLastInSelectedRange,
inHoveredRange: !!isInHoveredRange,
firstInHoveredRange: !!isFirstInHoveredRange,
lastInHoveredRange: !!isLastInHoveredRange,
value: dateValue,
get disabled() {
return disabled2 || !cellState.selectable;
}
};
return cellState;
}
function getMonthTableCellState(props) {
const { value, disabled: disabled2 } = props;
const dateValue = focusedValue.set({ month: value });
const formatter = (0, import_date_utils.getMonthFormatter)(locale, timeZone, focusedValue);
const isInSelectedRange = isRangePicker && (0, import_date_picker2.isDateWithinRange)(dateValue, selectedValue);
const isFirstInSelectedRange = isRangePicker && selectedValue[0] && (0, import_date.isEqualMonth)(dateValue, selectedValue[0]);
const isLastInSelectedRange = isRangePicker && selectedValue[1] && (0, import_date.isEqualMonth)(dateValue, selectedValue[1]);
const hasHoveredRange = isRangePicker && hoveredRangeValue.length > 0;
const isInHoveredRange = hasHoveredRange && (0, import_date_picker2.isDateWithinRange)(dateValue, hoveredRangeValue);
const isFirstInHoveredRange = hasHoveredRange && hoveredRangeValue[0] && (0, import_date.isEqualMonth)(dateValue, hoveredRangeValue[0]);
const isLastInHoveredRange = hasHoveredRange && hoveredRangeValue[1] && (0, import_date.isEqualMonth)(dateValue, hoveredRangeValue[1]);
const cellState = {
focused: focusedValue.month === props.value,
selectable: !(0, import_date_utils.isDateOutsideRange)(dateValue, min, max),
selected: !!selectedValue.find((date) => date && date.month === value && date.year === focusedValue.year),
valueText: formatter.format(dateValue.toDate(timeZone)),
inRange: isInSelectedRange || isInHoveredRange,
firstInRange: !!isFirstInSelectedRange,
lastInRange: !!isLastInSelectedRange,
inHoveredRange: !!isInHoveredRange,
firstInHoveredRange: !!isFirstInHoveredRange,
lastInHoveredRange: !!isLastInHoveredRange,
outsideRange: false,
value: dateValue,
get disabled() {
return disabled2 || !cellState.selectable;
}
};
return cellState;
}
function getDayTableCellState(props) {
const { value, disabled: disabled2, visibleRange = computed("visibleRange") } = props;
const formatter = (0, import_date_utils.getDayFormatter)(locale, timeZone, focusedValue);
const unitDuration = (0, import_date_utils.getUnitDuration)(computed("visibleDuration"));
const outsideDaySelectable = prop("outsideDaySelectable");
const end = visibleRange.start.add(unitDuration).subtract({ days: 1 });
const isOutsideRange = (0, import_date_utils.isDateOutsideRange)(value, visibleRange.start, end);
const isInSelectedRange = isRangePicker && (0, import_date_picker2.isDateWithinRange)(value, selectedValue);
const isFirstInSelectedRange = isRangePicker && selectedValue[0] && (0, import_date.isSameDay)(value, selectedValue[0]);
const isLastInSelectedRange = isRangePicker && selectedValue[1] && (0, import_date.isSameDay)(value, selectedValue[1]);
const hasHoveredRange = isRangePicker && hoveredRangeValue.length > 0;
const isInHoveredRange = hasHoveredRange && (0, import_date_picker2.isDateWithinRange)(value, hoveredRangeValue);
const isFirstInHoveredRange = hasHoveredRange && hoveredRangeValue[0] && (0, import_date.isSameDay)(value, hoveredRangeValue[0]);
const isLastInHoveredRange = hasHoveredRange && hoveredRangeValue[1] && (0, import_date.isSameDay)(value, hoveredRangeValue[1]);
const isSelected = selectedValue.some((date) => date != null && (0, import_date.isSameDay)(value, date));
const cellState = {
invalid: (0, import_date_utils.isDateOutsideRange)(value, min, max),
disabled: disabled2 || !outsideDaySelectable && isOutsideRange || (0, import_date_utils.isDateOutsideRange)(value, min, max) || // Disable unselected dates when max is reached in multiple selection mode
isMaxSelected && !isSelected,
selected: isSelected,
unavailable: (0, import_date_utils.isDateUnavailable)(value, isDateUnavailableFn, locale, min, max) && !disabled2,
outsideRange: isOutsideRange,
today: (0, import_date.isToday)(value, timeZone),
weekend: (0, import_date.isWeekend)(value, locale),
value,
valueText: formatter.format(value.toDate(timeZone)),
get focused() {
return focusedValue != null && (0, import_date.isSameDay)(value, focusedValue) && (!cellState.outsideRange || outsideDaySelectable);
},
get selectable() {
return !cellState.disabled && !cellState.unavailable;
},
// Range states
inRange: isInSelectedRange || isInHoveredRange,
firstInRange: isFirstInSelectedRange,
lastInRange: isLastInSelectedRange,
// Preview range states
inHoveredRange: isInHoveredRange,
firstInHoveredRange: isFirstInHoveredRange,
lastInHoveredRange: isLastInHoveredRange
};
return cellState;
}
function getTableId2(props) {
const { view = "day", id } = props;
return [view, id].filter(Boolean).join(" ");
}
return {
focused,
open,
disabled,
invalid,
readOnly,
inline: !!prop("inline"),
numOfMonths: prop("numOfMonths"),
showWeekNumbers: !!prop("showWeekNumbers"),
selectionMode: prop("selectionMode"),
maxSelectedDates,
isMaxSelected,
view: context.get("view"),
getRangePresetValue(preset) {
return (0, import_date_utils.getDateRangePreset)(preset, locale, timeZone);
},
getWeekNumber(week) {
const firstDay = week[0];
return firstDay ? (0, import_date_utils.getWeekOfYear)(firstDay, locale) : 0;
},
getDaysInWeek(week, from = startValue) {
return (0, import_date_utils.getDaysInWeek)(week, from, locale, startOfWeek);
},
getOffset(duration) {
const from = startValue.add(duration);
const end = endValue.add(duration);
const formatter = (0, import_date_utils.getMonthFormatter)(locale, timeZone, focusedValue);
return {
visibleRange: { start: from, end },
weeks: getMonthWeeks(from),
visibleRangeText: {
start: formatter.format(from.toDate(timeZone)),
end: formatter.format(end.toDate(timeZone))
}
};
},
getMonthWeeks,
isUnavailable,
weeks: getMonthWeeks(),
weekDays: (0, import_date_utils.getWeekDays)(startValue, startOfWeek, timeZone, locale),
visibleRangeText: computed("visibleRangeText"),
value: selectedValue,
valueAsDate: selectedValue.filter((date) => date != null).map((date) => date.toDate(timeZone)),
valueAsString: computed("valueAsString"),
focusedValue,
focusedValueAsDate: focusedValue?.toDate(timeZone),
focusedValueAsString: prop("format")(focusedValue, { locale, timeZone }),
visibleRange: computed("visibleRange"),
selectToday() {
const value = (0, import_date_utils.constrainValue)((0, import_date_utils.getTodayDate)(timeZone, focusedValue.calendar), min, max);
send({ type: "VALUE.SET", value: [value] });
},
setValue(values) {
const computedValue = values.map((date) => (0, import_date_utils.constrainValue)(date, min, max));
send({ type: "VALUE.SET", value: computedValue });
},
setTime(time, index = 0) {
const values = Array.from(selectedValue);
let dateValue = values[index];
if (!dateValue) return;
if (!("hour" in dateValue)) {
dateValue = (0, import_date.toCalendarDateTime)(dateValue);
}
dateValue = dateValue.set({
hour: time.hour ?? ("hour" in dateValue ? dateValue.hour : 0),
minute: time.minute ?? ("minute" in dateValue ? dateValue.minute : 0),
second: time.second ?? ("second" in dateValue ? dateValue.second : 0),
millisecond: time.millisecond ?? ("millisecond" in dateValue ? dateValue.millisecond : 0)
});
values[index] = (0, import_date_utils.constrainValue)(dateValue, min, max);
send({ type: "VALUE.SET", value: values });
},
clearValue(options = {}) {
const { focus = true } = options;
send({ type: "VALUE.CLEAR", focus });
},
setFocusedValue(value) {
send({ type: "FOCUS.SET", value });
},
setOpen(nextOpen) {
if (prop("inline")) return;
const open2 = state.matches("open");
if (open2 === nextOpen) return;
send({ type: nextOpen ? "OPEN" : "CLOSE" });
},
focusMonth,
focusYear,
getYears,
getMonths,
getYearsGrid(props = {}) {
const { columns = 1 } = props;
const years = (0, import_date_utils.getDecadeRange)(startValue.year, { strict: true }).map((year) => ({
label: year.toString(),
value: year,
disabled: !(0, import_utils.isValueWithinRange)(year, min?.year, max?.year)
}));
return (0, import_utils.chunk)(years, columns);
},
getDecade() {
const years = (0, import_date_utils.getDecadeRange)(startValue.year, { strict: true });
return { start: years.at(0), end: years.at(-1) };
},
getMonthsGrid(props = {}) {
const { columns = 1, format } = props;
return (0, import_utils.chunk)(getMonths({ format }), columns);
},
format(value, opts = { month: "long", year: "numeric" }) {
return new import_date.DateFormatter(locale, {
...opts,
calendar: value.calendar.identifier
}).format(value.toDate(timeZone));
},
setView(view) {
send({ type: "VIEW.SET", view });
},
goToNext() {
send({ type: "GOTO.NEXT", view: context.get("view") });
},
goToPrev() {
send({ type: "GOTO.PREV", view: context.get("view") });
},
getRootProps() {
return normalize.element({
...import_date_picker.parts.root.attrs,
dir: prop("dir"),
id: dom.getRootId(scope),
"data-state": open ? "open" : "closed",
"data-disabled": (0, import_dom_query.dataAttr)(disabled),
"data-readonly": (0, import_dom_query.dataAttr)(readOnly),
"data-empty": (0, import_dom_query.dataAttr)(empty)
});
},
getLabelProps(props = {}) {
const { index = 0 } = props;
return normalize.label({
...import_date_picker.parts.label.attrs,
id: dom.getLabelId(scope, index),
dir: prop("dir"),
htmlFor: dom.getInputId(scope, index),
"data-state": open ? "open" : "closed",
"data-index": index,
"data-disabled": (0, import_dom_query.dataAttr)(disabled),
"data-readonly": (0, import_dom_query.dataAttr)(readOnly)
});
},
getControlProps() {
return normalize.element({
...import_date_picker.parts.control.attrs,
dir: prop("dir"),
id: dom.getControlId(scope),
"data-disabled": (0, import_dom_query.dataAttr)(disabled),
"data-placeholder-shown": (0, import_dom_query.dataAttr)(empty)
});
},
getRangeTextProps() {
return normalize.element({
...import_date_picker.parts.rangeText.attrs,
dir: prop("dir")
});
},
getContentProps() {
return normalize.element({
...import_date_picker.parts.content.attrs,
hidden: !open,
dir: prop("dir"),
"data-state": open ? "open" : "closed",
"data-placement": currentPlacement,
"data-side": currentPlacementSide,
"data-inline": (0, import_dom_query.dataAttr)(prop("inline")),
id: dom.getContentId(scope),
tabIndex: -1,
role: "application",
"aria-roledescription": "datepicker",
"aria-label": translations.content
});
},
getTableProps(props = {}) {
const { view = "day", columns = view === "day" ? 7 : 4 } = props;
const uid = getTableId2(props);
return normalize.element({
...import_date_picker.parts.table.attrs,
role: "grid",
"data-columns": columns,
"aria-roledescription": (0, import_date_picker2.getRoleDescription)(view),
id: dom.getTableId(scope, uid),
"aria-readonly": (0, import_dom_query.ariaAttr)(readOnly),
"aria-disabled": (0, import_dom_query.ariaAttr)(disabled),
"aria-multiselectable": (0, import_dom_query.ariaAttr)(prop("selectionMode") !== "single"),
"data-view": view,
dir: prop("dir"),
tabIndex: -1,
onKeyDown(event) {
if (event.defaultPrevented) return;
const keyMap = {
Enter() {
if (view === "day" && isUnavailable(focusedValue)) return;
if (view === "month") {
const cellState = getMonthTableCellState({ value: focusedValue.month });
if (!cellState.selectable) return;
}
if (view === "year") {
const cellState = getYearTableCellState({ value: focusedValue.year });
if (!cellState.selectable) return;
}
send({ type: "TABLE.ENTER", view, columns, focus: true });
},
ArrowLeft() {
send({ type: "TABLE.ARROW_LEFT", view, columns, focus: true });
},
ArrowRight() {
send({ type: "TABLE.ARROW_RIGHT", view, columns, focus: true });
},
ArrowUp() {
send({ type: "TABLE.ARROW_UP", view, columns, focus: true });
},
ArrowDown() {
send({ type: "TABLE.ARROW_DOWN", view, columns, focus: true });
},
PageUp(event2) {
send({ type: "TABLE.PAGE_UP", larger: event2.shiftKey, view, columns, focus: true });
},
PageDown(event2) {
send({ type: "TABLE.PAGE_DOWN", larger: event2.shiftKey, view, columns, focus: true });
},
Home() {
send({ type: "TABLE.HOME", view, columns, focus: true });
},
End() {
send({ type: "TABLE.END", view, columns, focus: true });
}
};
const exec = keyMap[(0, import_dom_query.getEventKey)(event, {
dir: prop("dir")
})];
if (exec) {
exec(event);
event.preventDefault();
event.stopPropagation();
}
},
onPointerLeave() {
send({ type: "TABLE.POINTER_LEAVE" });
},
onPointerDown() {
send({ type: "TABLE.POINTER_DOWN", view });
},
onPointerUp() {
send({ type: "TABLE.POINTER_UP", view });
}
});
},
getTableHeadProps(props = {}) {
const { view = "day" } = props;
return normalize.element({
...import_date_picker.parts.tableHead.attrs,
"aria-hidden": true,
dir: prop("dir"),
"data-view": view,
"data-disabled": (0, import_dom_query.dataAttr)(disabled)
});
},
getTableHeaderProps(props = {}) {
const { view = "day" } = props;
return normalize.element({
...import_date_picker.parts.tableHeader.attrs,
dir: prop("dir"),
"data-view": view,
"data-disabled": (0, import_dom_query.dataAttr)(disabled)
});
},
getTableBodyProps(props = {}) {
const { view = "day" } = props;
return normalize.element({
...import_date_picker.parts.tableBody.attrs,
"data-view": view,
"data-disabled": (0, import_dom_query.dataAttr)(disabled)
});
},
getTableRowProps(props = {}) {
const { view = "day" } = props;
return normalize.element({
...import_date_picker.parts.tableRow.attrs,
"aria-disabled": (0, import_dom_query.ariaAttr)(disabled),
"data-disabled": (0, import_dom_query.dataAttr)(disabled),
"data-view": view
});
},
getWeekNumberHeaderCellProps(props = {}) {
const { view = "day" } = props;
return normalize.element({
...import_date_picker.parts.tableCell.attrs,
scope: "col",
"aria-label": translations.weekColumnHeader,
"data-view": view,
"data-type": "week-number",
"data-disabled": (0, import_dom_query.dataAttr)(disabled)
});
},
getWeekNumberCellProps(props) {
const { weekIndex, week } = props;
const weekNumber = week[0] ? (0, import_date_utils.getWeekOfYear)(week[0], locale) : 0;
return normalize.element({
...import_date_picker.parts.tableCell.attrs,
role: "rowheader",
"aria-label": translations.weekNumberCell?.(weekNumber),
"data-view": "day",
"data-week-index": weekIndex,
"data-type": "week-number",
"data-disabled": (0, import_dom_query.dataAttr)(disabled)
});
},
getDayTableCellState,
getDayTableCellProps(props) {
const { value } = props;
const cellState = getDayTableCellState(props);
return normalize.element({
...import_date_picker.parts.tableCell.attrs,
role: "gridcell",
"aria-disabled": (0, import_dom_query.ariaAttr)(!cellState.selectable),
"aria-selected": cellState.selected || cellState.inRange,
"aria-invalid": (0, import_dom_query.ariaAttr)(cellState.invalid),
"aria-current": cellState.today ? "date" : void 0,
"data-value": value.toString()
});
},
getDayTableCellTriggerProps(props) {
const { value } = props;
const cellState = getDayTableCellState(props);
return normalize.element({
...import_date_picker.parts.tableCellTrigger.attrs,
id: dom.getCellTriggerId(scope, value.toString()),
role: "button",
dir: prop("dir"),
tabIndex: cellState.focused ? 0 : -1,
"aria-label": translations.dayCell(cellState),
"aria-disabled": (0, import_dom_query.ariaAttr)(!cellState.selectable),
"aria-invalid": (0, import_dom_query.ariaAttr)(cellState.invalid),
"data-disabled": (0, import_dom_query.dataAttr)(!cellState.selectable),
"data-selectable": (0, import_dom_query.dataAttr)(cellState.selectable),
"data-selected": (0, import_dom_query.dataAttr)(cellState.selected),
"data-value": value.toString(),
"data-view": "day",
"data-today": (0, import_dom_query.dataAttr)(cellState.today),
"data-focus": (0, import_dom_query.dataAttr)(cellState.focused),
"data-unavailable": (0, import_dom_query.dataAttr)(cellState.unavailable),
"data-range-start": (0, import_dom_query.dataAttr)(cellState.firstInRange),
"data-range-end": (0, import_dom_query.dataAttr)(cellState.lastInRange),
"data-in-range": (0, import_dom_query.dataAttr)(cellState.inRange),
"data-outside-range": (0, import_dom_query.dataAttr)(cellState.outsideRange),
"data-weekend": (0, import_dom_query.dataAttr)(cellState.weekend),
"data-in-hover-range": (0, import_dom_query.dataAttr)(cellState.inHoveredRange),
"data-hover-range-start": (0, import_dom_query.dataAttr)(cellState.firstInHoveredRange),
"data-hover-range-end": (0, import_dom_query.dataAttr)(cellState.lastInHoveredRange),
onClick(event) {
if (event.defaultPrevented) return;
if (!cellState.selectable) return;
send({ type: "CELL.CLICK", cell: "day", value });
},
onPointerMove: isRangePicker ? (event) => {
if (event.pointerType === "touch") return;
if (!cellState.selectable) return;
const focus = !scope.isActiveElement(event.currentTarget);
if (hoveredValue && (0, import_date.isEqualDay)(value, hoveredValue)) return;
send({
type: "CELL.POINTER_MOVE",
cell: "day",
value,
focus,
outsideRange: cellState.outsideRange
});
} : void 0
});
},
getMonthTableCellState,
getMonthTableCellProps(props) {
const { value, columns } = props;
const cellState = getMonthTableCellState(props);
return normalize.element({
...import_date_picker.parts.tableCell.attrs,
dir: prop("dir"),
colSpan: columns,
role: "gridcell",
"aria-selected": (0, import_dom_query.ariaAttr)(cellState.selected || cellState.inRange),
"data-selected": (0, import_dom_query.dataAttr)(cellState.selected),
"aria-disabled": (0, import_dom_query.ariaAttr)(!cellState.selectable),
"data-value": value
});
},
getMonthTableCellTriggerProps(props) {
const { value } = props;
const cellState = getMonthTableCellState(props);
return normalize.element({
...import_date_picker.parts.tableCellTrigger.attrs,
id: dom.getCellTriggerId(scope, value.toString()),
role: "button",
dir: prop("dir"),
tabIndex: cellState.focused ? 0 : -1,
"aria-label": cellState.valueText,
"aria-disabled": (0, import_dom_query.ariaAttr)(!cellState.selectable),
"data-disabled": (0, import_dom_query.dataAttr)(!cellState.selectable),
"data-selectable": (0, import_dom_query.dataAttr)(cellState.selectable),
"data-selected": (0, import_dom_query.dataAttr)(cellState.selected),
"data-value": value,
"data-view": "month",
"data-focus": (0, import_dom_query.dataAttr)(cellState.focused),
"data-outside-range": (0, import_dom_query.dataAttr)(cellState.outsideRange),
"data-range-start": (0, import_dom_query.dataAttr)(cellState.firstInRange),
"data-range-end": (0, import_dom_query.dataAttr)(cellState.lastInRange),
"data-in-range": (0, import_dom_query.dataAttr)(cellState.inRange),
"data-in-hover-range": (0, import_dom_query.dataAttr)(cellState.inHoveredRange),
"data-hover-range-start": (0, import_dom_query.dataAttr)(cellState.firstInHoveredRange),
"data-hover-range-end": (0, import_dom_query.dataAttr)(cellState.lastInHoveredRange),
onClick(event) {
if (event.defaultPrevented) return;
if (!cellState.selectable) return;
send({ type: "CELL.CLICK", cell: "month", value });
},
onPointerMove: isRangePicker ? (event) => {
if (event.pointerType === "touch") return;
if (!cellState.selectable) return;
const focus = !scope.isActiveElement(event.currentTarget);
if (hoveredValue && cellState.value && (0, import_date.isEqualMonth)(cellState.value, hoveredValue)) return;
send({ type: "CELL.POINTER_MOVE", cell: "month", value: cellState.value, focus });
} : void 0
});
},
getYearTableCellState,
getYearTableCellProps(props) {
const { value, columns } = props;
const cellState = getYearTableCellState(props);
return normalize.element({
...import_date_picker.parts.tableCell.attrs,
dir: prop("dir"),
colSpan: columns,
role: "gridcell",
"aria-selected": (0, import_dom_query.ariaAttr)(cellState.selected || cellState.inRange),
"data-selected": (0, import_dom_query.dataAttr)(cellState.selected),
"aria-disabled": (0, import_dom_query.ariaAttr)(!cellState.selectable),
"data-value": value
});
},
getYearTableCellTriggerProps(props) {
const { value } = props;
const cellState = getYearTableCellState(props);
return normalize.element({
...import_date_picker.parts.tableCellTrigger.attrs,
id: dom.getCellTriggerId(scope, value.toString()),
role: "button",
dir: prop("dir"),
tabIndex: cellState.focused ? 0 : -1,
"aria-label": cellState.valueText,
"aria-disabled": (0, import_dom_query.ariaAttr)(!cellState.selectable),
"data-disabled": (0, import_dom_query.dataAttr)(!cellState.selectable),
"data-selectable": (0, import_dom_query.dataAttr)(cellState.selectable),
"data-selected": (0, import_dom_query.dataAttr)(cellState.selected),
"data-value": value,
"data-view": "year",
"data-focus": (0, import_dom_query.dataAttr)(cellState.focused),
"data-outside-range": (0, import_dom_query.dataAttr)(cellState.outsideRange),
"data-range-start": (0, import_dom_query.dataAttr)(cellState.firstInRange),
"data-range-end": (0, import_dom_query.dataAttr)(cellState.lastInRange),
"data-in-range": (0, import_dom_query.dataAttr)(cellState.inRange),
"data-in-hover-range": (0, import_dom_query.dataAttr)(cellState.inHoveredRange),
"data-hover-range-start": (0, import_dom_query.dataAttr)(cellState.firstInHoveredRange),
"data-hover-range-end": (0, import_dom_query.dataAttr)(cellState.lastInHoveredRange),
onClick(event) {
if (event.defaultPrevented) return;
if (!cellState.selectable) return;
send({ type: "CELL.CLICK", cell: "year", value });
},
onPointerMove: isRangePicker ? (event) => {
if (event.pointerType === "touch") return;
if (!cellState.selectable) return;
const focus = !scope.isActiveElement(event.currentTarget);
if (hoveredValue && cellState.value && (0, import_date.isEqualYear)(cellState.value, hoveredValue)) return;
send({ type: "CELL.POINTER_MOVE", cell: "year", value: cellState.value, focus });
} : void 0
});
},
getNextTriggerProps(props = {}) {
const { view = "day" } = props;
const isDisabled = disabled || !computed("isNextVisibleRangeValid");
return normalize.button({
...import_date_picker.parts.nextTrigger.attrs,
dir: prop("dir"),
id: dom.getNextTriggerId(scope, view),
type: "button",
"aria-label": translations.nextTrigger(view),
disabled: isDisabled,
"data-disabled": (0, import_dom_query.dataAttr)(isDisabled),
onClick(event) {
if (event.defaultPrevented) return;
send({ type: "GOTO.NEXT", view });
}
});
},
getPrevTriggerProps(props = {}) {
const { view = "day" } = props;
const isDisabled = disabled || !computed("isPrevVisibleRangeValid");
return normalize.button({
...import_date_picker.parts.prevTrigger.attrs,
dir: prop("dir"),
id: dom.getPrevTriggerId(scope, view),
type: "button",
"aria-label": translations.prevTrigger(view),
disabled: isDisabled,
"data-disabled": (0, import_dom_query.dataAttr)(isDisabled),
onClick(event) {
if (event.defaultPrevented) return;
send({ type: "GOTO.PREV", view });
}
});
},
getClearTriggerProps() {
return normalize.button({
...import_date_picker.parts.clearTrigger.attrs,
id: dom.getClearTriggerId(scope),
dir: prop("dir"),
type: "button",
"aria-label": translations.clearTrigger,
hidden: !selectedValue.length,
onClick(event) {
if (event.defaultPrevented) return;
send({ type: "VALUE.CLEAR" });
}
});
},
getTriggerProps() {
return normalize.button({
...import_date_picker.parts.trigger.attrs,
id: dom.getTriggerId(scope),
dir: prop("dir"),
type: "button",
"data-placement": currentPlacement,
"data-side": currentPlacementSide,
"aria-label": translations.trigger(open),
"aria-controls": dom.getContentId(scope),
"aria-expanded": open,
"data-state": open ? "open" : "closed",
"data-placeholder-shown": (0, import_dom_query.dataAttr)(empty),
"aria-haspopup": "grid",
disabled,
onClick(event) {
if (event.defaultPrevented) return;
if (!interactive) return;
send({ type: "TRIGGER.CLICK" });
}
});
},
getViewProps(props = {}) {
const { view = "day" } = props;
return normalize.element({
...import_date_picker.parts.view.attrs,
"data-view": view,
hidden: context.get("view") !== view
});
},
getViewTriggerProps(props = {}) {
const { view = "day" } = props;
return normalize.button({
...import_date_picker.parts.viewTrigger.attrs,
"data-view": view,
dir: prop("dir"),
id: dom.getViewTriggerId(scope, view),
type: "button",
disabled,
"aria-label": translations.viewTrigger(view),
onClick(event) {
if (event.defaultPrevented) return;
if (!interactive) return;
send({ type: "VIEW.TOGGLE", src: "viewTrigger" });
}
});
},
getViewControlProps(props = {}) {
const { view = "day" } = props;
return normalize.element({
...import_date_picker.parts.viewControl.attrs,
"data-view": view,
dir: prop("dir")
});
},
getInputProps(props = {}) {
const { index = 0, fixOnBlur = true } = props;
return normalize.input({
...import_date_picker.parts.input.attrs,
id: dom.getInputId(scope, index),
autoComplete: "off",
autoCorrect: "off",
spellCheck: "false",
dir: prop("dir"),
name: prop("name"),
"data-index": index,
"data-state": open ? "open" : "closed",
"data-placeholder-shown": (0, import_dom_query.dataAttr)(empty),
readOnly,
disabled,
required: prop("required"),
"aria-invalid": (0, import_dom_query.ariaAttr)(invalid),
"data-invalid": (0, import_dom_query.dataAttr)(invalid),
placeholder: prop("placeholder") || (0, import_date_picker2.getInputPlaceholder)(locale),
defaultValue: computed("valueAsString")[index],
onBeforeInput(event) {
const { data } = (0, import_dom_query.getNativeEvent)(event);
if (!(0, import_date_utils.isValidCharacter)(data, separator)) {
event.preventDefault();
}
},
onClick(event) {
if (event.defaultPrevented) return;
if (!prop("openOnClick")) return;
if (!interactive) return;
send({ type: "OPEN", src: "input.click" });
},
onFocus() {
send({ type: "INPUT.FOCUS", index });
},
onBlur(event) {
const value = event.currentTarget.value.trim();
send({ type: "INPUT.BLUR", value, index, fixOnBlur });
},
onKeyDown(event) {
if (event.defaultPrevented) return;
if (!interactive) return;
const keyMap = {
Enter(event2) {
if ((0, import_dom_query.isComposingEvent)(event2)) return;
if (isUnavailable(focusedValue)) return;
if (event2.currentTarget.value.trim() === "") return;
send({ type: "INPUT.ENTER", value: event2.currentTarget.value, index });
}
};
const exec = keyMap[event.key];
if (exec) {
exec(event);
event.preventDefault();
}
},
onInput(event) {
const value = event.currentTarget.value;
send({ type: "INPUT.CHANGE", value: (0, import_date_utils.ensureValidCharacters)(value, separator), index });
}
});
},
getMonthSelectProps() {
return normalize.select({
...import_date_picker.parts.monthSelect.attrs,
id: dom.getMonthSelectId(scope),
"aria-label": translations.monthSelect,
disabled,
dir: prop("dir"),
defaultValue: startValue.month,
onChange(event) {
focusMonth(Number(event.currentTarget.value));
}
});
},
getYearSelectProps() {
return normalize.select({
...import_date_picker.parts.yearSelect.attrs,
id: dom.getYearSelectId(scope),
disabled,
"aria-label": translations.yearSelect,
dir: prop("dir"),
defaultValue: startValue.year,
onChange(event) {
focusYear(Number(event.currentTarget.value));
}
});
},
getPositionerProps() {
return normalize.element({
id: dom.getPositionerId(scope),
...import_date_picker.parts.positioner.attrs,
dir: prop("dir"),
style: popperStyles.floating
});
},
getPresetTriggerProps(props) {
const value = Array.isArray(props.value) ? props.value : (0, import_date_utils.getDateRangePreset)(props.value, locale, timeZone);
const valueAsString = value.filter((item) => item != null).map((item) => item.toDate(timeZone).toDateString());
return normalize.button({
...import_date_picker.parts.presetTrigger.attrs,
"aria-label": translations.presetTrigger(valueAsString),
type: "button",
onClick(event) {
if (event.defaultPrevented) return;
send({ type: "PRESET.CLICK", value });
}
});
}
};
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
connect
});