slickgrid-react 3.0.0 → 3.0.1

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.1](https://github.com/ghiscoding/slickgrid-react/compare/v3.0.0...v3.0.1) (2023-05-30)
+
+
+### Bug Fixes
+
+* prefer ESM module over CJS & prefer TS loaders ([#113](https://github.com/ghiscoding/slickgrid-react/issues/113)) ([3c1d510](https://github.com/ghiscoding/slickgrid-react/commit/3c1d510bcff82b331fbe0e4c47a7aa24fc6ff7e3))
+
 # [3.0.0](https://github.com/ghiscoding/slickgrid-react/compare/v2.6.4...v3.0.0) (2023-05-29)
 
 ## [2.6.4](https://github.com/ghiscoding/slickgrid-react/compare/v2.6.3...v2.6.4) (2023-05-20)

package/dist/cjs/components/slickgridReactProps.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BackendUtilityService, CollectionService, Column, ContainerService, ExtensionList, ExtensionService, ExtensionUtility, FilterService, GridOption, GridEventService, GridService, GridStateService, GroupingAndColspanService, Pagination, PaginationService, ResizerService, RxJsFacade, SharedService, SlickControlList, SlickDataView, SlickPluginList, SortService, TranslaterService, TreeDataService, SlickGridEventData, OnActiveCellChangedEventArgs, DragRowMove, OnAddNewRowEventArgs, OnAutosizeColumnsEventArgs, OnBeforeAppendCellEventArgs, OnBeforeCellEditorDestroyEventArgs, OnBeforeColumnsResizeEventArgs, OnBeforeEditCellEventArgs, OnBeforeFooterRowCellDestroyEventArgs, OnBeforeHeaderCellDestroyEventArgs, OnBeforeHeaderRowCellDestroyEventArgs, OnBeforeSetColumnsEventArgs, OnCellChangeEventArgs, OnCellCssStylesChangedEventArgs, OnClickEventArgs, OnColumnsDragEventArgs, OnColumnsReorderedEventArgs, OnColumnsResizeDblClickEventArgs, OnColumnsResizedEventArgs, OnCompositeEditorChangeEventArgs, OnDblClickEventArgs, OnFooterClickEventArgs, OnFooterContextMenuEventArgs, OnFooterRowCellRenderedEventArgs, OnHeaderCellRenderedEventArgs, OnHeaderClickEventArgs, OnHeaderContextMenuEventArgs, OnHeaderMouseEventArgs, OnHeaderRowCellRenderedEventArgs, OnKeyDownEventArgs, OnRenderedEventArgs, OnScrollEventArgs, OnSelectedRowsChangedEventArgs, OnSetOptionsEventArgs, OnValidationErrorEventArgs, SingleColumnSort, OnGroupCollapsedEventArgs, OnGroupExpandedEventArgs, OnRowCountChangedEventArgs, OnRowsChangedEventArgs, OnRowsOrCountChangedEventArgs, OnSetItemsCalledEventArgs, PagingInfo } from '@slickgrid-universal/common';
 import { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
 import { SlickgridReactInstance } from '../models';
@@ -280,6 +281,7 @@ export interface SlickgridReactProps {
     onGridStateChanged?: (e: CustomEvent<any>) => void;
     onPaginationChanged?: (e: CustomEvent<any>) => void;
     onReactGridCreated?: (e: CustomEvent<any>) => void;
+    onSelectedRowIdsChanged?: (e: CustomEvent<any>) => void;
     onSortChanged?: (e: CustomEvent<any>) => void;
     onToggleTreeCollapsed?: (e: CustomEvent<any>) => void;
     onTreeItemToggled?: (e: CustomEvent<any>) => void;

package/dist/esm/components/slickgridReactProps.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BackendUtilityService, CollectionService, Column, ContainerService, ExtensionList, ExtensionService, ExtensionUtility, FilterService, GridOption, GridEventService, GridService, GridStateService, GroupingAndColspanService, Pagination, PaginationService, ResizerService, RxJsFacade, SharedService, SlickControlList, SlickDataView, SlickPluginList, SortService, TranslaterService, TreeDataService, SlickGridEventData, OnActiveCellChangedEventArgs, DragRowMove, OnAddNewRowEventArgs, OnAutosizeColumnsEventArgs, OnBeforeAppendCellEventArgs, OnBeforeCellEditorDestroyEventArgs, OnBeforeColumnsResizeEventArgs, OnBeforeEditCellEventArgs, OnBeforeFooterRowCellDestroyEventArgs, OnBeforeHeaderCellDestroyEventArgs, OnBeforeHeaderRowCellDestroyEventArgs, OnBeforeSetColumnsEventArgs, OnCellChangeEventArgs, OnCellCssStylesChangedEventArgs, OnClickEventArgs, OnColumnsDragEventArgs, OnColumnsReorderedEventArgs, OnColumnsResizeDblClickEventArgs, OnColumnsResizedEventArgs, OnCompositeEditorChangeEventArgs, OnDblClickEventArgs, OnFooterClickEventArgs, OnFooterContextMenuEventArgs, OnFooterRowCellRenderedEventArgs, OnHeaderCellRenderedEventArgs, OnHeaderClickEventArgs, OnHeaderContextMenuEventArgs, OnHeaderMouseEventArgs, OnHeaderRowCellRenderedEventArgs, OnKeyDownEventArgs, OnRenderedEventArgs, OnScrollEventArgs, OnSelectedRowsChangedEventArgs, OnSetOptionsEventArgs, OnValidationErrorEventArgs, SingleColumnSort, OnGroupCollapsedEventArgs, OnGroupExpandedEventArgs, OnRowCountChangedEventArgs, OnRowsChangedEventArgs, OnRowsOrCountChangedEventArgs, OnSetItemsCalledEventArgs, PagingInfo } from '@slickgrid-universal/common';
 import { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
 import { SlickgridReactInstance } from '../models';
@@ -280,6 +281,7 @@ export interface SlickgridReactProps {
     onGridStateChanged?: (e: CustomEvent<any>) => void;
     onPaginationChanged?: (e: CustomEvent<any>) => void;
     onReactGridCreated?: (e: CustomEvent<any>) => void;
+    onSelectedRowIdsChanged?: (e: CustomEvent<any>) => void;
     onSortChanged?: (e: CustomEvent<any>) => void;
     onToggleTreeCollapsed?: (e: CustomEvent<any>) => void;
     onTreeItemToggled?: (e: CustomEvent<any>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slickgrid-react",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Slickgrid components made available in React",
   "keywords": [
     "react",
@@ -37,19 +37,33 @@
     }
   ],
   "main": "dist/cjs/index.js",
-  "typings": "dist/cjs/index.d.ts",
+  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/esm/index.js"
+    },
+    "./*": "./*"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/esm/index.d.ts"
+      ]
+    }
+  },
+  "types": "dist/esm/index.d.ts",
   "scripts": {
     "build:demo": "webpack --env production",
     "delete:dist": "rimraf dist",
     "lint": "eslint src/slickgrid-react --ext .ts",
-    "build:amd": "cross-env tsc --project src/slickgrid-react/tsconfig.build.json --outDir dist/amd --module amd",
-    "postbuild:amd": "cross-env copyfiles --up 2 src/slickgrid-react/**/*.html dist/amd",
     "build:cjs": "cross-env tsc --project src/slickgrid-react/tsconfig.build.json --outDir dist/cjs --module commonjs",
     "postbuild:cjs": "cross-env copyfiles --up 2 src/slickgrid-react/**/*.html dist/cjs",
     "build:esm": "cross-env tsc --project src/slickgrid-react/tsconfig.build.json --outDir dist/esm --module esnext --target es2018",
     "postbuild:esm": "cross-env copyfiles --up 2 src/slickgrid-react/**/*.html dist/esm",
     "prebuild": "npm-run-all delete:dist lint",
-    "build": "npm-run-all build:amd build:cjs build:esm",
+    "build": "npm-run-all build:cjs build:esm",
     "postbuild": "npm-run-all copy-i18n:dist copy-asset-lib",
     "copy-asset-lib": "cross-env copyfiles --up 2 src/assets/lib/** dist",
     "copy-i18n:dist": "cross-env copyfiles --up 3 src/assets/i18n/**/*.* dist/i18n",
@@ -91,9 +105,6 @@
   },
   "devDependencies": {
     "@4tw/cypress-drag-drop": "^2.2.3",
-    "@babel/preset-env": "^7.22.4",
-    "@babel/preset-react": "^7.22.3",
-    "@babel/preset-typescript": "^7.21.5",
     "@faker-js/faker": "^8.0.2",
     "@fnando/sparkline": "^0.3.10",
     "@popperjs/core": "^2.11.8",
@@ -123,7 +134,6 @@
     "@typescript-eslint/eslint-plugin": "^5.59.8",
     "@typescript-eslint/parser": "^5.59.8",
     "@webpack-cli/serve": "^2.0.4",
-    "babel-loader": "^9.1.2",
     "bootstrap": "^5.2.3",
     "clean-webpack-plugin": "^4.0.0",
     "concurrently": "^8.0.1",
@@ -132,6 +142,7 @@
     "cross-env": "^7.0.3",
     "css-loader": "^6.8.1",
     "custom-event-polyfill": "^1.0.7",
+    "esbuild-loader": "^3.0.1",
     "cypress": "^12.13.0",
     "eslint": "^8.41.0",
     "eslint-plugin-import": "^2.27.5",
@@ -158,10 +169,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^12.3.1",
-    "react-scripts": "^5.0.1",
     "react-router-dom": "^6.11.2",
     "release-it": "^15.10.3",
-    "require-dir": "^1.2.0",
     "rimraf": "^5.0.1",
     "rxjs": "^7.8.1",
     "sass": "^1.62.1",
@@ -180,6 +189,6 @@
     "npm": ">=8.5.0"
   },
   "resolutions": {
-    "caniuse-lite": "1.0.30001489"
+    "caniuse-lite": "1.0.30001490"
   }
 }

package/tsconfig.json

@@ -12,6 +12,7 @@
     "moduleResolution": "node",
     "allowJs": true,
     "baseUrl": "src",
+    "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
     "jsx": "react",
@@ -27,7 +28,6 @@
   "exclude": [
     "react_project",
     "dist",
-    "jspm_packages",
     "node_modules",
     "**/*.spec.ts"
   ],

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

@@ -1,207 +0,0 @@
-import React from 'react';
-import 'slickgrid/slick.core';
-import 'slickgrid/slick.interactions';
-import 'slickgrid/slick.grid';
-import 'slickgrid/slick.dataview';
-import { BackendServiceApi, Column, EventSubscription, ExtensionList, ExternalResource, Locale, Metrics, Pagination, ServicePagination, SlickDataView, SlickEventHandler, SlickGrid, BackendUtilityService, CollectionService, ExtensionService, ExtensionUtility, FilterFactory, FilterService, GridEventService, GridService, GridStateService, GroupingAndColspanService, PaginationService, ResizerService, RxJsFacade, SharedService, SlickGroupItemMetadataProvider, SortService, TreeDataService } 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 { SlickPaginationComponent } from '@slickgrid-universal/pagination-component';
-import { SlickgridReactInstance, GridOption } from '../models/index';
-import { ReactUtilService, TranslaterService } from '../services/index';
-import { Subscription } from 'rxjs';
-import { SlickgridReactProps } from './slickgridReactProps';
-interface State {
-    showPagination: boolean;
-    _gridOptions: GridOption;
-    paginationService: PaginationService;
-}
-export declare class SlickgridReact extends React.Component<SlickgridReactProps, State> {
-    readonly props: SlickgridReactProps;
-    protected _mounted: boolean;
-    protected setStateValue(key: string, value: any, callback?: () => void): void;
-    protected _columnDefinitions: Column[];
-    protected _currentDatasetLength: number;
-    protected _dataset: any[] | null;
-    protected _elm?: HTMLDivElement | null;
-    protected _eventHandler: SlickEventHandler;
-    protected _eventPubSubService: EventPubSubService;
-    protected _hideHeaderRowAfterPageLoad: boolean;
-    protected _isGridInitialized: boolean;
-    protected _isDatasetInitialized: boolean;
-    protected _isDatasetHierarchicalInitialized: boolean;
-    protected _isPaginationInitialized: boolean;
-    protected _isLocalGrid: boolean;
-    protected _paginationOptions: Pagination | undefined;
-    protected _registeredResources: ExternalResource[];
-    protected _gridOptions?: GridOption;
-    protected get gridOptions(): GridOption;
-    protected set gridOptions(options: GridOption);
-    groupItemMetadataProvider?: SlickGroupItemMetadataProvider;
-    backendServiceApi: BackendServiceApi | undefined;
-    locales: Locale;
-    metrics?: Metrics;
-    showPagination: boolean;
-    serviceList: any[];
-    subscriptions: Array<EventSubscription | Subscription>;
-    paginationData?: {
-        gridOptions: GridOption;
-        paginationService: PaginationService;
-    };
-    slickEmptyWarning: SlickEmptyWarningComponent | undefined;
-    slickFooter: SlickFooterComponent | undefined;
-    slickPagination: SlickPaginationComponent | undefined;
-    backendUtilityService: BackendUtilityService;
-    collectionService: CollectionService;
-    extensionService: ExtensionService;
-    extensionUtility: ExtensionUtility;
-    filterFactory: FilterFactory;
-    filterService: FilterService;
-    gridEventService: GridEventService;
-    gridService: GridService;
-    gridStateService: GridStateService;
-    groupingService: GroupingAndColspanService;
-    protected get paginationService(): PaginationService;
-    protected set paginationService(value: PaginationService);
-    resizerService: ResizerService;
-    rxjs?: RxJsFacade;
-    sharedService: SharedService;
-    sortService: SortService;
-    treeDataService: TreeDataService;
-    dataView: SlickDataView;
-    grid: SlickGrid;
-    totalItems: number;
-    extensions: ExtensionList<any>;
-    instances: SlickgridReactInstance | null;
-    static defaultProps: {
-        reactUtilService: ReactUtilService;
-        containerService: import("../services/container.service").ContainerService;
-        translaterService: TranslaterService;
-        dataset: never[];
-        gridId: string;
-        columnDefinitions: never[];
-    };
-    get dataset(): any[];
-    set dataset(newDataset: any[]);
-    get datasetHierarchical(): any[] | undefined;
-    set datasetHierarchical(newHierarchicalDataset: any[] | undefined);
-    constructor(props: SlickgridReactProps);
-    get eventHandler(): SlickEventHandler;
-    get isDatasetInitialized(): boolean;
-    set isDatasetInitialized(isInitialized: boolean);
-    set isDatasetHierarchicalInitialized(isInitialized: boolean);
-    get registeredResources(): ExternalResource[];
-    componentDidMount(): void;
-    initialization(eventHandler: SlickEventHandler): void;
-    componentWillUnmount(shouldEmptyDomElementContainer?: boolean): void;
-    emptyGridContainerElm(): void;
-    dispose(shouldEmptyDomElementContainer?: boolean): void;
-    componentDidUpdate(prevProps: SlickgridReactProps): void;
-    columnDefinitionsChanged(): void;
-    /**
-     * Commits the current edit to the grid
-     */
-    commitEdit(target: Element): void;
-    /**
-     * Define our internal Post Process callback, it will execute internally after we get back result from the Process backend call
-     * For now, this is GraphQL Service ONLY feature and it will basically
-     * refresh the Dataset & Pagination without having the user to create his own PostProcess every time
-     */
-    createBackendApiInternalPostProcessCallback(gridOptions: GridOption): void;
-    bindDifferentHooks(grid: SlickGrid, gridOptions: GridOption, dataView: SlickDataView): void;
-    bindBackendCallbackFunctions(gridOptions: GridOption): void;
-    bindResizeHook(grid: SlickGrid, options: GridOption): void;
-    executeAfterDataviewCreated(_grid: SlickGrid, gridOptions: GridOption): void;
-    /**
-     * On a Pagination changed, we will trigger a Grid State changed with the new pagination info
-     * Also if we use Row Selection or the Checkbox Selector with a Backend Service (Odata, GraphQL), we need to reset any selection
-     */
-    paginationChanged(pagination: ServicePagination): void;
-    paginationOptionsChanged(newPaginationOptions: Pagination): void;
-    /**
-     * When dataset changes, we need to refresh the entire grid UI & possibly resize it as well
-     * @param dataset
-     */
-    refreshGridData(dataset: any[], totalCount?: number): void;
-    /**
-     * Show the filter row displayed on first row, we can optionally pass false to hide it.
-     * @param showing
-     */
-    showHeaderRow(showing?: boolean): boolean;
-    /**
-     * Check if there's any Pagination Presets defined in the Grid Options,
-     * if there are then load them in the paginationOptions object
-     */
-    setPaginationOptionsWhenPresetDefined(gridOptions: GridOption, paginationOptions: Pagination): Pagination;
-    /**
-     * Dynamically change or update the column definitions list.
-     * We will re-render the grid so that the new header and data shows up correctly.
-     * If using i18n, we also need to trigger a re-translate of the column headers
-     */
-    updateColumnDefinitionsList(newColumnDefinitions: Column[]): void;
-    /**
-     * Loop through all column definitions and 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.
-     */
-    protected copyColumnWidthsReference(columnDefinitions: Column[]): void;
-    protected displayEmptyDataWarning(showWarning?: boolean): void;
-    /** When data changes in the DataView, we'll refresh the metrics and/or display a warning if the dataset is empty */
-    protected handleOnItemCountChanged(currentPageRowItemCount: number, totalItemCount: number): void;
-    /** Initialize the Pagination Service once */
-    protected initializePaginationService(paginationOptions: Pagination): void;
-    /**
-     * Render (or dispose) the Pagination Component, user can optionally provide False (to not show it) which will in term dispose of the Pagination,
-     * also while disposing we can choose to omit the disposable of the Pagination Service (if we are simply toggling the Pagination, we want to keep the Service alive)
-     * @param {Boolean} showPagination - show (new render) or not (dispose) the Pagination
-     * @param {Boolean} shouldDisposePaginationService - when disposing the Pagination, do we also want to dispose of the Pagination Service? (defaults to True)
-     */
-    protected renderPagination(showPagination?: boolean): 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[]): void;
-    /** Load any possible Columns Grid Presets */
-    protected loadColumnPresetsWhenDatasetInitialized(): void;
-    /** Load any possible Filters Grid Presets */
-    protected loadFilterPresetsWhenDatasetInitialized(): void;
-    /**
-     * local grid, check if we need to show the Pagination
-     * if so then also check if there's any presets and finally initialize the PaginationService
-     * a local grid with Pagination presets will potentially have a different total of items, we'll need to get it from the DataView and update our total
-     */
-    protected loadLocalGridPagination(dataset?: any[]): void;
-    /** Load any Row Selections into the DataView that were presets by the user */
-    protected loadRowSelectionPresetWhenExists(): void;
-    protected mergeGridOptions(gridOptions: GridOption): GridOption;
-    /** Pre-Register any Resource that don't require SlickGrid to be instantiated (for example RxJS Resource) */
-    protected preRegisterResources(): void;
-    protected registerResources(): void;
-    /** Register the RxJS Resource in all necessary services which uses */
-    protected registerRxJsResource(resource: RxJsFacade): void;
-    /**
-     * Takes a flat dataset with parent/child relationship, sort it (via its tree structure) and return the sorted flat array
-     * @param {Array<Object>} flatDatasetInput - flat dataset input
-     * @param {Boolean} forceGridRefresh - optionally force a full grid refresh
-     * @returns {Array<Object>} sort flat parent/child dataset
-     */
-    protected sortTreeDataset<T>(flatDatasetInput: T[], forceGridRefresh?: boolean): T[];
-    /**
-     * For convenience to the user, we provide the property "editor" as an Slickgrid-React editor complex object
-     * however "editor" is used internally by SlickGrid for it's own Editor Factory
-     * so in our lib we will swap "editor" and copy it into a new property called "internalColumnEditor"
-     * then take back "editor.model" and make it the new "editor" so that SlickGrid Editor Factory still works
-     */
-    protected swapInternalEditorToSlickGridFactoryEditor(columnDefinitions: Column[]): any[];
-    /** translate all columns (including hidden columns) */
-    protected translateColumnHeaderTitleKeys(): void;
-    /** translate all column groups (including hidden columns) */
-    protected translateColumnGroupKeys(): void;
-    /**
-     * Update the "internalColumnEditor.collection" property.
-     * Since this is called after the async call resolves, the pointer will not be the same as the "column" argument passed.
-     * Once we found the new pointer, we will reassign the "editor" and "collection" to the "internalColumnEditor" so it has newest collection
-     */
-    protected updateEditorCollection<T = any>(column: Column<T>, newCollection: T[]): void;
-    render(): React.JSX.Element;
-}
-export {};