@operato/data-grist 9.0.0-beta.62 → 9.0.0-beta.64

package/dist/src/data-grid/event-handlers/data-grid-body-keydown-handler.js

@@ -0,0 +1,226 @@
+/**
+ * ox-grid-body 의 keydown handler
+ *
+ * - handler의 this 는 ox-grid-body임.
+ */
+export async function dataGridBodyKeydownHandler(e) {
+    // 한글 Composing 이벤트는 무시
+    if (e.isComposing)
+        return;
+    // arrow-key
+    const key = e.key;
+    var { row = 0, column = 0 } = this.focused || {};
+    var { records = [] } = this.data || {};
+    var maxrow = this.config.rows.appendable ? records.length : records.length - 1;
+    var maxcolumn = (this.columns || []).filter(column => !column.hidden).length - 1;
+    if (this.editTarget) {
+        switch (key) {
+            case 'Escape':
+            case 'Esc':
+            /* TODO 편집이 취소되어야 한다. */
+            case 'Enter':
+                this.editTarget = null;
+                this.focus();
+                return;
+            case 'Tab':
+                this.editTarget = null;
+                if (e.shiftKey) {
+                    column = Math.max(0, column - 1);
+                }
+                else {
+                    column = Math.min(maxcolumn, column + 1);
+                }
+                this.focus();
+                break;
+            // case 'Down':
+            // case 'ArrowDown':
+            //   this.editTarget = null
+            //   row = Math.min(maxrow, row + 1)
+            //   this.focus()
+            //   break
+            case 'PageUp':
+            case 'PageDown':
+            case 'End':
+            case 'Home':
+                // e.preventDefault()
+                // return
+                break;
+            default:
+                if (e.metaKey || e.ctrlKey) {
+                    /* Window System에 선택된 영역이 없다면, 셀을 복사/붙여넣기 한다. */
+                    switch (e.key) {
+                        case 'c':
+                            const selection = window.getSelection();
+                            if (!selection || !selection.anchorNode || selection.type != 'Range') {
+                                /*
+                                  editor가 select 인 경우 자체 복사 기능이 없으므로 this.copy()를 사용하도록 하기 위해서, selection.type != 'Range' 조건을 추가했다.
+                                  select인 경우에는 selection.type 이 'Caret' 이었다.
+                                 */
+                                this.copy();
+                                e.preventDefault();
+                            }
+                            break;
+                        case 'v':
+                            this.paste();
+                            break;
+                    }
+                }
+                return;
+        }
+    }
+    else {
+        switch (key) {
+            case 'Up':
+            case 'ArrowUp':
+                if (e.shiftKey) {
+                    let { start } = this._selectBlock || {};
+                    let focused = this.focusedField;
+                    if (focused && focused.rowIndex > 0) {
+                        this.setSelectBlock(start || focused, this.getFieldByIndex(focused.rowIndex - 1, focused.columnIndex));
+                    }
+                }
+                else {
+                    this.setSelectBlock();
+                    if (e.metaKey || e.ctrlKey) {
+                        row = 0;
+                    }
+                    else {
+                        row = Math.max(0, row - 1);
+                    }
+                }
+                break;
+            case 'Down':
+            case 'ArrowDown':
+                if (e.shiftKey) {
+                    let { start } = this._selectBlock || {};
+                    let focused = this.focusedField;
+                    if (focused) {
+                        let end = this.getFieldByIndex(focused.rowIndex + 1, focused.columnIndex);
+                        if (end) {
+                            this.setSelectBlock(start || focused, end);
+                        }
+                    }
+                }
+                else {
+                    this.setSelectBlock();
+                    if (e.metaKey || e.ctrlKey) {
+                        row = maxrow;
+                    }
+                    else {
+                        row = Math.min(maxrow, row + 1);
+                    }
+                }
+                break;
+            case 'Enter':
+                this.setSelectBlock();
+                this.startEditTarget(row, column, null);
+                return;
+            case 'Left':
+            case 'ArrowLeft':
+            case 'Backspace':
+                if (e.shiftKey) {
+                    let { start } = this._selectBlock || {};
+                    let focused = this.focusedField;
+                    if (focused && focused.columnIndex > 0) {
+                        this.setSelectBlock(start || focused, this.getFieldByIndex(focused.rowIndex, focused.columnIndex - 1));
+                    }
+                }
+                else {
+                    this.setSelectBlock();
+                    if (e.metaKey || e.ctrlKey) {
+                        column = 0;
+                    }
+                    else {
+                        column = Math.max(0, column - 1);
+                    }
+                }
+                break;
+            case 'Right':
+            case 'ArrowRight':
+                if (e.shiftKey) {
+                    let { start } = this._selectBlock || {};
+                    let focused = this.focusedField;
+                    if (focused) {
+                        let end = this.getFieldByIndex(focused.rowIndex, focused.columnIndex + 1, false);
+                        if (end) {
+                            this.setSelectBlock(start || focused, end);
+                        }
+                    }
+                }
+                else {
+                    this.setSelectBlock();
+                    if (e.metaKey || e.ctrlKey) {
+                        column = maxcolumn;
+                    }
+                    else {
+                        column = Math.min(maxcolumn, column + 1);
+                    }
+                }
+                break;
+            case 'Tab':
+                this.editTarget = null;
+                this.setSelectBlock();
+                if (e.shiftKey) {
+                    column = Math.max(0, column - 1);
+                }
+                else {
+                    column = Math.min(maxcolumn, column + 1);
+                }
+                this.focus();
+                break;
+            case 'PageUp':
+                /* TODO 페이지당 레코드의 수를 계산해서 증감시켜야 한다. */
+                this.setSelectBlock();
+                row = Math.max(0, row - 10);
+                break;
+            case 'PageDown':
+            case ' ':
+                this.setSelectBlock();
+                row = Math.min(maxrow, row + 10);
+                break;
+            case 'Esc':
+            case 'Escape':
+                this.setSelectBlock();
+                return;
+            case 'End':
+                this.setSelectBlock();
+                row = maxrow;
+                break;
+            case 'Home':
+                this.setSelectBlock();
+                row = 0;
+                break;
+            default:
+                if (e.metaKey || e.ctrlKey) {
+                    switch (e.key) {
+                        case 'c':
+                            const selection = window.getSelection();
+                            if (!selection || !selection.anchorNode || selection.type != 'Range') {
+                                /*
+                                  에디터 상태가 아닌 경우에도, selection.type != 'Range' 조건을 추가해서,
+                                  셀렉션이 된 상태에서는 기본 동작으로 텍스트 복사를 할 수 있도록 했다.
+                                  보통은, 싱글 필드가 셀렉션박스로 지정된 경우에 자체 텍스트의 일부를 복사하기 위해서 필요하다.
+                                 */
+                                this.copy();
+                                e.preventDefault();
+                            }
+                            break;
+                        case 'v':
+                            this.paste();
+                            break;
+                    }
+                    return;
+                }
+                else if (key.length === 1) {
+                    this.setSelectBlock();
+                    this.startEditTarget(row, column, key);
+                }
+        }
+    }
+    if (!this.focused || this.focused.row !== row || this.focused.column !== column) {
+        this.dispatchEvent(new CustomEvent('focus-change', { bubbles: true, composed: true, detail: { row, column } }));
+    }
+    /* arrow key에 의한 scrollbar의 자동 움직임을 하지 못하도록 한다. */
+    e.preventDefault();
+}
+//# sourceMappingURL=data-grid-body-keydown-handler.js.map

package/dist/src/data-grid/event-handlers/data-grid-body-keydown-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid-body-keydown-handler.js","sourceRoot":"","sources":["../../../../src/data-grid/event-handlers/data-grid-body-keydown-handler.ts"],"names":[],"mappings":"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","sourcesContent":["import { DataGridBody } from '../data-grid-body.js'\n\n/**\n * ox-grid-body 의 keydown handler\n *\n * - handler의 this 는 ox-grid-body임.\n */\nexport async function dataGridBodyKeydownHandler(this: DataGridBody, e: KeyboardEvent): Promise<void> {\n  // 한글 Composing 이벤트는 무시\n  if (e.isComposing) return\n\n  // arrow-key\n  const key = e.key\n  var { row = 0, column = 0 } = this.focused || {}\n  var { records = [] } = this.data || {}\n  var maxrow = this.config.rows.appendable ? records.length : records.length - 1\n  var maxcolumn = (this.columns || []).filter(column => !column.hidden).length - 1\n\n  if (this.editTarget) {\n    switch (key) {\n      case 'Escape':\n      case 'Esc':\n      /* TODO 편집이 취소되어야 한다. */\n      case 'Enter':\n        this.editTarget = null\n\n        this.focus()\n        return\n\n      case 'Tab':\n        this.editTarget = null\n        if (e.shiftKey) {\n          column = Math.max(0, column - 1)\n        } else {\n          column = Math.min(maxcolumn, column + 1)\n        }\n        this.focus()\n        break\n\n      // case 'Down':\n      // case 'ArrowDown':\n      //   this.editTarget = null\n      //   row = Math.min(maxrow, row + 1)\n      //   this.focus()\n      //   break\n\n      case 'PageUp':\n      case 'PageDown':\n      case 'End':\n      case 'Home':\n        // e.preventDefault()\n        // return\n        break\n\n      default:\n        if (e.metaKey || e.ctrlKey) {\n          /* Window System에 선택된 영역이 없다면, 셀을 복사/붙여넣기 한다. */\n          switch (e.key) {\n            case 'c':\n              const selection = window.getSelection()\n              if (!selection || !selection.anchorNode || selection.type != 'Range') {\n                /* \n                  editor가 select 인 경우 자체 복사 기능이 없으므로 this.copy()를 사용하도록 하기 위해서, selection.type != 'Range' 조건을 추가했다.\n                  select인 경우에는 selection.type 이 'Caret' 이었다.\n                 */\n                this.copy()\n                e.preventDefault()\n              }\n              break\n            case 'v':\n              this.paste()\n              break\n          }\n        }\n        return\n    }\n  } else {\n    switch (key) {\n      case 'Up':\n      case 'ArrowUp':\n        if (e.shiftKey) {\n          let { start } = this._selectBlock || {}\n          let focused = this.focusedField\n          if (focused && focused.rowIndex > 0) {\n            this.setSelectBlock(start || focused, this.getFieldByIndex(focused.rowIndex - 1, focused.columnIndex))\n          }\n        } else {\n          this.setSelectBlock()\n          if (e.metaKey || e.ctrlKey) {\n            row = 0\n          } else {\n            row = Math.max(0, row - 1)\n          }\n        }\n        break\n\n      case 'Down':\n      case 'ArrowDown':\n        if (e.shiftKey) {\n          let { start } = this._selectBlock || {}\n          let focused = this.focusedField\n          if (focused) {\n            let end = this.getFieldByIndex(focused.rowIndex + 1, focused.columnIndex)\n            if (end) {\n              this.setSelectBlock(start || focused, end)\n            }\n          }\n        } else {\n          this.setSelectBlock()\n          if (e.metaKey || e.ctrlKey) {\n            row = maxrow\n          } else {\n            row = Math.min(maxrow, row + 1)\n          }\n        }\n        break\n\n      case 'Enter':\n        this.setSelectBlock()\n        this.startEditTarget(row, column, null)\n        return\n\n      case 'Left':\n      case 'ArrowLeft':\n      case 'Backspace':\n        if (e.shiftKey) {\n          let { start } = this._selectBlock || {}\n          let focused = this.focusedField\n          if (focused && focused.columnIndex > 0) {\n            this.setSelectBlock(start || focused, this.getFieldByIndex(focused.rowIndex, focused.columnIndex - 1))\n          }\n        } else {\n          this.setSelectBlock()\n          if (e.metaKey || e.ctrlKey) {\n            column = 0\n          } else {\n            column = Math.max(0, column - 1)\n          }\n        }\n        break\n\n      case 'Right':\n      case 'ArrowRight':\n        if (e.shiftKey) {\n          let { start } = this._selectBlock || {}\n          let focused = this.focusedField\n          if (focused) {\n            let end = this.getFieldByIndex(focused.rowIndex, focused.columnIndex + 1, false)\n            if (end) {\n              this.setSelectBlock(start || focused, end)\n            }\n          }\n        } else {\n          this.setSelectBlock()\n          if (e.metaKey || e.ctrlKey) {\n            column = maxcolumn\n          } else {\n            column = Math.min(maxcolumn, column + 1)\n          }\n        }\n        break\n\n      case 'Tab':\n        this.editTarget = null\n        this.setSelectBlock()\n        if (e.shiftKey) {\n          column = Math.max(0, column - 1)\n        } else {\n          column = Math.min(maxcolumn, column + 1)\n        }\n        this.focus()\n        break\n\n      case 'PageUp':\n        /* TODO 페이지당 레코드의 수를 계산해서 증감시켜야 한다. */\n        this.setSelectBlock()\n        row = Math.max(0, row - 10)\n        break\n\n      case 'PageDown':\n      case ' ':\n        this.setSelectBlock()\n        row = Math.min(maxrow, row + 10)\n        break\n\n      case 'Esc':\n      case 'Escape':\n        this.setSelectBlock()\n        return\n\n      case 'End':\n        this.setSelectBlock()\n        row = maxrow\n        break\n\n      case 'Home':\n        this.setSelectBlock()\n        row = 0\n        break\n\n      default:\n        if (e.metaKey || e.ctrlKey) {\n          switch (e.key) {\n            case 'c':\n              const selection = window.getSelection()\n              if (!selection || !selection.anchorNode || selection.type != 'Range') {\n                /* \n                  에디터 상태가 아닌 경우에도, selection.type != 'Range' 조건을 추가해서,\n                  셀렉션이 된 상태에서는 기본 동작으로 텍스트 복사를 할 수 있도록 했다.\n                  보통은, 싱글 필드가 셀렉션박스로 지정된 경우에 자체 텍스트의 일부를 복사하기 위해서 필요하다.\n                 */\n                this.copy()\n                e.preventDefault()\n              }\n              break\n            case 'v':\n              this.paste()\n              break\n          }\n          return\n        } else if (key.length === 1) {\n          this.setSelectBlock()\n          this.startEditTarget(row, column, key)\n        }\n    }\n  }\n\n  if (!this.focused || this.focused.row !== row || this.focused.column !== column) {\n    this.dispatchEvent(new CustomEvent('focus-change', { bubbles: true, composed: true, detail: { row, column } }))\n  }\n\n  /* arrow key에 의한 scrollbar의 자동 움직임을 하지 못하도록 한다. */\n  e.preventDefault()\n}\n"]}

package/dist/src/data-grist.d.ts

@@ -0,0 +1,367 @@
+import './data-grid/data-grid.js';
+import './data-list/data-list.js';
+import './data-card/data-card.js';
+import { LitElement, PropertyValues } from 'lit';
+import { PagePreferenceProvider } from '@operato/p13n';
+import { DataCard } from './data-card/data-card.js';
+import { DataConsumer } from './data-consumer.js';
+import { DataGrid } from './data-grid/data-grid.js';
+import { DataList } from './data-list/data-list.js';
+import { ColumnConfig, FetchHandler, FilterValue, GristConfig, GristData, GristRecord, GristSelectFunction, PaginationConfig, SortersConfig, ValidationReason } from './types.js';
+/**
+ * A custom element for rendering data in a grid, list, or card format.
+ *
+ * @element ox-grist
+ */
+export declare class DataGrist extends LitElement implements DataConsumer {
+    static styles: import("lit").CSSResult[];
+    /**
+     * The rendering mode of the component, which can be 'GRID', 'LIST', or 'CARD'.
+     * Default is 'GRID'.
+     *
+     * @property {string}
+     */
+    mode: 'GRID' | 'LIST' | 'CARD';
+    /**
+     * The configuration object for the data grist.
+     *
+     * @property {Object}
+     */
+    config: any;
+    /**
+     * The data to be displayed in the data grist.
+     *
+     * @property {GristData}
+     */
+    data: GristData;
+    /**
+     * An array of selected records in the data grist.
+     *
+     * @property {GristRecord[]}
+     */
+    selectedRecords?: GristRecord[];
+    /**
+     * Indicates whether explicit fetching of data is enabled. If true, data will be fetched
+     * only when `fetch` method is called. Default is false.
+     *
+     * @property {boolean}
+     */
+    explicitFetch: boolean;
+    /**
+     * The fetch handler function used to retrieve data from a remote source.
+     *
+     * @property {FetchHandler}
+     */
+    fetchHandler?: FetchHandler;
+    /**
+     * Additional fetch options to be passed to the fetch handler.
+     *
+     * @property {Object}
+     */
+    fetchOptions: any;
+    /**
+     * An array of filter values to be applied to the data grist.
+     *
+     * @property {FilterValue[]}
+     */
+    filters?: FilterValue[];
+    /**
+     * An array of sorters to determine the order of records in the data grist.
+     *
+     * @property {SortersConfig}
+     */
+    sorters?: SortersConfig;
+    /**
+     * The pagination configuration for the data grist.
+     *
+     * @property {PaginationConfig}
+     */
+    pagination?: PaginationConfig;
+    /**
+     * Indicates whether URL parameters are sensitive to changes. If true, changes in URL
+     * parameters will trigger data fetching. Default is undefined.
+     *
+     * @property {boolean}
+     */
+    urlParamsSensitive?: boolean;
+    personalConfigProvider: PagePreferenceProvider;
+    personalConfig?: {
+        columns?: Partial<ColumnConfig>[];
+        [key: string]: any;
+    };
+    _data: GristData;
+    _config: GristConfig;
+    private _showSpinner;
+    head: HTMLElement;
+    grist: DataGrid | DataList | DataCard;
+    private wrap;
+    private timeCapsule?;
+    private snapshotTaker?;
+    private dataProvider?;
+    private pulltorefreshHandle?;
+    private headroom?;
+    private orginPaddingTop?;
+    private originMarginTop?;
+    private lastLocation;
+    private pendingFetch?;
+    private popstateEventHandler;
+    private fetchParamsChangeEventHandler;
+    firstUpdated(): Promise<void>;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    private resetPullToRefresh;
+    private setPullToRefresh;
+    applyUpdatedConfiguration(): void;
+    private setHeadroom;
+    render(): import("lit-html").TemplateResult<1>;
+    private onKeydown;
+    /**
+     * Gets the current state of the component. The state includes information about the
+     * dirty records and their changes.
+     *
+     * @getter
+     * @public
+     * @type {string}
+     */
+    get state(): string;
+    /**
+     * Undoes the previous change in the component's data by restoring it to the previous state.
+     * This method is part of the TimeCapsule feature, allowing users to revert changes.
+     */
+    undo(): void;
+    /**
+     * Redoes the previously undone change in the component's data by restoring it to the next state.
+     * This method is part of the TimeCapsule feature, allowing users to reapply changes.
+     */
+    redo(): void;
+    /**
+     * Fetches data from a data source and updates the component's data. This method is used to retrieve
+     * new data or refresh the existing data in the component.
+     *
+     * @method
+     * @param {boolean} reset - If true, the method resets the scroll position to the top.
+     */
+    fetch(reset?: boolean): Promise<void>;
+    updated(changes: PropertyValues<this>): Promise<void>;
+    /**
+     * Represents the compiled configuration of the component, which includes various settings and
+     * column configurations. You can access this property to get information about how the component
+     * is configured.
+     *
+     * @getter
+     * @public
+     * @type  {GristConfig}
+     */
+    get compiledConfig(): GristConfig;
+    /**
+     * Returns the dirty data in the component, which includes the records that have been added,
+     * modified, or deleted but have not been committed to the main data yet.
+     *
+     * @getter
+     * @public
+     * @type  {GristData} - An object representing the dirty data.
+     */
+    get dirtyData(): GristData;
+    /**
+     * Returns an array of GristRecord objects representing the records in the dirty state. These are
+     * the records that have been added, modified, or deleted but have not been committed to the main
+     * data yet.
+     *
+     * @getter
+     * @public
+     * @type  {GristRecord[]} - An array of GristRecord objects representing the dirty records.
+     */
+    get dirtyRecords(): GristRecord[];
+    /**
+     * Exports a list of patches representing the changes in the dirty state of records. Each patch
+     * contains information about whether a record was added, modified, or deleted, along with the
+     * record's unique identifier and the changed field values.
+     *
+     * @param {Object} options - Export options that control the format of the patch list.
+     * @param {string} options.flagName - The name of the flag field in the patch indicating the change type (default: 'patchFlag').
+     * @param {string} options.addedFlag - The flag value for added records (default: '+').
+     * @param {string} options.deletedFlag - The flag value for deleted records (default: '-').
+     * @param {string} options.modifiedFlag - The flag value for modified records (default: 'M').
+     * @param {string} options.idField - The name of the unique identifier field (default: 'id').
+     * @returns {Object[]} - An array of objects representing the patches.
+     */
+    exportPatchList({ flagName, addedFlag, deletedFlag, modifiedFlag, idField }: {
+        flagName?: string | undefined;
+        addedFlag?: string | undefined;
+        deletedFlag?: string | undefined;
+        modifiedFlag?: string | undefined;
+        idField?: string | undefined;
+    }): {
+        [flagName]: string;
+    }[];
+    /**
+     * Exports the selected records or all records in the component, depending on the specified options.
+     * You can use this method to export data from the component in various formats or for different purposes.
+     *
+     * @param {Object} options - Export options that control the behavior of the export.
+     * @param {boolean} options.ifSelectedOnly - If true, exports only the selected records. If false, exports all records.
+     * @param {boolean} options.includeHiddenField - If true, includes hidden fields in the exported data.
+     * @returns {Object[]} - An array of objects representing the exported records.
+     */
+    exportRecords({ ifSelectedOnly, includeHiddenField }?: {
+        ifSelectedOnly?: boolean | undefined;
+        includeHiddenField?: boolean | undefined;
+    }): any[];
+    /**
+     * Gets the currently selected records in the component. It returns an array of GristRecord objects
+     * that are currently selected. You can access this getter to retrieve the selected records.
+     *
+     * @getter
+     * @public
+     * @type {GristRecord[]}
+     */
+    get selected(): GristRecord[];
+    /**
+     * Sets the currently selected records in the component. You can use this setter to programmatically
+     * select specific records by providing an array of GristRecord objects to be selected.
+     *
+     * @setter
+     * @public
+     * @type {GristRecord[]}
+     */
+    set selected(selected: GristRecord[]);
+    /**
+     * Selects records in the component based on the provided selector function. You can use this method
+     * to programmatically select specific records in the component.
+     *
+     * @method
+     * @param {GristSelectFunction} selector - A function that determines which records to select.
+     * @param {boolean} reset - If true, clears the previous selection before applying the new one.
+     *                         If false, adds to the existing selection.
+     */
+    select(selector: GristSelectFunction, reset?: boolean): void;
+    /**
+     * Shows the loading spinner in the component's UI to indicate ongoing data loading or processing.
+     * You can call this method to display the spinner when necessary.
+     */
+    showSpinner(): void;
+    /**
+     * Hides the loading spinner in the component's UI to indicate that data loading or processing has completed.
+     * You can call this method to hide the spinner when loading or processing is finished.
+     */
+    hideSpinner(): void;
+    /**
+     * Focuses on the component, making it the active element in the document. This method is useful
+     * when you want to programmatically set focus to the component.
+     */
+    focus(): void;
+    /**
+     * Commits the changes made in the dirty state to the component's data. This method updates the
+     * component's data with the changes made in the dirty state and clears the dirty state.
+     */
+    commit(): void;
+    /**
+     * Shows the headroom element in the component. The headroom element is typically used for
+     * displaying additional information or controls at the top of the component.
+     */
+    showHeadroom(): void;
+    /**
+     * Hides the headroom element in the component. This method hides the additional information
+     * or controls displayed at the top of the component.
+     */
+    hideHeadroom(): void;
+    /**
+     * Toggles the visibility of the headroom element in the component. If the headroom element is
+     * currently visible, this method hides it. If it's hidden, this method shows it.
+     */
+    toggleHeadroom(): void;
+    /**
+     * Forced internal data to be reflected on the screen
+     * Data changing through a normal method is automatically reflected on the screen, so it is a method that does not need to be used in general.
+     * Therefore, it will be deprecated.
+     * @method
+     */
+    refresh(): void;
+    /**
+     * Resets the component's data to its original state before any changes were made.
+     * This method discards all unsaved changes and restores the data to its initial state.
+     *
+     * @method
+     * @public
+     */
+    reset(): void;
+    private traverseReset;
+    private traverseExpanded;
+    /**
+     * Checks for dirty records in the component's data and marks them as dirty.
+     * Dirty records are those that have unsaved changes.
+     */
+    checkDirties(): void;
+    /**
+     * Clones the selected records in the component's data. It creates a copy of the selected records
+     * and marks them as new (added) records.
+     */
+    cloneSelectedRecords(): void;
+    /**
+     * Adds child nodes to selected records in the component's tree data. It allows users to add child nodes
+     * to the selected parent records.
+     */
+    addChildNodes(): void;
+    /**
+     * Adds sibling nodes to selected records in the component's tree data. It allows users to add sibling nodes
+     * to the selected records.
+     */
+    addSiblingNodes(): void;
+    /**
+     * Deletes the selected records in the component's data. It removes the selected records from the data,
+     * optionally marking them as deleted.
+     *
+     * @method
+     * @param {boolean} dirty - If true, the method marks the records as deleted.
+     */
+    deleteSelectedRecords(dirty?: boolean): void;
+    /**
+     * Adds a new record to the data grid. The added record is marked as newly created
+     * by setting the `__dirty__` flag to '+'. This flag indicates that the record
+     * is in a "new" state and hasn't been committed to the main data yet.
+     *
+     * @param {GristRecord} [record] - An optional record to add. If no record is provided,
+     * an empty record with the `__dirty__` flag set to '+' will be added.
+     */
+    addRecord(record?: GristRecord): void;
+    /**
+     * Adds a new record to the top of the data grid. The added record is marked as newly created
+     * by setting the `__dirty__` flag to '+'. This flag indicates that the record
+     * is in a "new" state and hasn't been committed to the main data yet.
+     *
+     * This method is useful when you need to add new records at the top of the grid
+     * without changing the default behavior of the appendable row.
+     *
+     * @param {GristRecord} [record] - An optional record to add. If no record is provided,
+     * an empty record with the `__dirty__` flag set to '+' will be added.
+     */
+    addRecordToTop(record?: GristRecord): void;
+    /**
+     * Retrieves the search text used for filtering records.
+     *
+     * @property {string}
+     */
+    get searchText(): string;
+    /**
+     * Sets the search text for filtering records.
+     *
+     * @property {string}
+     */
+    set searchText(searchText: string);
+    /**
+     * Returns the current pagination limit.
+     * @returns {number} The current pagination limit value
+     */
+    getCurrentLimit(): number;
+    /**
+     * Checks the validity of dirty records.
+     * @returns {Array<{record: GristRecord, invalidFields: Array<{field: string, reason: ValidationReason}>}>} List of invalid records and their corresponding invalid fields
+     */
+    checkDirtyRecordsValidity(): {
+        record: GristRecord;
+        invalidFields: {
+            field: string;
+            reason: ValidationReason;
+        }[];
+    }[];
+}