@mantine/schedule 9.0.0-alpha.0

package/lib/components/ScheduleHeader/MonthYearSelect/MonthYearSelect.d.ts

@@ -0,0 +1,52 @@
+import { BoxProps, DataAttributes, ElementProps, Factory, MantineRadius, PopoverProps, StylesApiProps } from '@mantine/core';
+import { ScheduleLabelsOverride } from '../../../labels';
+import { DateLabelFormat } from '../../../types';
+export type MonthYearSelectStylesNames = 'monthYearSelectTarget' | 'monthYearSelectDropdown' | 'monthYearSelectControl' | 'monthYearSelectList' | 'monthYearSelectLabel';
+export type MonthYearSelectCssVariables = {
+    monthYearSelectDropdown: '--control-radius';
+};
+export interface MonthYearSelectProps extends BoxProps, StylesApiProps<MonthYearSelectFactory>, ElementProps<'button'> {
+    __staticSelector?: string;
+    /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */
+    locale?: string;
+    /** Props passed down to the underlying Popover component */
+    popoverProps?: PopoverProps;
+    /** Start year for year selection, calculated from the current date by default */
+    startYear?: number;
+    /** End year for year selection, calculated from the current date by default */
+    endYear?: number;
+    /** Current year value (e.g. `2025`) */
+    yearValue?: number;
+    /** Current month value (0-11) */
+    monthValue?: number;
+    /** Called with year value (e.g. `2025`) when year is selected in the dropdown */
+    onYearChange?: (year: number) => void;
+    /** Called with month value (0-11) when month is selected in the dropdown */
+    onMonthChange?: (month: number) => void;
+    /** Format for displaying months in the dropdown, dayjs format or custom formatter function @default 'MMM' */
+    monthsListFormat?: DateLabelFormat;
+    /** Format for displaying month label in the control, dayjs format @default 'MMMM YYYY' */
+    labelFormat?: DateLabelFormat;
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */
+    radius?: MantineRadius;
+    /** Props passed down to year controls */
+    getYearControlProps?: (year: number) => React.ComponentProps<'button'> & DataAttributes;
+    /** Props passed down to month controls */
+    getMonthControlProps?: (month: number) => React.ComponentProps<'button'> & DataAttributes;
+    /** If set to false, months are not displayed in the dropdown @default true */
+    withMonths?: boolean;
+    /** Labels override */
+    labels?: ScheduleLabelsOverride;
+}
+export type MonthYearSelectFactory = Factory<{
+    props: MonthYearSelectProps;
+    ref: HTMLButtonElement;
+    stylesNames: MonthYearSelectStylesNames;
+    vars: MonthYearSelectCssVariables;
+}>;
+export declare const MonthYearSelect: import("@mantine/core").MantineComponent<{
+    props: MonthYearSelectProps;
+    ref: HTMLButtonElement;
+    stylesNames: MonthYearSelectStylesNames;
+    vars: MonthYearSelectCssVariables;
+}>;

package/lib/components/ScheduleHeader/ScheduleHeader.d.ts

@@ -0,0 +1,40 @@
+import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
+import { HeaderControl, HeaderControlStylesNames, ScheduleHeaderNext, ScheduleHeaderPrevious, ScheduleHeaderToday } from './HeaderControl/HeaderControl';
+import { MonthYearSelect, MonthYearSelectStylesNames } from './MonthYearSelect/MonthYearSelect';
+import { ViewSelect, ViewSelectStylesNames } from './ViewSelect/ViewSelect';
+export type CombinedScheduleHeaderStylesNames = ScheduleHeaderStylesNames | ViewSelectStylesNames | HeaderControlStylesNames | MonthYearSelectStylesNames;
+export type ScheduleHeaderStylesNames = 'header';
+export type ScheduleHeaderCssVariables = {
+    scheduleHeader: '--test';
+};
+export interface ScheduleHeaderProps extends BoxProps, StylesApiProps<ScheduleHeaderFactory>, ElementProps<'div'> {
+    __staticSelector?: string;
+}
+export type ScheduleHeaderFactory = Factory<{
+    props: ScheduleHeaderProps;
+    ref: HTMLDivElement;
+    stylesNames: ScheduleHeaderStylesNames;
+    vars: ScheduleHeaderCssVariables;
+    staticComponents: {
+        Control: typeof HeaderControl;
+        Previous: typeof ScheduleHeaderPrevious;
+        Next: typeof ScheduleHeaderNext;
+        Today: typeof ScheduleHeaderToday;
+        ViewSelect: typeof ViewSelect;
+        MonthYearSelect: typeof MonthYearSelect;
+    };
+}>;
+export declare const ScheduleHeader: import("@mantine/core").MantineComponent<{
+    props: ScheduleHeaderProps;
+    ref: HTMLDivElement;
+    stylesNames: ScheduleHeaderStylesNames;
+    vars: ScheduleHeaderCssVariables;
+    staticComponents: {
+        Control: typeof HeaderControl;
+        Previous: typeof ScheduleHeaderPrevious;
+        Next: typeof ScheduleHeaderNext;
+        Today: typeof ScheduleHeaderToday;
+        ViewSelect: typeof ViewSelect;
+        MonthYearSelect: typeof MonthYearSelect;
+    };
+}>;

package/lib/components/ScheduleHeader/ScheduleHeaderBase.d.ts

@@ -0,0 +1,53 @@
+import { StylesApiProps } from '@mantine/core';
+import { ScheduleLabelsOverride } from '../../labels';
+import { DateStringValue, ScheduleViewLevel } from '../../types';
+import { MonthYearSelectProps } from './MonthYearSelect/MonthYearSelect';
+import { ViewSelectProps } from './ViewSelect/ViewSelect';
+interface NavigationHandlers {
+    /** Handler for previous button click, returns new date */
+    previous: () => DateStringValue;
+    /** Handler for next button click, returns new date */
+    next: () => DateStringValue;
+    /** Handler for today button click, returns new date */
+    today: () => DateStringValue;
+}
+interface HeaderControlOptions {
+    /** Title to render in a simple control (used by DayView, WeekView) */
+    title?: React.ReactNode;
+    /** MonthYearSelect props (used by MonthView, YearView) */
+    monthYearSelect?: {
+        yearValue: number;
+        monthValue: number;
+        onYearChange?: (year: number) => void;
+        onMonthChange?: (month: number) => void;
+        withMonths?: boolean;
+    } & Partial<MonthYearSelectProps>;
+    /** Minimum width for control */
+    miw?: React.CSSProperties['minWidth'];
+}
+export interface ScheduleHeaderBaseProps {
+    /** Current view level */
+    view: ScheduleViewLevel;
+    /** Navigation handlers for previous, next, and today */
+    navigationHandlers: NavigationHandlers;
+    /** Central control configuration (either title or monthYearSelect) */
+    control: HeaderControlOptions;
+    /** Label overrides */
+    labels?: ScheduleLabelsOverride;
+    /** Called when date is changed */
+    onDateChange?: (date: DateStringValue) => void;
+    /** Called when view is changed */
+    onViewChange?: (view: ScheduleViewLevel) => void;
+    /** Props passed to previous control button */
+    previousControlProps?: React.ComponentProps<'button'>;
+    /** Props passed to next control button */
+    nextControlProps?: React.ComponentProps<'button'>;
+    /** Props passed to today control button */
+    todayControlProps?: React.ComponentProps<'button'>;
+    /** Props passed to view select */
+    viewSelectProps?: Partial<ViewSelectProps>;
+    /** Styles API props to pass through */
+    stylesApiProps?: StylesApiProps<any>;
+}
+export declare function ScheduleHeaderBase({ view, navigationHandlers, control, labels, onDateChange, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, stylesApiProps, }: ScheduleHeaderBaseProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/ScheduleHeader/ViewSelect/ViewSelect.d.ts

@@ -0,0 +1,27 @@
+import { BoxProps, ElementProps, Factory, MantineRadius, StylesApiProps } from '@mantine/core';
+import { ScheduleLabelsOverride } from '../../../labels';
+import { ScheduleViewLevel } from '../../../types';
+export type ViewSelectStylesNames = 'viewSelect';
+export interface ViewSelectProps extends BoxProps, StylesApiProps<ViewSelectFactory>, ElementProps<'div', 'value' | 'onChange'> {
+    __staticSelector?: string;
+    /** A list of views to display @default ['day', 'week', 'month', 'year'] */
+    views?: readonly ScheduleViewLevel[];
+    /** Selected view type */
+    value?: ScheduleViewLevel;
+    /** Called when view type changes */
+    onChange?: (value: ScheduleViewLevel) => void;
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */
+    radius?: MantineRadius;
+    /** Labels override */
+    labels?: ScheduleLabelsOverride;
+}
+export type ViewSelectFactory = Factory<{
+    props: ViewSelectProps;
+    ref: HTMLDivElement;
+    stylesNames: ViewSelectStylesNames;
+}>;
+export declare const ViewSelect: import("@mantine/core").MantineComponent<{
+    props: ViewSelectProps;
+    ref: HTMLDivElement;
+    stylesNames: ViewSelectStylesNames;
+}>;

package/lib/components/ScheduleHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { ScheduleHeader } from './ScheduleHeader';
+export type { ScheduleHeaderProps, ScheduleHeaderFactory, ScheduleHeaderStylesNames, ScheduleHeaderCssVariables, CombinedScheduleHeaderStylesNames, } from './ScheduleHeader';

package/lib/components/WeekView/WeekView.d.ts

@@ -0,0 +1,119 @@
+import { BoxProps, DataAttributes, ElementProps, Factory, MantineRadius, ScrollAreaAutosizeProps, StylesApiProps } from '@mantine/core';
+import { ScheduleLabelsOverride } from '../../labels';
+import { DateLabelFormat, DateStringValue, DateTimeStringValue, DayOfWeek, ScheduleEventData, ScheduleMode, ScheduleViewLevel } from '../../types';
+import { CurrentTimeIndicatorStylesNames } from '../CurrentTimeIndicator/CurrentTimeIndicator';
+import { RenderEvent, RenderEventBody } from '../ScheduleEvent/ScheduleEvent';
+import { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader';
+import { ViewSelectProps } from '../ScheduleHeader/ViewSelect/ViewSelect';
+export type WeekViewStylesNames = 'weekView' | 'weekViewRoot' | 'weekViewHeader' | 'weekViewInner' | 'weekViewAllDaySlotsEvents' | 'weekViewAllDaySlots' | 'weekViewAllDaySlotsList' | 'weekViewAllDaySlot' | 'weekViewAllDaySlotsLabel' | 'weekViewScrollArea' | 'weekViewCorner' | 'weekViewSlotLabels' | 'weekViewSlotLabel' | 'weekViewDayLabel' | 'weekViewDayWeekday' | 'weekViewDay' | 'weekViewDayNumber' | 'weekViewDaySlot' | 'weekViewDaySlots' | 'weekViewWeekLabel' | 'weekViewWeekNumber' | CurrentTimeIndicatorStylesNames | CombinedScheduleHeaderStylesNames;
+export type WeekViewCssVariables = {
+    weekView: '--week-view-radius' | '--week-view-slot-height' | '--week-view-all-day-slots-height';
+};
+export interface WeekViewProps extends BoxProps, StylesApiProps<WeekViewFactory>, ElementProps<'div'> {
+    __staticSelector?: string;
+    /** Week to display, Date object or date string in `YYYY-MM-DD` format */
+    date: Date | string;
+    /** Called with the new date value when a date is selected */
+    onDateChange?: (value: DateStringValue) => void;
+    /** Start time for the day view, in `HH:mm:ss` format @default 00:00:00 */
+    startTime?: string;
+    /** End time for the day view, in `HH:mm:ss` format @default 23:59:59 */
+    endTime?: string;
+    /** Number of minutes for each interval in the day view @default 60 */
+    intervalMinutes?: number;
+    /** Dayjs format for slot labels or a callback function that returns formatted value @default HH:mm  */
+    slotLabelFormat?: DateLabelFormat;
+    /** Number 0-6, where 0 – Sunday and 6 – Saturday. @default 1 – Monday */
+    firstDayOfWeek?: DayOfWeek;
+    /** `dayjs` format for weekdays names. @default 'ddd' */
+    weekdayFormat?: DateLabelFormat;
+    /** Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`. */
+    weekendDays?: DayOfWeek[];
+    /** If set to false, weekend days are hidden @default true */
+    withWeekendDays?: boolean;
+    /** If set to true, highlights today in the weekday row @default false */
+    highlightToday?: boolean;
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */
+    radius?: MantineRadius;
+    /** Props passed down to the `ScrollArea.Autosize` component */
+    scrollAreaProps?: ScrollAreaAutosizeProps & DataAttributes;
+    /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */
+    locale?: string;
+    /** If set, the week number is displayed at the top left corner @default true */
+    withWeekNumber?: boolean;
+    /** If set, displays a line indicating the current time @default true */
+    withCurrentTimeIndicator?: boolean;
+    /** If set, the time indicator displays the current time in the bubble @default true */
+    withCurrentTimeBubble?: boolean;
+    /** If set, displays all-day slots at the top of the view @default true */
+    withAllDaySlots?: boolean;
+    /** If set, the header is displayed @default true */
+    withHeader?: boolean;
+    /** Called when view level select button is clicked */
+    onViewChange?: (view: ScheduleViewLevel) => void;
+    /** Props passed to previous month control */
+    previousControlProps?: React.ComponentProps<'button'> & DataAttributes;
+    /** Props passed to next month control */
+    nextControlProps?: React.ComponentProps<'button'> & DataAttributes;
+    /** Props passed to today control */
+    todayControlProps?: React.ComponentProps<'button'> & DataAttributes;
+    /** Props passed to view level select */
+    viewSelectProps?: Partial<ViewSelectProps> & DataAttributes;
+    /** Format for week label @default 'MMM DD' */
+    weekLabelFormat?: DateLabelFormat;
+    /** List of events to display in the week view */
+    events?: ScheduleEventData[];
+    /** Height of 1hr slot @default 64px */
+    slotHeight?: React.CSSProperties['height'];
+    /** Height of all-day slot @default 48px */
+    allDaySlotHeight?: React.CSSProperties['height'];
+    /** Labels override */
+    labels?: ScheduleLabelsOverride;
+    /** If set to true, highlights business hours with white background @default false */
+    highlightBusinessHours?: boolean;
+    /** Business hours range in `HH:mm:ss` format @default ['09:00:00', '17:00:00'] */
+    businessHours?: [string, string];
+    /** Function to customize event body, `event` object is passed as first argument */
+    renderEventBody?: RenderEventBody;
+    /** Function to fully customize event rendering, receives all props that would be passed to the root element including children */
+    renderEvent?: RenderEvent;
+    /** If true, events can be dragged and dropped @default false */
+    withEventsDragAndDrop?: boolean;
+    /** Called when event is dropped at new time */
+    onEventDrop?: (eventId: string | number, newStart: DateTimeStringValue, newEnd: DateTimeStringValue) => void;
+    /** Function to determine if event can be dragged */
+    canDragEvent?: (event: ScheduleEventData) => boolean;
+    /** Called when any event drag starts */
+    onEventDragStart?: (event: ScheduleEventData) => void;
+    /** Called when any event drag ends */
+    onEventDragEnd?: () => void;
+    /** Called when time slot is clicked */
+    onTimeSlotClick?: (slotStart: DateTimeStringValue, slotEnd: DateTimeStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Called when all-day slot is clicked */
+    onAllDaySlotClick?: (day: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Called when event is clicked */
+    onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** If set, enables drag-to-select time slot ranges @default false */
+    withDragSlotSelect?: boolean;
+    /** Called when a time slot range is selected by dragging */
+    onSlotDragEnd?: (rangeStart: DateTimeStringValue, rangeEnd: DateTimeStringValue) => void;
+    /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions @default default */
+    mode?: ScheduleMode;
+    /** Function to customize week label in the header */
+    renderWeekLabel?: (params: {
+        weekStart: DateStringValue;
+        weekEnd: DateStringValue;
+    }) => React.ReactNode;
+}
+export type WeekViewFactory = Factory<{
+    props: WeekViewProps;
+    ref: HTMLDivElement;
+    stylesNames: WeekViewStylesNames;
+    vars: WeekViewCssVariables;
+}>;
+export declare const WeekView: import("@mantine/core").MantineComponent<{
+    props: WeekViewProps;
+    ref: HTMLDivElement;
+    stylesNames: WeekViewStylesNames;
+    vars: WeekViewCssVariables;
+}>;

package/lib/components/WeekView/WeekViewDay.d.ts

@@ -0,0 +1,58 @@
+import { GetStylesApi } from '@mantine/core';
+import { ScheduleLabelsOverride } from '../../labels';
+import { DateStringValue, DayOfWeek, ScheduleMode } from '../../types';
+import { DayTimeInterval } from '../../utils';
+import type { WeekViewControlsRef } from './handle-week-view-key-down';
+import type { WeekViewFactory } from './WeekView';
+export interface WeekViewDayProps {
+    /** Date to display */
+    day: Date | DateStringValue;
+    /** Index of this day in the week */
+    dayIndex: number;
+    /** Slots intervals */
+    slots: DayTimeInterval[];
+    /** `useStyles` return value of `WeekView` */
+    getStyles: GetStylesApi<WeekViewFactory>;
+    /** Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`. */
+    weekendDays?: DayOfWeek[];
+    /** Events list */
+    children?: React.ReactNode;
+    /** Labels override */
+    labels?: ScheduleLabelsOverride;
+    /** If set to true, highlights business hours with white background */
+    highlightBusinessHours?: boolean;
+    /** Business hours range in `HH:mm:ss` format */
+    businessHours?: [string, string];
+    /** If true, slots are drop targets for drag and drop */
+    withEventsDragAndDrop?: boolean;
+    /** Called when dragging over a slot */
+    onSlotDragOver?: (e: React.DragEvent<HTMLButtonElement>, day: string, slotIndex: number) => void;
+    /** Called when dragging leaves a slot */
+    onSlotDragLeave?: () => void;
+    /** Called when dropping on a slot */
+    onSlotDrop?: (e: React.DragEvent<HTMLButtonElement>, day: string, slotTime: string) => void;
+    /** Called when slot is clicked */
+    onSlotClick?: (day: string, slotTime: string, event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Index of the slot that is currently a drop target */
+    dropTargetSlotIndex?: number;
+    /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions */
+    mode?: ScheduleMode;
+    /** Ref for keyboard navigation */
+    slotsRef?: WeekViewControlsRef;
+    /** Index of the first focusable slot */
+    firstSlotIndex?: {
+        dayIndex: number;
+        slotIndex: number;
+    };
+    /** Keyboard event handler for slots */
+    onSlotKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>, dayIndex: number, slotIndex: number) => void;
+    /** Called when Arrow Up is pressed on the first slot, used to navigate to all-day slot */
+    onFirstSlotArrowUp?: (dayIndex: number) => void;
+    /** If set, enables drag-to-select time slot ranges */
+    withDragSlotSelect?: boolean;
+    /** Called when pointer down on a slot for drag selection */
+    onSlotPointerDown?: (event: React.PointerEvent<HTMLButtonElement>, index: number, group: string) => void;
+    /** Function to check if a slot is drag-selected */
+    isSlotDragSelected?: (index: number, group: string) => boolean;
+}
+export declare function WeekViewDay({ day, dayIndex, slots, getStyles, weekendDays, children, labels, highlightBusinessHours, businessHours, withEventsDragAndDrop, onSlotDragOver, onSlotDragLeave, onSlotDrop, onSlotClick, dropTargetSlotIndex, mode, slotsRef, firstSlotIndex, onSlotKeyDown, onFirstSlotArrowUp, withDragSlotSelect, onSlotPointerDown, isSlotDragSelected, }: WeekViewDayProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/WeekView/get-week-label/get-week-label.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import { DateLabelFormat, DateStringValue } from '../../../types';
+interface GetWeekLabelInput {
+    weekdays: Date[] | string[];
+    locale: string;
+    weekLabelFormat: DateLabelFormat;
+    renderWeekLabel?: (params: {
+        weekStart: DateStringValue;
+        weekEnd: DateStringValue;
+    }) => ReactNode;
+}
+export declare function getWeekLabel({ weekdays, locale, weekLabelFormat, renderWeekLabel, }: GetWeekLabelInput): ReactNode;
+export {};

package/lib/components/WeekView/get-week-view-events/assign-event-rows.d.ts

@@ -0,0 +1,2 @@
+import { ScheduleEventData, WeekPositionedEventData } from '../../../types';
+export declare function assignEventRows(events: WeekPositionedEventData[]): Map<ScheduleEventData, number>;

package/lib/components/WeekView/get-week-view-events/calculate-all-day-event-offset.d.ts

@@ -0,0 +1,11 @@
+import { Dayjs } from 'dayjs';
+import { DateStringValue } from '../../../types';
+interface CalculateAllDayEventOffsetInput {
+    eventStartDate: Dayjs;
+    weekStartDate: Dayjs;
+    weekDays: DateStringValue[];
+    visibleDaysCount: number;
+    hangingStart: boolean;
+}
+export declare function calculateAllDayEventOffset({ eventStartDate, weekStartDate, weekDays, visibleDaysCount, hangingStart, }: CalculateAllDayEventOffsetInput): number;
+export {};

package/lib/components/WeekView/get-week-view-events/calculate-all-day-event-width.d.ts

@@ -0,0 +1,12 @@
+import { Dayjs } from 'dayjs';
+import { DateStringValue } from '../../../types';
+interface CalculateAllDayEventWidthInput {
+    eventStartDate: Dayjs;
+    actualEndDate: Dayjs;
+    weekStartDate: Dayjs;
+    weekEndDate: Dayjs;
+    weekDays: DateStringValue[];
+    visibleDaysCount: number;
+}
+export declare function calculateAllDayEventWidth({ eventStartDate, actualEndDate, weekStartDate, weekEndDate, weekDays, visibleDaysCount, }: CalculateAllDayEventWidthInput): number;
+export {};

package/lib/components/WeekView/get-week-view-events/calculate-event-days.d.ts

@@ -0,0 +1,9 @@
+import { Dayjs } from 'dayjs';
+import { DateStringValue, ScheduleEventData } from '../../../types';
+interface CalculateEventDaysInput {
+    event: ScheduleEventData;
+    weekDays: DateStringValue[];
+    actualEndDate: Dayjs;
+}
+export declare function calculateEventDays({ event, weekDays, actualEndDate }: CalculateEventDaysInput): string[];
+export {};

package/lib/components/WeekView/get-week-view-events/calculate-regular-event-overlaps.d.ts

@@ -0,0 +1,2 @@
+import { WeekPositionedEventData } from '../../../types';
+export declare function calculateRegularEventOverlaps(events: WeekPositionedEventData[]): void;

package/lib/components/WeekView/get-week-view-events/filter-week-view-events.d.ts

@@ -0,0 +1,14 @@
+import { AnyDateValue, DayOfWeek, ScheduleEventData } from '../../../types';
+export interface FilterWeekViewEventsInput {
+    /** Date (week start) at which events are positioned, used to check if events are all-day */
+    date: AnyDateValue;
+    /** List of all events that belong to the given week, extra events must be filtered out before passing to the function */
+    events: ScheduleEventData[] | undefined;
+    /** Start time of the week view, used to calculate event positions */
+    startTime?: string;
+    /** End time of the week view, used to calculate event positions */
+    endTime?: string;
+    /** First day of the week, 0 - Sunday, 1 - Monday, etc., used to calculate events positions */
+    firstDayOfWeek?: DayOfWeek;
+}
+export declare function filterWeekViewEvents({ date, events, startTime, endTime, firstDayOfWeek, }: FilterWeekViewEventsInput): ScheduleEventData[];

package/lib/components/WeekView/get-week-view-events/find-available-column.d.ts

@@ -0,0 +1,9 @@
+import { DateStringValue, ScheduleEventData } from '../../../types';
+interface FindAvailableColumnInput {
+    columns: Map<string, ScheduleEventData[]>;
+    event: ScheduleEventData;
+    allDay: boolean;
+    allWeekDays: DateStringValue[];
+}
+export declare function findAvailableColumn(input: FindAvailableColumnInput): number;
+export {};

package/lib/components/WeekView/get-week-view-events/get-event-end-date.d.ts

@@ -0,0 +1,3 @@
+import dayjs from 'dayjs';
+import { ScheduleEventData } from '../../../types';
+export declare function getEventEndDate(event: ScheduleEventData): dayjs.Dayjs;

package/lib/components/WeekView/get-week-view-events/get-hanging-status.d.ts

@@ -0,0 +1,9 @@
+import { Dayjs } from 'dayjs';
+import { DateStringValue } from '../../../types';
+interface GetHangingStatusInput {
+    eventStartDate: Dayjs;
+    actualEndDate: Dayjs;
+    weekDays: DateStringValue[];
+}
+export declare function getHangingStatus({ eventStartDate, actualEndDate, weekDays, }: GetHangingStatusInput): 'start' | 'end' | 'both' | 'none';
+export {};

package/lib/components/WeekView/get-week-view-events/get-week-positioned-events.d.ts

@@ -0,0 +1,23 @@
+import { AnyDateValue, DateStringValue, DayOfWeek, ScheduleEventData, WeekPositionedEventData } from '../../../types';
+export interface GetWeekPositionedEventsInput {
+    /** Date (week start) at which events are positioned, used to check if events are all-day */
+    date: AnyDateValue;
+    /** List of all events that belong to the given week, extra events must be filtered out before passing to the function */
+    events: ScheduleEventData[];
+    /** Start time of the week view, used to calculate event positions */
+    startTime?: string;
+    /** End time of the week view, used to calculate event positions */
+    endTime?: string;
+    /** First day of the week, 0 - Sunday, 1 - Monday, etc., used to calculate events positions */
+    firstDayOfWeek?: DayOfWeek;
+    /** Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday */
+    weekendDays?: DayOfWeek[];
+    /** If set to false, weekend days are hidden @default true */
+    withWeekendDays?: boolean;
+}
+/** Events grouped by week day date (YYYY-MM-DD 00:00:00) and by columns */
+export interface GroupedWeekEvents {
+    allDayEvents: WeekPositionedEventData[];
+    regularEvents: Record<DateStringValue, WeekPositionedEventData[]>;
+}
+export declare function getWeekPositionedEvents({ date, events, startTime, endTime, firstDayOfWeek, weekendDays, withWeekendDays, }: GetWeekPositionedEventsInput): GroupedWeekEvents;

package/lib/components/WeekView/get-week-view-events/get-week-view-events.d.ts

@@ -0,0 +1,7 @@
+import { ScheduleEventData } from '../../../types';
+import { GetWeekPositionedEventsInput, GroupedWeekEvents } from './get-week-positioned-events';
+interface GetWeekViewEventsInput extends Omit<GetWeekPositionedEventsInput, 'events'> {
+    events: ScheduleEventData[] | undefined;
+}
+export declare function getWeekViewEvents(input: GetWeekViewEventsInput): GroupedWeekEvents;
+export {};

package/lib/components/WeekView/handle-week-view-key-down.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+/** Reference to a 2D array of slot buttons: [dayIndex][slotIndex] */
+export type WeekViewControlsRef = RefObject<HTMLButtonElement[][]>;
+export interface HandleWeekViewKeyDownInput {
+    controlsRef: WeekViewControlsRef;
+    dayIndex: number;
+    slotIndex: number;
+    event: React.KeyboardEvent<HTMLButtonElement>;
+}
+export declare function handleWeekViewKeyDown({ controlsRef, dayIndex, slotIndex, event, }: HandleWeekViewKeyDownInput): void;

package/lib/components/WeekView/index.d.ts

@@ -0,0 +1,9 @@
+import type { WeekViewCssVariables, WeekViewFactory, WeekViewProps, WeekViewStylesNames } from './WeekView';
+export { WeekView } from './WeekView';
+export type { WeekViewProps, WeekViewFactory, WeekViewStylesNames, WeekViewCssVariables };
+export declare namespace WeekView {
+    type Props = WeekViewProps;
+    type Factory = WeekViewFactory;
+    type StylesNames = WeekViewStylesNames;
+    type CssVariables = WeekViewCssVariables;
+}

package/lib/components/YearView/YearView.d.ts

@@ -0,0 +1,51 @@
+import { BoxProps, DataAttributes, ElementProps, Factory, MantineRadius, StylesApiProps } from '@mantine/core';
+import { DateStringValue, ScheduleEventData, ScheduleMode, ScheduleViewLevel } from '../../types';
+import { MonthYearSelectProps } from '../ScheduleHeader/MonthYearSelect/MonthYearSelect';
+import { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader';
+import { ViewSelectProps } from '../ScheduleHeader/ViewSelect/ViewSelect';
+import { YearViewMonthSettings } from './YearViewMonth';
+export type YearViewStylesNames = 'yearView' | 'yearViewMonths' | 'yearViewMonth' | 'yearViewWeekday' | 'yearViewDay' | 'yearViewWeek' | 'yearViewWeekNumber' | 'yearViewWeekdays' | 'yearViewWeekdaysCorner' | 'yearViewMonthCaption' | 'yearViewQuarter' | 'yearViewDayIndicators' | 'yearViewDayIndicator' | CombinedScheduleHeaderStylesNames;
+export type YearViewCssVariables = {
+    yearView: '--year-view-radius';
+};
+export interface YearViewProps extends YearViewMonthSettings, BoxProps, StylesApiProps<YearViewFactory>, ElementProps<'div'> {
+    __staticSelector?: string;
+    /** Date to display, Date object or date string in `YYYY-MM-DD 00:00:00` format */
+    date: Date | string;
+    /** Called with the new date value when a date is selected */
+    onDateChange?: (value: DateStringValue) => void;
+    /** Events to display, must be a stable reference */
+    events?: ScheduleEventData[];
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */
+    radius?: MantineRadius;
+    /** If set, highlights the current day @default true */
+    highlightToday?: boolean;
+    /** If set, the header is displayed @default true */
+    withHeader?: boolean;
+    /** Props passed down to `MonthYearSelect` component in the header */
+    monthYearSelectProps?: Partial<MonthYearSelectProps>;
+    /** Called when view level select button is clicked */
+    onViewChange?: (view: ScheduleViewLevel) => void;
+    /** Props passed to previous month control */
+    previousControlProps?: React.ComponentProps<'button'> & DataAttributes;
+    /** Props passed to next month control */
+    nextControlProps?: React.ComponentProps<'button'> & DataAttributes;
+    /** Props passed to today control */
+    todayControlProps?: React.ComponentProps<'button'> & DataAttributes;
+    /** Props passed to view level select */
+    viewSelectProps?: Partial<ViewSelectProps> & DataAttributes;
+    /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions @default default */
+    mode?: ScheduleMode;
+}
+export type YearViewFactory = Factory<{
+    props: YearViewProps;
+    ref: HTMLDivElement;
+    stylesNames: YearViewStylesNames;
+    vars: YearViewCssVariables;
+}>;
+export declare const YearView: import("@mantine/core").MantineComponent<{
+    props: YearViewProps;
+    ref: HTMLDivElement;
+    stylesNames: YearViewStylesNames;
+    vars: YearViewCssVariables;
+}>;

package/lib/components/YearView/YearViewMonth.d.ts

@@ -0,0 +1,62 @@
+import { GetStylesApi } from '@mantine/core';
+import { ScheduleLabelsOverride } from '../../labels';
+import { DateLabelFormat, DateStringValue, DayOfWeek, ScheduleMode } from '../../types';
+import { GroupedEvents } from './get-year-view-events/get-year-view-events';
+import type { YearViewFactory } from './YearView';
+export interface YearViewDayKeydownPayload {
+    weekIndex: number;
+    dayIndex: number;
+    date: string;
+}
+export interface YearViewMonthSettings {
+    /** `dayjs` format for month label  @default 'MMMM' */
+    monthLabelFormat?: DateLabelFormat;
+    /** If set, show week numbers */
+    withWeekNumbers?: boolean;
+    /** If set, weekdays names are displayed in the first row @default true */
+    withWeekDays?: boolean;
+    /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */
+    locale?: string;
+    /** Number 0-6, where 0 – Sunday and 6 – Saturday @default 0 */
+    firstDayOfWeek?: DayOfWeek;
+    /** `dayjs` format for weekdays names  @default 'd' */
+    weekdayFormat?: DateLabelFormat;
+    /** Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`. */
+    weekendDays?: DayOfWeek[];
+    /** Props passed down to the week number button */
+    getWeekNumberProps?: (weekStartDate: DateStringValue) => Record<string, any>;
+    /** Props passed down to the day button */
+    getDayProps?: (date: DateStringValue) => Record<string, any>;
+    /** Called when day is clicked */
+    onDayClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Called with first day of the week when week number is clicked */
+    onWeekNumberClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Called with the first day of the month when month label is clicked */
+    onMonthClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** If set, highlights the current day @default true */
+    highlightToday?: boolean;
+    /** Labels override for i18n */
+    labels?: ScheduleLabelsOverride;
+    /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions */
+    mode?: ScheduleMode;
+    /** If true, days from adjacent months are displayed @default true */
+    withOutsideDays?: boolean;
+}
+export interface YearViewMonthProps extends YearViewMonthSettings {
+    /** Month to display, Date object or date string in `YYYY-MM-DD` format */
+    month: Date | string;
+    /** `useStyles` return value of `YearView` */
+    getStyles: GetStylesApi<YearViewFactory>;
+    /** Events grouped by date */
+    groupedEvents?: GroupedEvents;
+    /** Assigns ref of every day based on its position in the month, used for keyboard navigation */
+    __getDayRef?: (weekIndex: number, dayIndex: number, node: HTMLButtonElement) => void;
+    /** Called when any keydown event is registered on day, used for keyboard navigation */
+    __onDayKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>, payload: YearViewDayKeydownPayload) => void;
+    /** Index of the first day of the month in the grid (for determining which day should be in tab order) */
+    firstDayIndex?: {
+        weekIndex: number;
+        dayIndex: number;
+    };
+}
+export declare function YearViewMonth({ month, getStyles, monthLabelFormat, withWeekNumbers, withWeekDays, locale, firstDayOfWeek, weekdayFormat, weekendDays, getDayProps, onDayClick, onWeekNumberClick, onMonthClick, getWeekNumberProps, highlightToday, groupedEvents, mode, withOutsideDays, __getDayRef, __onDayKeyDown, firstDayIndex, }: YearViewMonthProps): import("react/jsx-runtime").JSX.Element;