Skip to content

Fix custom theme variables used #863

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Fix custom theme variables used #863

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cdf8be7
Fix custom theme variables used
Tristan-WorkGH Sep 18, 2025
37e353d
fix dts problem
Tristan-WorkGH Sep 18, 2025
61b6ca9
update (a little) demo
Tristan-WorkGH Sep 19, 2025
e987982
Exclude unwanted dts from build
Tristan-WorkGH Sep 19, 2025
aa9d26c
Update Mui augmentation with common code from fronts
Tristan-WorkGH Sep 19, 2025
f602647
Pass aggrid extensions as optional as each apps set only some of them
Tristan-WorkGH Sep 19, 2025
150f30e
`CancelButton` wans't declared correctly
Tristan-WorkGH Sep 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion demo/src/equipment-search.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
equipmentStyles,
EquipmentType,
useElementSearch,
} from '../../src/index';
} from '../../src';

interface AnyElementInterface {
id: string;
Expand Down
41 changes: 21 additions & 20 deletions demo/src/right-resizable-box.jsx → demo/src/right-resizable-box.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

MAybe you could remove this line ? because you change to _event ?

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}
Expand All @@ -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;
10 changes: 7 additions & 3 deletions src/components/customAGGrid/customAggrid.style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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': {
Expand Down
3 changes: 2 additions & 1 deletion src/components/customAGGrid/customAggrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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}
Expand Down
165 changes: 83 additions & 82 deletions src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) =>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is this customProps as parameter of the style object ?

({
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<
Expand All @@ -86,7 +90,7 @@ export type CustomAgGridTableProps = Required<
name: string;
makeDefaultRowData: any;
csvProps: unknown;
cssProps: unknown;
cssProps: CSSObject;
};

export function CustomAgGridTable({
Expand All @@ -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);
Expand Down Expand Up @@ -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])}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hum Rules of Hooks : Only call Hooks at the top level, I don't like this useMemo called in the JSX...

{...props}
/>
<BottomRightButtons
name={name}
handleAddRow={handleAddRow}
Expand Down
4 changes: 3 additions & 1 deletion src/components/inputs/reactHookForm/utils/CancelButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
3 changes: 2 additions & 1 deletion src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Loading
Loading