eewing
233 lines
9.4 KiB
TypeScript
233 lines
9.4 KiB
TypeScript
import { type DateValue } from "@internationalized/date";
|
|
import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
|
|
import type { DateRange, Month } from "../../shared/index.js";
|
|
import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
|
|
import { type Announcer } from "../../internal/date-time/announcer.js";
|
|
import { type Formatter } from "../../internal/date-time/formatter.js";
|
|
import { calendarAttrs } from "../../internal/date-time/calendar-helpers.svelte.js";
|
|
import type { WeekStartsOn } from "../../shared/date/types.js";
|
|
interface RangeCalendarRootStateOpts extends WithRefOpts, WritableBoxedValues<{
|
|
value: DateRange;
|
|
placeholder: DateValue;
|
|
startValue: DateValue | undefined;
|
|
endValue: DateValue | undefined;
|
|
}>, ReadableBoxedValues<{
|
|
preventDeselect: boolean;
|
|
minValue: DateValue | undefined;
|
|
maxValue: DateValue | undefined;
|
|
disabled: boolean;
|
|
pagedNavigation: boolean;
|
|
weekStartsOn: WeekStartsOn | undefined;
|
|
weekdayFormat: Intl.DateTimeFormatOptions["weekday"];
|
|
isDateDisabled: (date: DateValue) => boolean;
|
|
isDateUnavailable: (date: DateValue) => boolean;
|
|
fixedWeeks: boolean;
|
|
numberOfMonths: number;
|
|
locale: string;
|
|
calendarLabel: string;
|
|
readonly: boolean;
|
|
disableDaysOutsideMonth: boolean;
|
|
excludeDisabled: boolean;
|
|
minDays: number | undefined;
|
|
maxDays: number | undefined;
|
|
/**
|
|
* This is strictly used by the `DateRangePicker` component to close the popover when a date range
|
|
* is selected. It is not intended to be used by the user.
|
|
*/
|
|
onRangeSelect?: () => void;
|
|
monthFormat: Intl.DateTimeFormatOptions["month"] | ((month: number) => string);
|
|
yearFormat: Intl.DateTimeFormatOptions["year"] | ((year: number) => string);
|
|
}> {
|
|
defaultPlaceholder: DateValue;
|
|
}
|
|
export declare class RangeCalendarRootState {
|
|
#private;
|
|
static create(opts: RangeCalendarRootStateOpts): RangeCalendarRootState | import("../calendar/calendar.svelte.js").CalendarRootState;
|
|
readonly opts: RangeCalendarRootStateOpts;
|
|
readonly attachment: RefAttachment;
|
|
readonly visibleMonths: DateValue[];
|
|
months: Month<DateValue>[];
|
|
announcer: Announcer;
|
|
formatter: Formatter;
|
|
accessibleHeadingId: string;
|
|
focusedValue: DateValue | undefined;
|
|
lastPressedDateValue: DateValue | undefined;
|
|
domContext: DOMContext;
|
|
/**
|
|
* This derived state holds an array of localized day names for the current
|
|
* locale and calendar view. It dynamically syncs with the 'weekStartsOn' option,
|
|
* updating its content when the option changes. Using this state to render the
|
|
* calendar's days of the week is strongly recommended, as it guarantees that
|
|
* the days are correctly formatted for the current locale and calendar view.
|
|
*/
|
|
readonly weekdays: string[];
|
|
readonly isStartInvalid: boolean;
|
|
readonly isEndInvalid: boolean;
|
|
readonly isInvalid: boolean;
|
|
readonly isNextButtonDisabled: boolean;
|
|
readonly isPrevButtonDisabled: boolean;
|
|
readonly headingValue: string;
|
|
readonly fullCalendarLabel: string;
|
|
readonly highlightedRange: {
|
|
start: DateValue;
|
|
end: DateValue;
|
|
} | null;
|
|
readonly initialPlaceholderYear: number;
|
|
readonly defaultYears: number[];
|
|
constructor(opts: RangeCalendarRootStateOpts);
|
|
setMonths: (months: Month<DateValue>[]) => void;
|
|
isOutsideVisibleMonths(date: DateValue): boolean;
|
|
isDateDisabled(date: DateValue): boolean;
|
|
isDateUnavailable(date: DateValue): boolean;
|
|
isSelectionStart(date: DateValue): boolean;
|
|
isSelectionEnd(date: DateValue): boolean;
|
|
isSelected(date: DateValue): boolean;
|
|
shiftFocus(node: HTMLElement, add: number): void;
|
|
handleCellClick(e: Event, date: DateValue): void;
|
|
onkeydown(event: BitsKeyboardEvent): void;
|
|
/**
|
|
* Navigates to the next page of the calendar.
|
|
*/
|
|
nextPage(): void;
|
|
/**
|
|
* Navigates to the previous page of the calendar.
|
|
*/
|
|
prevPage(): void;
|
|
nextYear(): void;
|
|
prevYear(): void;
|
|
setYear(year: number): void;
|
|
setMonth(month: number): void;
|
|
getBitsAttr: (typeof calendarAttrs)["getAttr"];
|
|
readonly snippetProps: {
|
|
months: Month<DateValue>[];
|
|
weekdays: string[];
|
|
};
|
|
readonly props: {
|
|
readonly onkeydown: (event: BitsKeyboardEvent) => void;
|
|
readonly id: string;
|
|
readonly role: "application";
|
|
readonly "aria-label": string;
|
|
readonly "data-invalid": "" | undefined;
|
|
readonly "data-disabled": "" | undefined;
|
|
readonly "data-readonly": "" | undefined;
|
|
};
|
|
}
|
|
interface RangeCalendarCellStateOpts extends WithRefOpts, ReadableBoxedValues<{
|
|
date: DateValue;
|
|
month: DateValue;
|
|
}> {
|
|
}
|
|
export declare class RangeCalendarCellState {
|
|
static create(opts: RangeCalendarCellStateOpts): RangeCalendarCellState;
|
|
readonly opts: RangeCalendarCellStateOpts;
|
|
readonly root: RangeCalendarRootState;
|
|
readonly attachment: RefAttachment;
|
|
readonly cellDate: Date;
|
|
readonly isOutsideMonth: boolean;
|
|
readonly isDisabled: boolean;
|
|
readonly isUnavailable: boolean;
|
|
readonly isDateToday: boolean;
|
|
readonly isOutsideVisibleMonths: boolean;
|
|
readonly isFocusedDate: boolean;
|
|
readonly isSelectedDate: boolean;
|
|
readonly isSelectionStart: boolean;
|
|
readonly isRangeStart: boolean;
|
|
readonly isRangeEnd: boolean;
|
|
readonly isRangeMiddle: boolean;
|
|
readonly isSelectionMiddle: boolean;
|
|
readonly isSelectionEnd: boolean;
|
|
readonly isHighlighted: boolean;
|
|
readonly labelText: string;
|
|
constructor(opts: RangeCalendarCellStateOpts, root: RangeCalendarRootState);
|
|
readonly snippetProps: {
|
|
disabled: boolean;
|
|
unavailable: boolean;
|
|
selected: boolean;
|
|
};
|
|
readonly ariaDisabled: boolean;
|
|
readonly sharedDataAttrs: {
|
|
readonly "data-unavailable": "" | undefined;
|
|
readonly "data-today": "" | undefined;
|
|
readonly "data-outside-month": "" | undefined;
|
|
readonly "data-outside-visible-months": "" | undefined;
|
|
readonly "data-focused": "" | undefined;
|
|
readonly "data-selection-start": "" | undefined;
|
|
readonly "data-selection-end": "" | undefined;
|
|
readonly "data-range-start": "" | undefined;
|
|
readonly "data-range-end": "" | undefined;
|
|
readonly "data-range-middle": "" | undefined;
|
|
readonly "data-highlighted": "" | undefined;
|
|
readonly "data-selected": "" | undefined;
|
|
readonly "data-value": string;
|
|
readonly "data-type": string;
|
|
readonly "data-disabled": "" | undefined;
|
|
};
|
|
readonly props: {
|
|
readonly "data-unavailable": "" | undefined;
|
|
readonly "data-today": "" | undefined;
|
|
readonly "data-outside-month": "" | undefined;
|
|
readonly "data-outside-visible-months": "" | undefined;
|
|
readonly "data-focused": "" | undefined;
|
|
readonly "data-selection-start": "" | undefined;
|
|
readonly "data-selection-end": "" | undefined;
|
|
readonly "data-range-start": "" | undefined;
|
|
readonly "data-range-end": "" | undefined;
|
|
readonly "data-range-middle": "" | undefined;
|
|
readonly "data-highlighted": "" | undefined;
|
|
readonly "data-selected": "" | undefined;
|
|
readonly "data-value": string;
|
|
readonly "data-type": string;
|
|
readonly "data-disabled": "" | undefined;
|
|
readonly id: string;
|
|
readonly role: "gridcell";
|
|
readonly "aria-selected": "true" | "false";
|
|
readonly "aria-disabled": "true" | "false";
|
|
};
|
|
}
|
|
interface RangeCalendarDayStateOpts extends WithRefOpts {
|
|
}
|
|
export declare class RangeCalendarDayState {
|
|
#private;
|
|
static create(opts: RangeCalendarDayStateOpts): RangeCalendarDayState;
|
|
readonly opts: RangeCalendarDayStateOpts;
|
|
readonly cell: RangeCalendarCellState;
|
|
readonly attachment: RefAttachment;
|
|
constructor(opts: RangeCalendarDayStateOpts, cell: RangeCalendarCellState);
|
|
onclick(e: BitsMouseEvent): void;
|
|
onmouseenter(_: BitsMouseEvent): void;
|
|
onfocusin(_: BitsFocusEvent): void;
|
|
readonly snippetProps: {
|
|
disabled: boolean;
|
|
unavailable: boolean;
|
|
selected: boolean;
|
|
day: string;
|
|
};
|
|
readonly props: {
|
|
readonly tabindex: 0 | -1 | undefined;
|
|
readonly "data-bits-day": "";
|
|
readonly onclick: (e: BitsMouseEvent) => void;
|
|
readonly onmouseenter: (_: BitsMouseEvent) => void;
|
|
readonly onfocusin: (_: BitsFocusEvent) => void;
|
|
readonly "data-unavailable": "" | undefined;
|
|
readonly "data-today": "" | undefined;
|
|
readonly "data-outside-month": "" | undefined;
|
|
readonly "data-outside-visible-months": "" | undefined;
|
|
readonly "data-focused": "" | undefined;
|
|
readonly "data-selection-start": "" | undefined;
|
|
readonly "data-selection-end": "" | undefined;
|
|
readonly "data-range-start": "" | undefined;
|
|
readonly "data-range-end": "" | undefined;
|
|
readonly "data-range-middle": "" | undefined;
|
|
readonly "data-highlighted": "" | undefined;
|
|
readonly "data-selected": "" | undefined;
|
|
readonly "data-value": string;
|
|
readonly "data-type": string;
|
|
readonly "data-disabled": "" | undefined;
|
|
readonly id: string;
|
|
readonly role: "button";
|
|
readonly "aria-label": string;
|
|
readonly "aria-disabled": "true" | "false";
|
|
};
|
|
}
|
|
export {};
|