cozy-ui 70.2.1 → 70.2.4

package/.bundlemonrc

@@ -12,8 +12,7 @@
   ],
   "groups": [
     {
-        "path": "transpiled/react/**",
-        "maxPercentIncrease": 0.5,
+        "path": "transpiled/react/**"
     },
 ],
   "reportOutput": ["github"]

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [70.2.4](https://github.com/cozy/cozy-ui/compare/v70.2.3...v70.2.4) (2022-07-26)
+
+
+### Bug Fixes
+
+* **BottomSheet:** Backdrop click behavior ([7fdb297](https://github.com/cozy/cozy-ui/commit/7fdb297))
+
+## [70.2.3](https://github.com/cozy/cozy-ui/compare/v70.2.2...v70.2.3) (2022-07-26)
+
+
+### Bug Fixes
+
+* **BottomSheet:** Remove bouncerSafer when clicking in backdrop ([93233dd](https://github.com/cozy/cozy-ui/commit/93233dd))
+* **CozyDialogs:** Close and Back button z-index ([a943399](https://github.com/cozy/cozy-ui/commit/a943399))
+
+## [70.2.2](https://github.com/cozy/cozy-ui/compare/v70.2.1...v70.2.2) (2022-07-26)
+
+
+### Bug Fixes
+
+* Shortcut with IconContent ([a83c320](https://github.com/cozy/cozy-ui/commit/a83c320))
+
 ## [70.2.1](https://github.com/cozy/cozy-ui/compare/v70.2.0...v70.2.1) (2022-07-25)
 
 

package/package.json

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

package/react/BottomSheet/BackdropOrFragment.jsx

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

package/react/BottomSheet/BottomSheet.jsx

@@ -8,7 +8,6 @@ import { getFlagshipMetadata } from 'cozy-device-helper'
 
 import Stack from '../Stack'
 import Paper from '../Paper'
-import ClickAwayListener from '../ClickAwayListener'
 import BackdropOrFragment from './BackdropOrFragment'
 import {
   computeMaxHeight,
@@ -16,10 +15,10 @@ import {
   computeMinHeight,
   makeOverridenChildren,
   setTopPosition,
-  setBottomPosition
+  setBottomPosition,
+  minimizeAndClose
 } from './helpers'
-
-const ANIMATION_DURATION = 250
+import { ANIMATION_DURATION } from './constants'
 
 const createStyles = ({ squared, hasToolbarProps }) => ({
   root: {
@@ -53,7 +52,8 @@ const createStyles = ({ squared, hasToolbarProps }) => ({
     position: 'fixed',
     bottom: 0,
     left: 0,
-    backgroundColor: 'var(--paperBackgroundColor)'
+    backgroundColor: 'var(--paperBackgroundColor)',
+    zIndex: 'var(--zIndex-overlay)'
   },
   flagshipImmersive: {
     backgroundColor: 'var(--paperBackgroundColor)',
@@ -125,13 +125,6 @@ const BottomSheet = ({
     onClose && onClose()
   }, [onClose])
 
-  const handleMinimizeAndClose = () => {
-    if (backdrop) {
-      setCurrentIndex(0)
-      setTimeout(handleClose, ANIMATION_DURATION)
-    }
-  }
-
   const handleOnIndexChange = snapIndex => {
     const maxHeightSnapIndex = peekHeights.length - 1
 
@@ -212,56 +205,62 @@ const BottomSheet = ({
       {getFlagshipMetadata().immersive && (
         <span style={styles.flagshipImmersive} />
       )}
-      <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>
+      <BackdropOrFragment
+        showBackdrop={showBackdrop}
+        onClick={() =>
+          minimizeAndClose({
+            backdrop,
+            setCurrentIndex,
+            setIsTopPosition,
+            setIsBottomPosition,
+            handleClose
+          })
+        }
+      />
+      <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"
+      >
+        <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 }} />
+      </MuiBottomSheet>
+      {!isBottomPosition && (
+        <Fade in timeout={ANIMATION_DURATION}>
+          <div style={styles.bounceSafer} />
+        </Fade>
+      )}
     </>
   )
 }

package/react/BottomSheet/constants.js

@@ -0,0 +1 @@
+export const ANIMATION_DURATION = 250

package/react/BottomSheet/helpers.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import { getFlagshipMetadata } from 'cozy-device-helper'
 
+import { ANIMATION_DURATION } from './constants'
+
 export const computeMaxHeight = toolbarProps => {
   const { ref, height } = toolbarProps
   let computedToolbarHeight = 1
@@ -94,3 +96,18 @@ export const setBottomPosition = ({
     setIsBottomPosition(false)
   }
 }
+
+export const minimizeAndClose = ({
+  backdrop,
+  setCurrentIndex,
+  setIsTopPosition,
+  setIsBottomPosition,
+  handleClose
+}) => {
+  if (backdrop) {
+    setCurrentIndex(0)
+    setIsTopPosition(false)
+    setIsBottomPosition(true)
+    setTimeout(handleClose, ANIMATION_DURATION)
+  }
+}

package/react/BottomSheet/helpers.spec.js

@@ -3,7 +3,8 @@ import {
   computeMediumHeight,
   computeMinHeight,
   setTopPosition,
-  setBottomPosition
+  setBottomPosition,
+  minimizeAndClose
 } from './helpers'
 
 jest.mock('cozy-device-helper', () => ({
@@ -233,3 +234,51 @@ describe('setBottomPosition', () => {
     })
   })
 })
+
+describe('minimizeAndClose', () => {
+  jest.useFakeTimers()
+
+  it('should not trigger function if no backdrop', () => {
+    const setCurrentIndex = jest.fn()
+    const setIsTopPosition = jest.fn()
+    const setIsBottomPosition = jest.fn()
+    const handleClose = jest.fn()
+
+    minimizeAndClose({
+      backdrop: false,
+      setCurrentIndex,
+      setIsTopPosition,
+      setIsBottomPosition,
+      handleClose
+    })
+
+    jest.runAllTimers()
+
+    expect(setCurrentIndex).not.toHaveBeenCalled()
+    expect(setIsTopPosition).not.toHaveBeenCalled()
+    expect(setIsBottomPosition).not.toHaveBeenCalled()
+    expect(handleClose).not.toHaveBeenCalled()
+  })
+
+  it('should trigger every function if backdrop is true', () => {
+    const setCurrentIndex = jest.fn()
+    const setIsTopPosition = jest.fn()
+    const setIsBottomPosition = jest.fn()
+    const handleClose = jest.fn()
+
+    minimizeAndClose({
+      backdrop: true,
+      setCurrentIndex,
+      setIsTopPosition,
+      setIsBottomPosition,
+      handleClose
+    })
+
+    jest.runAllTimers()
+
+    expect(setCurrentIndex).toHaveBeenCalledWith(0)
+    expect(setIsTopPosition).toHaveBeenCalledWith(false)
+    expect(setIsBottomPosition).toHaveBeenCalledWith(true)
+    expect(handleClose).toHaveBeenCalled()
+  })
+})

package/react/CozyDialogs/styles.styl

@@ -4,7 +4,7 @@
     position absolute
     top 1.15rem
     right 1.15rem
-    z-index var(--zIndex-modal) //needed for an iOS bug https://github.com/cozy/cozy-ui/pull/1790
+    z-index 1
     transform translateY(var(--flagship-top-height))
     +small-screen()
         top 0.25rem
@@ -14,7 +14,7 @@
     position absolute
     top 1.15rem
     left 1.15rem
-    z-index var(--zIndex-modal) //needed for an iOS bug https://github.com/cozy/cozy-ui/pull/1790
+    z-index 1
     +small-screen()
         top 0.25rem
         left 0.25rem

package/react/SquareAppIcon/Readme.md

@@ -35,6 +35,19 @@ const app = { name: "Test App", slug: "testapp", type: "app" }
   <Grid item>
     <SquareAppIcon name="Shortcut" variant="shortcut" />
   </Grid>
+  <Grid item>
+    <SquareAppIcon name="Shortcut" variant="shortcut" IconContent={<img
+            src={`data:image/svg+xml;base64,${window.btoa(`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <g fill="none" fill-rule="evenodd" transform="translate(0 2)">
+    <rect width="32" height="26" y="2" fill="#B2D3FF" rx="2"/>
+    <path fill="#197BFF" d="M0,0.990777969 C0,0.443586406 0.449948758,0 1.00684547,0 L12.9931545,0 C13.5492199,0 14.3125,0.3125 14.7107565,0.71075654 L15.2892435,1.28924346 C15.6817835,1.68178346 16.4446309,2 17.0008717,2 L30.0059397,2 C31.1072288,2 32,2.89470506 32,4 L32,4 L17.0008717,4 C16.4481055,4 15.6875,4.3125 15.2892435,4.71075654 L14.7107565,5.28924346 C14.3182165,5.68178346 13.5500512,6 12.9931545,6 L1.00684547,6 C0.450780073,6 0,5.54902482 0,5.00922203 L0,0.990777969 Z"/>
+  </g>
+</svg>`)}`}
+            width={32}
+            height={32}
+            alt={"Shortcut"}
+          />}/>
+  </Grid>
   <Grid item>
     <SquareAppIcon name="Custom Icon" IconContent={<Icon icon={CozyIcon} size="48" />} />
   </Grid>

package/react/SquareAppIcon/SquareAppIcon.spec.js

@@ -69,6 +69,17 @@ describe('SquareAppIcon component', () => {
     expect(root.getByTestId('square-app-icon')).toMatchSnapshot()
   })
 
+  it('should display icon-content an app with icon content in shortcut state', () => {
+    const { queryByTestId } = render(
+      <Wrapper
+        variant="shortcut"
+        name="shortcut"
+        IconContent={<Icon data-testid="icon-content" icon={CozyIcon} />}
+      />
+    )
+    expect(queryByTestId('icon-content')).toBeTruthy()
+  })
+
   it('should render correctly an app with custom content', () => {
     const root = render(
       <Wrapper name="custom icon" IconContent={<Icon icon={CozyIcon} />} />

package/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap

@@ -358,14 +358,14 @@ exports[`SquareAppIcon component should render correctly an app in shortcut stat
 
 exports[`SquareAppIcon component should render correctly an app with custom content 1`] = `
 <div
-  class="makeStyles-tileWrapper-53"
+  class="makeStyles-tileWrapper-59"
   data-testid="square-app-icon"
 >
   <span
     class="MuiBadge-root"
   >
     <span
-      class="MuiBadge-root styles__SquareAppIcon-wrapper___2SEuM makeStyles-shadow-51"
+      class="MuiBadge-root styles__SquareAppIcon-wrapper___2SEuM makeStyles-shadow-57"
     >
       <div
         class="styles__SquareAppIcon-icon-container___39MRl"
@@ -388,11 +388,11 @@ exports[`SquareAppIcon component should render correctly an app with custom cont
       />
     </span>
     <span
-      class="MuiBadge-badge Component-qualifier-54 MuiBadge-anchorOriginBottomRightRectangular MuiBadge-invisible"
+      class="MuiBadge-badge Component-qualifier-60 MuiBadge-anchorOriginBottomRightRectangular MuiBadge-invisible"
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-49 u-spacellipsis MuiTypography-h6 MuiTypography-colorTextPrimary MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-55 u-spacellipsis MuiTypography-h6 MuiTypography-colorTextPrimary MuiTypography-alignCenter"
   >
     custom icon
   </h6>

package/react/SquareAppIcon/index.jsx

@@ -109,12 +109,12 @@ export const SquareAppIcon = ({
           size="large"
           overlap="rectangular"
           style={
-            variant === 'shortcut'
+            variant === 'shortcut' && !IconContent
               ? { backgroundColor: nameToColor(name) }
               : null
           }
         >
-          {variant === 'shortcut' ? (
+          {variant === 'shortcut' && !IconContent ? (
             <Typography className={classes.letter} variant="h2" align="center">
               {letter.toUpperCase()}
             </Typography>

package/transpiled/react/BottomSheet/BackdropOrFragment.js

@@ -3,13 +3,15 @@ import Backdrop from "cozy-ui/transpiled/react/Backdrop";
 
 var BackdropOrFragment = function BackdropOrFragment(_ref) {
   var showBackdrop = _ref.showBackdrop,
+      onClick = _ref.onClick,
       children = _ref.children;
   var Comp = showBackdrop ? Backdrop : Fragment;
   var props = showBackdrop ? {
     style: {
       zIndex: 'var(--zIndex-overlay)'
     },
-    open: showBackdrop
+    open: showBackdrop,
+    onClick: onClick
   } : undefined;
   return /*#__PURE__*/React.createElement(Comp, props, children);
 };

package/transpiled/react/BottomSheet/BottomSheet.js

@@ -14,10 +14,9 @@ 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 ClickAwayListener from "cozy-ui/transpiled/react/ClickAwayListener";
 import BackdropOrFragment from "cozy-ui/transpiled/react/BottomSheet/BackdropOrFragment";
-import { computeMaxHeight, computeMediumHeight, computeMinHeight, makeOverridenChildren, setTopPosition, setBottomPosition } from "cozy-ui/transpiled/react/BottomSheet/helpers";
-var ANIMATION_DURATION = 250;
+import { computeMaxHeight, computeMediumHeight, computeMinHeight, makeOverridenChildren, setTopPosition, setBottomPosition, minimizeAndClose } from "cozy-ui/transpiled/react/BottomSheet/helpers";
+import { ANIMATION_DURATION } from "cozy-ui/transpiled/react/BottomSheet/constants";
 
 var createStyles = function createStyles(_ref) {
   var squared = _ref.squared,
@@ -50,7 +49,8 @@ var createStyles = function createStyles(_ref) {
       position: 'fixed',
       bottom: 0,
       left: 0,
-      backgroundColor: 'var(--paperBackgroundColor)'
+      backgroundColor: 'var(--paperBackgroundColor)',
+      zIndex: 'var(--zIndex-overlay)'
     },
     flagshipImmersive: {
       backgroundColor: 'var(--paperBackgroundColor)',
@@ -148,13 +148,6 @@ var BottomSheet = function BottomSheet(_ref2) {
     onClose && onClose();
   }, [onClose]);
 
-  var handleMinimizeAndClose = function handleMinimizeAndClose() {
-    if (backdrop) {
-      setCurrentIndex(0);
-      setTimeout(handleClose, ANIMATION_DURATION);
-    }
-  };
-
   var handleOnIndexChange = function handleOnIndexChange(snapIndex) {
     var maxHeightSnapIndex = peekHeights.length - 1;
     setCurrentIndex(snapIndex);
@@ -217,8 +210,17 @@ var BottomSheet = function BottomSheet(_ref2) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, getFlagshipMetadata().immersive && /*#__PURE__*/React.createElement("span", {
     style: styles.flagshipImmersive
   }), /*#__PURE__*/React.createElement(BackdropOrFragment, {
-    showBackdrop: showBackdrop
-  }, /*#__PURE__*/React.createElement(MuiBottomSheet, {
+    showBackdrop: showBackdrop,
+    onClick: function onClick() {
+      return minimizeAndClose({
+        backdrop: backdrop,
+        setCurrentIndex: setCurrentIndex,
+        setIsTopPosition: setIsTopPosition,
+        setIsBottomPosition: setIsBottomPosition,
+        handleClose: handleClose
+      });
+    }
+  }), /*#__PURE__*/React.createElement(MuiBottomSheet, {
     peekHeights: peekHeights,
     defaultHeight: initPos,
     backdrop: false,
@@ -238,9 +240,7 @@ var BottomSheet = function BottomSheet(_ref2) {
     disabledClosing: !onClose,
     hidden: isHidden,
     snapPointSeekerMode: "next"
-  }, /*#__PURE__*/React.createElement(ClickAwayListener, {
-    onClickAway: handleMinimizeAndClose
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     ref: innerContentRef
   }, /*#__PURE__*/React.createElement(Paper, {
     "data-testid": "bottomSheet-header",
@@ -258,12 +258,12 @@ var BottomSheet = function BottomSheet(_ref2) {
     style: {
       height: backdrop ? 0 : bottomSpacerHeight
     }
-  })))), !isBottomPosition && /*#__PURE__*/React.createElement(Fade, {
+  })), !isBottomPosition && /*#__PURE__*/React.createElement(Fade, {
     in: true,
     timeout: ANIMATION_DURATION
   }, /*#__PURE__*/React.createElement("div", {
     style: styles.bounceSafer
-  }))));
+  })));
 };
 
 BottomSheet.defaultProps = {

package/transpiled/react/BottomSheet/constants.js

@@ -0,0 +1 @@
+export var ANIMATION_DURATION = 250;

package/transpiled/react/BottomSheet/helpers.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { getFlagshipMetadata } from 'cozy-device-helper';
+import { ANIMATION_DURATION } from "cozy-ui/transpiled/react/BottomSheet/constants";
 export var computeMaxHeight = function computeMaxHeight(toolbarProps) {
   var ref = toolbarProps.ref,
       height = toolbarProps.height;
@@ -82,4 +83,18 @@ export var setBottomPosition = function setBottomPosition(_ref4) {
   if (snapIndex !== 0 && isBottomPosition) {
     setIsBottomPosition(false);
   }
+};
+export var minimizeAndClose = function minimizeAndClose(_ref5) {
+  var backdrop = _ref5.backdrop,
+      setCurrentIndex = _ref5.setCurrentIndex,
+      setIsTopPosition = _ref5.setIsTopPosition,
+      setIsBottomPosition = _ref5.setIsBottomPosition,
+      handleClose = _ref5.handleClose;
+
+  if (backdrop) {
+    setCurrentIndex(0);
+    setIsTopPosition(false);
+    setIsBottomPosition(true);
+    setTimeout(handleClose, ANIMATION_DURATION);
+  }
 };

package/transpiled/react/SquareAppIcon/index.js

@@ -105,10 +105,10 @@ export var SquareAppIcon = function SquareAppIcon(_ref) {
     withBorder: false,
     size: "large",
     overlap: "rectangular",
-    style: variant === 'shortcut' ? {
+    style: variant === 'shortcut' && !IconContent ? {
       backgroundColor: nameToColor(name)
     } : null
-  }, variant === 'shortcut' ? /*#__PURE__*/React.createElement(Typography, {
+  }, variant === 'shortcut' && !IconContent ? /*#__PURE__*/React.createElement(Typography, {
     className: classes.letter,
     variant: "h2",
     align: "center"