cozy-sharing 36.4.1 → 36.5.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [36.5.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@36.4.2...cozy-sharing@36.5.0) (2026-07-09)
+
+### Features
+
+- Extract PermissionTypeMenu and export it ([a7ee85a](https://github.com/cozy/cozy-libs/commit/a7ee85a4b87295b6c4276710f3e8090f95a6dbba))
+
+## [36.4.2](https://github.com/cozy/cozy-libs/compare/cozy-sharing@36.4.1...cozy-sharing@36.4.2) (2026-07-09)
+
+**Note:** Version bump only for package cozy-sharing
+
 ## [36.4.1](https://github.com/cozy/cozy-libs/compare/cozy-sharing@36.4.0...cozy-sharing@36.4.1) (2026-07-08)
 
 **Note:** Version bump only for package cozy-sharing

package/dist/components/Recipient/MemberRecipientPermissions.js

@@ -1,22 +1,14 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useState, useCallback } from 'react';
 import { Icon, CrossCircleOutline } from '@linagora/twake-icons';
-import React, { useState, useRef, useCallback } from 'react';
 import { useClient } from 'cozy-client';
-import minilog from 'cozy-minilog';
-import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu';
-import { makeActions } from 'cozy-ui/transpiled/react/ActionsMenu/Actions';
-import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
 import IconButton from 'cozy-ui/transpiled/react/IconButton';
 import Spinner from 'cozy-ui/transpiled/react/Spinner';
 import Typography from 'cozy-ui/transpiled/react/Typography';
-import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert';
 import { useI18n } from 'twake-i18n';
-import { setReadOnlySharedPermission } from './actions/setReadOnlySharedPermission';
-import { setReadWriteSharedPermission } from './actions/setReadWriteSharedPermission';
-import { useSharingContext } from '../../hooks/useSharingContext';
-var log = minilog('MemberRecipientPermissions');
+import { PermissionTypeMenu } from './PermissionTypeMenu';
 
 var MemberRecipientPermissions = function MemberRecipientPermissions(_ref) {
   var isOwner = _ref.isOwner,
@@ -35,36 +27,16 @@ var MemberRecipientPermissions = function MemberRecipientPermissions(_ref) {
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
-  var buttonRef = useRef();
   var client = useClient();
 
-  var _useSharingContext = useSharingContext(),
-      updateSharingMemberType = _useSharingContext.updateSharingMemberType;
-
-  var _useAlert = useAlert(),
-      showAlert = _useAlert.showAlert;
-
   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],
-      setMenuDisplayed = _useState4[1];
-
   var instanceMatchesClient = instance !== undefined && instance === client.options.uri;
   var contactIsOwner = status === 'owner';
   var shouldShowMenu = !isReadOnly && !revoking && !contactIsOwner && (instanceMatchesClient && !isOwner || canManageSharing);
-  var toggleMenu = useCallback(function () {
-    setMenuDisplayed(function (displayed) {
-      return !displayed;
-    });
-  }, []);
-  var hideMenu = useCallback(function () {
-    setMenuDisplayed(false);
-  }, []);
   var handleRevocation = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
@@ -99,69 +71,12 @@ var MemberRecipientPermissions = function MemberRecipientPermissions(_ref) {
       }
     }, _callee, null, [[1,, 9, 12]]);
   })), [document, instanceMatchesClient, isOwner, memberIndex, onRevoke, onRevokeSelf, sharingId]);
-  var setType = useCallback( /*#__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)) {
-              _context2.next = 3;
-              break;
-            }
-
-            hideMenu();
-            return _context2.abrupt("return");
-
-          case 3:
-            hideMenu();
-            _context2.prev = 4;
-            _context2.next = 7;
-            return updateSharingMemberType(sharingId, memberIndex, newType);
-
-          case 7:
-            _context2.next = 13;
-            break;
-
-          case 9:
-            _context2.prev = 9;
-            _context2.t0 = _context2["catch"](4);
-            log.error('Failed to change member permission type', _context2.t0);
-            showAlert({
-              message: t('Share.members.error.changePermission'),
-              severity: 'error',
-              variant: 'filled'
-            });
-
-          case 13:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2, null, [[4, 9]]);
-    }));
-
-    return function (_x) {
-      return _ref3.apply(this, arguments);
-    };
-  }(), [hideMenu, memberIndex, sharingId, showAlert, t, type, updateSharingMemberType]);
-  var actions = makeActions([setReadOnlySharedPermission, setReadWriteSharedPermission], {
-    t: t,
-    type: type !== null && type !== void 0 ? type : 'one-way',
-    setType: setType
-  });
   return /*#__PURE__*/React.createElement(React.Fragment, null, revoking && /*#__PURE__*/React.createElement(Spinner, null), !shouldShowMenu && /*#__PURE__*/React.createElement(Typography, {
     variant: "body2"
-  }, contactIsOwner ? t("Share.status.".concat(status)) : t("Share.type.".concat(type))), shouldShowMenu && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropdownButton, {
-    ref: buttonRef,
-    "aria-controls": "simple-menu",
-    "aria-haspopup": "true",
-    onClick: toggleMenu,
-    textVariant: "body2"
-  }, t("Share.type.".concat(type))), /*#__PURE__*/React.createElement(ActionsMenu, {
-    ref: buttonRef,
-    open: isMenuDisplayed,
-    actions: actions,
-    autoClose: true,
-    onClose: hideMenu
+  }, contactIsOwner ? t("Share.status.".concat(status)) : t("Share.type.".concat(type))), shouldShowMenu && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PermissionTypeMenu, {
+    sharingId: sharingId,
+    memberIndex: memberIndex,
+    type: type !== null && type !== void 0 ? type : 'one-way'
   }), /*#__PURE__*/React.createElement(IconButton, {
     onClick: handleRevocation,
     size: "small",

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

@@ -1,7 +1,5 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _extends from "@babel/runtime/helpers/extends";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import React from 'react';
 import { createMockClient } from 'cozy-client';
 import MemberRecipientPermissions from './MemberRecipientPermissions';
@@ -79,121 +77,12 @@ describe('MemberRecipientPermissions component', function () {
   afterAll(function () {
     global.document.createRange = createRangeBackup;
   });
-  it('should render the current permission type', function () {
-    setup();
-    expect(screen.getByRole('button', {
-      name: 'Editor'
-    })).toBeInTheDocument();
-  });
-  it('should call updateSharingMemberType when changing to one-way', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-    var _setup, getByRole;
-
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          mockUpdateSharingMemberType.mockResolvedValue(undefined);
-          _setup = setup({
-            type: 'two-way'
-          }), getByRole = _setup.getByRole;
-          fireEvent.click(getByRole('button', {
-            name: 'Editor'
-          }));
-          fireEvent.click(getByRole('menuitem', {
-            name: 'Viewer'
-          }));
-          expect(mockUpdateSharingMemberType).toHaveBeenCalledWith('sharing-123', 1, 'one-way');
-
-        case 5:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  })));
-  it('should call updateSharingMemberType when changing to two-way', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-    var _setup2, getByRole;
-
-    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          mockUpdateSharingMemberType.mockResolvedValue(undefined);
-          _setup2 = setup({
-            type: 'one-way'
-          }), getByRole = _setup2.getByRole;
-          fireEvent.click(getByRole('button', {
-            name: 'Viewer'
-          }));
-          fireEvent.click(getByRole('menuitem', {
-            name: 'Editor'
-          }));
-          expect(mockUpdateSharingMemberType).toHaveBeenCalledWith('sharing-123', 1, 'two-way');
-
-        case 5:
-        case "end":
-          return _context2.stop();
-      }
-    }, _callee2);
-  })));
-  it('should show error alert when updateSharingMemberType fails', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-    var _setup3, getByRole;
-
-    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
-        case 0:
-          mockUpdateSharingMemberType.mockRejectedValue(new Error('Network error'));
-          _setup3 = setup({
-            type: 'two-way'
-          }), getByRole = _setup3.getByRole;
-          fireEvent.click(getByRole('button', {
-            name: 'Editor'
-          }));
-          fireEvent.click(getByRole('menuitem', {
-            name: 'Viewer'
-          }));
-          _context3.next = 6;
-          return waitFor(function () {
-            expect(mockShowAlert).toHaveBeenCalledWith({
-              message: 'An error occurred while changing the permissions. Please try again.',
-              severity: 'error',
-              variant: 'filled'
-            });
-          });
-
-        case 6:
-        case "end":
-          return _context3.stop();
-      }
-    }, _callee3);
-  })));
-  it('should not call updateSharingMemberType when selecting same type', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-    var _setup4, getByRole;
-
-    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
-        case 0:
-          mockUpdateSharingMemberType.mockResolvedValue(undefined);
-          _setup4 = setup({
-            type: 'two-way'
-          }), getByRole = _setup4.getByRole;
-          fireEvent.click(getByRole('button', {
-            name: 'Editor'
-          }));
-          fireEvent.click(getByRole('menuitem', {
-            name: 'Editor'
-          }));
-          expect(mockUpdateSharingMemberType).not.toHaveBeenCalled();
-
-        case 5:
-        case "end":
-          return _context4.stop();
-      }
-    }, _callee4);
-  })));
   it('should not render menu when user is not owner and not the shared drive contact', function () {
-    var _setup5 = setup({
+    var _setup = setup({
       isOwner: false,
       instance: 'http://other-cozy.local:8080'
     }),
-        queryByRole = _setup5.queryByRole;
+        queryByRole = _setup.queryByRole;
 
     expect(queryByRole('button', {
       name: 'Editor'
@@ -203,21 +92,21 @@ describe('MemberRecipientPermissions component', function () {
     })).not.toBeInTheDocument();
   });
   it('should render menu for owner', function () {
-    var _setup6 = setup({
+    var _setup2 = setup({
       isOwner: true
     }),
-        getByRole = _setup6.getByRole;
+        getByRole = _setup2.getByRole;
 
     expect(getByRole('button', {
       name: 'Editor'
     })).toBeInTheDocument();
   });
   it('should render menu for the user themselves', function () {
-    var _setup7 = setup({
+    var _setup3 = setup({
       isOwner: false,
       instance: 'http://cozy.local:8080'
     }),
-        getByRole = _setup7.getByRole;
+        getByRole = _setup3.getByRole;
 
     expect(getByRole('button', {
       name: 'Editor'

package/dist/components/Recipient/PermissionTypeMenu.js

@@ -0,0 +1,104 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useCallback, useRef, useState } from 'react';
+import minilog from 'cozy-minilog';
+import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu';
+import { makeActions } from 'cozy-ui/transpiled/react/ActionsMenu/Actions';
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
+import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert';
+import { useI18n } from 'twake-i18n';
+import { setReadOnlySharedPermission } from './actions/setReadOnlySharedPermission';
+import { setReadWriteSharedPermission } from './actions/setReadWriteSharedPermission';
+import withLocales from '../../hoc/withLocales';
+import { useSharingContext } from '../../hooks/useSharingContext';
+var log = minilog('PermissionTypeMenu');
+
+var PermissionTypeMenuComponent = function PermissionTypeMenuComponent(_ref) {
+  var sharingId = _ref.sharingId,
+      memberIndex = _ref.memberIndex,
+      type = _ref.type;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var buttonRef = useRef();
+
+  var _useSharingContext = useSharingContext(),
+      updateSharingMemberType = _useSharingContext.updateSharingMemberType;
+
+  var _useAlert = useAlert(),
+      showAlert = _useAlert.showAlert;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isMenuDisplayed = _useState2[0],
+      setMenuDisplayed = _useState2[1];
+
+  var hideMenu = useCallback(function () {
+    setMenuDisplayed(false);
+  }, []);
+  var setType = useCallback( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(newType) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            hideMenu();
+
+            if (!(newType !== type)) {
+              _context.next = 11;
+              break;
+            }
+
+            _context.prev = 2;
+            _context.next = 5;
+            return updateSharingMemberType(sharingId, memberIndex, newType);
+
+          case 5:
+            _context.next = 11;
+            break;
+
+          case 7:
+            _context.prev = 7;
+            _context.t0 = _context["catch"](2);
+            log.error('Failed to change member permission type', _context.t0);
+            showAlert({
+              message: t('Share.members.error.changePermission'),
+              severity: 'error',
+              variant: 'filled'
+            });
+
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 7]]);
+    }));
+
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [hideMenu, memberIndex, sharingId, showAlert, t, type, updateSharingMemberType]);
+  var actions = makeActions([setReadOnlySharedPermission, setReadWriteSharedPermission], {
+    t: t,
+    type: type !== null && type !== void 0 ? type : 'one-way',
+    setType: setType
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropdownButton, {
+    ref: buttonRef,
+    "aria-controls": "simple-menu",
+    "aria-haspopup": "true",
+    onClick: function onClick() {
+      return setMenuDisplayed(true);
+    },
+    textVariant: "body2"
+  }, t("Share.type.".concat(type))), /*#__PURE__*/React.createElement(ActionsMenu, {
+    ref: buttonRef,
+    open: isMenuDisplayed,
+    actions: actions,
+    autoClose: true,
+    onClose: hideMenu
+  }));
+};
+
+export var PermissionTypeMenu = withLocales(PermissionTypeMenuComponent);

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

@@ -0,0 +1,180 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _extends from "@babel/runtime/helpers/extends";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { createMockClient } from 'cozy-client';
+import { PermissionTypeMenu } from './PermissionTypeMenu';
+import AppLike from '../../../test/AppLike';
+var mockUpdateSharingMemberType = jest.fn();
+var mockShowAlert = jest.fn();
+jest.mock('../../hooks/useSharingContext', function () {
+  return {
+    useSharingContext: function useSharingContext() {
+      return {
+        updateSharingMemberType: mockUpdateSharingMemberType
+      };
+    }
+  };
+});
+jest.mock('cozy-ui/transpiled/react/providers/Alert', function () {
+  return {
+    __esModule: true,
+    default: function _default(_ref) {
+      var children = _ref.children;
+      return children;
+    },
+    useAlert: function useAlert() {
+      return {
+        showAlert: mockShowAlert
+      };
+    }
+  };
+});
+describe('PermissionTypeMenu component', function () {
+  var client = createMockClient({});
+  client.options = {
+    uri: 'http://cozy.local:8080'
+  };
+  var defaultProps = {
+    sharingId: 'sharing-123',
+    memberIndex: 1,
+    type: 'two-way'
+  };
+  beforeEach(function () {
+    jest.clearAllMocks();
+  });
+
+  var setup = function setup(props) {
+    return render( /*#__PURE__*/React.createElement(AppLike, {
+      client: client
+    }, /*#__PURE__*/React.createElement(PermissionTypeMenu, _extends({}, defaultProps, 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 the current permission type', function () {
+    setup();
+    expect(screen.getByRole('button', {
+      name: 'Editor'
+    })).toBeInTheDocument();
+  });
+  it('should call updateSharingMemberType when changing to one-way', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _setup, getByRole;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          mockUpdateSharingMemberType.mockResolvedValue(undefined);
+          _setup = setup({
+            type: 'two-way'
+          }), getByRole = _setup.getByRole;
+          fireEvent.click(getByRole('button', {
+            name: 'Editor'
+          }));
+          fireEvent.click(getByRole('menuitem', {
+            name: 'Viewer'
+          }));
+          expect(mockUpdateSharingMemberType).toHaveBeenCalledWith('sharing-123', 1, 'one-way');
+
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it('should call updateSharingMemberType when changing to two-way', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _setup2, getByRole;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          mockUpdateSharingMemberType.mockResolvedValue(undefined);
+          _setup2 = setup({
+            type: 'one-way'
+          }), getByRole = _setup2.getByRole;
+          fireEvent.click(getByRole('button', {
+            name: 'Viewer'
+          }));
+          fireEvent.click(getByRole('menuitem', {
+            name: 'Editor'
+          }));
+          expect(mockUpdateSharingMemberType).toHaveBeenCalledWith('sharing-123', 1, 'two-way');
+
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  it('should show error alert when updateSharingMemberType fails', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var _setup3, getByRole;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          mockUpdateSharingMemberType.mockRejectedValue(new Error('Network error'));
+          _setup3 = setup({
+            type: 'two-way'
+          }), getByRole = _setup3.getByRole;
+          fireEvent.click(getByRole('button', {
+            name: 'Editor'
+          }));
+          fireEvent.click(getByRole('menuitem', {
+            name: 'Viewer'
+          }));
+          _context3.next = 6;
+          return waitFor(function () {
+            expect(mockShowAlert).toHaveBeenCalledWith({
+              message: 'An error occurred while changing the permissions. Please try again.',
+              severity: 'error',
+              variant: 'filled'
+            });
+          });
+
+        case 6:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
+  it('should not call updateSharingMemberType when selecting same type', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _setup4, getByRole;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          mockUpdateSharingMemberType.mockResolvedValue(undefined);
+          _setup4 = setup({
+            type: 'two-way'
+          }), getByRole = _setup4.getByRole;
+          fireEvent.click(getByRole('button', {
+            name: 'Editor'
+          }));
+          fireEvent.click(getByRole('menuitem', {
+            name: 'Editor'
+          }));
+          expect(mockUpdateSharingMemberType).not.toHaveBeenCalled();
+
+        case 5:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  })));
+});

package/dist/index.js

@@ -30,6 +30,7 @@ export { ShareButtonWithRecipients } from './ShareButtonWithRecipients';
 export { DOCUMENT_TYPE } from './helpers/documentType';
 export { getRecipientsFromSharing } from './state';
 export { default as OpenSharingLinkButton } from './OpenSharingLinkButton';
+export { PermissionTypeMenu } from './components/Recipient/PermissionTypeMenu';
 export { default as OpenSharingLinkFabButton } from './OpenSharingLinkFabButton';
 export { NativeFileSharingProvider, useNativeFileSharing } from './providers/NativeFileSharingProvider';
 export { createCozySharingLink } from './actions/createCozySharingLink';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-sharing",
-  "version": "36.4.1",
+  "version": "36.5.0",
   "description": "Provides sharing login for React applications.",
   "main": "dist/index.js",
   "author": "Cozy",
@@ -59,7 +59,7 @@
     "cozy-intent": "^2.31.1",
     "cozy-minilog": "^3.10.1",
     "cozy-ui": "^139.0.2",
-    "cozy-ui-plus": "^11.0.0",
+    "cozy-ui-plus": "^12.0.1",
     "jest": "30.3.0",
     "jest-environment-jsdom": "30.3.0",
     "react": "16.12.0",
@@ -85,5 +85,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "a093f7a4c39543044dad5fb08b234c651f655518"
+  "gitHead": "8f766c3da5a35109325e1a3451e78e7c1b30e515"
 }

package/src/components/Recipient/MemberRecipientPermissions.jsx

@@ -1,22 +1,13 @@
-import { Icon, CrossCircleOutline } from '@linagora/twake-icons'
-import React, { useState, useRef, useCallback } from 'react'
+import React, { useState, useCallback } from 'react'
 
+import { Icon, CrossCircleOutline } from '@linagora/twake-icons'
 import { useClient } from 'cozy-client'
-import minilog from 'cozy-minilog'
-import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
-import { makeActions } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
-import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import Spinner from 'cozy-ui/transpiled/react/Spinner'
 import Typography from 'cozy-ui/transpiled/react/Typography'
-import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'twake-i18n'
 
-import { setReadOnlySharedPermission } from './actions/setReadOnlySharedPermission'
-import { setReadWriteSharedPermission } from './actions/setReadWriteSharedPermission'
-import { useSharingContext } from '../../hooks/useSharingContext'
-
-const log = minilog('MemberRecipientPermissions')
+import { PermissionTypeMenu } from './PermissionTypeMenu'
 
 const MemberRecipientPermissions = ({
   isOwner,
@@ -32,13 +23,9 @@ const MemberRecipientPermissions = ({
   memberIndex
 }) => {
   const { t } = useI18n()
-  const buttonRef = useRef()
   const client = useClient()
-  const { updateSharingMemberType } = useSharingContext()
-  const { showAlert } = useAlert()
 
   const [revoking, setRevoking] = useState(false)
-  const [isMenuDisplayed, setMenuDisplayed] = useState(false)
 
   const instanceMatchesClient =
     instance !== undefined && instance === client.options.uri
@@ -49,13 +36,6 @@ const MemberRecipientPermissions = ({
     !contactIsOwner &&
     ((instanceMatchesClient && !isOwner) || canManageSharing)
 
-  const toggleMenu = useCallback(() => {
-    setMenuDisplayed(displayed => !displayed)
-  }, [])
-  const hideMenu = useCallback(() => {
-    setMenuDisplayed(false)
-  }, [])
-
   const handleRevocation = useCallback(async () => {
     setRevoking(true)
     try {
@@ -77,44 +57,6 @@ const MemberRecipientPermissions = ({
     sharingId
   ])
 
-  const setType = useCallback(
-    async newType => {
-      if (newType === type) {
-        hideMenu()
-        return
-      }
-      hideMenu()
-      try {
-        await updateSharingMemberType(sharingId, memberIndex, newType)
-      } catch (error) {
-        log.error('Failed to change member permission type', error)
-        showAlert({
-          message: t('Share.members.error.changePermission'),
-          severity: 'error',
-          variant: 'filled'
-        })
-      }
-    },
-    [
-      hideMenu,
-      memberIndex,
-      sharingId,
-      showAlert,
-      t,
-      type,
-      updateSharingMemberType
-    ]
-  )
-
-  const actions = makeActions(
-    [setReadOnlySharedPermission, setReadWriteSharedPermission],
-    {
-      t,
-      type: type ?? 'one-way',
-      setType
-    }
-  )
-
   return (
     <>
       {revoking && <Spinner />}
@@ -127,21 +69,10 @@ const MemberRecipientPermissions = ({
       )}
       {shouldShowMenu && (
         <>
-          <DropdownButton
-            ref={buttonRef}
-            aria-controls="simple-menu"
-            aria-haspopup="true"
-            onClick={toggleMenu}
-            textVariant="body2"
-          >
-            {t(`Share.type.${type}`)}
-          </DropdownButton>
-          <ActionsMenu
-            ref={buttonRef}
-            open={isMenuDisplayed}
-            actions={actions}
-            autoClose
-            onClose={hideMenu}
+          <PermissionTypeMenu
+            sharingId={sharingId}
+            memberIndex={memberIndex}
+            type={type ?? 'one-way'}
           />
           <IconButton
             onClick={handleRevocation}

package/src/components/Recipient/MemberRecipientPermissions.spec.jsx

@@ -1,4 +1,4 @@
-import { render, fireEvent, screen, waitFor } from '@testing-library/react'
+import { render } from '@testing-library/react'
 import React from 'react'
 
 import { createMockClient } from 'cozy-client'
@@ -72,70 +72,6 @@ describe('MemberRecipientPermissions component', () => {
     global.document.createRange = createRangeBackup
   })
 
-  it('should render the current permission type', () => {
-    setup()
-    expect(screen.getByRole('button', { name: 'Editor' })).toBeInTheDocument()
-  })
-
-  it('should call updateSharingMemberType when changing to one-way', async () => {
-    mockUpdateSharingMemberType.mockResolvedValue(undefined)
-
-    const { getByRole } = setup({ type: 'two-way' })
-
-    fireEvent.click(getByRole('button', { name: 'Editor' }))
-    fireEvent.click(getByRole('menuitem', { name: 'Viewer' }))
-
-    expect(mockUpdateSharingMemberType).toHaveBeenCalledWith(
-      'sharing-123',
-      1,
-      'one-way'
-    )
-  })
-
-  it('should call updateSharingMemberType when changing to two-way', async () => {
-    mockUpdateSharingMemberType.mockResolvedValue(undefined)
-
-    const { getByRole } = setup({ type: 'one-way' })
-
-    fireEvent.click(getByRole('button', { name: 'Viewer' }))
-    fireEvent.click(getByRole('menuitem', { name: 'Editor' }))
-
-    expect(mockUpdateSharingMemberType).toHaveBeenCalledWith(
-      'sharing-123',
-      1,
-      'two-way'
-    )
-  })
-
-  it('should show error alert when updateSharingMemberType fails', async () => {
-    mockUpdateSharingMemberType.mockRejectedValue(new Error('Network error'))
-
-    const { getByRole } = setup({ type: 'two-way' })
-
-    fireEvent.click(getByRole('button', { name: 'Editor' }))
-    fireEvent.click(getByRole('menuitem', { name: 'Viewer' }))
-
-    await waitFor(() => {
-      expect(mockShowAlert).toHaveBeenCalledWith({
-        message:
-          'An error occurred while changing the permissions. Please try again.',
-        severity: 'error',
-        variant: 'filled'
-      })
-    })
-  })
-
-  it('should not call updateSharingMemberType when selecting same type', async () => {
-    mockUpdateSharingMemberType.mockResolvedValue(undefined)
-
-    const { getByRole } = setup({ type: 'two-way' })
-
-    fireEvent.click(getByRole('button', { name: 'Editor' }))
-    fireEvent.click(getByRole('menuitem', { name: 'Editor' }))
-
-    expect(mockUpdateSharingMemberType).not.toHaveBeenCalled()
-  })
-
   it('should not render menu when user is not owner and not the shared drive contact', () => {
     const { queryByRole } = setup({
       isOwner: false,

package/src/components/Recipient/PermissionTypeMenu.jsx

@@ -0,0 +1,87 @@
+import React, { useCallback, useRef, useState } from 'react'
+
+import minilog from 'cozy-minilog'
+import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
+import { makeActions } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
+import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
+import { useI18n } from 'twake-i18n'
+
+import { setReadOnlySharedPermission } from './actions/setReadOnlySharedPermission'
+import { setReadWriteSharedPermission } from './actions/setReadWriteSharedPermission'
+import withLocales from '../../hoc/withLocales'
+import { useSharingContext } from '../../hooks/useSharingContext'
+
+const log = minilog('PermissionTypeMenu')
+
+const PermissionTypeMenuComponent = ({ sharingId, memberIndex, type }) => {
+  const { t } = useI18n()
+  const buttonRef = useRef()
+  const { updateSharingMemberType } = useSharingContext()
+  const { showAlert } = useAlert()
+
+  const [isMenuDisplayed, setMenuDisplayed] = useState(false)
+
+  const hideMenu = useCallback(() => {
+    setMenuDisplayed(false)
+  }, [])
+
+  const setType = useCallback(
+    async newType => {
+      hideMenu()
+      if (newType !== type) {
+        try {
+          await updateSharingMemberType(sharingId, memberIndex, newType)
+        } catch (error) {
+          log.error('Failed to change member permission type', error)
+          showAlert({
+            message: t('Share.members.error.changePermission'),
+            severity: 'error',
+            variant: 'filled'
+          })
+        }
+      }
+    },
+    [
+      hideMenu,
+      memberIndex,
+      sharingId,
+      showAlert,
+      t,
+      type,
+      updateSharingMemberType
+    ]
+  )
+
+  const actions = makeActions(
+    [setReadOnlySharedPermission, setReadWriteSharedPermission],
+    {
+      t,
+      type: type ?? 'one-way',
+      setType
+    }
+  )
+
+  return (
+    <>
+      <DropdownButton
+        ref={buttonRef}
+        aria-controls="simple-menu"
+        aria-haspopup="true"
+        onClick={() => setMenuDisplayed(true)}
+        textVariant="body2"
+      >
+        {t(`Share.type.${type}`)}
+      </DropdownButton>
+      <ActionsMenu
+        ref={buttonRef}
+        open={isMenuDisplayed}
+        actions={actions}
+        autoClose
+        onClose={hideMenu}
+      />
+    </>
+  )
+}
+
+export const PermissionTypeMenu = withLocales(PermissionTypeMenuComponent)

package/src/components/Recipient/PermissionTypeMenu.spec.jsx

@@ -0,0 +1,131 @@
+import { render, fireEvent, screen, waitFor } from '@testing-library/react'
+import React from 'react'
+
+import { createMockClient } from 'cozy-client'
+
+import { PermissionTypeMenu } from './PermissionTypeMenu'
+import AppLike from '../../../test/AppLike'
+
+const mockUpdateSharingMemberType = jest.fn()
+const mockShowAlert = jest.fn()
+
+jest.mock('../../hooks/useSharingContext', () => ({
+  useSharingContext: () => ({
+    updateSharingMemberType: mockUpdateSharingMemberType
+  })
+}))
+
+jest.mock('cozy-ui/transpiled/react/providers/Alert', () => ({
+  __esModule: true,
+  default: ({ children }) => children,
+  useAlert: () => ({
+    showAlert: mockShowAlert
+  })
+}))
+
+describe('PermissionTypeMenu component', () => {
+  const client = createMockClient({})
+  client.options = {
+    uri: 'http://cozy.local:8080'
+  }
+
+  const defaultProps = {
+    sharingId: 'sharing-123',
+    memberIndex: 1,
+    type: 'two-way'
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  const setup = props => {
+    return render(
+      <AppLike client={client}>
+        <PermissionTypeMenu {...defaultProps} {...props} />
+      </AppLike>
+    )
+  }
+
+  let createRangeBackup
+
+  beforeAll(() => {
+    createRangeBackup = global.document.createRange
+    global.document.createRange = jest.fn(() => ({
+      setStart: () => {},
+      setEnd: () => {},
+      commonAncestorContainer: {
+        nodeName: 'BODY',
+        ownerDocument: document
+      }
+    }))
+  })
+
+  afterAll(() => {
+    global.document.createRange = createRangeBackup
+  })
+
+  it('should render the current permission type', () => {
+    setup()
+    expect(screen.getByRole('button', { name: 'Editor' })).toBeInTheDocument()
+  })
+
+  it('should call updateSharingMemberType when changing to one-way', async () => {
+    mockUpdateSharingMemberType.mockResolvedValue(undefined)
+
+    const { getByRole } = setup({ type: 'two-way' })
+
+    fireEvent.click(getByRole('button', { name: 'Editor' }))
+    fireEvent.click(getByRole('menuitem', { name: 'Viewer' }))
+
+    expect(mockUpdateSharingMemberType).toHaveBeenCalledWith(
+      'sharing-123',
+      1,
+      'one-way'
+    )
+  })
+
+  it('should call updateSharingMemberType when changing to two-way', async () => {
+    mockUpdateSharingMemberType.mockResolvedValue(undefined)
+
+    const { getByRole } = setup({ type: 'one-way' })
+
+    fireEvent.click(getByRole('button', { name: 'Viewer' }))
+    fireEvent.click(getByRole('menuitem', { name: 'Editor' }))
+
+    expect(mockUpdateSharingMemberType).toHaveBeenCalledWith(
+      'sharing-123',
+      1,
+      'two-way'
+    )
+  })
+
+  it('should show error alert when updateSharingMemberType fails', async () => {
+    mockUpdateSharingMemberType.mockRejectedValue(new Error('Network error'))
+
+    const { getByRole } = setup({ type: 'two-way' })
+
+    fireEvent.click(getByRole('button', { name: 'Editor' }))
+    fireEvent.click(getByRole('menuitem', { name: 'Viewer' }))
+
+    await waitFor(() => {
+      expect(mockShowAlert).toHaveBeenCalledWith({
+        message:
+          'An error occurred while changing the permissions. Please try again.',
+        severity: 'error',
+        variant: 'filled'
+      })
+    })
+  })
+
+  it('should not call updateSharingMemberType when selecting same type', async () => {
+    mockUpdateSharingMemberType.mockResolvedValue(undefined)
+
+    const { getByRole } = setup({ type: 'two-way' })
+
+    fireEvent.click(getByRole('button', { name: 'Editor' }))
+    fireEvent.click(getByRole('menuitem', { name: 'Editor' }))
+
+    expect(mockUpdateSharingMemberType).not.toHaveBeenCalled()
+  })
+})

package/src/index.jsx

@@ -34,6 +34,7 @@ export { ShareButtonWithRecipients } from './ShareButtonWithRecipients'
 export { DOCUMENT_TYPE } from './helpers/documentType'
 export { getRecipientsFromSharing } from './state'
 export { default as OpenSharingLinkButton } from './OpenSharingLinkButton'
+export { PermissionTypeMenu } from './components/Recipient/PermissionTypeMenu'
 export { default as OpenSharingLinkFabButton } from './OpenSharingLinkFabButton'
 export {
   NativeFileSharingProvider,