cozy-sharing 21.2.2 → 21.3.0

package/dist/components/SharedDrive/SharedDriveModal.js

@@ -0,0 +1,350 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+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 PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { useClient } from 'cozy-client';
+import Button from 'cozy-ui/transpiled/react/Buttons';
+import { FixedActionsDialog } from 'cozy-ui/transpiled/react/CozyDialogs';
+import TextField from 'cozy-ui/transpiled/react/TextField';
+import Typography from 'cozy-ui/transpiled/react/Typography';
+import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert';
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
+import { mergeAndDeduplicateRecipients, formatRecipients } from './helpers';
+
+var IllustrationSharedDrives = function IllustrationSharedDrives(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    d: "M161 14.592c-1.888.222-7.568-.664-15.182-5.982-9.518-6.647-13.847-8.724-22.434-4.183C115 8.86 115.227 23.012 115 27",
+    stroke: "#CEBEF7",
+    strokeWidth: "4",
+    strokeLinecap: "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M165.844 92c5.431-3.51 16.097-12.335 15.315-19.555-.977-9.025-12.708-11.281-22.81-10.78-10.101.502-17.596 4.513-28.349 1.504",
+    stroke: "#B9F6F7",
+    strokeWidth: "4",
+    strokeLinecap: "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M23.495 72c-.329 4.729-2.425 21.765 5.479 27.308 9.88 6.928 23.668-1.244 30.831-5.203C66.97 90.146 79.072 83.217 85 85.527",
+    stroke: "#FFD799",
+    strokeWidth: "4",
+    strokeLinecap: "round"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "100",
+    cy: "64",
+    fill: "#297EF2",
+    r: "48"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "148",
+    cy: "104",
+    r: "24",
+    fill: "#B9F6F7"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M148 106c-4.418 0-8-4.029-8-9 0-4.97 3.582-9 8-9s8 4.03 8 9c0 4.971-3.582 9-8 9zm-16 10c0-2 4-8 8-8s2 2 8 2 4-2 8-2 8 6 8 8 0 4-2 4h-28c-2 0-2-2-2-4z",
+    fill: "#38D1D3"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "148",
+    cy: "104",
+    r: "20",
+    stroke: "#B9F6F7",
+    strokeWidth: "8"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "24",
+    cy: "65",
+    r: "24",
+    fill: "#FFD799"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M24 67c-4.418 0-8-4.03-8-9s3.582-9 8-9 8 4.03 8 9-3.582 9-8 9zM8 77c0-2 4-8 8-8s2 2 8 2 4-2 8-2 8 6 8 8 0 4-2 4H10c-2 0-2-2-2-4z",
+    fill: "#FF9300"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "24",
+    cy: "65",
+    r: "20",
+    stroke: "#FFD799",
+    strokeWidth: "8"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "172",
+    cy: "28",
+    r: "24",
+    fill: "#CEBEF7"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M172 30c-4.418 0-8-4.03-8-9s3.582-9 8-9 8 4.03 8 9-3.582 9-8 9zm-16 10c0-2 4-8 8-8s2 2 8 2 4-2 8-2 8 6 8 8 0 4-2 4h-28c-2 0-2-2-2-4z",
+    fill: "#855CEA"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "172",
+    cy: "28",
+    r: "20",
+    stroke: "#CEBEF7",
+    strokeWidth: "8"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M66.418 133.29a81.818 81.818 0 0 0 16.142 2.244c16.166.948 38.758.424 48.325-1.346 9.567-1.771 10.083-4.465-14.448-5.812-20.925-1.147-45.26.474-50.362 2.894-1.52.648-1.447 1.371.343 2.02z",
+    fill: "#BBD9FD"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M80.198 64.752a6 6 0 0 1 4.686-2.252h30.232c1.823 0 3.547.828 4.685 2.252l3.213 4.015c.638.798.986 1.79.986 2.812V76H76v-4.421a4.5 4.5 0 0 1 .986-2.812l3.212-4.015zm0-21a6 6 0 0 1 4.686-2.252h30.232c1.823 0 3.547.828 4.685 2.252l3.213 4.015c.638.798.986 1.79.986 2.811V55H76v-4.422a4.5 4.5 0 0 1 .986-2.81l3.212-4.016z",
+    fill: "#fff"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M76 71.5a3 3 0 0 1 3-3h42a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H79a3 3 0 0 1-3-3v-12zm0-21a3 3 0 0 1 3-3h42a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H79a3 3 0 0 1-3-3v-12z",
+    fill: "#B2D3FF"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M88 77.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm0-21a3 3 0 1 1-6 0 3 3 0 0 1 6 0z",
+    fill: "#fff"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M194.751 99.667c1.695-.06 1.635-2.667-.06-2.667-.303 0-.606 0-.909.182v-.849c-.06-.727-.544-1.333-1.331-1.333-.666 0-1.393.606-1.332 1.333v.728h-.303c-.181-.061-.303 0-.484 0-.908 0-1.332.909-1.332 1.575 0 .667.363.97.908 1.152.363.182.787.06 1.211.06 0 .182.06.364.06.607.061 1.757 2.785 1.757 2.664 0 0-.182 0-.364-.061-.546.303-.121.666-.121.969-.242zM48.112 111.445c1.212-.045 1.17-1.968-.043-1.968-.216 0-.433 0-.65.134v-.627c-.043-.537-.389-.984-.952-.984-.476 0-.995.447-.952.984v.537H45.3c-.13-.044-.217 0-.347 0-.649 0-.952.671-.952 1.164 0 .492.26.715.65.85.259.134.562.044.865.044 0 .135.043.269.043.448.044 1.297 1.992 1.297 1.905 0 0-.134 0-.269-.043-.403.216-.089.476-.089.692-.179zM176.04 97.024c.121.424.424.788.666.97.666.424 1.695.303 2.179-.425.484-.666.545-1.757-.484-2.363-.908-.546-1.998.06-2.301 1.03-.121.242-.121.485-.06.788z",
+    fill: "#BBD9FD"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M185.045 86.024c.121.424.424.788.666.97.666.424 1.695.303 2.18-.425.484-.666.544-1.757-.545-2.363-.908-.546-1.998.06-2.301 1.03-.06.242-.06.545 0 .788zM28.09 29.576c1.695-.06 1.634-2.667-.061-2.667-.303 0-.605 0-.908.182v-.848c-.06-.788-.545-1.394-1.332-1.394-.666 0-1.392.606-1.332 1.333v.727h-.303c-.181-.06-.302 0-.484 0-.908 0-1.332.91-1.332 1.576 0 .667.364.97.908 1.152.364.181.787.06 1.211.06 0 .182.06.364.06.606.061 1.758 2.785 1.758 2.664 0 0-.182 0-.364-.06-.545.303 0 .666-.06.968-.182zM78.751 8.667C80.446 8.607 80.386 6 78.691 6c-.303 0-.606 0-.909.182v-.849C77.722 4.606 77.239 4 76.451 4c-.666 0-1.393.606-1.332 1.333v.728h-.303c-.181-.061-.303 0-.484 0-.908 0-1.332.909-1.332 1.575 0 .667.363.97.908 1.152.363.182.787.06 1.21.06 0 .182.061.364.061.607.06 1.757 2.785 1.757 2.664 0 0-.182 0-.364-.06-.546.302-.121.665-.121.968-.242z",
+    fill: "#3281EE"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M107.751 10.667c1.695-.06 1.635-2.667-.06-2.667-.303 0-.606 0-.909.182v-.849c-.06-.727-.544-1.333-1.331-1.333-.666 0-1.393.606-1.332 1.333v.728h-.303c-.181-.061-.303 0-.484 0-.908 0-1.332.909-1.332 1.575 0 .667.363.97.908 1.152.363.182.787.06 1.211.06 0 .182.06.364.06.606.061 1.758 2.785 1.758 2.664 0 0-.181 0-.363-.061-.545.303-.06.666-.121.969-.242zM21.612 7.879h-1.634v-1.03c0-2.304-3.633-2.304-3.572 0 0 .424 0 .848.06 1.272-.181 0-.847-.06-.968-.121-2.18-.727-3.148 2.727-.969 3.454.545.182 1.574.182 2.119.182v.788c0 2.303 3.632 2.303 3.572 0v-.97c.484 0 .968-.06 1.513-.06 2.18.06 2.18-3.515-.12-3.515zM8.9 32.485c.12.424.423.788.665.97.666.424 1.695.303 2.18-.425.484-.666.544-1.757-.485-2.363-.908-.546-1.998.06-2.3 1.03-.121.242-.121.546-.06.788zm35.14 8.539c.12.424.424.788.666.97.666.424 1.695.303 2.179-.425.484-.666.545-1.757-.484-2.363-.908-.546-1.998.06-2.3 1.03-.122.242-.122.546-.061.788zm14.026-25c.121.424.424.788.666.97.666.424 1.695.303 2.18-.425.484-.666.544-1.757-.485-2.363-.908-.546-1.998.06-2.3 1.03a.87.87 0 0 0-.061.788z",
+    fill: "#BBD9FD"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M43.89 7.576c.12.424.423.788.666.97.666.424 1.695.302 2.179-.425.484-.667.545-1.757-.545-2.363-.908-.546-1.998.06-2.3 1.03-.06.242-.06.545 0 .788zM84.026 28.97c.12.424.424.787.666.969.666.424 1.695.303 2.18-.424.483-.667.544-1.758-.546-2.364-.908-.545-1.997.06-2.3 1.03a1.73 1.73 0 0 0 0 .788z",
+    fill: "#3281EE"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M20.04 107.024c.12.424.424.788.666.97.666.424 1.695.303 2.179-.425.484-.666.545-1.757-.484-2.363-.908-.546-1.998.06-2.3 1.03-.122.242-.122.546-.061.788zm-15-19c.12.424.424.788.666.97.666.424 1.695.303 2.179-.425.484-.666.545-1.757-.484-2.363-.908-.546-1.998.06-2.3 1.03-.122.242-.122.545-.061.788z",
+    fill: "#BBD9FD"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M191.311 54.758h-1.634v-1.03c0-2.304-3.632-2.304-3.572 0 0 .423 0 .848.061 1.272-.182 0-.848-.06-.969-.121-2.179-.727-3.148 2.727-.969 3.454.545.182 1.574.182 2.119.182v.788c0 2.303 3.633 2.303 3.572 0v-.97c.484 0 .969-.06 1.513-.06 2.24.06 2.24-3.515-.121-3.515z",
+    fill: "#3281EE"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M136.045 21.024c.121.424.424.788.666.97.666.424 1.695.303 2.18-.425.484-.666.544-1.757-.545-2.363-.908-.546-1.998.06-2.301 1.03-.06.242-.06.485 0 .788z",
+    fill: "#BBD9FD"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M129.045 10.024c.121.424.424.788.666.97.666.424 1.695.303 2.18-.425.484-.666.545-1.757-.545-2.363-.908-.546-1.998.06-2.301 1.03-.06.242-.06.546 0 .788zm-82.975 16c.121.424.424.788.666.97.666.424 1.695.303 2.18-.425.484-.666.544-1.757-.546-2.363-.908-.546-1.997.06-2.3 1.03-.06.242-.121.546 0 .788zM11.751 99.667c1.695-.06 1.635-2.667-.06-2.667-.303 0-.606 0-.909.182v-.849c-.06-.727-.544-1.333-1.331-1.333-.666 0-1.393.606-1.332 1.333v.728h-.303c-.181-.061-.303 0-.484 0-.908 0-1.332.909-1.332 1.575 0 .667.363.97.908 1.152.363.182.787.06 1.21.06 0 .182.061.364.061.607.06 1.757 2.785 1.757 2.664 0 0-.182 0-.364-.06-.546.363-.06.665-.121.968-.242zm153-25c1.695-.06 1.635-2.667-.06-2.667-.303 0-.606 0-.909.182v-.849c-.06-.727-.544-1.333-1.331-1.333-.666 0-1.393.606-1.332 1.333v.728h-.303c-.181-.061-.303 0-.484 0-.908 0-1.332.909-1.332 1.575 0 .667.363.97.908 1.152.363.182.787.06 1.211.06 0 .182.06.364.06.606.061 1.758 2.785 1.758 2.664 0 0-.181 0-.363-.061-.545.364-.06.666-.121.969-.242zm-11.706-18.643c.121.424.424.788.666.97.666.424 1.695.303 2.18-.425.484-.666.545-1.757-.545-2.363-.908-.546-1.998.06-2.301 1.03-.06.242-.06.546 0 .788z",
+    fill: "#3281EE"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M193.07 73.024c.121.424.424.788.666.97.666.424 1.695.303 2.179-.425.484-.666.545-1.757-.545-2.363-.908-.546-1.997.06-2.3 1.03-.061.242-.121.545 0 .788zm1.681-65.357c1.695-.06 1.635-2.667-.06-2.667-.303 0-.606 0-.909.182v-.849c-.06-.727-.544-1.333-1.331-1.333-.666 0-1.393.606-1.332 1.333v.728h-.303c-.181-.061-.303 0-.484 0-.908 0-1.332.909-1.332 1.575 0 .667.363.97.908 1.152.363.182.787.06 1.211.06 0 .182.06.364.06.607.061 1.757 2.785 1.757 2.664 0 0-.182 0-.364-.061-.546.303-.121.666-.182.969-.242z",
+    fill: "#BBD9FD"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M49.751 89.667c1.695-.06 1.635-2.667-.06-2.667-.303 0-.606 0-.909.182v-.849c-.06-.727-.544-1.333-1.331-1.333-.666 0-1.393.606-1.332 1.333v.728h-.303c-.181-.061-.303 0-.484 0-.908 0-1.332.909-1.332 1.575 0 .667.363.97.908 1.152.363.182.787.06 1.21.06 0 .182.061.364.061.606.06 1.758 2.785 1.758 2.664 0 0-.181 0-.363-.06-.545.302-.121.665-.182.968-.242zm9.294 15.357c.121.424.424.788.666.97.666.424 1.695.303 2.18-.425.484-.666.544-1.757-.545-2.363-.908-.546-1.998.06-2.3 1.03a1.72 1.72 0 0 0 0 .788z",
+    fill: "#3281EE"
+  }));
+};
+
+IllustrationSharedDrives.defaultProps = {
+  width: "200",
+  height: "136",
+  viewBox: "0 0 200 136",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+import withLocales from '../../hoc/withLocales';
+import { useSharingContext } from '../../hooks/useSharingContext';
+import { Contact } from '../../models';
+var styles = {
+  "shared-drive-who-has-access-wrapper": "shareddrive__shared-drive-who-has-access-wrapper___K1kbr"
+};
+import { default as DumbShareByEmail } from '../ShareByEmail';
+import WhoHasAccess from '../WhoHasAccess';
+export var SharedDriveModal = withLocales(function (_ref) {
+  var onClose = _ref.onClose;
+  var client = useClient();
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var _useSharingContext = useSharingContext(),
+      share = _useSharingContext.share;
+
+  var _useAlert = useAlert(),
+      showAlert = _useAlert.showAlert;
+
+  var _useState = useState({
+    recipients: [],
+    readOnlyRecipients: []
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      sharedDriveRecipients = _useState2[0],
+      setSharedDriveRecipients = _useState2[1];
+
+  var _useState3 = useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      sharedDriveName = _useState4[0],
+      setSharedDriveName = _useState4[1];
+
+  var _useState5 = useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      sharedDriveDescription = _useState6[0],
+      setSharedDriveDescription = _useState6[1];
+
+  var onShare = function onShare(params) {
+    setSharedDriveRecipients({
+      recipients: mergeAndDeduplicateRecipients([sharedDriveRecipients.recipients, params.recipients]),
+      readOnlyRecipients: mergeAndDeduplicateRecipients([sharedDriveRecipients.readOnlyRecipients, params.readOnlyRecipients])
+    });
+  };
+
+  var handleSharedDriveNameChange = function handleSharedDriveNameChange(event) {
+    setSharedDriveName(event.target.value);
+  };
+
+  var handleSharedDriveDescriptionChange = function handleSharedDriveDescriptionChange(event) {
+    setSharedDriveDescription(event.target.value);
+  };
+
+  var onCreate = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _yield$client$create2, sharedDriveFolder;
+
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return client.create('io.cozy.files', {
+              name: sharedDriveName,
+              dirId: 'io.cozy.files.shared-drives-dir',
+              type: 'directory'
+            });
+
+          case 3:
+            _yield$client$create2 = _context.sent;
+            sharedDriveFolder = _yield$client$create2.data;
+            _context.next = 7;
+            return share({
+              document: sharedDriveFolder,
+              recipients: sharedDriveRecipients.recipients,
+              readOnlyRecipients: sharedDriveRecipients.readOnlyRecipients,
+              description: sharedDriveDescription,
+              sharedDrive: true
+            });
+
+          case 7:
+            showAlert({
+              message: t('SharedDrive.sharedDriveModal.successNotification'),
+              severity: 'success',
+              variant: 'filled'
+            });
+            onClose();
+            _context.next = 14;
+            break;
+
+          case 11:
+            _context.prev = 11;
+            _context.t0 = _context["catch"](0);
+            showAlert({
+              message: t('SharedDrive.sharedDriveModal.errorNotification'),
+              severity: 'error',
+              variant: 'filled'
+            });
+
+          case 14:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 11]]);
+    }));
+
+    return function onCreate() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var onSetType = function onSetType(index, newType) {
+    var _id = index.split('virtual-shared-drive-sharing-')[1];
+
+    if (newType === 'two-way') {
+      setSharedDriveRecipients(function (prev) {
+        var recipientToMove = prev.readOnlyRecipients.find(function (r) {
+          return r._id === _id;
+        });
+        return {
+          recipients: [].concat(_toConsumableArray(prev.recipients), [recipientToMove]),
+          readOnlyRecipients: prev.readOnlyRecipients.filter(function (r) {
+            return r._id !== _id;
+          })
+        };
+      });
+    } else {
+      setSharedDriveRecipients(function (prev) {
+        var recipientToMove = prev.recipients.find(function (r) {
+          return r._id === _id;
+        });
+        return {
+          recipients: prev.recipients.filter(function (r) {
+            return r._id !== _id;
+          }),
+          readOnlyRecipients: [].concat(_toConsumableArray(prev.readOnlyRecipients), [recipientToMove])
+        };
+      });
+    }
+  };
+
+  var onRevoke = function onRevoke(index) {
+    var _id = index.split('virtual-shared-drive-sharing-')[1];
+    setSharedDriveRecipients(function (prev) {
+      return {
+        recipients: prev.recipients.filter(function (r) {
+          return r._id !== _id;
+        }),
+        readOnlyRecipients: prev.readOnlyRecipients.filter(function (r) {
+          return r._id !== _id;
+        })
+      };
+    });
+  };
+
+  var recipients = formatRecipients(sharedDriveRecipients);
+  return /*#__PURE__*/React.createElement(FixedActionsDialog, {
+    open: true,
+    onClose: onClose,
+    title: t('SharedDrive.sharedDriveModal.title'),
+    content: /*#__PURE__*/React.createElement("div", {
+      className: "u-flex u-flex-column u-flex-items-center"
+    }, /*#__PURE__*/React.createElement(IllustrationSharedDrives, null), /*#__PURE__*/React.createElement(TextField, {
+      required: true,
+      label: t('SharedDrive.sharedDriveModal.nameLabel'),
+      variant: "outlined",
+      size: "small",
+      className: "u-w-100 u-mt-1",
+      value: sharedDriveName,
+      onChange: handleSharedDriveNameChange
+    }), /*#__PURE__*/React.createElement(TextField, {
+      required: true,
+      label: t('SharedDrive.sharedDriveModal.descriptionLabel'),
+      variant: "outlined",
+      size: "large",
+      className: "u-w-100 u-mt-1",
+      value: sharedDriveDescription,
+      onChange: handleSharedDriveDescriptionChange
+    }), /*#__PURE__*/React.createElement("div", {
+      className: cx('u-mt-1', styles['shared-drive-who-has-access-wrapper'])
+    }, /*#__PURE__*/React.createElement(Typography, {
+      variant: "h6",
+      className: "u-mb-1-half"
+    }, t('Share.contacts.whoHasAccess')), /*#__PURE__*/React.createElement(DumbShareByEmail, {
+      createContact: function createContact(contact) {
+        return client.create(Contact.doctype, contact);
+      },
+      currentRecipients: [],
+      document: document,
+      documentType: "Files",
+      onShare: onShare,
+      submitLabel: t('SharedDrive.sharedDriveModal.add'),
+      showNotifications: false
+    }), /*#__PURE__*/React.createElement(WhoHasAccess, {
+      isOwner: true,
+      recipients: recipients,
+      document: document,
+      documentType: "Files",
+      className: "u-w-100",
+      onRevoke: onRevoke,
+      onSetType: onSetType
+    }))),
+    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      variant: "primary",
+      label: t('SharedDrive.sharedDriveModal.create'),
+      onClick: onCreate
+    }))
+  });
+});
+SharedDriveModal.propTypes = {
+  onClose: PropTypes.func.isRequired
+};

package/dist/components/SharedDrive/SharedDriveRecipient.js

@@ -0,0 +1,61 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["fadeIn", "members"];
+import PropTypes from 'prop-types';
+import React from 'react';
+import Fade from 'cozy-ui/transpiled/react/Fade';
+import ListItem from 'cozy-ui/transpiled/react/ListItem';
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon';
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
+import Typography from 'cozy-ui/transpiled/react/Typography';
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints';
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
+import SharedDriveRecipientPermissions from './SharedDriveRecipientPermissions';
+import SharedDriveRecipientStatus from './SharedDriveRecipientStatus';
+import { FADE_IN_DURATION, DEFAULT_DISPLAY_NAME } from '../../helpers/recipients';
+import { getDisplayName } from '../../models';
+import { GroupAvatar } from '../Avatar/GroupAvatar';
+import { MemberAvatar } from '../Avatar/MemberAvatar';
+
+var SharedDriveRecipient = function SharedDriveRecipient(props) {
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
+  var fadeIn = props.fadeIn,
+      members = props.members,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var defaultDisplayName = t(DEFAULT_DISPLAY_NAME);
+  var name = getDisplayName(rest, defaultDisplayName);
+  return /*#__PURE__*/React.createElement(Fade, {
+    in: true,
+    timeout: fadeIn ? FADE_IN_DURATION : 0
+  }, /*#__PURE__*/React.createElement(ListItem, {
+    gutters: isMobile ? 'default' : 'double',
+    size: "small"
+  }, /*#__PURE__*/React.createElement(ListItemIcon, null, members ? /*#__PURE__*/React.createElement(GroupAvatar, {
+    size: "small"
+  }) : /*#__PURE__*/React.createElement(MemberAvatar, {
+    size: "small",
+    recipient: props
+  })), /*#__PURE__*/React.createElement(ListItemText, {
+    primary: /*#__PURE__*/React.createElement(Typography, {
+      variant: "body1"
+    }, name),
+    secondary: /*#__PURE__*/React.createElement(SharedDriveRecipientStatus, props)
+  }), /*#__PURE__*/React.createElement(SharedDriveRecipientPermissions, _extends({}, props, {
+    className: "u-flex-shrink-0"
+  }))));
+};
+
+SharedDriveRecipient.propTypes = {
+  instance: PropTypes.string,
+  isOwner: PropTypes.bool,
+  status: PropTypes.string,
+  recipientConfirmationData: PropTypes.object,
+  verifyRecipient: PropTypes.func
+};
+export default SharedDriveRecipient;

package/dist/components/SharedDrive/SharedDriveRecipientPermissions.js

@@ -0,0 +1,101 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useState, useRef } from 'react';
+import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu';
+import { makeActions, divider } from 'cozy-ui/transpiled/react/ActionsMenu/Actions';
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
+import { revokeSharedDriveMember } from '../Recipient/actions/revokeSharedDriveMember';
+import { setReadOnlySharedPermission } from '../Recipient/actions/setReadOnlySharedPermission';
+import { setReadWriteSharedPermission } from '../Recipient/actions/setReadWriteSharedPermission';
+
+var ShareDriveRecipientPermissions = function ShareDriveRecipientPermissions(_ref) {
+  var index = _ref.index,
+      onSetType = _ref.onSetType,
+      type = _ref.type,
+      onRevoke = _ref.onRevoke;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var buttonRef = useRef();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isMenuDisplayed = _useState2[0],
+      setMenuDisplayed = _useState2[1];
+
+  var toggleMenu = function toggleMenu() {
+    return setMenuDisplayed(!isMenuDisplayed);
+  };
+
+  var hideMenu = function hideMenu() {
+    return setMenuDisplayed(false);
+  };
+
+  var handleRevocation = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            onRevoke(index);
+            hideMenu();
+
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+
+    return function handleRevocation() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var setType = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(newType) {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (newType !== type) {
+              onSetType(index, newType);
+            }
+
+            hideMenu();
+
+          case 2:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+
+    return function setType(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  var actions = makeActions([setReadOnlySharedPermission, setReadWriteSharedPermission, divider, revokeSharedDriveMember], {
+    t: t,
+    type: type,
+    setType: setType,
+    handleRevocation: handleRevocation
+  });
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DropdownButton, {
+    ref: buttonRef,
+    "aria-controls": "simple-menu",
+    "aria-haspopup": "true",
+    onClick: toggleMenu,
+    textVariant: "body2"
+  }, t("Share.type.".concat(type)).toLowerCase()), /*#__PURE__*/React.createElement(ActionsMenu, {
+    ref: buttonRef,
+    open: isMenuDisplayed,
+    actions: actions,
+    autoClose: true,
+    onClose: hideMenu
+  }));
+};
+
+export default ShareDriveRecipientPermissions;

package/dist/components/SharedDrive/SharedDriveRecipientStatus.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Typography from 'cozy-ui/transpiled/react/Typography';
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
+
+var SharedDriveRecipientStatus = function SharedDriveRecipientStatus(_ref) {
+  var members = _ref.members,
+      email = _ref.email;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var text = members ? t('GroupRecipient.secondary', {
+    memberCount: members.length,
+    smart_count: members.length
+  }) : email;
+  return /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption",
+    color: "textSecondary"
+  }, text);
+};
+
+export default SharedDriveRecipientStatus;

package/dist/components/SharedDrive/helpers.js

@@ -0,0 +1,53 @@
+import { models } from 'cozy-client';
+var ContactModel = models.contact;
+export var mergeAndDeduplicateRecipients = function mergeAndDeduplicateRecipients(arrays) {
+  var combinedArray = arrays.flat();
+  var seenIds = new Set();
+  var uniqueArray = combinedArray.filter(function (item) {
+    if (!seenIds.has(item.id)) {
+      seenIds.add(item.id);
+      return true;
+    }
+
+    return false;
+  });
+  return uniqueArray;
+};
+export var formatRecipients = function formatRecipients(sharedDriveRecipients) {
+  var recipients = [];
+  sharedDriveRecipients.recipients.forEach(function (r) {
+    recipients.push({
+      index: "virtual-shared-drive-sharing-".concat(r._id),
+      email: ContactModel.getPrimaryEmail(r),
+      public_name: r.displayName || r.name,
+      memberIndex: r._id,
+      type: 'two-way',
+      members: r.members
+    });
+  });
+  sharedDriveRecipients.readOnlyRecipients.forEach(function (r) {
+    recipients.push({
+      index: "virtual-shared-drive-sharing-".concat(r._id),
+      email: ContactModel.getPrimaryEmail(r),
+      public_name: r.displayName || r.name,
+      memberIndex: r._id,
+      type: 'one-way',
+      members: r.members
+    });
+  }); // We need to sort recipients by public_name
+  // to avoid reording them every time we change
+  // them from read only to read write.
+
+  recipients.sort(function (a, b) {
+    if (a.public_name < b.public_name) {
+      return -1;
+    }
+
+    if (a.public_name > b.public_name) {
+      return 1;
+    }
+
+    return 0;
+  });
+  return recipients;
+};

package/dist/components/WhoHasAccess.js

@@ -35,9 +35,10 @@ var WhoHasAccess = function WhoHasAccess(_ref2) {
       recipientsToBeConfirmed = _ref2$recipientsToBeC === void 0 ? [] : _ref2$recipientsToBeC,
       document = _ref2.document,
       documentType = _ref2.documentType,
-      onRevoke = _ref2.onRevoke,
       className = _ref2.className,
+      onRevoke = _ref2.onRevoke,
       onRevokeSelf = _ref2.onRevokeSelf,
+      onSetType = _ref2.onSetType,
       verifyRecipient = _ref2.verifyRecipient,
       link = _ref2.link,
       permissions = _ref2.permissions;
@@ -65,6 +66,7 @@ var WhoHasAccess = function WhoHasAccess(_ref2) {
     documentType: documentType,
     onRevoke: onRevoke,
     onRevokeSelf: onRevokeSelf,
+    onSetType: onSetType,
     verifyRecipient: verifyRecipient
   })));
 };

package/dist/components/WhoHasAccessLight.js

@@ -7,7 +7,6 @@ var styles = {
   "recipient": "recipient__recipient___2DmZI",
   "recipients-list-light": "recipient__recipients-list-light___Vq4op",
   "recipient-idents": "recipient__recipient-idents___3s7rw",
-  "recipient-status-icon": "recipient__recipient-status-icon___-liGw",
   "recipient-user": "recipient__recipient-user___1THIU",
   "recipient-details": "recipient__recipient-details___2fZfc",
   "avatar": "recipient__avatar___2LnIV",

package/dist/index.js

@@ -15,6 +15,7 @@ export { default as LinkRecipientLite } from './components/Recipient/LinkRecipie
 export { default as OwnerRecipientDefaultLite } from './components/Recipient/OwnerRecipientDefaultLite';
 export { SharedRecipientsList } from './SharedRecipientsList';
 export { ShareButton } from './ShareButton';
+export { SharedDriveModal } from './components/SharedDrive/SharedDriveModal';
 export { ShareModal } from './components/ShareModal/ShareModal';
 export { RefreshableSharings } from './RefreshableSharings';
 export { CozyPassFingerprintDialogContent } from './components/CozyPassFingerprintDialogContent';

package/dist/styles/autosuggest.styl

@@ -55,9 +55,13 @@
         border  none
         &:hover
         &:focus
+        &:focus-visible
             border none
+            outline none
         &:first-child
-          padding .25rem .5rem
-
+            padding .25rem .5rem
+        &::placeholder
+            color var(--secondaryTextColor)
+            font-size 1rem
 .recipientChip
   margin .25rem .5rem .25rem 0

package/dist/styles/recipient.styl

@@ -25,9 +25,6 @@
     overflow hidden
     text-overflow ellipsis
 
-.recipient-status-icon
-  margin-right: .25rem
-
 .recipient-user
 .recipient-details
     text-overflow ellipsis

package/dist/styles/shareddrive.styl

@@ -0,0 +1,8 @@
+@require 'components/forms.styl'
+
+.shared-drive-who-has-access-wrapper
+  border: 1px solid var(--borderMainColor)
+  border-radius: 0.5rem
+  width: 100%
+  padding: 1rem
+  box-sizing: border-box