@redsift/table 11.3.0-muiv5 → 11.3.1-alpha.0

package/CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contribute
 
-## Develop
+## Setup
 
 Make sure you have the following requirements installed: [node](https://nodejs.org/) (v16+) and [yarn](https://yarnpkg.com/en/) (v1.22.0+)
 
@@ -26,7 +26,7 @@ You can then run the storybook and browse to [http://localhost:9000](http://loca
 yarn start:storybook
 ```
 
-### Architecture
+## Architecture
 
 The Design System is following a monorepo architecture, providing multiple packages based on different use cases.
 
@@ -68,8 +68,6 @@ The Design System is following a monorepo architecture, providing multiple packa
 
 Please make sure to work inside the correct package when making contribution.
 
-### Shared code
-
 If you need something inside more than one package, do not duplicate the code. Place it inside one package, export it from this package and import it inside the others.
 
 For instance, `@redsift/dashboard` and `@redsift/charts` both have a `PieChart` component that both share the `PieChartVariant` type interface. `PieChartVariant` has been implemented inside `@redsift/charts` and is imported inside `@redsift/dashboard`.
@@ -102,9 +100,11 @@ When dependencies are required, we try not to import them entirely to optimise t
 import * as d3 from 'd3';
 
 // do
-import { sum, scaleOrdinal } from 'd3';
+import { sum as d3sum, scaleOrdinal as d3scaleOrdinal, ScaleOrdinal as d3ScaleOrdinal } from 'd3';
 ```
 
+## Component
+
 ### Scaffolding
 
 Each component should be in its own folder. If a subcomponent can be used as a standalone component, it should be in its own folder too. For instance, `CheckboxGroup` uses `Checkbox` but `Checkbox` can be used alone. In this case, `CheckboxGroup` and `Checkbox` both have their own folder. For `PieChart` and `PieChartSlice`, a `PieChartSlice` can not be used alone. It only exists inside a `PieChart` component. Therefore, both components are inside the same folder.
@@ -191,40 +191,6 @@ size?: PieChartSize;
 
 To know how to define your API, to name and document your props, take a look at the existing components.
 
-## Tests
-
-We use [jest](https://jestjs.io/) for unit tests and [react-testing-library](https://testing-library.com/docs/react-testing-library/intro) for rendering and writing assertions. We also use [Storyshots](https://storybook.js.org/addons/@storybook/addon-storyshots) to automatically take a code snapshot of every story.
-
-Please make sure you include tests with your pull requests. Our CI will run the tests on each PR. A minimum of 90% code coverage is required for statements, branches, functions and lines of every package. However, in practice, we try to reach a 100% code coverage.
-
-We split the tests into 2 groups.
-
-_Visual tests_
-
-- A Storybook story should be written for each visual state that a component can be in (based on props).
-
-_Unit tests_
-
-- (Props) Anything that should be changed by a prop should be tested via react-testing-library.
-- (Events) Anything that should trigger an event should be tested via react-testing-library.
-
-You can run the tests with:
-
-```bash
-yarn test
-```
-
-Or for a specific package with:
-
-```bash
-yarn test:charts
-yarn test:design-system
-yarn test:dashboard
-yarn test:table
-```
-
-Do not forget to update the snapshots with the `-u` option when you modify or create stories. However, you should **always** check the generated snapshots to see if they are correct. Do **not** blindly update the snapshots.
-
 ## Linting
 
 The code is linted with [eslint](https://eslint.org/). You can run the linter with:
@@ -242,7 +208,7 @@ yarn lint:design-system
 yarn lint:table
 ```
 
-## TypeScript
+## Typing
 
 The code is written in [TypeScript](https://www.typescriptlang.org/). The type checker will usually run in your editor, but also runs when you run:
 
@@ -329,6 +295,40 @@ Before implementing a component, try to see if there is a [pattern](https://www.
 
 However, before using any ARIA, [read this disclaimer carefully](https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/).
 
+## Tests
+
+We use [jest](https://jestjs.io/) for unit tests and [react-testing-library](https://testing-library.com/docs/react-testing-library/intro) for rendering and writing assertions. We also use [Storyshots](https://storybook.js.org/addons/@storybook/addon-storyshots) to automatically take a code snapshot of every story.
+
+Please make sure you include tests with your pull requests. Our CI will run the tests on each PR. A minimum of 90% code coverage is required for statements, branches, functions and lines of every package. However, in practice, we try to reach a 100% code coverage.
+
+We split the tests into 2 groups.
+
+_Visual tests_
+
+- A Storybook story should be written for each visual state that a component can be in (based on props).
+
+_Unit tests_
+
+- (Props) Anything that should be changed by a prop should be tested via react-testing-library.
+- (Events) Anything that should trigger an event should be tested via react-testing-library.
+
+You can run the tests with:
+
+```bash
+yarn test
+```
+
+Or for a specific package with:
+
+```bash
+yarn test:charts
+yarn test:design-system
+yarn test:dashboard
+yarn test:table
+```
+
+Do not forget to update the snapshots with the `-u` option when you modify or create stories. However, you should **always** check the generated snapshots to see if they are correct. Do **not** blindly update the snapshots.
+
 ## Storybook
 
 We use [Storybook](https://storybooks.js.org) for local development. Run the following command to start it:
@@ -413,3 +413,27 @@ yarn build:icons
 yarn build:legacy
 yarn build:table
 ```
+
+## Publishing a release
+
+### Stable release
+
+1. Make sure you're on the release branch (ex: `release/vX.Y.Z`) and a PR is opened on Github
+2. Login to NPM with an authorized account: `npm login`
+3. Make sure your packages are up to date: `yarn`
+4. Make sure the CI entirely passed on Github
+5. (Optional) Make sure the build doesn't crash locally: `yarn build:design-system`
+6. Publish the packages to NPM: `yarn release vX.Y.Z`
+
+### Alpha release
+
+If you need to test your contribution in a product before releasing -and you're not using `yarn link`, you can create an alpha release using the following process:
+
+1. Create an alpha release branch (ex: `release/vX.Y.Z-alpha.N`) based on `release/vX.Y.Z`
+2. Push it to remote (`git push origin release/vX.Y.Z-alpha.N`)
+3. Login to NPM with an authorized account: `npm login`
+4. Make sure your packages are up to date: `yarn`
+5. (Optional) Make sure the build doesn't crash: `yarn build:design-system`
+6. Publish the packages to NPM: `yarn release --dist-tag alpha vX.Y.Z-alpha.N`
+
+After that if you need to make modification to your contribution, go back to `release/vX.Y.Z` and make the necessary modifications. Then remove the alpha release branch, and redo the process from step 1, incrementing `N` by 1.

package/index.d.ts

@@ -1,6 +1,6 @@
 import * as _mui_x_data_grid_pro from '@mui/x-data-grid-pro';
-import { GridNativeColTypes, GridColumnTypesRecord, GridFilterItem, GridCellParams, GridFilterOperator, GridFilterInputValue, GridFilterInputMultipleValue, DataGridProProps, GridFilterModel, GridSortModel, GridSortItem, GridColumnVisibilityModel, GridPinnedColumns, GridSlotsComponent, GridSelectionModel, GridRowParams, GridToolbarExportProps, GridToolbarFilterButtonProps, GridToolbarColumnsButton, GridToolbarDensitySelector } from '@mui/x-data-grid-pro';
-export { GridAlignment, GridColDef, GridColumns, GridFilterItem, GridFilterModel, GridSelectionModel, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators } from '@mui/x-data-grid-pro';
+import { GridColumnTypesRecord, GridFilterItem, GridCellParams, GridFilterOperator, GridFilterInputValue, GridFilterInputMultipleValue, DataGridProProps, GridFilterModel, GridPaginationModel, GridSortModel, GridSortItem, GridColumnVisibilityModel, GridPinnedColumns, GridSlotsComponent, GridRowSelectionModel, GridApiPro as GridApiPro$1, GridRowParams, GridToolbarExportProps, GridToolbarFilterButtonProps, GridToolbarColumnsButton, GridToolbarDensitySelector } from '@mui/x-data-grid-pro';
+export { GridAlignment, GridColDef, GridFilterItem, GridFilterModel, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators } from '@mui/x-data-grid-pro';
 import { GridInitialStatePro } from '@mui/x-data-grid-pro/models/gridStatePro';
 import React, { ReactNode, ComponentProps, MutableRefObject, RefObject } from 'react';
 import { TablePaginationProps } from '@mui/material';
@@ -10,19 +10,19 @@ import { GridApiPro } from '@mui/x-data-grid-pro/models/gridApiPro';
 declare const DETAIL_PANEL_TOGGLE_COL_DEF: _mui_x_data_grid_pro.GridColDef<any, any, any>;
 
 declare const getRsStringColumnType: () => {
-    extendType: GridNativeColTypes;
+    type: string;
     filterOperators: _mui_x_data_grid_pro.GridFilterOperator<any, string | number | null, any>[];
 };
 declare const getRsNumberColumnType: () => {
-    extendType: GridNativeColTypes;
+    type: string;
     filterOperators: _mui_x_data_grid_pro.GridFilterOperator<any, string | number | null, any>[];
 };
-declare const customColumnTypes: GridColumnTypesRecord;
+declare const customColumnTypes: Partial<GridColumnTypesRecord>;
 
 declare const IS_BETWEEN: {
     label: string;
     value: string;
-    getApplyFilterFn: (filterItem: GridFilterItem) => ((params: GridCellParams) => boolean) | null;
+    getApplyFilterFn: (filterItem: GridFilterItem) => ((params: GridCellParams<any, any>) => boolean) | null;
     InputComponent: (props: any) => JSX.Element;
 };
 
@@ -91,8 +91,8 @@ declare const operatorList: {
     string: _mui_x_data_grid_pro.GridFilterOperator<any, string | number | null, any>[];
     number: _mui_x_data_grid_pro.GridFilterOperator<any, string | number | null, any>[];
     boolean: _mui_x_data_grid_pro.GridFilterOperator<any, boolean | null, any>[];
-    date: _mui_x_data_grid_pro.GridFilterOperator<any, string | Date, any>[];
-    dateTime: _mui_x_data_grid_pro.GridFilterOperator<any, string | Date, any>[];
+    date: _mui_x_data_grid_pro.GridFilterOperator<any, Date, any>[];
+    dateTime: _mui_x_data_grid_pro.GridFilterOperator<any, Date, any>[];
     singleSelect: _mui_x_data_grid_pro.GridFilterOperator<any, any, any>[];
     rsString: _mui_x_data_grid_pro.GridFilterOperator<any, string | number | null, any>[];
     rsNumber: _mui_x_data_grid_pro.GridFilterOperator<any, string | number | null, any>[];
@@ -163,9 +163,10 @@ interface StatefulDataGridProps extends DataGridProps {
 
 declare const StatefulDataGrid: Comp<StatefulDataGridProps, HTMLDivElement>;
 
-interface ExtendedGridPaginationModel {
-    page: number;
-    pageSize: number;
+interface ExtendedGridFilterModel extends GridFilterModel {
+    quickFilterValues?: string[];
+}
+interface ExtendedGridPaginationModel extends GridPaginationModel {
     direction?: 'next' | 'back';
 }
 
@@ -175,9 +176,11 @@ declare const encodeValue: (value: string | undefined) => string;
 declare const urlSearchParamsToString: (searchParams: URLSearchParams) => string;
 declare const numberOperatorEncoder: Record<string, string>;
 declare const numberOperatorDecoder: Record<string, string>;
+declare const isOperatorValueValid: (field: string, operator: OperatorValue, columns: DataGridProps['columns']) => boolean;
+declare const isValueValid: (value: OperatorValue, field: string, columns: DataGridProps['columns'], operator: OperatorValue) => boolean;
 /** FILTERS */
-declare const getFilterModelFromString: (searchString: string, columns: DataGridProps['columns']) => GridFilterModel | 'invalid';
-declare const getSearchParamsFromFilterModel: (filterModel: GridFilterModel) => URLSearchParams;
+declare const getFilterModelFromString: (searchString: string, columns: DataGridProps['columns']) => ExtendedGridFilterModel | 'invalid';
+declare const getSearchParamsFromFilterModel: (filterModel: ExtendedGridFilterModel) => URLSearchParams;
 /** SORT */
 declare const getSortingFromString: (searchString: string, columns: DataGridProps['columns']) => GridSortModel | 'invalid';
 declare const getSearchParamsFromSorting: (sorting: GridSortItem[]) => URLSearchParams;
@@ -185,8 +188,8 @@ declare const getSearchParamsFromSorting: (sorting: GridSortItem[]) => URLSearch
 declare const getPaginationFromString: (searchString: string) => ExtendedGridPaginationModel | 'invalid';
 declare const getSearchParamsFromPagination: (pagination: ExtendedGridPaginationModel) => URLSearchParams;
 /** COLUMN VISIBILITY */
+declare const getColumnVisibilityFromString: (searchString: string, columns: DataGridProps['columns']) => GridColumnVisibilityModel | 'invalid';
 declare const getSearchParamsFromColumnVisibility: (columnVisibility: GridColumnVisibilityModel, columns: DataGridProps['columns']) => URLSearchParams;
-declare const getColumnVisibilityFromString: (notParsed: string, tableColumns: DataGridProps['columns']) => GridColumnVisibilityModel | 'invalid';
 declare const getPinnedColumnsFromString: (notParsed: string, tableColumns: DataGridProps['columns']) => PinnedColumns | 'invalid';
 declare const getSearchParamsFromPinnedColumns: (pinnedColumns: GridPinnedColumns) => URLSearchParams;
 declare const getSearchParamsFromTab: (search: string) => URLSearchParams;
@@ -248,12 +251,12 @@ declare const BasePopper: React.JSXElementConstructor<any>;
 declare const BaseTextField: React.JSXElementConstructor<any>;
 
 interface CompletionResponseItem {
-    columnField: string;
-    operatorValue: string;
+    field: string;
+    operator: string;
     value?: string;
 }
 type CompletionResponse = {
-    linkOperator: 'and' | 'or';
+    logicOperator: 'and' | 'or';
     items: CompletionResponseItem[];
 };
 interface LocaleText {
@@ -299,11 +302,9 @@ type ControlledPaginationProps = {
     displayPagination?: boolean;
     selectionStatus: SelectionStatus;
     apiRef: MutableRefObject<GridApiPro>;
-    page: number;
-    onPageChange: (page: number) => void;
-    pageSize: number;
-    onPageSizeChange: (pageSize: number) => void;
-    rowsPerPageOptions?: number[];
+    paginationModel: GridPaginationModel;
+    onPaginationModelChange: (model: GridPaginationModel) => void;
+    pageSizeOptions?: number[];
     isRowSelectable?: DataGridProps['isRowSelectable'];
     paginationProps?: DataGridProps['paginationProps'];
 };
@@ -314,16 +315,14 @@ type ServerSideControlledPaginationProps = {
     displayRowsPerPage?: boolean;
     displayPagination?: boolean;
     selectionStatus: SelectionStatus;
-    page: number;
-    onPageChange: (page: number) => void;
-    pageSize: number;
-    onPageSizeChange: (pageSize: number) => void;
-    rowsPerPageOptions?: number[];
+    paginationModel: GridPaginationModel;
+    onPaginationModelChange: (model: GridPaginationModel) => void;
+    pageSizeOptions?: number[];
     paginationProps?: DataGridProps['paginationProps'];
     rowCount: number;
     loading?: boolean;
 };
-declare const onServerSideSelectionStatusChange: (newSelectionModel: GridSelectionModel, apiRef: React.MutableRefObject<GridApiPro>, selectionStatus: React.MutableRefObject<SelectionStatus>, isRowSelectable: ((params: GridRowParams<any>) => boolean) | undefined, page: number, pageSize: number) => void;
+declare const onServerSideSelectionStatusChange: (newSelectionModel: GridRowSelectionModel, apiRef: React.MutableRefObject<GridApiPro$1>, selectionStatus: React.MutableRefObject<SelectionStatus>, isRowSelectable: ((params: GridRowParams<any>) => boolean) | undefined, page: number, pageSize: number) => void;
 declare const ServerSideControlledPagination: React.FC<ServerSideControlledPaginationProps>;
 
 interface TextCellProps extends ComponentProps<'div'> {
@@ -383,6 +382,8 @@ interface ToolbarProps {
     /** Configuration object for NLP filter. undefined if disabled. */
     onFilterModelChange?: (filterModel: GridFilterModel) => void;
     semanticFilterProps?: GridToolbarFilterSemanticProps;
+    /** Whether you want to show the quick filter or not. */
+    showQuickFilter?: boolean;
 }
 
 /**
@@ -411,15 +412,13 @@ type ToolbarWrapperProps = {
     selectionStatus: React.MutableRefObject<SelectionStatus>;
     apiRef: DataGridProps['apiRef'];
     isRowSelectable: DataGridProps['isRowSelectable'];
-    page: DataGridProps['page'];
-    onPageChange: DataGridProps['onPageChange'];
-    pageSize: DataGridProps['pageSize'];
-    onPageSizeChange: DataGridProps['onPageSizeChange'];
-    rowsPerPageOptions: DataGridProps['rowsPerPageOptions'];
+    paginationModel: DataGridProps['paginationModel'];
+    onPaginationModelChange: DataGridProps['onPaginationModelChange'];
+    pageSizeOptions: DataGridProps['pageSizeOptions'];
     paginationProps: DataGridProps['paginationProps'];
     paginationMode?: DataGridProps['paginationMode'];
     rowCount?: DataGridProps['rowCount'];
 };
 declare const ToolbarWrapper: React.FC<ToolbarWrapperProps>;
 
-export { BaseButton, BaseCheckbox, BaseIcon, BasePopper, BaseTextField, CATEGORIES, CONTAINS_ANY_OF, CONTAINS_ANY_OF_I, Category, CompletionResponse, ControlledPagination, ControlledPaginationProps, DEFAULT_OPERATORS, DETAIL_PANEL_TOGGLE_COL_DEF, DIMENSION_MODEL_KEY, DOES_NOT_CONTAIN, DOES_NOT_EQUAL, DataGrid, DataGridModel, DataGridProps, ENDS_WITH_ANY_OF, FILTER_MODEL_KEY, FILTER_SEARCH_KEY, FilterConfig, GridToolbarFilterSemanticField, GridToolbarFilterSemanticFieldProps, IS_ANY_OF, IS_BETWEEN, IS_NOT_ANY_OF, PAGINATION_MODEL_KEY, PINNED_COLUMNS, PinnedColumns, SORT_MODEL_KEY, STARTS_WITH_ANY_OF, SelectionStatus, ServerSideControlledPagination, ServerSideControlledPaginationProps, StatefulDataGrid, StatefulDataGridProps, StyledDataGridProps, TextCell, Toolbar, ToolbarWrapper, ToolbarWrapperProps, VISIBILITY_MODEL_KEY, areFilterModelsEquivalent, buildStorageKey, clearPreviousVersionStorage, customColumnTypes, decodeValue, encodeValue, getColumnVisibilityFromString, getCompletion, getFilterModelFromString, getFinalSearch, getGridNumericOperators, getGridStringArrayOperators, getGridStringOperators, getModelsParsedOrUpdateLocalStorage, getPaginationFromString, getPinnedColumnsFromString, getRsNumberColumnType, getRsStringColumnType, getSearchParamsFromColumnVisibility, getSearchParamsFromFilterModel, getSearchParamsFromPagination, getSearchParamsFromPinnedColumns, getSearchParamsFromSorting, getSearchParamsFromTab, getSortingFromString, muiIconToDSIcon, numberOperatorDecoder, numberOperatorEncoder, onServerSideSelectionStatusChange, operatorList, updateUrl, urlSearchParamsToString };
+export { BaseButton, BaseCheckbox, BaseIcon, BasePopper, BaseTextField, CATEGORIES, CONTAINS_ANY_OF, CONTAINS_ANY_OF_I, Category, CompletionResponse, ControlledPagination, ControlledPaginationProps, DEFAULT_OPERATORS, DETAIL_PANEL_TOGGLE_COL_DEF, DIMENSION_MODEL_KEY, DOES_NOT_CONTAIN, DOES_NOT_EQUAL, DataGrid, DataGridModel, DataGridProps, ENDS_WITH_ANY_OF, FILTER_MODEL_KEY, FILTER_SEARCH_KEY, FilterConfig, GridToolbarFilterSemanticField, GridToolbarFilterSemanticFieldProps, IS_ANY_OF, IS_BETWEEN, IS_NOT_ANY_OF, PAGINATION_MODEL_KEY, PINNED_COLUMNS, PinnedColumns, SORT_MODEL_KEY, STARTS_WITH_ANY_OF, SelectionStatus, ServerSideControlledPagination, ServerSideControlledPaginationProps, StatefulDataGrid, StatefulDataGridProps, StyledDataGridProps, TextCell, Toolbar, ToolbarWrapper, ToolbarWrapperProps, VISIBILITY_MODEL_KEY, areFilterModelsEquivalent, buildStorageKey, clearPreviousVersionStorage, customColumnTypes, decodeValue, encodeValue, getColumnVisibilityFromString, getCompletion, getFilterModelFromString, getFinalSearch, getGridNumericOperators, getGridStringArrayOperators, getGridStringOperators, getModelsParsedOrUpdateLocalStorage, getPaginationFromString, getPinnedColumnsFromString, getRsNumberColumnType, getRsStringColumnType, getSearchParamsFromColumnVisibility, getSearchParamsFromFilterModel, getSearchParamsFromPagination, getSearchParamsFromPinnedColumns, getSearchParamsFromSorting, getSearchParamsFromTab, getSortingFromString, isOperatorValueValid, isValueValid, muiIconToDSIcon, numberOperatorDecoder, numberOperatorEncoder, onServerSideSelectionStatusChange, operatorList, updateUrl, urlSearchParamsToString };