cozy-ui 130.0.0 → 130.2.0

package/package.json

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

package/react/CozyDialogs/Readme.md

@@ -55,6 +55,7 @@ Additionally, all the CozyDialogs support [MUI Dialog's props](https://v4.mui.co
 ### Exemples
 
 ```jsx
+import { useRef, useEffect, useState } from 'react'
 import {
   Dialog,
   ConfirmDialog,
@@ -78,7 +79,14 @@ import FormControl from 'cozy-ui/transpiled/react/FormControl'
 import FormLabel from 'cozy-ui/transpiled/react/FormLabel'
 import BottomSheet, { BottomSheetItem } from 'cozy-ui/transpiled/react/BottomSheet'
 import Stack from 'cozy-ui/transpiled/react/Stack'
-
+import Menu from 'cozy-ui/transpiled/react/Menu'
+import MenuItem from 'cozy-ui/transpiled/react/MenuItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+
+import PenIcon from 'cozy-ui/transpiled/react/Icons/Pen'
+import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
+import AttachmentIcon from 'cozy-ui/transpiled/react/Icons/Attachment'
 import ToTheCloudIcon from 'cozy-ui/transpiled/react/Icons/ToTheCloud'
 import CloudIcon from "cozy-ui/transpiled/react/Icons/Cloud"
 import BackgroundImg from './background.png'
@@ -90,6 +98,8 @@ const handleBack = () => {
 }
 const hideBottomSheet = () => setState({ bottomSheetOpened: false })
 const showBottomSheet = () => setState({ bottomSheetOpened: true })
+const hideMenu = () => setState({ menuOpened: false })
+const showMenu = () => setState({ menuOpened: true })
 const hideSecondConfirmDialog = () => setState({ secondConfirmDialogOpened: false })
 const showSecondConfirmDialog = () => setState({ secondConfirmDialogOpened: true })
 const hideSecondDialog = () => setState({ secondDialogOpened: false })
@@ -189,6 +199,7 @@ const toggleDialog = dialog => {
 initialState = {
   modalOpened: isTesting(),
   bottomSheetOpened: false,
+  menuOpened: false,
   secondConfirmDialogOpened: false,
   secondDialogOpened: false,
   BSConfirmDialogOpened: false,
@@ -212,6 +223,60 @@ const initialVariants = [{
   withBackground: false
 }]
 
+const ButtonMenu = () => {
+  const [forceRender, setForceRender] = useState(0)
+  const menuRef = useRef()
+
+  useEffect(() => {
+    if (menuRef.current) {
+      setForceRender(1)
+    }
+  }, [menuRef])
+
+  return (
+    <div ref={menuRef}>
+      <Button label="Show menu" onClick={showMenu}/>
+
+      {state.menuOpened && menuRef.current && (
+        <Menu
+            open
+            anchorEl={menuRef.current}
+            getContentAnchorEl={null}
+            anchorOrigin={{
+              vertical: 'bottom',
+              horizontal: 'left'
+            }}
+            transformOrigin={{
+              vertical: 'top',
+              horizontal: 'left'
+            }}
+            keepMounted
+            onClose={hideMenu}
+          >
+          <MenuItem onClick={hideMenu}>
+            <ListItemIcon>
+              <Icon icon={PenIcon} />
+            </ListItemIcon>
+            <ListItemText primary="Modify" />
+          </MenuItem>
+          <MenuItem onClick={hideMenu}>
+            <ListItemIcon>
+              <Icon icon={PeopleIcon} />
+            </ListItemIcon>
+            <ListItemText primary="People" />
+          </MenuItem>
+          <MenuItem onClick={hideMenu}>
+            <ListItemIcon>
+              <Icon icon={AttachmentIcon} />
+            </ListItemIcon>
+            <ListItemText primary="Attachment" />
+          </MenuItem>
+        </Menu>
+      )}
+    </div>
+  )
+}
+
 ;
 
 <DemoProvider>
@@ -329,6 +394,7 @@ const initialVariants = [{
                     <div>
                       <Button label="Show inner dialog" onClick={showSecondDialog}/>
                     </div>
+                    <ButtonMenu />
                   </Stack>
                 </Typography>
 

package/react/Icons/CozyUpgrade.jsx

@@ -3,63 +3,51 @@ import React from 'react'
 
 function SvgCozyUpgrade(props) {
   return (
-    <svg viewBox="0 0 128 128" fill="none" {...props}>
+    <svg viewBox="0 0 122 118" fill="none" {...props}>
       <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M115.149 70.393c-.483-5.764-3.108-11.079-7.096-15.408-4.338-4.707-10.593-8.496-17.246-9.151a27.82 27.82 0 00-20.435-23.542 28.937 28.937 0 00-6.54-.974v-.006c-.01.002-.022.002-.032.002-.011 0-.022 0-.033-.002v.006a28.862 28.862 0 00-6.54.974c-11.308 3.04-19.138 12.606-20.434 23.542-6.655.655-12.91 4.444-17.247 9.151-3.988 4.33-6.615 9.644-7.1 15.408a22.135 22.135 0 00.327 5.968c.391 2.719 1.612 6.666 3.359 9.682 4.59 7.928 12.415 11.21 22.102 12.896 5.35.93 10.428 1.488 25.062 1.488l.471.002h.065l.47-.002c14.635 0 19.713-.557 25.061-1.488 9.687-1.686 17.513-4.968 22.102-12.896 1.749-3.016 2.97-6.963 3.361-9.682.373-1.965.493-3.976.323-5.968z"
-        fill="#fff"
+        d="M71.898 65.758c-.189 1.885-1.886 3.016-3.582 2.827h-.189c-1.697-.188-3.016-1.885-2.828-3.581 1.131-10.746.566-22.434-7.352-29.787-5.467-4.901-14.328-6.22-21.303-3.016-6.032 2.828-10.368 8.672-11.877 15.27-.377 1.697-1.696 2.828-3.393 2.64h-.188c-2.074-.19-3.394-2.074-3.017-3.96 1.697-8.672 7.73-16.4 15.459-20.171 9.237-4.336 20.926-2.64 28.466 4.147 3.017 2.64 5.28 6.221 6.976 10.18 3.77 8.295 3.77 16.779 2.828 25.45z"
+        fill="#FFE09D"
+      />
+      <path
+        d="M72.275 61.798c-2.263.188-4.336 0-6.599-.189.566-9.614-.565-19.795-7.729-26.393-5.467-4.901-14.328-6.221-21.303-3.016-6.032 2.828-10.368 8.672-11.877 15.27-.377 1.697-1.696 2.828-3.393 2.64h-.189c-1.13 0-2.073-.755-2.639-1.697 2.828-6.599 7.352-12.254 13.574-16.025 7.729-4.713 18.098-5.655 26.016-1.13 4.147 2.45 7.352 6.032 11.122 9.237 1.131 2.64 1.885 5.467 2.451 8.483.754 4.525.754 10.18.566 12.82z"
+        fill="#FFE09D"
       />
       <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M57.845 24.584a26.48 26.48 0 015.954-.892 26.51 26.51 0 015.957.892C79.881 27.306 87.22 35.758 88.45 46.112a2.371 2.371 0 002.123 2.082c5.507.544 11.389 3.682 15.734 8.4 3.818 4.142 6.058 8.984 6.478 13.997v.002a19.714 19.714 0 01-.291 5.324l-.018.106a19.73 19.73 0 01-.317 1.651A12.85 12.85 0 01115.498 83c.884-2.354 1.431-4.627 1.67-6.247.412-2.195.529-4.401.347-6.56-.509-6.074-3.177-11.89-7.718-16.816-4.713-5.116-10.787-8.565-16.905-9.65C90.826 32.274 82.4 23.067 70.99 20a31.266 31.266 0 00-6.911-1.047 2.178 2.178 0 00-.358-.012 3.077 3.077 0 00-.193.01 31.244 31.244 0 00-6.916 1.05c-11.413 3.067-19.84 12.272-21.904 23.726-6.122 1.085-12.196 4.534-16.907 9.65-4.539 4.924-7.207 10.742-7.718 16.818a24.436 24.436 0 00.348 6.558c.382 2.598 1.562 6.879 3.647 10.478 5.656 9.772 15.663 12.639 23.749 14.045 5.806 1.011 11.34 1.524 25.468 1.524l.472.002h.08l.456-.002c5.336 0 9.447-.073 12.809-.219a15.698 15.698 0 01.06-2.8l.069-.573.05-.352.054-.336.062-.325.073-.321.014-.058c-3.293.152-7.5.237-13.191.237l-.53.002-.478-.002c-15.132 0-19.764-.602-24.654-1.454C28 94.749 21.883 91.235 18.187 84.853c-1.641-2.83-2.739-6.56-3.065-8.83a2.164 2.164 0 00-.018-.106 19.794 19.794 0 01-.292-5.326c.423-5.014 2.663-9.854 6.48-13.997 4.342-4.718 10.226-7.856 15.733-8.4a2.371 2.371 0 002.123-2.082c1.23-10.354 8.567-18.806 18.697-21.528z"
-        fill="#3281EE"
+        d="M75.29 110.813c-.188 2.262-1.884 3.959-4.147 4.147-19.794 1.509-35.819 1.697-52.22 1.32-4.147 0-6.41-2.639-7.54-6.033-1.697-4.147-1.509-9.991-1.697-13.762-.189-12.065 2.073-25.261 11.31-33.556 17.156-15.082 44.869-8.107 52.598 6.41 5.467 9.991 2.64 26.015 1.697 41.474z"
+        fill="#E0EDFF"
       />
       <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M81.82 71.666c-1.06-.782-2.3-2.349-2.257-3.124.046-.801-.294-1.502-.934-1.922-.68-.445-1.606-.49-2.359-.111a2.243 2.243 0 00-1.232 1.9c-.062 1.132.276 2.099.77 2.965-7.389 3.895-17.21 3.743-24.187-.427.447-.936.684-2.01.53-3.235-.178-1.4-1.489-2.114-2.6-1.976-1.168.147-1.909 1.101-1.762 2.268.17 1.345-.954 2.298-2.44 3.4a2.227 2.227 0 00-.893 2.066c.094.814.611 1.537 1.314 1.842.25.108.51.162.767.162a2.07 2.07 0 001.236-.43c.36-.266.785-.584 1.23-.953 4.406 2.677 9.749 4.024 15.098 4.024 4.99 0 9.987-1.173 14.23-3.522.305.292.633.58.993.846.404.296.847.442 1.28.442.636 0 1.247-.307 1.68-.892.699-.948.717-2.45-.463-3.323zm23.27 6.424a.035.035 0 01-.013-.003.07.07 0 00-.012-.005c-9.842-3.563-13.751 5.785-14.71 8.425a2.194 2.194 0 001.312 2.813 2.194 2.194 0 002.814-1.31c.208-.576 3.075-7.964 9.095-5.798 6.002 2.21 3.45 9.714 3.242 10.288a2.195 2.195 0 104.127 1.501c.959-2.64 3.974-12.315-5.855-15.91z"
-        fill="#3281EE"
+        d="M51.349 81.781c1.697 2.828 1.131 6.787-1.131 9.238-2.262 2.45-6.033 3.205-9.05 1.885-3.015-1.32-4.9-4.713-4.712-8.106.754-7.353 11.122-9.615 14.893-3.017z"
+        fill="#ACF"
       />
       <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M112.131 102.779c.425-1.713.913-4.089.913-4.089.389-1.854-.577-3.726-2.261-4.53l-19.986-7.273c-1.806-.468-3.748.344-4.643 2.017 0 0-1.155 2.132-1.932 3.718-1.395 2.858-2.727 5.328-2.985 7.617-.693 6.22 3.79 12.417 10.593 14.903 6.809 2.469 14.226.602 17.69-4.607 1.277-1.921 1.842-4.67 2.611-7.756z"
-        fill="#B2D3FF"
+        d="M41.357 101.01V90.453c0-1.508 1.132-2.64 2.64-2.64h.565c1.508 0 2.64 1.132 2.64 2.64v10.557c-.189 3.582-5.845 3.582-5.845 0z"
+        fill="#ACF"
       />
       <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M88.925 91.71c-.046.467.124.965.33 1.222.546.699 1.636.927 2.362.398.732-.535 1.214-1.616.36-2.63-.727-.864-2.083-.68-2.727.194a1.693 1.693 0 00-.325.816zm-4.963 8.787c-.046.466.124.963.328 1.219.547.701 1.638.929 2.362.4.734-.534 1.216-1.616.363-2.629-.728-.864-2.084-.681-2.73.194a1.688 1.688 0 00-.323.816zm7.456 10.861c-.047.464.121.963.326 1.219.549.701 1.637.929 2.363.4.732-.534 1.215-1.616.36-2.629-.727-.864-2.083-.681-2.728.192a1.682 1.682 0 00-.322.818zm12.526-3.453c-.046.465.124.963.328 1.221.549.7 1.638.927 2.364.398.732-.534 1.214-1.615.36-2.629-.728-.864-2.083-.681-2.729.192a1.712 1.712 0 00-.323.818zm1.846-9.921c-.046.467.124.965.328 1.221.547.7 1.638.928 2.364.398.732-.534 1.214-1.615.36-2.628-.728-.865-2.083-.68-2.729.193a1.695 1.695 0 00-.323.816z"
-        fill="#3281EE"
+        d="M84.529 92.15c-.566 0-33.557-2.073-37.516-2.262-1.508 0-3.393.377-4.147-.943-.566-.942-.377-3.393.754-4.147.942-.566 3.582 0 4.713 0 26.204 1.131 36.761 1.32 36.761 1.508-.188 2.64-.754 3.394-.565 5.844z"
+        fill="#FFE09D"
       />
       <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M100.802 96.234c-1.718-2.037-4.913-1.605-6.436.456a4.005 4.005 0 00-.762 1.925c-.11 1.094.293 2.267.768 2.873-.336.856-.71 1.847-1.153 3.072-1.015 2.796 3.297 4.492 4.32 1.679.471-1.306.87-2.355 1.223-3.25.421-.109.823-.29 1.189-.554 1.725-1.26 2.862-3.809.851-6.201z"
-        fill="#FEDBA7"
+        d="M94.709 73.863c-10.18 0-16.402 13.762-11.5 24.508 2.262 5.09 6.598 8.483 11.5 8.483 7.352 0 13.196-7.352 13.196-16.4 0-9.992-6.598-16.59-13.196-16.59zm-.566 24.508c-3.393-.377-6.033-3.959-6.033-8.295 0-6.975 6.41-10.746 10.746-6.41 4.902 5.09 1.697 15.46-4.713 14.705z"
+        fill="#FFE09D"
       />
       <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M98.794 96.382a2.624 2.624 0 00-.988-.153 3.14 3.14 0 00-2.378 1.245c-.28.378-.466.843-.51 1.275-.08.782.248 1.612.494 1.926l.464.594-.276.702a116.38 116.38 0 00-1.14 3.038c-.316.868.496 1.214.666 1.275.002 0 .002 0 .002.002.327.119.913.212 1.168-.497.45-1.242.855-2.317 1.239-3.285l.246-.62.645-.171c.284-.073.536-.192.752-.348.751-.548 1.26-1.354 1.357-2.15.088-.724-.161-1.442-.74-2.13a2.346 2.346 0 00-1.001-.703zm-4.57 12.382c-1.685-.613-3.044-2.451-2.246-4.655.346-.952.65-1.768.927-2.487-.429-.834-.73-1.98-.612-3.14a5.318 5.318 0 011.011-2.577 5.78 5.78 0 014.417-2.315c1.595-.05 3.087.602 4.091 1.793l.002.002c1.052 1.255 1.517 2.69 1.341 4.148-.186 1.531-1.07 2.976-2.426 3.966a4.709 4.709 0 01-.961.54 125.98 125.98 0 00-.99 2.649c-.784 2.164-2.882 2.683-4.55 2.078-.002 0-.003 0-.003-.002z"
-        fill="#3281EE"
+        d="M94.709 106.666c-4.902 0-9.238-3.393-11.5-8.483 3.77 1.13 7.54 1.696 10.934.188 6.598.566 9.615-9.614 4.525-14.704.188-.943.565-1.886 1.32-2.64 1.319-1.32 3.393-1.508 5.089-.754 6.599 10.934.377 26.393-10.368 26.393z"
+        fill="#FFE09D"
       />
       <path
-        d="M29.419 125.29a81.818 81.818 0 0016.14 2.244c16.167.948 38.76.424 48.326-1.346 9.567-1.771 10.083-4.465-14.448-5.812-20.925-1.147-45.26.474-50.362 2.894-1.52.648-1.447 1.371.344 2.02z"
-        fill="#BBD9FD"
+        d="M11.194 114.395c-1.885-2.262-1.885-5.278-1.885-8.294.377-19.795 0-30.54 6.41-38.082.377-.377.942-.377 1.32-.188.377.377.377.942.188 1.32-4.524 5.278-5.09 12.819-5.467 19.983-.189 5.655-.377 11.311-.377 16.967-.189 7.163 1.508 9.614 10.18 9.426 13.196-.189 40.343-.566 39.966-.566.566 0 .943.377.943.943 0 .565-.377.942-.943.942l-39.966.566c-4.147.188-8.106 0-10.369-3.017zm93.883-67.867c-4.901.754-12.442-.754-16.778-3.582-.377-.189-.754-.189-.943 0-3.204 2.45-7.729 3.393-11.688 2.64-.754-.19-.942-1.132-.377-1.509 2.828-1.885 4.525-5.09 4.902-8.106 0-.377-.189-.566-.377-.754-4.902-3.582-7.73-10.746-6.976-16.59C75.103 4.11 93.012-4.561 107.528 2.602a25.824 25.824 0 0111.877 12.254c6.41 13.762-.377 29.221-14.328 31.672z"
+        fill="#ACF"
+      />
+      <path
+        d="M94.52 31.823l-8.483-6.975c-.566-.377-.566-1.32-.189-1.885l.943-1.131c.377-.566 1.32-.566 1.885-.189l4.901 4.148c.377.377 1.132.377 1.697 0 5.09-4.148 10.557-7.918 16.024-11.5.566-.377 1.32-.189 1.697.377l.754 1.32c.377.565.189 1.32-.377 1.696-10.369 6.976-18.287 13.762-18.852 14.14z"
+        fill="#fff"
       />
       <path
-        d="M16 43c-.61 0-1.22-.488-1.22-1.22 0-.487-.121-2.56-2.56-2.56-.61 0-1.22-.488-1.22-1.22s.488-1.22 1.22-1.22c.365 0 2.56-.122 2.56-2.56 0-.61.488-1.22 1.22-1.22.61 0 1.22.488 1.22 1.22 0 .365.122 2.56 2.56 2.56.61 0 1.22.488 1.22 1.22s-.488 1.22-1.22 1.22c-.365 0-2.56.122-2.56 2.56-.122.732-.61 1.22-1.22 1.22zm73-21c-.61 0-1.22-.488-1.22-1.22 0-.487-.121-2.56-2.56-2.56-.61 0-1.22-.488-1.22-1.22s.488-1.22 1.22-1.22c.365 0 2.56-.121 2.56-2.56 0-.61.488-1.22 1.22-1.22.61 0 1.22.488 1.22 1.22 0 .365.121 2.56 2.56 2.56.61 0 1.22.488 1.22 1.22s-.488 1.22-1.22 1.22c-.365 0-2.56.122-2.56 2.56-.122.732-.61 1.22-1.22 1.22zm-59 4c-.91 0-1.818-.727-1.818-1.818 0-3.455-2.91-6.364-6.364-6.364C20.91 17.818 20 17.091 20 16c0-.91.727-1.818 1.818-1.818 3.455 0 6.364-2.91 6.364-6.364C28.182 6.91 28.909 6 30 6c.91 0 1.818.727 1.818 1.818 0 3.455 2.91 6.364 6.364 6.364.909 0 1.818.727 1.818 1.818 0 .91-.727 1.818-1.818 1.818-3.455 0-6.364 2.91-6.364 6.364C31.818 25.09 31.091 26 30 26zm-2.546-10c.91.727 1.819 1.454 2.546 2.546.727-.91 1.454-1.819 2.545-2.546-.909-.727-1.818-1.454-2.545-2.546A5.744 5.744 0 0127.454 16zM107 42c-.909 0-1.818-.727-1.818-1.818 0-3.455-2.909-6.364-6.364-6.364C97.91 33.818 97 33.091 97 32c0-.91.727-1.818 1.818-1.818 3.455 0 6.364-2.91 6.364-6.364 0-.909.727-1.818 1.818-1.818.909 0 1.818.727 1.818 1.818 0 3.455 2.909 6.364 6.364 6.364.909 0 1.818.727 1.818 1.818 0 .91-.727 1.818-1.818 1.818-3.455 0-6.364 2.91-6.364 6.364 0 .909-.727 1.818-1.818 1.818zm-2.545-10c.909.727 1.818 1.455 2.545 2.545.727-.909 1.455-1.818 2.545-2.545-.909-.727-1.818-1.454-2.545-2.546A5.745 5.745 0 01104.455 32z"
-        fill="#FF9300"
+        d="M9.686 59.347a23.88 23.88 0 01-8.86-1.696C.26 57.462.07 56.896.26 56.33c.188-.566.754-.754 1.32-.566 4.147 1.697 7.352 1.508 8.294 1.697.566 0 .943.377.943.943 0 .565-.566.942-1.131.942zm1.696-5.467a40.085 40.085 0 01-8.295-4.901c-.377-.566-.565-1.132-.188-1.508.377-.378.943-.566 1.32-.19 2.45 1.886 5.09 3.394 8.106 4.714.566.189.754.754.377 1.32-.188.565-.754.754-1.32.565zm1.32-5.467l-2.074-5.467c-.188-.566 0-.943.566-1.131.565-.189.942 0 1.131.565l2.074 5.467c.188.566 0 .943-.566 1.132-.565.188-.942 0-1.131-.566z"
+        fill="#ACF"
       />
-      <circle cx={11} cy={23} r={2} fill="#FF8E8E" />
-      <circle cx={30} cy={34} r={2} fill="#FF8E8E" />
-      <circle cx={50} cy={12} r={2} fill="#FF8E8E" />
-      <circle cx={107} cy={12} r={2} fill="#FF8E8E" />
-      <circle cx={117} cy={47} r={2} fill="#FF8E8E" />
-      <circle cx={8} cy={53} r={2} fill="#FF8E8E" />
     </svg>
   )
 }

package/react/Paywall/Readme.md

@@ -27,7 +27,6 @@ import {
 import Variants from 'cozy-ui/docs/components/Variants'
 import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import Button from 'cozy-ui/transpiled/react/Buttons'
-import { createFakeClient } from 'cozy-client'
 
 const initialVariants = [
   {
@@ -76,45 +75,36 @@ const togglePaywall = paywall => {
   })
 }
 
-const makeClient = premiumLink =>
-  createFakeClient({
-    queries: {
-      'io.cozy.settings/io.cozy.settings.instance': {
-        doctype: 'io.cozy.settings',
-        definition: {
-          doctype: 'io.cozy.settings',
-          id: 'io.cozy.settings/io.cozy.settings.instance'
-        },
-        data: [
-          {
-            id: 'io.cozy.settings/io.cozy.settings.instance',
-            attributes: {
-              uuid: '1223'
-            }
-          }
-        ]
-      },
-      'io.cozy.settings/io.cozy.settings.context': {
-        doctype: 'io.cozy.settings',
-        definition: {
-          doctype: 'io.cozy.settings',
-          id: 'io.cozy.settings/io.cozy.settings.context'
-        },
-        data: [
-          {
-            id: 'io.cozy.settings/io.cozy.settings.context',
-            attributes: {
-              enable_premium_links: premiumLink,
-              manager_url: 'http://mycozy.cloud',
-              reply_to: 'support@cozy.io'
-            }
-          }
-        ]
+const makeClient = premiumLink => ({
+  store: {
+    getState: () => {},
+    subscribe: () => {},
+    unsubscribe: () => {}
+  },
+  getInstanceOptions: () => {},
+  query: () => {},
+  getQueryFromState: queryName => {
+    if (queryName === 'io.cozy.settings/io.cozy.settings.instance') {
+      return {
+        data: {
+          uuid: '1223'
+        }
+      }
+    } else if (queryName === 'io.cozy.settings/io.cozy.settings.context') {
+      return {
+        data: {
+          enable_premium_links: premiumLink,
+          manager_url: 'http://mycozy.cloud',
+          reply_to: 'support@cozy.io'
+        }
       }
     }
-  })
+  }
+})
+
+;
 
-;<Variants initialVariants={initialVariants}>
+<Variants initialVariants={initialVariants}>
   {variant => (
     <DemoProvider client={makeClient(variant.premiumLink)}>
       <div>

package/stylus/objects/sidebar.styl

@@ -11,12 +11,15 @@
 $sidebar
     width rem(236)
     background-color var(--defaultBackgroundColor)
-    overflow-y auto
+    overflow-y hidden
     overflow-x hidden
     display flex
     flex-direction column
     flex 0 0 auto
 
+    &:hover
+        overflow-y auto
+
     &--border
         border-right rem(1) solid var(--dividerColor)