cozy-sharing 5.0.0 → 5.0.1

package/dist/components/Recipient/Recipient.spec.js

@@ -0,0 +1,178 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React from 'react';
+import Recipient from './Recipient';
+import AppLike from '../../../test/AppLike';
+import { createMockClient } from 'cozy-client';
+import { render, fireEvent } from '@testing-library/react';
+describe('Recipient component', function () {
+  var client = createMockClient({});
+  client.options = {
+    uri: 'foo.mycozy.cloud'
+  };
+
+  var setup = function setup(props) {
+    return render( /*#__PURE__*/React.createElement(AppLike, {
+      client: client
+    }, /*#__PURE__*/React.createElement(Recipient, props)));
+  };
+
+  var createRangeBackup;
+  beforeAll(function () {
+    createRangeBackup = global.document.createRange;
+    global.document.createRange = jest.fn(function () {
+      return {
+        setStart: function setStart() {},
+        setEnd: function setEnd() {},
+        commonAncestorContainer: {
+          nodeName: 'BODY',
+          ownerDocument: document
+        }
+      };
+    });
+  });
+  afterAll(function () {
+    global.document.createRange = createRangeBackup;
+  });
+  it('should render if isMe ', function () {
+    var _setup = setup({
+      instance: 'foo.mycozy.cloud',
+      status: 'ready',
+      type: 'two-way'
+    }),
+        getByText = _setup.getByText;
+
+    expect(getByText('You')).toBeTruthy();
+    expect(getByText('foo.mycozy.cloud')).toBeTruthy();
+  });
+  it('should match snapshot if isOwner', function () {
+    var _setup2 = setup({
+      instance: 'foo.mycozy.cloud',
+      status: 'ready',
+      type: 'two-way',
+      isOwner: true
+    }),
+        getByText = _setup2.getByText;
+
+    expect(getByText('You')).toBeTruthy();
+    expect(getByText('foo.mycozy.cloud')).toBeTruthy();
+  });
+  it('should call revokeSelf if I am not the owner but try to revoke myself', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var onRevoke, onRevokeSelf, _setup3, getByText;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            onRevoke = jest.fn();
+            onRevokeSelf = jest.fn();
+            _setup3 = setup({
+              instance: 'foo.mycozy.cloud',
+              status: 'ready',
+              type: 'two-way',
+              documentType: 'Files',
+              onRevoke: onRevoke,
+              onRevokeSelf: onRevokeSelf
+            }), getByText = _setup3.getByText;
+            fireEvent.click(getByText('can change'));
+            fireEvent.click(getByText('Remove me from sharing'));
+            expect(onRevoke).not.toBeCalled();
+            expect(onRevokeSelf).toBeCalled();
+
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should call revoke if I am the owner of the sharing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var onRevoke, onRevokeSelf, _setup4, getByText;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            onRevoke = jest.fn();
+            onRevokeSelf = jest.fn();
+            _setup4 = setup({
+              instance: 'foo.mycozy.cloud',
+              status: 'ready',
+              type: 'two-way',
+              isOwner: true,
+              documentType: 'Files',
+              onRevoke: onRevoke,
+              onRevokeSelf: onRevokeSelf
+            }), getByText = _setup4.getByText;
+            fireEvent.click(getByText('can change'));
+            fireEvent.click(getByText('Remove from sharing'));
+            expect(onRevoke).toBeCalled();
+            expect(onRevokeSelf).not.toBeCalled();
+
+          case 7:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('should render confirmation actions if recipient is waiting for confirmation', function () {
+    var confirmRecipient = jest.fn();
+    var rejectRecipient = jest.fn();
+
+    var _setup5 = setup({
+      instance: 'foo.mycozy.cloud',
+      status: 'ready',
+      type: 'two-way',
+      isOwner: false,
+      documentType: 'Organizations',
+      recipientConfirmationData: {
+        email: 'me@bob.cozy.localhost'
+      },
+      rejectRecipient: rejectRecipient,
+      confirmRecipient: confirmRecipient
+    }),
+        getByText = _setup5.getByText;
+
+    expect(getByText('Verify')).toBeTruthy();
+  });
+  it('should not render confirmation actions if no recipient is waiting for confirmation', function () {
+    var confirmRecipient = jest.fn();
+    var rejectRecipient = jest.fn();
+
+    var _setup6 = setup({
+      instance: 'foo.mycozy.cloud',
+      status: 'ready',
+      type: 'two-way',
+      isOwner: false,
+      documentType: 'Organizations',
+      recipientConfirmationData: undefined,
+      rejectRecipient: rejectRecipient,
+      confirmRecipient: confirmRecipient
+    }),
+        queryByText = _setup6.queryByText;
+
+    expect(queryByText('Verify')).not.toBeInTheDocument();
+  });
+  it("should call verifyRecipient when clicking 'verify' button", function () {
+    var verifyRecipient = jest.fn();
+
+    var _setup7 = setup({
+      instance: 'foo.mycozy.cloud',
+      status: 'ready',
+      type: 'two-way',
+      isOwner: false,
+      documentType: 'Organizations',
+      recipientConfirmationData: {
+        email: 'me@bob.cozy.localhost'
+      },
+      verifyRecipient: verifyRecipient
+    }),
+        getByText = _setup7.getByText;
+
+    fireEvent.click(getByText('Verify'));
+    expect(verifyRecipient).toBeCalledWith({
+      email: 'me@bob.cozy.localhost'
+    });
+  });
+});

package/dist/components/Recipient/RecipientAvatar.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["recipient"];
+import React from 'react';
+import { useClient } from 'cozy-client';
+import Avatar from 'cozy-ui/transpiled/react/Avatar';
+import { getDisplayName, getInitials } from '../../models';
+
+var RecipientAvatar = function RecipientAvatar(_ref) {
+  var recipient = _ref.recipient,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var client = useClient();
+  /**
+   * avatarPath is always the same for a recipient, but image
+   * can be different since the stack generate it on the fly.
+   * It can be "gray" during the first load depending of the
+   * status' sharing, but can become active (from the realtime)
+   * so we need a way to "refresh" the image. Passing the
+   * status in the url force the refresh of the image when the
+   * status changes
+   */
+
+  var image = recipient.avatarPath && recipient.status ? "".concat(client.options.uri).concat(recipient.avatarPath, "?v=").concat(recipient.status) : null;
+  return /*#__PURE__*/React.createElement(Avatar, _extends({
+    image: image,
+    text: getInitials(recipient),
+    textId: getDisplayName(recipient),
+    disabled: recipient.status === 'pending' || recipient.status === 'mail-not-send'
+  }, rest));
+};
+
+export default RecipientAvatar;

package/dist/components/Recipient/RecipientConfirm.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useI18n } from 'cozy-ui/transpiled/react/I18n';
+import Button from 'cozy-ui/transpiled/react/Button';
+var modalStyles = {
+  "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"
+};
+/**
+ * Displays the confirmation interface that allows to confirm or reject a recipient
+ */
+
+var RecipientConfirm = function RecipientConfirm(_ref) {
+  var recipientConfirmationData = _ref.recipientConfirmationData,
+      verifyRecipient = _ref.verifyRecipient;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var verify = function verify() {
+    verifyRecipient(recipientConfirmationData);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    style: {
+      position: 'initial'
+    } // fix z-index bug on iOS when under a BottomDrawer due to relative position
+    ,
+    theme: "text",
+    className: modalStyles['aligned-dropdown-button'],
+    onClick: verify,
+    label: t("Share.twoStepsConfirmation.verify")
+  }));
+};
+
+RecipientConfirm.propTypes = {
+  recipientConfirmationData: PropTypes.object.isRequired,
+  verifyRecipient: PropTypes.func.isRequired
+};
+export default RecipientConfirm;

package/dist/components/Recipient/RecipientPermissions.js

@@ -0,0 +1,126 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useState, useRef, useCallback } from 'react';
+import { useClient } from 'cozy-client';
+import { useI18n } from 'cozy-ui/transpiled/react/I18n';
+import Spinner from 'cozy-ui/transpiled/react/Spinner';
+import Typography from 'cozy-ui/transpiled/react/Typography';
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
+import ActionMenu, { ActionMenuItem } from 'cozy-ui/transpiled/react/ActionMenu';
+import Icon from 'cozy-ui/transpiled/react/Icon';
+import RenameIcon from 'cozy-ui/transpiled/react/Icons/Rename';
+import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash';
+import EyeIcon from 'cozy-ui/transpiled/react/Icons/Eye';
+
+var RecipientPermissions = function RecipientPermissions(_ref) {
+  var isOwner = _ref.isOwner,
+      status = _ref.status,
+      instance = _ref.instance,
+      type = _ref.type,
+      document = _ref.document,
+      documentType = _ref.documentType,
+      className = _ref.className,
+      onRevoke = _ref.onRevoke,
+      onRevokeSelf = _ref.onRevokeSelf,
+      sharingId = _ref.sharingId,
+      index = _ref.index;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var buttonRef = useRef();
+  var client = useClient();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      revoking = _useState2[0],
+      setRevoking = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isMenuDisplayed = _useState4[0],
+      setIsMenuDisplayed = _useState4[1];
+
+  var instanceMatchesClient = instance !== undefined && instance === client.options.uri;
+  var contactIsOwner = status === 'owner';
+  var shouldShowMenu = !revoking && !contactIsOwner && (instanceMatchesClient && !isOwner || isOwner);
+
+  var showMenu = function showMenu() {
+    return setIsMenuDisplayed(true);
+  };
+
+  var hideMenu = function hideMenu() {
+    return setIsMenuDisplayed(false);
+  };
+
+  var onRevokeClick = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            setRevoking(true);
+
+            if (!isOwner) {
+              _context.next = 6;
+              break;
+            }
+
+            _context.next = 4;
+            return onRevoke(document, sharingId, index);
+
+          case 4:
+            _context.next = 8;
+            break;
+
+          case 6:
+            _context.next = 8;
+            return onRevokeSelf(document);
+
+          case 8:
+            setRevoking(false);
+
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })), [isOwner, onRevoke, onRevokeSelf, document, sharingId, index]);
+  var PermissionIcon = type === 'two-way' ? RenameIcon : EyeIcon;
+  return /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, revoking && /*#__PURE__*/React.createElement(Spinner, null), !shouldShowMenu && !revoking && /*#__PURE__*/React.createElement(Typography, {
+    variant: "body2"
+  }, t("Share.status.".concat(status)).toLowerCase()), shouldShowMenu && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropdownButton, {
+    onClick: showMenu,
+    ref: buttonRef,
+    textVariant: "body2"
+  }, t("Share.type.".concat(type)).toLowerCase()), isMenuDisplayed && /*#__PURE__*/React.createElement(ActionMenu, {
+    onClose: hideMenu,
+    popperOptions: {
+      placement: 'bottom-end',
+      strategy: 'fixed'
+    },
+    anchorElRef: buttonRef
+  }, /*#__PURE__*/React.createElement(ActionMenuItem, {
+    left: /*#__PURE__*/React.createElement(Icon, {
+      icon: PermissionIcon,
+      color: "var(--primaryTextColor)"
+    })
+  }, t("Share.type.".concat(type))), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement(ActionMenuItem, {
+    onClick: onRevokeClick,
+    left: /*#__PURE__*/React.createElement(Icon, {
+      icon: TrashIcon,
+      color: "var(--errorColor)"
+    })
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "u-error",
+    variant: "body1"
+  }, isOwner ? t("".concat(documentType, ".share.revoke.title")) : t("".concat(documentType, ".share.revokeSelf.title"))), /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption",
+    color: "textSecondary"
+  }, isOwner ? t("".concat(documentType, ".share.revoke.desc")) : t("".concat(documentType, ".share.revokeSelf.desc")))))));
+};
+
+export default RecipientPermissions;

package/dist/components/Recipient/RecipientPlusX.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import AvatarPlusX from './AvatarPlusX';
+var styles = {
+  "CozyTheme--inverted": "recipient__CozyTheme--inverted___2Hb9c",
+  "CozyTheme--normal": "recipient__CozyTheme--normal___3WdEw",
+  "recipient": "recipient__recipient___2zWmH",
+  "recipients-list-light": "recipient__recipients-list-light___1-dkI",
+  "recipient-idents": "recipient__recipient-idents___3F3zL",
+  "recipient-status-icon": "recipient__recipient-status-icon___1GvS9",
+  "recipient-user": "recipient__recipient-user___3hOyK",
+  "recipient-details": "recipient__recipient-details___3fmFE",
+  "avatar": "recipient__avatar___2NIEb",
+  "link-recipient-icon-circle": "recipient__link-recipient-icon-circle___3gmgy",
+  "recipients-avatars": "recipient__recipients-avatars___MXhiL",
+  "--interactive": "recipient__--interactive___1gDjM",
+  "recipients-avatars--link": "recipient__recipients-avatars--link___2s02h",
+  "recipients-avatars--plusX": "recipient__recipients-avatars--plusX___WRllr",
+  "recipients-avatars--avatar": "recipient__recipients-avatars--avatar___3j3_A",
+  "spin": "recipient__spin___3_Uja",
+  "shake": "recipient__shake___TrWC0"
+};
+import { getDisplayName } from '../../models';
+import Identity from './Identity';
+
+var RecipientPlusX = function RecipientPlusX(_ref, _ref2) {
+  var extraRecipients = _ref.extraRecipients;
+  var t = _ref2.t;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['recipient']
+  }, /*#__PURE__*/React.createElement(AvatarPlusX, {
+    extraRecipients: extraRecipients.map(function (recipient) {
+      return getDisplayName(recipient);
+    })
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles['recipient-ident-status']
+  }, /*#__PURE__*/React.createElement(Identity, {
+    name: t('Share.members.otherContacts', extraRecipients.length)
+  })));
+};
+
+RecipientPlusX.contextTypes = {
+  t: PropTypes.func.isRequired
+};
+export default RecipientPlusX;

package/dist/components/Recipient/RecipientStatus.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { useI18n } from 'cozy-ui/transpiled/react/I18n';
+import { Media, Img, Bd } from 'cozy-ui/transpiled/react/Media';
+import Typography from 'cozy-ui/transpiled/react/Typography';
+import Icon from 'cozy-ui/transpiled/react/Icon';
+import PaperplaneIcon from 'cozy-ui/transpiled/react/Icons/Paperplane';
+import ToTheCloudIcon from 'cozy-ui/transpiled/react/Icons/ToTheCloud';
+import EyeIcon from 'cozy-ui/transpiled/react/Icons/Eye';
+var styles = {
+  "CozyTheme--inverted": "recipient__CozyTheme--inverted___2Hb9c",
+  "CozyTheme--normal": "recipient__CozyTheme--normal___3WdEw",
+  "recipient": "recipient__recipient___2zWmH",
+  "recipients-list-light": "recipient__recipients-list-light___1-dkI",
+  "recipient-idents": "recipient__recipient-idents___3F3zL",
+  "recipient-status-icon": "recipient__recipient-status-icon___1GvS9",
+  "recipient-user": "recipient__recipient-user___3hOyK",
+  "recipient-details": "recipient__recipient-details___3fmFE",
+  "avatar": "recipient__avatar___2NIEb",
+  "link-recipient-icon-circle": "recipient__link-recipient-icon-circle___3gmgy",
+  "recipients-avatars": "recipient__recipients-avatars___MXhiL",
+  "--interactive": "recipient__--interactive___1gDjM",
+  "recipients-avatars--link": "recipient__recipients-avatars--link___2s02h",
+  "recipients-avatars--plusX": "recipient__recipients-avatars--plusX___WRllr",
+  "recipients-avatars--avatar": "recipient__recipients-avatars--avatar___3j3_A",
+  "spin": "recipient__spin___3_Uja",
+  "shake": "recipient__shake___TrWC0"
+};
+
+var RecipientStatus = function RecipientStatus(_ref) {
+  var status = _ref.status,
+      isMe = _ref.isMe,
+      instance = _ref.instance;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var isSendingEmail = !isMe && status === 'mail-not-sent';
+  var isReady = isMe || status === 'ready';
+  var text, icon;
+
+  if (isReady) {
+    text = instance;
+    icon = ToTheCloudIcon;
+  } else if (isSendingEmail) {
+    text = t('Share.status.mail-not-sent');
+    icon = PaperplaneIcon;
+  } else {
+    var supportedStatus = ['pending', 'seen'];
+    text = supportedStatus.includes(status) ? t("Share.status.".concat(status)) : t('Share.status.pending');
+    icon = status === 'seen' ? EyeIcon : PaperplaneIcon;
+  }
+
+  return /*#__PURE__*/React.createElement(Media, null, /*#__PURE__*/React.createElement(Img, {
+    className: styles['recipient-status-icon']
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    size: 10
+  })), /*#__PURE__*/React.createElement(Bd, null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption",
+    color: "textSecondary"
+  }, text)));
+};
+
+export default RecipientStatus;

package/dist/components/Recipient/RecipientWithoutStatus.js

@@ -0,0 +1,45 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["instance"];
+import React from 'react';
+import Avatar from 'cozy-ui/transpiled/react/Avatar';
+var styles = {
+  "CozyTheme--inverted": "recipient__CozyTheme--inverted___2Hb9c",
+  "CozyTheme--normal": "recipient__CozyTheme--normal___3WdEw",
+  "recipient": "recipient__recipient___2zWmH",
+  "recipients-list-light": "recipient__recipients-list-light___1-dkI",
+  "recipient-idents": "recipient__recipient-idents___3F3zL",
+  "recipient-status-icon": "recipient__recipient-status-icon___1GvS9",
+  "recipient-user": "recipient__recipient-user___3hOyK",
+  "recipient-details": "recipient__recipient-details___3fmFE",
+  "avatar": "recipient__avatar___2NIEb",
+  "link-recipient-icon-circle": "recipient__link-recipient-icon-circle___3gmgy",
+  "recipients-avatars": "recipient__recipients-avatars___MXhiL",
+  "--interactive": "recipient__--interactive___1gDjM",
+  "recipients-avatars--link": "recipient__recipients-avatars--link___2s02h",
+  "recipients-avatars--plusX": "recipient__recipients-avatars--plusX___WRllr",
+  "recipients-avatars--avatar": "recipient__recipients-avatars--avatar___3j3_A",
+  "spin": "recipient__spin___3_Uja",
+  "shake": "recipient__shake___TrWC0"
+};
+import { getDisplayName, getInitials } from '../../models';
+import Identity from './Identity';
+
+var RecipientWithoutStatus = function RecipientWithoutStatus(_ref) {
+  var instance = _ref.instance,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var name = getDisplayName(rest);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['recipient']
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    text: getInitials(rest),
+    textId: name
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles['recipient-ident-status']
+  }, /*#__PURE__*/React.createElement(Identity, {
+    name: name,
+    details: instance
+  })));
+};
+
+export default RecipientWithoutStatus;

package/dist/components/Recipient/RecipientsAvatars.js

@@ -0,0 +1,100 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import cx from 'classnames';
+import { useClient } from 'cozy-client';
+import Avatar from 'cozy-ui/transpiled/react/Avatar';
+import LinkIcon from 'cozy-ui/transpiled/react/Icons/Link';
+import RecipientAvatar from './RecipientAvatar';
+import AvatarPlusX from './AvatarPlusX';
+var styles = {
+  "CozyTheme--inverted": "recipient__CozyTheme--inverted___2Hb9c",
+  "CozyTheme--normal": "recipient__CozyTheme--normal___3WdEw",
+  "recipient": "recipient__recipient___2zWmH",
+  "recipients-list-light": "recipient__recipients-list-light___1-dkI",
+  "recipient-idents": "recipient__recipient-idents___3F3zL",
+  "recipient-status-icon": "recipient__recipient-status-icon___1GvS9",
+  "recipient-user": "recipient__recipient-user___3hOyK",
+  "recipient-details": "recipient__recipient-details___3fmFE",
+  "avatar": "recipient__avatar___2NIEb",
+  "link-recipient-icon-circle": "recipient__link-recipient-icon-circle___3gmgy",
+  "recipients-avatars": "recipient__recipients-avatars___MXhiL",
+  "--interactive": "recipient__--interactive___1gDjM",
+  "recipients-avatars--link": "recipient__recipients-avatars--link___2s02h",
+  "recipients-avatars--plusX": "recipient__recipients-avatars--plusX___WRllr",
+  "recipients-avatars--avatar": "recipient__recipients-avatars--avatar___3j3_A",
+  "spin": "recipient__spin___3_Uja",
+  "shake": "recipient__shake___TrWC0"
+};
+import { getDisplayName } from '../../models';
+export var MAX_DISPLAYED_RECIPIENTS = 3;
+/**
+ * Exclude me from the list of recipients.
+ * @typedef {object} Recipient
+ * @param {array<Recipient>} recipients - List of recipients
+ * @param {boolean} isOwner - Indicates if I'm the owner or not
+ * @param {object} client - CozyClient instance
+ * @returns {array<Recipient>} List of recipients without me if I'm the owner
+ */
+
+export var excludeMeAsOwnerFromRecipients = function excludeMeAsOwnerFromRecipients(_ref) {
+  var recipients = _ref.recipients,
+      isOwner = _ref.isOwner,
+      client = _ref.client;
+  return recipients.filter(function (recipient) {
+    if (isOwner) {
+      return recipient.status !== 'owner';
+    }
+
+    return recipient.instance !== client.options.uri;
+  });
+};
+
+var RecipientsAvatars = function RecipientsAvatars(_ref2) {
+  var recipients = _ref2.recipients,
+      link = _ref2.link,
+      size = _ref2.size,
+      className = _ref2.className,
+      onClick = _ref2.onClick,
+      isOwner = _ref2.isOwner,
+      showMeAsOwner = _ref2.showMeAsOwner;
+  var client = useClient();
+  var filteredRecipients = showMeAsOwner ? recipients.slice().reverse() // we slice first to clone the original array because reverser() mutates it
+  : excludeMeAsOwnerFromRecipients({
+    recipients: recipients,
+    isOwner: isOwner,
+    client: client
+  }).reverse(); // we reverse the recipients array because we use `flex-direction: row-reverse` to display them correctly
+
+  var isAvatarPlusX = filteredRecipients.length > MAX_DISPLAYED_RECIPIENTS;
+  var extraRecipients = filteredRecipients.slice(MAX_DISPLAYED_RECIPIENTS).map(function (recipient) {
+    return getDisplayName(recipient);
+  });
+  var shownRecipients = filteredRecipients.slice(0, MAX_DISPLAYED_RECIPIENTS);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cx(styles['recipients-avatars'], _defineProperty({}, styles['--interactive'], onClick), className),
+    onClick: onClick
+  }, link && /*#__PURE__*/React.createElement("span", {
+    "data-testid": "recipientsAvatars-link"
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    className: styles['recipients-avatars--link'],
+    icon: LinkIcon,
+    size: size
+  })), isAvatarPlusX && /*#__PURE__*/React.createElement("span", {
+    "data-testid": "recipientsAvatars-plusX"
+  }, /*#__PURE__*/React.createElement(AvatarPlusX, {
+    className: styles['recipients-avatars--plusX'],
+    extraRecipients: extraRecipients,
+    size: size
+  })), shownRecipients.map(function (recipient, idx) {
+    return /*#__PURE__*/React.createElement("span", {
+      "data-testid": "recipientsAvatars-avatar".concat(recipient.status === 'owner' ? '-owner' : ''),
+      key: idx
+    }, /*#__PURE__*/React.createElement(RecipientAvatar, {
+      recipient: recipient,
+      size: size,
+      className: cx(styles['recipients-avatars--avatar'])
+    }));
+  }));
+};
+
+export default RecipientsAvatars;