diff --git a/packages/react-ui/src/components/molecules/MultipleSelectField/Filters.js b/packages/react-ui/src/components/molecules/MultipleSelectField/Filters.js
index 6f3fc1707..dd118130a 100644
--- a/packages/react-ui/src/components/molecules/MultipleSelectField/Filters.js
+++ b/packages/react-ui/src/components/molecules/MultipleSelectField/Filters.js
@@ -1,58 +1,52 @@
import React from 'react';
import { useIntl } from 'react-intl';
import useImperativeIntl from '../../../hooks/useImperativeIntl';
-import { Box, Link, styled } from '@mui/material';
-import Typography from '../../atoms/Typography';
+import { Box, Checkbox, Link, styled } from '@mui/material';
const FiltersRoot = styled(Box)(({ theme }) => ({
- display: 'flex',
- alignItems: 'center',
- gap: theme.spacing(0.5),
- marginLeft: 'auto',
- pointerEvents: 'auto'
+ position: 'sticky',
+ top: 0,
+ left: 0,
+ right: 0,
+ zIndex: 1,
+ height: theme.spacing(4),
+ marginBottom: theme.spacing(1),
+ padding: theme.spacing(1, 0),
+ backgroundColor: theme.palette.background.paper,
+ borderBottom: `1px solid ${theme.palette.divider}`
}));
const LinkFilter = styled(Link)(({ disabled, theme }) => ({
+ display: 'flex',
+ alignItems: 'center',
+ gap: theme.spacing(1),
+ width: '100%',
+ height: '100%',
+ padding: theme.spacing(0.5, 1.5),
+ textAlign: 'initial',
+
...(disabled && { pointerEvents: 'none', color: theme.palette.text.disabled })
}));
-function Filters({
- showFilters,
- areAllSelected,
- areAnySelected,
- selectAll,
- unselectAll,
- selectAllDisabled
-}) {
+function Filters({ areAllSelected, areAnySelected, selectAll, selectAllDisabled }) {
const intl = useIntl();
const intlConfig = useImperativeIntl(intl);
- if (!showFilters) {
- return null;
- }
-
return (
- {intlConfig.formatMessage({ id: 'c4r.form.selectAll' })}
-
-
- •
-
-
- {intlConfig.formatMessage({
- id: 'c4r.form.selectNone'
- })}
+
+ {intlConfig.formatMessage({ id: 'c4r.form.selectAll' })}
);
diff --git a/packages/react-ui/src/components/molecules/MultipleSelectField/MultipleSelectField.js b/packages/react-ui/src/components/molecules/MultipleSelectField/MultipleSelectField.js
index 2a64a20a4..dfb852628 100644
--- a/packages/react-ui/src/components/molecules/MultipleSelectField/MultipleSelectField.js
+++ b/packages/react-ui/src/components/molecules/MultipleSelectField/MultipleSelectField.js
@@ -2,7 +2,16 @@ import React, { forwardRef, useMemo } from 'react';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import useImperativeIntl from '../../../hooks/useImperativeIntl';
-import { Checkbox, ListItemText, MenuItem, Tooltip, styled } from '@mui/material';
+import {
+ Checkbox,
+ IconButton,
+ InputAdornment,
+ ListItemText,
+ MenuItem,
+ Tooltip,
+ styled
+} from '@mui/material';
+import { Cancel } from '@mui/icons-material';
import SelectField from '../../atoms/SelectField';
import Typography from '../../atoms/Typography';
@@ -20,6 +29,20 @@ const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
}
}));
+const UnselectButton = styled(InputAdornment)(({ theme }) => ({
+ display: 'none',
+ position: 'absolute',
+ top: theme.spacing(2),
+ right: theme.spacing(3.5),
+
+ '.MuiInputBase-root:hover &, .MuiInputBase-root.Mui-focused &': {
+ display: 'flex'
+ },
+ '.MuiSvgIcon-root': {
+ color: theme.palette.text.hint
+ }
+}));
+
const MultipleSelectField = forwardRef(
(
{
@@ -121,17 +144,25 @@ const MultipleSelectField = forwardRef(
renderValue={() => renderValue}
onChange={handleChange}
size={size}
- labelSecondary={
+ endAdornment={
+ showFilters &&
+ areAnySelected && (
+
+
+
+
+
+ )
+ }
+ >
+ {showFilters && (
- }
- >
+ )}
{options?.map((option) => {
const item = (
({
+ '.MuiMenuItem-root': {
+ paddingRight: theme.spacing(3)
+ }
})
}
},
@@ -81,7 +86,7 @@ export const navigationOverrides = {
backgroundColor: theme.palette.action.disabledBackground
}
},
- '& .MuiCheckbox-root, & > .MuiSvgIcon-root': {
+ '& > .MuiSvgIcon-root': {
marginRight: theme.spacing(1)
},
'.MuiMenu-paper-sizeSmall &': {
@@ -161,13 +166,11 @@ export const navigationOverrides = {
MuiListItemIcon: {
styleOverrides: {
root: ({ theme }) => ({
- marginRight: theme.spacing(1),
-
'& .MuiSvgIcon-root': {
fontSize: ICON_SIZE_LARGE
},
'.MuiMenuItem-root.MuiButtonBase-root &': {
- minWidth: theme.spacing(2.25)
+ minWidth: ICON_SIZE_MEDIUM
}
})
}
diff --git a/packages/react-ui/storybook/stories/molecules/MiltipleSelectField.stories.js b/packages/react-ui/storybook/stories/molecules/MiltipleSelectField.stories.js
index 6b1c3d915..57c1ae507 100644
--- a/packages/react-ui/storybook/stories/molecules/MiltipleSelectField.stories.js
+++ b/packages/react-ui/storybook/stories/molecules/MiltipleSelectField.stories.js
@@ -108,6 +108,26 @@ const PlaygroundTemplate = ({ ...rest }) => {
{
label: 'Fifty',
value: 'Fifty'
+ },
+ {
+ label: 'Sixty',
+ value: 'Sixty'
+ },
+ {
+ label: 'Seventy',
+ value: 'Seventy'
+ },
+ {
+ label: 'Eighty',
+ value: 'Eighty'
+ },
+ {
+ label: 'Ninety',
+ value: 'Ninety'
+ },
+ {
+ label: 'Hundred',
+ value: 'Hundred'
}
];
diff --git a/packages/react-ui/storybook/stories/organisms/Menu.stories.js b/packages/react-ui/storybook/stories/organisms/Menu.stories.js
index 27cbad680..2273654c1 100644
--- a/packages/react-ui/storybook/stories/organisms/Menu.stories.js
+++ b/packages/react-ui/storybook/stories/organisms/Menu.stories.js
@@ -115,17 +115,28 @@ const TemplateMenuItemStates = ({ label, ...args }) => {
-
+
+
+
+
+
+
@@ -388,6 +399,9 @@ const DocTemplate = () => {
const commonArgs = { label: 'Label' };
+export const Playground = TemplateMenu.bind({});
+Playground.args = { ...commonArgs };
+
export const Guide = DocTemplate.bind({});
export const Dense = TemplateMenu.bind({});
@@ -409,7 +423,11 @@ export const Subtitle = TemplateMenu.bind({});
Subtitle.args = { ...commonArgs, subtitle: true };
export const TextOverflow = TemplateMenu.bind({});
-TextOverflow.args = { ...commonArgs, label: 'Long text that will be truncated' };
+TextOverflow.args = {
+ ...commonArgs,
+ width: '200px',
+ label: 'Long text that will be truncated'
+};
export const CustomWidth = TemplateMenu.bind({});
CustomWidth.args = { ...commonArgs, width: '400px' };