@progress/kendo-react-dateinputs 13.3.0 → 13.4.0-develop.2

package/calendar/components/View.d.ts

@@ -0,0 +1,101 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { CalendarCellProps } from './CalendarCell.js';
+import { CalendarWeekCellProps } from './CalendarWeekCell.js';
+import { CalendarViewEnum, CellContext, SelectionRange, SelectionRangeEnd, ViewService } from '../models/index.js';
+import { BusViewService } from '../services/index.js';
+import { WeekDaysFormat } from '../models/WeekDaysFormat.js';
+import { DateInputsClassStructure } from '@progress/kendo-react-common';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface ViewEventArguments {
+    syntheticEvent: React.SyntheticEvent<any>;
+    nativeEvent?: any;
+    value: Date;
+    target: View;
+}
+/**
+ * @hidden
+ */
+export interface ViewDimensions {
+    headerHight: number;
+    offsetHeight: number;
+}
+/**
+ * @hidden
+ */
+export interface ViewProps {
+    activeRangeEnd?: SelectionRangeEnd;
+    activeView: CalendarViewEnum;
+    bus: BusViewService;
+    cellUID: string;
+    direction?: 'horizontal' | 'vertical';
+    focusedDate: Date;
+    weekCell?: React.ComponentType<CalendarWeekCellProps>;
+    max: Date;
+    weekDaysFormat?: WeekDaysFormat;
+    min: Date;
+    cell?: React.ComponentType<CalendarCellProps>;
+    onCellEnter?: (date: Date) => void;
+    onCellLeave?: (date: Date | null) => void;
+    onChange?: (event: ViewEventArguments) => void;
+    onWeekSelect?: (firstDate: Date, daysToEqualize: number, event: React.MouseEvent<HTMLTableCellElement>) => void;
+    selectedDate: Date | Date[] | null;
+    selectionRange?: SelectionRange;
+    service: ViewService;
+    showWeekNumbers?: boolean;
+    showOtherMonthDays?: boolean;
+    viewDate: Date;
+    allowReverse?: boolean;
+    unstyled?: DateInputsClassStructure;
+}
+/**
+ * @hidden
+ */
+export declare class View extends React.Component<ViewProps, {}> {
+    static propTypes: {
+        activeRangeEnd: PropTypes.Requireable<string | null>;
+        activeView: PropTypes.Validator<number>;
+        cellUID: PropTypes.Validator<string>;
+        direction: PropTypes.Requireable<string>;
+        focusedDate: PropTypes.Validator<Date>;
+        max: PropTypes.Validator<Date>;
+        min: PropTypes.Validator<Date>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        selectedDate: PropTypes.Requireable<NonNullable<Date | (Date | null | undefined)[] | null | undefined>>;
+        showWeekNumbers: PropTypes.Requireable<boolean>;
+        showOtherMonthDays: PropTypes.Requireable<boolean>;
+        viewDate: PropTypes.Validator<Date>;
+    };
+    static defaultProps: {
+        direction: string;
+        selectedDate: Date;
+        showWeekNumbers: boolean;
+    };
+    private intl;
+    private weekService;
+    protected get min(): Date;
+    protected get max(): Date;
+    protected get isHorizontal(): boolean;
+    protected get isMonthView(): boolean;
+    protected get weekNumber(): boolean;
+    protected get selectedDate(): Date | Date[] | null;
+    render(): React.JSX.Element;
+    protected buildWeekNumber: (row: any, idx: number) => React.JSX.Element;
+    protected buildRow: (row: any) => any;
+    protected getWeekNumber(date: Date): number | null;
+    protected firstDate: (row: any) => Date | null;
+    protected firstWeekDateContext: (rowCtx: CellContext[]) => CellContext | null;
+    private handleClick;
+    private handleWeekCellClick;
+    private handleMouseEnter;
+    private handleMouseLeave;
+}

package/calendar/components/ViewList.d.ts

@@ -0,0 +1,128 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { DateInputsClassStructure } from '@progress/kendo-react-common';
+import { Virtualization } from '../../virtualization/Virtualization.js';
+import { BusViewService, DOMService } from '../services/index.js';
+import { CalendarCellProps } from './CalendarCell.js';
+import { ViewService, CalendarViewEnum } from '../models/index.js';
+import { CalendarWeekCellProps } from './CalendarWeekCell.js';
+import { CalendarHeaderTitleProps } from './CalendarHeaderTitle.js';
+import { WeekDaysFormat } from '../models/WeekDaysFormat.js';
+import { CalendarHeaderProps } from '../models/CalendarSettings.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface ViewListEventArguments {
+    syntheticEvent: React.SyntheticEvent<any>;
+    nativeEvent?: any;
+    value: Date;
+    target: ViewList;
+    isTodayClick?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface ViewListProps {
+    activeView: CalendarViewEnum;
+    bottomOffset?: number;
+    bus: BusViewService;
+    cellUID: string;
+    dom: DOMService;
+    focusedDate: Date;
+    max: Date;
+    min: Date;
+    cell?: React.ComponentType<CalendarCellProps>;
+    onScroll?: (event: React.SyntheticEvent) => void;
+    onChange?: (event: ViewListEventArguments) => void;
+    service: ViewService;
+    showWeekNumbers?: boolean;
+    smoothScroll?: boolean;
+    take?: number;
+    weekDaysFormat?: WeekDaysFormat;
+    value: Date | null;
+    viewHeight?: number;
+    viewOffset?: number;
+    weekCell?: React.ComponentType<CalendarWeekCellProps>;
+    showOtherMonthDays?: boolean;
+    headerTitle?: React.ComponentType<CalendarHeaderTitleProps>;
+    header?: React.ComponentType<CalendarHeaderProps>;
+    shouldScroll?: () => boolean;
+    tabIndex?: number;
+    unstyled?: DateInputsClassStructure;
+}
+/**
+ * @hidden
+ */
+export interface ViewListState {
+    skip: number;
+    index: number;
+}
+/**
+ * @hidden
+ */
+export declare class ViewList extends React.Component<ViewListProps, ViewListState> {
+    static propTypes: {
+        activeView: PropTypes.Validator<number>;
+        bottomOffset: PropTypes.Requireable<number>;
+        cellUID: PropTypes.Validator<string>;
+        focusedDate: PropTypes.Validator<Date>;
+        max: PropTypes.Validator<Date>;
+        min: PropTypes.Validator<Date>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        showWeekNumbers: PropTypes.Requireable<boolean>;
+        smoothScroll: PropTypes.Requireable<boolean>;
+        take: PropTypes.Requireable<number>;
+        value: PropTypes.Requireable<Date>;
+        viewHeight: PropTypes.Requireable<number>;
+        viewOffset: PropTypes.Requireable<number>;
+        weekDaysFormat: PropTypes.Requireable<string>;
+        tabIndex: PropTypes.Requireable<number>;
+    };
+    static defaultProps: {
+        take: number;
+        showWeekNumbers: boolean;
+        weekDaysFormat: string;
+        smoothScroll: boolean;
+    };
+    virtualization: Virtualization | null;
+    private calendarView;
+    private table;
+    private intl;
+    private bottomOffset;
+    private viewOffset;
+    private viewHeight;
+    private _element;
+    private lastView;
+    private isActive;
+    private animateToIndex;
+    private shouldScroll;
+    private indexToScroll?;
+    private lastFocus;
+    private weekService;
+    get element(): HTMLDivElement | null;
+    protected get weekNames(): string[];
+    protected get weekNumber(): boolean;
+    protected get take(): number;
+    protected get animate(): boolean;
+    protected get todayIsInRange(): boolean;
+    constructor(props: ViewListProps);
+    componentDidUpdate(_prevProps: ViewListProps, _prevState: ViewListState): void;
+    focusActiveDate: () => void;
+    blurActiveDate: () => void;
+    render(): React.JSX.Element;
+    protected handleVirtualizationMount: (virtualization: Virtualization) => void;
+    protected buildMonthView: (cols: any[], weekNames: any[]) => React.JSX.Element;
+    protected buildDates: (cols: any[], dates: Date[]) => React.JSX.Element;
+    protected calculateHeights: () => void;
+    protected getTake: (skip: number, total: number) => number;
+    private handleScrollAction;
+    private handleTodayClick;
+    private handleDateChange;
+}

package/calendar/models/ActiveView.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The literal type that defines all possible Calendar views.
+ */
+export type ActiveView = 'month' | 'year' | 'decade' | 'century';

package/calendar/models/CalendarSettings.d.ts

@@ -0,0 +1,256 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ActiveView } from './ActiveView.js';
+import { CalendarCellProps } from '../components/CalendarCell.js';
+import { CalendarWeekCellProps } from '../components/CalendarWeekCell.js';
+import { CalendarHeaderTitleProps } from '../components/CalendarHeaderTitle.js';
+import { CalendarNavigationItemProps } from '../components/CalendarNavigationItem.js';
+import { WeekDaysFormat } from './WeekDaysFormat.js';
+/**
+ * The props which will be received by the custom header of the Calendar and the MultiViewCalendar.
+ */
+export interface CalendarHeaderProps {
+    /** Properties passed to the header title component */
+    headerTitleProps: CalendarHeaderTitleProps;
+    /** Navigation commands and buttons for the calendar header */
+    commands: React.ReactNode;
+}
+/**
+ * @hidden
+ */
+export interface CalendarSettings {
+    /**
+     * Defines the bottommost view to which the user can navigate.
+     *
+     ** @example
+     * ```jsx
+     * <Calendar bottomView="month" />
+     * ```
+     */
+    bottomView?: ActiveView;
+    /**
+     * Sets the `className` of the Calendar.
+     *
+     ** @example
+     * ```jsx
+     * <Calendar className="custom-class" />
+     * ```
+     */
+    className?: string;
+    /**
+     * Sets the default active view of the Calendar.
+     * If not set, the Calendar will display the month view.
+     *
+     ** @example
+     * ```jsx
+     * <Calendar defaultActiveView="year" />
+     * ```
+     */
+    defaultActiveView?: ActiveView;
+    /**
+     * Determines whether the Calendar is disabled.
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/calendar/disabled-state)).
+     *
+     ** @example
+     * ```jsx
+     * <Calendar disabled={true} />
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * Sets the initial focused date of the Calendar.
+     *
+     ** @example
+     * ```jsx
+     * <Calendar focusedDate={new Date()} />
+     * ```
+     */
+    focusedDate?: Date;
+    /**
+     * Sets the `id` of the Calendar.
+     *
+     ** @example
+     * ```jsx
+     * <Calendar id="calendar-id" />
+     * ```
+     */
+    id?: string;
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example, these elements could contain error or hint messages.
+     *
+     ** @example
+     * ```jsx
+     * <Calendar ariaDescribedBy="description-id" />
+     * ```
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     *
+     ** @example
+     * ```jsx
+     * <Calendar ariaLabelledBy="label-id" />
+     * ```
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Sets the maximum allowed date of the Calendar. Defaults to `2099-12-31`.
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/calendar/date-ranges#toc-max-date)).
+     *
+     ** @example
+     * ```jsx
+     * <Calendar max={new Date(2099, 11, 31)} />
+     * ```
+     */
+    max?: Date;
+    /**
+     * Sets the minimum allowed date of the Calendar. Defaults to `1900-1-1`.
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/calendar/date-ranges#toc-min-date)).
+     *
+     ** @example
+     * ```jsx
+     * <Calendar min={new Date(1900, 0, 1)} />
+     * ```
+     */
+    min?: Date;
+    /**
+     * Determines if the navigation sidebar will be displayed.
+     *
+     ** @example
+     * ```jsx
+     * <Calendar navigation={true} />
+     * ```
+     */
+    navigation?: boolean;
+    /**
+     * **Deprecated**
+     *
+     * Toggles the smooth scroll animation on navigation item click. By default, the animation is enabled in React 17.
+     *
+     ** @example
+     * ```jsx
+     * <Calendar smoothScroll={false} />
+     * ```
+     */
+    smoothScroll?: boolean;
+    /**
+     * Fires each time the Calendar is blurred.
+     *
+     ** @example
+     * ```jsx
+     * <Calendar onBlur={(event) => console.log('Blur event:', event)} />
+     * ```
+     */
+    onBlur?: (event: React.FocusEvent<any>) => void;
+    /**
+     * Fires each time the Calendar is focused.
+     *
+     ** @example
+     * ```jsx
+     * <Calendar onFocus={(event) => console.log('Focus event:', event)} />
+     * ```
+     */
+    onFocus?: (event: React.FocusEvent<any>) => void;
+    /**
+     * Sets the `tabIndex` property of the Calendar.
+     *
+     ** @example
+     * ```jsx
+     * <Calendar tabIndex={0} />
+     * ```
+     */
+    tabIndex?: number;
+    /**
+     * Defines the topmost view to which the user can navigate.
+     *
+     ** @example
+     * ```jsx
+     * <Calendar topView="decade" />
+     * ```
+     */
+    topView?: ActiveView;
+    /**
+     * Specifies the possible format options for the displayed Calendar week days' names.
+     *
+     * @default short
+     ** @example
+     * ```jsx
+     * <Calendar weekDaysFormat="short" />
+     * ```
+     */
+    weekDaysFormat?: WeekDaysFormat;
+    /**
+     * Determines if the week number column will be displayed.
+     *
+     ** @example
+     * ```jsx
+     * <Calendar weekNumber={true} />
+     * ```
+     */
+    weekNumber?: boolean;
+    /**
+     * Displays the days that fall out of the current month.
+     *
+     ** @example
+     * ```jsx
+     * <Calendar showOtherMonthDays={true} />
+     * ```
+     */
+    showOtherMonthDays?: boolean;
+    /**
+     * Enables the customization or the override of the default Calendar cell.
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/calendar/custom-rendering#toc-cells-inside-the-view)).
+     *
+     ** @example
+     * ```jsx
+     * <Calendar cell={CustomCell} />
+     * ```
+     */
+    cell?: React.ComponentType<CalendarCellProps>;
+    /**
+     * Enables the customization or the override of the default week-column cell in the Calendar.
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/calendar/custom-rendering#toc-cells-inside-the-week-column)).
+     *
+     ** @example
+     * ```jsx
+     * <Calendar weekCell={CustomWeekCell} />
+     * ```
+     */
+    weekCell?: React.ComponentType<CalendarWeekCellProps>;
+    /**
+     * Enables the customization or the override of the default header title in the Calendar.
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/calendar/custom-rendering#toc-titles-of-current-views)).
+     *
+     ** @example
+     * ```jsx
+     * <Calendar headerTitle={CustomHeaderTitle} />
+     * ```
+     */
+    headerTitle?: React.ComponentType<CalendarHeaderTitleProps>;
+    /**
+     * Enables the customization or the override of the default header in the Calendar.
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/calendar/custom-rendering#toc-titles-of-current-views)).
+     *
+     ** @example
+     * ```jsx
+     * <Calendar header={CustomHeader} />
+     * ```
+     */
+    header?: React.ComponentType<CalendarHeaderProps>;
+    /**
+     * Enables the customization or the override of the default navigation item in the Calendar.
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/calendar/custom-rendering#toc-items-in-the-side-navigation)).
+     *
+     ** @example
+     * ```jsx
+     * <Calendar navigationItem={CustomNavigationItem} />
+     * ```
+     */
+    navigationItem?: React.ComponentType<CalendarNavigationItemProps>;
+}

package/calendar/models/CalendarViewEnum.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The Enum which defines all possible Calendar view types.
+ */
+export declare enum CalendarViewEnum {
+    month = 0,
+    year = 1,
+    decade = 2,
+    century = 3
+}

package/calendar/models/CellContext.d.ts

@@ -0,0 +1,72 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export interface CellContext {
+    /**
+     * The formatted string value displayed in the calendar cell.
+     */
+    formattedValue: string;
+    /**
+     * The unique identifier for the calendar cell.
+     */
+    id: string;
+    /**
+     * Indicates if the cell represents a weekend day.
+     */
+    isWeekend: boolean;
+    /**
+     * Indicates if the cell is currently focused.
+     */
+    isFocused: boolean;
+    /**
+     * Indicates if the cell is selected.
+     */
+    isSelected: boolean;
+    /**
+     * Indicates if the cell is within a selected date range.
+     */
+    isInRange: boolean;
+    /**
+     * Indicates if the cell is the start of a selected range.
+     */
+    isRangeStart: boolean;
+    /**
+     * Indicates if the cell is the end of a selected range.
+     */
+    isRangeEnd: boolean;
+    /**
+     * Indicates if the cell is in the middle of a selected range.
+     */
+    isRangeMid: boolean;
+    /**
+     * Indicates if the cell is the split end of a multi-range selection.
+     */
+    isRangeSplitEnd?: boolean;
+    /**
+     * Indicates if the cell is the split start of a multi-range selection.
+     */
+    isRangeSplitStart?: boolean;
+    /**
+     * Indicates if the cell represents today's date.
+     */
+    isToday: boolean;
+    /**
+     * The title attribute for the cell, used for accessibility or tooltips.
+     */
+    title?: string;
+    /**
+     * The date value represented by the cell.
+     */
+    value: Date;
+    /**
+     * Indicates if the cell belongs to another month in the current view.
+     */
+    isOtherMonth?: boolean;
+}

package/calendar/models/MultiViewCalendarMode.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Represents the selection modes of the MultiViewCalendar.
+ *
+ * The supported modes are:
+ * * (Default) `single`—Renders a single-date selection.
+ * * `multiple`—Renders a multiple-date selection.
+ * * `range`—Renders a date-range selection.
+ */
+export type MultiViewCalendarMode = 'single' | 'multiple' | 'range';