cozy-ui 123.2.0 → 124.0.0

package/transpiled/react/Filename/index.js

@@ -1,24 +1,21 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
-import Icon, { iconPropType } from "cozy-ui/transpiled/react/Icon";
+import React, { Fragment } from 'react';
+var styles = {
+  "icon-withPath": "styles__icon-withPath___1IcPC"
+};
+import { iconPropType } from "cozy-ui/transpiled/react/Icon";
 import MidEllipsis from "cozy-ui/transpiled/react/MidEllipsis";
 import Typography from "cozy-ui/transpiled/react/Typography";
 
-var Filename = function Filename(_ref) {
-  var icon = _ref.icon,
-      filename = _ref.filename,
+var NameAndExtension = function NameAndExtension(_ref) {
+  var filename = _ref.filename,
       extension = _ref.extension,
-      midEllipsis = _ref.midEllipsis,
-      variant = _ref.variant;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "u-flex u-flex-items-center"
-  }, icon && /*#__PURE__*/React.createElement("div", {
-    className: "u-mr-1"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: icon,
-    width: 30,
-    height: 30
-  })), filename && /*#__PURE__*/React.createElement(Typography, {
+      variant = _ref.variant,
+      midEllipsis = _ref.midEllipsis;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, filename && /*#__PURE__*/React.createElement(Typography, {
     variant: variant,
     component: "span",
     noWrap: true
@@ -31,6 +28,42 @@ var Filename = function Filename(_ref) {
   }, extension));
 };
 
+var Filename = function Filename(_ref2) {
+  var icon = _ref2.icon,
+      filename = _ref2.filename,
+      extension = _ref2.extension,
+      midEllipsis = _ref2.midEllipsis,
+      variant = _ref2.variant,
+      path = _ref2.path;
+
+  var _ref3 = path ? [Fragment, {}] : ['div', {
+    className: cx('u-flex u-flex-items-center')
+  }],
+      _ref4 = _slicedToArray(_ref3, 2),
+      Wrapper = _ref4[0],
+      wrapperProps = _ref4[1];
+
+  return /*#__PURE__*/React.createElement(Wrapper, wrapperProps, icon && /*#__PURE__*/React.createElement("div", {
+    className: cx('u-flex u-pos-relative u-mr-1', _defineProperty({}, styles['icon-withPath'], !!path))
+  }, icon), path ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "u-flex"
+  }, /*#__PURE__*/React.createElement(NameAndExtension, {
+    filename: filename,
+    extension: extension,
+    variant: variant,
+    midEllipsis: midEllipsis
+  })), /*#__PURE__*/React.createElement(Typography, {
+    variant: "body2",
+    component: "div",
+    noWrap: true
+  }, path)) : /*#__PURE__*/React.createElement(NameAndExtension, {
+    filename: filename,
+    extension: extension,
+    variant: variant,
+    midEllipsis: midEllipsis
+  }));
+};
+
 Filename.propTypes = {
   /** Filename icon */
   icon: iconPropType,

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

@@ -580,6 +580,62 @@ export function makeDarkInvertedOverrides(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/makeDarkNormalOverrides.d.ts

@@ -580,6 +580,62 @@ export function makeDarkNormalOverrides(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/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;