@revolist/revogrid 4.23.8 → 4.23.10

package/dist/types/components/overlay/revogr-overlay-selection.d.ts

@@ -3,7 +3,7 @@ import ColumnService from '../data/column.service';
 import { type DSourceState } from "../../store/index";
 import { EventData } from './selection.utils';
 import { type Observable } from '../../utils';
-import type { SelectionStoreState, DimensionSettingsState, DataType, DimensionRows, ColumnRegular, DimensionCols, DragStartEvent, Cell, MultiDimensionType, Nullable, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, FocusRenderEvent, ApplyFocusEvent, AllDimensionType, Editors, BeforeSaveDataDetails, BeforeEdit, RangeArea, TempRange, ChangedRange, BeforeRangeSaveDataDetails, SaveDataDetails, EditCellStore } from "../../types/index";
+import type { SelectionStoreState, DimensionSettingsState, DataType, DimensionRows, ColumnRegular, DimensionCols, DragStartEvent, Cell, MultiDimensionType, Nullable, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, FocusRenderEvent, ApplyFocusEvent, AllDimensionType, Editors, BeforeSaveDataDetails, BeforeEdit, RangeArea, TempRange, ChangedRange, BeforeRangeSaveDataDetails, SaveDataDetails, EditCellStore, ClipboardConfig } from "../../types/index";
 /**
  * Component for overlaying the grid with the selection.
  */
@@ -23,9 +23,9 @@ export declare class OverlaySelection {
     canDrag: boolean;
     /**
      * Enable revogr-clipboard component (read more in revogr-clipboard component).
-     * Allows copy/paste.
+     * Allows copy/paste. Can be boolean or clipboard config.
      */
-    useClipboard: boolean;
+    useClipboard: boolean | ClipboardConfig;
     /** Stores */
     /** Selection, range, focus. */
     selectionStore: Observable<SelectionStoreState>;
@@ -256,6 +256,7 @@ export declare class OverlaySelection {
     private getRegion;
     private onCopy;
     private onPaste;
+    private getClipboardPasteTargetRange;
     private focusNext;
     protected clearCell(): void;
     private rowDragStart;

package/dist/types/components/revoGrid/revo-grid.d.ts

@@ -1,5 +1,5 @@
 import { type VNode, EventEmitter } from '../../stencil-public-runtime';
-import type { MultiDimensionType, DimensionRows, DimensionCols, DimensionTypeCol, RowHeaders, ColumnRegular, ColumnGrouping, DataType, RowDefinition, ColumnType, FocusTemplateFunc, PositionItem, ColumnProp, ViewPortScrollEvent, InitialHeaderClick, AllDimensionType, Editors, BeforeSaveDataDetails, BeforeRangeSaveDataDetails, Cell, ChangedRange, RangeArea, AfterEditEvent, Theme, PluginBaseComponent, PluginProviders, FocusAfterRenderEvent, ExtraNodeFuncConfig, RowDragStartDetails, AdditionalData } from "../../types/index";
+import type { MultiDimensionType, DimensionRows, DimensionCols, DimensionTypeCol, RowHeaders, ColumnRegular, ColumnGrouping, DataType, RowDefinition, ColumnType, FocusTemplateFunc, PositionItem, ColumnProp, ViewPortScrollEvent, InitialHeaderClick, AllDimensionType, Editors, BeforeSaveDataDetails, BeforeRangeSaveDataDetails, Cell, ChangedRange, RangeArea, AfterEditEvent, Theme, PluginBaseComponent, PluginProviders, FocusAfterRenderEvent, ExtraNodeFuncConfig, RowDragStartDetails, AdditionalData, ClipboardConfig } from "../../types/index";
 import ColumnDataProvider from '../../services/column.data.provider';
 import { DataProvider } from '../../services/data.provider';
 import { DSourceState } from "../../store/index";
@@ -59,7 +59,7 @@ export declare class RevoGridComponent {
     rowSize: number;
     /** Indicates default column size. */
     colSize: number;
-    /** When true, user can range selection. */
+    /** When true, user can select a cell range. Required for range-based clipboard fill. */
     range: boolean;
     /** When true, grid in read only mode. */
     readonly: boolean;
@@ -71,8 +71,8 @@ export declare class RevoGridComponent {
     noHorizontalScrollTransfer: boolean;
     /** When true cell focus appear. */
     canFocus: boolean;
-    /** When true enable clipboard. */
-    useClipboard: boolean;
+    /** When true enable clipboard. Can be boolean or clipboard config. */
+    useClipboard: boolean | ClipboardConfig;
     /**
      * Columns - defines an array of grid columns.
      * Can be column or grouped column.

package/dist/types/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { AdditionalData, AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, CellTemplateProp, ChangedRange, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, ExtraNodeFuncConfig, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PluginProviders, PositionItem, ProvidersColumns, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowDragStartDetails, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
+import { AdditionalData, AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, CellTemplateProp, ChangedRange, ClipboardConfig, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, ExtraNodeFuncConfig, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PluginProviders, PositionItem, ProvidersColumns, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowDragStartDetails, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
 import { GridPlugin } from "./plugins/base.plugin";
 import { AutoSizeColumnConfig } from "./plugins/column.auto-size.plugin";
 import { ColumnFilterConfig, FilterCaptions, FilterCollectionItem, LogicFunction, MultiFilterItem, ShowData } from "./plugins/filter/filter.types";
@@ -21,7 +21,7 @@ import { ResizeProps } from "./components/header/resizable.directive";
 import { HeaderRenderProps } from "./components/header/header-renderer";
 import { HeaderGroupRendererProps } from "./components/header/header-group-renderer";
 import { EventData } from "./components/overlay/selection.utils";
-export { AdditionalData, AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, CellTemplateProp, ChangedRange, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, ExtraNodeFuncConfig, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PluginProviders, PositionItem, ProvidersColumns, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowDragStartDetails, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
+export { AdditionalData, AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, CellTemplateProp, ChangedRange, ClipboardConfig, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, ExtraNodeFuncConfig, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PluginProviders, PositionItem, ProvidersColumns, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowDragStartDetails, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
 export { GridPlugin } from "./plugins/base.plugin";
 export { AutoSizeColumnConfig } from "./plugins/column.auto-size.plugin";
 export { ColumnFilterConfig, FilterCaptions, FilterCollectionItem, LogicFunction, MultiFilterItem, ShowData } from "./plugins/filter/filter.types";
@@ -225,7 +225,7 @@ export namespace Components {
          */
         "plugins": GridPlugin[];
         /**
-          * When true, user can range selection.
+          * When true, user can select a cell range. Required for range-based clipboard fill.
           * @default false
          */
         "range": boolean;
@@ -344,10 +344,10 @@ export namespace Components {
          */
         "updateColumns": (cols: ColumnRegular[]) => Promise<void>;
         /**
-          * When true enable clipboard.
+          * When true enable clipboard. Can be boolean or clipboard config.
           * @default true
          */
-        "useClipboard": boolean;
+        "useClipboard": boolean | ClipboardConfig;
     }
     interface RevogrAttribution {
     }
@@ -685,9 +685,9 @@ export namespace Components {
          */
         "selectionStore": Observable<SelectionStoreState>;
         /**
-          * Enable revogr-clipboard component (read more in revogr-clipboard component). Allows copy/paste.
+          * Enable revogr-clipboard component (read more in revogr-clipboard component). Allows copy/paste. Can be boolean or clipboard config.
          */
-        "useClipboard": boolean;
+        "useClipboard": boolean | ClipboardConfig;
     }
     /**
      * Row headers component
@@ -1687,7 +1687,7 @@ declare namespace LocalJSX {
          */
         "plugins"?: GridPlugin[];
         /**
-          * When true, user can range selection.
+          * When true, user can select a cell range. Required for range-based clipboard fill.
           * @default false
          */
         "range"?: boolean;
@@ -1758,10 +1758,10 @@ declare namespace LocalJSX {
          */
         "trimmedRows"?: Record<number, boolean>;
         /**
-          * When true enable clipboard.
+          * When true enable clipboard. Can be boolean or clipboard config.
           * @default true
          */
-        "useClipboard"?: boolean;
+        "useClipboard"?: boolean | ClipboardConfig;
     }
     interface RevogrAttribution {
     }
@@ -2343,9 +2343,9 @@ declare namespace LocalJSX {
          */
         "selectionStore": Observable<SelectionStoreState>;
         /**
-          * Enable revogr-clipboard component (read more in revogr-clipboard component). Allows copy/paste.
+          * Enable revogr-clipboard component (read more in revogr-clipboard component). Allows copy/paste. Can be boolean or clipboard config.
          */
-        "useClipboard"?: boolean;
+        "useClipboard"?: boolean | ClipboardConfig;
     }
     /**
      * Row headers component
@@ -2498,7 +2498,7 @@ declare namespace LocalJSX {
         "resize": boolean;
         "noHorizontalScrollTransfer": boolean;
         "canFocus": boolean;
-        "useClipboard": boolean;
+        "useClipboard": boolean | ClipboardConfig;
         "applyOnClose": boolean;
         "theme": Theme;
         "rowClass": string;
@@ -2552,7 +2552,7 @@ declare namespace LocalJSX {
         "readonly": boolean;
         "range": boolean;
         "canDrag": boolean;
-        "useClipboard": boolean;
+        "useClipboard": boolean | ClipboardConfig;
         "applyChangesOnClose": boolean;
         "additionalData": string;
         "isMobileDevice": boolean;

package/dist/types/types/interfaces.d.ts

@@ -788,6 +788,14 @@ export interface RangeClipboardCopyEventProps<T = any> extends AllDimensionType
     range: RangeArea;
     mapping: OldNewRangeMapping;
 }
+/** Clipboard behavior configuration. */
+export interface ClipboardConfig {
+    /**
+     * When true, pasting a single clipboard cell fills the selected range.
+     * Requires range selection to be enabled on the grid.
+     */
+    rangeFill?: boolean;
+}
 export interface AdditionalData {
     /**
      * Additional data for grid and plugins

package/hydrate/index.js

@@ -13048,43 +13048,82 @@ class ColumnService {
             mapping,
         };
     }
-    getTransformedDataToApply(start, data) {
+    getTransformedDataToApply({ start, data, targetRange, }) {
         const changed = {};
         const copyRowLength = data.length;
+        if (!copyRowLength) {
+            return {
+                changed,
+                range: null,
+            };
+        }
         const colLength = this.columns.length;
         const rowLength = this.dataStore.get('items').length;
+        const bounds = this.getDataApplyBounds(start, targetRange, copyRowLength, rowLength, colLength);
+        if (!bounds) {
+            return {
+                changed,
+                range: null,
+            };
+        }
+        const { startRow, startCol, endRow } = bounds;
+        let maxCol = startCol - 1;
+        let lastRow = startRow - 1;
         // rows
-        let rowIndex = start.y;
-        let maxCol = 0;
-        for (let i = 0; rowIndex < rowLength && i < copyRowLength; rowIndex++, i++) {
+        for (let rowIndex = startRow, i = 0; rowIndex <= endRow; rowIndex++, i++) {
             // copy original data link
             const copyRow = data[i % copyRowLength];
             const copyColLength = (copyRow === null || copyRow === void 0 ? void 0 : copyRow.length) || 0;
-            // columns
-            let colIndex = start.x;
-            for (let j = 0; colIndex < colLength && j < copyColLength; colIndex++, j++) {
-                const p = this.columns[colIndex].prop;
-                const currentCol = j % colLength;
-                /** if can write */
-                if (!this.isReadOnly(rowIndex, colIndex)) {
-                    /** to show before save */
-                    if (!changed[rowIndex]) {
-                        changed[rowIndex] = {};
-                    }
-                    changed[rowIndex][p] = copyRow[currentCol];
-                }
+            if (!copyColLength) {
+                continue;
             }
-            maxCol = Math.max(maxCol, colIndex - 1);
+            maxCol = Math.max(maxCol, this.applyClipboardRow(changed, {
+                bounds,
+                copyColLength,
+                copyRow,
+                rowIndex,
+                start,
+                targetRange,
+            }));
+            lastRow = rowIndex;
         }
-        const range = getRange(start, {
-            y: rowIndex - 1,
-            x: maxCol,
-        });
         return {
             changed,
-            range,
+            range: this.getAppliedRange(bounds, lastRow, maxCol),
         };
     }
+    getDataApplyBounds(start, targetRange, copyRowLength, rowLength, colLength) {
+        var _a, _b, _c;
+        const startRow = (_a = targetRange === null || targetRange === void 0 ? void 0 : targetRange.y) !== null && _a !== void 0 ? _a : start.y;
+        const startCol = (_b = targetRange === null || targetRange === void 0 ? void 0 : targetRange.x) !== null && _b !== void 0 ? _b : start.x;
+        const endRow = Math.min(rowLength - 1, (_c = targetRange === null || targetRange === void 0 ? void 0 : targetRange.y1) !== null && _c !== void 0 ? _c : start.y + copyRowLength - 1);
+        if (endRow < startRow || startCol >= colLength) {
+            return null;
+        }
+        return { startRow, startCol, endRow, colLength };
+    }
+    applyClipboardRow(changed, { bounds, copyColLength, copyRow, rowIndex, start, targetRange, }) {
+        var _a;
+        const endCol = Math.min(bounds.colLength - 1, (_a = targetRange === null || targetRange === void 0 ? void 0 : targetRange.x1) !== null && _a !== void 0 ? _a : start.x + copyColLength - 1);
+        for (let colIndex = bounds.startCol, j = 0; colIndex <= endCol; colIndex++, j++) {
+            if (this.isReadOnly(rowIndex, colIndex)) {
+                continue;
+            }
+            const prop = this.columns[colIndex].prop;
+            changed[rowIndex] = changed[rowIndex] || {};
+            changed[rowIndex][prop] = copyRow[j % copyColLength];
+        }
+        return endCol;
+    }
+    getAppliedRange({ startRow, startCol }, lastRow, maxCol) {
+        if (lastRow < startRow || maxCol < startCol) {
+            return null;
+        }
+        return getRange({ x: startCol, y: startRow }, {
+            y: lastRow,
+            x: maxCol,
+        });
+    }
     getRangeStaticData(d, value) {
         const changed = {};
         // rows
@@ -13751,6 +13790,30 @@ class AutoFillService {
     }
 }
 
+function getRangeFillClipboardData(data, useClipboard) {
+    var _a;
+    if (!isClipboardRangeFillEnabled(useClipboard)) {
+        return null;
+    }
+    const normalized = trimTrailingEmptyClipboardRows(data);
+    return normalized.length === 1 && ((_a = normalized[0]) === null || _a === void 0 ? void 0 : _a.length) === 1
+        ? normalized
+        : null;
+}
+function isClipboardRangeFillEnabled(useClipboard) {
+    return (typeof useClipboard === 'object' && useClipboard.rangeFill === true);
+}
+function trimTrailingEmptyClipboardRows(data) {
+    const rows = [...data];
+    while (rows.length > 1 && isEmptyClipboardRow(rows[rows.length - 1])) {
+        rows.pop();
+    }
+    return rows;
+}
+function isEmptyClipboardRow(row) {
+    return !row || row.every(cell => cell === '');
+}
+
 const revogrOverlayStyleCss = () => `revogr-overlay-selection{display:block;position:relative;width:100%}revogr-overlay-selection .autofill-handle{position:absolute;width:14px;height:14px;margin-left:-13px;margin-top:-13px;z-index:10;cursor:crosshair}revogr-overlay-selection .autofill-handle::before{content:"";position:absolute;right:0;bottom:0;width:10px;height:10px;background:#0d63e8;border:1px solid white;box-sizing:border-box}revogr-overlay-selection.mobile .autofill-handle{position:absolute;width:30px;height:30px;margin-left:-29px;margin-top:-29px;z-index:10;cursor:crosshair}revogr-overlay-selection.mobile .autofill-handle::before{content:"";position:absolute;right:0;bottom:0;width:12px;height:12px;background:#0d63e8;border:1px solid white;box-sizing:border-box}revogr-overlay-selection .selection-border-range{position:absolute;pointer-events:none;z-index:9;box-shadow:-1px 0 0 #0d63e8 inset, 1px 0 0 #0d63e8 inset, 0 -1px 0 #0d63e8 inset, 0 1px 0 #0d63e8 inset}revogr-overlay-selection .selection-border-range .range-handlers{height:100%;background-color:transparent;width:75%;max-width:50px;min-width:20px;left:50%;transform:translateX(-50%);position:absolute}revogr-overlay-selection .selection-border-range .range-handlers>span{pointer-events:auto;height:20px;width:20px;position:absolute;left:50%;transform:translateX(-50%)}revogr-overlay-selection .selection-border-range .range-handlers>span:before,revogr-overlay-selection .selection-border-range .range-handlers>span:after{position:absolute;border-radius:5px;width:15px;height:5px;left:50%;transform:translateX(-50%);background-color:rgba(0, 0, 0, 0.2)}revogr-overlay-selection .selection-border-range .range-handlers>span:first-child{top:-7px}revogr-overlay-selection .selection-border-range .range-handlers>span:first-child:before{content:"";top:0}revogr-overlay-selection .selection-border-range .range-handlers>span:last-child{bottom:-7px}revogr-overlay-selection .selection-border-range .range-handlers>span:last-child:after{content:"";bottom:0}revogr-overlay-selection revogr-edit{z-index:10}`;
 
 /**
@@ -14001,9 +14064,9 @@ class OverlaySelection {
                 nodes.push(hAsync("revogr-order-editor", { ref: e => (this.orderEditor = e), dataStore: this.dataStore, dimensionRow: this.dimensionRow, dimensionCol: this.dimensionCol, parent: this.element, rowType: this.types.rowType, onRowdragstartinit: e => this.rowDragStart(e) }));
             }
         }
-        return (hAsync(Host, { key: 'd936e8452e84c7a25ecd6502e929f1a5af69467f', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true), onCloseedit: (e) => this.closeEdit(e),
+        return (hAsync(Host, { key: 'ff303c39d59e4ef217421fa11b9a80de07311b07', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true), onCloseedit: (e) => this.closeEdit(e),
             // it's done to be able to throw events from different levels, not just from editor
-            onCelledit: (e) => this.onEditCell(e) }, nodes, hAsync("slot", { key: 'cd3525d404aa44fd8d06e7fc459777acb8a9d585', name: "data" })));
+            onCelledit: (e) => this.onEditCell(e) }, nodes, hAsync("slot", { key: '3cbe4c3ad7d447f779e9e20f73eec2e3107275e0', name: "data" })));
     }
     /**
      * Executes the focus operation on the specified range of cells.
@@ -14168,13 +14231,25 @@ class OverlaySelection {
         if (!focus || isEditing) {
             return;
         }
-        let { changed, range } = this.columnService.getTransformedDataToApply(focus, data);
+        const rangeFillData = getRangeFillClipboardData(data, this.useClipboard);
+        const targetRange = rangeFillData
+            ? this.getClipboardPasteTargetRange()
+            : null;
+        let { changed, range } = this.columnService.getTransformedDataToApply({
+            start: focus,
+            data: rangeFillData || data,
+            targetRange,
+        });
         const { defaultPrevented: canPaste } = this.rangeClipboardPaste.emit(Object.assign({ data: changed, models: collectModelsOfRange(changed, this.dataStore), range }, this.types));
         if (canPaste) {
             return;
         }
         (_a = this.autoFillService) === null || _a === void 0 ? void 0 : _a.onRangeApply(changed, range, range);
     }
+    getClipboardPasteTargetRange() {
+        const range = this.selectionStore.get('range');
+        return range && !isRangeSingleCell(range) ? range : null;
+    }
     async focusNext() {
         var _a;
         const canFocus = await ((_a = this.keyboardService) === null || _a === void 0 ? void 0 : _a.keyChangeSelection(new KeyboardEvent('keydown', {
@@ -19013,7 +19088,7 @@ class RevoGridComponent {
         this.rowSize = 0;
         /** Indicates default column size. */
         this.colSize = 100;
-        /** When true, user can range selection. */
+        /** When true, user can select a cell range. Required for range-based clipboard fill. */
         this.range = false;
         /** When true, grid in read only mode. */
         this.readonly = false;
@@ -19025,7 +19100,7 @@ class RevoGridComponent {
         this.noHorizontalScrollTransfer = false;
         /** When true cell focus appear. */
         this.canFocus = true;
-        /** When true enable clipboard. */
+        /** When true enable clipboard. Can be boolean or clipboard config. */
         this.useClipboard = true;
         /**
          * Columns - defines an array of grid columns.

package/hydrate/index.mjs

@@ -13046,43 +13046,82 @@ class ColumnService {
             mapping,
         };
     }
-    getTransformedDataToApply(start, data) {
+    getTransformedDataToApply({ start, data, targetRange, }) {
         const changed = {};
         const copyRowLength = data.length;
+        if (!copyRowLength) {
+            return {
+                changed,
+                range: null,
+            };
+        }
         const colLength = this.columns.length;
         const rowLength = this.dataStore.get('items').length;
+        const bounds = this.getDataApplyBounds(start, targetRange, copyRowLength, rowLength, colLength);
+        if (!bounds) {
+            return {
+                changed,
+                range: null,
+            };
+        }
+        const { startRow, startCol, endRow } = bounds;
+        let maxCol = startCol - 1;
+        let lastRow = startRow - 1;
         // rows
-        let rowIndex = start.y;
-        let maxCol = 0;
-        for (let i = 0; rowIndex < rowLength && i < copyRowLength; rowIndex++, i++) {
+        for (let rowIndex = startRow, i = 0; rowIndex <= endRow; rowIndex++, i++) {
             // copy original data link
             const copyRow = data[i % copyRowLength];
             const copyColLength = (copyRow === null || copyRow === void 0 ? void 0 : copyRow.length) || 0;
-            // columns
-            let colIndex = start.x;
-            for (let j = 0; colIndex < colLength && j < copyColLength; colIndex++, j++) {
-                const p = this.columns[colIndex].prop;
-                const currentCol = j % colLength;
-                /** if can write */
-                if (!this.isReadOnly(rowIndex, colIndex)) {
-                    /** to show before save */
-                    if (!changed[rowIndex]) {
-                        changed[rowIndex] = {};
-                    }
-                    changed[rowIndex][p] = copyRow[currentCol];
-                }
+            if (!copyColLength) {
+                continue;
             }
-            maxCol = Math.max(maxCol, colIndex - 1);
+            maxCol = Math.max(maxCol, this.applyClipboardRow(changed, {
+                bounds,
+                copyColLength,
+                copyRow,
+                rowIndex,
+                start,
+                targetRange,
+            }));
+            lastRow = rowIndex;
         }
-        const range = getRange(start, {
-            y: rowIndex - 1,
-            x: maxCol,
-        });
         return {
             changed,
-            range,
+            range: this.getAppliedRange(bounds, lastRow, maxCol),
         };
     }
+    getDataApplyBounds(start, targetRange, copyRowLength, rowLength, colLength) {
+        var _a, _b, _c;
+        const startRow = (_a = targetRange === null || targetRange === void 0 ? void 0 : targetRange.y) !== null && _a !== void 0 ? _a : start.y;
+        const startCol = (_b = targetRange === null || targetRange === void 0 ? void 0 : targetRange.x) !== null && _b !== void 0 ? _b : start.x;
+        const endRow = Math.min(rowLength - 1, (_c = targetRange === null || targetRange === void 0 ? void 0 : targetRange.y1) !== null && _c !== void 0 ? _c : start.y + copyRowLength - 1);
+        if (endRow < startRow || startCol >= colLength) {
+            return null;
+        }
+        return { startRow, startCol, endRow, colLength };
+    }
+    applyClipboardRow(changed, { bounds, copyColLength, copyRow, rowIndex, start, targetRange, }) {
+        var _a;
+        const endCol = Math.min(bounds.colLength - 1, (_a = targetRange === null || targetRange === void 0 ? void 0 : targetRange.x1) !== null && _a !== void 0 ? _a : start.x + copyColLength - 1);
+        for (let colIndex = bounds.startCol, j = 0; colIndex <= endCol; colIndex++, j++) {
+            if (this.isReadOnly(rowIndex, colIndex)) {
+                continue;
+            }
+            const prop = this.columns[colIndex].prop;
+            changed[rowIndex] = changed[rowIndex] || {};
+            changed[rowIndex][prop] = copyRow[j % copyColLength];
+        }
+        return endCol;
+    }
+    getAppliedRange({ startRow, startCol }, lastRow, maxCol) {
+        if (lastRow < startRow || maxCol < startCol) {
+            return null;
+        }
+        return getRange({ x: startCol, y: startRow }, {
+            y: lastRow,
+            x: maxCol,
+        });
+    }
     getRangeStaticData(d, value) {
         const changed = {};
         // rows
@@ -13749,6 +13788,30 @@ class AutoFillService {
     }
 }
 
+function getRangeFillClipboardData(data, useClipboard) {
+    var _a;
+    if (!isClipboardRangeFillEnabled(useClipboard)) {
+        return null;
+    }
+    const normalized = trimTrailingEmptyClipboardRows(data);
+    return normalized.length === 1 && ((_a = normalized[0]) === null || _a === void 0 ? void 0 : _a.length) === 1
+        ? normalized
+        : null;
+}
+function isClipboardRangeFillEnabled(useClipboard) {
+    return (typeof useClipboard === 'object' && useClipboard.rangeFill === true);
+}
+function trimTrailingEmptyClipboardRows(data) {
+    const rows = [...data];
+    while (rows.length > 1 && isEmptyClipboardRow(rows[rows.length - 1])) {
+        rows.pop();
+    }
+    return rows;
+}
+function isEmptyClipboardRow(row) {
+    return !row || row.every(cell => cell === '');
+}
+
 const revogrOverlayStyleCss = () => `revogr-overlay-selection{display:block;position:relative;width:100%}revogr-overlay-selection .autofill-handle{position:absolute;width:14px;height:14px;margin-left:-13px;margin-top:-13px;z-index:10;cursor:crosshair}revogr-overlay-selection .autofill-handle::before{content:"";position:absolute;right:0;bottom:0;width:10px;height:10px;background:#0d63e8;border:1px solid white;box-sizing:border-box}revogr-overlay-selection.mobile .autofill-handle{position:absolute;width:30px;height:30px;margin-left:-29px;margin-top:-29px;z-index:10;cursor:crosshair}revogr-overlay-selection.mobile .autofill-handle::before{content:"";position:absolute;right:0;bottom:0;width:12px;height:12px;background:#0d63e8;border:1px solid white;box-sizing:border-box}revogr-overlay-selection .selection-border-range{position:absolute;pointer-events:none;z-index:9;box-shadow:-1px 0 0 #0d63e8 inset, 1px 0 0 #0d63e8 inset, 0 -1px 0 #0d63e8 inset, 0 1px 0 #0d63e8 inset}revogr-overlay-selection .selection-border-range .range-handlers{height:100%;background-color:transparent;width:75%;max-width:50px;min-width:20px;left:50%;transform:translateX(-50%);position:absolute}revogr-overlay-selection .selection-border-range .range-handlers>span{pointer-events:auto;height:20px;width:20px;position:absolute;left:50%;transform:translateX(-50%)}revogr-overlay-selection .selection-border-range .range-handlers>span:before,revogr-overlay-selection .selection-border-range .range-handlers>span:after{position:absolute;border-radius:5px;width:15px;height:5px;left:50%;transform:translateX(-50%);background-color:rgba(0, 0, 0, 0.2)}revogr-overlay-selection .selection-border-range .range-handlers>span:first-child{top:-7px}revogr-overlay-selection .selection-border-range .range-handlers>span:first-child:before{content:"";top:0}revogr-overlay-selection .selection-border-range .range-handlers>span:last-child{bottom:-7px}revogr-overlay-selection .selection-border-range .range-handlers>span:last-child:after{content:"";bottom:0}revogr-overlay-selection revogr-edit{z-index:10}`;
 
 /**
@@ -13999,9 +14062,9 @@ class OverlaySelection {
                 nodes.push(hAsync("revogr-order-editor", { ref: e => (this.orderEditor = e), dataStore: this.dataStore, dimensionRow: this.dimensionRow, dimensionCol: this.dimensionCol, parent: this.element, rowType: this.types.rowType, onRowdragstartinit: e => this.rowDragStart(e) }));
             }
         }
-        return (hAsync(Host, { key: 'd936e8452e84c7a25ecd6502e929f1a5af69467f', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true), onCloseedit: (e) => this.closeEdit(e),
+        return (hAsync(Host, { key: 'ff303c39d59e4ef217421fa11b9a80de07311b07', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true), onCloseedit: (e) => this.closeEdit(e),
             // it's done to be able to throw events from different levels, not just from editor
-            onCelledit: (e) => this.onEditCell(e) }, nodes, hAsync("slot", { key: 'cd3525d404aa44fd8d06e7fc459777acb8a9d585', name: "data" })));
+            onCelledit: (e) => this.onEditCell(e) }, nodes, hAsync("slot", { key: '3cbe4c3ad7d447f779e9e20f73eec2e3107275e0', name: "data" })));
     }
     /**
      * Executes the focus operation on the specified range of cells.
@@ -14166,13 +14229,25 @@ class OverlaySelection {
         if (!focus || isEditing) {
             return;
         }
-        let { changed, range } = this.columnService.getTransformedDataToApply(focus, data);
+        const rangeFillData = getRangeFillClipboardData(data, this.useClipboard);
+        const targetRange = rangeFillData
+            ? this.getClipboardPasteTargetRange()
+            : null;
+        let { changed, range } = this.columnService.getTransformedDataToApply({
+            start: focus,
+            data: rangeFillData || data,
+            targetRange,
+        });
         const { defaultPrevented: canPaste } = this.rangeClipboardPaste.emit(Object.assign({ data: changed, models: collectModelsOfRange(changed, this.dataStore), range }, this.types));
         if (canPaste) {
             return;
         }
         (_a = this.autoFillService) === null || _a === void 0 ? void 0 : _a.onRangeApply(changed, range, range);
     }
+    getClipboardPasteTargetRange() {
+        const range = this.selectionStore.get('range');
+        return range && !isRangeSingleCell(range) ? range : null;
+    }
     async focusNext() {
         var _a;
         const canFocus = await ((_a = this.keyboardService) === null || _a === void 0 ? void 0 : _a.keyChangeSelection(new KeyboardEvent('keydown', {
@@ -19011,7 +19086,7 @@ class RevoGridComponent {
         this.rowSize = 0;
         /** Indicates default column size. */
         this.colSize = 100;
-        /** When true, user can range selection. */
+        /** When true, user can select a cell range. Required for range-based clipboard fill. */
         this.range = false;
         /** When true, grid in read only mode. */
         this.readonly = false;
@@ -19023,7 +19098,7 @@ class RevoGridComponent {
         this.noHorizontalScrollTransfer = false;
         /** When true cell focus appear. */
         this.canFocus = true;
-        /** When true enable clipboard. */
+        /** When true enable clipboard. Can be boolean or clipboard config. */
         this.useClipboard = true;
         /**
          * Columns - defines an array of grid columns.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revolist/revogrid",
-  "version": "4.23.8",
+  "version": "4.23.10",
   "type": "module",
   "description": "Virtual reactive data grid spreadsheet component - RevoGrid.",
   "license": "MIT",

package/readme.md

@@ -76,7 +76,10 @@ Used by some of the largest companies in Europe and the United States.
   - Header filtering.
   - Custom filters to extend system filters with your own set.
 
-- **[Export](https://rv-grid.com/guide/export.plugin)**: Export data to file.
+- **[Export](https://rv-grid.com/guide/export.plugin)**:
+  - **[CSV](https://rv-grid.com/guide/export.plugin)**: Built-in file export for core RevoGrid data workflows.
+  - **[PDF](https://rv-grid.com/guide/pdf-export)**: Browser-side PDF export with the lightweight [`@revolist/revogrid-pdf-export`](https://www.npmjs.com/package/@revolist/revogrid-pdf-export) plugin.
+  - **[Excel (Pro)](https://rv-grid.com/guide/data-grid-export-excel)**: Workbook export for RevoGrid Pro with layout, styles, frozen panes, merged cells, and formulas.
 
 - **Custom Sizes**: Define custom sizes for [columns](https://rv-grid.com/guide/column/#Column-Size) and [rows](https://rv-grid.com/guide/row/height). Automatic sizing based on content.
 
@@ -428,6 +431,22 @@ npm run test:e2e
 
 Test files live in `e2e/` and share helpers from `e2e/helpers.ts`:
 
+### Local startup troubleshooting
+
+For targeted local work, confirm a new or changed test is discoverable before starting the dev server:
+
+```bash
+./node_modules/.bin/playwright test e2e/pinning.spec.ts --grep "test name" --list
+```
+
+Then run a non-watch Stencil build to catch compile errors without invoking the Playwright web-server lifecycle:
+
+```bash
+./node_modules/.bin/stencil build --dev --serve --no-open
+```
+
+If Playwright fails before any tests run with a Stencil dev-server startup error such as `ERR_SOCKET_BAD_PORT` and port `65536`, treat it as an environment/startup issue rather than an e2e assertion failure. Check `node -v` and whether another local server is already using `localhost:3333`, then retry only after changing that environment state.
+
 
 ## Contributing