slickgrid-react 5.14.1 → 9.0.0

package/README.md

@@ -2,33 +2,31 @@
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
-[![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg?logo=cypress)](https://www.cypress.io/)
 [![NPM downloads](https://img.shields.io/npm/dy/slickgrid-react)](https://npmjs.org/package/slickgrid-react)
 [![npm](https://img.shields.io/npm/v/slickgrid-react.svg?logo=npm&logoColor=fff&label=npm)](https://www.npmjs.com/package/slickgrid-react)
 [![npm bundle size](https://img.shields.io/bundlephobia/minzip/slickgrid-react?color=success&label=gzip)](https://bundlephobia.com/result?p=slickgrid-react)
-[![Actions Status](https://github.com/ghiscoding/slickgrid-react/workflows/CI%20Build/badge.svg)](https://github.com/ghiscoding/slickgrid-react/actions)
-
-## Structure Change (happening soon)
-> [!NOTE]
-> Please note that Angular-Slickgrid (and all other supported frameworks) will soon be moved under the [Slickgrid-Universal](https://github.com/ghiscoding/slickgrid-universal) project.
-> This will happen in the next major version, which is expected to happen in May 2025. The installation will remain the same `npm install slickgrid-react`, it's just the project that will be moved into a more central location (much easier to maintain).
+[![Actions Status](https://github.com/ghiscoding/slickgrid-universal/actions/workflows/test-react.yml/badge.svg)](https://github.com/ghiscoding/slickgrid-universal/actions/workflows/test-react.yml)
 
 ### Brief introduction
-One of the best JavasSript data grid [SlickGrid](https://github.com/mleibman/SlickGrid), which was originally developed by @mleibman, is now available to the React world. SlickGrid beats most other data grids in terms of features, customizability & performance (running smoothly with even a million rows). Slickgrid-React is a wrapper on top of [Slickgrid-Universal](https://github.com/ghiscoding/slickgrid-universal/) (which is a dependency), in the early beginning we used the `6pac/SlickGrid` fork but that was dropped in >=[v4.0](https://github.com/ghiscoding/slickgrid-react/releases/tag/v4.0.2) since Slickgrid-Universal is now a standalone project. SlickGrid was also recently rewritten with browser native code (no more ~jQuery~ 🎉).
+SlickGrid-React is a custom component created specifically for [React](https://react.dev/) framework, it is a wrapper on top of Slickgrid-Universal library which contains the core functionalities. Slickgrid-Universal is written with TypeScript in browser native code, it is framework agnostic and is a monorepo that includes all Editors, Filters, Extensions and Services related to SlickGrid usage with also a few optional packages (like GraphQL, OData, Export to Excel, ...).
 
 ## Documentation
 📘 [Documentation](https://ghiscoding.gitbook.io/slickgrid-react/getting-started/quick-start) website powered by GitBook  for version 4+ (_... or use the [Wikis](https://github.com/ghiscoding/Slickgrid-React/wiki) for older versions_).
 
 ## Installation
+
 Available in Stackblitz (Codeflow) below, this can also be used to provide an issue repro.
 
-[![Open in Codeflow](https://developer.stackblitz.com/img/open_in_codeflow.svg)](https:///pr.new/ghiscoding/slickgrid-react)
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/ghiscoding/slickgrid-react-demos)
 
 Refer to the **[Docs - Quick Start](https://ghiscoding.gitbook.io/slickgrid-react/getting-started/quick-start)** and/or clone the [Slickgrid-React-Demos](https://github.com/ghiscoding/slickgrid-react-demos) repository. Please consult all documentation before opening new issues, also consider asking installation and/or general questions on [Stack Overflow](https://stackoverflow.com/search?tab=newest&q=slickgrid) unless you think there's a bug with the library.
 
 ### NPM Package
 [slickgrid-react on NPM](https://www.npmjs.com/package/slickgrid-react)
 
+## License
+[MIT License](../../LICENSE)
+
 #### Install it
 
 ```sh
@@ -66,8 +64,8 @@ export default function Example() {
 
   return !options ? null : (
     <SlickgridReact gridId="grid1"
-        columnDefinitions={columns}
-        gridOptions={options}
+        columns={columns}
+        options={options}
         dataset={dataset}
      />
   );
@@ -76,7 +74,7 @@ export default function Example() {
 
 ### Troubleshooting
 
-This project **does not** work well with `React.StrictMode`, so please make sure to disable it to avoid getting mad at the library :P 
+This project **does not** work well with `React.StrictMode`, so please make sure to disable it to avoid getting mad at the library :P
 
 ### Versions Compatibility
 
@@ -84,7 +82,8 @@ This project **does not** work well with `React.StrictMode`, so please make sure
 
 | Slickgrid-React | React version | Migration Guide | Notes |
 |-------------------|-----------------|-----------------|------|
-| 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) |
+| 9.x               | React 18+       | [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) |
+| 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) |
 | 4.x               |        | [Migration 4.x](https://ghiscoding.gitbook.io/slickgrid-react/migrations/migration-to-4.x)     | merge SlickGrid into Slickgrid-Universal, requires Slickgrid-Universal [4.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v4.0.2) |
 | 3.x               |        | [Migration 3.x](https://github.com/ghiscoding/slickgrid-react/wiki/Migration-to-3.x)     | removal of jQuery (now uses browser native code), requires Slickgrid-Universal [3.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v3.0.0) |
 | 2.x               | React 18+       | [Migration 2.x](https://github.com/ghiscoding/slickgrid-react/wiki/Migration-to-2.x)     | removal of jQueryUI, requires Slickgrid-Universal [2.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v2.0.0) version |
@@ -106,9 +105,6 @@ Also note that all of these themes also have **Dark Theme** equivalent and even
 #### Working Demos
 For a complete set of working demos (40+ examples), we strongly suggest you to clone the [Slickgrid-React Demos](https://github.com/ghiscoding/slickgrid-react-demos) repository (instructions are provided inside it). The repo provides multiple examples and are updated every time a new release is out, so it is updated frequently and is used as the GitHub live demo page.
 
-## License
-[MIT License](LICENSE)
-
 ## Latest News & Releases
 Check out the [Releases](https://github.com/ghiscoding/slickgrid-react/releases) section for all latest News & Releases.
 
@@ -119,29 +115,3 @@ Slickgrid-Universal has **100%** Unit Test Coverage and all Slickgrid-React Exam
 You like **Slickgrid-React**? Be sure to upvote ⭐, and perhaps support me with caffeine [☕](https://ko-fi.com/ghiscoding) or GitHub sponsoring and feel free to contribute. 👷👷‍♀️
 
 <a href='https://ko-fi.com/ghiscoding' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi3.png?v=6' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>
-
-## Sponsors
-
-Thanks to all my sponsors!
-
-<div>
-  <span>
-    <a href="https://github.com/wundergraph" class="Link" title="Wundergraph" target="_blank"><img src="https://avatars.githubusercontent.com/u/64281914" width="50" height="50" valign="middle" /></a>
-  </span>
-  &nbsp;
-  <span>
-    <a href="https://github.com/johnsoncodehk" class="Link" title="johnsoncodehk (Volar)" target="_blank"><img src="https://avatars.githubusercontent.com/u/16279759" width="50" height="50" valign="middle" /></a>
-  </span>
-   &nbsp;
-  <span>
-    <a href="https://github.com/kevinburkett" class="Link" title="kevinburkett" target="_blank"><img class="circle avatar-user" src="https://avatars.githubusercontent.com/u/48218815?s=52&amp;v=4" width="45" height="45" valign="middle" /></a>
-  </span>
-  &nbsp;
-  <span>
-    <a href="https://github.com/anton-gustafsson" class="Link" title="anton-gustafsson" target="_blank"><img src="https://avatars.githubusercontent.com/u/22906905?s=52&v=4" width="50" height="50" valign="middle" /></a>
-  </span>
-  &nbsp;
-  <span>
-    <a href="https://github.com/gibson552" class="Link" title="gibson552" target="_blank"><img src="https://avatars.githubusercontent.com/u/84058359?s=52&v=4" width="50" height="50" valign="middle" /></a>
-  </span>
-</div>

package/dist/{types/components → components}/slickgrid-react.d.ts

@@ -4,28 +4,33 @@ import { SlickFooterComponent } from '@slickgrid-universal/custom-footer-compone
 import { SlickEmptyWarningComponent } from '@slickgrid-universal/empty-warning-component';
 import React from 'react';
 import type { Subscription } from 'rxjs';
-import type { SlickgridReactInstance, GridOption } from '../models/index';
-import { TranslaterService } from '../services/translater.service';
-import type { SlickgridReactProps } from './slickgridReactProps';
+import { I18nextContext } from '../contexts/i18nextContext.js';
+import type { GridOption, I18Next, SlickgridReactInstance } from '../models/index.js';
+import { TranslaterI18NextService } from '../services/translaterI18Next.service.js';
+import type { SlickgridReactProps } from './slickgridReactProps.js';
 interface State {
-    showPagination: boolean;
-    _gridOptions: GridOption;
+    _options: GridOption;
     paginationService: PaginationService;
+    showPagination: boolean;
 }
 export declare class SlickgridReact<TData = any> extends React.Component<SlickgridReactProps, State> {
     readonly props: SlickgridReactProps;
+    static contextType: React.Context<I18Next | null>;
+    context: React.ContextType<typeof I18nextContext>;
     protected _mounted: boolean;
     protected setStateValue(key: string, value: any, callback?: () => void): void;
-    protected _columnDefinitions: Column<TData>[];
+    protected _columns: Column<TData>[];
     protected _currentDatasetLength: number;
     protected _dataset: any[] | null;
+    protected _options: GridOption;
     protected _elm?: HTMLDivElement | null;
-    protected _collectionObservers: Array<null | ({
+    protected _collectionObservers: Array<null | {
         disconnect: () => void;
-    })>;
+    }>;
     protected _eventHandler: SlickEventHandler;
     protected _eventPubSubService: EventPubSubService;
     protected _hideHeaderRowAfterPageLoad: boolean;
+    protected _i18next: I18Next | null;
     protected _isAutosizeColsCalled: boolean;
     protected _isGridInitialized: boolean;
     protected _isDatasetInitialized: boolean;
@@ -35,9 +40,8 @@ export declare class SlickgridReact<TData = any> extends React.Component<Slickgr
     protected _paginationOptions: Pagination | undefined;
     protected _registeredResources: ExternalResource[];
     protected _scrollEndCalled: boolean;
-    protected _gridOptions: GridOption;
-    protected get gridOptions(): GridOption;
-    protected set gridOptions(options: GridOption);
+    protected get options(): GridOption;
+    protected set options(options: GridOption);
     groupItemMetadataProvider?: SlickGroupItemMetadataProvider;
     backendServiceApi: BackendServiceApi | undefined;
     metrics?: Metrics;
@@ -69,11 +73,12 @@ export declare class SlickgridReact<TData = any> extends React.Component<Slickgr
     extensions: ExtensionList<any>;
     instances: SlickgridReactInstance | null;
     static defaultProps: {
-        containerService: import("../services").ContainerService;
-        translaterService: TranslaterService;
-        dataset: never[];
+        containerService: import("../services/container.service.js").ContainerService;
+        translaterService: TranslaterI18NextService;
         gridId: string;
-        columnDefinitions: never[];
+        dataset: never[];
+        columns: never[];
+        options: {};
     };
     get dataset(): any[];
     set dataset(newDataset: any[]);
@@ -95,7 +100,7 @@ export declare class SlickgridReact<TData = any> extends React.Component<Slickgr
     dispose(shouldEmptyDomElementContainer?: boolean): void;
     disposeExternalResources(): void;
     componentDidUpdate(prevProps: SlickgridReactProps): void;
-    columnDefinitionsChanged(columnDefinitions?: Column[]): void;
+    columnsChanged(columns?: Column[]): void;
     /**
      * Define our internal Post Process callback, it will execute internally after we get back result from the Process backend call
      * Currently ONLY available with the GraphQL Backend Service.
@@ -134,17 +139,17 @@ export declare class SlickgridReact<TData = any> extends React.Component<Slickgr
      * 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<TData>[]): void;
+    updateColumnsList(newColumns: Column<TData>[]): void;
     /**
      * assignment changes are not triggering on the column definitions, for that
      * we can use our internal array observer for any changes done via (push, pop, shift, ...)
      */
-    protected observeColumnDefinitions(): void;
+    protected observeColumns(): 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<TData>[]): void;
+    protected copyColumnWidthsReference(columns: Column<TData>[]): 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;
@@ -191,14 +196,13 @@ export declare class SlickgridReact<TData = any> extends React.Component<Slickgr
      */
     protected sortTreeDataset<U>(flatDatasetInput: U[], forceGridRefresh?: boolean): U[];
     /** Prepare and load all SlickGrid editors, if an async editor is found then we'll also execute it. */
-    protected loadSlickGridEditors(columnDefinitions: Column<TData>[]): Column<TData>[];
+    protected loadSlickGridEditors(columns: Column<TData>[]): Column<TData>[];
     protected suggestDateParsingWhenHelpful(): void;
     /**
      * When the Editor(s) has a "editor.collection" property, we'll load the async collection.
      * Since this is called after the async call resolves, the pointer will not be the same as the "column" argument passed.
      */
     protected updateEditorCollection<U extends TData = any>(column: Column<U>, newCollection: U[]): void;
-    render(): React.JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};
-//# sourceMappingURL=slickgrid-react.d.ts.map