diff --git a/src/components/ExpendableGroup/expendable-group.tsx b/src/components/ExpendableGroup/expendable-group.tsx
new file mode 100644
index 00000000..d03234e5
--- /dev/null
+++ b/src/components/ExpendableGroup/expendable-group.tsx
@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/.
+ */
+import {
+ Accordion,
+ AccordionDetails,
+ AccordionSummary,
+ Theme,
+ Typography,
+} from '@mui/material';
+import React, { PropsWithChildren, ReactNode, useState } from 'react';
+import { ExpandCircleDown, ExpandMore } from '@mui/icons-material';
+import { FormattedMessage } from 'react-intl';
+
+export const styles = {
+ accordion: (theme: Theme) => ({
+ '&:before': {
+ display: 'none',
+ },
+ background: 'none',
+ }),
+ accordionSummary: (theme: Theme) => ({
+ flexDirection: 'row-reverse', // place icon at the left
+ padding: 0, // reset default left right space in summary
+ '.MuiAccordionSummary-content': {
+ paddingLeft: 1, // align text label
+ },
+ '&:not(.Mui-expanded)': {
+ // show a fake divider at the bottom of summary
+ borderBottom: '1px solid',
+ borderColor: theme.palette.divider,
+ },
+
+ '& .MuiAccordionSummary-expandIconWrapper': {
+ transform: 'rotate(-90deg)',
+ },
+ '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+ transform: 'rotate(0deg)',
+ },
+ }),
+ accordionDetails: (theme: Theme) => ({
+ padding: 0, // reset default left right space in details
+ }),
+};
+
+interface ExpandableGroupProps extends PropsWithChildren {
+ renderHeader: ReactNode;
+}
+
+const ExpendableGroup = ({ renderHeader, children }: ExpandableGroupProps) => {
+ const [mouseHover, setMouseHover] = useState(false);
+
+ return (
+
+ : }
+ onMouseEnter={(event) => setMouseHover(true)}
+ onMouseLeave={(event) => setMouseHover(false)}
+ >
+ {typeof renderHeader === 'string' ? (
+
+
+
+ ) : (
+ renderHeader
+ )}
+
+
+ {children}
+
+
+ );
+};
+
+export default ExpendableGroup;
diff --git a/src/components/ExpendableGroup/index.ts b/src/components/ExpendableGroup/index.ts
new file mode 100644
index 00000000..0679f19e
--- /dev/null
+++ b/src/components/ExpendableGroup/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 } from './expendable-group';
diff --git a/src/components/filter/filter-form.tsx b/src/components/filter/filter-form.tsx
index c7298807..5e9e6dc5 100644
--- a/src/components/filter/filter-form.tsx
+++ b/src/components/filter/filter-form.tsx
@@ -12,13 +12,14 @@ import ExplicitNamingFilterForm from './explicit-naming/explicit-naming-filter-f
import React, { FunctionComponent, useEffect } from 'react';
import { useFormContext, useWatch } from 'react-hook-form';
import ExpertFilterForm from './expert/expert-filter-form';
-import { Box, Grid } from '@mui/material';
-import RadioInput from '../inputs/react-hook-form/radio-input';
+import { Grid } from '@mui/material';
import { ElementType } from '../../utils/ElementType';
import { UUID } from 'crypto';
import { elementExistsType } from './criteria-based/criteria-based-filter-edition-dialog';
-import ExpandingTextField from '../inputs/react-hook-form/ExpandingTextField';
import { FilterType } from './constants/filter-constants';
+import ExpendableGroup from '../ExpendableGroup';
+import RadioInput from '../inputs/react-hook-form/radio-input';
+import ExpandingTextField from '../inputs/react-hook-form/ExpandingTextField';
interface FilterFormProps {
creation?: boolean;
@@ -64,14 +65,13 @@ export const FilterForm: FunctionComponent = (props) => {
{props.creation && (
<>
-
+
-
+
{!props.sourceFilterForExplicitNamingConversion && (
diff --git a/src/index.ts b/src/index.ts
index 7104ecc9..16d925d2 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -20,6 +20,7 @@ export { default as ReportViewerDialog } from './components/ReportViewerDialog';
export { default as OverflowableText } from './components/OverflowableText';
export { default as ElementSearchDialog } from './components/ElementSearchDialog';
export { default as FlatParameters } from './components/FlatParameters';
+export { default as ExpandableGroup } from './components/ExpendableGroup';
export { default as MultipleSelectionDialog } from './components/MultipleSelectionDialog';
export { default as CustomMuiDialog } from './components/dialogs/custom-mui-dialog';
export { default as DescriptionModificationDialog } from './components/dialogs/description-modification-dialog';