cozy-ui 95.2.0 → 95.4.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [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)
+
+
+### Bug Fixes
+
+* **BottomSheet:** IsTopPosition wasn't set if condition [secure] ([4ae9ac0](https://github.com/cozy/cozy-ui/commit/4ae9ac0))
+
+
+### Features
+
+* **BottomSheet:** Add rerendering content compliancy ([c93efb2](https://github.com/cozy/cozy-ui/commit/c93efb2))
+* **NestedSelect:** Rerender BottomSheet if content change ([b26e6bd](https://github.com/cozy/cozy-ui/commit/b26e6bd))
+
 # [95.2.0](https://github.com/cozy/cozy-ui/compare/v95.1.0...v95.2.0) (2023-10-11)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "95.2.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/BottomSheet/BottomSheet.jsx

@@ -15,6 +15,7 @@ import Portal from '@material-ui/core/Portal'
 
 import { getFlagshipMetadata } from 'cozy-device-helper'
 
+import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
 import CozyTheme, { useCozyTheme } from '../providers/CozyTheme'
 import Stack from '../Stack'
 import Paper from '../Paper'
@@ -27,10 +28,11 @@ import {
   setTopPosition,
   setBottomPosition,
   minimizeAndClose,
-  computeBottomSpacer
+  computeBottomSpacer,
+  getCssValue
 } from './helpers'
 import { ANIMATION_DURATION } from './constants'
-import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
+import stylescss from './styles.styl'
 
 const createContainerWrapperStyles = () => ({
   container: {
@@ -54,6 +56,7 @@ const createStyles = ({
   squared,
   hasToolbarProps,
   offset,
+  renderSaferHeight,
   isBottomPosition
 }) => ({
   root: {
@@ -108,6 +111,13 @@ const createStyles = ({
     backgroundColor: 'var(--paperBackgroundColor)',
     zIndex: 'calc(var(--zIndex-modal) + 10)',
     transition: `opacity ${ANIMATION_DURATION}ms`
+  },
+  renderSafer: {
+    height: renderSaferHeight,
+    width: '100%',
+    position: 'fixed',
+    bottom: 0,
+    pointerEvents: 'none'
   }
 })
 
@@ -148,17 +158,23 @@ const BottomSheet = memo(
     const [currentIndex, setCurrentIndex] = useState()
     const [bottomSpacerHeight, setBottomSpacerHeight] = useState(0)
     const [initPos, setInitPos] = useState(0)
+    const prevInitPos = useRef()
 
     const squared = backdrop
       ? isTopPosition && bottomSpacerHeight <= 0
       : isTopPosition
     const hasToolbarProps = !!Object.keys(toolbarProps).length
     const isClosable = !!onClose || backdrop
+    const renderSaferHeight =
+      initPos < prevInitPos.current ? prevInitPos.current - 16 : 0 // 16 because border radius
+    const showRenderSafer =
+      prevInitPos.current !== 0 && prevInitPos.current > initPos
 
     const styles = createStyles({
       squared,
       hasToolbarProps,
       offset,
+      renderSaferHeight,
       isBottomPosition
     })
     const overriddenChildren = makeOverridenChildren(children, headerContentRef)
@@ -207,14 +223,11 @@ const BottomSheet = memo(
     useEffect(() => {
       const headerContent = headerContentRef.current
       const innerContentHeight = innerContentRef.current.offsetHeight
-      const actionButtonsHeight = headerContent
-        ? parseFloat(getComputedStyle(headerContent).getPropertyValue('height'))
-        : 0
-      const actionButtonsBottomMargin = headerContent
-        ? parseFloat(
-            getComputedStyle(headerContent).getPropertyValue('padding-bottom')
-          )
-        : 0
+      const actionButtonsHeight = getCssValue(headerContent, 'height')
+      const actionButtonsBottomMargin = getCssValue(
+        headerContent,
+        'padding-bottom'
+      )
 
       const maxHeight = computeMaxHeight(toolbarProps)
 
@@ -242,12 +255,29 @@ const BottomSheet = memo(
 
       if (computedMediumHeight >= maxHeight) {
         setIsTopPosition(true)
+      } else {
+        setIsTopPosition(false)
+      }
+
+      const newPeekHeights = [
+        ...new Set([minHeight, computedMediumHeight, maxHeight])
+      ]
+
+      const hasPeekHeightsChanged = peekHeights !== newPeekHeights
+
+      if (hasPeekHeightsChanged && isTopPosition) {
+        setCurrentIndex(v => v - 1)
       }
-      setPeekHeights([...new Set([minHeight, computedMediumHeight, maxHeight])])
+
+      setPeekHeights(newPeekHeights)
+      prevInitPos.current = initPos
       setInitPos(computedMediumHeight)
       // Used so that the BottomSheet can be opened to the top without stopping at the content height
       setBottomSpacerHeight(bottomSpacerHeight)
+
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
+      // initPos is missing, because we need the previous value
       innerContentRef,
       toolbarProps,
       mediumHeightRatio,
@@ -322,6 +352,15 @@ const BottomSheet = memo(
           </div>
           <div style={{ height: bottomSpacerHeight }} />
         </MuiBottomSheet>
+        {showRenderSafer && (
+          <div style={styles.renderSafer}>
+            <Paper
+              className={stylescss['renderSaferAnim']}
+              elevation={0}
+              square
+            />
+          </div>
+        )}
         {!isBottomPosition && (
           <>
             <Fade in timeout={ANIMATION_DURATION}>

package/react/BottomSheet/helpers.js

@@ -136,3 +136,6 @@ export const computeBottomSpacer = ({
   // without backdrop, we want the bottomsheet to open to the top of the window
   return maxHeight - innerContentHeight
 }
+
+export const getCssValue = (element, value) =>
+  element ? parseFloat(getComputedStyle(element).getPropertyValue(value)) : 0

package/react/BottomSheet/styles.styl

@@ -0,0 +1,15 @@
+.renderSaferAnim
+  position absolute
+  bottom 0
+  height 0
+  width 100%
+  animation slidein 1s
+
+@keyframes slidein {
+  from {
+    height 100%
+  }
+  to {
+    height 0
+  }
+}

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/react/NestedSelect/BottomSheet.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import cx from 'classnames'
 
 import Icon from '../Icon'
@@ -31,10 +31,16 @@ const HeaderComponent = ({ title, showBack, onClickBack }) => {
 }
 
 const SelfBottomSheet = props => {
+  const [, setInnerContentHeight] = useState(0) // tricks to rerender BottomSheet
+
   return (
     <BottomSheet backdrop onClose={props.onClose}>
       <BottomSheetItem disableGutters>
-        <NestedSelect HeaderComponent={HeaderComponent} {...props} />
+        <NestedSelect
+          HeaderComponent={HeaderComponent}
+          setInnerContentHeight={setInnerContentHeight}
+          {...props}
+        />
       </BottomSheetItem>
     </BottomSheet>
   )

package/react/NestedSelect/NestedSelect.jsx

@@ -18,6 +18,7 @@ export { ItemRow }
 class NestedSelect extends Component {
   constructor(props) {
     super(props)
+    this.innerRef = React.createRef()
     this.state = {
       history: [props.options],
       searchValue: '',
@@ -29,6 +30,12 @@ class NestedSelect extends Component {
     this.unmounted = true
   }
 
+  componentDidUpdate() {
+    const { setInnerContentHeight } = this.props
+
+    setInnerContentHeight?.(this.innerRef?.current?.offsetHeight)
+  }
+
   resetHistory() {
     if (this.unmounted) {
       return
@@ -105,7 +112,7 @@ class NestedSelect extends Component {
     }
 
     return (
-      <>
+      <span ref={this.innerRef}>
         {HeaderComponent ? (
           <HeaderComponent
             title={current.title || title}
@@ -171,7 +178,7 @@ class NestedSelect extends Component {
             ))
           )}
         </ContentComponent>
-      </>
+      </span>
     )
   }
 }

package/react/NestedSelect/NestedSelect.md

@@ -170,7 +170,7 @@ const InteractiveExample = () => {
               radioPosition={variant.leftRadio ? 'left' : 'right'}
               title="Please select letter"
               transformParentItem={transformParentItem}
-              searchOptions={variant.withSearch ? searchOpts : undefined}
+              searchOptions={variant.withSearch ? searchOptions : undefined}
               ellipsis={variant.withEllipsis}
               noDivider={variant.noDivider}
             />

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;
   }));