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

package/rows/GridRow.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
+ *-------------------------------------------------------------------------------------------
+ */
+import { GridRowProps } from '../interfaces/GridRowProps.js';
+import * as React from 'react';
+/**
+ * The component for each of the items in the `data` property which the Grid renders.
+ */
+export declare const GridRow: (props: GridRowProps) => React.JSX.Element;

package/rows/GridRowRenderer.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ExtendedColumnProps } from '../GridColumn.js';
+import { GridCellsSettings } from '../interfaces/GridCellsSettings.js';
+import { GridEditableSettings } from '../interfaces/GridEditableSettings.js';
+import { GridRowProps } from '../interfaces/GridRowProps.js';
+import { DataItemWrapper } from '../utils/index.js';
+import { GridStackedLayoutSettings } from '../interfaces/GridStackedLayoutSettings.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface GridRowRendererProps {
+    isStackedMode: boolean;
+    item: DataItemWrapper;
+    rowId: string;
+    dataIndex: number;
+    idPrefix?: string;
+    ariaRowIndex: number;
+    absoluteRowIndex: number;
+    isAltRow: boolean;
+    isHidden: boolean;
+    isRowReorderable: boolean;
+    rowHeight?: number;
+    rows?: GridRowProps['rows'];
+    leafColumns: ExtendedColumnProps[];
+    groupLevelCount: number;
+    stackedLayoutSettings?: GridStackedLayoutSettings;
+    cells?: GridCellsSettings;
+    editMode?: GridEditableSettings['mode'];
+    isSelected: boolean;
+    isHighlighted?: boolean;
+    isInEdit: boolean;
+    preparedCells: React.ReactElement[];
+    showDetailToggle: boolean;
+    isDetailExpanded: boolean;
+    detailExpandField?: string;
+}
+/**
+ * @hidden
+ */
+export declare const GridRowRenderer: React.FC<GridRowRendererProps>;

package/sortCommon.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 { GridColumnSortSettings, GridSortSettings } from './interfaces/GridSortSettings.js';
+/**
+ * @hidden
+ */
+export declare const normalizeSortable: (...settings: (GridSortSettings | GridColumnSortSettings)[]) => any;
+/**
+ * @hidden
+ */
+export declare const sortSeqMap: any;
+/**
+ * @hidden
+ */
+export declare const firstLevelSortSeqMap: any;

package/stacked/GridStackedCell.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
+ *-------------------------------------------------------------------------------------------
+ */
+import * as React from 'react';
+/**
+ * Props for the GridStackedCell component.
+ *
+ * @hidden
+ */
+export interface GridStackedCellProps {
+    /**
+     * The column title to display as the header label.
+     */
+    header?: string;
+    /**
+     * The content to display (field value or custom cell content).
+     */
+    children: React.ReactNode;
+    /**
+     * Indicates whether the cell is in edit mode.
+     */
+    isInEdit?: boolean;
+    /**
+     * The edit mode of the grid ('incell', 'inline', or 'dialog').
+     */
+    editMode?: 'incell' | 'inline' | 'dialog';
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+    /**
+     * The column index for navigation purposes.
+     */
+    columnIndex?: number;
+    /**
+     * The ID for keyboard navigation.
+     */
+    id?: string;
+    /**
+     * Additional style to apply to the cell.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Click handler.
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Keyboard event handler.
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
+    /**
+     * External ref to be merged with internal ref.
+     */
+    cellRef?: React.Ref<HTMLDivElement>;
+}
+/**
+ * Memoized version of GridStackedCell to optimize rendering performance.
+ * Only re-renders when props that affect the cell's appearance or behavior change.
+ */
+/**
+ * @hidden
+ */
+export declare const GridStackedCell: React.MemoExoticComponent<(props: GridStackedCellProps) => React.JSX.Element>;

package/stacked/GridStackedDetailToggle.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 * as React from 'react';
+/** @hidden */
+export interface GridStackedDetailToggleProps {
+    dataItem: any;
+    dataIndex?: number;
+    expanded: boolean;
+    field?: string;
+}
+/** @hidden */
+export declare const GridStackedDetailToggle: {
+    (props: GridStackedDetailToggleProps): React.JSX.Element;
+    displayName: string;
+};

package/stacked/GridStackedDetailToggle.mjs

@@ -12,9 +12,9 @@ import { useLocalization as E } from "@progress/kendo-react-intl";
 import { DETAIL_EXPAND_ACTION as h } from "@progress/kendo-react-data-tools";
 import { Button as D } from "@progress/kendo-react-buttons";
 import { GridContext as y } from "../utils/GridContext.mjs";
-import { messages as I, detailCollapse as k, detailExpand as v } from "../messages/index.mjs";
+import { detailCollapse as I, detailExpand as k, messages as v } from "../messages/index.mjs";
 const G = (c) => {
-  const { dataItem: t, dataIndex: m, expanded: a, field: r } = c, e = l.useContext(y), d = E(), o = a ? k : v, p = d.toLanguageString(o, I[o]), f = (i) => {
+  const { dataItem: t, dataIndex: m, expanded: a, field: r } = c, e = l.useContext(y), d = E(), o = a ? I : k, p = d.toLanguageString(o, v[o]), f = (i) => {
     i.preventDefault(), e != null && e.itemChange && e.itemChange({
       dataItem: t,
       dataIndex: m,

package/stacked/GridStackedRow.d.ts

@@ -0,0 +1,214 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ComponentType } from 'react';
+import { GridStackedLayoutSettings } from '../interfaces/GridStackedLayoutSettings.js';
+import { GridCellsSettings } from '../interfaces/GridCellsSettings.js';
+import * as React from 'react';
+/**
+ * Props passed to custom cell components in stacked layout mode.
+ * Similar to GridCustomCellProps but adapted for stacked layout rendering.
+ *
+ * @hidden
+ */
+export interface GridStackedCustomCellProps {
+    /**
+     * The data item for this row.
+     */
+    dataItem: any;
+    /**
+     * The field name from the column.
+     */
+    field?: string;
+    /**
+     * The column title.
+     */
+    title?: string;
+    /**
+     * The row type - always 'data' for stacked layout.
+     */
+    rowType: 'data';
+    /**
+     * The zero-based index of the data item in the data collection.
+     */
+    dataIndex?: number;
+    /**
+     * The index of the column in the visible columns collection.
+     */
+    columnIndex: number;
+    /**
+     * Indicates whether the row is selected.
+     */
+    isSelected?: boolean;
+    /**
+     * Indicates whether the cell is in edit mode.
+     */
+    isInEdit?: boolean;
+    /**
+     * Format string for the value.
+     */
+    format?: string;
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+    /**
+     * The column type.
+     */
+    columnType?: string;
+    /**
+     * The props for the stacked cell container div.
+     * Use this to apply default props to your custom cell wrapper.
+     */
+    stackedCellProps: {
+        className: string;
+        'data-grid-col-index': number;
+        id?: string;
+        style?: React.CSSProperties;
+        tabIndex: number;
+        onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+        onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
+        onDoubleClick?: (event: React.MouseEvent<HTMLElement>) => void;
+        onContextMenu?: (event: React.MouseEvent<HTMLElement>) => void;
+        ref?: React.Ref<any>;
+        onFocus?: (event: React.FocusEvent<HTMLElement>) => void;
+    };
+    /**
+     * The default content (field value) that would be rendered.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Represents column properties needed for stacked row rendering.
+ *
+ * @hidden
+ */
+export interface GridStackedColumnProps {
+    /** Unique identifier for the column */
+    id?: string;
+    /** The field name from the data item */
+    field?: string;
+    /** The column title to display as label */
+    title?: string;
+    /** The column type */
+    columnType?: string;
+    /** Whether the column is hidden */
+    hidden?: boolean;
+    /**
+     * Indicates whether the column participates in accessibility and rendering.
+     * Used to exclude service/group columns in stacked layout.
+     */
+    isAccessible?: boolean;
+    /** Whether the column is editable */
+    editable?: boolean;
+    /**
+     * Custom cell component for this column.
+     * The component receives GridStackedCustomCellProps.
+     */
+    cell?: ComponentType<GridStackedCustomCellProps>;
+    /**
+     * Specifies a set of cell components that the Grid will render instead of the built-in cells.
+     * Use `cells.data` to provide a custom data cell component.
+     */
+    cells?: GridCellsSettings;
+    /** Format string for the value */
+    format?: string;
+    /** Additional CSS class name for the cell */
+    className?: string;
+}
+/**
+ * Props for the GridStackedRow component.
+ *
+ * @hidden
+ */
+export interface GridStackedRowProps {
+    /**
+     * The data item for this row.
+     */
+    dataItem: any;
+    /**
+     * The columns to render in the stacked layout.
+     */
+    columns: GridStackedColumnProps[];
+    /**
+     * The stacked layout configuration.
+     */
+    stackedLayoutSettings?: GridStackedLayoutSettings;
+    /**
+     * The zero-based index of the data item in the data collection.
+     */
+    dataIndex?: number;
+    /**
+     * Whether this is an alternating row.
+     */
+    isAltRow?: boolean;
+    /**
+     * Indicates whether the row is selected.
+     */
+    isSelected?: boolean;
+    /**
+     * Indicates whether the row is in edit mode.
+     */
+    isInEdit?: boolean;
+    /**
+     * The edit mode of the Grid.
+     */
+    editMode?: 'inline' | 'incell' | 'dialog';
+    /**
+     * Grid-level custom cells configuration.
+     * Column-level cells take precedence over grid-level cells.
+     */
+    cells?: GridCellsSettings;
+    /**
+     * ID prefix for keyboard navigation.
+     */
+    idPrefix?: string;
+    /**
+     * Additional class name for the row.
+     */
+    className?: string;
+    /**
+     * Additional style for the row.
+     */
+    style?: React.CSSProperties;
+    /**
+     * ARIA row index for accessibility.
+     */
+    ariaRowIndex?: number;
+    /**
+     * Absolute row index in the grid.
+     */
+    absoluteRowIndex?: number;
+    /**
+     * The group level for this row (number of parent groups).
+     * Used to render group spacer cells before the stacked content.
+     */
+    groupLevel?: number;
+    /**
+     * The prepared cells for this row.
+     */
+    preparedCells?: React.ReactElement<any>[];
+    /**
+     * When enabled, renders an expand/collapse detail toggle in stacked mode.
+     */
+    showDetailToggle?: boolean;
+    /**
+     * Indicates whether the detail row for this data item is expanded.
+     */
+    isDetailExpanded?: boolean;
+    /**
+     * The field name used to track detail expansion.
+     */
+    detailExpandField?: string;
+}
+/**
+ * @hidden
+ */
+export declare const GridStackedRow: {
+    (props: GridStackedRowProps): React.JSX.Element;
+    displayName: string;
+};

package/stacked/StackedModeComponents.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface StackedModeColGroupProps {
+    groupLevelCount: number;
+}
+/**
+ * @hidden
+ */
+export declare const StackedModeColGroup: React.FC<StackedModeColGroupProps>;
+/**
+ * @hidden
+ */
+export interface StackedModeDetailRowProps {
+    detailRowId: string;
+    className: string;
+    isHidden: boolean;
+    detailRowHeight?: number;
+    ariaRowIndex: number;
+    groupLevelCount: number;
+    dataItem: any;
+    dataIndex: number;
+    detail: any;
+    id: string;
+    DetailCell: React.ComponentType<{
+        dataItem: any;
+        dataIndex: number;
+        colSpan: number;
+        ariaColIndex: number;
+        detail: any;
+        id: string;
+    }>;
+}
+/**
+ * @hidden
+ */
+export declare const StackedModeDetailRow: React.FC<StackedModeDetailRowProps>;

package/stacked/StackedModeRow.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ExtendedColumnProps } from '../GridColumn.js';
+import { GridCellsSettings } from '../interfaces/GridCellsSettings.js';
+import { GridEditableSettings } from '../interfaces/GridEditableSettings.js';
+import { GridRowProps } from '../interfaces/GridRowProps.js';
+import { DataItemWrapper } from '../utils/index.js';
+import { GridStackedLayoutSettings } from '../interfaces/GridStackedLayoutSettings.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface StackedModeRowProps {
+    item: DataItemWrapper;
+    rowId: string;
+    dataIndex: number;
+    idPrefix?: string;
+    ariaRowIndex: number;
+    absoluteRowIndex: number;
+    isAltRow: boolean;
+    isHidden: boolean;
+    isRowReorderable: boolean;
+    rowHeight?: number;
+    rows?: GridRowProps['rows'];
+    leafColumns: ExtendedColumnProps[];
+    groupLevelCount: number;
+    stackedLayoutSettings?: GridStackedLayoutSettings;
+    cells?: GridCellsSettings;
+    editMode?: GridEditableSettings['mode'];
+    isSelected: boolean;
+    isHighlighted?: boolean;
+    isInEdit: boolean;
+    preparedCells: React.ReactElement[];
+    showDetailToggle: boolean;
+    isDetailExpanded: boolean;
+    detailExpandField?: string;
+}
+/**
+ * @hidden
+ */
+export declare const StackedModeRow: React.FC<StackedModeRowProps>;