cozy-sharing 5.0.0 → 6.0.0

package/dist/components/ShareDialogCozyToCozy.js

@@ -3,6 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["showShareByLink", "documentType", "document"];
 import React from 'react';
 import { useI18n } from 'cozy-ui/transpiled/react/I18n';
+import Typography from 'cozy-ui/transpiled/react/Typography';
 import { default as DumbShareByLink } from './ShareByLink';
 import { default as DumbShareByEmail } from './ShareByEmail';
 import WhoHasAccess from './WhoHasAccess';
@@ -58,7 +59,11 @@ var SharingContent = function SharingContent(_ref) {
       showShareOnlyByLink = _ref.showShareOnlyByLink,
       showWhoHasAccess = _ref.showWhoHasAccess,
       recipientsToBeConfirmed = _ref.recipientsToBeConfirmed,
-      verifyRecipient = _ref.verifyRecipient;
+      verifyRecipient = _ref.verifyRecipient,
+      link = _ref.link,
+      permissions = _ref.permissions,
+      onUpdateShareLinkPermissions = _ref.onUpdateShareLinkPermissions,
+      onRevokeLink = _ref.onRevokeLink;
 
   var _useI18n = useI18n(),
       t = _useI18n.t;
@@ -69,7 +74,10 @@ var SharingContent = function SharingContent(_ref) {
     className: styles['share-byemail-onlybylink']
   }, t("".concat(documentType, ".share.shareByEmail.onlyByLink"), {
     type: t("".concat(documentType, ".share.shareByEmail.type.").concat(document.type === 'directory' ? 'folder' : 'file'))
-  }), ' ', /*#__PURE__*/React.createElement("strong", null, t("".concat(documentType, ".share.shareByEmail.").concat(hasSharedParent ? 'hasSharedParent' : 'hasSharedChild')))), showShareByEmail && /*#__PURE__*/React.createElement(DumbShareByEmail, {
+  }), ' ', /*#__PURE__*/React.createElement("strong", null, t("".concat(documentType, ".share.shareByEmail.").concat(hasSharedParent ? 'hasSharedParent' : 'hasSharedChild')))), /*#__PURE__*/React.createElement(Typography, {
+    variant: "h6",
+    className: "u-mb-1-half"
+  }, t('Share.contacts.whoHasAccess')), showShareByEmail && /*#__PURE__*/React.createElement(DumbShareByEmail, {
     contacts: contacts,
     createContact: createContact,
     currentRecipients: recipients,
@@ -81,7 +89,7 @@ var SharingContent = function SharingContent(_ref) {
     sharing: sharing,
     sharingDesc: sharingDesc
   }), showWhoHasAccess && /*#__PURE__*/React.createElement(WhoHasAccess, {
-    className: "u-mt-1",
+    className: "u-mt-half",
     document: document,
     documentType: documentType,
     isOwner: isOwner,
@@ -89,7 +97,11 @@ var SharingContent = function SharingContent(_ref) {
     onRevokeSelf: onRevokeSelf,
     recipients: recipients,
     recipientsToBeConfirmed: recipientsToBeConfirmed,
-    verifyRecipient: verifyRecipient
+    verifyRecipient: verifyRecipient,
+    link: link,
+    permissions: permissions,
+    onUpdateShareLinkPermissions: onUpdateShareLinkPermissions,
+    onRevokeLink: onRevokeLink
   }));
 };
 /**

package/dist/components/ShareDialogCozyToCozy.spec.js

@@ -12,6 +12,16 @@ import { CozyPassFingerprintDialogContent } from './CozyPassFingerprintDialogCon
 import AppLike from '../../test/AppLike';
 import { createMockClient } from 'cozy-client';
 import { act, render, fireEvent } from '@testing-library/react';
+jest.mock('cozy-client', function () {
+  return _objectSpread(_objectSpread({}, jest.requireActual('cozy-client')), {}, {
+    useQuery: jest.fn().mockReturnValue({
+      data: {
+        public_name: 'Alice'
+      }
+    }),
+    hasQueryBeenLoaded: jest.fn().mockReturnValue(true)
+  });
+});
 describe('ShareDialogCozyToCozy', function () {
   var client = createMockClient({});
   client.options = {
@@ -30,7 +40,8 @@ describe('ShareDialogCozyToCozy', function () {
     var _setup = setup(props),
         getByText = _setup.getByText;
 
-    expect(getByText('Owner')).toBeTruthy();
+    expect(getByText('You')).toBeTruthy();
+    expect(getByText('owner')).toBeTruthy();
   });
   it('should show loading while calling getRecipientsToBeConfirmed', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
     var _deferablePromise, promise, resolve, props, _setup2, getByText;

package/dist/components/ShareDialogOnlyByLink.js

@@ -2,9 +2,15 @@ import React from 'react';
 import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs';
 import { useI18n } from 'cozy-ui/transpiled/react/I18n';
 import { default as DumbShareByLink } from './ShareByLink';
+import WhoHasAccess from './WhoHasAccess';
+import Typography from 'cozy-ui/transpiled/react/Typography';
 
 var ShareDialogOnlyByLink = function ShareDialogOnlyByLink(_ref) {
-  var document = _ref.document,
+  var isOwner = _ref.isOwner,
+      onRevoke = _ref.onRevoke,
+      onRevokeSelf = _ref.onRevokeSelf,
+      recipients = _ref.recipients,
+      document = _ref.document,
       documentType = _ref.documentType,
       link = _ref.link,
       onClose = _ref.onClose,
@@ -23,19 +29,26 @@ var ShareDialogOnlyByLink = function ShareDialogOnlyByLink(_ref) {
     title: t("".concat(documentType, ".share.title"), {
       name: document.name || document.attributes.name
     }),
-    content: /*#__PURE__*/React.createElement(DumbShareByLink, {
-      checked: link !== null,
+    content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
+      variant: "h6"
+    }, t('Share.contacts.whoHasAccess')), /*#__PURE__*/React.createElement(WhoHasAccess, {
+      className: "u-mt-half",
       document: document,
       documentType: documentType,
+      isOwner: isOwner,
+      onRevoke: onRevoke,
+      onRevokeSelf: onRevokeSelf,
+      recipients: recipients,
       link: link,
-      onChangePermissions: onUpdateShareLinkPermissions,
-      onDisable: onRevokeLink,
-      onEnable: onShareByLink,
       permissions: permissions,
-      popperOptions: {
-        strategy: 'fixed'
-      }
-    })
+      onUpdateShareLinkPermissions: onUpdateShareLinkPermissions,
+      onRevokeLink: onRevokeLink
+    }), /*#__PURE__*/React.createElement(DumbShareByLink, {
+      link: link,
+      document: document,
+      documentType: documentType,
+      onEnable: onShareByLink
+    }))
   });
 };
 

package/dist/components/ShareDialogTwoStepsConfirmationContainer.js

@@ -260,17 +260,17 @@ var ShareDialogTwoStepsConfirmationContainer = function ShareDialogTwoStepsConfi
       showShareOnlyByLink: showShareOnlyByLink,
       showWhoHasAccess: showWhoHasAccess,
       recipientsToBeConfirmed: recipientsToBeConfirmed,
-      verifyRecipient: showConfirmationDialog
+      verifyRecipient: showConfirmationDialog,
+      link: link,
+      permissions: permissions,
+      onUpdateShareLinkPermissions: onUpdateShareLinkPermissions,
+      onRevokeLink: onRevokeLink
     });
     dialogActions = DialogActionsOnShare ? /*#__PURE__*/React.createElement(DialogActionsOnShare, {
-      checked: link !== null,
+      link: link,
       document: document,
       documentType: documentType,
-      link: link,
-      onChangePermissions: onUpdateShareLinkPermissions,
-      onDisable: onRevokeLink,
-      onEnable: onShareByLink,
-      permissions: permissions
+      onEnable: onShareByLink
     }) : null;
   } else if (status === 'confirmingRecipient') {
     dialogTitle = t("Share.twoStepsConfirmation.title");

package/dist/components/ShareModal.js

@@ -34,6 +34,10 @@ export var ShareModal = function ShareModal(_ref) {
   var showShareOnlyByLink = hasSharedParent || hasSharedChild;
   var showWhoHasAccess = documentType !== 'Albums';
   return shareDialogOnlyByLink ? /*#__PURE__*/React.createElement(ShareDialogOnlyByLink, {
+    isOwner: isOwner,
+    onRevoke: onRevoke,
+    onRevokeSelf: onRevokeSelf,
+    recipients: recipients,
     document: document,
     documentType: documentType,
     link: link,
@@ -80,7 +84,7 @@ ShareModal.propTypes = {
   hasSharedChild: PropTypes.bool,
   hasSharedParent: PropTypes.bool,
   isOwner: PropTypes.bool,
-  link: PropTypes.string.isRequired,
+  link: PropTypes.string,
   needsContactsPermission: PropTypes.bool,
   onClose: PropTypes.func.isRequired,
   onRevoke: PropTypes.func.isRequired,

package/dist/components/ShareRecipientsInput.js

@@ -1,148 +1,64 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-import React, { Component } from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { contactsResponseType, groupsResponseType } from '../propTypes';
 import ShareAutosuggest from './ShareAutosuggest';
-var styles = {
-  "share-modal-content": "share__share-modal-content___XTtaK",
-  "coz-form": "share__coz-form___33NYF",
-  "coz-form-group": "share__coz-form-group___1PLAZ",
-  "coz-form-desc": "share__coz-form-desc___-pmK5",
-  "coz-form-label": "share__coz-form-label___31jb0",
-  "coz-form-label--error": "share__coz-form-label--error___2EXCl",
-  "coz-form-errors": "share__coz-form-errors___1rk2R",
-  "coz-form-controls": "share__coz-form-controls___39Uwg",
-  "coz-form-controls--full": "share__coz-form-controls--full___1YpNp",
-  "coz-form-controls--dispatch": "share__coz-form-controls--dispatch___3JXzz",
-  "error": "share__error___6Ycal",
-  "CozyTheme--inverted": "share__CozyTheme--inverted___2pLD2",
-  "CozyTheme--normal": "share__CozyTheme--normal___qSFyr",
-  "share-byemail-onlybylink": "share__share-byemail-onlybylink___C_7b_",
-  "aligned-dropdown-button": "share__aligned-dropdown-button___CeTDs",
-  "share-type-control": "share__share-type-control___KcpDf",
-  "select-wrapper": "share__select-wrapper___3FfiH",
-  "select-option": "share__select-option___13o6b",
-  "select-option-label": "share__select-option-label___Zj_RU",
-  "select-option-desc": "share__select-option-desc___6uaQq",
-  "share-details-created": "share__share-details-created___13BO0",
-  "share-details-perm": "share__share-details-perm___23_VF",
-  "share-details-perm-desc": "share__share-details-perm-desc___tqfXx",
-  "spin": "share__spin___1P7nU",
-  "shake": "share__shake___1EeCI"
-};
-
-var ShareRecipientsInput = /*#__PURE__*/function (_Component) {
-  _inherits(ShareRecipientsInput, _Component);
 
-  var _super = _createSuper(ShareRecipientsInput);
-
-  function ShareRecipientsInput() {
-    var _this;
-
-    _classCallCheck(this, ShareRecipientsInput);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+var ShareRecipientsInput = function ShareRecipientsInput(_ref) {
+  var contacts = _ref.contacts,
+      groups = _ref.groups,
+      recipients = _ref.recipients,
+      placeholder = _ref.placeholder,
+      onPick = _ref.onPick,
+      onRemove = _ref.onRemove;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      loading = _useState2[0],
+      setLoading = _useState2[1];
+
+  useEffect(function () {
+    if (loading && !contacts.hasMore && contacts.fetchStatus === 'loaded' && !groups.hasMore && groups.fetchStatus === 'loaded') {
+      setLoading(false);
     }
+  }, [contacts, groups, loading]);
 
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      loading: false
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onFocus", function () {
-      var _this$props = _this.props,
-          contacts = _this$props.contacts,
-          groups = _this$props.groups;
-
-      if (contacts.hasMore || contacts.fetchStatus === 'loading' || groups.hasMore || groups.fetchStatus === 'loading') {
-        _this.setState({
-          loading: true
-        });
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "getContactsAndGroups", function () {
-      // we need contacts to be loaded to be able to add all group members to recipients
-      var _this$props2 = _this.props,
-          contacts = _this$props2.contacts,
-          groups = _this$props2.groups;
-
-      if (contacts.hasMore || contacts.fetchStatus === 'loading') {
-        return contacts.data;
-      } else {
-        return [].concat(_toConsumableArray(contacts.data), _toConsumableArray(groups.data));
-      }
-    });
-
-    return _this;
-  }
-
-  _createClass(ShareRecipientsInput, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      var _this$props3 = this.props,
-          contacts = _this$props3.contacts,
-          groups = _this$props3.groups;
-
-      if (this.state.loading && !contacts.hasMore && contacts.fetchStatus === 'loaded' && !groups.hasMore && groups.fetchStatus === 'loaded') {
-        this.setState({
-          loading: false
-        });
-      }
+  var onShareAutosuggestFocus = function onShareAutosuggestFocus() {
+    if (contacts.hasMore || contacts.fetchStatus === 'loading' || groups.hasMore || groups.fetchStatus === 'loading') {
+      setLoading(true);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props4 = this.props,
-          label = _this$props4.label,
-          onPick = _this$props4.onPick,
-          onRemove = _this$props4.onRemove,
-          placeholder = _this$props4.placeholder,
-          recipients = _this$props4.recipients;
-      var loading = this.state.loading;
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
-        className: styles['coz-form-label'],
-        htmlFor: "email"
-      }, label), /*#__PURE__*/React.createElement(ShareAutosuggest, {
-        loading: loading,
-        contactsAndGroups: this.getContactsAndGroups(),
-        recipients: recipients,
-        onFocus: this.onFocus,
-        onPick: onPick,
-        onRemove: onRemove,
-        placeholder: placeholder
-      }));
+  };
+
+  var getContactsAndGroups = function getContactsAndGroups() {
+    // we need contacts to be loaded to be able to add all group members to recipients
+    if (contacts.hasMore || contacts.fetchStatus === 'loading') {
+      return contacts.data;
+    } else {
+      return [].concat(_toConsumableArray(contacts.data), _toConsumableArray(groups.data));
     }
-  }]);
-
-  return ShareRecipientsInput;
-}(Component);
+  };
+
+  return /*#__PURE__*/React.createElement(ShareAutosuggest, {
+    loading: loading,
+    contactsAndGroups: getContactsAndGroups(),
+    recipients: recipients,
+    onFocus: onShareAutosuggestFocus,
+    onPick: onPick,
+    onRemove: onRemove,
+    placeholder: placeholder
+  });
+};
 
 ShareRecipientsInput.propTypes = {
-  label: PropTypes.string,
   contacts: contactsResponseType.isRequired,
   groups: groupsResponseType.isRequired,
   recipients: PropTypes.array,
+  placeholder: PropTypes.string,
   onPick: PropTypes.func.isRequired,
-  onRemove: PropTypes.func.isRequired,
-  placeholder: PropTypes.string
+  onRemove: PropTypes.func.isRequired
 };
 ShareRecipientsInput.defaultProps = {
-  label: 'To:',
   recipients: []
 };
 export default ShareRecipientsInput;

package/dist/components/WhoHasAccess.js

@@ -1,8 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import PropTypes from 'prop-types';
-import Recipient from './Recipient';
+import { useClient, useQuery, hasQueryBeenLoaded } from 'cozy-client';
+import Recipient from './Recipient/Recipient';
+import LinkRecipient from './Recipient/LinkRecipient';
 import { useI18n } from 'cozy-ui/transpiled/react/I18n';
+import List from 'cozy-ui/transpiled/react/MuiCozyTheme/List';
+import { buildInstanceSettingsQuery } from '../queries/queries';
+import { filterAndReworkRecipients } from '../helpers/recipients';
+import { usePrevious } from '../helpers/hooks';
 /**
  * Displays a warning if some contacts are waiting for confirmation of their sharing
  *
@@ -25,6 +31,8 @@ var RecipientWaitingForConfirmationAlert = function RecipientWaitingForConfirmat
 };
 
 var WhoHasAccess = function WhoHasAccess(_ref2) {
+  var _instanceSettingsResu, _instanceSettingsResu2;
+
   var _ref2$isOwner = _ref2.isOwner,
       isOwner = _ref2$isOwner === void 0 ? false : _ref2$isOwner,
       recipients = _ref2.recipients,
@@ -35,12 +43,41 @@ var WhoHasAccess = function WhoHasAccess(_ref2) {
       onRevoke = _ref2.onRevoke,
       className = _ref2.className,
       onRevokeSelf = _ref2.onRevokeSelf,
-      verifyRecipient = _ref2.verifyRecipient;
+      verifyRecipient = _ref2.verifyRecipient,
+      link = _ref2.link,
+      permissions = _ref2.permissions,
+      onUpdateShareLinkPermissions = _ref2.onUpdateShareLinkPermissions,
+      onRevokeLink = _ref2.onRevokeLink;
+  var client = useClient();
+  var instanceSettingsQuery = buildInstanceSettingsQuery();
+  var instanceSettingsResult = useQuery(instanceSettingsQuery.definition, instanceSettingsQuery.options);
+  var previousLink = usePrevious(link);
+  var previousRecipients = usePrevious(recipients);
+  var linkHasBeenJustCreated = link && previousLink === null;
+  var recipientsToDisplay = filterAndReworkRecipients(recipients, previousRecipients);
+  var public_name = instanceSettingsResult === null || instanceSettingsResult === void 0 ? void 0 : (_instanceSettingsResu = instanceSettingsResult.data) === null || _instanceSettingsResu === void 0 ? void 0 : (_instanceSettingsResu2 = _instanceSettingsResu.attributes) === null || _instanceSettingsResu2 === void 0 ? void 0 : _instanceSettingsResu2.public_name;
   return /*#__PURE__*/React.createElement("div", {
     className: className
   }, /*#__PURE__*/React.createElement(RecipientWaitingForConfirmationAlert, {
     recipientsToBeConfirmed: recipientsToBeConfirmed
-  }), recipients.map(function (recipient) {
+  }), /*#__PURE__*/React.createElement(List, {
+    disablePadding: true
+  }, link && /*#__PURE__*/React.createElement(LinkRecipient, {
+    document: document,
+    documentType: documentType,
+    onRevoke: onRevoke,
+    onRevokeSelf: onRevokeSelf,
+    link: link,
+    permissions: permissions,
+    onChangePermissions: onUpdateShareLinkPermissions,
+    onDisable: onRevokeLink,
+    fadeIn: linkHasBeenJustCreated
+  }), hasQueryBeenLoaded(instanceSettingsResult) && /*#__PURE__*/React.createElement(Recipient, {
+    isOwner: true,
+    status: "owner",
+    instance: client.options.uri,
+    public_name: public_name
+  }), recipientsToDisplay.map(function (recipient) {
     var recipientConfirmationData = recipientsToBeConfirmed.find(function (user) {
       return user.email === recipient.email;
     });
@@ -52,9 +89,10 @@ var WhoHasAccess = function WhoHasAccess(_ref2) {
       onRevoke: onRevoke,
       onRevokeSelf: onRevokeSelf,
       recipientConfirmationData: recipientConfirmationData,
-      verifyRecipient: verifyRecipient
+      verifyRecipient: verifyRecipient,
+      fadeIn: recipient.hasBeenJustAdded
     }));
-  }));
+  })));
 };
 
 WhoHasAccess.propTypes = {

package/dist/components/WhoHasAccessLight.js

@@ -1,25 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import cx from 'classnames';
-import { RecipientWithoutStatus, RecipientPlusX } from './Recipient';
-var styles = {
-  "CozyTheme--inverted": "recipient__CozyTheme--inverted___2anJa",
-  "CozyTheme--normal": "recipient__CozyTheme--normal___994FQ",
-  "recipient": "recipient__recipient___2FlkK",
-  "recipients-list-light": "recipient__recipients-list-light___1Rt5q",
-  "recipient-idents": "recipient__recipient-idents___3-fjp",
-  "recipient-status-icon": "recipient__recipient-status-icon___J4sIm",
-  "recipient-user": "recipient__recipient-user___2cNHW",
-  "recipient-details": "recipient__recipient-details___4SMW5",
-  "avatar": "recipient__avatar___pPmxN",
-  "recipients-avatars": "recipient__recipients-avatars___2Qth2",
-  "--interactive": "recipient__--interactive___1V89N",
-  "recipients-avatars--link": "recipient__recipients-avatars--link___12LyR",
-  "recipients-avatars--plusX": "recipient__recipients-avatars--plusX___28dFs",
-  "recipients-avatars--avatar": "recipient__recipients-avatars--avatar___15hBo",
-  "spin": "recipient__spin___2cogO",
-  "shake": "recipient__shake___3lxk5"
-};
+import RecipientWithoutStatus from './Recipient/RecipientWithoutStatus';
+import RecipientPlusX from './Recipient/RecipientPlusX';
+var styles = {};
 var MAX_DISPLAYED_RECIPIENTS = 2;
 
 var WhoHasAccessLight = function WhoHasAccessLight(_ref) {

package/dist/components/autosuggest.styl

@@ -8,13 +8,12 @@
     box-sizing border-box
     position absolute
     top 100%
-    margin-top .0625rem
+    margin-top .25rem
     z-index $alert-index-mobile
     width 100%
-    max-height 10.625rem
-    overflow auto
-    border .0625rem solid var(--silver)
-    border-radius .25rem
+    overflow hidden
+    box-shadow 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12), 0px 2px 4px rgba(29, 33, 42, 0.0793047), 0px 4px 16px rgba(29, 33, 42, 0.06)
+    border-radius .5rem
     background var(--white)
     display none
 
@@ -25,56 +24,42 @@
     width 100%
 
 .suggestionsList
-    margin 0
-    padding .625rem 0
+    max-height 9rem
+    overflow auto
+    margin 0 -1px 0 0
+    padding .5rem 0
     list-style none
 
-.suggestion
-    padding 0 .625rem .625rem .625rem
-
 .suggestionHighlighted
-    background var(--paleGrey)
+    background var(--actionColorSelected)
 
 .recipientsContainer
     display flex
     flex-wrap wrap
-    padding .2rem .5rem
-    border-radius .125rem
-    border 1px solid var(--silver)
+    padding .25rem .5rem
+    border-radius .25rem
+    border 1px solid var(--borderMainColor)
+    min-height 2.5rem
     max-height 6.75rem
     overflow auto
 
     &:hover
-        border .0625rem solid var(--coolGrey)
+        border 1px solid var(--coolGrey)
+
+    &:focus-within
+        border 1px solid var(--primaryColor)
 
     input[type=email]
         width   auto
         flex-grow 1
         padding .5rem 0
+        margin auto
         border  none
         &:hover
         &:focus
             border none
+        &:only-child
+          padding .25rem .5rem
 
 .recipientChip
-    display inline-flex
-    align-items center
-    flex 0 0 auto
-    background-color var(--paleGrey)
-    border-radius .125rem
-    height 1.75rem
-    line-height 1.75rem
-    padding 0 .5rem
-    margin .25rem .5rem .25rem 0
-
-
-.removeRecipient
-    border 0
-    background-color transparent
-    padding .15rem 0 0 0
-    margin-left .3rem
-    cursor pointer
-    color var(--coolGrey)
-
-    &:hover
-        color var(--slateGrey)
+  margin .25rem .5rem .25rem 0

package/dist/helpers/documentType.js

@@ -0,0 +1,6 @@
+export var DOCUMENT_TYPE = {
+  ALBUMS: 'Albums',
+  FILES: 'Files',
+  NOTES: 'Notes',
+  ORGANIZATIONS: 'Organizations'
+};

package/dist/helpers/hooks.js

@@ -1,6 +1,13 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useEffect } from 'react';
 export var isServer = typeof window === 'undefined';
+export function usePrevious(value) {
+  var ref = useRef();
+  useEffect(function () {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
 /**
  * based on : https://github.com/tannerlinsley/react-query/blob/79ad5a9ccbce1486c10e7e364d8fc28bef3fa19f/src/devtools/utils.ts#L61
  */

package/dist/helpers/link.js

@@ -0,0 +1,5 @@
+import { DOCUMENT_TYPE } from './documentType';
+export var isOnlyReadOnlyLinkAllowed = function isOnlyReadOnlyLinkAllowed(_ref) {
+  var documentType = _ref.documentType;
+  return documentType === DOCUMENT_TYPE.ALBUMS;
+};

package/dist/helpers/permissions.js

@@ -0,0 +1,8 @@
+import get from 'lodash/get';
+import { models } from 'cozy-client';
+export var checkIsReadOnlyPermissions = function checkIsReadOnlyPermissions(permissions) {
+  var permissionCategories = get(permissions, '[0].attributes.permissions', {});
+  return Object.values(permissionCategories).filter(function (permissionCategory) {
+    return models.permission.isReadOnly(permissionCategory);
+  }).length > 0;
+};

package/dist/helpers/recipients.js

@@ -0,0 +1,24 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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; }
+
+export var filterAndReworkRecipients = function filterAndReworkRecipients(recipients, previousRecipients) {
+  return recipients.filter(function (recipient) {
+    return recipient.status !== 'owner';
+  }).map(function (recipient) {
+    var recipientHasChanged = previousRecipients && !previousRecipients.find(function (previousRecipient) {
+      return previousRecipient.name === recipient.name && previousRecipient.email === recipient.email;
+    });
+
+    if (recipientHasChanged) {
+      return _objectSpread(_objectSpread({}, recipient), {}, {
+        hasBeenJustAdded: true
+      });
+    }
+
+    return recipient;
+  });
+};
+export var FADE_IN_DURATION = 600;