New DS core components: Menu & MenuItem

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Not released
 
+- New DS core components: Menu & MenuItem [#828](https://github.com/CartoDB/carto-react/pull/828)
+
 ## 3.0.0
 
 ### 3.0.0-alpha.9 (2024-05-29)
@@ -16,7 +18,7 @@
 
 ### 3.0.0-alpha.7 (2024-04-16)
 
--  Update Deck GL v9 and removed dropping features functionality [#838](https://github.com/CartoDB/carto-react/pull/838)
+- Update Deck GL v9 and removed dropping features functionality [#838](https://github.com/CartoDB/carto-react/pull/838)
 
 ## 2.5
 
@@ -26,8 +28,8 @@
 
 ### 2.5.2 (2024-04-10)
 
--  configurable timeseries y axis [#861](https://github.com/CartoDB/carto-react/pull/861)
--  configurable histogram y axis [#860](https://github.com/CartoDB/carto-react/pull/860)
+- configurable timeseries y axis [#861](https://github.com/CartoDB/carto-react/pull/861)
+- configurable histogram y axis [#860](https://github.com/CartoDB/carto-react/pull/860)
 
 ### 2.5.1 (2024-04-03)
 

packages/react-ui/src/components/atoms/SelectField.js

@@ -25,6 +25,9 @@ const StyledSelect = styled(Select)(({ theme }) => ({
   },
   '& .MuiSelect-select .MuiMenuItem-root:hover': {
     backgroundColor: 'transparent'
+  },
+  '&.MuiInputBase-root .MuiSelect-select.MuiSelect-multiple': {
+    paddingRight: theme.spacing(7)
   }
 }));
 

packages/react-ui/src/components/molecules/Menu.d.ts

@@ -0,0 +1,10 @@
+import { MenuProps as MuiMenuProps } from '@mui/material';
+
+export type MenuProps = MuiMenuProps & {
+  extended?: boolean;
+  width?: string;
+  height?: string;
+};
+
+declare const Menu: (props: MenuProps) => JSX.Element;
+export default Menu;

packages/react-ui/src/components/molecules/Menu.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Menu as MuiMenu, styled } from '@mui/material';
+
+const StyledMenu = styled(MuiMenu, {
+  shouldForwardProp: (prop) => !['extended', 'width', 'height'].includes(prop)
+})(({ extended, width, height, theme }) => ({
+  ...(extended && {
+    '.MuiMenuItem-root': {
+      minHeight: theme.spacing(6)
+    }
+  }),
+  '.MuiMenu-paper': {
+    ...(width && {
+      width: width,
+      minWidth: width
+    }),
+    ...(height && {
+      maxHeight: height
+    })
+  }
+}));
+
+const Menu = ({ extended, width, height, children, ...otherProps }) => {
+  return (
+    <StyledMenu extended={extended} width={width} height={height} {...otherProps}>
+      {children}
+    </StyledMenu>
+  );
+};
+
+Menu.propTypes = {
+  extended: PropTypes.bool,
+  width: PropTypes.string,
+  height: PropTypes.string
+};
+
+export default Menu;

packages/react-ui/src/components/molecules/MenuItem.d.ts

@@ -0,0 +1,11 @@
+import { MenuItemProps as MuiMenuItemProps } from '@mui/material';
+
+export type MenuItemProps = MuiMenuItemProps & {
+  subtitle?: boolean;
+  destructive?: boolean;
+  extended?: boolean;
+  iconColor?: 'primary' | 'default';
+};
+
+declare const MenuItem: (props: MenuItemProps) => JSX.Element;
+export default MenuItem;

packages/react-ui/src/components/molecules/MenuItem.js

@@ -0,0 +1,117 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MenuItem as MuiMenuItem, styled } from '@mui/material';
+
+const StyledMenuItem = styled(MuiMenuItem, {
+  shouldForwardProp: (prop) =>
+    !['subtitle', 'destructive', 'extended', 'iconColor'].includes(prop)
+})(({ subtitle, destructive, extended, iconColor, theme }) => ({
+  ...(subtitle && {
+    pointerEvents: 'none',
+    columnGap: 0,
+    ...theme.typography.caption,
+    fontWeight: 500,
+    color: theme.palette.text.secondary,
+
+    '&.MuiMenuItem-root': {
+      minHeight: theme.spacing(3),
+      paddingTop: 0,
+      paddingBottom: 0,
+
+      '&:not(:first-of-type)': {
+        minHeight: theme.spacing(5),
+        marginTop: theme.spacing(1),
+        paddingTop: theme.spacing(1),
+        borderTop: `1px solid ${theme.palette.divider}`
+      }
+    }
+  }),
+
+  ...(iconColor === 'primary' && {
+    '.MuiListItemIcon-root svg path': {
+      fill: theme.palette.text.primary
+    },
+    '&.Mui-selected .MuiListItemIcon-root svg path': {
+      fill: theme.palette.primary.main
+    }
+  }),
+  ...(destructive && {
+    color: theme.palette.error.main,
+
+    '.MuiTypography-root': {
+      color: theme.palette.error.main
+    },
+    'svg, & .MuiSvgIcon-root': {
+      color: theme.palette.error.main
+    },
+    '.MuiListItemIcon-root svg path': {
+      fill: theme.palette.error.main
+    },
+    '&.Mui-selected .MuiListItemIcon-root svg path': {
+      fill: theme.palette.error.main
+    },
+
+    '&:hover': {
+      backgroundColor: theme.palette.error.relatedLight
+    },
+    '&.Mui-selected': {
+      color: theme.palette.error.main,
+
+      '.MuiTypography-root': {
+        color: theme.palette.error.main
+      },
+      'svg, & .MuiSvgIcon-root': {
+        color: theme.palette.error.main
+      }
+    },
+
+    '&.Mui-disabled': {
+      color: theme.palette.text.disabled,
+
+      '.MuiTypography-root': {
+        color: theme.palette.text.disabled
+      },
+      svg: {
+        color: theme.palette.text.disabled
+      }
+    }
+  }),
+  ...(extended && {
+    '&.MuiMenuItem-root': {
+      minHeight: theme.spacing(6)
+    }
+  })
+}));
+
+const MenuItem = ({
+  subtitle,
+  destructive,
+  extended,
+  children,
+  iconColor,
+  ...otherProps
+}) => {
+  return (
+    <StyledMenuItem
+      subtitle={subtitle}
+      destructive={destructive}
+      extended={extended}
+      iconColor={iconColor}
+      {...otherProps}
+    >
+      {children}
+    </StyledMenuItem>
+  );
+};
+
+MenuItem.defaultProps = {
+  iconColor: 'primary'
+};
+MenuItem.propTypes = {
+  subtitle: PropTypes.bool,
+  destructive: PropTypes.bool,
+  extended: PropTypes.bool,
+  iconColor: PropTypes.oneOf(['primary', 'default'])
+};
+
+export default MenuItem;

packages/react-ui/src/components/molecules/MenuList.d.ts

@@ -0,0 +1,10 @@
+import { MenuListProps as MuiMenuListProps } from '@mui/material';
+
+export type MenuListProps = MuiMenuListProps & {
+  extended?: boolean;
+  width?: string;
+  height?: string;
+};
+
+declare const MenuList: (props: MenuListProps) => JSX.Element;
+export default MenuList;

packages/react-ui/src/components/molecules/MenuList.js

@@ -0,0 +1,49 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { MenuList as MuiMenuList, styled } from '@mui/material';
+
+const StyledMenuList = styled(MuiMenuList, {
+  shouldForwardProp: (prop) => !['extended', 'width', 'height'].includes(prop)
+})(({ extended, width, height, theme }) => ({
+  ...(extended && {
+    '.MuiMenuItem-root': {
+      minHeight: theme.spacing(6)
+    }
+  }),
+  '&.MuiList-root': {
+    ...(width && {
+      width: width,
+      minWidth: width
+    }),
+    ...(height && {
+      maxHeight: height
+    })
+  }
+}));
+
+const MenuList = forwardRef(
+  ({ extended, width, height, children, ...otherProps }, ref) => {
+    // forwardRef needed to be able to hold a reference, in this way it can be a child for some Mui components, like Tooltip
+    // https://mui.com/material-ui/guides/composition/#caveat-with-refs
+
+    return (
+      <StyledMenuList
+        extended={extended}
+        width={width}
+        height={height}
+        ref={ref}
+        {...otherProps}
+      >
+        {children}
+      </StyledMenuList>
+    );
+  }
+);
+
+MenuList.propTypes = {
+  extended: PropTypes.bool,
+  width: PropTypes.string,
+  height: PropTypes.string
+};
+
+export default MenuList;

packages/react-ui/src/components/molecules/MultipleSelectField/Filters.js

@@ -1,59 +1,54 @@
 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,
+  bottom: 0,
+  right: 0,
+  zIndex: 2,
+  marginBottom: theme.spacing(1),
+  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: theme.spacing(6),
+  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 (
     <FiltersRoot>
       <LinkFilter
-        variant='caption'
+        variant='body2'
+        color='textPrimary'
         component='button'
-        disabled={areAllSelected || selectAllDisabled}
+        underline='none'
+        disabled={selectAllDisabled}
         onClick={selectAll}
+        tabIndex={0}
       >
+        <Checkbox
+          checked={areAllSelected}
+          indeterminate={areAnySelected && !areAllSelected}
+          disabled={selectAllDisabled}
+        />
         {intlConfig.formatMessage({ id: 'c4r.form.selectAll' })}
       </LinkFilter>
-      <Typography variant='caption' weight='strong' color='text.hint'>
-        •
-      </Typography>
-      <LinkFilter
-        variant='caption'
-        component='button'
-        onClick={unselectAll}
-        disabled={!areAnySelected}
-      >
-        {intlConfig.formatMessage({
-          id: 'c4r.form.selectNone'
-        })}
-      </LinkFilter>
     </FiltersRoot>
   );
 }