@redsift/table 11.0.0-alpha.1 → 11.0.0-alpha.2

package/index.d.ts

@@ -1,10 +1,10 @@
 import * as _mui_x_data_grid_pro from '@mui/x-data-grid-pro';
-import { GridColumnTypesRecord, GridFilterItem, GridCellParams, GridFilterOperator, GridFilterInputValue, GridFilterInputMultipleValue, DataGridProProps, GridPinnedColumns, GridFilterModel, GridSortModel, GridSortItem, GridColumnVisibilityModel, GridToolbarExportProps, GridToolbarFilterButtonProps, GridToolbarColumnsButton, GridToolbarDensitySelector } from '@mui/x-data-grid-pro';
-export * from '@mui/x-data-grid-pro';
+import { GridColumnTypesRecord, GridFilterItem, GridCellParams, GridFilterOperator, GridFilterInputValue, GridFilterInputMultipleValue, DataGridProProps, GridPinnedColumns, GridPaginationModel, GridFilterModel, GridSortModel, GridSortItem, GridColumnVisibilityModel, 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 React, { ReactNode, ComponentProps, RefObject } from 'react';
+import React, { ReactNode, ComponentProps, MutableRefObject, RefObject } from 'react';
 import { TablePaginationProps } from '@mui/material';
 import { Theme, Comp, IconProps, NotificationsColorPalette, ProductColorPalette, ShieldVariant } from '@redsift/design-system';
+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>;
 
@@ -131,16 +131,6 @@ interface DataGridProps extends Partial<Pick<DataGridProProps, 'rows'>>, Omit<Da
     paginationProps?: Omit<TablePaginationProps, 'component' | 'count' | 'page' | 'onPageChange' | 'rowsPerPage' | 'onRowsPerPageChange' | 'rowsPerPageOptions' | 'paginationMode'>;
     /** Theme. */
     theme?: Theme;
-    /** If set, the DataGrid configuration will be stored and synced in the URL and the local storage. useRouter prop should be defined. */
-    isStateful?: boolean;
-    /** Hook returning pathname, search params and a method to update query params. Used in stateful mode only. */
-    useRouter?: () => {
-        pathname: string;
-        search: string;
-        historyReplace: (newSearch: string) => void;
-    };
-    /** Pinned custom columns. */
-    pinnedCustomColumns?: Required<GridPinnedColumns>;
 }
 type SelectionStatus = {
     type: 'page' | 'table' | 'other' | 'none';
@@ -157,6 +147,23 @@ type StyledDataGridProps = {
 
 declare const DataGrid: Comp<DataGridProps, HTMLDivElement>;
 
+interface StatefulDataGridProps extends DataGridProps {
+    /** Hook returning pathname, search params and a method to update query params. */
+    useRouter: () => {
+        pathname: string;
+        search: string;
+        historyReplace: (newSearch: string) => void;
+    };
+    /** Pinned custom columns. */
+    pinnedCustomColumns?: Required<GridPinnedColumns>;
+}
+
+declare const StatefulDataGrid: Comp<StatefulDataGridProps, HTMLDivElement>;
+
+interface ExtendedGridPaginationModel extends GridPaginationModel {
+    direction?: 'next' | 'back';
+}
+
 type OperatorValue = string | string[];
 declare const decodeValue: (value: string) => OperatorValue;
 declare const encodeValue: (value: string | undefined) => string;
@@ -165,10 +172,16 @@ 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;
 declare const getSearchParamsFromFilterModel: (filterModel: GridFilterModel) => URLSearchParams;
-declare const getSortingFromString: (notParsed: string, columns: DataGridProps['columns']) => GridSortModel | null;
+/** SORT */
+declare const getSortingFromString: (searchString: string, columns: DataGridProps['columns']) => GridSortModel | null;
 declare const getSearchParamsFromSorting: (sorting: GridSortItem[]) => URLSearchParams;
+/** PAGINATION */
+declare const getPaginationFromString: (searchString: string) => ExtendedGridPaginationModel | null;
+declare const getSearchParamsFromPagination: (pagination: ExtendedGridPaginationModel) => URLSearchParams;
+/** COLUMN VISIBILITY */
 declare const getSearchParamsFromColumnVisibility: (columnVisibility: GridColumnVisibilityModel, columns: DataGridProps['columns']) => URLSearchParams;
 declare const getColumnVisibilityFromString: (notParsed: string, tableColumns: DataGridProps['columns']) => GridColumnVisibilityModel | null;
 declare const getPinnedColumnsFromString: (notParsed: string, tableColumns: DataGridProps['columns']) => PinnedColumns | null;
@@ -177,12 +190,13 @@ declare const getSearchParamsFromTab: (search: string) => URLSearchParams;
 type FinalSearchInput = {
     filterModel: GridFilterModel;
     sortModel: GridSortModel;
+    paginationModel: ExtendedGridPaginationModel;
     columnsVisibilityModel: GridColumnVisibilityModel;
     pinnedColumnsModel: GridPinnedColumns;
     search: string;
     columns: DataGridProps['columns'];
 };
-declare const getFinalSearch: ({ search, filterModel, sortModel, columnsVisibilityModel, pinnedColumnsModel, columns, }: FinalSearchInput) => URLSearchParams;
+declare const getFinalSearch: ({ search, filterModel, sortModel, paginationModel, columnsVisibilityModel, pinnedColumnsModel, columns, }: FinalSearchInput) => URLSearchParams;
 type PinnedColumns = {
     left: string[];
     right: string[];
@@ -192,6 +206,8 @@ type ModelsLocalStorage = {
     setLocalStorageFilters: (search: string) => void;
     localStorageSorting: string;
     setLocalStorageSorting: (search: string) => void;
+    localStoragePagination: string;
+    setLocalStoragePagination: (search: string) => void;
     localStorageColumnsVisibility: string;
     setLocalStorageColumnsVisibility: (search: string) => void;
     localStoragePinnedColumns: string;
@@ -200,6 +216,7 @@ type ModelsLocalStorage = {
 type ModelsTable = {
     filterModel: GridFilterModel;
     sortModel: GridSortModel;
+    paginationModel: ExtendedGridPaginationModel;
     columnVisibilityModel: GridColumnVisibilityModel;
     pinnedColumnsModel: PinnedColumns;
 };
@@ -208,12 +225,24 @@ declare const getModelsParsedOrUpdateLocalStorage: (search: string, columns: Dat
 type DataGridModel = {
     filterModel: GridFilterModel;
     sortModel: GridSortModel;
+    paginationModel: ExtendedGridPaginationModel;
     columnsModel: GridColumnVisibilityModel;
     pinnedColumnsModel: GridPinnedColumns;
 };
-declare const updateUrl: ({ filterModel, sortModel, columnsModel: columnsVisibilityModel, pinnedColumnsModel }: DataGridModel, search: string, historyReplace: (newSearch: string) => void, columns: DataGridProps['columns']) => void;
+declare const updateUrl: ({ filterModel, sortModel, paginationModel, columnsModel: columnsVisibilityModel, pinnedColumnsModel }: DataGridModel, search: string, historyReplace: (newSearch: string) => void, columns: DataGridProps['columns']) => void;
 declare const areFilterModelsEquivalent: (filterModel: GridFilterModel, filterModelToMatch: GridFilterModel) => boolean;
 
+declare const BaseButton: React.JSXElementConstructor<any>;
+
+declare const BaseCheckbox: React.JSXElementConstructor<any>;
+
+declare const muiIconToDSIcon: Partial<Record<keyof GridSlotsComponent, string>>;
+declare const BaseIcon: React.JSXElementConstructor<any>;
+
+declare const BasePopper: React.JSXElementConstructor<any>;
+
+declare const BaseTextField: React.JSXElementConstructor<any>;
+
 interface CompletionResponseItem {
     field: string;
     operator: string;
@@ -260,6 +289,61 @@ declare const DEFAULT_OPERATORS: {
  */
 declare const GridToolbarFilterSemanticField: Comp<GridToolbarFilterSemanticFieldProps, HTMLFormElement>;
 
+type ControlledPaginationProps = {
+    displaySelection?: boolean;
+    displayRowsPerPage?: boolean;
+    displayPagination?: boolean;
+    selectionStatus: SelectionStatus;
+    apiRef: MutableRefObject<GridApiPro>;
+    paginationModel: GridPaginationModel;
+    onPaginationModelChange: (model: GridPaginationModel) => void;
+    pageSizeOptions?: number[];
+    isRowSelectable?: DataGridProps['isRowSelectable'];
+    paginationProps?: DataGridProps['paginationProps'];
+};
+declare const ControlledPagination: React.FC<ControlledPaginationProps>;
+
+type ServerSideControlledPaginationProps = {
+    displaySelection?: boolean;
+    displayRowsPerPage?: boolean;
+    displayPagination?: boolean;
+    selectionStatus: SelectionStatus;
+    paginationModel: GridPaginationModel;
+    onPaginationModelChange: (model: GridPaginationModel) => void;
+    pageSizeOptions?: number[];
+    paginationProps?: DataGridProps['paginationProps'];
+    rowCount: number;
+    loading?: boolean;
+};
+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'> {
+    /** Including Badge Component. */
+    badge?: ReactNode;
+    /**
+     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
+     * Can also be a ReactElement.
+     */
+    leftIcon?: IconProps['icon'];
+    /** Left Icon Color variant. */
+    leftIconColor?: NotificationsColorPalette | ProductColorPalette | (string & {});
+    /**
+     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
+     * Can also be a ReactElement.
+     */
+    rightIcon?: IconProps['icon'];
+    /** Right Icon Color variant. */
+    rightIconColor?: NotificationsColorPalette | ProductColorPalette | (string & {});
+    /** Shield variant. */
+    shieldVariant?: ShieldVariant;
+}
+
+/**
+ * The Cell component.
+ */
+declare const TextCell: Comp<TextCellProps, HTMLDivElement>;
+
 type GridToolbarColumnsProps = Omit<typeof GridToolbarColumnsButton, 'ref'>;
 type GridToolbarDensityProps = Omit<typeof GridToolbarDensitySelector, 'ref'>;
 type GridToolbarFilterSemanticProps = Omit<GridToolbarFilterSemanticFieldProps, 'ref'>;
@@ -309,30 +393,23 @@ declare global {
 /** ------ */
 declare const Toolbar: React.FC<ToolbarProps>;
 
-interface TextCellProps extends ComponentProps<'div'> {
-    /** Including Badge Component. */
-    badge?: ReactNode;
-    /**
-     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
-     * Can also be a ReactElement.
-     */
-    leftIcon?: IconProps['icon'];
-    /** Left Icon Color variant. */
-    leftIconColor?: NotificationsColorPalette | ProductColorPalette | (string & {});
-    /**
-     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
-     * Can also be a ReactElement.
-     */
-    rightIcon?: IconProps['icon'];
-    /** Right Icon Color variant. */
-    rightIconColor?: NotificationsColorPalette | ProductColorPalette | (string & {});
-    /** Shield variant. */
-    shieldVariant?: ShieldVariant;
-}
-
-/**
- * The Cell component.
- */
-declare const TextCell: Comp<TextCellProps, HTMLDivElement>;
+type ToolbarWrapperProps = {
+    hideToolbar: DataGridProps['hideToolbar'];
+    RenderedToolbar: React.JSXElementConstructor<any>;
+    filterModel: DataGridProps['filterModel'];
+    onFilterModelChange: DataGridProps['onFilterModelChange'];
+    pagination: DataGridProps['pagination'];
+    paginationPlacement: DataGridProps['paginationPlacement'];
+    selectionStatus: React.MutableRefObject<SelectionStatus>;
+    apiRef: DataGridProps['apiRef'];
+    isRowSelectable: DataGridProps['isRowSelectable'];
+    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 { CATEGORIES, CONTAINS_ANY_OF, CONTAINS_ANY_OF_I, Category, CompletionResponse, 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, StyledDataGridProps, TextCell, Toolbar, VISIBILITY_MODEL_KEY, areFilterModelsEquivalent, buildStorageKey, clearPreviousVersionStorage, customColumnTypes, decodeValue, encodeValue, getColumnVisibilityFromString, getCompletion, getFilterModelFromString, getFinalSearch, getGridNumericOperators, getGridStringArrayOperators, getGridStringOperators, getModelsParsedOrUpdateLocalStorage, getPinnedColumnsFromString, getRsNumberColumnType, getRsStringColumnType, getSearchParamsFromColumnVisibility, getSearchParamsFromFilterModel, getSearchParamsFromPinnedColumns, getSearchParamsFromSorting, getSearchParamsFromTab, getSortingFromString, isOperatorValueValid, isValueValid, numberOperatorDecoder, numberOperatorEncoder, 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 };