cozy-ui 84.0.0 → 84.1.1

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+## [84.1.1](https://github.com/cozy/cozy-ui/compare/v84.1.0...v84.1.1) (2023-04-27)
+
+
+### Bug Fixes
+
+* use includes() not startsWith() in animation ([3c71bc6](https://github.com/cozy/cozy-ui/commit/3c71bc6))
+
+# [84.1.0](https://github.com/cozy/cozy-ui/compare/v84.0.0...v84.1.0) (2023-04-27)
+
+
+### Bug Fixes
+
+* **ActionsMenuWrapper:** Use now React.isValidElement on children and... ([68c5b60](https://github.com/cozy/cozy-ui/commit/68c5b60))
+* **ListItem:** LastChild should be undefined in some case without crash ([0686bb3](https://github.com/cozy/cozy-ui/commit/0686bb3))
+
+
+### Features
+
+* **ActionsItems:** Rename prop `isEnabled` in `disabled` ([f4bcb0f](https://github.com/cozy/cozy-ui/commit/f4bcb0f))
+* **ActionsMenuItem:** Force `ellipsis` [secure] on MenuItem and ListItem ([8a1725e](https://github.com/cozy/cozy-ui/commit/8a1725e))
+* **ActionsMenuItem:** Set `ellipsis` to [secure] for ListItem chlidren ([cacf53c](https://github.com/cozy/cozy-ui/commit/cacf53c))
+* **ListItem:** Add `ellipsis` prop to set ListItemText ellipsis ([135ef2a](https://github.com/cozy/cozy-ui/commit/135ef2a))
+* **MenuItem:** Change maxWidth and whiteSpace ([e845f10](https://github.com/cozy/cozy-ui/commit/e845f10))
+* **MenuItem:** Use ListItem from cozy-ui and not from Mui ([607315f](https://github.com/cozy/cozy-ui/commit/607315f))
+
 # [84.0.0](https://github.com/cozy/cozy-ui/compare/v83.4.0...v84.0.0) (2023-04-26)
 
 

package/package.json

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

package/react/ActionsMenu/ActionsItems.jsx

@@ -18,7 +18,7 @@ const ActionsItems = forwardRef(
       const actionName = getActionName(actionObject)
       const actionDefinition = Object.values(actionObject)[0]
 
-      const { Component: ActionComponent, action, isEnabled } = actionDefinition
+      const { Component: ActionComponent, action, disabled } = actionDefinition
 
       const handleClick = () => {
         action && action(doc, { client, t, isLast })
@@ -31,8 +31,8 @@ const ActionsItems = forwardRef(
           {...props}
           ref={ref}
           key={actionName + idx}
-          isEnabled={isEnabled}
           doc={doc}
+          disabled={disabled}
           onClick={handleClick}
         />
       )

package/react/ActionsMenu/ActionsMenuItem.jsx

@@ -7,7 +7,7 @@ import ListItem from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItem'
 const ActionsMenuItem = forwardRef(({ isListItem, ...props }, ref) => {
   const Component = isListItem ? ListItem : MenuItem
 
-  return <Component {...props} ref={ref} button />
+  return <Component {...props} ref={ref} button ellipsis={false} />
 })
 
 ActionsMenuItem.propTypes = {

package/react/ActionsMenu/ActionsMenuWrapper.jsx

@@ -8,7 +8,13 @@ import isTesting from '../helpers/isTesting'
 import Paper from '../Paper'
 import { useActionMenuEffects } from '../ActionMenu/ActionMenuEffects'
 
-const ActionsMenuWrapper = ({ children, autoClose, onClose, ...props }) => {
+const ActionsMenuWrapper = ({
+  children,
+  autoClose,
+  open,
+  onClose,
+  ...props
+}) => {
   const { isMobile } = useBreakpoints()
 
   useActionMenuEffects()
@@ -18,16 +24,18 @@ const ActionsMenuWrapper = ({ children, autoClose, onClose, ...props }) => {
     autoClose && onClose?.()
   }
 
-  if (isMobile) {
+  if (isMobile && open) {
     return (
       <BottomSheet skipAnimation={isTesting()} backdrop onClose={onClose}>
         <Paper square>
           {React.Children.map(children, child =>
-            React.cloneElement(child, {
-              isListItem: true,
-              size: 'small',
-              onClick: overrideClick(child.props)
-            })
+            React.isValidElement(child)
+              ? React.cloneElement(child, {
+                  isListItem: true,
+                  size: 'small',
+                  onClick: overrideClick(child.props)
+                })
+              : null
           )}
         </Paper>
       </BottomSheet>
@@ -35,11 +43,13 @@ const ActionsMenuWrapper = ({ children, autoClose, onClose, ...props }) => {
   }
 
   return (
-    <Menu {...props} onClose={onClose}>
+    <Menu {...props} open={open} onClose={onClose}>
       {React.Children.map(children, child =>
-        React.cloneElement(child, {
-          onClick: overrideClick(child.props)
-        })
+        React.isValidElement(child)
+          ? React.cloneElement(child, {
+              onClick: overrideClick(child.props)
+            })
+          : null
       )}
     </Menu>
   )

package/react/ActionsMenu/Readme.md

@@ -6,7 +6,16 @@ A header `ActionsMenuMobileHeader` can be used to provide context on the menu ac
 
 ### With an automatic creation of actions
 
-Use `makeActions` method and create (or use the predefined actions) to build the actions to pass to `ActionsMenu` high level component.
+Use `makeActions` method and create (or use the predefined actions) to build the actions to pass to `ActionsMenu` high level component. The method `makeActions` takes `actions` array as first argument, and `options` as second argument. `options` are then passed to the `actions` component as `props`.
+
+```bash
+const action1 = ({ option1, option2 }) => ({
+  name: action1,
+  Component: props => <SomeComponent {...props} />
+})
+
+const actions = makeActions([action1, action2], { option1, option2 })
+```
 
 #### How to create actions
 
@@ -14,13 +23,14 @@ An action is a simple function that returns an object with specific keys:
 
 * **name** : `<string>` – Action's name
 * **action** : `<func>` – Method triggered when clicking the action
-* **isEnabled** : `<bool>` – Used to add `disable` effect (the action is still displayed)
+* **disabled** : `<bool>` – Used to add `disable` effect (the action is still displayed)
 * **Component** : `<func>` – The returned component that manages the display
 
 ```bash
-const expl = () => ({
+const expl = makeActionOptions => ({
   name: 'expl',
   action: () => {},
+  disabled: false,
   Component: props => {
     return <SomeComponent {...props} />
   }
@@ -65,7 +75,7 @@ const customAction = () => ({
         <ListItemIcon>
           <Icon icon={FileIcon} />
         </ListItemIcon>
-        <ListItemText primary="This is a custom action" />
+        <ListItemText primary="This is a custom action, with a very long text to show how it is displayed" />
       </ActionsMenuItem>
     )
   })
@@ -84,27 +94,25 @@ const actions = makeActions([ modify, viewInContacts, divider, call, smsTo, emai
   >
     Show action menu
   </DropdownButton>
-  {state.showMenu && (
-    <ActionsMenu
-      ref={anchorRef}
-      open={state.showMenu}
-      doc={doc}
-      actions={actions}
-      anchorOrigin={{
-        vertical: 'bottom',
-        horizontal: 'left'
-      }}
-      autoClose
-      onClose={hideMenu}
-    >
-      <ActionsMenuMobileHeader>
-        <ListItemIcon>
-          <Icon icon={FileTypeText} size={32} />
-        </ListItemIcon>
-        <ListItemText primary="Title" primaryTypographyProps={{ variant: 'h6' }} />
-      </ActionsMenuMobileHeader>
-    </ActionsMenu>
-  )}
+  <ActionsMenu
+    ref={anchorRef}
+    open={state.showMenu}
+    doc={doc}
+    actions={actions}
+    anchorOrigin={{
+      vertical: 'bottom',
+      horizontal: 'left'
+    }}
+    autoClose
+    onClose={hideMenu}
+  >
+    <ActionsMenuMobileHeader>
+      <ListItemIcon>
+        <Icon icon={FileTypeText} size={32} />
+      </ListItemIcon>
+      <ListItemText primary="Title" primaryTypographyProps={{ variant: 'h6' }} />
+    </ActionsMenuMobileHeader>
+  </ActionsMenu>
 </DemoProvider>
 ```
 

package/react/MenuItem/index.js

@@ -1,3 +1,16 @@
+import React, { forwardRef } from 'react'
 import MuiMenuItem from '@material-ui/core/MenuItem'
 
-export default MuiMenuItem
+import ListItem, { LitItemPropTypes } from '../MuiCozyTheme/ListItem'
+
+const MenuItem = forwardRef((props, ref) => {
+  return (
+    <MuiMenuItem ref={ref} component={ListItem} gutters="disabled" {...props} />
+  )
+})
+
+MenuItem.displayName = 'MenuItem'
+
+MenuItem.propTypes = LitItemPropTypes
+
+export default MenuItem

package/react/MuiCozyTheme/ListItem/Readme.md

@@ -30,7 +30,8 @@ const initialVariants = [{
   smallIcons: false,
   multipleLeftIcons: false,
   multipleRightIcons: false,
-  withActions: false
+  withActions: false,
+  ellipsis: true
 }]
 
 ;
@@ -39,14 +40,15 @@ const initialVariants = [{
   {variant => {
     const gutters = variant.disabledGutters ? 'disabled' : variant.doubleGutters ? 'double' : 'default'
     const size = variant.small ? 'small' : variant.large ? 'large' : 'medium'
-    const props = { gutters, size }
+    const listItemProps = { gutters, size, ellipsis: variant.ellipsis }
+
     const iconSize = variant.smallIcons ? 8 : variant.bigIcons ? 32 : 16
     const text = variant.longText ? content.ada.short : "I'm a primary text"
 
     return (
       <>
         <List dense={variant.dense} subheader={<ListSubheader>Section 1</ListSubheader>}>
-          <ListItem {...props} button>
+          <ListItem {...listItemProps} button>
             <ListItemIcon>
               <Icon icon={CommentIcon} size={iconSize} />
             </ListItemIcon>

package/react/MuiCozyTheme/ListItem/index.js

@@ -44,9 +44,9 @@ const useGutters = ({ gutters, ...props }) => {
   const guttersValue = gutters === 'double' ? 32 : 16
 
   const lastChild = getLastChild(props)
-  const isLastChildListItemIcon = getComponentName(lastChild).includes(
-    'ListItemIcon'
-  )
+  const isLastChildListItemIcon = lastChild
+    ? getComponentName(lastChild).includes('ListItemIcon')
+    : false
 
   const gutterRight = isLastChildListItemIcon ? guttersValue - 8 : guttersValue
 
@@ -54,7 +54,8 @@ const useGutters = ({ gutters, ...props }) => {
 }
 
 // Add margin on ListItemSecondaryAction when gutters are double
-const useOverridenChildren = ({ gutters, ...props }) => {
+// Propagates ellipsis prop to ListItemText
+const useOverridenChildren = ({ gutters, ellipsis, ...props }) => {
   const children = getChildren(props)
   const childrenCount = getChildrenCount(props)
 
@@ -62,12 +63,18 @@ const useOverridenChildren = ({ gutters, ...props }) => {
     const isLastChild = index === childrenCount - 1
     const isSecondaryAction =
       (isLastChild && isMuiElement(child, ['ListItemSecondaryAction'])) || false
+    const isListItemText = getComponentName(child).includes('ListItemText')
 
     if (isSecondaryAction && gutters === 'double') {
       return React.cloneElement(child, {
         className: `${child.props.className} u-mr-1`
       })
     }
+
+    if (isListItemText) {
+      return React.cloneElement(child, { ellipsis })
+    }
+
     return child
   })
 }
@@ -99,9 +106,12 @@ ListItem.defaultProps = {
   size: 'medium'
 }
 
-ListItem.propTypes = {
+export const LitItemPropTypes = {
   gutters: PropTypes.oneOf(['disabled', 'double', 'default']),
-  size: PropTypes.oneOf(['small', 'medium', 'large'])
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  ellipsis: PropTypes.bool
 }
 
+ListItem.propTypes = LitItemPropTypes
+
 export default ListItem

package/react/MuiCozyTheme/makeOverrides.js

@@ -561,7 +561,9 @@ const makeOverrides = theme => ({
   MuiMenuItem: {
     root: {
       gap: 8,
-      minWidth: 256,
+      maxWidth: 320,
+      whiteSpace: 'normal',
+      overflow: 'auto',
       paddingTop: 4,
       paddingBottom: 4
     },

package/react/SquareAppIcon/index.jsx

@@ -78,7 +78,7 @@ export const SquareAppIcon = ({
   const [animationState, setAnimationState] = useState()
 
   const handleAnimationEnd = e => {
-    if (e.animationName.startsWith('end')) setAnimationState()
+    if (e.animationName.includes('end')) setAnimationState()
   }
 
   useEffect(() => {

package/react/utils/react.js

@@ -6,16 +6,20 @@ export const getComponentName = component => {
 }
 
 export const getChildren = props => {
-  return Children.toArray(props.children)
+  const children = Children.toArray(props.children)
+  return Children.count(children) > 0 ? children : null
 }
 
 export const getChildrenCount = props => {
   const children = getChildren(props)
-  return children.length
+  return Children.count(children) || null
 }
 
 export const getLastChild = props => {
   const children = getChildren(props)
+
+  if (!children) return null
+
   const lastChild = children[children.length - 1]
 
   return lastChild.type === Fragment

package/transpiled/react/ActionsMenu/ActionsItems.js

@@ -27,7 +27,7 @@ var ActionsItems = /*#__PURE__*/forwardRef(function (_ref, ref) {
     var actionDefinition = Object.values(actionObject)[0];
     var ActionComponent = actionDefinition.Component,
         action = actionDefinition.action,
-        isEnabled = actionDefinition.isEnabled;
+        disabled = actionDefinition.disabled;
 
     var handleClick = function handleClick() {
       action && action(doc, {
@@ -42,8 +42,8 @@ var ActionsItems = /*#__PURE__*/forwardRef(function (_ref, ref) {
     return /*#__PURE__*/React.createElement(ActionComponent, _extends({}, props, {
       ref: ref,
       key: actionName + idx,
-      isEnabled: isEnabled,
       doc: doc,
+      disabled: disabled,
       onClick: handleClick
     }));
   });

package/transpiled/react/ActionsMenu/ActionsMenuItem.js

@@ -12,7 +12,8 @@ var ActionsMenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var Component = isListItem ? ListItem : MenuItem;
   return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
     ref: ref,
-    button: true
+    button: true,
+    ellipsis: false
   }));
 });
 ActionsMenuItem.propTypes = {

package/transpiled/react/ActionsMenu/ActionsMenuWrapper.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "autoClose", "onClose"];
+var _excluded = ["children", "autoClose", "open", "onClose"];
 import React from 'react';
 import PropTypes from 'prop-types';
 import Menu from "cozy-ui/transpiled/react/MuiCozyTheme/Menu";
@@ -13,6 +13,7 @@ import { useActionMenuEffects } from "cozy-ui/transpiled/react/ActionMenu/Action
 var ActionsMenuWrapper = function ActionsMenuWrapper(_ref) {
   var children = _ref.children,
       autoClose = _ref.autoClose,
+      open = _ref.open,
       onClose = _ref.onClose,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -30,7 +31,7 @@ var ActionsMenuWrapper = function ActionsMenuWrapper(_ref) {
     };
   };
 
-  if (isMobile) {
+  if (isMobile && open) {
     return /*#__PURE__*/React.createElement(BottomSheet, {
       skipAnimation: isTesting(),
       backdrop: true,
@@ -38,20 +39,21 @@ var ActionsMenuWrapper = function ActionsMenuWrapper(_ref) {
     }, /*#__PURE__*/React.createElement(Paper, {
       square: true
     }, React.Children.map(children, function (child) {
-      return /*#__PURE__*/React.cloneElement(child, {
+      return /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {
         isListItem: true,
         size: 'small',
         onClick: overrideClick(child.props)
-      });
+      }) : null;
     })));
   }
 
   return /*#__PURE__*/React.createElement(Menu, _extends({}, props, {
+    open: open,
     onClose: onClose
   }), React.Children.map(children, function (child) {
-    return /*#__PURE__*/React.cloneElement(child, {
+    return /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {
       onClick: overrideClick(child.props)
-    });
+    }) : null;
   }));
 };
 

package/transpiled/react/MenuItem/index.js

@@ -1,2 +1,14 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react';
 import MuiMenuItem from '@material-ui/core/MenuItem';
-export default MuiMenuItem;
+import ListItem, { LitItemPropTypes } from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem";
+var MenuItem = /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(MuiMenuItem, _extends({
+    ref: ref,
+    component: ListItem,
+    gutters: "disabled"
+  }, props));
+});
+MenuItem.displayName = 'MenuItem';
+MenuItem.propTypes = LitItemPropTypes;
+export default MenuItem;

package/transpiled/react/MuiCozyTheme/ListItem/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["gutters"],
     _excluded2 = ["gutters"],
-    _excluded3 = ["gutters"],
+    _excluded3 = ["gutters", "ellipsis"],
     _excluded4 = ["className"];
 import React, { forwardRef } from 'react';
 import cx from 'classnames';
@@ -50,17 +50,19 @@ var useGutters = function useGutters(_ref5) {
 
   var guttersValue = gutters === 'double' ? 32 : 16;
   var lastChild = getLastChild(props);
-  var isLastChildListItemIcon = getComponentName(lastChild).includes('ListItemIcon');
+  var isLastChildListItemIcon = lastChild ? getComponentName(lastChild).includes('ListItemIcon') : false;
   var gutterRight = isLastChildListItemIcon ? guttersValue - 8 : guttersValue;
   return {
     left: guttersValue,
     right: gutterRight
   };
 }; // Add margin on ListItemSecondaryAction when gutters are double
+// Propagates ellipsis prop to ListItemText
 
 
 var useOverridenChildren = function useOverridenChildren(_ref6) {
   var gutters = _ref6.gutters,
+      ellipsis = _ref6.ellipsis,
       props = _objectWithoutProperties(_ref6, _excluded3);
 
   var children = getChildren(props);
@@ -68,6 +70,7 @@ var useOverridenChildren = function useOverridenChildren(_ref6) {
   return React.Children.map(children, function (child, index) {
     var isLastChild = index === childrenCount - 1;
     var isSecondaryAction = isLastChild && isMuiElement(child, ['ListItemSecondaryAction']) || false;
+    var isListItemText = getComponentName(child).includes('ListItemText');
 
     if (isSecondaryAction && gutters === 'double') {
       return /*#__PURE__*/React.cloneElement(child, {
@@ -75,6 +78,12 @@ var useOverridenChildren = function useOverridenChildren(_ref6) {
       });
     }
 
+    if (isListItemText) {
+      return /*#__PURE__*/React.cloneElement(child, {
+        ellipsis: ellipsis
+      });
+    }
+
     return child;
   });
 };
@@ -102,8 +111,10 @@ ListItem.defaultProps = {
   gutters: 'default',
   size: 'medium'
 };
-ListItem.propTypes = {
+export var LitItemPropTypes = {
   gutters: PropTypes.oneOf(['disabled', 'double', 'default']),
-  size: PropTypes.oneOf(['small', 'medium', 'large'])
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  ellipsis: PropTypes.bool
 };
+ListItem.propTypes = LitItemPropTypes;
 export default ListItem;

package/transpiled/react/MuiCozyTheme/makeOverrides.js

@@ -503,7 +503,9 @@ var makeOverrides = function makeOverrides(theme) {
     MuiMenuItem: {
       root: {
         gap: 8,
-        minWidth: 256,
+        maxWidth: 320,
+        whiteSpace: 'normal',
+        overflow: 'auto',
         paddingTop: 4,
         paddingBottom: 4
       },

package/transpiled/react/SquareAppIcon/index.js

@@ -102,7 +102,7 @@ export var SquareAppIcon = function SquareAppIcon(_ref) {
       setAnimationState = _useState2[1];
 
   var handleAnimationEnd = function handleAnimationEnd(e) {
-    if (e.animationName.startsWith('end')) setAnimationState();
+    if (e.animationName.includes('end')) setAnimationState();
   };
 
   useEffect(function () {

package/transpiled/react/utils/react.js

@@ -4,14 +4,16 @@ export var getComponentName = function getComponentName(component) {
   return component.type.displayName || component.type.name || 'Component';
 };
 export var getChildren = function getChildren(props) {
-  return Children.toArray(props.children);
+  var children = Children.toArray(props.children);
+  return Children.count(children) > 0 ? children : null;
 };
 export var getChildrenCount = function getChildrenCount(props) {
   var children = getChildren(props);
-  return children.length;
+  return Children.count(children) || null;
 };
 export var getLastChild = function getLastChild(props) {
   var children = getChildren(props);
+  if (!children) return null;
   var lastChild = children[children.length - 1];
   return lastChild.type === Fragment ? getChildren(lastChild.props)[0] : lastChild;
 };