slickgrid-react 9.8.0 → 9.10.0

package/src/components/slickgrid-react.tsx

@@ -1,27 +1,9 @@
 import {
-  // interfaces/types
-  type AutocompleterEditor,
-  type BackendService,
-  type BackendServiceApi,
-  type BackendServiceOption,
-  type BasePaginationComponent,
-  type Column,
-  type DataViewOption,
-  type EventSubscription,
-  type ExtensionList,
-  type ExternalResource,
-  type Metrics,
-  type Pagination,
-  type PaginationMetadata,
-  type SelectEditor,
-  SlickDataView,
-  SlickEventHandler,
-  SlickGrid,
-
-  // services
+  autoAddEditorFormatterToColumnsWithEditor,
   BackendUtilityService,
   collectionObserver,
   CollectionService,
+  emptyElement,
   EventNamingStyle,
   ExtensionService,
   ExtensionUtility,
@@ -31,37 +13,49 @@ import {
   GridService,
   GridStateService,
   HeaderGroupingService,
-  type Observable,
+  isColumnDateType,
   PaginationService,
   ResizerService,
-  type RxJsFacade,
   SharedService,
-  SlickGroupItemMetadataProvider,
+  SlickDataView,
+  SlickEventHandler,
+  SlickGrid,
   SlickgridConfig,
+  SlickGroupItemMetadataProvider,
   SortService,
   TreeDataService,
-
-  // utilities
-  autoAddEditorFormatterToColumnsWithEditor,
-  emptyElement,
-  isColumnDateType,
+  type AutocompleterEditor,
+  type BackendService,
+  type BackendServiceApi,
+  type BackendServiceOption,
+  type BasePaginationComponent,
+  type Column,
+  type DataViewOption,
+  type EventSubscription,
+  type ExtensionList,
+  type ExternalResource,
+  type Metrics,
+  type Observable,
+  type Pagination,
+  type PaginationMetadata,
+  type RxJsFacade,
+  type SelectEditor,
 } from '@slickgrid-universal/common';
-import { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
 import { SlickFooterComponent } from '@slickgrid-universal/custom-footer-component';
 import { SlickEmptyWarningComponent } from '@slickgrid-universal/empty-warning-component';
+import { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
 import { SlickPaginationComponent } from '@slickgrid-universal/pagination-component';
 import { deepCopy, extend } from '@slickgrid-universal/utils';
 import { dequal } from 'dequal/lite';
 import React from 'react';
 import type { Subscription } from 'rxjs';
-
 import { I18nextContext } from '../contexts/i18nextContext.js';
 import { GlobalGridOptions } from '../global-grid-options.js';
 import type { GridOption, I18Next, SlickgridReactInstance } from '../models/index.js';
-import { disposeAllSubscriptions } from '../services/utilities.js';
-import { GlobalContainerService } from '../services/singletons.js';
 import { loadReactComponentDynamically } from '../services/reactUtils.js';
+import { GlobalContainerService } from '../services/singletons.js';
 import { TranslaterI18NextService } from '../services/translaterI18Next.service.js';
+import { disposeAllSubscriptions } from '../services/utilities.js';
 import type { SlickgridReactProps } from './slickgridReactProps.js';
 
 const WARN_NO_PREPARSE_DATE_SIZE = 10000; // data size to warn user when pre-parse isn't enabled
@@ -188,7 +182,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
   set dataset(newDataset: any[]) {
     const prevDatasetLn = this._currentDatasetLength;
     const isDatasetEqual = dequal(newDataset, this.dataset || []);
-    let data = !!this._options?.enableDeepCopyDatasetOnPageLoad ? deepCopy(newDataset) : newDataset;
+    let data = this._options?.enableDeepCopyDatasetOnPageLoad ? deepCopy(newDataset) : newDataset;
 
     // when Tree Data is enabled and we don't yet have the hierarchical dataset filled, we can force a convert+sort of the array
     if (
@@ -545,14 +539,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
     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
-    const frozenColumnIndex = this._options?.frozenColumn ?? -1;
-    if (
-      frozenColumnIndex >= 0 &&
-      frozenColumnIndex <= this.sharedService.visibleColumns.length &&
-      this.sharedService.visibleColumns.length > 0
-    ) {
-      this.sharedService.frozenVisibleColumnId = this.sharedService.visibleColumns[frozenColumnIndex]?.id ?? '';
-    }
+    this.sharedService.frozenVisibleColumnId = this.grid.getFrozenColumnId();
 
     // get any possible Services that user want to register
     this.registerResources();
@@ -608,7 +595,10 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
       }
 
       if (this._dataset.length > 0) {
-        if (!this._isDatasetInitialized && (this._options.enableCheckboxSelector || this._options.enableRowSelection)) {
+        if (
+          !this._isDatasetInitialized &&
+          (this._options.enableCheckboxSelector || this._options.enableRowSelection || this._options.enableHybridSelection)
+        ) {
           this.loadRowSelectionPresetWhenExists();
         }
         this.loadFilterPresetsWhenDatasetInitialized();
@@ -1123,7 +1113,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
       this.grid &&
       !isSyncGridSelectionEnabled &&
       this.options?.backendServiceApi &&
-      (this.options.enableRowSelection || this.options.enableCheckboxSelector)
+      (this.options.enableRowSelection || this.options.enableHybridSelection || this.options.enableCheckboxSelector)
     ) {
       this.grid.setSelectedRows([]);
     }
@@ -1504,7 +1494,8 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
   protected loadRowSelectionPresetWhenExists() {
     // if user entered some Row Selections "presets"
     const presets = this._options?.presets;
-    const enableRowSelection = this._options && (this._options.enableCheckboxSelector || this._options.enableRowSelection);
+    const enableRowSelection =
+      this._options && (this._options.enableCheckboxSelector || this._options.enableRowSelection || this._options.enableHybridSelection);
     if (
       enableRowSelection &&
       this.grid?.getSelectionModel() &&

package/src/components/slickgridReactProps.ts

@@ -3,8 +3,14 @@ import type {
   ContainerService,
   DragRowMove,
   ExtensionList,
+  GridMenuCommandItemCallbackArgs,
+  GridMenuEventWithElementCallbackArgs,
   GridOption,
   HeaderButtonOnCommandArgs,
+  HeaderMenuCommandItemCallbackArgs,
+  MenuCommandItemCallbackArgs,
+  MenuFromCellCallbackArgs,
+  MenuOptionItemCallbackArgs,
   OnActiveCellChangedEventArgs,
   OnAddNewRowEventArgs,
   OnAutosizeColumnsEventArgs,
@@ -25,9 +31,12 @@ import type {
   OnColumnsResizedEventArgs,
   OnCompositeEditorChangeEventArgs,
   OnDblClickEventArgs,
+  OnDragReplaceCellsEventArgs,
   OnFooterClickEventArgs,
   OnFooterContextMenuEventArgs,
   OnFooterRowCellRenderedEventArgs,
+  OnGroupCollapsedEventArgs,
+  OnGroupExpandedEventArgs,
   OnHeaderCellRenderedEventArgs,
   OnHeaderClickEventArgs,
   OnHeaderContextMenuEventArgs,
@@ -35,33 +44,24 @@ import type {
   OnHeaderRowCellRenderedEventArgs,
   OnKeyDownEventArgs,
   OnRenderedEventArgs,
-  OnScrollEventArgs,
-  OnSelectedRowsChangedEventArgs,
-  OnSetOptionsEventArgs,
-  OnValidationErrorEventArgs,
-  SingleColumnSort,
-  OnGroupCollapsedEventArgs,
-  OnGroupExpandedEventArgs,
   OnRowCountChangedEventArgs,
   OnRowsChangedEventArgs,
   OnRowsOrCountChangedEventArgs,
+  OnScrollEventArgs,
+  OnSelectedRowsChangedEventArgs,
   OnSetItemsCalledEventArgs,
+  OnSetOptionsEventArgs,
+  OnValidationErrorEventArgs,
   Pagination,
+  PaginationChangedArgs,
   PagingInfo,
+  SingleColumnSort,
   SlickControlList,
   SlickDataView,
   SlickGrid,
   SlickPluginList,
   SlickRange,
-  GridMenuCommandItemCallbackArgs,
-  GridMenuEventWithElementCallbackArgs,
-  MenuCommandItemCallbackArgs,
-  HeaderMenuCommandItemCallbackArgs,
-  PaginationChangedArgs,
-  MenuFromCellCallbackArgs,
-  MenuOptionItemCallbackArgs,
 } from '@slickgrid-universal/common';
-
 import type { SlickgridReactInstance } from '../models/index.js';
 import type { TranslaterI18NextService } from '../services/translaterI18Next.service.js';
 
@@ -112,6 +112,7 @@ export interface SlickgridReactProps {
   onDragEnd?: (e: CustomEvent<{ eventData: any; args: DragRowMove }>) => void;
   onDragInit?: (e: CustomEvent<{ eventData: any; args: DragRowMove }>) => void;
   onDragStart?: (e: CustomEvent<{ eventData: any; args: DragRowMove }>) => void;
+  onDragReplaceCells?: (e: CustomEvent<{ eventData: any; args: OnDragReplaceCellsEventArgs }>) => void;
   onDblClick?: (e: CustomEvent<{ eventData: any; args: OnDblClickEventArgs }>) => void;
   onFooterContextMenu?: (e: CustomEvent<{ eventData: any; args: OnFooterContextMenuEventArgs }>) => void;
   onFooterRowCellRendered?: (e: CustomEvent<{ eventData: any; args: OnFooterRowCellRenderedEventArgs }>) => void;

package/src/contexts/i18nextContext.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import type { I18Next } from '../models/i18next.interface.js';
 
 export const I18nextContext = React.createContext<I18Next | null>(null);

package/src/extensions/slickRowDetailView.ts

@@ -1,18 +1,19 @@
 import {
   addToArrayWhenNotExists,
   createDomElement,
+  SlickEventData,
+  SlickHybridSelectionModel,
+  SlickRowSelectionModel,
+  unsubscribeAll,
   type EventSubscription,
   type OnBeforeRowDetailToggleArgs,
   type OnRowBackOrOutOfViewportRangeArgs,
-  SlickEventData,
+  type SelectionModel,
   type SlickGrid,
-  SlickRowSelectionModel,
-  unsubscribeAll,
 } from '@slickgrid-universal/common';
 import { type EventPubSubService } from '@slickgrid-universal/event-pub-sub';
 import { SlickRowDetailView as UniversalSlickRowDetailView } from '@slickgrid-universal/row-detail-view-plugin';
 import type { Root } from 'react-dom/client';
-
 import type { GridOption, RowDetailView, ViewModelBindableInputData } from '../models/index.js';
 import { createReactComponentDynamically } from '../services/reactUtils.js';
 
@@ -81,16 +82,16 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
 
   init(grid: SlickGrid) {
     this._grid = grid;
-    super.init(this._grid);
+    super.init(grid);
     this.gridContainerElement = grid.getContainerNode();
-    this.register(grid?.getSelectionModel() as SlickRowSelectionModel);
+    this.register(grid.getSelectionModel());
   }
 
   /**
    * Create the plugin before the Grid creation, else it will behave oddly.
    * Mostly because the column definitions might change after the grid creation
    */
-  register(rowSelectionPlugin?: SlickRowSelectionModel) {
+  register(rowSelectionPlugin?: SelectionModel) {
     if (typeof this.gridOptions.rowDetailView?.process === 'function') {
       // we need to keep the user "process" method and replace it with our own execution method
       // we do this because when we get the item detail, we need to call "onAsyncResponse.notify" for the plugin to work
@@ -104,11 +105,11 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
       // load the Preload & RowDetail Templates (could be straight HTML or React Components)
       // when those are React Components, we need to create View Component & provide the html containers to the Plugin (preTemplate/postTemplate methods)
       if (!this.gridOptions.rowDetailView.preTemplate) {
-        this._preloadComponent = this.gridOptions?.rowDetailView?.preloadComponent;
+        this._preloadComponent = this.gridOptions.rowDetailView.preloadComponent;
         this.addonOptions.preTemplate = () => createDomElement('div', { className: `${PRELOAD_CONTAINER_PREFIX}` });
       }
       if (!this.gridOptions.rowDetailView.postTemplate) {
-        this._component = this.gridOptions?.rowDetailView?.viewComponent;
+        this._component = this.gridOptions.rowDetailView.viewComponent;
         this.addonOptions.postTemplate = (itemDetail: any) =>
           createDomElement('div', { className: `${ROW_DETAIL_CONTAINER_PREFIX}${itemDetail[this.datasetIdPropName]}` });
       }
@@ -116,7 +117,8 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
       if (this._grid && this.gridOptions) {
         // this also requires the Row Selection Model to be registered as well
         if (!rowSelectionPlugin || !this._grid.getSelectionModel()) {
-          rowSelectionPlugin = new SlickRowSelectionModel(this.gridOptions.rowSelectionOptions || { selectActiveRow: true });
+          const SelectionModelClass = this.gridOptions.enableHybridSelection ? SlickHybridSelectionModel : SlickRowSelectionModel;
+          rowSelectionPlugin = new SelectionModelClass(this.gridOptions.rowSelectionOptions || { selectActiveRow: true });
           this._grid.setSelectionModel(rowSelectionPlugin);
         }
 
@@ -196,7 +198,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
           this.eventHandler.subscribe(this._grid.onColumnsReordered, () => this.redrawAllViewComponents(false));
 
           // on row selection changed, we also need to redraw
-          if (this.gridOptions.enableRowSelection || this.gridOptions.enableCheckboxSelector) {
+          if (this.gridOptions.enableRowSelection || this.gridOptions.enableHybridSelection || this.gridOptions.enableCheckboxSelector) {
             this._eventHandler.subscribe(this._grid.onSelectedRowsChanged, () => this.redrawAllViewComponents(false));
           }
 

package/src/global-grid-options.ts

@@ -1,5 +1,4 @@
-import { type Column, DelimiterType, EventNamingStyle, Filters, type TreeDataOption } from '@slickgrid-universal/common';
-
+import { DelimiterType, EventNamingStyle, Filters, type Column, type TreeDataOption } from '@slickgrid-universal/common';
 import type { GridOption, RowDetailView } from './models/index.js';
 
 /**

package/src/index.ts

@@ -1,10 +1,9 @@
-import 'regenerator-runtime/runtime.js';
-export * from '@slickgrid-universal/common';
-
 import { SlickgridReact } from './components/slickgrid-react.js';
 import { SlickRowDetailView } from './extensions/slickRowDetailView.js';
+import type { GridOption, RowDetailView, SlickgridReactComponentOutput, SlickgridReactInstance } from './models/index.js';
 import type { SlickgridConfig } from './slickgrid-config.js';
-import type { SlickgridReactInstance, SlickgridReactComponentOutput, RowDetailView, GridOption } from './models/index.js';
+
+export * from '@slickgrid-universal/common';
 
 // expose all public classes & contexts
 export { TranslaterI18NextService, disposeAllSubscriptions } from './services/index.js';

package/src/models/gridOption.interface.ts

@@ -1,6 +1,5 @@
 import type { BasePaginationComponent, BasePaginationModel, GridOption as UniversalGridOption } from '@slickgrid-universal/common';
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
-
 import type { I18Next } from './i18next.interface.js';
 import type { RowDetailView } from './rowDetailView.interface.js';
 

package/src/models/reactComponentOutput.interface.ts

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/consistent-type-imports */
+/* oxlint-disable @typescript-eslint/consistent-type-imports */
 import React, { type ReactInstance } from 'react';
 
 export interface SlickgridReactComponentOutput {

package/src/services/singletons.ts

@@ -1,6 +1,5 @@
 import { SharedService } from '@slickgrid-universal/common';
 import { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
-
 import { ContainerService } from './container.service.js';
 
 export const GlobalEventPubSubService = new EventPubSubService();

package/src/services/translaterI18Next.service.ts

@@ -1,5 +1,4 @@
 import type { TranslaterService as UniversalTranslateService } from '@slickgrid-universal/common';
-
 import type { I18Next } from '../models/i18next.interface.js';
 
 /**

package/src/slickgrid-config.ts

@@ -1,5 +1,5 @@
-import type { GridOption } from './models/gridOption.interface.js';
 import { GlobalGridOptions } from './global-grid-options.js';
+import type { GridOption } from './models/gridOption.interface.js';
 
 export class SlickgridConfig {
   options: Partial<GridOption>;