cozy-ui 127.3.0 → 127.5.0

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/GridList/Virtualized/Dnd/GridItem.d.ts

@@ -0,0 +1,7 @@
+export default GridItem;
+declare function GridItem({ item, context, renderItem, className }: {
+    item: any;
+    context: any;
+    renderItem: any;
+    className: any;
+}): JSX.Element;

package/transpiled/react/GridList/Virtualized/Dnd/GridItem.js

@@ -0,0 +1,139 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import cx from 'classnames';
+import React, { useEffect } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+
+var GridItem = function GridItem(_ref) {
+  var _context$isSelectedIt;
+
+  var item = _ref.item,
+      context = _ref.context,
+      renderItem = _ref.renderItem,
+      className = _ref.className;
+
+  var _ref2 = context || {},
+      _ref2$selectedItems = _ref2.selectedItems,
+      selectedItems = _ref2$selectedItems === void 0 ? [] : _ref2$selectedItems,
+      _ref2$itemsInDropProc = _ref2.itemsInDropProcess,
+      itemsInDropProcess = _ref2$itemsInDropProc === void 0 ? [] : _ref2$itemsInDropProc,
+      _ref2$setItemsInDropP = _ref2.setItemsInDropProcess,
+      setItemsInDropProcess = _ref2$setItemsInDropP === void 0 ? function () {} : _ref2$setItemsInDropP,
+      dragProps = _ref2.dragProps;
+
+  var onDrop = dragProps.onDrop,
+      canDropProps = dragProps.canDrop,
+      canDragProps = dragProps.canDrag,
+      dragId = dragProps.dragId;
+  var isSelected = context === null || context === void 0 ? void 0 : (_context$isSelectedIt = context.isSelectedItem) === null || _context$isSelectedIt === void 0 ? void 0 : _context$isSelectedIt.call(context, item);
+  var isDisabled = itemsInDropProcess.includes(item._id);
+
+  var _useDrag = useDrag(function () {
+    return {
+      type: dragId,
+      isDragging: function isDragging(monitor) {
+        var _monitor$getItem$drag;
+
+        if (selectedItems.length > 0) {
+          return selectedItems.some(function (sel) {
+            return sel._id === item._id;
+          });
+        }
+
+        return item._id === ((_monitor$getItem$drag = monitor.getItem().draggedItems) === null || _monitor$getItem$drag === void 0 ? void 0 : _monitor$getItem$drag[0]._id);
+      },
+      item: {
+        draggedItems: selectedItems.length > 0 ? selectedItems : [item]
+      },
+      canDrag: function canDrag() {
+        var _canDragProps;
+
+        var defaultCanDrag = (_canDragProps = canDragProps === null || canDragProps === void 0 ? void 0 : canDragProps(item)) !== null && _canDragProps !== void 0 ? _canDragProps : true;
+
+        if (selectedItems.length > 0) {
+          return defaultCanDrag && isSelected;
+        }
+
+        return defaultCanDrag;
+      },
+      collect: function collect(monitor) {
+        return {
+          isDragging: monitor.isDragging()
+        };
+      }
+    };
+  }, [item, selectedItems]),
+      _useDrag2 = _slicedToArray(_useDrag, 3),
+      isDragging = _useDrag2[0].isDragging,
+      dragRef = _useDrag2[1],
+      dragPreview = _useDrag2[2];
+
+  var _useDrop = useDrop(function () {
+    return {
+      accept: dragId,
+      canDrop: function canDrop() {
+        return canDropProps ? canDropProps(item) : true;
+      },
+      drop: function () {
+        var _drop = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(draggedItem) {
+          return _regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  setItemsInDropProcess(draggedItem.draggedItems.map(function (dragged) {
+                    return dragged._id;
+                  }));
+                  _context.next = 3;
+                  return onDrop(draggedItem.draggedItems, item, selectedItems);
+
+                case 3:
+                  setItemsInDropProcess([]);
+
+                case 4:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }));
+
+        function drop(_x) {
+          return _drop.apply(this, arguments);
+        }
+
+        return drop;
+      }(),
+      collect: function collect(monitor) {
+        return {
+          isOver: monitor.isOver()
+        };
+      }
+    };
+  }, [item._id, selectedItems]),
+      _useDrop2 = _slicedToArray(_useDrop, 2),
+      isOver = _useDrop2[0].isOver,
+      dropRef = _useDrop2[1];
+
+  useEffect(function () {
+    dragPreview(getEmptyImage(), {
+      captureDraggingState: true
+    });
+  }, [dragPreview]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: function ref(node) {
+      return dragRef(dropRef(node));
+    },
+    className: cx(className, isDragging ? 'virtualized u-o-50' : 'virtualized'),
+    style: {
+      opacity: isDisabled ? 0.5 : 1
+    }
+  }, renderItem(item, {
+    isDragging: isDragging,
+    isOver: isOver,
+    isDisabled: isDisabled
+  }));
+};
+
+export default GridItem;

package/transpiled/react/GridList/Virtualized/Dnd/index.d.ts

@@ -0,0 +1,13 @@
+export default VirtualizedGridListDnd;
+declare function VirtualizedGridListDnd({ dragProps, context, itemRenderer, children, componentProps, components, ...props }: {
+    [x: string]: any;
+    dragProps: any;
+    context: any;
+    itemRenderer: any;
+    children: any;
+    componentProps?: {
+        List: {};
+        Item: {};
+    } | undefined;
+    components: any;
+}): JSX.Element;

package/transpiled/react/GridList/Virtualized/Dnd/index.js

@@ -0,0 +1,81 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["dragProps", "context", "itemRenderer", "children", "componentProps", "components"],
+    _excluded2 = ["context", "children"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React, { forwardRef, useState, useMemo } from 'react';
+import GridItem from "cozy-ui/transpiled/react/GridList/Virtualized/Dnd/GridItem";
+import VirtualizedGridList from "cozy-ui/transpiled/react/GridList/Virtualized";
+import CustomDragLayer from "cozy-ui/transpiled/react/utils/Dnd/CustomDrag/CustomDragLayer";
+import DnDConfigWrapper from "cozy-ui/transpiled/react/utils/Dnd/DnDConfigWrapper";
+
+var VirtualizedGridListDnd = function VirtualizedGridListDnd(_ref) {
+  var dragProps = _ref.dragProps,
+      context = _ref.context,
+      itemRenderer = _ref.itemRenderer,
+      children = _ref.children,
+      _ref$componentProps = _ref.componentProps,
+      componentProps = _ref$componentProps === void 0 ? {
+    List: {},
+    Item: {}
+  } : _ref$componentProps,
+      components = _ref.components,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      itemsInDropProcess = _useState2[0],
+      setItemsInDropProcess = _useState2[1];
+
+  var _context = useMemo(function () {
+    return _objectSpread(_objectSpread({}, context), {}, {
+      dragProps: dragProps,
+      itemRenderer: itemRenderer,
+      itemsInDropProcess: itemsInDropProcess,
+      setItemsInDropProcess: setItemsInDropProcess,
+      items: props.items
+    });
+  }, [context, dragProps, itemRenderer, itemsInDropProcess, props.items]);
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomDragLayer, {
+    dragId: dragProps.dragId
+  }), /*#__PURE__*/React.createElement(VirtualizedGridList, _extends({
+    components: _objectSpread({
+      Scroller: /*#__PURE__*/forwardRef(function (_ref2, ref) {
+        var scrollerProps = _extends({}, _ref2);
+
+        return /*#__PURE__*/React.createElement(DnDConfigWrapper, {
+          ref: ref
+        }, /*#__PURE__*/React.createElement("div", _extends({}, scrollerProps, {
+          ref: ref
+        })));
+      }),
+      Item: function Item(_ref3) {
+        var _context$items;
+
+        var context = _ref3.context,
+            children = _ref3.children,
+            props = _objectWithoutProperties(_ref3, _excluded2);
+
+        var item = context === null || context === void 0 ? void 0 : (_context$items = context.items) === null || _context$items === void 0 ? void 0 : _context$items[props['data-index']];
+        return /*#__PURE__*/React.createElement(GridItem, _extends({
+          item: item,
+          context: context,
+          renderItem: function renderItem() {
+            return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+          }
+        }, componentProps.Item));
+      }
+    }, components),
+    context: _context,
+    itemRenderer: itemRenderer
+  }, props), children));
+};
+
+export default VirtualizedGridListDnd;

package/transpiled/react/GridList/Virtualized/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["items", "itemRenderer", "components"];
+var _excluded = ["items", "itemRenderer", "components", "context"];
 import React, { forwardRef } from 'react';
 import { VirtuosoGrid } from 'react-virtuoso';
 var VirtualizedGridList = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -8,11 +8,13 @@ var VirtualizedGridList = /*#__PURE__*/forwardRef(function (_ref, ref) {
       items = _ref$items === void 0 ? [] : _ref$items,
       itemRenderer = _ref.itemRenderer,
       components = _ref.components,
+      context = _ref.context,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(VirtuosoGrid, _extends({
     ref: ref,
     components: components,
+    context: context,
     style: {
       height: '100%'
     },

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

@@ -9,8 +9,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { useState, useMemo } from 'react';
-import CustomDragLayer from "cozy-ui/transpiled/react/Table/Virtualized/Dnd/CustomDrag/CustomDragLayer";
 import virtuosoComponentsDnd from "cozy-ui/transpiled/react/Table/Virtualized/Dnd/virtuosoComponents";
+import CustomDragLayer from "cozy-ui/transpiled/react/utils/Dnd/CustomDrag/CustomDragLayer";
 import VirtualizedTable from "cozy-ui/transpiled/react/Table/Virtualized/index";
 import virtuosoComponents from "cozy-ui/transpiled/react/Table/Virtualized/virtuosoComponents";
 

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

@@ -8,9 +8,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { forwardRef } from 'react';
-import DnDConfigWrapper from "cozy-ui/transpiled/react/Table/Virtualized/Dnd/DnDConfigWrapper";
 import TableRowDnD from "cozy-ui/transpiled/react/Table/Virtualized/Dnd/TableRow";
 import TableContainer from "cozy-ui/transpiled/react/TableContainer";
+import DnDConfigWrapper from "cozy-ui/transpiled/react/utils/Dnd/DnDConfigWrapper";
 import virtuosoComponents from "cozy-ui/transpiled/react/Table/Virtualized/virtuosoComponents";
 /**
  Be aware that context is spread to every components but should not be spread to Table components