cozy-ui 127.3.0 → 127.5.0

package/package.json

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

package/react/GridList/Virtualized/Dnd/GridItem.jsx

@@ -0,0 +1,86 @@
+import cx from 'classnames'
+import React, { useEffect } from 'react'
+import { useDrag, useDrop } from 'react-dnd'
+import { getEmptyImage } from 'react-dnd-html5-backend'
+
+const GridItem = ({ item, context, renderItem, className }) => {
+  const {
+    selectedItems = [],
+    itemsInDropProcess = [],
+    setItemsInDropProcess = () => {},
+    dragProps
+  } = context || {}
+
+  const {
+    onDrop,
+    canDrop: canDropProps,
+    canDrag: canDragProps,
+    dragId
+  } = dragProps
+
+  const isSelected = context?.isSelectedItem?.(item)
+  const isDisabled = itemsInDropProcess.includes(item._id)
+
+  const [{ isDragging }, dragRef, dragPreview] = useDrag(
+    () => ({
+      type: dragId,
+      isDragging: monitor => {
+        if (selectedItems.length > 0) {
+          return selectedItems.some(sel => sel._id === item._id)
+        }
+        return item._id === monitor.getItem().draggedItems?.[0]._id
+      },
+      item: {
+        draggedItems: selectedItems.length > 0 ? selectedItems : [item]
+      },
+      canDrag: () => {
+        const defaultCanDrag = canDragProps?.(item) ?? true
+        if (selectedItems.length > 0) {
+          return defaultCanDrag && isSelected
+        }
+        return defaultCanDrag
+      },
+      collect: monitor => ({
+        isDragging: monitor.isDragging()
+      })
+    }),
+    [item, selectedItems]
+  )
+
+  const [{ isOver }, dropRef] = useDrop(
+    () => ({
+      accept: dragId,
+      canDrop: () => (canDropProps ? canDropProps(item) : true),
+      drop: async draggedItem => {
+        setItemsInDropProcess(
+          draggedItem.draggedItems.map(dragged => dragged._id)
+        )
+        await onDrop(draggedItem.draggedItems, item, selectedItems)
+        setItemsInDropProcess([])
+      },
+      collect: monitor => ({
+        isOver: monitor.isOver()
+      })
+    }),
+    [item._id, selectedItems]
+  )
+
+  useEffect(() => {
+    dragPreview(getEmptyImage(), { captureDraggingState: true })
+  }, [dragPreview])
+
+  return (
+    <div
+      ref={node => dragRef(dropRef(node))}
+      className={cx(
+        className,
+        isDragging ? 'virtualized u-o-50' : 'virtualized'
+      )}
+      style={{ opacity: isDisabled ? 0.5 : 1 }}
+    >
+      {renderItem(item, { isDragging, isOver, isDisabled })}
+    </div>
+  )
+}
+
+export default GridItem

package/react/GridList/Virtualized/Dnd/index.jsx

@@ -0,0 +1,67 @@
+import React, { forwardRef, useState, useMemo } from 'react'
+
+import GridItem from './GridItem'
+import VirtualizedGridList from '../'
+import CustomDragLayer from '../../../utils/Dnd/CustomDrag/CustomDragLayer'
+import DnDConfigWrapper from '../../../utils/Dnd/DnDConfigWrapper'
+
+const VirtualizedGridListDnd = ({
+  dragProps,
+  context,
+  itemRenderer,
+  children,
+  componentProps = {
+    List: {},
+    Item: {}
+  },
+  components,
+  ...props
+}) => {
+  const [itemsInDropProcess, setItemsInDropProcess] = useState([])
+
+  const _context = useMemo(
+    () => ({
+      ...context,
+      dragProps,
+      itemRenderer,
+      itemsInDropProcess,
+      setItemsInDropProcess,
+      items: props.items
+    }),
+    [context, dragProps, itemRenderer, itemsInDropProcess, props.items]
+  )
+
+  return (
+    <>
+      <CustomDragLayer dragId={dragProps.dragId} />
+      <VirtualizedGridList
+        components={{
+          Scroller: forwardRef(({ ...scrollerProps }, ref) => (
+            <DnDConfigWrapper ref={ref}>
+              <div {...scrollerProps} ref={ref} />
+            </DnDConfigWrapper>
+          )),
+          Item: ({ context, children, ...props }) => {
+            const item = context?.items?.[props['data-index']]
+            return (
+              <GridItem
+                item={item}
+                context={context}
+                renderItem={() => <>{children}</>}
+                {...componentProps.Item}
+              />
+            )
+          },
+          ...components
+        }}
+        context={_context}
+        itemRenderer={itemRenderer}
+        {...props}
+      >
+        {children}
+      </VirtualizedGridList>
+    </>
+  )
+}
+
+export default VirtualizedGridListDnd

package/react/GridList/Virtualized/index.jsx

@@ -2,11 +2,12 @@ import React, { forwardRef } from 'react'
 import { VirtuosoGrid } from 'react-virtuoso'
 
 const VirtualizedGridList = forwardRef(
-  ({ items = [], itemRenderer, components, ...props }, ref) => {
+  ({ items = [], itemRenderer, components, context, ...props }, ref) => {
     return (
       <VirtuosoGrid
         ref={ref}
         components={components}
+        context={context}
         style={{ height: '100%' }}
         totalCount={items.length}
         itemContent={index => itemRenderer(items[index])}

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/Virtualized/Dnd/index.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useMemo } from 'react'
 
-import CustomDragLayer from './CustomDrag/CustomDragLayer'
 import virtuosoComponentsDnd from './virtuosoComponents'
+import CustomDragLayer from '../../../utils/Dnd/CustomDrag/CustomDragLayer'
 import VirtualizedTable from '../index'
 import virtuosoComponents from '../virtuosoComponents'
 

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

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react'
 
-import DnDConfigWrapper from './DnDConfigWrapper'
 import TableRowDnD from './TableRow'
 import TableContainer from '../../../TableContainer'
+import DnDConfigWrapper from '../../../utils/Dnd/DnDConfigWrapper'
 import virtuosoComponents from '../virtuosoComponents'
 
 /**

package/react/utils/Dnd/CustomDrag/CustomDragLayer.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { useDragLayer } from 'react-dnd'
+
+import DragPreviewWrapper from './DragPreviewWrapper'
+
+const layerStyles = {
+  position: 'fixed',
+  pointerEvents: 'none',
+  zIndex: 100,
+  left: 0,
+  top: 0,
+  width: '100%',
+  height: '100%'
+}
+
+// Example find in the official documentation
+// https://react-dnd.github.io/react-dnd/examples/drag-around/custom-drag-layer
+export const CustomDragLayer = ({ dragId }) => {
+  const { itemType, isDragging, item, initialOffset, currentOffset } =
+    useDragLayer(monitor => ({
+      item: monitor.getItem(),
+      itemType: monitor.getItemType(),
+      initialOffset: monitor.getInitialSourceClientOffset(),
+      currentOffset: monitor.getSourceClientOffset(),
+      isDragging: monitor.isDragging()
+    }))
+
+  if (!isDragging) {
+    return null
+  }
+
+  return (
+    <div style={layerStyles}>
+      <DragPreviewWrapper
+        item={item}
+        itemType={itemType}
+        dragId={dragId}
+        initialOffset={initialOffset}
+        currentOffset={currentOffset}
+      />
+    </div>
+  )
+}
+
+export default CustomDragLayer

package/react/utils/Dnd/CustomDrag/DragPreview.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+
+import Badge from '../../../Badge'
+import Paper from '../../../Paper'
+import Typography from '../../../Typography'
+import { makeStyles } from '../../../styles'
+
+const useStyles = makeStyles({
+  root: {
+    width: 'fit-content'
+  }
+})
+
+const DragPreview = ({ fileName, selectedCount }) => {
+  const classes = useStyles()
+
+  return (
+    <>
+      {selectedCount > 1 ? (
+        <Badge
+          badgeContent={selectedCount}
+          size="large"
+          color="primary"
+          anchorOrigin={{
+            vertical: 'top',
+            horizontal: 'right'
+          }}
+          overlap="rectangular"
+        >
+          <Paper classes={classes} className="u-p-half u-maw-5">
+            <Typography>{fileName}</Typography>
+          </Paper>
+        </Badge>
+      ) : (
+        <Paper classes={classes} className="u-p-half u-maw-5">
+          <Typography>{fileName}</Typography>
+        </Paper>
+      )}
+    </>
+  )
+}
+
+export default React.memo(DragPreview)

package/react/utils/Dnd/CustomDrag/DragPreviewWrapper.jsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react'
+
+import DragPreview from './DragPreview'
+
+const makeStyles = ({ x, y }) => {
+  if (!x || !y) {
+    return { display: 'none' }
+  }
+
+  const transform = `translate(${x}px, ${y}px)`
+
+  return {
+    transform,
+    WebkitTransform: transform
+  }
+}
+
+const DragPreviewWrapper = ({
+  item,
+  itemType,
+  dragId,
+  initialOffset,
+  currentOffset
+}) => {
+  const [mousePosition, setMousePosition] = useState({ x: null, y: null })
+
+  useEffect(() => {
+    const handleMouseMove = e => {
+      setMousePosition({ x: e.clientX, y: e.clientY })
+    }
+
+    window.addEventListener('dragover', handleMouseMove)
+    return () => {
+      window.removeEventListener('dragover', handleMouseMove)
+    }
+  }, [])
+
+  if (!initialOffset || !currentOffset || itemType !== dragId) {
+    return null
+  }
+
+  return (
+    <div style={makeStyles(mousePosition)}>
+      <DragPreview
+        fileName={item.draggedItems[0].name}
+        selectedCount={item.draggedItems.length}
+      />
+    </div>
+  )
+}
+
+export default DragPreviewWrapper

package/react/utils/Dnd/DnDConfigWrapper.jsx

@@ -0,0 +1,48 @@
+import { forwardRef, useEffect, useState } from 'react'
+import { useDragDropManager } from 'react-dnd'
+
+const DnDConfigWrapper = forwardRef(({ children }, ref) => {
+  const dragDropManager = useDragDropManager()
+  const monitor = dragDropManager.getMonitor()
+  const [isDragging, setIsDragging] = useState(false)
+
+  useEffect(() => {
+    const unsubscribe = monitor.subscribeToStateChange(() => {
+      setIsDragging(monitor.isDragging())
+    })
+    return () => unsubscribe()
+  }, [monitor])
+
+  useEffect(() => {
+    if (!isDragging) return
+
+    const scrollThreshold = 100
+    const scrollMaxSpeed = 75
+
+    const intervalId = setInterval(() => {
+      const offset = monitor.getClientOffset()
+      const container = ref.current
+      if (!offset || !container) return
+
+      const { top, bottom } = container.getBoundingClientRect()
+      const distanceToTop = offset.y - top
+      const distanceToBottom = bottom - offset.y
+
+      if (distanceToTop < scrollThreshold) {
+        const speed = scrollMaxSpeed * (1 - distanceToTop / scrollThreshold)
+        container.scrollBy(0, -speed)
+      } else if (distanceToBottom < scrollThreshold) {
+        const speed = scrollMaxSpeed * (1 - distanceToBottom / scrollThreshold)
+        container.scrollBy(0, speed)
+      }
+    }, 16) // ~60fps
+
+    return () => clearInterval(intervalId)
+  }, [isDragging, monitor, ref])
+
+  return children
+})
+
+DnDConfigWrapper.displayName = 'DnDConfigWrapper'
+
+export default DnDConfigWrapper

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'