cozy-ui 123.2.1 → 124.0.0

package/transpiled/react/MuiCozyTheme/overrides/makeLightInvertedOverrides.d.ts

@@ -580,6 +580,62 @@ export function makeLightInvertedOverrides(theme: any): {
             paddingRight: number;
         };
     };
+    MuiTableHead: {
+        root: {
+            backgroundColor: any;
+        };
+    };
+    MuiTableRow: {
+        root: {
+            '&.disabled': {
+                cursor: string;
+                pointerEvents: string;
+                opacity: number;
+            };
+        };
+    };
+    MuiTableCell: {
+        root: {
+            padding: string;
+        };
+        head: any;
+        body: {
+            color: any;
+            '&.sortable': {
+                '&$paddingNone': {
+                    '&$alignLeft': {
+                        paddingLeft: string;
+                    };
+                    '&$alignRight': {
+                        paddingRight: string;
+                    };
+                };
+                '&$alignLeft': {
+                    paddingLeft: string;
+                };
+                '&$alignRight': {
+                    paddingRight: string;
+                };
+            };
+        };
+        stickyHeader: {
+            backgroundColor: any;
+        };
+    };
+    MuiTableSortLabel: {
+        root: {
+            padding: string;
+            color: any;
+            '&:hover': {
+                color: any;
+                borderRadius: number;
+                backgroundColor: any;
+            };
+        };
+        icon: {
+            fontSize: number;
+        };
+    };
     MuiFormLabel: {
         root: {
             color: any;

package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.d.ts

@@ -580,6 +580,62 @@ export function makeLightNormalOverrides(theme: any): {
             paddingRight: number;
         };
     };
+    MuiTableHead: {
+        root: {
+            backgroundColor: any;
+        };
+    };
+    MuiTableRow: {
+        root: {
+            '&.disabled': {
+                cursor: string;
+                pointerEvents: string;
+                opacity: number;
+            };
+        };
+    };
+    MuiTableCell: {
+        root: {
+            padding: string;
+        };
+        head: any;
+        body: {
+            color: any;
+            '&.sortable': {
+                '&$paddingNone': {
+                    '&$alignLeft': {
+                        paddingLeft: string;
+                    };
+                    '&$alignRight': {
+                        paddingRight: string;
+                    };
+                };
+                '&$alignLeft': {
+                    paddingLeft: string;
+                };
+                '&$alignRight': {
+                    paddingRight: string;
+                };
+            };
+        };
+        stickyHeader: {
+            backgroundColor: any;
+        };
+    };
+    MuiTableSortLabel: {
+        root: {
+            padding: string;
+            color: any;
+            '&:hover': {
+                color: any;
+                borderRadius: number;
+                backgroundColor: any;
+            };
+        };
+        icon: {
+            fontSize: number;
+        };
+    };
     MuiFormLabel: {
         root: {
             color: any;

package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -482,6 +482,65 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
         paddingRight: 16
       }
     },
+    MuiTableHead: {
+      root: {
+        backgroundColor: theme.palette.background.paper
+      }
+    },
+    MuiTableRow: {
+      root: {
+        '&.disabled': {
+          cursor: 'pointer',
+          pointerEvents: 'none',
+          opacity: 0.5
+        }
+      }
+    },
+    MuiTableCell: {
+      root: {
+        padding: '8px 4px'
+      },
+      head: _objectSpread(_objectSpread({}, theme.typography.subtitle2), {}, {
+        color: theme.palette.text.secondary,
+        lineHeight: 1.292
+      }),
+      body: {
+        color: theme.palette.text.secondary,
+        '&.sortable': {
+          '&$paddingNone': {
+            '&$alignLeft': {
+              paddingLeft: '12px'
+            },
+            '&$alignRight': {
+              paddingRight: '12px'
+            }
+          },
+          '&$alignLeft': {
+            paddingLeft: '16px'
+          },
+          '&$alignRight': {
+            paddingRight: '16px'
+          }
+        }
+      },
+      stickyHeader: {
+        backgroundColor: theme.palette.background.paper
+      }
+    },
+    MuiTableSortLabel: {
+      root: {
+        padding: '8px 12px',
+        color: theme.palette.text.secondary,
+        '&:hover': {
+          color: theme.palette.text.primary,
+          borderRadius: 999,
+          backgroundColor: theme.palette.action.hover
+        }
+      },
+      icon: {
+        fontSize: 14
+      }
+    },
     MuiFormLabel: {
       root: {
         color: theme.palette.text.secondary,

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

@@ -0,0 +1,8 @@
+declare var _default: React.MemoExoticComponent<({ row, columns, column, children }: {
+    row: any;
+    columns: any;
+    column: any;
+    children: any;
+}) => JSX.Element>;
+export default _default;
+import React from "react";

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

@@ -0,0 +1,46 @@
+import cx from 'classnames';
+import React from 'react';
+import TableCell from "cozy-ui/transpiled/react/TableCell";
+import { makeStyles } from "cozy-ui/transpiled/react/styles";
+var useStyles = makeStyles({
+  root: {
+    width: function width(_ref) {
+      var column = _ref.column;
+      return column.width;
+    },
+    maxWidth: function maxWidth(_ref2) {
+      var column = _ref2.column;
+      return column.maxWidth;
+    }
+  }
+});
+
+var Cell = function Cell(_ref3) {
+  var _column$textAlign;
+
+  var row = _ref3.row,
+      columns = _ref3.columns,
+      column = _ref3.column,
+      children = _ref3.children;
+  var classes = useStyles({
+    column: column
+  });
+  return /*#__PURE__*/React.createElement(TableCell, {
+    key: column.id,
+    classes: classes,
+    className: cx({
+      sortable: column.sortable !== false
+    }),
+    align: (_column$textAlign = column.textAlign) !== null && _column$textAlign !== void 0 ? _column$textAlign : 'left',
+    padding: column.disablePadding ? 'none' : 'normal'
+  }, children ? React.Children.map(children, function (child) {
+    return /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {
+      row: row,
+      columns: columns,
+      column: column,
+      cell: row[column.id]
+    }) : null;
+  }) : row[column.id]);
+};
+
+export default /*#__PURE__*/React.memo(Cell);

package/transpiled/react/Table/Virtualized/Dnd/CustomDrag/CustomDragLayer.d.ts

@@ -0,0 +1,4 @@
+export function CustomDragLayer({ dragId }: {
+    dragId: any;
+}): JSX.Element | null;
+export default CustomDragLayer;

package/transpiled/react/Table/Virtualized/Dnd/CustomDrag/CustomDragLayer.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useDragLayer } from 'react-dnd';
+import DragPreviewWrapper from "cozy-ui/transpiled/react/Table/Virtualized/Dnd/CustomDrag/DragPreviewWrapper";
+var 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 var CustomDragLayer = function CustomDragLayer(_ref) {
+  var dragId = _ref.dragId;
+
+  var _useDragLayer = useDragLayer(function (monitor) {
+    return {
+      item: monitor.getItem(),
+      itemType: monitor.getItemType(),
+      initialOffset: monitor.getInitialSourceClientOffset(),
+      currentOffset: monitor.getSourceClientOffset(),
+      isDragging: monitor.isDragging()
+    };
+  }),
+      itemType = _useDragLayer.itemType,
+      isDragging = _useDragLayer.isDragging,
+      item = _useDragLayer.item,
+      initialOffset = _useDragLayer.initialOffset,
+      currentOffset = _useDragLayer.currentOffset;
+
+  if (!isDragging) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    style: layerStyles
+  }, /*#__PURE__*/React.createElement(DragPreviewWrapper, {
+    item: item,
+    itemType: itemType,
+    dragId: dragId,
+    initialOffset: initialOffset,
+    currentOffset: currentOffset
+  }));
+};
+export default CustomDragLayer;

package/transpiled/react/Table/Virtualized/Dnd/CustomDrag/DragPreview.d.ts

@@ -0,0 +1,6 @@
+declare var _default: React.MemoExoticComponent<({ fileName, selectedCount }: {
+    fileName: any;
+    selectedCount: any;
+}) => JSX.Element>;
+export default _default;
+import React from "react";

package/transpiled/react/Table/Virtualized/Dnd/CustomDrag/DragPreview.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import Badge from "cozy-ui/transpiled/react/Badge";
+import Paper from "cozy-ui/transpiled/react/Paper";
+import Typography from "cozy-ui/transpiled/react/Typography";
+import { makeStyles } from "cozy-ui/transpiled/react/styles";
+var useStyles = makeStyles({
+  root: {
+    width: 'fit-content'
+  }
+});
+
+var DragPreview = function DragPreview(_ref) {
+  var fileName = _ref.fileName,
+      selectedCount = _ref.selectedCount;
+  var classes = useStyles();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, selectedCount > 1 ? /*#__PURE__*/React.createElement(Badge, {
+    badgeContent: selectedCount,
+    size: "large",
+    color: "primary",
+    anchorOrigin: {
+      vertical: 'top',
+      horizontal: 'right'
+    },
+    overlap: "rectangular"
+  }, /*#__PURE__*/React.createElement(Paper, {
+    classes: classes,
+    className: "u-p-half u-maw-5"
+  }, /*#__PURE__*/React.createElement(Typography, null, fileName))) : /*#__PURE__*/React.createElement(Paper, {
+    classes: classes,
+    className: "u-p-half u-maw-5"
+  }, /*#__PURE__*/React.createElement(Typography, null, fileName)));
+};
+
+export default /*#__PURE__*/React.memo(DragPreview);

package/transpiled/react/Table/Virtualized/Dnd/CustomDrag/DragPreviewWrapper.d.ts

@@ -0,0 +1,8 @@
+export default DragPreviewWrapper;
+declare function DragPreviewWrapper({ item, itemType, dragId, initialOffset, currentOffset }: {
+    item: any;
+    itemType: any;
+    dragId: any;
+    initialOffset: any;
+    currentOffset: any;
+}): JSX.Element | null;

package/transpiled/react/Table/Virtualized/Dnd/CustomDrag/DragPreviewWrapper.js

@@ -0,0 +1,63 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useState } from 'react';
+import DragPreview from "cozy-ui/transpiled/react/Table/Virtualized/Dnd/CustomDrag/DragPreview";
+
+var makeStyles = function makeStyles(_ref) {
+  var x = _ref.x,
+      y = _ref.y;
+
+  if (!x || !y) {
+    return {
+      display: 'none'
+    };
+  }
+
+  var transform = "translate(".concat(x, "px, ").concat(y, "px)");
+  return {
+    transform: transform,
+    WebkitTransform: transform
+  };
+};
+
+var DragPreviewWrapper = function DragPreviewWrapper(_ref2) {
+  var item = _ref2.item,
+      itemType = _ref2.itemType,
+      dragId = _ref2.dragId,
+      initialOffset = _ref2.initialOffset,
+      currentOffset = _ref2.currentOffset;
+
+  var _useState = useState({
+    x: null,
+    y: null
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      mousePosition = _useState2[0],
+      setMousePosition = _useState2[1];
+
+  useEffect(function () {
+    var handleMouseMove = function handleMouseMove(e) {
+      setMousePosition({
+        x: e.clientX,
+        y: e.clientY
+      });
+    };
+
+    window.addEventListener('dragover', handleMouseMove);
+    return function () {
+      window.removeEventListener('dragover', handleMouseMove);
+    };
+  }, []);
+
+  if (!initialOffset || !currentOffset || itemType !== dragId) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    style: makeStyles(mousePosition)
+  }, /*#__PURE__*/React.createElement(DragPreview, {
+    fileName: item.draggedItems[0].name,
+    selectedCount: item.draggedItems.length
+  }));
+};
+
+export default DragPreviewWrapper;

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

@@ -0,0 +1,2 @@
+export default DnDConfigWrapper;
+declare const DnDConfigWrapper: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;

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

@@ -0,0 +1,55 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { forwardRef, useEffect, useState } from 'react';
+import { useDragDropManager } from 'react-dnd';
+var DnDConfigWrapper = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children;
+  var dragDropManager = useDragDropManager();
+  var monitor = dragDropManager.getMonitor();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isDragging = _useState2[0],
+      setIsDragging = _useState2[1];
+
+  useEffect(function () {
+    var unsubscribe = monitor.subscribeToStateChange(function () {
+      setIsDragging(monitor.isDragging());
+    });
+    return function () {
+      return unsubscribe();
+    };
+  }, [monitor]);
+  useEffect(function () {
+    if (!isDragging) return;
+    var scrollThreshold = 100;
+    var scrollMaxSpeed = 75;
+    var intervalId = setInterval(function () {
+      var offset = monitor.getClientOffset();
+      var container = ref.current;
+      if (!offset || !container) return;
+
+      var _container$getBoundin = container.getBoundingClientRect(),
+          top = _container$getBoundin.top,
+          bottom = _container$getBoundin.bottom;
+
+      var distanceToTop = offset.y - top;
+      var distanceToBottom = bottom - offset.y;
+
+      if (distanceToTop < scrollThreshold) {
+        var speed = scrollMaxSpeed * (1 - distanceToTop / scrollThreshold);
+        container.scrollBy(0, -speed);
+      } else if (distanceToBottom < scrollThreshold) {
+        var _speed = scrollMaxSpeed * (1 - distanceToBottom / scrollThreshold);
+
+        container.scrollBy(0, _speed);
+      }
+    }, 16); // ~60fps
+
+    return function () {
+      return clearInterval(intervalId);
+    };
+  }, [isDragging, monitor, ref]);
+  return children;
+});
+DnDConfigWrapper.displayName = 'DnDConfigWrapper';
+export default DnDConfigWrapper;

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

@@ -0,0 +1,8 @@
+export default TableRow;
+declare function TableRow({ item, context, selected, disabled, ...props }: {
+    [x: string]: any;
+    item: any;
+    context: any;
+    selected: any;
+    disabled: any;
+}): JSX.Element;

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

@@ -0,0 +1,130 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["item", "context", "selected", "disabled"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useEffect } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import TableRowClassic from "cozy-ui/transpiled/react/TableRow";
+
+var TableRow = function TableRow(_ref) {
+  var item = _ref.item,
+      context = _ref.context,
+      selected = _ref.selected,
+      disabled = _ref.disabled,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var selectedItems = context.selectedItems,
+      setItemsInDropProcess = context.setItemsInDropProcess,
+      dragProps = context.dragProps;
+  var onDrop = dragProps.onDrop,
+      canDropProps = dragProps.canDrop,
+      canDragProps = dragProps.canDrag,
+      dragId = dragProps.dragId;
+
+  var _useDrag = useDrag(function () {
+    return {
+      type: dragId,
+      isDragging: function isDragging(monitor) {
+        // put all selected items in isDragging state
+        if (selectedItems.length > 0) {
+          return selectedItems.some(function (selectedItem) {
+            return selectedItem._id === item._id;
+          });
+        }
+
+        return item._id === monitor.getItem().draggedItems[0]._id;
+      },
+      item: {
+        draggedItems: selectedItems.length > 0 ? selectedItems : [item]
+      },
+      canDrag: function canDrag() {
+        var defaultCanDrag = (canDragProps === null || canDragProps === void 0 ? void 0 : canDragProps(item)) || true; // if selectedItems is not empty, only the selected items can be dragged
+
+        // if selectedItems is not empty, only the selected items can be dragged
+        if (selectedItems.length > 0) {
+          return defaultCanDrag && selected;
+        }
+
+        return defaultCanDrag;
+      },
+      collect: function collect(monitor) {
+        return {
+          isDragging: monitor.isDragging()
+        };
+      }
+    };
+  }, [item, selectedItems] // used to pass args inside returned object attributes
+  ),
+      _useDrag2 = _slicedToArray(_useDrag, 3),
+      dragCollect = _useDrag2[0],
+      dragRef = _useDrag2[1],
+      dragRefPreview = _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 (draggedItem) {
+                    return draggedItem._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] // used to pass args inside returned object attributes
+  ),
+      _useDrop2 = _slicedToArray(_useDrop, 2),
+      dropCollect = _useDrop2[0],
+      dropRef = _useDrop2[1]; // Tricks for the preview image to be empty
+  // https://react-dnd.github.io/react-dnd/examples/drag-around/custom-drag-layer
+
+
+  useEffect(function () {
+    dragRefPreview(getEmptyImage(), {
+      captureDraggingState: true
+    });
+  }, [dragRefPreview]);
+  return /*#__PURE__*/React.createElement(TableRowClassic, _extends({}, props, {
+    ref: function ref(node) {
+      return dragRef(dropRef(node));
+    },
+    selected: selected || dropCollect.isOver,
+    className: dragCollect.isDragging ? 'u-o-50' : '',
+    disabled: disabled
+  }));
+};
+
+export default TableRow;

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

@@ -0,0 +1,10 @@
+export default FixedHeaderContent;
+declare function FixedHeaderContent({ columns, order, orderBy, rowCount, selectedCount, onClick, onSelectAllClick }: {
+    columns: any;
+    order: any;
+    orderBy: any;
+    rowCount: any;
+    selectedCount: any;
+    onClick: any;
+    onSelectAllClick: any;
+}): JSX.Element;

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import TableHeadCell from "cozy-ui/transpiled/react/Table/Virtualized/HeadCell";
+import Checkbox from "cozy-ui/transpiled/react/Checkbox";
+import TableCell from "cozy-ui/transpiled/react/TableCell";
+import TableRow from "cozy-ui/transpiled/react/TableRow";
+import { makeStyles } from "cozy-ui/transpiled/react/styles";
+var useStyles = makeStyles({
+  visuallyHidden: {
+    border: 0,
+    clip: 'rect(0 0 0 0)',
+    height: 1,
+    margin: -1,
+    overflow: 'hidden',
+    padding: 0,
+    position: 'absolute',
+    top: 20,
+    width: 1
+  }
+});
+
+var FixedHeaderContent = function FixedHeaderContent(_ref) {
+  var columns = _ref.columns,
+      order = _ref.order,
+      orderBy = _ref.orderBy,
+      rowCount = _ref.rowCount,
+      selectedCount = _ref.selectedCount,
+      _onClick = _ref.onClick,
+      onSelectAllClick = _ref.onSelectAllClick;
+  var classes = useStyles();
+  return /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, {
+    align: "center",
+    padding: "checkbox"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    indeterminate: selectedCount > 0 && selectedCount < rowCount,
+    checked: rowCount > 0 && selectedCount === rowCount,
+    inputProps: {
+      'aria-label': 'select all'
+    },
+    onChange: onSelectAllClick
+  })), columns.map(function (column) {
+    return /*#__PURE__*/React.createElement(TableHeadCell, {
+      key: column.id,
+      className: classes.visuallyHidden,
+      column: column,
+      order: order,
+      orderBy: orderBy,
+      onClick: function onClick() {
+        return _onClick(column.id);
+      }
+    });
+  }));
+};
+
+export default FixedHeaderContent;