react-open-source-grid 1.6.5 → 1.6.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/{index-DqLWhpvP.css → index-CQcTDWao.css} +1 -1
- package/dist/assets/{index-BbaZajrS.js → index-DgcHJP8T.js} +89 -3
- package/dist/assets/index.js +1 -1
- package/dist/assets/{layoutPersistence-CPItuVwj.js → layoutPersistence-BOTIXT8B.js} +1 -1
- package/dist/index.html +2 -2
- package/dist/lib/components/AdvancedEditorsDemo.d.ts +15 -0
- package/dist/lib/components/DataGrid/types.d.ts +2 -0
- package/dist/lib/editors/DateEditor.d.ts +23 -0
- package/dist/lib/editors/MarkdownEditor.d.ts +23 -0
- package/dist/lib/editors/MultiSelectEditor.d.ts +31 -0
- package/dist/lib/editors/NumericEditor.d.ts +33 -0
- package/dist/lib/editors/RichSelectEditor.d.ts +32 -0
- package/dist/lib/editors/editorTypes.d.ts +60 -0
- package/dist/lib/editors/editorUtils.d.ts +38 -0
- package/dist/lib/editors/index.d.ts +12 -0
- package/dist/lib/index.cjs +1314 -5
- package/dist/lib/index.css +634 -0
- package/dist/lib/index.d.ts +1 -0
- package/dist/lib/index.js +1300 -4
- package/package.json +1 -1
package/dist/assets/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from './index-
|
|
1
|
+
export * from './index-DgcHJP8T.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as e,c as t,i as n,n as r,o as i,r as a,s as o,t as s}from"./index-
|
|
1
|
+
import{a as e,c as t,i as n,n as r,o as i,r as a,s as o,t as s}from"./index-DgcHJP8T.js";export{e as createPreset};
|
package/dist/index.html
CHANGED
|
@@ -70,8 +70,8 @@
|
|
|
70
70
|
}
|
|
71
71
|
})();
|
|
72
72
|
</script>
|
|
73
|
-
<script type="module" crossorigin src="/assets/index-
|
|
74
|
-
<link rel="stylesheet" crossorigin href="/assets/index-
|
|
73
|
+
<script type="module" crossorigin src="/assets/index-DgcHJP8T.js"></script>
|
|
74
|
+
<link rel="stylesheet" crossorigin href="/assets/index-CQcTDWao.css">
|
|
75
75
|
</head>
|
|
76
76
|
<body>
|
|
77
77
|
<!-- SEO Content Section -->
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* AdvancedEditorsDemo - Showcase of Advanced Cell Editors
|
|
4
|
+
*
|
|
5
|
+
* This demo demonstrates all five advanced cell editors:
|
|
6
|
+
* - RichSelectEditor: Searchable dropdown for single selection
|
|
7
|
+
* - DateEditor: Calendar-based date/time picker
|
|
8
|
+
* - NumericEditor: Numeric input with validation and formatting
|
|
9
|
+
* - MultiSelectEditor: Multiple selection with chips/tags
|
|
10
|
+
* - MarkdownEditor: Rich text editor with markdown preview
|
|
11
|
+
*
|
|
12
|
+
* These editors are fully integrated with the DataGrid and can also be
|
|
13
|
+
* used as standalone components in your own applications via npm.
|
|
14
|
+
*/
|
|
15
|
+
export declare const AdvancedEditorsDemo: React.FC;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { DataGridEditorProps } from './editorTypes';
|
|
3
|
+
import './editors.css';
|
|
4
|
+
export interface DateEditorProps<TRow = any> extends DataGridEditorProps<string | Date | null, TRow> {
|
|
5
|
+
/** Date format string (e.g., "yyyy-MM-dd", "MM/dd/yyyy") */
|
|
6
|
+
dateFormat?: string;
|
|
7
|
+
/** Show time picker in addition to date */
|
|
8
|
+
showTime?: boolean;
|
|
9
|
+
/** Minimum selectable date */
|
|
10
|
+
minDate?: Date;
|
|
11
|
+
/** Maximum selectable date */
|
|
12
|
+
maxDate?: Date;
|
|
13
|
+
/** Auto-commit when date is selected */
|
|
14
|
+
autoCommit?: boolean;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* DateEditor component for DataGrid cells.
|
|
18
|
+
* Provides a calendar popup for date selection with optional time picker.
|
|
19
|
+
*/
|
|
20
|
+
export declare function DateEditor<TRow = any>(props: DateEditorProps<TRow>): React.ReactElement;
|
|
21
|
+
export declare namespace DateEditor {
|
|
22
|
+
var displayName: string;
|
|
23
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { DataGridEditorProps } from './editorTypes';
|
|
3
|
+
import './editors.css';
|
|
4
|
+
export interface MarkdownEditorProps<TRow = any> extends DataGridEditorProps<string, TRow> {
|
|
5
|
+
/** Maximum character length */
|
|
6
|
+
maxLength?: number;
|
|
7
|
+
/** Show preview panel */
|
|
8
|
+
showPreview?: boolean;
|
|
9
|
+
/** Minimum height of the editor in pixels */
|
|
10
|
+
minHeight?: number;
|
|
11
|
+
/** Maximum height of the editor in pixels */
|
|
12
|
+
maxHeight?: number;
|
|
13
|
+
/** Number of visible rows in textarea */
|
|
14
|
+
rows?: number;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* MarkdownEditor component for DataGrid cells.
|
|
18
|
+
* Provides a multi-line textarea with optional markdown preview.
|
|
19
|
+
*/
|
|
20
|
+
export declare function MarkdownEditor<TRow = any>(props: MarkdownEditorProps<TRow>): React.ReactElement;
|
|
21
|
+
export declare namespace MarkdownEditor {
|
|
22
|
+
var displayName: string;
|
|
23
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { DataGridEditorProps, EditorOption } from './editorTypes';
|
|
3
|
+
import './editors.css';
|
|
4
|
+
export interface MultiSelectOption extends EditorOption {
|
|
5
|
+
label: string;
|
|
6
|
+
value: string | number;
|
|
7
|
+
icon?: React.ReactNode;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export interface MultiSelectEditorProps<TValue = any, TRow = any> extends DataGridEditorProps<TValue[], TRow> {
|
|
11
|
+
/** Array of options to select from */
|
|
12
|
+
options: MultiSelectOption[];
|
|
13
|
+
/** Placeholder text when no values selected */
|
|
14
|
+
placeholder?: string;
|
|
15
|
+
/** Maximum number of tags to display before collapsing */
|
|
16
|
+
maxTagCount?: number;
|
|
17
|
+
/** Enable filtering/search functionality */
|
|
18
|
+
filterable?: boolean;
|
|
19
|
+
/** Maximum height of dropdown in pixels */
|
|
20
|
+
maxDropdownHeight?: number;
|
|
21
|
+
/** Allow deselecting all values */
|
|
22
|
+
allowEmpty?: boolean;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* MultiSelectEditor component for DataGrid cells.
|
|
26
|
+
* Allows selecting multiple values displayed as chips/tags.
|
|
27
|
+
*/
|
|
28
|
+
export declare function MultiSelectEditor<TValue = any, TRow = any>(props: MultiSelectEditorProps<TValue, TRow>): React.ReactElement;
|
|
29
|
+
export declare namespace MultiSelectEditor {
|
|
30
|
+
var displayName: string;
|
|
31
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { DataGridEditorProps } from './editorTypes';
|
|
3
|
+
import './editors.css';
|
|
4
|
+
export interface NumericEditorProps<TRow = any> extends DataGridEditorProps<number | null, TRow> {
|
|
5
|
+
/** Minimum allowed value */
|
|
6
|
+
min?: number;
|
|
7
|
+
/** Maximum allowed value */
|
|
8
|
+
max?: number;
|
|
9
|
+
/** Step size for increment/decrement */
|
|
10
|
+
step?: number;
|
|
11
|
+
/** Number of decimal places to display */
|
|
12
|
+
decimals?: number;
|
|
13
|
+
/** Prefix text (e.g., "$", "€") */
|
|
14
|
+
prefix?: string;
|
|
15
|
+
/** Suffix text (e.g., "kg", "%", "USD") */
|
|
16
|
+
suffix?: string;
|
|
17
|
+
/** Allow negative numbers */
|
|
18
|
+
allowNegative?: boolean;
|
|
19
|
+
/** Show stepper buttons */
|
|
20
|
+
showSteppers?: boolean;
|
|
21
|
+
/** Thousands separator character */
|
|
22
|
+
thousandsSeparator?: string;
|
|
23
|
+
/** Decimal separator character */
|
|
24
|
+
decimalSeparator?: string;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* NumericEditor component for DataGrid cells.
|
|
28
|
+
* Provides numeric input with optional stepper buttons and validation.
|
|
29
|
+
*/
|
|
30
|
+
export declare function NumericEditor<TRow = any>(props: NumericEditorProps<TRow>): React.ReactElement;
|
|
31
|
+
export declare namespace NumericEditor {
|
|
32
|
+
var displayName: string;
|
|
33
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { DataGridEditorProps, EditorOption } from './editorTypes';
|
|
3
|
+
import './editors.css';
|
|
4
|
+
export interface RichSelectOption extends EditorOption {
|
|
5
|
+
label: string;
|
|
6
|
+
value: string | number;
|
|
7
|
+
icon?: React.ReactNode;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
description?: string;
|
|
10
|
+
}
|
|
11
|
+
export interface RichSelectEditorProps<TValue = any, TRow = any> extends DataGridEditorProps<TValue, TRow> {
|
|
12
|
+
/** Array of options to select from */
|
|
13
|
+
options: RichSelectOption[];
|
|
14
|
+
/** Placeholder text when no value selected */
|
|
15
|
+
placeholder?: string;
|
|
16
|
+
/** Allow clearing the selected value */
|
|
17
|
+
allowClear?: boolean;
|
|
18
|
+
/** Enable filtering/search functionality */
|
|
19
|
+
filterable?: boolean;
|
|
20
|
+
/** Custom render function for option labels */
|
|
21
|
+
renderOptionLabel?: (option: RichSelectOption) => React.ReactNode;
|
|
22
|
+
/** Maximum height of dropdown in pixels */
|
|
23
|
+
maxDropdownHeight?: number;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* RichSelectEditor component for DataGrid cells.
|
|
27
|
+
* Provides a searchable dropdown for selecting a single option from a list.
|
|
28
|
+
*/
|
|
29
|
+
export declare function RichSelectEditor<TValue = any, TRow = any>(props: RichSelectEditorProps<TValue, TRow>): React.ReactElement;
|
|
30
|
+
export declare namespace RichSelectEditor {
|
|
31
|
+
var displayName: string;
|
|
32
|
+
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import type { Column } from '../components/DataGrid/types';
|
|
3
|
+
/**
|
|
4
|
+
* Base props interface for all DataGrid cell editors.
|
|
5
|
+
* This interface matches the grid's editing API expectations.
|
|
6
|
+
*/
|
|
7
|
+
export interface DataGridEditorProps<TValue = any, TRow = any> {
|
|
8
|
+
/** Current value being edited */
|
|
9
|
+
value: TValue;
|
|
10
|
+
/** The row data object */
|
|
11
|
+
row: TRow;
|
|
12
|
+
/** Column definition for this cell */
|
|
13
|
+
column: Column;
|
|
14
|
+
/** Callback to update the value during editing */
|
|
15
|
+
onChange: (value: TValue) => void;
|
|
16
|
+
/** Callback to commit the edit and close the editor */
|
|
17
|
+
onCommit: () => void;
|
|
18
|
+
/** Callback to cancel the edit and close the editor */
|
|
19
|
+
onCancel: () => void;
|
|
20
|
+
/** Whether the editor should auto-focus on mount */
|
|
21
|
+
autoFocus?: boolean;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Keyboard event handlers for editor navigation
|
|
25
|
+
*/
|
|
26
|
+
export interface EditorKeyboardHandlers {
|
|
27
|
+
onEnter?: () => void;
|
|
28
|
+
onEscape?: () => void;
|
|
29
|
+
onTab?: (shiftKey: boolean) => void;
|
|
30
|
+
onArrowUp?: () => void;
|
|
31
|
+
onArrowDown?: () => void;
|
|
32
|
+
onBlur?: () => void;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Configuration for editor keyboard navigation behavior
|
|
36
|
+
*/
|
|
37
|
+
export interface EditorKeyboardConfig {
|
|
38
|
+
/** Commit on Enter key (default: true) */
|
|
39
|
+
commitOnEnter?: boolean;
|
|
40
|
+
/** Cancel on Escape key (default: true) */
|
|
41
|
+
cancelOnEscape?: boolean;
|
|
42
|
+
/** Commit on Tab key (default: true) */
|
|
43
|
+
commitOnTab?: boolean;
|
|
44
|
+
/** Commit on blur/focus loss (default: true) */
|
|
45
|
+
commitOnBlur?: boolean;
|
|
46
|
+
/** Prevent default for handled keys (default: true) */
|
|
47
|
+
preventDefault?: boolean;
|
|
48
|
+
/** Stop propagation for handled keys (default: true) */
|
|
49
|
+
stopPropagation?: boolean;
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* Option interface for select-based editors
|
|
53
|
+
*/
|
|
54
|
+
export interface EditorOption {
|
|
55
|
+
label: string;
|
|
56
|
+
value: string | number;
|
|
57
|
+
icon?: ReactNode;
|
|
58
|
+
disabled?: boolean;
|
|
59
|
+
description?: string;
|
|
60
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import type { EditorKeyboardHandlers, EditorKeyboardConfig } from './editorTypes';
|
|
2
|
+
/**
|
|
3
|
+
* Hook for standardized keyboard navigation in cell editors.
|
|
4
|
+
* Handles common editor keyboard interactions (Enter, Escape, Tab, etc.)
|
|
5
|
+
*/
|
|
6
|
+
export declare function useEditorKeyboardNavigation(handlers: EditorKeyboardHandlers, config?: EditorKeyboardConfig): {
|
|
7
|
+
handleKeyDown: (event: React.KeyboardEvent) => void;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* Hook for auto-focusing an element when the editor mounts
|
|
11
|
+
*/
|
|
12
|
+
export declare function useEditorAutoFocus<T extends HTMLElement>(autoFocus?: boolean, selectAll?: boolean): import("react").RefObject<T | null>;
|
|
13
|
+
/**
|
|
14
|
+
* Hook for handling click outside to commit editor
|
|
15
|
+
*/
|
|
16
|
+
export declare function useEditorClickOutside(ref: React.RefObject<HTMLElement | null>, onClickOutside: () => void, enabled?: boolean): void;
|
|
17
|
+
/**
|
|
18
|
+
* Hook for positioning a popup/dropdown relative to an anchor element
|
|
19
|
+
*/
|
|
20
|
+
export declare function usePopupPosition(anchorRef: React.RefObject<HTMLElement | null>, popupRef: React.RefObject<HTMLElement | null>, isOpen: boolean, placement?: 'top' | 'bottom' | 'left' | 'right' | 'auto'): void;
|
|
21
|
+
/**
|
|
22
|
+
* Debounce utility for editor operations
|
|
23
|
+
*/
|
|
24
|
+
export declare function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void;
|
|
25
|
+
/**
|
|
26
|
+
* Format number with thousands separator and decimal places
|
|
27
|
+
*/
|
|
28
|
+
export declare function formatNumber(value: number, decimals?: number, thousandsSeparator?: string, decimalSeparator?: string): string;
|
|
29
|
+
/**
|
|
30
|
+
* Parse formatted number string back to number
|
|
31
|
+
*/
|
|
32
|
+
export declare function parseFormattedNumber(value: string, thousandsSeparator?: string, decimalSeparator?: string): number | null;
|
|
33
|
+
/**
|
|
34
|
+
* Filter options based on search query
|
|
35
|
+
*/
|
|
36
|
+
export declare function filterOptions<T extends {
|
|
37
|
+
label: string;
|
|
38
|
+
}>(options: T[], searchQuery: string): T[];
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export type { DataGridEditorProps, EditorKeyboardHandlers, EditorKeyboardConfig, EditorOption, } from './editorTypes';
|
|
2
|
+
export { useEditorKeyboardNavigation, useEditorAutoFocus, useEditorClickOutside, usePopupPosition, debounce, formatNumber, parseFormattedNumber, filterOptions, } from './editorUtils';
|
|
3
|
+
export { RichSelectEditor } from './RichSelectEditor';
|
|
4
|
+
export type { RichSelectOption, RichSelectEditorProps } from './RichSelectEditor';
|
|
5
|
+
export { DateEditor } from './DateEditor';
|
|
6
|
+
export type { DateEditorProps } from './DateEditor';
|
|
7
|
+
export { NumericEditor } from './NumericEditor';
|
|
8
|
+
export type { NumericEditorProps } from './NumericEditor';
|
|
9
|
+
export { MultiSelectEditor } from './MultiSelectEditor';
|
|
10
|
+
export type { MultiSelectOption, MultiSelectEditorProps } from './MultiSelectEditor';
|
|
11
|
+
export { MarkdownEditor } from './MarkdownEditor';
|
|
12
|
+
export type { MarkdownEditorProps } from './MarkdownEditor';
|