diff --git a/packages/sdk-react/mui-styles.d.ts b/packages/sdk-react/mui-styles.d.ts index 0ae4b6e56..73cee29bc 100644 --- a/packages/sdk-react/mui-styles.d.ts +++ b/packages/sdk-react/mui-styles.d.ts @@ -8,7 +8,6 @@ import { type MonitePayableDetailsInfoProps, type MonitePayableStatusChipProps, type MonitePayableTableProps, - type MoniteTablePaginationProps, } from '@/core/theme/types'; import { type MoniteIconWrapperProps } from '@/ui/iconWrapper/IconWrapper'; import { diff --git a/packages/sdk-react/src/core/theme/monite/index.ts b/packages/sdk-react/src/core/theme/monite/index.ts index 32ad2ea76..6062c3c58 100644 --- a/packages/sdk-react/src/core/theme/monite/index.ts +++ b/packages/sdk-react/src/core/theme/monite/index.ts @@ -63,5 +63,13 @@ export const getTheme = (theme: ThemeConfig) => { lineHeight: theme.typography?.body2?.lineHeight || '20px', }, }, + + components: { + TablePagination: { + pageSizeOptions: theme.components?.TablePagination?.pageSizeOptions || [ + 15, 30, 100, + ], + }, + }, }; }; diff --git a/packages/sdk-react/src/core/theme/mui-monite/index.ts b/packages/sdk-react/src/core/theme/mui-monite/index.ts index 050b76ca4..935a6a080 100644 --- a/packages/sdk-react/src/core/theme/mui-monite/index.ts +++ b/packages/sdk-react/src/core/theme/mui-monite/index.ts @@ -714,7 +714,7 @@ export const getTheme = (theme: ThemeConfig): ThemeOptions => { }, MoniteTablePagination: { defaultProps: { - pageSizeOptions: [15, 30, 100], + pageSizeOptions: moniteTheme.components.TablePagination.pageSizeOptions, }, }, MuiDataGrid: { diff --git a/packages/sdk-react/src/core/theme/types.ts b/packages/sdk-react/src/core/theme/types.ts index 766492750..a6df88bfd 100644 --- a/packages/sdk-react/src/core/theme/types.ts +++ b/packages/sdk-react/src/core/theme/types.ts @@ -1,5 +1,5 @@ import { components, Services } from '@/api'; -import { ChipProps, SelectProps } from '@mui/material'; +import { ChipProps } from '@mui/material'; type TypographyStyle = { fontSize?: string | number; @@ -38,6 +38,12 @@ export type ThemeConfig = { body1?: TypographyStyle; body2?: TypographyStyle; }; + + components?: { + TablePagination?: { + pageSizeOptions?: number[]; + }; + }; }; export type MonitePalette = { @@ -93,23 +99,6 @@ export type MonitePalette = { divider: string; }; -interface MoniteTablePaginationRootSlotProps { - pageSizeOptions?: number[]; -} - -interface MoniteTablePaginationSlotProps { - slotProps?: { - pageSizeSelect?: Omit< - SelectProps, - 'value' | 'defaultValue' | 'aria-label' | 'ref' | 'components' - >; - }; -} - -export interface MoniteTablePaginationProps - extends MoniteTablePaginationSlotProps, - MoniteTablePaginationRootSlotProps {} - interface BaseChipProps { /** The variant of the Chip. */ variant?: ChipProps['variant']; diff --git a/packages/sdk-react/src/ui/table/TablePagination.tsx b/packages/sdk-react/src/ui/table/TablePagination.tsx index a0fb4b6a3..738357733 100644 --- a/packages/sdk-react/src/ui/table/TablePagination.tsx +++ b/packages/sdk-react/src/ui/table/TablePagination.tsx @@ -16,7 +16,6 @@ import { } from '@mui/material'; import { styled, useThemeProps } from '@mui/material/styles'; -// eslint-disable-next-line lingui/no-unlocalized-strings const componentName = 'MoniteTablePagination' as const; const DEFAULT_PAGE_SIZE = 10 as const; @@ -56,24 +55,7 @@ interface TablePaginationProps extends MoniteTablePaginationProps { * @param paginationModel The current pagination model. It should contain the current page and the page size. * @param nextPage The next page number. If undefined, the next page button will be disabled. * @param prevPage The previous page number. If undefined, the previous page button will be disabled. - * @param pageSizeOptions The page size options. If not provided, will be used from MUI theme or hidden if only one option is available. - * @example MUI theming - * // You can configure the component through MUI theming like this: - * createTheme(myTheme, { - * components: { - * MoniteTablePagination: { - * defaultProps: { - * // The default page size options - * pageSizeOptions: [5, 10, 15, 20], - * slotProps: { - * pageSizeSelect: { - * size: 'small', - * }, - * }, - * }, - * } - * } - * } + * @param pageSizeOptions The page size options. If not provided, will be used from theme or hidden if only one option is available. */ export const TablePagination = ({ onPaginationModelChange, diff --git a/packages/sdk-react/src/utils/storybook-utils.tsx b/packages/sdk-react/src/utils/storybook-utils.tsx index 05397eb45..1ab5757fb 100644 --- a/packages/sdk-react/src/utils/storybook-utils.tsx +++ b/packages/sdk-react/src/utils/storybook-utils.tsx @@ -74,6 +74,11 @@ const defaultThemeConfig: ThemeConfig = { text: '#401d6d', }, + components: { + TablePagination: { + pageSizeOptions: [10, 20, 100], + }, + }, }; export const GlobalStorybookDecorator = (props: {