@redsift/table 11.3.0 → 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,5 +1,5 @@
 import * as _mui_x_data_grid_pro from '@mui/x-data-grid-pro';
-import { GridColumnTypesRecord, GridFilterItem, GridCellParams, GridFilterOperator, GridFilterInputValue, GridFilterInputMultipleValue, DataGridProProps, GridPaginationModel, GridFilterModel, GridSortModel, GridSortItem, GridColumnVisibilityModel, GridPinnedColumns, GridSlotsComponent, GridRowSelectionModel, GridApiPro as GridApiPro$1, GridRowParams, GridToolbarExportProps, GridToolbarFilterButtonProps, GridToolbarColumnsButton, GridToolbarDensitySelector } 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';
@@ -163,6 +163,9 @@ interface StatefulDataGridProps extends DataGridProps {
 
 declare const StatefulDataGrid: Comp<StatefulDataGridProps, HTMLDivElement>;
 
+interface ExtendedGridFilterModel extends GridFilterModel {
+    quickFilterValues?: string[];
+}
 interface ExtendedGridPaginationModel extends GridPaginationModel {
     direction?: 'next' | 'back';
 }
@@ -176,8 +179,8 @@ 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;
@@ -379,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;
 }
 
 /**

package/index.js

@@ -1,4 +1,4 @@
-import { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, getGridNumericOperators as getGridNumericOperators$1, GridFilterInputValue, GridFilterInputMultipleValue, getGridStringOperators as getGridStringOperators$1, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators, GridLogicOperator, GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridExpandedSortedRowIdsSelector, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, useGridApiRef, DataGridPro } from '@mui/x-data-grid-pro';
+import { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, getGridNumericOperators as getGridNumericOperators$1, GridFilterInputValue, GridFilterInputMultipleValue, getGridStringOperators as getGridStringOperators$1, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators, GridLogicOperator, GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridExpandedSortedRowIdsSelector, GridToolbarQuickFilter, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, useGridApiRef, DataGridPro } from '@mui/x-data-grid-pro';
 export { getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators } from '@mui/x-data-grid-pro';
 import * as React from 'react';
 import React__default, { Children, isValidElement, cloneElement, forwardRef, useLayoutEffect, useEffect, useRef, useContext, useState, useCallback, createElement, useMemo } from 'react';
@@ -18132,14 +18132,22 @@ const getFilterModelFromString = (searchString, columns) => {
     return 'invalid';
   }
   let logicOperator = GridLogicOperator.And;
+  let quickFilterValues = [];
   const searchParams = new URLSearchParams();
   for (const [key, value] of new URLSearchParams(searchString)) {
-    if (key.startsWith('_') && !['_logicOperator', '_sortColumn', '_pinnedColumnsLeft', '_pinnedColumnsRight', '_columnVisibility', '_pagination'].includes(key)) {
+    if (key.startsWith('_') && !['_logicOperator', '_sortColumn', '_pinnedColumnsLeft', '_pinnedColumnsRight', '_columnVisibility', '_pagination', '_quickFilterValues'].includes(key)) {
       searchParams.set(key, value);
     }
     if (key === '_logicOperator') {
       logicOperator = value === GridLogicOperator.And || value === GridLogicOperator.Or ? value : GridLogicOperator.And;
     }
+    if (key === '_quickFilterValues') {
+      try {
+        quickFilterValues = JSON.parse(decodeURIComponent(value));
+      } catch {
+        quickFilterValues = [];
+      }
+    }
   }
   let id = 5000;
   const fields = columns.map(column => column.field);
@@ -18150,7 +18158,7 @@ const getFilterModelFromString = (searchString, columns) => {
     if (isInvalid) {
       return;
     }
-    const field = key.split('[')[0].slice(1); // Slice to remove the _ at the beginning
+    const field = key.split('[')[0].slice(1);
     if (!fields.includes(field)) {
       return;
     }
@@ -18167,7 +18175,6 @@ const getFilterModelFromString = (searchString, columns) => {
       return;
     }
     const operator = splitRight[0];
-    // if the operator is not part of the valid operators invalidate the URL
     if (!isOperatorValueValid(field, operator, columns) || Array.isArray(operator)) {
       isInvalid = true;
       return;
@@ -18186,19 +18193,17 @@ const getFilterModelFromString = (searchString, columns) => {
       type
     });
   });
-
-  // If we found some condition that results in an invalid URL,
-  // return the empty filterModel (this will trigger the localStorage)
-  // and will pick up the last valid search
   if (isInvalid) {
     return 'invalid';
   }
   return {
     items,
-    logicOperator
+    logicOperator,
+    quickFilterValues
   };
 };
 const getSearchParamsFromFilterModel = filterModel => {
+  var _filterModel$quickFil;
   const searchParams = new URLSearchParams();
   searchParams.set('_logicOperator', filterModel['logicOperator'] || '');
   filterModel['items'].forEach(item => {
@@ -18214,6 +18219,9 @@ const getSearchParamsFromFilterModel = filterModel => {
       searchParams.set(`_${field}[${encodeValue(operator)},${encodeValue(type)}]`, encodeValue(value));
     }
   });
+  if ((_filterModel$quickFil = filterModel.quickFilterValues) !== null && _filterModel$quickFil !== void 0 && _filterModel$quickFil.length) {
+    searchParams.set('_quickFilterValues', encodeURIComponent(JSON.stringify(filterModel.quickFilterValues)));
+  }
   return searchParams;
 };
 
@@ -18549,6 +18557,12 @@ const getFinalSearch = _ref => {
     }
   }
   searchParams.set('v', `${localStorageVersion}`);
+
+  // Add quickFilterValues explicitly if present in filterModel
+  if (filterModel.quickFilterValues && filterModel.quickFilterValues.length > 0) {
+    // Encode array as JSON string to preserve all values in one param
+    searchParams.set('_quickFilterValues', encodeURIComponent(JSON.stringify(filterModel.quickFilterValues)));
+  }
   return new URLSearchParams([...searchParams, ...filterModelSearch, ...sortModelSearch, ...paginationModelSearch, ...tabSearch, ...pinnedColumnsModelSearch, ...columnVisibilityModelSearch]);
 };
 /** Return the state of the table given the URL and the local storage state */
@@ -24642,7 +24656,8 @@ const Toolbar$2 = props => {
     densityButtonProps,
     densityButtonRef,
     onFilterModelChange,
-    semanticFilterProps = undefined
+    semanticFilterProps = undefined,
+    showQuickFilter
   } = props;
   if (semanticFilterProps && onFilterModelChange) {
     semanticFilterProps.onFilterModelChange = onFilterModelChange;
@@ -24675,7 +24690,9 @@ const Toolbar$2 = props => {
   }, exportButtonProps, {
     ref: exportButtonRef,
     className: filterButtonProps !== null && filterButtonProps !== void 0 && filterButtonProps.className ? `${filterButtonProps === null || filterButtonProps === void 0 ? void 0 : filterButtonProps.className} redsift-condensed` : 'redsift-condensed'
-  })) : null), /*#__PURE__*/React__default.createElement(Flexbox, {
+  })) : null, /*#__PURE__*/React__default.createElement(Flexbox, {
+    marginLeft: "8px"
+  }, showQuickFilter ? /*#__PURE__*/React__default.createElement(GridToolbarQuickFilter, null) : null)), /*#__PURE__*/React__default.createElement(Flexbox, {
     flexGrow: 3
   }, semanticFilterProps ? /*#__PURE__*/React__default.createElement(GridToolbarFilterSemanticField, semanticFilterProps) : null)));
 };
@@ -27598,7 +27615,8 @@ const useStatefulTable = props => {
           const column = apiRef.current.getColumn(item.field);
           item.type = column.type || 'string';
           return item;
-        })
+        }),
+        quickFilterValues: model.quickFilterValues || []
       });
       propsOnFilterModelChange === null || propsOnFilterModelChange === void 0 ? void 0 : propsOnFilterModelChange(filterModel, details);
       updateUrl({