slickgrid-react 9.13.0 → 10.0.0-beta.0

package/README.md

@@ -89,8 +89,9 @@ export default function Example() {
 
 | Slickgrid-React | React     | Migration Guide | Notes | Date |
 |:---------------:| --------- | --------------- | ----- | ---- |
-| 9.x             | React 19+ | [Migration 9.x](https://ghiscoding.gitbook.io/slickgrid-react/migrations/migration-to-9.x)  | ESM-Only, requires Slickgrid-Universal [9.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v9.0.0) | 2025-05-10 |
-| 5.x             | React 18+ | [Migration 5.x](https://ghiscoding.gitbook.io/slickgrid-react/migrations/migration-to-5.x)  | Modern UI / Dark Mode, requires Slickgrid-Universal [5.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v5.0.0) | 2024-05-10 |
+| 10.x             | React >=19.0 | [Migration 10.x](https://ghiscoding.gitbook.io/slickgrid-react/migrations/migration-to-10.x)  | Smaller code, requires Slickgrid-Universal [10.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v10.0.0) | TBD |
+| 9.x             | React >=19.0 | [Migration 9.x](https://ghiscoding.gitbook.io/slickgrid-react/migrations/migration-to-9.x)  | ESM-Only, requires Slickgrid-Universal [9.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v9.0.0) | 2025-05-10 |
+| 5.x             | React >=18.0 | [Migration 5.x](https://ghiscoding.gitbook.io/slickgrid-react/migrations/migration-to-5.x)  | Modern UI / Dark Mode, requires Slickgrid-Universal [5.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v5.0.0) | 2024-05-10 |
 | 4.x             |        | [Migration 4.x](https://ghiscoding.gitbook.io/slickgrid-react/migrations/migration-to-4.x)  | merge SlickGrid into Slickgrid-Universal,<br> requires Slickgrid-Universal [4.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v4.0.2) | 2023-12-15 |
 | 3.x             |        | [Migration 3.x](https://ghiscoding.gitbook.io/slickgrid-react/migrations/migration-to-3.x)  | removal of jQuery (now uses browser native code),<br> requires Slickgrid-Universal [3.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v3.0.0) | 2023-05-29 |
 | 2.x             | React 18+ | [Migration 2.x](https://ghiscoding.gitbook.io/slickgrid-react/migrations/migration-to-2.x)     | removal of jQueryUI, requires Slickgrid-Universal [2.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v2.0.0) | 2022-12-08 |

package/dist/components/slickgrid-react.d.ts

@@ -1,4 +1,4 @@
-import { BackendUtilityService, CollectionService, ExtensionService, ExtensionUtility, FilterFactory, FilterService, GridEventService, GridService, GridStateService, HeaderGroupingService, PaginationService, ResizerService, SharedService, SlickDataView, SlickEventHandler, SlickGrid, SlickGroupItemMetadataProvider, SortService, TreeDataService, type BackendService, type BackendServiceApi, type BasePaginationComponent, type Column, type EventSubscription, type ExtensionList, type ExternalResource, type Metrics, type Pagination, type PaginationMetadata, type RxJsFacade } from '@slickgrid-universal/common';
+import { BackendUtilityService, CollectionService, ExtensionService, ExtensionUtility, FilterFactory, FilterService, GridEventService, GridService, GridStateService, HeaderGroupingService, PaginationService, ResizerService, SharedService, SlickDataView, SlickEventHandler, SlickGrid, SlickGroupItemMetadataProvider, SortService, TreeDataService, type BackendService, type BackendServiceApi, type BasePaginationComponent, type Column, type EventSubscription, type ExtensionList, type ExternalResource, type ExternalResourceConstructor, type Metrics, type Pagination, type PaginationMetadata, type RxJsFacade } from '@slickgrid-universal/common';
 import { SlickFooterComponent } from '@slickgrid-universal/custom-footer-component';
 import { SlickEmptyWarningComponent } from '@slickgrid-universal/empty-warning-component';
 import { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
@@ -38,7 +38,7 @@ export declare class SlickgridReact<TData = any> extends React.Component<Slickgr
     protected _isPaginationInitialized: boolean;
     protected _isLocalGrid: boolean;
     protected _paginationOptions: Pagination | undefined;
-    protected _registeredResources: ExternalResource[];
+    protected _registeredResources: Array<ExternalResource | ExternalResourceConstructor>;
     protected _scrollEndCalled: boolean;
     protected get options(): GridOption;
     protected set options(options: GridOption);
@@ -92,7 +92,7 @@ export declare class SlickgridReact<TData = any> extends React.Component<Slickgr
     get isDatasetInitialized(): boolean;
     set isDatasetInitialized(isInitialized: boolean);
     set isDatasetHierarchicalInitialized(isInitialized: boolean);
-    get registeredResources(): ExternalResource[];
+    get registeredResources(): Array<ExternalResource | ExternalResourceConstructor>;
     componentDidMount(): void;
     initialization(eventHandler: SlickEventHandler): void;
     componentWillUnmount(shouldEmptyDomElementContainer?: boolean): void;
@@ -164,7 +164,6 @@ export declare class SlickgridReact<TData = any> extends React.Component<Slickgr
     protected renderPagination(showPagination?: boolean): Promise<void>;
     /** Load the Editor Collection asynchronously and replace the "collection" property when Promise resolves */
     protected loadEditorCollectionAsync(column: Column): void;
-    protected insertDynamicPresetColumns(columnId: string, gridPresetColumns: Column<TData>[]): void;
     /** Load any possible Columns Grid Presets */
     protected loadColumnPresetsWhenDatasetInitialized(): void;
     /** Load any possible Filters Grid Presets */
@@ -180,11 +179,13 @@ export declare class SlickgridReact<TData = any> extends React.Component<Slickgr
     hasBackendInfiniteScroll(gridOptions?: GridOption): boolean;
     protected mergeGridOptions(gridOptions: GridOption): GridOption;
     /** Add a register a new external resource, user could also optional dispose all previous resources before pushing any new resources to the resources array list. */
-    registerExternalResources(resources: ExternalResource[], disposePreviousResources?: boolean): void;
+    registerExternalResources(resources: Array<ExternalResource | ExternalResourceConstructor>, disposePreviousResources?: boolean): void;
     resetExternalResources(): void;
     /** Pre-Register any Resource that don't require SlickGrid to be instantiated (for example RxJS Resource & RowDetail) */
     protected preRegisterResources(): void;
-    protected initializeExternalResources(resources: ExternalResource[]): void;
+    /** initialized & auto-enable external registered resources, e.g. if user registers `ExcelExportService` then let's auto-enable `enableExcelExport:true` */
+    protected autoEnableInitializedResources(resource: ExternalResource | ExternalResourceConstructor): void;
+    protected initializeExternalResources(resources: Array<ExternalResource | ExternalResourceConstructor>): void;
     protected registerResources(): void;
     /** Register the RxJS Resource in all necessary services which uses */
     protected registerRxJsResource(resource: RxJsFacade): void;

package/dist/components/slickgrid-react.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { autoAddEditorFormatterToColumnsWithEditor, BackendUtilityService, collectionObserver, CollectionService, emptyElement, EventNamingStyle, ExtensionService, ExtensionUtility, FilterFactory, FilterService, GridEventService, GridService, GridStateService, HeaderGroupingService, isColumnDateType, PaginationService, ResizerService, SharedService, SlickDataView, SlickEventHandler, SlickGrid, SlickgridConfig, SlickGroupItemMetadataProvider, SortService, TreeDataService, } from '@slickgrid-universal/common';
+import { autoAddEditorFormatterToColumnsWithEditor, BackendUtilityService, collectionObserver, CollectionService, emptyElement, ExtensionService, ExtensionUtility, FilterFactory, FilterService, GridEventService, GridService, GridStateService, HeaderGroupingService, isColumnDateType, PaginationService, PluginFlagMappings, ResizerService, SharedService, SlickDataView, SlickEventHandler, SlickGrid, SlickgridConfig, SlickGroupItemMetadataProvider, SortService, TreeDataService, } from '@slickgrid-universal/common';
 import { SlickFooterComponent } from '@slickgrid-universal/custom-footer-component';
 import { SlickEmptyWarningComponent } from '@slickgrid-universal/empty-warning-component';
 import { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
@@ -183,7 +183,7 @@ export class SlickgridReact extends React.Component {
         this._options = this.mergeGridOptions(props.options || {});
         // initialize and assign all Service Dependencies
         this._eventPubSubService = new EventPubSubService();
-        this._eventPubSubService.eventNamingStyle = EventNamingStyle.camelCase;
+        this._eventPubSubService.eventNamingStyle = 'camelCase';
         this.backendUtilityService = new BackendUtilityService();
         this.gridEventService = new GridEventService();
         this.sharedService = new SharedService();
@@ -313,7 +313,7 @@ export class SlickgridReact extends React.Component {
             this._options.enableMouseWheelScrollHandler === undefined) {
             this._options.enableMouseWheelScrollHandler = true;
         }
-        this._eventPubSubService.eventNamingStyle = this._options?.eventNamingStyle ?? EventNamingStyle.camelCase;
+        this._eventPubSubService.eventNamingStyle = this._options?.eventNamingStyle ?? 'camelCase';
         this._eventPubSubService.publish(`onBeforeGridCreate`, true);
         // make sure the dataset is initialized (if not it will throw an error that it cannot getLength of null)
         this._dataset ||= this.props.dataset || [];
@@ -362,7 +362,6 @@ export class SlickgridReact extends React.Component {
         }
         // save reference for all columns before they optionally become hidden/visible
         this.sharedService.allColumns = this._columns;
-        this.sharedService.visibleColumns = this._columns;
         // after subscribing to potential columns changed, we are ready to create these optional extensions
         // when we did find some to create (RowMove, RowDetail, RowSelections), it will automatically modify column definitions (by previous subscribe)
         this.extensionService.createExtensionsBeforeGridCreation(this._columns, this._options);
@@ -378,12 +377,12 @@ export class SlickgridReact extends React.Component {
         if (this.groupItemMetadataProvider) {
             this.grid.registerPlugin(this.groupItemMetadataProvider); // register GroupItemMetadataProvider when Grouping is enabled
         }
+        // get any possible Services that user want to register
+        this.registerResources();
         this.extensionService.bindDifferentExtensions();
         this.bindDifferentHooks(this.grid, this._options, this.dataView);
         // when it's a frozen grid, we need to keep the frozen column id for reference if we ever show/hide column from ColumnPicker/GridMenu afterward
         this.sharedService.frozenVisibleColumnId = this.grid.getFrozenColumnId();
-        // get any possible Services that user want to register
-        this.registerResources();
         // initialize the SlickGrid grid
         this.grid.init();
         // initialized the resizer service only after SlickGrid is initialized
@@ -425,8 +424,7 @@ export class SlickgridReact extends React.Component {
                 }
             }
             if (this._dataset.length > 0) {
-                if (!this._isDatasetInitialized &&
-                    (this._options.enableCheckboxSelector || this._options.enableRowSelection || this._options.enableHybridSelection)) {
+                if (!this._isDatasetInitialized && (this._options.enableCheckboxSelector || this._options.enableSelection)) {
                     this.loadRowSelectionPresetWhenExists();
                 }
                 this.loadFilterPresetsWhenDatasetInitialized();
@@ -550,7 +548,7 @@ export class SlickgridReact extends React.Component {
         if (Array.isArray(this._registeredResources)) {
             while (this._registeredResources.length > 0) {
                 const res = this._registeredResources.pop();
-                if (res?.dispose) {
+                if (typeof res?.dispose === 'function') {
                     res.dispose();
                 }
             }
@@ -666,10 +664,9 @@ export class SlickgridReact extends React.Component {
                         this.filterService.bindLocalOnFilter(grid);
                     }
                 }
-                // when column are reordered, we need to update the visibleColumn array
-                this._eventHandler.subscribe(grid.onColumnsReordered, (_e, args) => {
+                // when column are reordered, we need to update SharedService flag
+                this._eventHandler.subscribe(grid.onColumnsReordered, () => {
                     this.sharedService.hasColumnsReordered = true;
-                    this.sharedService.visibleColumns = args.impactedColumns;
                 });
                 this._eventHandler.subscribe(grid.onSetOptions, (_e, args) => {
                     // add/remove dark mode CSS class when enabled
@@ -861,7 +858,7 @@ export class SlickgridReact extends React.Component {
         if (this.grid &&
             !isSyncGridSelectionEnabled &&
             this.options?.backendServiceApi &&
-            (this.options.enableRowSelection || this.options.enableHybridSelection || this.options.enableCheckboxSelector)) {
+            (this.options.enableSelection || this.options.enableCheckboxSelector)) {
             this.grid.setSelectedRows([]);
         }
         const { pageNumber, pageSize } = pagination;
@@ -992,9 +989,7 @@ export class SlickgridReact extends React.Component {
             if (this._options.enableTranslate) {
                 this.extensionService.translateColumnHeaders(undefined, newColumns);
             }
-            else {
-                this.extensionService.renderColumnHeaders(newColumns, true);
-            }
+            this.extensionService.renderColumnHeaders(newColumns, true);
             if (this._options?.enableAutoSizeColumns) {
                 this.grid.autosizeColumns();
             }
@@ -1125,43 +1120,13 @@ export class SlickgridReact extends React.Component {
             }
         }
     }
-    insertDynamicPresetColumns(columnId, gridPresetColumns) {
-        if (this._columns) {
-            const columnPosition = this._columns.findIndex((c) => c.id === columnId);
-            if (columnPosition >= 0) {
-                const dynColumn = this._columns[columnPosition];
-                if (dynColumn?.id === columnId && !gridPresetColumns.some((c) => c.id === columnId)) {
-                    columnPosition > 0 ? gridPresetColumns.splice(columnPosition, 0, dynColumn) : gridPresetColumns.unshift(dynColumn);
-                }
-            }
-        }
-    }
     /** Load any possible Columns Grid Presets */
     loadColumnPresetsWhenDatasetInitialized() {
         // if user entered some Columns "presets", we need to reflect them all in the grid
         if (this.grid && this.options.presets && Array.isArray(this.options.presets.columns) && this.options.presets.columns.length > 0) {
-            const gridPresetColumns = this.gridStateService.getAssociatedGridColumns(this.grid, this.options.presets.columns);
-            if (gridPresetColumns && Array.isArray(gridPresetColumns) && gridPresetColumns.length > 0 && Array.isArray(this._columns)) {
-                // make sure that the dynamic columns are included in presets (1.Row Move, 2. Row Selection, 3. Row Detail)
-                if (this.options.enableRowMoveManager) {
-                    const rmmColId = this.options?.rowMoveManager?.columnId ?? '_move';
-                    this.insertDynamicPresetColumns(rmmColId, gridPresetColumns);
-                }
-                if (this.options.enableCheckboxSelector) {
-                    const chkColId = this.options?.checkboxSelector?.columnId ?? '_checkbox_selector';
-                    this.insertDynamicPresetColumns(chkColId, gridPresetColumns);
-                }
-                if (this.options.enableRowDetailView) {
-                    const rdvColId = this.options?.rowDetailView?.columnId ?? '_detail_selector';
-                    this.insertDynamicPresetColumns(rdvColId, gridPresetColumns);
-                }
-                // keep copy the original optional `width` properties optionally provided by the user.
-                // We will use this when doing a resize by cell content, if user provided a `width` it won't override it.
-                gridPresetColumns.forEach((col) => (col.originalWidth = col.width));
-                // finally set the new presets columns (including checkbox selector if need be)
-                this.grid.setColumns(gridPresetColumns);
-                this.sharedService.visibleColumns = gridPresetColumns;
-            }
+            // delegate to GridStateService for centralized column arrangement logic
+            // we pass `false` for triggerAutoSizeColumns to maintain original behavior on preset load
+            this.gridStateService.changeColumnsArrangement(this.options.presets.columns, false);
         }
     }
     /** Load any possible Filters Grid Presets */
@@ -1197,7 +1162,7 @@ export class SlickgridReact extends React.Component {
     loadRowSelectionPresetWhenExists() {
         // if user entered some Row Selections "presets"
         const presets = this._options?.presets;
-        const enableRowSelection = this._options && (this._options.enableCheckboxSelector || this._options.enableRowSelection || this._options.enableHybridSelection);
+        const enableRowSelection = this._options && (this._options.enableCheckboxSelector || this._options.enableSelection);
         if (enableRowSelection &&
             this.grid?.getSelectionModel() &&
             presets?.rowSelection &&
@@ -1271,18 +1236,31 @@ export class SlickgridReact extends React.Component {
         // register all services by executing their init method and providing them with the Grid object
         if (Array.isArray(this._registeredResources)) {
             for (const resource of this._registeredResources) {
-                if (resource?.className === 'RxJsResource') {
+                if (resource?.pluginName === 'RxJsResource') {
                     this.registerRxJsResource(resource);
                 }
             }
         }
     }
+    /** initialized & auto-enable external registered resources, e.g. if user registers `ExcelExportService` then let's auto-enable `enableExcelExport:true` */
+    autoEnableInitializedResources(resource) {
+        if (this.grid && typeof resource.init === 'function') {
+            resource.init(this.grid, this.props.containerService);
+        }
+        // auto-enable unless the flag was specifically disabled by the end user
+        if ('pluginName' in resource) {
+            const pluginFlagName = PluginFlagMappings.get(resource.pluginName);
+            if (pluginFlagName && this.options[pluginFlagName] !== false) {
+                this.options[pluginFlagName] = true;
+                this.grid?.setOptions({ [pluginFlagName]: true });
+            }
+        }
+    }
     initializeExternalResources(resources) {
+        PluginFlagMappings.set('ReactSlickRowDetailView', 'enableRowDetailView');
         if (Array.isArray(resources)) {
             for (const resource of resources) {
-                if (this.grid && typeof resource.init === 'function') {
-                    resource.init(this.grid, this.props.containerService);
-                }
+                this.autoEnableInitializedResources(resource);
             }
         }
     }