cozy-ui 69.1.0 → 69.2.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [69.2.0](https://github.com/cozy/cozy-ui/compare/v69.1.0...v69.2.0) (2022-07-07)
+
+
+### Features
+
+* **BottomDrawer:** Add possibility to use it with long content ([59296f0](https://github.com/cozy/cozy-ui/commit/59296f0))
+* **Overlay:** Add ref propagation ([6a0b3f0](https://github.com/cozy/cozy-ui/commit/6a0b3f0))
+
 # [69.1.0](https://github.com/cozy/cozy-ui/compare/v69.0.0...v69.1.0) (2022-07-05)
 
 

package/package.json

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

package/react/BottomDrawer/Readme.md

@@ -1,25 +1,34 @@
 Displays content coming up from the bottom of the screen.
 
 ```jsx
-import BottomDrawer from 'cozy-ui/transpiled/react/BottomDrawer';
-import Card from 'cozy-ui/transpiled/react/Card';
-import Button from 'cozy-ui/transpiled/react/Button';
-import Typography from "cozy-ui/transpiled/react/Typography";
+import BottomDrawer from 'cozy-ui/transpiled/react/BottomDrawer'
+import Paper from 'cozy-ui/transpiled/react/Paper'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Typography from "cozy-ui/transpiled/react/Typography"
+import Variants from 'cozy-ui/docs/components/Variants'
 
-initialState = { isDrawerDisplayed: isTesting() };
+const initialState = { isDrawerDisplayed: isTesting() }
+const initialVariants = [{ longText: false }]
 
 const showDrawer = () => setState({ isDrawerDisplayed: true });
-const hideDrawer = () => setState({ isDrawerDisplayed: false });
+const hideDrawer = () => setState({ isDrawerDisplayed: false })
 
-<div>
-  <Button onClick={showDrawer}>Open drawer</Button>
-  {state.isDrawerDisplayed &&
-    <BottomDrawer onClose={hideDrawer}>
-      <Card className="u-bg-white">
-        <Typography className="u-mb-1" variant="h5">This is a card in a drawer</Typography>
-        <Typography className="u-mb-1" variant="body1">This is some card content. Content can be small or huge.</Typography>
-        <Button className="u-ml-0" label="Demo button" />
-      </Card>
-  </BottomDrawer>}
-</div>
+;
+
+<Variants initialVariants={initialVariants}>
+  {variant => (
+    <>
+      <Button variant="ghost" size="small" onClick={showDrawer} label="Open drawer" />
+
+      {state.isDrawerDisplayed &&
+        <BottomDrawer onClose={hideDrawer}>
+          <Paper className="u-p-1" style={{ borderRadius: '1rem 1rem 0 0' }}>
+            <Typography variant="h5" paragraph>This is a paper in a drawer</Typography>
+            <Typography paragraph>{variant.longText ? content.ada.long : content.ada.short}</Typography>
+            <Button label="Demo button" onClick={() => console.info('huhu')} />
+          </Paper>
+      </BottomDrawer>}
+    </>
+  )}
+</Variants>
 ```

package/react/BottomDrawer/index.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { Component, createRef } from 'react'
 import PropTypes from 'prop-types'
 import Hammer from 'hammerjs'
 import once from 'lodash/once'
@@ -13,6 +13,8 @@ class BottomDrawer extends Component {
   constructor(props) {
     super(props)
     this.state = { closing: false }
+    this.menuRef = createRef()
+    this.wrapperRef = createRef()
   }
 
   componentDidMount() {
@@ -22,7 +24,7 @@ class BottomDrawer extends Component {
 
   componentWillUnmount() {
     this.gesturesHandler.destroy()
-    this.menuNode.current.style = '' // Drops the node style in case it gets recycled, see https://github.com/cozy/cozy-ui/pull/602
+    this.menuRef.current.style = '' // Drops the node style in case it gets recycled, see https://github.com/cozy/cozy-ui/pull/602
   }
 
   initialAppear() {
@@ -35,21 +37,21 @@ class BottomDrawer extends Component {
   }
 
   turnTransitionsOn() {
-    this.menuNode.current.classList.add(styles['with-transition'])
+    this.menuRef.current.classList.add(styles['with-transition'])
   }
 
   turnTransitionsOff() {
-    this.menuNode.current.classList.remove(styles['with-transition'])
+    this.menuRef.current.classList.remove(styles['with-transition'])
   }
 
   attachEvents() {
-    this.gesturesHandler = new Hammer.Manager(this.wrapperNode.current, {
+    this.gesturesHandler = new Hammer.Manager(this.wrapperRef.current, {
       recognizers: [[Hammer.Pan, { direction: Hammer.DIRECTION_VERTICAL }]]
     })
 
     // to be completely accurate, `maximumGestureDelta` should be the difference between the top of the menu and the
     // bottom of the page; but using the height is much easier to compute and accurate enough.
-    const maximumGestureDistance = this.menuNode.current.getBoundingClientRect()
+    const maximumGestureDistance = this.menuRef.current.getBoundingClientRect()
       .height
     // between 0 and 1, how far down the gesture must be to be considered complete upon release
     const minimumCloseDistance = 0.6
@@ -97,47 +99,47 @@ class BottomDrawer extends Component {
   applyTransformation(progress) {
     // constrain between 0 and 1.1 (go a bit further than 1 to be hidden completely)
     const progressToApply = Math.min(1.1, Math.max(0, progress))
-    this.menuNode.current.style.transform =
+    this.menuRef.current.style.transform =
       'translateY(' + progressToApply * 100 + '%)'
   }
 
   animateClose = () => {
+    const { current: menuNode } = this.menuRef
     this.setState({ closing: true })
 
     // we need to transition the menu to the bottom before dismissing it
-    const close = once(() => {
-      this.menuNode.current &&
-        this.menuNode.current.removeEventListener('transitionend', close)
-      this.close()
-    })
+    const close = menuNode =>
+      once(() => {
+        menuNode?.removeEventListener('transitionend', close(menuNode))
+        this.close()
+      })
 
-    this.menuNode.current &&
-      this.menuNode.current.addEventListener('transitionend', close, false)
+    menuNode?.addEventListener('transitionend', close(menuNode), false)
     // in case transitionend is not called, for example if the element is removed
-    setTimeout(close, TRANSITION_DURATION)
+    setTimeout(close(menuNode), TRANSITION_DURATION)
 
     this.applyTransformation(1.1)
   }
 
   close = () => {
+    const { onClose } = this.props
     this.setState({ closing: true })
-    this.props.onClose && this.props.onClose()
+    onClose && onClose()
   }
 
   render() {
     const { children } = this.props
     const { closing } = this.state
-    this.menuNode = React.createRef()
-    this.wrapperNode = React.createRef()
+
     return (
       <RemoveScroll>
-        <div ref={this.wrapperNode}>
+        <div ref={this.wrapperRef}>
           <Overlay
             style={{ opacity: closing ? 0 : 1 }}
             onClick={this.animateClose}
             onEscape={this.animateClose}
           >
-            <div ref={this.menuNode} className={styles['BottomDrawer-content']}>
+            <div ref={this.menuRef} className={styles['BottomDrawer-content']}>
               {children}
             </div>
           </Overlay>

package/react/BottomDrawer/styles.styl

@@ -8,11 +8,12 @@
     @extends $transition-transform-ease-out
 
 .BottomDrawer-content
-    z-index        $drawer-index
-    position       fixed
-    bottom         0
-    left           0
-    right          0
-    width          100%
-    margin         0
-
+    z-index $drawer-index
+    position fixed
+    bottom 0
+    left 0
+    right 0
+    width 100%
+    margin 0
+    max-height 100vh
+    overflow-y auto

package/react/Overlay/index.jsx

@@ -7,7 +7,7 @@ import { RemoveScroll } from 'react-remove-scroll'
 
 const ESC_KEYCODE = 27
 
-const nonDOMProps = ['onEscape', 'children', 'className']
+const nonDOMProps = ['onEscape', 'children', 'className', 'innerRef']
 
 const bodyTallerThanWindow = () => {
   return document.body.getBoundingClientRect().height > window.innerHeight
@@ -45,7 +45,7 @@ class Overlay extends Component {
   }
 
   render() {
-    const { children, className } = this.props
+    const { children, className, innerRef } = this.props
     const domProps = omit(this.props, nonDOMProps)
     // We use Overlay when opening an ActionMenu.
     // We don't want to block the scroll on Desktop if the ActionMenu
@@ -53,10 +53,12 @@ class Overlay extends Component {
     // @todo Overlay should not RemoveScroll by itself. It should
     // be done by lower component (like ActionMenu / Dialog / Modal...)
     const Wrapper = bodyTallerThanWindow() ? React.Fragment : RemoveScroll
+
     return (
       <div
-        onClick={this.handleClick}
+        ref={innerRef}
         className={cx(styles['c-overlay'], className)}
+        onClick={this.handleClick}
         {...domProps}
       >
         <Wrapper>{children}</Wrapper>
@@ -71,4 +73,6 @@ Overlay.propTypes = {
   onEscape: PropTypes.func
 }
 
-export default Overlay
+export default React.forwardRef((props, ref) => (
+  <Overlay innerRef={ref} {...props} />
+))

package/transpiled/react/BottomDrawer/index.js

@@ -10,7 +10,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import React, { Component } from 'react';
+import React, { Component, createRef } from 'react';
 import PropTypes from 'prop-types';
 import Hammer from 'hammerjs';
 import once from 'lodash/once';
@@ -37,34 +37,43 @@ var BottomDrawer = /*#__PURE__*/function (_Component) {
     _this = _super.call(this, props);
 
     _defineProperty(_assertThisInitialized(_this), "animateClose", function () {
+      var menuNode = _this.menuRef.current;
+
       _this.setState({
         closing: true
       }); // we need to transition the menu to the bottom before dismissing it
 
 
-      var close = once(function () {
-        _this.menuNode.current && _this.menuNode.current.removeEventListener('transitionend', close);
+      var close = function close(menuNode) {
+        return once(function () {
+          menuNode === null || menuNode === void 0 ? void 0 : menuNode.removeEventListener('transitionend', close(menuNode));
 
-        _this.close();
-      });
-      _this.menuNode.current && _this.menuNode.current.addEventListener('transitionend', close, false); // in case transitionend is not called, for example if the element is removed
+          _this.close();
+        });
+      };
 
-      setTimeout(close, TRANSITION_DURATION);
+      menuNode === null || menuNode === void 0 ? void 0 : menuNode.addEventListener('transitionend', close(menuNode), false); // in case transitionend is not called, for example if the element is removed
+
+      setTimeout(close(menuNode), TRANSITION_DURATION);
 
       _this.applyTransformation(1.1);
     });
 
     _defineProperty(_assertThisInitialized(_this), "close", function () {
+      var onClose = _this.props.onClose;
+
       _this.setState({
         closing: true
       });
 
-      _this.props.onClose && _this.props.onClose();
+      onClose && onClose();
     });
 
     _this.state = {
       closing: false
     };
+    _this.menuRef = /*#__PURE__*/createRef();
+    _this.wrapperRef = /*#__PURE__*/createRef();
     return _this;
   }
 
@@ -78,7 +87,7 @@ var BottomDrawer = /*#__PURE__*/function (_Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this.gesturesHandler.destroy();
-      this.menuNode.current.style = ''; // Drops the node style in case it gets recycled, see https://github.com/cozy/cozy-ui/pull/602
+      this.menuRef.current.style = ''; // Drops the node style in case it gets recycled, see https://github.com/cozy/cozy-ui/pull/602
     }
   }, {
     key: "initialAppear",
@@ -96,26 +105,26 @@ var BottomDrawer = /*#__PURE__*/function (_Component) {
   }, {
     key: "turnTransitionsOn",
     value: function turnTransitionsOn() {
-      this.menuNode.current.classList.add(styles['with-transition']);
+      this.menuRef.current.classList.add(styles['with-transition']);
     }
   }, {
     key: "turnTransitionsOff",
     value: function turnTransitionsOff() {
-      this.menuNode.current.classList.remove(styles['with-transition']);
+      this.menuRef.current.classList.remove(styles['with-transition']);
     }
   }, {
     key: "attachEvents",
     value: function attachEvents() {
       var _this3 = this;
 
-      this.gesturesHandler = new Hammer.Manager(this.wrapperNode.current, {
+      this.gesturesHandler = new Hammer.Manager(this.wrapperRef.current, {
         recognizers: [[Hammer.Pan, {
           direction: Hammer.DIRECTION_VERTICAL
         }]]
       }); // to be completely accurate, `maximumGestureDelta` should be the difference between the top of the menu and the
       // bottom of the page; but using the height is much easier to compute and accurate enough.
 
-      var maximumGestureDistance = this.menuNode.current.getBoundingClientRect().height; // between 0 and 1, how far down the gesture must be to be considered complete upon release
+      var maximumGestureDistance = this.menuRef.current.getBoundingClientRect().height; // between 0 and 1, how far down the gesture must be to be considered complete upon release
 
       var minimumCloseDistance = 0.6; // a gesture faster than this will dismiss the menu, regardless of distance traveled
 
@@ -162,17 +171,15 @@ var BottomDrawer = /*#__PURE__*/function (_Component) {
     value: function applyTransformation(progress) {
       // constrain between 0 and 1.1 (go a bit further than 1 to be hidden completely)
       var progressToApply = Math.min(1.1, Math.max(0, progress));
-      this.menuNode.current.style.transform = 'translateY(' + progressToApply * 100 + '%)';
+      this.menuRef.current.style.transform = 'translateY(' + progressToApply * 100 + '%)';
     }
   }, {
     key: "render",
     value: function render() {
       var children = this.props.children;
       var closing = this.state.closing;
-      this.menuNode = /*#__PURE__*/React.createRef();
-      this.wrapperNode = /*#__PURE__*/React.createRef();
       return /*#__PURE__*/React.createElement(RemoveScroll, null, /*#__PURE__*/React.createElement("div", {
-        ref: this.wrapperNode
+        ref: this.wrapperRef
       }, /*#__PURE__*/React.createElement(Overlay, {
         style: {
           opacity: closing ? 0 : 1
@@ -180,7 +187,7 @@ var BottomDrawer = /*#__PURE__*/function (_Component) {
         onClick: this.animateClose,
         onEscape: this.animateClose
       }, /*#__PURE__*/React.createElement("div", {
-        ref: this.menuNode,
+        ref: this.menuRef,
         className: styles['BottomDrawer-content']
       }, children))));
     }

package/transpiled/react/Overlay/index.js

@@ -20,7 +20,7 @@ import omit from 'lodash/omit';
 import PropTypes from 'prop-types';
 import { RemoveScroll } from 'react-remove-scroll';
 var ESC_KEYCODE = 27;
-var nonDOMProps = ['onEscape', 'children', 'className'];
+var nonDOMProps = ['onEscape', 'children', 'className', 'innerRef'];
 
 var bodyTallerThanWindow = function bodyTallerThanWindow() {
   return document.body.getBoundingClientRect().height > window.innerHeight;
@@ -83,7 +83,8 @@ var Overlay = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props = this.props,
           children = _this$props.children,
-          className = _this$props.className;
+          className = _this$props.className,
+          innerRef = _this$props.innerRef;
       var domProps = omit(this.props, nonDOMProps); // We use Overlay when opening an ActionMenu.
       // We don't want to block the scroll on Desktop if the ActionMenu
       // is displayed. So no RemoveScroll if the content is too small
@@ -92,8 +93,9 @@ var Overlay = /*#__PURE__*/function (_Component) {
 
       var Wrapper = bodyTallerThanWindow() ? React.Fragment : RemoveScroll;
       return /*#__PURE__*/React.createElement("div", _extends({
-        onClick: this.handleClick,
-        className: cx(styles['c-overlay'], className)
+        ref: innerRef,
+        className: cx(styles['c-overlay'], className),
+        onClick: this.handleClick
       }, domProps), /*#__PURE__*/React.createElement(Wrapper, null, children));
     }
   }]);
@@ -106,4 +108,8 @@ Overlay.propTypes = {
   children: PropTypes.node,
   onEscape: PropTypes.func
 };
-export default Overlay;
+export default /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Overlay, _extends({
+    innerRef: ref
+  }, props));
+});