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

package/interfaces/GanttProps.d.ts

@@ -0,0 +1,238 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { GanttBaseProps } from './GanttBaseProps.js';
+import { GanttTaskModelFields } from './GanttTaskModelFields.js';
+import { GanttDependencyModelFields } from './GanttDependencyModelFields.js';
+import { GanttView } from './GanttView.js';
+import { GanttViewChangeEvent, GanttDataStateChangeEvent, GanttSortChangeEvent, GanttFilterChangeEvent, GanttExpandChangeEvent, GanttRowClickEvent, GanttColumnResizeEvent, GanttColumnReorderEvent, GanttColumnMenuFilterChangeEvent, GanttAddClickEvent, GanttTaskContextMenuEvent, GanttTaskClickEvent, GanttTaskDoubleClickEvent, GanttRowDoubleClickEvent, GanttRowContextMenuEvent, GanttTaskRemoveClickEvent, GanttDependencyCreateEvent, GanttKeyDownEvent, GanttSelectionChangeEvent, GanttHeaderSelectionChangeEvent } from './events.js';
+import { DataItem } from './DataItem.js';
+import { GanttDependency } from './GanttDependency.js';
+/**
+ * Represents the props of the [KendoReact Gantt component](https://www.telerik.com/kendo-react-ui/components/gantt).
+ */
+export interface GanttProps extends GanttBaseProps {
+    /**
+     * Adds custom CSS classes to the Gantt component.
+     *
+     * @example
+     * ```jsx
+     * <Gantt className="custom-class" />
+     * ```
+     */
+    className?: string;
+    /**
+     * Sets custom styles for the Gantt component.
+     *
+     * @example
+     * ```jsx
+     * <Gantt style={{ height: '500px' }} />
+     * ```
+     */
+    style?: React.CSSProperties;
+    /**
+     * Provides task data for the Gantt chart. Tasks appear as visual bars in the timeline.
+     *
+     * @example
+     * ```jsx
+     * const tasks = [{ id: 1, title: 'Task 1', start: new Date(), end: new Date() }];
+     * <Gantt taskData={tasks} />
+     * ```
+     *
+     * @slug task_data_gantt
+     */
+    taskData?: DataItem[];
+    /**
+     * Provides dependency data for the Gantt chart. Dependencies appear as visual connections between tasks.
+     *
+     * @example
+     * ```jsx
+     * const dependencies = [{ id: 1, from: 1, to: 2 }];
+     * <Gantt dependencyData={dependencies} />
+     * ```
+     *
+     * @slug dependency_data_gantt
+     */
+    dependencyData?: GanttDependency[];
+    /**
+     * Maps field names for reading task data from your data source.
+     *
+     * @example
+     * ```jsx
+     * const taskModelFields = { id: 'id', title: 'title', start: 'start', end: 'end' };
+     * <Gantt taskModelFields={taskModelFields} />
+     * ```
+     */
+    taskModelFields?: GanttTaskModelFields;
+    /**
+     * Maps field names for reading dependency data from your data source.
+     *
+     * @example
+     * ```jsx
+     * const dependencyModelFields = { id: 'id', from: 'from', to: 'to' };
+     * <Gantt dependencyModelFields={dependencyModelFields} />
+     * ```
+     */
+    dependencyModelFields?: GanttDependencyModelFields;
+    /**
+     * Provides view components as children. The Gantt renders the currently selected view.
+     *
+     * @example
+     * ```jsx
+     * <Gantt>
+     *   <GanttWeekView title="Day" />
+     *   <GanttDayView title="Week" />
+     * </Gantt>
+     * ```
+     */
+    children?: GanttView[] | GanttView;
+    /**
+     * Sets the view that shows first when the Gantt loads. You can choose from:
+     * * `day`
+     * * `week` (Default)
+     * * `month`
+     * * `year`
+     *
+     * @default "week"
+     *
+     * @example
+     * ```jsx
+     * <Gantt defaultView="month" />
+     * ```
+     */
+    defaultView?: string;
+    /**
+     * Controls which view is currently shown. The value must match the `title` property of a view.
+     *
+     * @example
+     * ```jsx
+     * <Gantt view="day" />
+     * ```
+     */
+    view?: string;
+    /**
+     * Sets the timezone for displaying dates and times in the Gantt chart.
+     * For example, `Europe/Sofia`.
+     *
+     * @example
+     * ```jsx
+     * <Gantt timezone="Europe/Sofia" />
+     * ```
+     */
+    timezone?: string;
+    /**
+     * Sets the height of all rows in pixels. All rows have the same height.
+     *
+     * @default 50
+     *
+     * @example
+     * ```jsx
+     * <Gantt rowHeight={40} />
+     * ```
+     */
+    rowHeight?: number;
+    /**
+     * Configures the toolbar options. You can enable the add task button.
+     *
+     * @example
+     * ```jsx
+     * <Gantt toolbar={{ addTaskButton: true }} />
+     * ```
+     */
+    toolbar?: {
+        addTaskButton: boolean;
+    };
+    /**
+     * Fires when the user selects a different view. Use this to control which view is shown.
+     *
+     * @example
+     * ```jsx
+     * const handleViewChange = (args) => console.log(args.view);
+     * <Gantt onViewChange={handleViewChange} />
+     * ```
+     */
+    onViewChange?: (args: GanttViewChangeEvent) => void;
+    /**
+     * Fires when the user changes the column menu filter.
+     */
+    onColumnMenuFilterChange?: (event: GanttColumnMenuFilterChangeEvent) => void;
+    /**
+     * Fires when the data state changes.
+     */
+    onDataStateChange?: (event: GanttDataStateChangeEvent) => void;
+    /**
+     * Fires when the sorting of the Gantt is changed ([see example](https://www.telerik.com/kendo-react-ui/components/gantt/sorting)).
+     * You need to handle the event yourself and sort the data.
+     */
+    onSortChange?: (event: GanttSortChangeEvent) => void;
+    /**
+     * Fires when the Gantt filter is modified through the UI
+     * ([more information and examples](https://www.telerik.com/kendo-react-ui/components/gantt/filtering)).
+     * You need to handle the event yourself and filter the data.
+     */
+    onFilterChange?: (event: GanttFilterChangeEvent) => void;
+    /**
+     * Fires when the user clicks the expand or collapse icon on a row.
+     */
+    onExpandChange?: (event: GanttExpandChangeEvent) => void;
+    /**
+     * Fires when the user clicks the add task button.
+     */
+    onAddClick?: (event: GanttAddClickEvent) => void;
+    /**
+     * Fires when the user resizes a column.
+     */
+    onColumnResize?: (event: GanttColumnResizeEvent) => void;
+    /**
+     * Fires when the user reorders columns.
+     */
+    onColumnReorder?: (event: GanttColumnReorderEvent) => void;
+    /**
+     * Fires when the user clicks a row.
+     */
+    onRowClick?: (event: GanttRowClickEvent) => void;
+    /**
+     * Fires when the user double-clicks a row.
+     */
+    onRowDoubleClick?: (event: GanttRowDoubleClickEvent) => void;
+    /**
+     * Fires when the user right-clicks on a row.
+     */
+    onRowContextMenu?: (event: GanttRowContextMenuEvent) => void;
+    /**
+     * Fires when the user clicks a task.
+     */
+    onTaskClick?: (event: GanttTaskClickEvent) => void;
+    /**
+     * Fires when the user double-clicks a task.
+     */
+    onTaskDoubleClick?: (event: GanttTaskDoubleClickEvent) => void;
+    /**
+     * Fires when the user right-clicks on a task.
+     */
+    onTaskContextMenu?: (event: GanttTaskContextMenuEvent) => void;
+    /**
+     * Fires when the user clicks the remove button on a task.
+     */
+    onTaskRemoveClick?: (event: GanttTaskRemoveClickEvent) => void;
+    /**
+     * Fires when the user creates a dependency by connecting two tasks.
+     */
+    onDependencyCreate?: (event: GanttDependencyCreateEvent) => void;
+    /**
+     * Fires when the user presses any keyboard key.
+     */
+    onKeyDown?: (event: GanttKeyDownEvent) => void;
+    /**
+     * Fires when the user selects or deselects rows or cells.
+     */
+    onSelectionChange?: (event: GanttSelectionChangeEvent) => void;
+    /**
+     * Fires when the user clicks the checkbox in a column header.
+     */
+    onHeaderSelectionChange?: (event: GanttHeaderSelectionChangeEvent) => void;
+}

package/interfaces/GanttRowProps.d.ts

@@ -0,0 +1,98 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The props that the Gantt passes to the GanttRow component when creating it.
+ */
+export interface GanttRowProps {
+    /**
+     * The `data` object that represents the current row.
+     */
+    dataItem: any;
+    /**
+     * The event that is fired when the row is clicked.
+     */
+    onClick?: any;
+    /**
+     * The event that is fired when the row is double clicked.
+     */
+    onDoubleClick?: any;
+    /**
+     * The event that is fired when the row context menu is triggered.
+     */
+    onContextMenu?: any;
+    /**
+     * The name of the field which will provide a Boolean representation of the selected state of the item.
+     */
+    selectedField?: string;
+    /**
+     * Sets the height of the row.
+     */
+    rowHeight?: number;
+    /**
+     * A function for overriding the default rendering of the row.
+     */
+    render?: (row: React.ReactElement<HTMLTableRowElement>, props: GanttRowProps) => React.ReactNode;
+    /**
+     * An array of indexes of each parent and current item in the data tree.
+     */
+    level: number[];
+    /**
+     * Fires when a row is dragged.
+     */
+    onDrag?: (event: {
+        nativeEvent: any;
+        dragged: number[];
+        draggedOver: number[] | null;
+        draggedItem: any;
+    }) => void;
+    /**
+     * Fires when a row is dragged and dropped.
+     */
+    onDrop?: (event: {
+        nativeEvent: any;
+        dragged: number[];
+        draggedOver: number[] | null;
+        draggedItem: any;
+    }) => void;
+    /**
+     * The expanded state of the row. Useful for applying `aria-expanded` accessibility attribute.
+     */
+    expanded: boolean;
+    /**
+     * The index of the row. Useful for applying `aria-rowindex` accessibility attribute.
+     */
+    rowIndex: number;
+    /**
+     * @hidden
+     */
+    children: React.ReactNode;
+    /**
+     * @hidden
+     */
+    levels: number[][];
+    /**
+     * @hidden
+     */
+    isAltRow?: boolean;
+    /**
+     * The index to be applied to the `aria-rowindex` attribute.
+     */
+    ariaRowIndex?: number;
+    /**
+     * The count of items on current level, applied to the `aria-setsize` attribute.
+     */
+    ariaSetSize?: number;
+    /**
+     * The index of the item on current level, applied to the `aria-posinset` attribute.
+     */
+    ariaPosInSet?: number;
+    /**
+     * Indicates if the row is selected.
+     */
+    isSelected: boolean;
+}

package/interfaces/GanttSelectableSettings.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { TableSelectableMode, TableSelectableSettings } from '@progress/kendo-react-data-tools';
+/**
+ * Represents the available selection modes.
+ */
+export type GanttSelectableMode = TableSelectableMode;
+/**
+ * Represents the Gantt selectable settings.
+ */
+export interface GanttSelectableSettings extends TableSelectableSettings {
+    /**
+     * The available values are:
+     * * `single`
+     * * `multiple`
+     *
+     * @default "multiple"
+     */
+    mode?: GanttSelectableMode;
+}

package/interfaces/GanttSlotType.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 types of Gantt slot.
+ */
+export type GanttSlotType = 'time' | 'day' | 'week' | 'month' | 'year';

package/interfaces/GanttSortSettings.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ColumnSortSettings, SortSettings } from '@progress/kendo-react-data-tools';
+/**
+ * The settings for sorting the Gantt columns.
+ */
+export type GanttColumnSortSettings = ColumnSortSettings;
+/**
+ * The settings for sorting the Gantt data.
+ */
+export type GanttSortSettings = SortSettings;
+/**
+ * @hidden
+ */
+export declare const normalize: (...settings: (GanttSortSettings | GanttColumnSortSettings)[]) => any;

package/interfaces/GanttTaskModelFields.d.ts

@@ -0,0 +1,67 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Defines the model fields that will be used for creating `GanttTask` instances.
+ */
+export interface GanttTaskModelFields {
+    /**
+     * The name of the `ID` model field.
+     * Defaults to `"id"`.
+     */
+    id?: string;
+    /**
+     * The name of the start date model field.
+     * Defaults to `"start"`.
+     */
+    start?: string;
+    /**
+     * The name of the end date model field.
+     * Defaults to `"end"`.
+     */
+    end?: string;
+    /**
+     * The name of the title model field.
+     * Defaults to `"title"`.
+     */
+    title?: string;
+    /**
+     * The name of the percent complete model field.
+     * Defaults to `"percentComplete"`.
+     */
+    percentComplete?: string;
+    /**
+     * The name of the percent complete model field.
+     * Defaults to `"parentId"`.
+     */
+    parentId?: string;
+    /**
+     * The name of the is rollup model field.
+     * Defaults to `"isRollup"`.
+     */
+    isRollup?: string;
+    /**
+     * The name of the is expanded model field. It will provide a Boolean representation of the expanded state of the item.
+     * Defaults to `"isExpanded"`.
+     */
+    isExpanded?: string;
+    /**
+     * The name of the children model field. It will provide an array representation of the item subitems.
+     * Defaults to `"children"`.
+     */
+    children?: string;
+    /**
+     * The name of the is in edit model field. It will provide a Boolean representation of the edit state of the current item.
+     * Defaults to `"isInEdit"`.
+     */
+    isInEdit?: string;
+    /**
+     * The name of the selected model field. It will provide a Boolean representation of the selected state of the current item.
+     * Defaults to `"isSelected"`.
+     */
+    isSelected?: string;
+}

package/interfaces/GanttView.d.ts

@@ -0,0 +1,147 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { LocalizationService, IntlService } from '@progress/kendo-react-intl';
+import { Day } from '@progress/kendo-date-math';
+import { DateRange } from './DateRange.js';
+import { GanttViewTimelineHeaderCellProps } from './GanttViewTimelineHeaderCellProps.js';
+/**
+ * Represents the arguments which are passed to the [dateRange](https://www.telerik.com/kendo-react-ui/components/gantt/api/ganttviewprops#toc-daterange) function.
+ */
+export interface GanttViewDateRangeArgs {
+    /**
+     * The earliest start date among all tasks.
+     */
+    tasksStart: Date;
+    /**
+     * The latest end date among all tasks.
+     */
+    tasksEnd: Date;
+    /**
+     * The internationalization service for date formatting and localization.
+     */
+    intl: IntlService;
+    /**
+     * The timezone identifier for date calculations.
+     */
+    timezone?: string;
+    /**
+     * The number of days to include in the date range calculation.
+     */
+    numberOfDays?: number;
+}
+export type GanttViewDateRangeFunction = (args: GanttViewDateRangeArgs) => DateRange;
+/**
+ * Represents the Object which is passed to the [`ref`](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) callback of the GanttView component.
+ */
+export interface GanttViewHandle {
+    /**
+     * Method to allow the scroll to be set to a specific row index.
+     */
+    scrollIntoView: (options: {
+        rowIndex?: number;
+    }) => void;
+}
+/**
+ * Represents the required props which every [GanttView](https://www.telerik.com/kendo-react-ui/components/gantt/api/ganttview) must accept.
+ */
+export interface GanttViewProps {
+    /**
+     * The name property is used by the Gantt to match which view is selected. Every view has a default name.
+     *
+     * @example
+     * ```jsx
+     * <GanttView name="dayView" />
+     * ```
+     */
+    name?: string;
+    /**
+     * The title to be displayed in the view selection list in the Toolbar.
+     * If a function is passed, it will receive a [LocalizationService](https://www.telerik.com/kendo-react-ui/components/intl/api/localizationservice) as an argument.
+     *
+     * @example
+     * ```jsx
+     * <GanttView title="Day View" />
+     * <GanttView title={(localization) => localization.toLanguageString('custom.title', 'Custom Title')} />
+     * ```
+     */
+    title?: string | ((localization: LocalizationService) => string);
+    /**
+     * The width of a single time slot in pixels. Default is 100px.
+     *
+     * @default 100
+     *
+     * @example
+     * ```jsx
+     * <GanttView slotWidth={120} />
+     * ```
+     */
+    slotWidth?: number;
+    /**
+     * Overrides the `dateRange` calculated by the `Gantt` component.
+     *
+     * If a function is passed, an object of type [GanttViewDateRangeArgs](https://www.telerik.com/kendo-react-ui/components/gantt/api/ganttviewdaterangeargs) will be passed.
+     *
+     * @example
+     * ```jsx
+     * <GanttView dateRange={{ start: new Date(2023, 0, 1), end: new Date(2023, 0, 31) }} />
+     * <GanttView dateRange={(args) => ({ start: args.tasksStart, end: args.tasksEnd })} />
+     * ```
+     */
+    dateRange?: DateRange | ((args: GanttViewDateRangeArgs) => DateRange);
+    /**
+     * Sets the start of the work day.
+     *
+     * @example
+     * ```jsx
+     * <GanttView workDayStart="08:00" />
+     * ```
+     */
+    workDayStart?: string;
+    /**
+     * Sets the end of the work day.
+     *
+     * @example
+     * ```jsx
+     * <GanttView workDayEnd="17:00" />
+     * ```
+     */
+    workDayEnd?: string;
+    /**
+     * The start of the work week.
+     *
+     * @example
+     * ```jsx
+     * <GanttView workWeekStart={Day.Monday} />
+     * ```
+     */
+    workWeekStart?: Day;
+    /**
+     * The end of the work week.
+     *
+     * @example
+     * ```jsx
+     * <GanttView workWeekEnd={Day.Friday} />
+     * ```
+     */
+    workWeekEnd?: Day;
+    /**
+     * The component to be rendered in header cells of the timeline part of the Gantt.
+     *
+     * @example
+     * ```jsx
+     * <GanttView timelineHeaderCell={CustomHeaderCell} />
+     * ```
+     */
+    timelineHeaderCell?: React.ComponentType<GanttViewTimelineHeaderCellProps>;
+    /** @hidden */
+    firstSlotRangeRef?: React.MutableRefObject<DateRange | null>;
+}
+/**
+ * Represents a single Gantt view.
+ */
+export type GanttView = React.ReactElement<GanttViewProps>;

package/interfaces/GanttViewTimelineHeaderCellProps.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DateRange } from './DateRange.js';
+import { GanttSlotType } from './GanttSlotType.js';
+/**
+ * The props of the Gantt view timeline header cell component.
+ */
+export interface GanttViewTimelineHeaderCellProps {
+    /**
+     * The date range of the cell.
+     */
+    range: DateRange;
+    /**
+     * Indicates if the cell is in work time.
+     */
+    isWork: boolean;
+    /**
+     * The default cell text value.
+     */
+    text: string;
+    /**
+     * The type of the cell slot.
+     */
+    type: GanttSlotType;
+    /**
+     * The header cell row index.
+     */
+    rowIndex: number;
+    /**
+     * The header cell index.
+     */
+    index: number;
+}

package/interfaces/Rectangle.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @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 Rectangle {
+    top: number;
+    start: number;
+    end: number;
+}

package/interfaces/Slot.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DateRange } from './DateRange.js';
+import { GanttSlotType } from './GanttSlotType.js';
+/**
+ * @hidden
+ */
+export interface Slot {
+    range: DateRange;
+    isWork: boolean;
+    span: number;
+    text: string;
+    type: GanttSlotType;
+}