cozy-ui 70.2.3 → 70.2.4

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "70.2.3",
+  "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,
@@ -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)',
@@ -205,66 +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={() =>
-              minimizeAndClose({
-                backdrop,
-                setCurrentIndex,
-                setIsTopPosition,
-                setIsBottomPosition,
-                handleClose
-              })
-            }
+      <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"
           >
-            <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>
+            {overriddenChildren}
+          </Stack>
+        </div>
+        <div style={{ height: backdrop ? 0 : bottomSpacerHeight }} />
+      </MuiBottomSheet>
+      {!isBottomPosition && (
+        <Fade in timeout={ANIMATION_DURATION}>
+          <div style={styles.bounceSafer} />
+        </Fade>
+      )}
     </>
   )
 }

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,7 +14,6 @@ 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, minimizeAndClose } from "cozy-ui/transpiled/react/BottomSheet/helpers";
 import { ANIMATION_DURATION } from "cozy-ui/transpiled/react/BottomSheet/constants";
@@ -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)',
@@ -210,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,
@@ -231,17 +240,7 @@ var BottomSheet = function BottomSheet(_ref2) {
     disabledClosing: !onClose,
     hidden: isHidden,
     snapPointSeekerMode: "next"
-  }, /*#__PURE__*/React.createElement(ClickAwayListener, {
-    onClickAway: function onClickAway() {
-      return minimizeAndClose({
-        backdrop: backdrop,
-        setCurrentIndex: setCurrentIndex,
-        setIsTopPosition: setIsTopPosition,
-        setIsBottomPosition: setIsBottomPosition,
-        handleClose: handleClose
-      });
-    }
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     ref: innerContentRef
   }, /*#__PURE__*/React.createElement(Paper, {
     "data-testid": "bottomSheet-header",
@@ -259,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 = {