cozy-ui 95.3.0 → 95.4.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [95.4.0](https://github.com/cozy/cozy-ui/compare/v95.3.0...v95.4.0) (2023-10-23)
+
+
+### Bug Fixes
+
+* **ActionsMenu:** ActionsMenuMobileHeader was unnecessarily in DOM on desktop ([805a030](https://github.com/cozy/cozy-ui/commit/805a030))
+* **Menu, ActionsMenu:** The margins between elements were not as expected ([e021fdc](https://github.com/cozy/cozy-ui/commit/e021fdc))
+
+
+### Features
+
+* **ActionsMenuItem:** Add `cozyActionsMenuItem` class to be able to target it ([fcd6dfa](https://github.com/cozy/cozy-ui/commit/fcd6dfa))
+* **ListItem:** Add min heights ([ceaba86](https://github.com/cozy/cozy-ui/commit/ceaba86))
+* **ListItemIcon:** Add `cozyListItemIcon` class to be able to target it ([f0b218f](https://github.com/cozy/cozy-ui/commit/f0b218f))
+
 # [95.3.0](https://github.com/cozy/cozy-ui/compare/v95.2.0...v95.3.0) (2023-10-18)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "95.3.0",
+  "version": "95.4.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/ActionsMenu/ActionsMenuItem.jsx

@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import omit from 'lodash/omit'
+import cx from 'classnames'
 
 import MenuItem from '../MenuItem'
 import ListItem from '../ListItem'
@@ -11,16 +12,27 @@ const cleanPropsForDOM = props => {
   return omit(props, nonDOMProps)
 }
 
-const ActionsMenuItem = forwardRef(({ isListItem, ...props }, ref) => {
-  const Component = isListItem ? ListItem : MenuItem
-  const compProps = cleanPropsForDOM(props)
-
-  return <Component {...compProps} ref={ref} button ellipsis={false} />
-})
+const ActionsMenuItem = forwardRef(
+  ({ isListItem, className, ...props }, ref) => {
+    const Component = isListItem ? ListItem : MenuItem
+    const compProps = cleanPropsForDOM(props)
+
+    return (
+      <Component
+        {...compProps}
+        className={cx(className, { ['cozyActionsMenuItem']: !isListItem })}
+        ref={ref}
+        button
+        ellipsis={false}
+      />
+    )
+  }
+)
 
 ActionsMenuItem.displayName = 'ActionsMenuItem'
 
 ActionsMenuItem.propTypes = {
+  className: PropTypes.string,
   /** Whether the ActionsMenuItem will return a ListItem or MenuItem */
   isListItem: PropTypes.bool
 }

package/react/ActionsMenu/ActionsMenuMobileHeader.jsx

@@ -8,12 +8,8 @@ import useBreakpoints from '../providers/Breakpoints'
 const ActionsMenuMobileHeader = forwardRef(({ children, ...props }, ref) => {
   const { isMobile } = useBreakpoints()
 
-  // To make accessibility work, we need to return a displayed item.
-  // The trick is to return an empty one with no padding to simulate a display none.
-  // Otherwise it will be impossible to use keyboard navigation for example
-  // probably due to the inner workings of Mui
   if (!isMobile) {
-    return <ActionsMenuItem {...props} ref={ref} className="u-p-0" />
+    return null
   }
 
   return (
@@ -26,6 +22,8 @@ const ActionsMenuMobileHeader = forwardRef(({ children, ...props }, ref) => {
   )
 })
 
+ActionsMenuMobileHeader.displayName = 'ActionsMenuMobileHeader'
+
 ActionsMenuMobileHeader.propTypes = {
   children: PropTypes.node
 }

package/react/ActionsMenu/ActionsMenuWrapper.jsx

@@ -44,13 +44,24 @@ const ActionsMenuWrapper = ({
 
   return (
     <Menu {...props} open={open} onClose={onClose}>
-      {React.Children.map(children, child =>
-        React.isValidElement(child)
+      {React.Children.map(children, (child, idx) => {
+        // To keep accessibility, we spread the autofocus on the second child
+        // if the first one is ActionsMenuMobileHeader
+        const firstChild = React.Children.toArray(children)[0]
+        const firstChildComponentName =
+          firstChild?.type?.name || firstChild?.type?.displayName
+        const isFirstChildActionsMenuMobileHeader =
+          firstChildComponentName === 'ActionsMenuMobileHeader'
+        const autoFocus =
+          isFirstChildActionsMenuMobileHeader && idx === 1 ? true : undefined
+
+        return React.isValidElement(child)
           ? React.cloneElement(child, {
+              autoFocus,
               onClick: overrideClick(child.props)
             })
           : null
-      )}
+      })}
     </Menu>
   )
 }

package/react/ActionsMenu/Readme.md

@@ -209,6 +209,9 @@ const toggleMenu = () => setState(state => ({ showMenu: !state.showMenu }))
         </ListItemIcon>
         <ListItemText primary="Attachment" />
       </ActionsMenuItem>
+      <ActionsMenuItem>
+        <ListItemText primary="Item without icon" />
+      </ActionsMenuItem>
 
       <Divider className="u-mv-half" />
 

package/react/ListItemIcon/index.js

@@ -1,9 +1,23 @@
-import ListItemIcon from '@material-ui/core/ListItemIcon'
+import React, { forwardRef } from 'react'
+import MuiListItemIcon from '@material-ui/core/ListItemIcon'
+
+import cx from 'classnames'
 
 export const smallSize = 16
 export const mediumSize = 24
 export const largeSize = 32
 
+// We add a specific class to be able to override the style in makeOverride when used in an other component
+const ListItemIcon = forwardRef(({ className, ...props }, ref) => {
+  return (
+    <MuiListItemIcon
+      {...props}
+      ref={ref}
+      className={cx(className, 'cozyListItemIcon')}
+    />
+  )
+})
+
 ListItemIcon.displayName = 'ListItemIcon'
 
 export default ListItemIcon

package/react/Menu/Readme.md

@@ -76,6 +76,9 @@ const hideMenu = () => setState({ showMenu: false })
       </ListItemIcon>
       <ListItemText primary="Attachment" />
     </MenuItem>
+    <MenuItem onClick={hideMenu}>
+      <ListItemText primary="Item without icon" />
+    </MenuItem>
 
     <Divider className="u-mv-half" />
 

package/react/MuiCozyTheme/makeOverrides.js

@@ -293,25 +293,31 @@ export const makeOverrides = theme => ({
       gap: 16,
       paddingTop: 12,
       paddingBottom: 12,
+      minHeight: 56,
       '&.small': {
         paddingTop: 8,
-        paddingBottom: 8
+        paddingBottom: 8,
+        minHeight: 48
       },
       '&.large': {
         paddingTop: 16,
-        paddingBottom: 16
+        paddingBottom: 16,
+        minHeight: 64
       }
     },
     dense: {
       paddingTop: 8,
       paddingBottom: 8,
+      minHeight: 48,
       '&.small': {
         paddingTop: 4,
-        paddingBottom: 4
+        paddingBottom: 4,
+        minHeight: 40
       },
       '&.large': {
         paddingTop: 12,
-        paddingBottom: 12
+        paddingBottom: 12,
+        minHeight: 56
       }
     }
   },
@@ -347,16 +353,25 @@ export const makeOverrides = theme => ({
   },
   MuiMenuItem: {
     root: {
-      gap: 8,
       maxWidth: 320,
       whiteSpace: 'normal',
       overflow: 'auto',
       paddingTop: 4,
-      paddingBottom: 4
+      paddingBottom: 4,
+      [theme.breakpoints.up('sm')]: {
+        minHeight: 40
+      },
+      '&.cozyActionsMenuItem': {
+        minWidth: 256
+      },
+      '& .cozyListItemIcon': {
+        width: 16,
+        height: 16
+      }
     },
     gutters: {
-      paddingLeft: 8,
-      paddingRight: 8
+      paddingLeft: 16,
+      paddingRight: 16
     }
   },
   MuiFormLabel: {

package/transpiled/react/ActionsMenu/ActionsMenuItem.js

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isListItem"];
+var _excluded = ["isListItem", "className"];
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
+import cx from 'classnames';
 import MenuItem from "cozy-ui/transpiled/react/MenuItem";
 import ListItem from "cozy-ui/transpiled/react/ListItem";
 
@@ -14,11 +16,13 @@ var cleanPropsForDOM = function cleanPropsForDOM(props) {
 
 var ActionsMenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isListItem = _ref.isListItem,
+      className = _ref.className,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var Component = isListItem ? ListItem : MenuItem;
   var compProps = cleanPropsForDOM(props);
   return /*#__PURE__*/React.createElement(Component, _extends({}, compProps, {
+    className: cx(className, _defineProperty({}, 'cozyActionsMenuItem', !isListItem)),
     ref: ref,
     button: true,
     ellipsis: false
@@ -26,6 +30,8 @@ var ActionsMenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 ActionsMenuItem.displayName = 'ActionsMenuItem';
 ActionsMenuItem.propTypes = {
+  className: PropTypes.string,
+
   /** Whether the ActionsMenuItem will return a ListItem or MenuItem */
   isListItem: PropTypes.bool
 };

package/transpiled/react/ActionsMenu/ActionsMenuMobileHeader.js

@@ -11,17 +11,10 @@ var ActionsMenuMobileHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   var _useBreakpoints = useBreakpoints(),
-      isMobile = _useBreakpoints.isMobile; // To make accessibility work, we need to return a displayed item.
-  // The trick is to return an empty one with no padding to simulate a display none.
-  // Otherwise it will be impossible to use keyboard navigation for example
-  // probably due to the inner workings of Mui
-
+      isMobile = _useBreakpoints.isMobile;
 
   if (!isMobile) {
-    return /*#__PURE__*/React.createElement(ActionsMenuItem, _extends({}, props, {
-      ref: ref,
-      className: "u-p-0"
-    }));
+    return null;
   }
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActionsMenuItem, _extends({}, props, {
@@ -31,6 +24,7 @@ var ActionsMenuMobileHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: "u-mv-half"
   }));
 });
+ActionsMenuMobileHeader.displayName = 'ActionsMenuMobileHeader';
 ActionsMenuMobileHeader.propTypes = {
   children: PropTypes.node
 };

package/transpiled/react/ActionsMenu/ActionsMenuWrapper.js

@@ -51,8 +51,17 @@ var ActionsMenuWrapper = function ActionsMenuWrapper(_ref) {
   return /*#__PURE__*/React.createElement(Menu, _extends({}, props, {
     open: open,
     onClose: onClose
-  }), React.Children.map(children, function (child) {
+  }), React.Children.map(children, function (child, idx) {
+    var _firstChild$type, _firstChild$type2;
+
+    // To keep accessibility, we spread the autofocus on the second child
+    // if the first one is ActionsMenuMobileHeader
+    var firstChild = React.Children.toArray(children)[0];
+    var firstChildComponentName = (firstChild === null || firstChild === void 0 ? void 0 : (_firstChild$type = firstChild.type) === null || _firstChild$type === void 0 ? void 0 : _firstChild$type.name) || (firstChild === null || firstChild === void 0 ? void 0 : (_firstChild$type2 = firstChild.type) === null || _firstChild$type2 === void 0 ? void 0 : _firstChild$type2.displayName);
+    var isFirstChildActionsMenuMobileHeader = firstChildComponentName === 'ActionsMenuMobileHeader';
+    var autoFocus = isFirstChildActionsMenuMobileHeader && idx === 1 ? true : undefined;
     return /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {
+      autoFocus: autoFocus,
       onClick: overrideClick(child.props)
     }) : null;
   }));

package/transpiled/react/ListItemIcon/index.js

@@ -1,6 +1,21 @@
-import ListItemIcon from '@material-ui/core/ListItemIcon';
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className"];
+import React, { forwardRef } from 'react';
+import MuiListItemIcon from '@material-ui/core/ListItemIcon';
+import cx from 'classnames';
 export var smallSize = 16;
 export var mediumSize = 24;
-export var largeSize = 32;
+export var largeSize = 32; // We add a specific class to be able to override the style in makeOverride when used in an other component
+
+var ListItemIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(MuiListItemIcon, _extends({}, props, {
+    ref: ref,
+    className: cx(className, 'cozyListItemIcon')
+  }));
+});
 ListItemIcon.displayName = 'ListItemIcon';
 export default ListItemIcon;

package/transpiled/react/MuiCozyTheme/makeOverrides.js

@@ -8,7 +8,7 @@ import { alpha, darken } from "cozy-ui/transpiled/react/styles";
 import { makeAlertColor, makeChipStyleByColor, makeSecondaryButtonStyle, makeTextButtonStyle, makeContainedButtonStyle } from "cozy-ui/transpiled/react/MuiCozyTheme/helpers";
 var SWITCH_BAR_WIDTH = 25;
 export var makeOverrides = function makeOverrides(theme) {
-  var _objectSpread2, _root, _root2;
+  var _root, _objectSpread2, _root2, _root3;
 
   return {
     MuiOutlinedInput: {
@@ -276,25 +276,31 @@ export var makeOverrides = function makeOverrides(theme) {
         gap: 16,
         paddingTop: 12,
         paddingBottom: 12,
+        minHeight: 56,
         '&.small': {
           paddingTop: 8,
-          paddingBottom: 8
+          paddingBottom: 8,
+          minHeight: 48
         },
         '&.large': {
           paddingTop: 16,
-          paddingBottom: 16
+          paddingBottom: 16,
+          minHeight: 64
         }
       },
       dense: {
         paddingTop: 8,
         paddingBottom: 8,
+        minHeight: 48,
         '&.small': {
           paddingTop: 4,
-          paddingBottom: 4
+          paddingBottom: 4,
+          minHeight: 40
         },
         '&.large': {
           paddingTop: 12,
-          paddingBottom: 12
+          paddingBottom: 12,
+          minHeight: 56
         }
       }
     },
@@ -328,17 +334,23 @@ export var makeOverrides = function makeOverrides(theme) {
       }
     },
     MuiMenuItem: {
-      root: {
-        gap: 8,
+      root: (_root = {
         maxWidth: 320,
         whiteSpace: 'normal',
         overflow: 'auto',
         paddingTop: 4,
         paddingBottom: 4
-      },
+      }, _defineProperty(_root, theme.breakpoints.up('sm'), {
+        minHeight: 40
+      }), _defineProperty(_root, '&.cozyActionsMenuItem', {
+        minWidth: 256
+      }), _defineProperty(_root, '& .cozyListItemIcon', {
+        width: 16,
+        height: 16
+      }), _root),
       gutters: {
-        paddingLeft: 8,
-        paddingRight: 8
+        paddingLeft: 16,
+        paddingRight: 16
       }
     },
     MuiFormLabel: {
@@ -435,11 +447,11 @@ export var makeOverrides = function makeOverrides(theme) {
       }), _objectSpread2))
     },
     MuiDialogContent: {
-      root: (_root = {
+      root: (_root2 = {
         padding: '24px 32px 0'
-      }, _defineProperty(_root, theme.breakpoints.down('sm'), {
+      }, _defineProperty(_root2, theme.breakpoints.down('sm'), {
         padding: '24px 16px 0'
-      }), _defineProperty(_root, '&.disableGutters', {
+      }), _defineProperty(_root2, '&.disableGutters', {
         padding: 0,
         '& .dialogContentInner': {
           marginBottom: 0
@@ -449,7 +461,7 @@ export var makeOverrides = function makeOverrides(theme) {
           marginRight: 0,
           marginTop: 0
         }
-      }), _defineProperty(_root, '& .dialogContentInner', {
+      }), _defineProperty(_root2, '& .dialogContentInner', {
         marginBottom: '24px',
         '&.withFluidActions': _defineProperty({}, theme.breakpoints.down('sm'), {
           marginBottom: 0,
@@ -474,20 +486,20 @@ export var makeOverrides = function makeOverrides(theme) {
           marginRight: '-1rem',
           marginTop: '-0.75rem'
         })
-      }), _root)
+      }), _root2)
     },
     MuiDialogActions: {
-      root: (_root2 = {
+      root: (_root3 = {
         margin: '16px 32px',
         padding: 0
-      }, _defineProperty(_root2, theme.breakpoints.down('sm'), {
+      }, _defineProperty(_root3, theme.breakpoints.down('sm'), {
         margin: '8px 16px',
         '& button': {
           flexGrow: 1
         }
-      }), _defineProperty(_root2, '&.dialogActionsFluid', {
+      }), _defineProperty(_root3, '&.dialogActionsFluid', {
         margin: '24px 0 0'
-      }), _defineProperty(_root2, '&.columnLayout', {
+      }), _defineProperty(_root3, '&.columnLayout', {
         display: 'flex',
         flexDirection: 'column-reverse',
         '& button': {
@@ -497,9 +509,9 @@ export var makeOverrides = function makeOverrides(theme) {
             marginBottom: '8px'
           }
         }
-      }), _defineProperty(_root2, '&:not(.columnLayout) > :not(:first-child):not(:first-child)', {
+      }), _defineProperty(_root3, '&:not(.columnLayout) > :not(:first-child):not(:first-child)', {
         marginLeft: 4
-      }), _root2)
+      }), _root3)
     },
     MuiDivider: {
       inset: {