cozy-ui 127.4.0 → 127.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "127.4.0",
+  "version": "127.6.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -183,7 +183,7 @@
     "react-select": "^4.3.0",
     "react-swipeable-views": "^0.13.3",
     "react-virtuoso": "4.12.7",
-    "rooks": "^5.11.2"
+    "rooks": "7.14.1"
   },
   "peerDependencies": {
     "cozy-client": ">=52.1.0",

package/react/Layout/Layout.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import React, { createContext, forwardRef, useContext, useMemo } from 'react'
 
 import styles from './styles.styl'
+import { useBreakpoints } from '../providers/Breakpoints'
 
 export const LayoutContext = createContext()
 
@@ -33,20 +34,13 @@ LayoutProvider.displayName = 'LayoutProvider'
 
 export const Layout = forwardRef(
   ({ children, className, monoColumn, withTopBar, ...props }, ref) => {
-    const variant = monoColumn ? 'monocolumn' : '2panes'
-
     return (
       <LayoutProvider monoColumn={monoColumn} withTopBar={withTopBar}>
         <div
           ref={ref}
-          className={cx(
-            className,
-            styles['o-layout'],
-            styles[`o-layout-${variant}`],
-            {
-              [styles[`o-layout-topbar`]]: withTopBar
-            }
-          )}
+          className={cx(className, styles['o-layout'], {
+            [styles['o-layout-main-2panes']]: !monoColumn
+          })}
           {...props}
         >
           {children}
@@ -59,20 +53,16 @@ export const Layout = forwardRef(
 Layout.displayName = 'Layout'
 
 export const Main = forwardRef(({ className, children, ...props }, ref) => {
+  const { isDesktop } = useBreakpoints()
   const { monoColumn, withTopBar } = useLayout()
-  const variant = monoColumn ? 'monocolumn' : '2panes'
 
   return (
     <main
       ref={ref}
-      className={cx(
-        className,
-        styles['o-layout-main'],
-        styles[`o-layout-main-${variant}`],
-        {
-          [styles[`o-layout-main-${variant}--topbar`]]: withTopBar
-        }
-      )}
+      className={cx(className, styles['o-layout-main'], {
+        [styles['o-layout-main-2panes']]: !monoColumn,
+        [styles[`o-layout-main-topbar`]]: withTopBar && !isDesktop
+      })}
       {...props}
     >
       {children}

package/react/Layout/Layout.md

@@ -29,8 +29,13 @@ import Sidebar from 'cozy-ui/transpiled/react/Sidebar'
 import Nav, { NavItem, NavIcon, NavText, genNavLink, NavDesktopLimiter } from 'cozy-ui/transpiled/react/Nav'
 import cx from 'classnames'
 import isEqual from 'lodash/isEqual'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import WarnIcon from 'cozy-ui/transpiled/react/Icons/Warn'
 import CheckIcon from 'cozy-ui/transpiled/react/Icons/Check'
+import CrossMediumIcon from 'cozy-ui/transpiled/react/Icons/CrossMedium'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Dialog from 'cozy-ui/transpiled/react/Dialog'
 import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
 import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import { makeStyles } from 'cozy-ui/transpiled/react/styles'
@@ -51,18 +56,36 @@ const ExampleRouterNavLink = ({ children, className, active, activeClassName, on
 const NavLink = genNavLink(ExampleRouterNavLink)
 
 // Not necessary in a normal app
-const useStyles = makeStyles({
-  layout: {
-    position: 'relative',
-    transform: 'translateZ(0)',
-    '& > main': {
-      minHeight: 'unset'
+const useStyles = makeStyles(theme => ({
+  topBar: { // same style than the cozy-bar
+    display: 'flex',
+    alignItems: 'center',
+    padding: '0 1rem',
+    minHeight: '3rem',
+    width: '100%',
+    boxSizing: 'border-box',
+    zIndex: 'var(--zIndex-bar)',
+    backgroundColor: theme.palette.background.default,
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    [theme.breakpoints.up('lg')]: {
+      position: 'relative',
     }
+  },
+  closeButton: {
+    position: 'absolute',
+    top: '1.15rem',
+    right: '1.15rem',
+    zIndex: 'var(--zIndex-modal-toolbar)',
+    backgroundColor: theme.palette.background.paper
   }
-})
+}))
 
-const initialVariants = [{ monoColumn: false, withTopBar: true }]
+const initialVariants = [{ monoColumn: false, withTopBar: true, longContent: true }]
 const [active, setActive] = useState(['Section 1', 'Subsection 1'])
+const [showDialog, setShowDialog] = useState(isTesting() ? true : false)
 const styles = useStyles()
 
 ;
@@ -112,23 +135,50 @@ const SideBar = ({ variant }) => {
   )
 }
 
-<Variants initialVariants={initialVariants} screenshotAllVariants>
+<Variants initialVariants={initialVariants}>
   {variant => (
     <DemoProvider>
-      <Layout
-        className={styles.layout}
-        withTopBar={variant.withTopBar}
-        monoColumn={variant.monoColumn}
-      >
-        {!variant.monoColumn && <SideBar variant={variant} />}
-        {variant.withTopBar && <div className="u-flex-m u-dn u-flex-items-center u-pos-absolute u-top-0 u-w-100" style={{ height: '48px', backgroundColor: 'var(--defaultBackgroundColor)' }}>Fake TopBar</div>}
-        <Main>
-          <Content className='u-p-1'>
-            <h2 className='u-mt-0'>{ active.join(' / ') }</h2>
-            { content.ada.short }
-          </Content>
-        </Main>
-      </Layout>
+      <Button className="u-mb-1" label="Open layout in modal" onClick={() => setShowDialog(true)} />
+      {showDialog && (
+        <Dialog
+          className="cozy-ui-body"
+          open
+          fullScreen
+          fullWidth
+        >
+          <IconButton
+            className={styles.closeButton}
+            onClick={() => setShowDialog(false)}
+          >
+            <Icon icon={CrossMediumIcon} />
+          </IconButton>
+          {variant.withTopBar &&
+            <div
+              id="coz-bar"
+              role="banner"
+              className={styles.topBar}
+            >
+              Fake TopBar
+            </div>
+          }
+          <div role="application">
+            <Layout
+              withTopBar={variant.withTopBar}
+              monoColumn={variant.monoColumn}
+            >
+              {!variant.monoColumn && <SideBar variant={variant} />}
+              <Main>
+                <Content className='u-p-1'>
+                  <h2 className='u-mt-0'>{ active.join(' / ') }</h2>
+                  <p>---Start---</p>
+                  {variant.longContent ? content.ada.long : content.ada.short}
+                  <p>---END---</p>
+                </Content>
+              </Main>
+            </Layout>
+          </div>
+        </Dialog>
+      )}
     </DemoProvider>
   )}
 </Variants>

package/react/Table/Readme.md

@@ -110,8 +110,9 @@ const onSelectAll = rows => {
     onSelectAll={onSelectAll}
     componentsProps={{
       rowContent: {
-        onClick: (row, column) => { console.info(`click on cell. Row ${row['id']}, Column ${column['id']}`) }
-      }
+        onClick: (row, column) => { console.info(`click on cell. Row ${row['id']}, Column ${column['id']}`) },
+        onLongPress: (row, column) => { console.info(`long press on cell. Row ${row['id']}, Column ${column['id']}`) },
+      },
     }}
   />
 </div>

package/react/Table/Virtualized/Cell.jsx

@@ -1,5 +1,6 @@
 import get from 'lodash/get'
-import React from 'react'
+import React, { useState } from 'react'
+import { useOnLongPress } from 'rooks'
 
 import TableCell from '../../TableCell'
 import { makeStyles } from '../../styles'
@@ -12,17 +13,34 @@ const useStyles = makeStyles({
   }
 })
 
-const Cell = ({ row, columns, column, onClick, children }) => {
+const Cell = ({ row, columns, column, onClick, onLongPress, children }) => {
+  const [isLongPress, setIsLongPress] = useState(false) // onClick is triggered after a long press anyway, so we need this bool to avoid this behavior
+
   const classes = useStyles({ column, isClickable: !!onClick })
   const cellContent = get(row, column.id, '—')
 
+  const longPressRef = useOnLongPress(() => {
+    setIsLongPress(true)
+    onLongPress?.(row, column)
+  })
+
+  const handleClick = () => {
+    if (!isLongPress) {
+      onClick?.(row, column)
+    } else {
+      setIsLongPress(false)
+    }
+  }
+
   return (
     <TableCell
       key={column.id}
+      ref={longPressRef}
       classes={classes}
       align={column.textAlign ?? 'left'}
       padding={column.disablePadding ? 'none' : 'normal'}
-      onClick={() => onClick?.(row, column)}
+      onClick={handleClick}
+      onContextMenu={isLongPress ? ev => ev.preventDefault() : undefined}
     >
       {children
         ? React.Children.map(children, child =>

package/react/Table/Virtualized/Dnd/virtuosoComponents.jsx

@@ -17,9 +17,9 @@ const virtuosoComponentsDnd = {
       <TableContainer {...props} ref={ref} />
     </DnDConfigWrapper>
   )),
-  TableRow: forwardRef((props, ref) => {
-    return <TableRowDnD {...props} ref={ref} />
-  })
+  TableRow: props => {
+    return <TableRowDnD {...props} />
+  }
 }
 
 export default virtuosoComponentsDnd

package/react/Table/Virtualized/RowContent.jsx

@@ -12,6 +12,7 @@ const RowContent = ({
   context,
   children,
   onSelectClick,
+  onLongPress,
   onClick
 }) => {
   const selectedCount = context.selectedItems.length
@@ -39,6 +40,7 @@ const RowContent = ({
           columns={columns}
           column={column}
           onClick={onClick}
+          onLongPress={onLongPress}
         >
           {children}
         </Cell>

package/react/Table/Virtualized/TableRow.jsx

@@ -1,20 +1,19 @@
 import cx from 'classnames'
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import TableRowClassic from '../../TableRow'
 
-const TableRow = forwardRef(({ item, context, className, ...props }, ref) => {
+const TableRow = ({ item, context, className, ...props }) => {
   const isSelected = context?.isSelectedItem(item)
 
   return (
     <TableRowClassic
       {...props}
       className={cx(className, 'virtualized')}
-      ref={ref}
       selected={isSelected}
       hover
     />
   )
-})
+}
 
 export default TableRow

package/react/Table/Virtualized/index.jsx

@@ -76,7 +76,6 @@ const VirtualizedTable = forwardRef(
             columns={columns}
             context={context}
             onSelectClick={onSelect}
-            onClick={componentsProps?.rowContent?.onClick}
           >
             {componentsProps?.rowContent?.children}
           </RowContent>

package/react/Table/Virtualized/virtuosoComponents.jsx

@@ -29,7 +29,7 @@ const virtuosoComponents = {
   TableFooter: forwardRef(({ context, ...props }, ref) => (
     <TableFooter {...props} ref={ref} />
   )),
-  TableRow: forwardRef((props, ref) => <TableRow {...props} ref={ref} />)
+  TableRow: props => <TableRow {...props} />
 }
 
 export default virtuosoComponents

package/react/UploadQueue/Readme.md

@@ -44,7 +44,7 @@ const data = {
       loaded: 100,
       total: 400,
       speed: 135000,
-      remainingTime: 90
+      remainingTime: 120
     },
     status: 'loading'
   }, {

package/scripts/screenshots/screenshotComponent.js

@@ -1,4 +1,5 @@
 const path = require('path')
+
 const { sleep } = require('./helpers')
 
 const rootDirectory = path.join(__dirname, '../')
@@ -22,17 +23,12 @@ const getDefaultScreenshotName = ({
  * component.
  */
 const screenshotComponent = async (page, options) => {
-  const {
-    component,
-    screenshotDir,
-    viewport,
-    type,
-    variant,
-    componentConfig
-  } = options
+  const { component, screenshotDir, viewport, type, variant, componentConfig } =
+    options
   const { link, name } = component
 
   await page.goto(link)
+  await page.addStyleTag({ content: 'body {height: auto;}' }) // to resize viewport according to its content
   await sleep(200) // to be sure the page is entirely loaded
 
   const getScreenshotName =

package/stylus/elements/defaults.styl

@@ -35,21 +35,11 @@ body
     textarea
         @extend $font-labor
 
-html
-body
-    +medium-screen()
-        display block
-        height auto
-
 [role=application]
     display     flex
     height      inherit
     flex        1 1 100%
-    overflow-x  hidden
-    overflow-y  auto
-
-    +medium-screen()
-        overflow visible
+    overflow  hidden auto
 
 // FORMS
 @require '../components/forms'

package/stylus/objects/layouts.styl

@@ -59,87 +59,53 @@ $app-layout
     background-color var(--paperBackgroundColor)
     color var(--primaryTextColor)
 
-    +medium-screen() // mobile + tablet
-        display block
-
-    &-topbar
-        +medium-screen() // mobile + tablet
-            // this pseudo-element is "ghost" element replacing bar
-            &:before
-                content ''
-                display block
-                height barHeight
-
     // When you want a sidebar
     &-2panes
         flex 0 0 100%
         align-items stretch
 
-        +medium-screen() // mobile + tablet
-            // this pseudo-element is "ghost" element replacing nav
-            &:after
-                content ''
-                display block
-                height navHeight
-
 $app-main
     display flex
     flex-direction column
     position relative
     flex 1 1 auto
     box-sizing border-box
-    overflow-x hidden
-    overflow-y auto
+    overflow hidden
+    height 100%
 
     +medium-screen() // mobile + tablet
-        display block
-        overflow visible
         // iPhone X environment tweak
         padding-left env(safe-area-inset-left)
         padding-right env(safe-area-inset-right)
         padding-bottom env(safe-area-inset-bottom)
 
-    &-monocolumn
-        height 100%
-
-        +medium-screen() // mobile + tablet
-            min-height 100vh
-
-        &--topbar
-            +medium-screen() // mobile + tablet
-                min-height 'calc(100vh - %s)' % barHeight
+    &-topbar
+        // this pseudo-element is "ghost" element replacing bar
+        &:before
+            content ''
+            display block
+            height barHeight
+            width 100%
+            background-color var(--paperBackgroundColor)
 
     &-2panes
-        height auto
         background-color var(--defaultBackgroundColor)
 
         +medium-screen() // mobile + tablet
-            min-height calc(100vh - var(--sidebarHeight))
+            height calc(100vh - var(--sidebarHeight))
             background-color transparent
 
-        &--topbar
-            +medium-screen() // mobile + tablet
-                min-height 'calc(100vh - var(--sidebarHeight) - %s)' % barHeight
-
 $app-content
     position relative
     display flex
     flex-direction column
     flex 1 1 auto
     box-sizing border-box
-    overflow-x hidden
-    overflow-y auto
+    overflow hidden auto
     background-color var(--paperBackgroundColor)
-
-    +medium-screen() // mobile + tablet
-        display block
-        overflow visible
-
-    &-monocolumn
-        height 100%
+    height 100%
 
     &-2panes
-        height auto
         margin 1rem 1rem 1rem 0
         border-radius 1rem
 

package/transpiled/react/Layout/Layout.js

@@ -9,17 +9,14 @@ import PropTypes from 'prop-types';
 import React, { createContext, forwardRef, useContext, useMemo } from 'react';
 var styles = {
   "o-layout": "styles__o-layout___3TSz9",
-  "o-layout-topbar": "styles__o-layout-topbar___2SHWi",
   "o-layout-2panes": "styles__o-layout-2panes___1CDQw",
   "o-layout-main": "styles__o-layout-main___3mPxz",
-  "o-layout-main-monocolumn": "styles__o-layout-main-monocolumn___2a7vz",
-  "o-layout-main-monocolumn--topbar": "styles__o-layout-main-monocolumn--topbar___9_4Xd",
+  "o-layout-main-topbar": "styles__o-layout-main-topbar___3FSE_",
   "o-layout-main-2panes": "styles__o-layout-main-2panes___3ickD",
-  "o-layout-main-2panes--topbar": "styles__o-layout-main-2panes--topbar___cGi-H",
   "o-layout-content": "styles__o-layout-content___3D5gN",
-  "o-layout-content-monocolumn": "styles__o-layout-content-monocolumn___1rpxp",
   "o-layout-content-2panes": "styles__o-layout-content-2panes___2Hotr"
 };
+import { useBreakpoints } from "cozy-ui/transpiled/react/providers/Breakpoints";
 export var LayoutContext = /*#__PURE__*/createContext();
 export var useLayout = function useLayout() {
   var context = useContext(LayoutContext);
@@ -52,29 +49,32 @@ export var Layout = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       withTopBar = _ref2.withTopBar,
       props = _objectWithoutProperties(_ref2, _excluded);
 
-  var variant = monoColumn ? 'monocolumn' : '2panes';
   return /*#__PURE__*/React.createElement(LayoutProvider, {
     monoColumn: monoColumn,
     withTopBar: withTopBar
   }, /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,
-    className: cx(className, styles['o-layout'], styles["o-layout-".concat(variant)], _defineProperty({}, styles["o-layout-topbar"], withTopBar))
+    className: cx(className, styles['o-layout'], _defineProperty({}, styles['o-layout-main-2panes'], !monoColumn))
   }, props), children));
 });
 Layout.displayName = 'Layout';
 export var Main = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var _cx2;
+
   var className = _ref3.className,
       children = _ref3.children,
       props = _objectWithoutProperties(_ref3, _excluded2);
 
+  var _useBreakpoints = useBreakpoints(),
+      isDesktop = _useBreakpoints.isDesktop;
+
   var _useLayout = useLayout(),
       monoColumn = _useLayout.monoColumn,
       withTopBar = _useLayout.withTopBar;
 
-  var variant = monoColumn ? 'monocolumn' : '2panes';
   return /*#__PURE__*/React.createElement("main", _extends({
     ref: ref,
-    className: cx(className, styles['o-layout-main'], styles["o-layout-main-".concat(variant)], _defineProperty({}, styles["o-layout-main-".concat(variant, "--topbar")], withTopBar))
+    className: cx(className, styles['o-layout-main'], (_cx2 = {}, _defineProperty(_cx2, styles['o-layout-main-2panes'], !monoColumn), _defineProperty(_cx2, styles["o-layout-main-topbar"], withTopBar && !isDesktop), _cx2))
   }, props), children);
 });
 Main.displayName = 'Main';

package/transpiled/react/Table/Virtualized/Cell.d.ts

@@ -1,8 +1,9 @@
-declare var _default: React.MemoExoticComponent<({ row, columns, column, onClick, children }: {
+declare var _default: React.MemoExoticComponent<({ row, columns, column, onClick, onLongPress, children }: {
     row: any;
     columns: any;
     column: any;
     onClick: any;
+    onLongPress: any;
     children: any;
 }) => JSX.Element>;
 export default _default;

package/transpiled/react/Table/Virtualized/Cell.js

@@ -1,5 +1,7 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import get from 'lodash/get';
-import React from 'react';
+import React, { useState } from 'react';
+import { useOnLongPress } from 'rooks';
 import TableCell from "cozy-ui/transpiled/react/TableCell";
 import { makeStyles } from "cozy-ui/transpiled/react/styles";
 var useStyles = makeStyles({
@@ -25,21 +27,44 @@ var Cell = function Cell(_ref4) {
   var row = _ref4.row,
       columns = _ref4.columns,
       column = _ref4.column,
-      _onClick = _ref4.onClick,
+      onClick = _ref4.onClick,
+      onLongPress = _ref4.onLongPress,
       children = _ref4.children;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isLongPress = _useState2[0],
+      setIsLongPress = _useState2[1]; // onClick is triggered after a long press anyway, so we need this bool to avoid this behavior
+
+
   var classes = useStyles({
     column: column,
-    isClickable: !!_onClick
+    isClickable: !!onClick
   });
   var cellContent = get(row, column.id, '—');
+  var longPressRef = useOnLongPress(function () {
+    setIsLongPress(true);
+    onLongPress === null || onLongPress === void 0 ? void 0 : onLongPress(row, column);
+  });
+
+  var handleClick = function handleClick() {
+    if (!isLongPress) {
+      onClick === null || onClick === void 0 ? void 0 : onClick(row, column);
+    } else {
+      setIsLongPress(false);
+    }
+  };
+
   return /*#__PURE__*/React.createElement(TableCell, {
     key: column.id,
+    ref: longPressRef,
     classes: classes,
     align: (_column$textAlign = column.textAlign) !== null && _column$textAlign !== void 0 ? _column$textAlign : 'left',
     padding: column.disablePadding ? 'none' : 'normal',
-    onClick: function onClick() {
-      return _onClick === null || _onClick === void 0 ? void 0 : _onClick(row, column);
-    }
+    onClick: handleClick,
+    onContextMenu: isLongPress ? function (ev) {
+      return ev.preventDefault();
+    } : undefined
   }, children ? React.Children.map(children, function (child) {
     return /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {
       row: row,

package/transpiled/react/Table/Virtualized/Dnd/virtuosoComponents.d.ts

@@ -5,7 +5,7 @@ export default virtuosoComponentsDnd;
 */
 declare const virtuosoComponentsDnd: {
     Scroller: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-    TableRow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+    TableRow: (props: any) => JSX.Element;
     Table: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
     TableHead: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
     TableBody: React.ForwardRefExoticComponent<React.RefAttributes<any>>;

package/transpiled/react/Table/Virtualized/Dnd/virtuosoComponents.js

@@ -29,11 +29,9 @@ var virtuosoComponentsDnd = _objectSpread(_objectSpread({}, virtuosoComponents),
       ref: ref
     })));
   }),
-  TableRow: /*#__PURE__*/forwardRef(function (props, ref) {
-    return /*#__PURE__*/React.createElement(TableRowDnD, _extends({}, props, {
-      ref: ref
-    }));
-  })
+  TableRow: function TableRow(props) {
+    return /*#__PURE__*/React.createElement(TableRowDnD, props);
+  }
 });
 
 export default virtuosoComponentsDnd;

package/transpiled/react/Table/Virtualized/RowContent.d.ts

@@ -1,10 +1,11 @@
-declare var _default: React.MemoExoticComponent<({ index, row, columns, context, children, onSelectClick, onClick }: {
+declare var _default: React.MemoExoticComponent<({ index, row, columns, context, children, onSelectClick, onLongPress, onClick }: {
     index: any;
     row: any;
     columns: any;
     context: any;
     children: any;
     onSelectClick: any;
+    onLongPress: any;
     onClick: any;
 }) => JSX.Element>;
 export default _default;