feat(DEV-13634): replace mui functional customization

examples/with-nextjs-and-clerk-auth/src/themes/monite.ts

@@ -806,11 +806,6 @@ const defaultMoniteComponents: Components<Omit<Theme, 'components'>> = {
       },
     },
   },
-  MoniteTablePagination: {
-    defaultProps: {
-      pageSizeOptions: [15, 30, 100],
-    },
-  },
   MuiDataGrid: {
     defaultProps: {
       columnHeaderHeight: 55,

packages/sdk-drop-in/src/apps/MoniteIframeApp.tsx

@@ -7,15 +7,12 @@ import { moniteIframeAppComponents } from '@/lib/moniteIframeAppComponents';
 import { useMoniteIframeAppSlots } from '@/lib/useIframeAppSlots';
 import { css, Global } from '@emotion/react';
 import { type APISchema } from '@monite/sdk-react';
-import { createTheme, CssBaseline, ThemeProvider } from '@mui/material';
+import { CssBaseline } from '@mui/material';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { EntityIdLoader, SDKDemoAPIProvider } from '@team-monite/sdk-demo';
 
 import { DropInMoniteProvider } from '../lib/DropInMoniteProvider';
 
-// todo::implement google fonts support
-// import { getFontFaceStyles } from './fontStyles.ts';
-
 export const MoniteIframeApp = () => {
   const queryClient = useMemo(() => new QueryClient(), []);
 
@@ -76,7 +73,7 @@ const MoniteIframeAppComponent = ({
         fetchToken,
       }}
     >
-      <ThemeProvider theme={createTheme(theme)}>
+      <>
         <CssBaseline enableColorScheme />
         <Global
           styles={css`
@@ -130,7 +127,7 @@ const MoniteIframeAppComponent = ({
             )}
           </Routes>
         </BrowserRouter>
-      </ThemeProvider>
+      </>
     </DropInMoniteProvider>
   );
 };

packages/sdk-react/mui-styles.d.ts

@@ -8,9 +8,7 @@ import {
   type MonitePayableDetailsInfoProps,
   type MonitePayableStatusChipProps,
   type MonitePayableTableProps,
-  type MoniteTablePaginationProps,
 } from '@/core/theme/types';
-import { type MoniteIconWrapperProps } from '@/ui/iconWrapper/IconWrapper';
 import {
   ComponentsOverrides,
   ComponentsPropsList,
@@ -39,14 +37,12 @@ declare module '@mui/material/styles' {
     MoniteInvoiceStatusChip: 'root';
     MonitePayableStatusChip: 'root';
     MoniteApprovalRequestStatusChip: 'root';
-    MoniteTablePagination: 'root' | 'menu';
     MonitePayableDetailsInfo: 'never';
     MoniteInvoiceRecurrenceStatusChip: 'root';
     MoniteInvoiceRecurrenceIterationStatusChip: 'root';
     MoniteCounterpartStatusChip: 'root';
     MoniteApprovalStatusChip: 'root';
     MonitePayableTable: 'never';
-    MoniteReceivablesTable: 'never';
   }
 
   /**
@@ -56,15 +52,12 @@ declare module '@mui/material/styles' {
     MoniteInvoiceStatusChip: Partial<MoniteInvoiceStatusChipProps>;
     MonitePayableStatusChip: Partial<MonitePayableStatusChipProps>;
     MoniteApprovalRequestStatusChip: Partial<MoniteApprovalRequestStatusChipProps>;
-    MoniteTablePagination: Partial<MoniteTablePaginationProps>;
     MonitePayableDetailsInfo: Partial<MonitePayableDetailsInfoProps>;
     MoniteInvoiceRecurrenceStatusChip: Partial<MoniteInvoiceRecurrenceStatusChipProps>;
     MoniteInvoiceRecurrenceIterationStatusChip: Partial<MoniteInvoiceRecurrenceIterationStatusChipProps>;
     MoniteCounterpartStatusChip: Partial<MoniteCounterpartStatusChipProps>;
     MonitePayableTable: Partial<MonitePayableTableProps>;
     MoniteApprovalStatusChip: Partial<MoniteApprovalStatusChipProps>;
-    MoniteReceivablesTable: Partial<MoniteReceivablesTableProps>;
-    MoniteIconWrapper: Partial<MoniteIconWrapperProps>;
   }
 
   /**
@@ -74,14 +67,11 @@ declare module '@mui/material/styles' {
     MoniteInvoiceStatusChip?: ComponentType<'MoniteInvoiceStatusChip'>;
     MonitePayableStatusChip?: ComponentType<'MonitePayableStatusChip'>;
     MoniteApprovalRequestStatusChip?: ComponentType<'MoniteApprovalRequestStatusChip'>;
-    MoniteTablePagination?: ComponentType<'MoniteTablePagination'>;
     MonitePayableDetailsInfo?: ComponentType<'MonitePayableDetailsInfo'>;
     MonitePayableTable?: ComponentType<'MonitePayableTable'>;
     MoniteInvoiceRecurrenceStatusChip?: ComponentType<'MoniteInvoiceRecurrenceStatusChip'>;
     MoniteInvoiceRecurrenceIterationStatusChip?: ComponentType<'MoniteInvoiceRecurrenceIterationStatusChip'>;
     MoniteCounterpartStatusChip?: ComponentType<'MoniteCounterpartStatusChip'>;
     MoniteApprovalStatusChip?: ComponentType<'MoniteApprovalStatusChip'>;
-    MoniteReceivablesTable?: ComponentType<'MoniteReceivablesTable'>;
-    MoniteIconWrapper?: ComponentType<'MoniteIconWrapper'>;
   }
 }

packages/sdk-react/src/components/approvalPolicies/ApprovalPoliciesTable/ApprovalPoliciesTable.tsx

@@ -9,10 +9,7 @@ import { useMoniteContext } from '@/core/context/MoniteContext';
 import { MoniteScopedProviders } from '@/core/context/MoniteScopedProviders';
 import { DataGridEmptyState } from '@/ui/DataGridEmptyState';
 import { GetNoRowsOverlay } from '@/ui/DataGridEmptyState/GetNoRowsOverlay';
-import {
-  TablePagination,
-  useTablePaginationThemeDefaultPageSize,
-} from '@/ui/table/TablePagination';
+import { TablePagination } from '@/ui/table/TablePagination';
 import { hasSelectedText } from '@/utils/text-selection';
 import { t } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
@@ -98,14 +95,14 @@ const ApprovalPoliciesTableBase = ({
   onCreateClick,
 }: ApprovalPoliciesTableProps) => {
   const { i18n } = useLingui();
+  const { api, locale, componentSettings } = useMoniteContext();
   const [currentPaginationToken, setCurrentPaginationToken] = useState<
     string | null
   >(null);
   const [pageSize, setPageSize] = useState<number>(
-    useTablePaginationThemeDefaultPageSize()
+    componentSettings.approvalPolicies.pageSizeOptions[0]
   );
   const [currentFilters, setCurrentFilters] = useState<FilterTypes>({});
-  const { api, locale } = useMoniteContext();
 
   const {
     data: approvalPolicies,
@@ -277,6 +274,9 @@ const ApprovalPoliciesTableBase = ({
         slots={{
           pagination: () => (
             <TablePagination
+              pageSizeOptions={
+                componentSettings.approvalPolicies.pageSizeOptions
+              }
               nextPage={approvalPolicies?.next_pagination_token}
               prevPage={approvalPolicies?.prev_pagination_token}
               paginationModel={{

packages/sdk-react/src/components/approvalRequests/ApprovalRequestsTable/ApprovalRequestsTable.tsx

@@ -16,10 +16,7 @@ import { CounterpartCellById } from '@/ui/CounterpartCell';
 import { DataGridEmptyState } from '@/ui/DataGridEmptyState';
 import { GetNoRowsOverlay } from '@/ui/DataGridEmptyState/GetNoRowsOverlay';
 import { LoadingPage } from '@/ui/loadingPage';
-import {
-  TablePagination,
-  useTablePaginationThemeDefaultPageSize,
-} from '@/ui/table/TablePagination';
+import { TablePagination } from '@/ui/table/TablePagination';
 import { t } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { Box } from '@mui/material';
@@ -65,7 +62,7 @@ const ApprovalRequestsTableBase = ({
   onRowClick,
   ...restProps
 }: ApprovalRequestsTableProps) => {
-  const { api, locale } = useMoniteContext();
+  const { api, locale, componentSettings } = useMoniteContext();
   const { i18n } = useLingui();
   const { formatCurrencyToDisplay } = useCurrencies();
   const { data: user } = useEntityUserByAuthToken();
@@ -108,7 +105,7 @@ const ApprovalRequestsTableBase = ({
     string | null
   >(null);
   const [pageSize, setPageSize] = useState<number>(
-    useTablePaginationThemeDefaultPageSize()
+    componentSettings.approvalRequests.pageSizeOptions[0]
   );
   const [currentFilter, setCurrentFilter] = useState<FilterTypes>({});
 
@@ -319,6 +316,9 @@ const ApprovalRequestsTableBase = ({
         slots={{
           pagination: () => (
             <TablePagination
+              pageSizeOptions={
+                componentSettings.approvalRequests.pageSizeOptions
+              }
               prevPage={approvalRequests?.prev_pagination_token}
               nextPage={approvalRequests?.next_pagination_token}
               paginationModel={{

packages/sdk-react/src/components/counterparts/CounterpartsTable/CounterpartsTable.tsx

@@ -5,6 +5,7 @@ import { ScopedCssBaselineContainerClassName } from '@/components/ContainerCssBa
 import type { CounterpartShowCategories } from '@/components/counterparts/Counterpart.types';
 import { CounterpartStatusChip } from '@/components/counterparts/CounterpartStatusChip';
 import { TableActions } from '@/components/TableActions';
+import { useMoniteContext } from '@/core/context/MoniteContext';
 import { MoniteScopedProviders } from '@/core/context/MoniteScopedProviders';
 import { useRootElements } from '@/core/context/RootElementsProvider';
 import { CounterpartResponse, useEntityUserByAuthToken } from '@/core/queries';
@@ -18,10 +19,7 @@ import { CounterpartCellById } from '@/ui/CounterpartCell/CounterpartCell';
 import { DataGridEmptyState } from '@/ui/DataGridEmptyState';
 import { GetNoRowsOverlay } from '@/ui/DataGridEmptyState/GetNoRowsOverlay';
 import { LoadingPage } from '@/ui/loadingPage';
-import {
-  TablePagination,
-  useTablePaginationThemeDefaultPageSize,
-} from '@/ui/table/TablePagination';
+import { TablePagination } from '@/ui/table/TablePagination';
 import { classNames } from '@/utils/css-utils';
 import { hasSelectedText } from '@/utils/text-selection';
 import { t } from '@lingui/macro';
@@ -121,6 +119,7 @@ const CounterpartsTableBase = ({
   setType,
 }: CounterpartsTableProps) => {
   const { i18n } = useLingui();
+  const { componentSettings } = useMoniteContext();
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState<boolean>(false);
   const [selectedCounterpart, setSelectedCounterpart] = useState<
     CounterpartResponse | undefined
@@ -130,7 +129,7 @@ const CounterpartsTableBase = ({
     string | null
   >(null);
   const [pageSize, setPageSize] = useState<number>(
-    useTablePaginationThemeDefaultPageSize()
+    componentSettings.counterparts.pageSizeOptions[0]
   );
   const [currentSort] = useState<Sort | null>(null);
   const [currentFilter, setCurrentFilter] = useState<Filters>({});
@@ -415,6 +414,7 @@ const CounterpartsTableBase = ({
         slots={{
           pagination: () => (
             <TablePagination
+              pageSizeOptions={componentSettings.counterparts.pageSizeOptions}
               prevPage={counterparts?.prev_pagination_token}
               nextPage={counterparts?.next_pagination_token}
               paginationModel={{

packages/sdk-react/src/components/payables/PayablesTable/PayablesTable.tsx

@@ -22,10 +22,7 @@ import { CounterpartCellById } from '@/ui/CounterpartCell';
 import { GetNoRowsOverlay } from '@/ui/DataGridEmptyState/GetNoRowsOverlay';
 import { DueDateCell } from '@/ui/DueDateCell';
 import { LoadingPage } from '@/ui/loadingPage';
-import {
-  TablePagination,
-  useTablePaginationThemeDefaultPageSize,
-} from '@/ui/table/TablePagination';
+import { TablePagination } from '@/ui/table/TablePagination';
 import { UserCell } from '@/ui/UserCell';
 import { classNames } from '@/utils/css-utils';
 import { hasSelectedText } from '@/utils/text-selection';
@@ -155,7 +152,7 @@ const PayablesTableBase = ({
   ...inProps
 }: PayablesTableProps) => {
   const { i18n } = useLingui();
-  const { api, locale, queryClient } = useMoniteContext();
+  const { api, locale, queryClient, componentSettings } = useMoniteContext();
 
   const { isShowingSummaryCards, fieldOrder, summaryCardFilters } =
     usePayableTableThemeProps(inProps);
@@ -164,7 +161,7 @@ const PayablesTableBase = ({
     string | null
   >(null);
   const [pageSize, setPageSize] = useState<number>(
-    useTablePaginationThemeDefaultPageSize()
+    componentSettings.payables.pageSizeOptions[0]
   );
   const [sortModel, setSortModel] = useState<PayableGridSortModel>({
     field: 'created_at',
@@ -480,6 +477,7 @@ const PayablesTableBase = ({
         slots={{
           pagination: () => (
             <TablePagination
+              pageSizeOptions={componentSettings.payables.pageSizeOptions}
               nextPage={payables?.next_pagination_token}
               prevPage={payables?.prev_pagination_token}
               paginationModel={{

packages/sdk-react/src/components/products/ProductsTable/ProductsTable.tsx

@@ -13,10 +13,7 @@ import { useIsActionAllowed } from '@/core/queries/usePermissions';
 import { AccessRestriction } from '@/ui/accessRestriction';
 import { GetNoRowsOverlay } from '@/ui/DataGridEmptyState/GetNoRowsOverlay';
 import { LoadingPage } from '@/ui/loadingPage';
-import {
-  TablePagination,
-  useTablePaginationThemeDefaultPageSize,
-} from '@/ui/table/TablePagination';
+import { TablePagination } from '@/ui/table/TablePagination';
 import { hasSelectedText } from '@/utils/text-selection';
 import { t } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
@@ -108,11 +105,12 @@ const ProductsTableBase = ({
   openCreateModal,
 }: ProductTableProps) => {
   const { i18n } = useLingui();
+  const { api, componentSettings } = useMoniteContext();
   const [currentPaginationToken, setCurrentPaginationToken] = useState<
     string | null
   >(null);
   const [pageSize, setPageSize] = useState<number>(
-    useTablePaginationThemeDefaultPageSize()
+    componentSettings.products.pageSizeOptions[0]
   );
   const [currentFilter, setCurrentFilter] = useState<FilterType>({});
   const [sortModel, setSortModel] = useState<
@@ -144,8 +142,6 @@ const ProductsTableBase = ({
     entityUserId: user?.id,
   });
 
-  const { api } = useMoniteContext();
-
   const {
     data: products,
     isLoading,
@@ -312,6 +308,7 @@ const ProductsTableBase = ({
         slots={{
           pagination: () => (
             <TablePagination
+              pageSizeOptions={componentSettings.products.pageSizeOptions}
               prevPage={products?.prev_pagination_token}
               nextPage={products?.next_pagination_token}
               paginationModel={{

packages/sdk-react/src/components/receivables/CreditNotesTable/CreditNotesTable.tsx

@@ -21,10 +21,7 @@ import { ReceivableCursorFields } from '@/enums/ReceivableCursorFields';
 import { CounterpartCellById } from '@/ui/CounterpartCell';
 import { DataGridEmptyState } from '@/ui/DataGridEmptyState';
 import { GetNoRowsOverlay } from '@/ui/DataGridEmptyState/GetNoRowsOverlay';
-import {
-  TablePagination,
-  useTablePaginationThemeDefaultPageSize,
-} from '@/ui/table/TablePagination';
+import { TablePagination } from '@/ui/table/TablePagination';
 import { classNames } from '@/utils/css-utils';
 import { hasSelectedText } from '@/utils/text-selection';
 import { t } from '@lingui/macro';
@@ -77,14 +74,14 @@ const CreditNotesTableBase = ({
   filters: filtersProp,
 }: CreditNotesTableProps) => {
   const { i18n } = useLingui();
-  const { locale } = useMoniteContext();
+  const { locale, componentSettings } = useMoniteContext();
 
   const [paginationToken, setPaginationToken] = useState<string | undefined>(
     undefined
   );
 
   const [pageSize, setPageSize] = useState<number>(
-    useTablePaginationThemeDefaultPageSize()
+    componentSettings.receivables.pageSizeOptions[0]
   );
 
   const [sortModel, setSortModel] = useState<CreditNotesTableSortModel>({
@@ -258,6 +255,7 @@ const CreditNotesTableBase = ({
           slots={{
             pagination: () => (
               <TablePagination
+                pageSizeOptions={componentSettings.receivables.pageSizeOptions}
                 nextPage={creditNotes?.next_pagination_token}
                 prevPage={creditNotes?.prev_pagination_token}
                 paginationModel={{

packages/sdk-react/src/components/receivables/Financing/FinanceTab/FinancedInvoicesTable/FinancedInvoicesTable.tsx

@@ -18,10 +18,7 @@ import { useGetFinancedInvoices } from '@/core/queries/useFinancing';
 import { ReceivableCursorFields } from '@/enums/ReceivableCursorFields';
 import { DataGridEmptyState } from '@/ui/DataGridEmptyState';
 import { GetNoRowsOverlay } from '@/ui/DataGridEmptyState/GetNoRowsOverlay';
-import {
-  TablePagination,
-  useTablePaginationThemeDefaultPageSize,
-} from '@/ui/table/TablePagination';
+import { TablePagination } from '@/ui/table/TablePagination';
 import { classNames } from '@/utils/css-utils';
 import { t } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
@@ -79,14 +76,14 @@ const FinancedInvoicesTableBase = ({
   query,
 }: FinancedInvoicesTableProps) => {
   const { i18n } = useLingui();
-  const { locale } = useMoniteContext();
+  const { locale, componentSettings } = useMoniteContext();
 
   const [paginationToken, setPaginationToken] = useState<string | undefined>(
     undefined
   );
 
   const [pageSize, setPageSize] = useState<number>(
-    useTablePaginationThemeDefaultPageSize()
+    componentSettings.receivables.pageSizeOptions[0]
   );
 
   const [sortModel, setSortModel] = useState<ReceivableGridSortModel>({
@@ -250,6 +247,7 @@ const FinancedInvoicesTableBase = ({
         slots={{
           pagination: () => (
             <TablePagination
+              pageSizeOptions={componentSettings.receivables.pageSizeOptions}
               nextPage={invoices?.next_pagination_token}
               prevPage={invoices?.prev_pagination_token}
               paginationModel={{