cozy-ui 69.4.1 → 70.2.0

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+# [70.2.0](https://github.com/cozy/cozy-ui/compare/v70.1.0...v70.2.0) (2022-07-25)
+
+
+### Features
+
+* Add withStyles and useTheme helpers from MUI ([578db69](https://github.com/cozy/cozy-ui/commit/578db69))
+
+# [70.1.0](https://github.com/cozy/cozy-ui/compare/v70.0.0...v70.1.0) (2022-07-25)
+
+
+### Features
+
+* **BottomSheet:** Add backdrop and onClose props ([097e4e4](https://github.com/cozy/cozy-ui/commit/097e4e4))
+
+# [70.0.0](https://github.com/cozy/cozy-ui/compare/v69.4.1...v70.0.0) (2022-07-22)
+
+
+### Features
+
+* **deps:** Material UI is dependency of CozyUI ([1e2d1e8](https://github.com/cozy/cozy-ui/commit/1e2d1e8)), closes [#1865](https://github.com/cozy/cozy-ui/issues/1865)
+
+
+### BREAKING CHANGES
+
+* **deps:** Material UI is not needed any more as a peer
+dependency of Cozy-UI.
+
+For application that uses CozyUI only for Icon, it is possible to
+mock Material UI to {} in order not to increase the bundle size of
+the app (if there is no deep import in the codebase)
+
 ## [69.4.1](https://github.com/cozy/cozy-ui/compare/v69.4.0...v69.4.1) (2022-07-22)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "69.4.1",
+  "version": "70.2.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -71,7 +71,6 @@
     "@babel/helper-define-map": "7.16.7",
     "@babel/helper-regex": "7.10.5",
     "@cozy/codemods": "^1.9.0",
-    "@material-ui/core": "4.12.3",
     "@semantic-release/changelog": "5.0.1",
     "@semantic-release/git": "7.0.18",
     "@semantic-release/npm": "9.0.1",
@@ -148,6 +147,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.3.4",
+    "@material-ui/core": "4.12.3",
     "@popperjs/core": "^2.4.4",
     "bundlemon": "^1.3.2",
     "chart.js": "3.7.1",
@@ -172,7 +172,6 @@
     "rooks": "^5.11.2"
   },
   "peerDependencies": {
-    "@material-ui/core": ">=4.12",
     "cozy-client": ">=28.1.0",
     "cozy-device-helper": "^2.0.0",
     "cozy-doctypes": "^1.69.0",

package/react/BottomSheet/BackdropOrFragment.jsx

@@ -0,0 +1,14 @@
+import React, { Fragment } from 'react'
+
+import Backdrop from '../Backdrop'
+
+const BackdropOrFragment = ({ showBackdrop, children }) => {
+  const Comp = showBackdrop ? Backdrop : Fragment
+  const props = showBackdrop
+    ? { style: { zIndex: 'var(--zIndex-overlay)' }, open: showBackdrop }
+    : undefined
+
+  return <Comp {...props}>{children}</Comp>
+}
+
+export default BackdropOrFragment

package/react/BottomSheet/BottomSheet.jsx

@@ -1,24 +1,41 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react'
+import React, { useState, useEffect, useRef, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import { BottomSheet as MuiBottomSheet } from 'mui-bottom-sheet'
+import { useTimeoutWhen } from 'rooks'
+import Fade from '@material-ui/core/Fade'
 
 import { getFlagshipMetadata } from 'cozy-device-helper'
 
-import Stack from 'cozy-ui/transpiled/react/Stack'
-import Paper from 'cozy-ui/transpiled/react/Paper'
+import Stack from '../Stack'
+import Paper from '../Paper'
+import ClickAwayListener from '../ClickAwayListener'
+import BackdropOrFragment from './BackdropOrFragment'
+import {
+  computeMaxHeight,
+  computeMediumHeight,
+  computeMinHeight,
+  makeOverridenChildren,
+  setTopPosition,
+  setBottomPosition
+} from './helpers'
 
-const makeStyles = ({ isTopPosition }) => ({
+const ANIMATION_DURATION = 250
+
+const createStyles = ({ squared, hasToolbarProps }) => ({
   root: {
     borderTopLeftRadius: '1rem',
     borderTopRightRadius: '1rem',
     transition: 'border-radius 0.5s',
     zIndex: 'var(--zIndex-drawer)',
-    boxShadow: '0 6px 16px 0 rgba(0, 0, 0, 0.5)',
+    boxShadow:
+      '0 -0.5px 0px 0 rgba(0, 0, 0, 0.10), 0 -2px 2px 0 rgba(0, 0, 0, 0.02), 0 -4px 4px 0 rgba(0, 0, 0, 0.02), 0 -8px 8px 0 rgba(0, 0, 0, 0.02), 0 -16px 16px 0 rgba(0, 0, 0, 0.02)',
     backgroundColor: 'var(--paperBackgroundColor)',
-    ...(isTopPosition && {
+    ...(squared && {
       borderTopLeftRadius: 0,
       borderTopRightRadius: 0,
-      boxShadow: '0 0 1px 0 rgba(0, 0, 0, 0.5)'
+      boxShadow: hasToolbarProps
+        ? '0 0 1px 0 rgba(0, 0, 0, 0.5)'
+        : '0 -1px 0 0 rgba(255, 255, 255, 1)'
     })
   },
   indicator: {
@@ -30,6 +47,14 @@ const makeStyles = ({ isTopPosition }) => ({
   stack: {
     backgroundColor: 'var(--defaultBackgroundColor)'
   },
+  bounceSafer: {
+    height: 50,
+    width: '100%',
+    position: 'fixed',
+    bottom: 0,
+    left: 0,
+    backgroundColor: 'var(--paperBackgroundColor)'
+  },
   flagshipImmersive: {
     backgroundColor: 'var(--paperBackgroundColor)',
     bottom: 0,
@@ -48,41 +73,77 @@ export const defaultBottomSheetSpringConfig = {
 }
 
 const defaultSettings = {
-  mediumHeightRatio: 0.33,
+  mediumHeightRatio: 0.75,
   mediumHeight: null
 }
 
-const computeMaxHeight = toolbarProps => {
-  const { ref, height } = toolbarProps
-  let computedToolbarHeight = 1
-
-  if (height) {
-    computedToolbarHeight = height
-  } else if (ref && ref.current) {
-    computedToolbarHeight = ref.current.offsetHeight
+const BottomSheet = ({
+  toolbarProps,
+  settings,
+  backdrop,
+  onClose,
+  children
+}) => {
+  const { mediumHeightRatio, mediumHeight } = {
+    ...defaultSettings,
+    ...settings
   }
 
-  return window.innerHeight - computedToolbarHeight
-}
-
-const BottomSheet = ({ toolbarProps, settings, children }) => {
-  const { mediumHeightRatio, mediumHeight } = useMemo(
-    () => ({
-      ...defaultSettings,
-      ...settings
-    }),
-    [settings]
-  )
-
   const innerContentRef = useRef()
   const headerRef = useRef()
   const headerContentRef = useRef()
   const [isTopPosition, setIsTopPosition] = useState(false)
+  const [isBottomPosition, setIsBottomPosition] = useState(false)
+  const [isHidden, setIsHidden] = useState(false)
+  const [showBackdrop, setShowBackdrop] = useState(backdrop)
   const [peekHeights, setPeekHeights] = useState(null)
+  const [currentIndex, setCurrentIndex] = useState()
   const [bottomSpacerHeight, setBottomSpacerHeight] = useState(0)
-  const [initPos, setInitPos] = useState(mediumHeight)
+  const [initPos, setInitPos] = useState(0)
+
+  const squared = backdrop
+    ? isTopPosition && bottomSpacerHeight <= 0
+    : isTopPosition
+  const hasToolbarProps = !!Object.keys(toolbarProps).length
+  const isClosable = !!onClose || backdrop
+
+  const styles = createStyles({
+    squared,
+    hasToolbarProps
+  })
+  const overriddenChildren = makeOverridenChildren(children, headerContentRef)
+
+  if (backdrop && !onClose) {
+    throw new Error(
+      'BottomSheet must have `onClose` method to work properly when setting `backdrop` to `true`'
+    )
+  }
+
+  const handleClose = useCallback(() => {
+    setShowBackdrop(false)
+    setIsHidden(true)
+    onClose && onClose()
+  }, [onClose])
+
+  const handleMinimizeAndClose = () => {
+    if (backdrop) {
+      setCurrentIndex(0)
+      setTimeout(handleClose, ANIMATION_DURATION)
+    }
+  }
+
+  const handleOnIndexChange = snapIndex => {
+    const maxHeightSnapIndex = peekHeights.length - 1
 
-  const styles = useMemo(() => makeStyles({ isTopPosition }), [isTopPosition])
+    setCurrentIndex(snapIndex)
+    setTopPosition({
+      snapIndex,
+      maxHeightSnapIndex,
+      isTopPosition,
+      setIsTopPosition
+    })
+    setBottomPosition({ snapIndex, isBottomPosition, setIsBottomPosition })
+  }
 
   // hack to prevent pull-down-to-refresh behavior when dragging down the bottom sheet.
   // Needed for iOS Safari
@@ -93,12 +154,17 @@ const BottomSheet = ({ toolbarProps, settings, children }) => {
     }
   }, [])
 
+  // close the bottom sheet by swaping it below the minimum height
+  useTimeoutWhen(
+    () => handleClose(),
+    ANIMATION_DURATION,
+    isClosable && isBottomPosition
+  )
+
   useEffect(() => {
     const headerContent = headerContentRef.current
-    const maxHeight = computeMaxHeight(toolbarProps)
-    const computedMediumHeight =
-      mediumHeight || Math.round(maxHeight * mediumHeightRatio)
-
+    const innerContent = innerContentRef.current
+    const innerContentHeight = innerContent.offsetHeight
     const actionButtonsHeight = headerContent
       ? parseFloat(getComputedStyle(headerContent).getPropertyValue('height'))
       : 0
@@ -108,100 +174,102 @@ const BottomSheet = ({ toolbarProps, settings, children }) => {
         )
       : 0
 
-    const minHeight =
-      headerRef.current.offsetHeight +
-      actionButtonsHeight +
-      actionButtonsBottomMargin +
-      (getFlagshipMetadata().navbarHeight || 0)
-
-    // Used so that the bottomSheet can be opened to the top,
-    // without stopping at the content height
-    const bottomSpacerHeight = maxHeight - innerContentRef.current.offsetHeight
+    const maxHeight = computeMaxHeight(toolbarProps)
+    const computedMediumHeight = computeMediumHeight({
+      backdrop,
+      maxHeight,
+      mediumHeight,
+      mediumHeightRatio,
+      innerContentHeight
+    })
+    const minHeight = computeMinHeight({
+      isClosable,
+      headerRef,
+      actionButtonsHeight,
+      actionButtonsBottomMargin
+    })
+    const bottomSpacerHeight = maxHeight - innerContentHeight
 
-    setPeekHeights([minHeight, computedMediumHeight, maxHeight])
+    if (computedMediumHeight >= maxHeight) {
+      setIsTopPosition(true)
+    }
+    setPeekHeights([...new Set([minHeight, computedMediumHeight, maxHeight])])
     setInitPos(computedMediumHeight)
+    // Used so that the BottomSheet can be opened to the top without stopping at the content height
     setBottomSpacerHeight(bottomSpacerHeight)
-    // TODO: validate the deps are correct
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     innerContentRef,
-    headerContentRef.current,
     toolbarProps,
     mediumHeightRatio,
-    mediumHeight
+    mediumHeight,
+    showBackdrop,
+    backdrop,
+    isClosable
   ])
 
-  const handleOnIndexChange = snapIndex => {
-    const maxHeightSnapIndex = peekHeights.length - 1
-
-    if (snapIndex === maxHeightSnapIndex && !isTopPosition) {
-      setIsTopPosition(true)
-    }
-    if (snapIndex !== maxHeightSnapIndex && isTopPosition) {
-      setIsTopPosition(false)
-    }
-  }
-
-  const overriddenChildren = React.Children.map(children, child => {
-    if (
-      child.type.name === 'BottomSheetHeader' ||
-      child.type.displayName === 'BottomSheetHeader'
-    ) {
-      return React.cloneElement(child, { headerContentRef })
-    }
-    return child
-  })
-
   return (
     <>
       {getFlagshipMetadata().immersive && (
         <span style={styles.flagshipImmersive} />
       )}
-
-      <MuiBottomSheet
-        peekHeights={peekHeights}
-        defaultHeight={initPos}
-        backdrop={false}
-        fullHeight={false}
-        onIndexChange={snapIndex => handleOnIndexChange(snapIndex)}
-        styles={{ root: styles.root }}
-        threshold={0}
-        // springConfig doc : https://docs.pmnd.rs/react-spring/common/configs
-        springConfig={{
-          tension: defaultBottomSheetSpringConfig.tension,
-          friction: defaultBottomSheetSpringConfig.friction,
-          clamp: defaultBottomSheetSpringConfig.clamp
-        }}
-        disabledClosing={true}
-        snapPointSeekerMode="next"
-      >
-        <div ref={innerContentRef}>
-          <Paper
-            data-testid="bottomSheet-header"
-            className="u-w-100 u-h-2-half u-pos-relative u-flex u-flex-items-center u-flex-justify-center"
-            ref={headerRef}
-            elevation={0}
-            square
-          >
-            <div style={styles.indicator} />
-          </Paper>
-          <Stack
-            style={styles.stack}
-            className="u-flex u-flex-column u-ov-hidden"
-            spacing="s"
-          >
-            {overriddenChildren}
-          </Stack>
-        </div>
-        <div style={{ height: bottomSpacerHeight }} />
-      </MuiBottomSheet>
+      <BackdropOrFragment showBackdrop={showBackdrop}>
+        <MuiBottomSheet
+          peekHeights={peekHeights}
+          defaultHeight={initPos}
+          backdrop={false}
+          fullHeight={hasToolbarProps ? false : true}
+          currentIndex={currentIndex}
+          onIndexChange={handleOnIndexChange}
+          styles={{ root: styles.root }}
+          threshold={0}
+          // springConfig doc : https://docs.pmnd.rs/react-spring/common/configs
+          springConfig={{
+            tension: defaultBottomSheetSpringConfig.tension,
+            friction: defaultBottomSheetSpringConfig.friction,
+            clamp: defaultBottomSheetSpringConfig.clamp
+          }}
+          disabledClosing={!onClose}
+          hidden={isHidden}
+          snapPointSeekerMode="next"
+        >
+          <ClickAwayListener onClickAway={handleMinimizeAndClose}>
+            <span>
+              <div ref={innerContentRef}>
+                <Paper
+                  data-testid="bottomSheet-header"
+                  className="u-w-100 u-h-2-half u-pos-relative u-flex u-flex-items-center u-flex-justify-center"
+                  ref={headerRef}
+                  elevation={0}
+                  square
+                >
+                  <div style={styles.indicator} />
+                </Paper>
+                <Stack
+                  style={styles.stack}
+                  className="u-flex u-flex-column u-ov-hidden"
+                  spacing="s"
+                >
+                  {overriddenChildren}
+                </Stack>
+              </div>
+              <div style={{ height: backdrop ? 0 : bottomSpacerHeight }} />
+            </span>
+          </ClickAwayListener>
+        </MuiBottomSheet>
+        {!isBottomPosition && (
+          <Fade in timeout={ANIMATION_DURATION}>
+            <div style={styles.bounceSafer} />
+          </Fade>
+        )}
+      </BackdropOrFragment>
     </>
   )
 }
 
 BottomSheet.defaultProps = {
   classes: {},
-  toolbarProps: {}
+  toolbarProps: {},
+  backdrop: false
 }
 
 BottomSheet.propTypes = {
@@ -214,9 +282,15 @@ BottomSheet.propTypes = {
   }),
   /** Settings that can be modified */
   settings: PropTypes.shape({
+    /** Height in pixel of the middle snap point */
+    mediumHeight: PropTypes.number,
     /** Height of the middle snap point, expressed as a percentage of the viewport height */
     mediumHeightRatio: PropTypes.number
-  })
+  }),
+  /** To add a backdrop */
+  backdrop: PropTypes.bool,
+  /** To totally close the BottomSheet by swaping it down */
+  onClose: PropTypes.func
 }
 
 export default React.memo(BottomSheet)

package/react/BottomSheet/README.md

@@ -1,33 +1,175 @@
-Display content coming up from the bottom of the screen. The pane can be swiped to the top of the screen. [API documentation is here](https://github.com/cozy/mui-bottom-sheet#props-options)
+Display content coming up from the bottom of the screen. The pane can be swiped to the top of the screen. Based on cozy
+/ mui-bottom-sheet: [API documentation is here](https://github.com/cozy/mui-bottom-sheet#props-options).
+
+### Props
+
+* **toolbarProps** : `<object>` – Toolbar properties
+  * **ref** : `<object>` – React reference of the toolbar node
+  * **height** : `<number>` – Toolbar height value
+* **settings** : `<object>` – Settings that can be modified
+  * **mediumHeight** : `<number>` – Height in pixel of the middle snap point
+  * **mediumHeightRatio** : `<number>` – Height of the middle snap point, expressed as a percentage of the viewport height
+* **backdrop** : `<boolean>` – To add a backdrop
+* **onClose** : `<function>` – To totally close the BottomSheet by swaping it down
+
+⚠️ If **`backdrop`** is set to **`true`**, you must pass an **`onClose`** method.
+
+In this documentation, **`closable`** variant must be checked if **`backdrop`** is checked too.
 
 ```jsx
 import BottomSheet, { BottomSheetItem, BottomSheetHeader } from 'cozy-ui/transpiled/react/BottomSheet'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 
 // <-- only useful for the documentation
-initialState = { isBottomSheetDisplayed: isTesting() }
+import Variants from 'cozy-ui/docs/components/Variants'
+import TextField from 'cozy-ui/transpiled/react/MuiCozyTheme/TextField'
+import List from 'cozy-ui/transpiled/react/MuiCozyTheme/List'
+import ListSubheader from 'cozy-ui/transpiled/react/MuiCozyTheme/ListSubheader'
+import ListItem from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import ListItemSecondaryAction from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemSecondaryAction'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import FileIcon from 'cozy-ui/transpiled/react/Icons/File'
+import FileTypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText'
+import RightIcon from 'cozy-ui/transpiled/react/Icons/Right'
+import Divider from 'cozy-ui/transpiled/react/MuiCozyTheme/Divider'
+import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
+import Radio from 'cozy-ui/transpiled/react/Radios'
+
+const initialVariants = [{
+  backdrop: true,
+  closable: true,
+  longContent: false,
+  withFakeToolbar: false,
+  withHeader: true,
+  withListContent: false
+}]
+const initialState = {
+  isBottomSheetDisplayed: isTesting(),
+  mediumHeight: isTesting() ? 450 : undefined,
+  mediumHeightRatio: undefined
+}
 const showBottomSheet = () => setState({ isBottomSheetDisplayed: true })
+const hideBottomSheet = () => setState({ isBottomSheetDisplayed: false })
+
+const handleChangeMediumHeight = el => {
+  setState({ mediumHeight: Number(el.target.value) })
+}
+const handleChangeMediumHeightRatio = el => {
+  setState({ mediumHeightRatio: Number(el.target.value) })
+}
+
+const settings = state.mediumHeight === undefined && state.mediumHeightRatio === undefined
+  ? undefined
+  : { mediumHeight: state.mediumHeight, mediumHeightRatio: state.mediumHeightRatio }
 
-const settings = isTesting() ? { mediumHeight: 450 } : undefined
 // -->
 
 ;
 
-<>
-  <Button label="Open BottomSheet" onClick={showBottomSheet} />
-  {state.isBottomSheetDisplayed && (
-    <BottomSheet settings={settings}>
-      <BottomSheetHeader className="u-ph-1 u-pb-1">
-        <Button className="u-mr-half" variant="secondary" label="Button 1" fullWidth />
-        <Button variant="secondary" label="Button 2" fullWidth />
-      </BottomSheetHeader>
-      <BottomSheetItem>
-        {content.ada.short}
-      </BottomSheetItem>
-      <BottomSheetItem disableElevation>
-        {content.ada.long}
-      </BottomSheetItem>
-    </BottomSheet>
+<Variants initialVariants={initialVariants}>
+  {variant => (
+    <>
+      <div>
+        <TextField
+          type="number"
+          margin="dense"
+          label="mediumHeight"
+          variant="outlined"
+          helperText="Height of the medium snap point"
+          onChange={handleChangeMediumHeight}
+        />
+        <TextField
+          className="u-ml-0-s u-ml-half"
+          type="number"
+          margin="dense"
+          label="mediumHeightRatio"
+          variant="outlined"
+          helperText="Height ratio of the medium snap point"
+          onChange={handleChangeMediumHeightRatio}
+        />
+        <Button
+          className="u-ml-0-s u-ml-half u-mt-1"
+          size="small"
+          variant="ghost"
+          label="Open BottomSheet"
+          onClick={showBottomSheet}
+        />
+      </div>
+
+      {state.isBottomSheetDisplayed && (
+        <BottomSheet
+          toolbarProps={variant.withFakeToolbar ? { height: 50 } : undefined}
+          settings={settings}
+          backdrop={variant.backdrop}
+          onClose={variant.closable ? hideBottomSheet : undefined}
+        >
+          {variant.withHeader && (
+            <BottomSheetHeader className="u-ph-1 u-pb-1">
+              <Button className="u-mr-half" variant="secondary" label="Button 1" fullWidth />
+              <Button variant="secondary" label="Button 2" fullWidth />
+            </BottomSheetHeader>
+          )}
+          {!variant.withListContent && (
+            <BottomSheetItem disableElevation>
+              {variant.longContent ? content.ada.long : content.ada.short}
+            </BottomSheetItem>
+          )}
+          {variant.withListContent && (
+            <BottomSheetItem disableGutters>
+              <List>
+                <ListItem button>
+                  <ListItemIcon>
+                    <Icon icon={FileTypeTextIcon} size={32} />
+                  </ListItemIcon>
+                  <ListItemText primary="Title" />
+                </ListItem>
+                <ListSubheader>Section 1</ListSubheader>
+                <ListItem button>
+                  <ListItemIcon>
+                    <Icon icon={FileIcon} />
+                  </ListItemIcon>
+                  <ListItemText primary="Item with icon" />
+                </ListItem>
+                <Divider variant="inset" />
+                <ListItem button>
+                  <ListItemIcon>
+                    <Checkbox />
+                  </ListItemIcon>
+                  <ListItemText primary="Item with checkbox" />
+                </ListItem>
+                <Divider variant="inset" />
+                <ListItem button>
+                  <ListItemIcon>
+                    <Radio />
+                  </ListItemIcon>
+                  <ListItemText primary="Item with radio" />
+                </ListItem>
+                <Divider variant="inset" />
+                <ListItem button>
+                  <ListItemIcon>
+                    <Icon icon={FileIcon} />
+                  </ListItemIcon>
+                  <ListItemText primary="Item with secondary" secondary="With secondary text" />
+                </ListItem>
+                <Divider variant="inset" />
+                <ListItem button>
+                  <ListItemIcon>
+                    <Icon icon={FileIcon} />
+                  </ListItemIcon>
+                  <ListItemText primary="Item with secondary action" />
+                  <ListItemSecondaryAction className="u-mr-1">
+                    <Icon icon={RightIcon} color="var(--iconTextColor)" />
+                  </ListItemSecondaryAction>
+                </ListItem>
+                <Divider variant="inset" />
+              </List>
+            </BottomSheetItem>
+          )}
+        </BottomSheet>
+      )}
+    </>
   )}
-</>
+</Variants>
 ```