Fix custom theme variables used

demo/src/equipment-search.tsx

@@ -15,7 +15,7 @@ import {
     equipmentStyles,
     EquipmentType,
     useElementSearch,
-} from '../../src/index';
+} from '../../src';
 
 interface AnyElementInterface {
     id: string;

demo/src/right-resizable-box.jsx → demo/src/right-resizable-box.tsx

@@ -4,15 +4,15 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-/* eslint-disable import/no-extraneous-dependencies */
 
-import { useState } from 'react';
+import { type PropsWithChildren, useState } from 'react';
 import { MoreVert as ResizePanelHandleIcon } from '@mui/icons-material';
-import { ResizableBox } from 'react-resizable';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ResizableBox, type ResizableBoxProps } from 'react-resizable';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { useWindowWidth } from '@react-hook/window-size';
-import PropTypes from 'prop-types';
 import { Box, styled } from '@mui/material';
-import { mergeSx } from '../../src/utils/styles';
+import { mergeSx, type MuiStyles } from '../../src/utils/styles';
 
 const styles = {
     panel: {
@@ -47,33 +47,43 @@ const styles = {
         color: theme.palette.text.disabled,
         transform: 'scale(0.5, 1.5)',
     }),
-};
+} as const satisfies MuiStyles;
 
 // TODO can we avoid to define a component just to add sx support ?
 const ResizableBoxSx = styled(ResizableBox)({});
 
-function RightResizableBox(props) {
-    const { children, disableResize = false, fullscreen = false, hide = false } = props;
+export type RightResizableBoxProps = PropsWithChildren<{
+    disableResize?: boolean;
+    fullscreen?: boolean;
+    hide?: boolean;
+}>;
+
+export default function RightResizableBox({
+    children,
+    disableResize = false,
+    fullscreen = false,
+    hide = false,
+}: Readonly<RightResizableBoxProps>) {
     const windowWidth = useWindowWidth();
 
     const [resizedTreePercentage, setResizedTreePercentage] = useState(0.5);
 
-    const updateResizedTreePercentage = (treePanelWidth, totalWidth) => {
+    const updateResizedTreePercentage = (treePanelWidth: number, totalWidth: number) => {
         if (totalWidth > 0) {
             const newPercentage = treePanelWidth / totalWidth;
             setResizedTreePercentage(newPercentage);
         }
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const onResize = (event, { element, size }) => {
+    const onResize: NonNullable<ResizableBoxProps['onResize']> = (_event, { size }) => {
         updateResizedTreePercentage(size.width, windowWidth);
     };
 
     return (
         <ResizableBoxSx
             style={{ display: hide ? 'none' : undefined }}
             width={fullscreen ? windowWidth : windowWidth * resizedTreePercentage}
-            sx={mergeSx(styles.panel, !disableResize && styles.resizePanelHandle)}
+            sx={mergeSx(styles.panel, (!disableResize && styles.resizePanelHandle) || undefined)}
             resizeHandles={['e']}
             axis={disableResize ? 'none' : 'x'}
             onResize={onResize}
@@ -85,12 +95,3 @@ function RightResizableBox(props) {
         </ResizableBoxSx>
     );
 }
-
-RightResizableBox.propTypes = {
-    children: PropTypes.node,
-    disableResize: PropTypes.bool,
-    fullscreen: PropTypes.bool,
-    hide: PropTypes.bool,
-};
-
-export default RightResizableBox;

src/components/customAGGrid/customAggrid.style.ts

@@ -15,9 +15,13 @@ export const styles = {
         position: 'relative',
 
         [`&.${CUSTOM_AGGRID_THEME}`]: {
-            '--ag-value-change-value-highlight-background-color': theme.aggrid.valueChangeHighlightBackgroundColor,
-            '--ag-selected-row-background-color': theme.aggrid.highlightColor,
-            '--ag-row-hover-color': theme.aggrid.highlightColor,
+            ...(theme.agGrid?.valueChangeHighlightBackgroundColor && {
+                '--ag-value-change-value-highlight-background-color': theme.agGrid.valueChangeHighlightBackgroundColor,
+            }),
+            ...(theme.agGrid?.highlightColor && {
+                '--ag-selected-row-background-color': theme.agGrid.highlightColor,
+                '--ag-row-hover-color': theme.agGrid.highlightColor,
+            }),
         },
 
         '& .ag-checkbox-input': {

src/components/customAGGrid/customAggrid.tsx

@@ -53,6 +53,7 @@ function onColumnResized({ api, column, finished, source }: ColumnResizedEvent)
     }
 }
 
+// TODO try to expose <TData> of props that forwardRef don't permit
 export const CustomAGGrid = forwardRef<AgGridReact, CustomAGGridProps>(
     ({ overrideLocales, sx, ...agGridReactProps }, ref) => {
         const theme = useTheme();
@@ -61,7 +62,7 @@ export const CustomAGGrid = forwardRef<AgGridReact, CustomAGGridProps>(
             <Box
                 component="div"
                 sx={mergeSx(styles.grid, sx)}
-                className={`${theme.aggrid.theme} ${CUSTOM_AGGRID_THEME}`}
+                className={`${theme.agGrid?.theme} ${CUSTOM_AGGRID_THEME}`}
             >
                 <AgGridReact
                     ref={ref}

src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx

@@ -5,71 +5,75 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
-import { Box, useTheme } from '@mui/material';
+import { type CSSObject } from '@mui/material';
 import type { CellEditingStoppedEvent, ColumnState, SortChangedEvent } from 'ag-grid-community';
 import { BottomRightButtons } from './BottomRightButtons';
 import { FieldConstants } from '../../../../utils/constants/fieldConstants';
 import { CustomAGGrid, type CustomAGGridProps } from '../../../customAGGrid';
+import { type MuiStyles } from '../../../../utils/styles';
 
-const style = (customProps: any) => ({
-    grid: (theme: any) => ({
-        width: 'auto',
-        height: '100%',
-        position: 'relative',
-
-        // - AG Grid colors override -
-        // It shouldn't be exactly like this, but I couldn't make it works otherwise
-        // https://www.ag-grid.com/react-data-grid/global-style-customisation/
-        '--ag-alpine-active-color': `${theme.palette.primary.main} !important`,
-        '--ag-checkbox-indeterminate-color': `${theme.palette.primary.main} !important`,
-        '--ag-background-color': `${theme.agGridBackground.color} !important`,
-        '--ag-header-background-color': `${theme.agGridBackground.color} !important`,
-        '--ag-odd-row-background-color': `${theme.agGridBackground.color} !important`,
-        '--ag-modal-overlay-background-color': `${theme.agGridBackground.color} !important`,
-        '--ag-selected-row-background-color': 'transparent !important',
-        '--ag-range-selection-border-color': 'transparent !important',
-
-        // overrides the default computed max height for ag grid default selector editor to make it more usable
-        // can be removed if a custom selector editor is implemented
-        '& .ag-select-list': {
-            maxHeight: '300px !important',
-        },
-        '& .ag-root-wrapper-body': {
-            maxHeight: '500px',
-        },
-        '& .ag-cell': {
-            boxShadow: 'none',
-        },
-        '& .ag-cell-edit-wrapper': {
-            height: 'inherit',
-        },
-        '& .ag-row-hover': {
-            cursor: 'text',
-        },
-        '& .ag-overlay-loading-center': {
-            border: 'none',
-            boxShadow: 'none',
-        },
-        '& .numeric-input': {
-            fontSize: 'calc(var(--ag-font-size) + 1px)',
-            paddingLeft: 'calc(var(--ag-cell-horizontal-padding) - 1px)',
-            width: '100%',
+const style = (customProps: CSSObject) =>
+    ({
+        grid: (theme) => ({
+            width: 'auto',
             height: '100%',
-            border: 'inherit',
-            outline: 'inherit',
-            backgroundColor: theme.agGridBackground.color,
-        },
-        '& .Mui-focused .MuiOutlinedInput-root': {
-            // borders moves row height
-            outline: 'var(--ag-borders-input) var(--ag-input-focus-border-color)',
-            outlineOffset: '-1px',
-            backgroundColor: theme.agGridBackground.color,
-        },
-        ...customProps,
-    }),
-});
+            position: 'relative',
+
+            // - AG Grid colors override -
+            // It shouldn't be exactly like this, but I couldn't make it works otherwise
+            // https://www.ag-grid.com/react-data-grid/global-style-customisation/
+            '--ag-alpine-active-color': `${theme.palette.primary.main} !important`,
+            '--ag-checkbox-indeterminate-color': `${theme.palette.primary.main} !important`,
+            ...(theme.agGrid?.backgroundColor && {
+                '--ag-background-color': `${theme.agGrid.backgroundColor} !important`,
+                '--ag-header-background-color': `${theme.agGrid.backgroundColor} !important`,
+                '--ag-odd-row-background-color': `${theme.agGrid.backgroundColor} !important`,
+                '--ag-modal-overlay-background-color': `${theme.agGrid.backgroundColor} !important`,
+            }),
+            '--ag-selected-row-background-color': 'transparent !important',
+            '--ag-range-selection-border-color': 'transparent !important',
+
+            // overrides the default computed max height for ag grid default selector editor to make it more usable
+            // can be removed if a custom selector editor is implemented
+            '& .ag-select-list': {
+                maxHeight: '300px !important',
+            },
+            '& .ag-root-wrapper-body': {
+                maxHeight: '500px',
+            },
+            '& .ag-cell': {
+                boxShadow: 'none',
+            },
+            '& .ag-cell-edit-wrapper': {
+                height: 'inherit',
+            },
+            '& .ag-row-hover': {
+                cursor: 'text',
+            },
+            '& .ag-overlay-loading-center': {
+                border: 'none',
+                boxShadow: 'none',
+            },
+            '& .numeric-input': {
+                fontSize: 'calc(var(--ag-font-size) + 1px)',
+                paddingLeft: 'calc(var(--ag-cell-horizontal-padding) - 1px)',
+                width: '100%',
+                height: '100%',
+                border: 'inherit',
+                outline: 'inherit',
+                ...(theme.agGrid?.backgroundColor && { backgroundColor: theme.agGrid.backgroundColor }),
+            },
+            '& .Mui-focused .MuiOutlinedInput-root': {
+                // borders moves row height
+                outline: 'var(--ag-borders-input) var(--ag-input-focus-border-color)',
+                outlineOffset: '-1px',
+                ...(theme.agGrid?.backgroundColor && { backgroundColor: theme.agGrid.backgroundColor }),
+            },
+            ...customProps,
+        }),
+    }) as const satisfies MuiStyles;
 
 export type CustomAgGridTableProps = Required<
     Pick<
@@ -86,7 +90,7 @@ export type CustomAgGridTableProps = Required<
         name: string;
         makeDefaultRowData: any;
         csvProps: unknown;
-        cssProps: unknown;
+        cssProps: CSSObject;
     };
 
 export function CustomAgGridTable({
@@ -97,8 +101,6 @@ export function CustomAgGridTable({
     rowSelection,
     ...props
 }: Readonly<CustomAgGridTableProps>) {
-    // FIXME: right type => Theme -->  not defined there ( gridStudy and gridExplore definition not the same )
-    const theme: any = useTheme();
     const [gridApi, setGridApi] = useState<any>(null);
     const [selectedRows, setSelectedRows] = useState([]);
     const [newRowAdded, setNewRowAdded] = useState(false);
@@ -208,27 +210,26 @@ export function CustomAgGridTable({
 
     return (
         <>
-            <Box className={theme.aggrid.theme} sx={style(cssProps).grid}>
-                <CustomAGGrid
-                    rowData={rowData}
-                    onGridReady={onGridReady}
-                    cacheOverflowSize={10}
-                    rowSelection={rowSelection ?? 'multiple'}
-                    rowDragEntireRow
-                    rowDragManaged
-                    onRowDragEnd={(e) => move(getIndex(e.node.data), e.overIndex)}
-                    detailRowAutoHeight
-                    onSelectionChanged={() => {
-                        setSelectedRows(gridApi.api.getSelectedRows());
-                    }}
-                    onRowDataUpdated={newRowAdded ? onRowDataUpdated : undefined}
-                    onCellEditingStopped={onCellEditingStopped}
-                    onSortChanged={onSortChanged}
-                    getRowId={(row) => row.data[FieldConstants.AG_GRID_ROW_UUID]}
-                    theme="legacy"
-                    {...props}
-                />
-            </Box>
+            <CustomAGGrid
+                rowData={rowData}
+                onGridReady={onGridReady}
+                cacheOverflowSize={10}
+                rowSelection={rowSelection ?? 'multiple'}
+                rowDragEntireRow
+                rowDragManaged
+                onRowDragEnd={(e) => move(getIndex(e.node.data), e.overIndex)}
+                detailRowAutoHeight
+                onSelectionChanged={() => {
+                    setSelectedRows(gridApi.api.getSelectedRows());
+                }}
+                onRowDataUpdated={newRowAdded ? onRowDataUpdated : undefined}
+                onCellEditingStopped={onCellEditingStopped}
+                onSortChanged={onSortChanged}
+                getRowId={(row) => row.data[FieldConstants.AG_GRID_ROW_UUID]}
+                theme="legacy"
+                sx={useMemo(() => style(cssProps).grid, [cssProps])}
+                {...props}
+            />
             <BottomRightButtons
                 name={name}
                 handleAddRow={handleAddRow}

src/components/inputs/reactHookForm/utils/CancelButton.tsx

@@ -8,7 +8,9 @@
 import { Button, type ButtonProps, useThemeProps } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 
-export function CancelButton(inProps: Readonly<Omit<ButtonProps, 'children'>>) {
+export type CancelButtonProps = Omit<ButtonProps, 'children'>;
+
+export function CancelButton(inProps: Readonly<CancelButtonProps>) {
     const props = useThemeProps({ props: inProps, name: 'CancelButton' });
     return (
         <Button data-testid="CancelButton" {...props}>

src/index.ts

@@ -4,7 +4,8 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-export { default as svg } from './_mocks_/svg';
+import type {} from './module-mui'; // here for demo
+
 export * from './components';
 export * from './hooks';
 export * from './redux';