cozy-sharing 4.9.0 → 5.0.1

package/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 5.0.1 (2023-02-06)
+
+
+### Bug Fixes
+
+* Add custom previewPath
+
+# 5.0.0 (2023-01-09)
+
+
+### Bug Fixes
+
+* Color for badge with me ([bd7def0](https://github.com/cozy/cozy-libs/commit/bd7def03e0db9d8771a1e96965684d8785f6c91b))
+
+
+### Features
+
+* **harvest:** Update router packages ([3f08dd2](https://github.com/cozy/cozy-libs/commit/3f08dd2a99fb516c45ff938ca528dece63d10ca3))
+
+
+### BREAKING CHANGES
+
+* **harvest:** `react-router-dom` is `>=4` as peer dependencies.
+
+
+
+
+
 # [4.9.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@4.8.2...cozy-sharing@4.9.0) (2022-12-20)
 
 

package/dist/SharingBanner/components/getHomeLinkHref.js

@@ -0,0 +1,5 @@
+var getHomeLinkHref = function getHomeLinkHref(from) {
+  return "https://manager.cozycloud.cc/cozy/create".concat(from ? "?pk_campaign=".concat(encodeURIComponent(from)) : '?', "&pk_kwd=cozy");
+};
+
+export default getHomeLinkHref;

package/dist/SharingBanner/components/getHomeLinkHref.spec.js

@@ -0,0 +1,9 @@
+import getHomeLinkHref from './getHomeLinkHref';
+describe('getHomeLinkHref', function () {
+  it('Should add the origin parameter', function () {
+    expect(getHomeLinkHref('cozy.io')).toEqual('https://manager.cozycloud.cc/cozy/create?pk_campaign=cozy.io&pk_kwd=cozy');
+  });
+  it('Should not add the origin parameter', function () {
+    expect(getHomeLinkHref('')).toEqual('https://manager.cozycloud.cc/cozy/create?&pk_kwd=cozy');
+  });
+});

package/dist/SharingBanner/hooks/useSharingInfos.js

@@ -14,6 +14,7 @@ var getSharingId = function getSharingId(permission) {
 };
 
 export var useSharingInfos = function useSharingInfos() {
+  var previewPath = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '/preview';
   var client = useClient();
 
   var _useState = useState(),
@@ -92,12 +93,12 @@ export var useSharingInfos = function useSharingInfos() {
       };
     }();
 
-    if (window.location.pathname === '/preview') {
+    if (window.location.pathname === previewPath) {
       loadSharingDiscoveryLink();
     } else {
       setLoading(false);
     }
-  }, [client]);
+  }, [client, previewPath]);
   return {
     sharing: sharing,
     loading: loading,

package/dist/SharingBanner/index.js

@@ -1,13 +1,18 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import withLocales from '../withLocales';
 import { useSharingInfos } from './hooks/useSharingInfos';
 import { SharingBanner } from './components/SharingBanner';
 
-var Plugin = function Plugin() {
-  var sharingInfos = useSharingInfos();
+var Plugin = function Plugin(_ref) {
+  var previewPath = _ref.previewPath;
+  var sharingInfos = useSharingInfos(previewPath);
   return /*#__PURE__*/React.createElement(SharingBanner, {
     sharingInfos: sharingInfos
   });
 };
 
+Plugin.propTypes = {
+  previewPath: PropTypes.string
+};
 export var SharingBannerPlugin = withLocales(Plugin);

package/dist/components/EditLinkPermissionDialog.js

@@ -0,0 +1,72 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useI18n } from 'cozy-ui/transpiled/react/I18n';
+import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs';
+import Button from 'cozy-ui/transpiled/react/Buttons';
+import Radio from 'cozy-ui/transpiled/react/Radios';
+import RadioGroup from 'cozy-ui/transpiled/react/RadioGroup';
+import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel';
+
+var EditLinkPermissionDialog = function EditLinkPermissionDialog(_ref) {
+  var open = _ref.open,
+      onClose = _ref.onClose,
+      document = _ref.document,
+      onPermissionsSelected = _ref.onPermissionsSelected;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      isReadOnlyPermissions = _useState2[0],
+      setIsReadOnlyPermissions = _useState2[1];
+
+  var onChange = function onChange(event) {
+    setIsReadOnlyPermissions(event.target.value === 'true');
+  };
+
+  var onConfirm = function onConfirm() {
+    var verbs = isReadOnlyPermissions ? ['GET'] : ['GET', 'POST', 'PUT', 'PATCH'];
+    onPermissionsSelected({
+      verbs: verbs
+    });
+    onClose();
+  };
+
+  return /*#__PURE__*/React.createElement(ConfirmDialog, {
+    open: open,
+    onClose: onClose,
+    title: t('Share.permissionLink.title'),
+    content: /*#__PURE__*/React.createElement(RadioGroup, {
+      "aria-label": "radio",
+      value: isReadOnlyPermissions.toString(),
+      onChange: onChange
+    }, /*#__PURE__*/React.createElement(FormControlLabel, {
+      value: "true",
+      label: (document === null || document === void 0 ? void 0 : document.type) === 'directory' ? t("Share.permissionLink.seeFolder") : t("Share.permissionLink.seeFile"),
+      control: /*#__PURE__*/React.createElement(Radio, null)
+    }), /*#__PURE__*/React.createElement(FormControlLabel, {
+      value: "false",
+      label: (document === null || document === void 0 ? void 0 : document.type) === 'directory' ? t("Share.permissionLink.modifyFolder") : t("Share.permissionLink.modifyFile"),
+      control: /*#__PURE__*/React.createElement(Radio, null)
+    })),
+    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      variant: "secondary",
+      label: t('Share.permissionLink.cancel'),
+      onClick: onClose
+    }), /*#__PURE__*/React.createElement(Button, {
+      variant: "primary",
+      label: t('Share.permissionLink.confirm'),
+      onClick: onConfirm
+    }))
+  });
+};
+
+EditLinkPermissionDialog.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  document: PropTypes.object.isRequired,
+  onPermissionsSelected: PropTypes.func.isRequired
+};
+export default EditLinkPermissionDialog;

package/dist/components/EditLinkPermissionDialog.spec.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { createMockClient } from 'cozy-client';
+import AppLike from '../../test/AppLike';
+import EditLinkPermissionDialog from './EditLinkPermissionDialog';
+describe('EditLinkPermissionDialog', function () {
+  var client = createMockClient({});
+
+  var setup = function setup(props) {
+    return render( /*#__PURE__*/React.createElement(AppLike, {
+      client: client
+    }, /*#__PURE__*/React.createElement(EditLinkPermissionDialog, _extends({
+      open: true,
+      onClose: function onClose() {}
+    }, props))));
+  };
+
+  it('should select read permissions', function () {
+    var onPermissionsSelected = jest.fn();
+    var props = {
+      onPermissionsSelected: onPermissionsSelected
+    };
+
+    var _setup = setup(props),
+        getByText = _setup.getByText;
+
+    fireEvent.click(getByText('OK'));
+    expect(onPermissionsSelected).toHaveBeenCalledWith({
+      verbs: ['GET']
+    });
+  });
+  it('should select write permissions', function () {
+    var onPermissionsSelected = jest.fn();
+    var props = {
+      onPermissionsSelected: onPermissionsSelected
+    };
+
+    var _setup2 = setup(props),
+        getByText = _setup2.getByText;
+
+    fireEvent.click(getByText('Modify file'));
+    fireEvent.click(getByText('OK'));
+    expect(onPermissionsSelected).toHaveBeenCalledWith({
+      verbs: ['GET', 'POST', 'PUT', 'PATCH']
+    });
+  });
+});

package/dist/components/Recipient/AvatarPlusX.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import uniqueId from 'lodash/uniqueId';
+import Avatar from 'cozy-ui/transpiled/react/Avatar';
+import { SharingTooltip, TooltipRecipientList } from '../Tooltip';
+
+var AvatarPlusX = function AvatarPlusX(_ref) {
+  var className = _ref.className,
+      size = _ref.size,
+      _ref$extraRecipients = _ref.extraRecipients,
+      extraRecipients = _ref$extraRecipients === void 0 ? [] : _ref$extraRecipients;
+  var sharingTooltipId = uniqueId('extra-recipients-avatar-');
+  return /*#__PURE__*/React.createElement("span", {
+    "data-tip": true,
+    "data-for": sharingTooltipId,
+    className: "u-db"
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    className: className,
+    size: size,
+    text: "+".concat(Math.min(extraRecipients.length, 99)),
+    style: {
+      backgroundColor: 'var(--genericRecipientBackground)',
+      color: 'var(--genericRecipientColor)'
+    }
+  }), /*#__PURE__*/React.createElement(SharingTooltip, {
+    id: sharingTooltipId
+  }, /*#__PURE__*/React.createElement(TooltipRecipientList, {
+    recipientNames: extraRecipients
+  })));
+};
+
+AvatarPlusX.propTypes = {
+  extraRecipients: PropTypes.arrayOf(PropTypes.string),
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  className: PropTypes.string
+};
+AvatarPlusX.defaultProps = {
+  extraRecipients: [],
+  size: 'medium'
+};
+export default AvatarPlusX;

package/dist/components/Recipient/Identity.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+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 Identity = function Identity(_ref) {
+  var name = _ref.name,
+      details = _ref.details;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles['recipient-idents'], 'u-ml-1')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['recipient-user']
+  }, name), /*#__PURE__*/React.createElement("div", {
+    className: styles['recipient-details']
+  }, details));
+};
+
+Identity.propTypes = {
+  name: PropTypes.string.isRequired,
+  details: PropTypes.string
+};
+Identity.defaultProps = {
+  details: '-'
+};
+export default Identity;

package/dist/components/Recipient/LinkRecipient.js

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useI18n } from 'cozy-ui/transpiled/react/I18n';
+import ListItem from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItem';
+import ListItemIcon from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemIcon';
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
+import Icon from 'cozy-ui/transpiled/react/Icon';
+import LinkIcon from 'cozy-ui/transpiled/react/Icons/Link';
+import Circle from 'cozy-ui/transpiled/react/Circle';
+import Typography from 'cozy-ui/transpiled/react/Typography';
+import Fade from 'cozy-ui/transpiled/react/Fade';
+import { FADE_IN_DURATION } from '../../helpers/recipients';
+import RecipientConfirm from './RecipientConfirm';
+import LinkRecipientPermissions from './LinkRecipientPermissions';
+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 LinkRecipient = function LinkRecipient(props) {
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var recipientConfirmationData = props.recipientConfirmationData,
+      verifyRecipient = props.verifyRecipient,
+      link = props.link,
+      fadeIn = props.fadeIn;
+  var RightPart = recipientConfirmationData ? /*#__PURE__*/React.createElement(RecipientConfirm, {
+    recipientConfirmationData: recipientConfirmationData,
+    verifyRecipient: verifyRecipient
+  }) : /*#__PURE__*/React.createElement(LinkRecipientPermissions, _extends({}, props, {
+    className: "u-flex-shrink-0"
+  }));
+  return /*#__PURE__*/React.createElement(Fade, {
+    in: true,
+    timeout: fadeIn ? FADE_IN_DURATION : 0
+  }, /*#__PURE__*/React.createElement(ListItem, {
+    disableGutters: true
+  }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Circle, {
+    size: "small",
+    className: styles['link-recipient-icon-circle']
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: LinkIcon
+  }))), /*#__PURE__*/React.createElement(ListItemText, {
+    primary: /*#__PURE__*/React.createElement(Typography, {
+      className: "u-ellipsis",
+      variant: "body1"
+    }, t('Share.recipients.anyoneWithTheLink')),
+    secondary: link
+  }), RightPart));
+};
+
+LinkRecipient.propTypes = {
+  link: PropTypes.string.isRequired
+};
+export default LinkRecipient;

package/dist/components/Recipient/LinkRecipientPermissions.js

@@ -0,0 +1,159 @@
+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 { useI18n } from 'cozy-ui/transpiled/react/I18n';
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
+import ActionMenu, { ActionMenuItem, ActionMenuRadio } from 'cozy-ui/transpiled/react/ActionMenu';
+import Typography from 'cozy-ui/transpiled/react/Typography';
+import Icon from 'cozy-ui/transpiled/react/Icon';
+import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash';
+import Alerter from 'cozy-ui/transpiled/react/Alerter';
+import Spinner from 'cozy-ui/transpiled/react/Spinner';
+import { checkIsReadOnlyPermissions } from '../../helpers/permissions';
+import { isOnlyReadOnlyLinkAllowed } from '../../helpers/link';
+import logger from '../../logger';
+
+var LinkRecipientPermissions = function LinkRecipientPermissions(_ref) {
+  var className = _ref.className,
+      document = _ref.document,
+      documentType = _ref.documentType,
+      permissions = _ref.permissions,
+      onChangePermissions = _ref.onChangePermissions,
+      onDisable = _ref.onDisable;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var buttonRef = useRef();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      menuIsOpen = _useState2[0],
+      setMenuIsOpen = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1];
+
+  var isReadOnlyPermissions = checkIsReadOnlyPermissions(permissions);
+
+  var toggleMenu = function toggleMenu() {
+    setMenuIsOpen(!menuIsOpen);
+  };
+
+  var deleteShareLink = /*#__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:
+              _context.prev = 0;
+              setLoading(true);
+              _context.next = 4;
+              return onDisable(document);
+
+            case 4:
+              _context.next = 10;
+              break;
+
+            case 6:
+              _context.prev = 6;
+              _context.t0 = _context["catch"](0);
+              Alerter.error(t("".concat(documentType, ".share.error.revoke")));
+              logger.log(_context.t0);
+
+            case 10:
+              _context.prev = 10;
+              setLoading(false);
+              return _context.finish(10);
+
+            case 13:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 6, 10, 13]]);
+    }));
+
+    return function deleteShareLink() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var updateLinkPermissions = function updateLinkPermissions(_ref3) {
+    var isReadOnly = _ref3.isReadOnly;
+    var verbs = isReadOnly ? ['GET'] : ['GET', 'POST', 'PUT', 'PATCH'];
+
+    try {
+      onChangePermissions(document, verbs);
+    } catch (err) {
+      Alerter.error(t("".concat(documentType, ".share.shareByLink.permserror")));
+      logger.log(err);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, loading && /*#__PURE__*/React.createElement(Spinner, null), !loading && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropdownButton, {
+    onClick: toggleMenu,
+    ref: buttonRef,
+    textVariant: "body2"
+  }, t("Share.type.".concat(isReadOnlyPermissions ? 'one-way' : 'two-way')).toLowerCase()), menuIsOpen && /*#__PURE__*/React.createElement(ActionMenu, {
+    onClose: toggleMenu,
+    popperOptions: {
+      placement: 'bottom-end',
+      strategy: 'fixed'
+    },
+    anchorElRef: buttonRef
+  }, /*#__PURE__*/React.createElement(ActionMenuItem, {
+    left: /*#__PURE__*/React.createElement(ActionMenuRadio, {
+      name: "permissionLinkMenu",
+      value: "true",
+      checked: isReadOnlyPermissions
+    }),
+    onClick: function onClick() {
+      toggleMenu();
+      updateLinkPermissions({
+        isReadOnly: true
+      });
+    }
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, (document === null || document === void 0 ? void 0 : document.type) === 'directory' ? t("Share.permissionLink.seeFolder") : t("Share.permissionLink.seeFile"), /*#__PURE__*/React.createElement(Typography, {
+    className: "u-mt-half",
+    variant: "caption",
+    color: "textSecondary"
+  }, t('Share.permissionLink.readDescription')))), !isOnlyReadOnlyLinkAllowed({
+    documentType: documentType
+  }) && /*#__PURE__*/React.createElement(ActionMenuItem, {
+    left: /*#__PURE__*/React.createElement(ActionMenuRadio, {
+      name: "permissionLinkMenu",
+      value: "false",
+      checked: !isReadOnlyPermissions
+    }),
+    onClick: function onClick() {
+      toggleMenu();
+      updateLinkPermissions({
+        isReadOnly: false
+      });
+    }
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, (document === null || document === void 0 ? void 0 : document.type) === 'directory' ? t("Share.permissionLink.modifyFolder") : t("Share.permissionLink.modifyFile"), /*#__PURE__*/React.createElement(Typography, {
+    className: "u-mt-half",
+    variant: "caption",
+    color: "textSecondary"
+  }, t('Share.permissionLink.writeDescription')))), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement(ActionMenuItem, {
+    left: /*#__PURE__*/React.createElement(Icon, {
+      icon: TrashIcon,
+      color: "var(--errorColor)"
+    }),
+    onClick: function onClick() {
+      toggleMenu();
+      deleteShareLink();
+    }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "u-error",
+    variant: "body1"
+  }, t('Share.permissionLink.deactivate'))))));
+};
+
+export default LinkRecipientPermissions;

package/dist/components/Recipient/OwnerIdentity.js

@@ -0,0 +1,44 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["url", "size"];
+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 OwnerIdentity = function OwnerIdentity(_ref) {
+  var url = _ref.url,
+      size = _ref.size,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['avatar']
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    text: getInitials(rest),
+    size: size,
+    textId: getDisplayName(rest)
+  }), /*#__PURE__*/React.createElement(Identity, {
+    name: getDisplayName(rest),
+    details: url
+  }));
+};
+
+export default OwnerIdentity;

package/dist/components/Recipient/Recipient.js

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["instance", "isOwner", "status", "recipientConfirmationData", "verifyRecipient", "fadeIn"];
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useClient } from 'cozy-client';
+import { useI18n } from 'cozy-ui/transpiled/react/I18n';
+import ListItem from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItem';
+import ListItemIcon from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemIcon';
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
+import Typography from 'cozy-ui/transpiled/react/Typography';
+import Fade from 'cozy-ui/transpiled/react/Fade';
+import { FADE_IN_DURATION } from '../../helpers/recipients';
+import { getDisplayName } from '../../models';
+import RecipientConfirm from './RecipientConfirm';
+import RecipientPermissions from './RecipientPermissions';
+import RecipientAvatar from './RecipientAvatar';
+import RecipientStatus from './RecipientStatus';
+var DEFAULT_DISPLAY_NAME = 'Share.contacts.defaultDisplayName';
+
+var Recipient = function Recipient(props) {
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var client = useClient();
+
+  var instance = props.instance,
+      isOwner = props.isOwner,
+      status = props.status,
+      recipientConfirmationData = props.recipientConfirmationData,
+      verifyRecipient = props.verifyRecipient,
+      fadeIn = props.fadeIn,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var isMe = isOwner && status === 'owner' || instance === client.options.uri;
+  var defaultDisplayName = t(DEFAULT_DISPLAY_NAME);
+  var name = getDisplayName(rest, defaultDisplayName);
+  var RightPart = recipientConfirmationData ? /*#__PURE__*/React.createElement(RecipientConfirm, {
+    recipientConfirmationData: recipientConfirmationData,
+    verifyRecipient: verifyRecipient
+  }) : /*#__PURE__*/React.createElement(RecipientPermissions, _extends({}, props, {
+    className: "u-flex-shrink-0"
+  }));
+  return /*#__PURE__*/React.createElement(Fade, {
+    in: true,
+    timeout: fadeIn ? FADE_IN_DURATION : 0
+  }, /*#__PURE__*/React.createElement(ListItem, {
+    disableGutters: true
+  }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(RecipientAvatar, {
+    size: "small",
+    recipient: props
+  })), /*#__PURE__*/React.createElement(ListItemText, {
+    primary: /*#__PURE__*/React.createElement(Typography, {
+      className: "u-ellipsis",
+      variant: "body1"
+    }, isMe ? t('Share.recipients.you') : name),
+    secondary: /*#__PURE__*/React.createElement(RecipientStatus, {
+      status: status,
+      isMe: isMe,
+      instance: instance
+    })
+  }), RightPart));
+};
+
+Recipient.propTypes = {
+  instance: PropTypes.string,
+  isOwner: PropTypes.bool,
+  status: PropTypes.string,
+  recipientConfirmationData: PropTypes.object,
+  verifyRecipient: PropTypes.func
+};
+export default Recipient;