cozy-sharing 31.1.0 → 32.0.0

package/dist/components/SharedDrive/useSharedDrive.js

@@ -5,7 +5,8 @@ import { useState } from 'react';
 import { useClient } from 'cozy-client';
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert';
 import { useI18n } from 'twake-i18n';
-import { RECIPIENT_INDEX_PREFIX, formatRecipients, mergeAndDeduplicateRecipients, moveRecipientToReadOnly, moveRecipientToReadWrite } from './helpers';
+import { getOrCreateFromArray } from '../../helpers/contacts';
+import { usePendingRecipients } from '../../hooks/usePendingRecipients';
 import { Contact } from '../../models';
 export var useSharedDrive = function useSharedDrive(_ref) {
   var onSuccess = _ref.onSuccess;
@@ -17,58 +18,59 @@ export var useSharedDrive = function useSharedDrive(_ref) {
   var _useAlert = useAlert(),
       showAlert = _useAlert.showAlert;
 
-  var _useState = useState({
-    recipients: [],
-    readOnlyRecipients: []
-  }),
+  var _useState = useState(''),
       _useState2 = _slicedToArray(_useState, 2),
-      sharedDriveRecipients = _useState2[0],
-      setSharedDriveRecipients = _useState2[1];
+      sharedDriveName = _useState2[0],
+      setSharedDriveName = _useState2[1];
 
-  var _useState3 = useState(''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      sharedDriveName = _useState4[0],
-      setSharedDriveName = _useState4[1];
+  var _usePendingRecipients = usePendingRecipients(),
+      pendingRecipients = _usePendingRecipients.pendingRecipients,
+      setPendingRecipients = _usePendingRecipients.setPendingRecipients,
+      selectedOption = _usePendingRecipients.selectedOption,
+      setSelectedOption = _usePendingRecipients.setSelectedOption;
 
   var handleSharedDriveNameChange = function handleSharedDriveNameChange(event) {
     setSharedDriveName(event.target.value);
   };
 
-  var onShare = function onShare(params) {
-    setSharedDriveRecipients(function (prev) {
-      return {
-        recipients: mergeAndDeduplicateRecipients([prev.recipients, params.recipients]),
-        readOnlyRecipients: mergeAndDeduplicateRecipients([prev.readOnlyRecipients, params.readOnlyRecipients])
-      };
-    });
+  var createContact = function createContact(contact) {
+    return client.create(Contact.doctype, contact);
   };
 
   var onCreate = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var contacts, readWriteRecipients, readOnlyRecipients;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             _context.prev = 0;
             _context.next = 3;
+            return getOrCreateFromArray(client, pendingRecipients, createContact);
+
+          case 3:
+            contacts = _context.sent;
+            readWriteRecipients = selectedOption === 'readOnly' ? [] : contacts;
+            readOnlyRecipients = selectedOption === 'readOnly' ? contacts : [];
+            _context.next = 8;
             return client.collection('io.cozy.sharings').createSharedDrive({
               name: sharedDriveName,
               description: sharedDriveName,
-              recipients: sharedDriveRecipients.recipients,
-              readOnlyRecipients: sharedDriveRecipients.readOnlyRecipients
+              recipients: readWriteRecipients,
+              readOnlyRecipients: readOnlyRecipients
             });
 
-          case 3:
+          case 8:
             showAlert({
               message: t('SharedDrive.sharedDriveModal.successNotification'),
               severity: 'success',
               variant: 'filled'
             });
             onSuccess();
-            _context.next = 10;
+            _context.next = 15;
             break;
 
-          case 7:
-            _context.prev = 7;
+          case 12:
+            _context.prev = 12;
             _context.t0 = _context["catch"](0);
             showAlert({
               message: t('SharedDrive.sharedDriveModal.errorNotification'),
@@ -76,11 +78,11 @@ export var useSharedDrive = function useSharedDrive(_ref) {
               variant: 'filled'
             });
 
-          case 10:
+          case 15:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[0, 7]]);
+      }, _callee, null, [[0, 12]]);
     }));
 
     return function onCreate() {
@@ -88,39 +90,13 @@ export var useSharedDrive = function useSharedDrive(_ref) {
     };
   }();
 
-  var onSetType = function onSetType(index, newType) {
-    var _id = index.split(RECIPIENT_INDEX_PREFIX)[1];
-    setSharedDriveRecipients(function (prev) {
-      return newType === 'two-way' ? moveRecipientToReadWrite(prev, _id) : moveRecipientToReadOnly(prev, _id);
-    });
-  };
-
-  var onRevoke = function onRevoke(index) {
-    var _id = index.split(RECIPIENT_INDEX_PREFIX)[1];
-    setSharedDriveRecipients(function (prev) {
-      return {
-        recipients: prev.recipients.filter(function (r) {
-          return r._id !== _id;
-        }),
-        readOnlyRecipients: prev.readOnlyRecipients.filter(function (r) {
-          return r._id !== _id;
-        })
-      };
-    });
-  };
-
-  var createContact = function createContact(contact) {
-    return client.create(Contact.doctype, contact);
-  };
-
   return {
     sharedDriveName: sharedDriveName,
-    recipients: formatRecipients(sharedDriveRecipients),
     handleSharedDriveNameChange: handleSharedDriveNameChange,
-    onShare: onShare,
-    onCreate: onCreate,
-    onSetType: onSetType,
-    onRevoke: onRevoke,
-    createContact: createContact
+    pendingRecipients: pendingRecipients,
+    setPendingRecipients: setPendingRecipients,
+    selectedOption: selectedOption,
+    setSelectedOption: setSelectedOption,
+    onCreate: onCreate
   };
 };

package/dist/components/SharedDrive/useSharedDrive.spec.js

@@ -16,19 +16,10 @@ jest.mock('cozy-client', function () {
   return {
     useClient: jest.fn(function () {
       return {
-        collection: mockCollection
+        collection: mockCollection,
+        create: jest.fn()
       };
-    }),
-    models: {
-      contact: {
-        getPrimaryEmail: jest.fn(function (r) {
-          return Array.isArray(r.email) && r.email[0] ? r.email[0].address : '';
-        }),
-        getDisplayName: jest.fn(function (r) {
-          return r.displayName || r.name || '';
-        })
-      }
-    }
+    })
   };
 });
 jest.mock('cozy-ui/transpiled/react/providers/Alert', function () {
@@ -56,6 +47,13 @@ jest.mock('../../models', function () {
     }
   };
 });
+jest.mock('../../helpers/contacts', function () {
+  return {
+    getOrCreateFromArray: jest.fn(function (client, recipients) {
+      return Promise.resolve(recipients);
+    })
+  };
+});
 describe('useSharedDrive', function () {
   beforeEach(function () {
     jest.clearAllMocks();
@@ -69,7 +67,8 @@ describe('useSharedDrive', function () {
         result = _renderHook.result;
 
     expect(result.current.sharedDriveName).toBe('');
-    expect(result.current.recipients).toEqual([]);
+    expect(result.current.pendingRecipients).toEqual([]);
+    expect(result.current.selectedOption).toBe('readWrite');
   });
   it('handleSharedDriveNameChange updates the name', function () {
     var _renderHook2 = renderHook(function () {
@@ -88,95 +87,28 @@ describe('useSharedDrive', function () {
     });
     expect(result.current.sharedDriveName).toBe('My Drive');
   });
-  it('onRevoke removes a recipient from both lists', function () {
-    var _renderHook3 = renderHook(function () {
-      return useSharedDrive({
-        onSuccess: jest.fn()
-      });
-    }),
-        result = _renderHook3.result;
-
-    act(function () {
-      result.current.onShare({
-        recipients: [{
-          _id: 'abc',
-          displayName: 'Alice',
-          email: []
-        }],
-        readOnlyRecipients: []
-      });
-    });
-    act(function () {
-      result.current.onRevoke("virtual-shared-drive-sharing-abc");
-    });
-    expect(result.current.recipients).toHaveLength(0);
-  });
-  it('onSetType moves a recipient to read-only', function () {
-    var _renderHook4 = renderHook(function () {
-      return useSharedDrive({
-        onSuccess: jest.fn()
-      });
-    }),
-        result = _renderHook4.result;
-
-    act(function () {
-      result.current.onShare({
-        recipients: [{
-          _id: 'abc',
-          displayName: 'Alice',
-          email: []
-        }],
-        readOnlyRecipients: []
-      });
-    });
-    act(function () {
-      result.current.onSetType("virtual-shared-drive-sharing-abc", 'one-way');
-    });
-    expect(result.current.recipients[0].type).toBe('one-way');
-  });
-  it('onSetType moves a recipient to read-write', function () {
-    var _renderHook5 = renderHook(function () {
-      return useSharedDrive({
-        onSuccess: jest.fn()
-      });
-    }),
-        result = _renderHook5.result;
-
-    act(function () {
-      result.current.onShare({
-        recipients: [],
-        readOnlyRecipients: [{
-          _id: 'xyz',
-          displayName: 'Bob',
-          email: []
-        }]
-      });
-    });
-    act(function () {
-      result.current.onSetType("virtual-shared-drive-sharing-xyz", 'two-way');
-    });
-    expect(result.current.recipients).toHaveLength(1);
-    expect(result.current.recipients[0].type).toBe('two-way');
-  });
-  it('onCreate calls createSharedDrive, showAlert with success, and onSuccess', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-    var onSuccess, _renderHook6, result;
+  it('onCreate calls createSharedDrive and onSuccess', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var onSuccess, _renderHook3, result;
 
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
           onSuccess = jest.fn();
           mockCreateSharedDrive.mockResolvedValue({});
-          _renderHook6 = renderHook(function () {
+          _renderHook3 = renderHook(function () {
             return useSharedDrive({
               onSuccess: onSuccess
             });
-          }), result = _renderHook6.result;
+          }), result = _renderHook3.result;
           act(function () {
             result.current.handleSharedDriveNameChange({
               target: {
                 value: 'My Drive'
               }
             });
+            result.current.setPendingRecipients([{
+              email: 'a@b.c'
+            }]);
           });
           _context2.next = 6;
           return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
@@ -194,10 +126,14 @@ describe('useSharedDrive', function () {
           })));
 
         case 6:
-          expect(mockCreateSharedDrive).toHaveBeenCalledWith(expect.objectContaining({
+          expect(mockCreateSharedDrive).toHaveBeenCalledWith({
             name: 'My Drive',
-            description: 'My Drive'
-          }));
+            description: 'My Drive',
+            recipients: [{
+              email: 'a@b.c'
+            }],
+            readOnlyRecipients: []
+          });
           expect(mockShowAlert).toHaveBeenCalledWith(expect.objectContaining({
             severity: 'success'
           }));
@@ -210,18 +146,18 @@ describe('useSharedDrive', function () {
     }, _callee2);
   })));
   it('onCreate shows error alert and does not call onSuccess on failure', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-    var onSuccess, _renderHook7, result;
+    var onSuccess, _renderHook4, result;
 
     return _regeneratorRuntime.wrap(function _callee4$(_context4) {
       while (1) switch (_context4.prev = _context4.next) {
         case 0:
           onSuccess = jest.fn();
           mockCreateSharedDrive.mockRejectedValue(new Error('network error'));
-          _renderHook7 = renderHook(function () {
+          _renderHook4 = renderHook(function () {
             return useSharedDrive({
               onSuccess: onSuccess
             });
-          }), result = _renderHook7.result;
+          }), result = _renderHook4.result;
           _context4.next = 5;
           return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
             return _regeneratorRuntime.wrap(function _callee3$(_context3) {

package/dist/components/SharedFolder/DumbBatchSharedFolderModal.js

@@ -14,32 +14,30 @@ export var DumbBatchSharedFolderModal = withLocales(function (_ref) {
       document = _ref.document,
       folderName = _ref.folderName,
       handleFolderNameChange = _ref.handleFolderNameChange,
-      createContact = _ref.createContact,
       recipients = _ref.recipients,
       currentRecipients = _ref.currentRecipients,
       onRevoke = _ref.onRevoke,
-      onSetType = _ref.onSetType,
       onCreate = _ref.onCreate,
       onSend = _ref.onSend,
       onClose = _ref.onClose,
-      _onShare = _ref.onShare,
       onRename = _ref.onRename,
       _ref$showNameField = _ref.showNameField,
       showNameField = _ref$showNameField === void 0 ? false : _ref$showNameField,
       sharingLink = _ref.sharingLink,
       nameLabel = _ref.nameLabel,
       addPeopleLabel = _ref.addPeopleLabel,
-      addButtonLabel = _ref.addButtonLabel,
       cancelLabel = _ref.cancelLabel,
       createLabel = _ref.createLabel,
       shareLabel = _ref.shareLabel,
       saveLabel = _ref.saveLabel,
-      sharingDesc = _ref.sharingDesc,
       _ref$showShareByEmail = _ref.showShareByEmail,
       showShareByEmail = _ref$showShareByEmail === void 0 ? true : _ref$showShareByEmail,
       autoOpenShareRestriction = _ref.autoOpenShareRestriction,
-      showGenerateLinkButton = _ref.showGenerateLinkButton;
-  var hasRecipients = Boolean(recipients === null || recipients === void 0 ? void 0 : recipients.length); // Determine action buttons based on modal mode
+      showGenerateLinkButton = _ref.showGenerateLinkButton,
+      pendingRecipients = _ref.pendingRecipients,
+      onPendingRecipientsChange = _ref.onPendingRecipientsChange,
+      selectedOption = _ref.selectedOption,
+      onSelectedOptionChange = _ref.onSelectedOptionChange;
 
   var actionButtons = function () {
     if (showNameField && onCreate) {
@@ -74,7 +72,7 @@ export var DumbBatchSharedFolderModal = withLocales(function (_ref) {
       }), /*#__PURE__*/React.createElement(Button, {
         variant: "primary",
         label: shareLabel,
-        disabled: !hasRecipients || !onSend,
+        disabled: !onSend,
         onClick: onSend
       }));
     }
@@ -121,17 +119,13 @@ export var DumbBatchSharedFolderModal = withLocales(function (_ref) {
       variant: "h6",
       className: "u-mt-1-half u-mb-half"
     }, addPeopleLabel), showShareByEmail && /*#__PURE__*/React.createElement(DumbShareByEmail, {
-      createContact: createContact,
       currentRecipients: currentRecipients,
       document: document,
       documentType: "Files",
-      sharedDrive: true,
-      sharingDesc: sharingDesc,
-      onShare: function onShare(params) {
-        _onShare(params);
-      },
-      submitLabel: addButtonLabel,
-      showNotifications: false
+      pendingRecipients: pendingRecipients,
+      onPendingRecipientsChange: onPendingRecipientsChange,
+      selectedOption: selectedOption,
+      onSelectedOptionChange: onSelectedOptionChange
     })), /*#__PURE__*/React.createElement(WhoHasAccess, {
       isOwner: true,
       isSharedDrive: true,
@@ -140,7 +134,6 @@ export var DumbBatchSharedFolderModal = withLocales(function (_ref) {
       documentType: "Files",
       className: "u-w-100",
       onRevoke: onRevoke,
-      onSetType: onSetType,
       link: sharingLink
     })),
     actions: actionButtons
@@ -151,30 +144,26 @@ DumbBatchSharedFolderModal.propTypes = {
   document: PropTypes.object,
   folderName: PropTypes.string,
   handleFolderNameChange: PropTypes.func,
-  createContact: PropTypes.func.isRequired,
   recipients: PropTypes.array,
   currentRecipients: PropTypes.array,
   onRevoke: PropTypes.func.isRequired,
-  onSetType: PropTypes.func.isRequired,
   onCreate: PropTypes.func,
   onSend: PropTypes.func,
   onClose: PropTypes.func.isRequired,
-  onShare: PropTypes.func.isRequired,
   onRename: PropTypes.func,
   showNameField: PropTypes.bool,
   sharingLink: PropTypes.string,
   nameLabel: PropTypes.string,
   addPeopleLabel: PropTypes.string,
-  addButtonLabel: PropTypes.string,
   cancelLabel: PropTypes.string,
   createLabel: PropTypes.string,
   shareLabel: PropTypes.string,
   saveLabel: PropTypes.string,
-  sharingDesc: PropTypes.string,
   showShareByEmail: PropTypes.bool,
   autoOpenShareRestriction: PropTypes.bool,
-  showGenerateLinkButton: PropTypes.bool
-};
-DumbBatchSharedFolderModal.defaultProps = {
-  sharingDesc: ''
+  showGenerateLinkButton: PropTypes.bool,
+  pendingRecipients: PropTypes.array,
+  onPendingRecipientsChange: PropTypes.func,
+  selectedOption: PropTypes.oneOf(['readWrite', 'readOnly']),
+  onSelectedOptionChange: PropTypes.func
 };

package/dist/components/Sharetypeselect.js

@@ -1,104 +1,99 @@
-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; }
-
-import cx from 'classnames';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
 import PropTypes from 'prop-types';
-import React from 'react';
-import Icon from 'cozy-ui/transpiled/react/Icon';
-import BottomIcon from 'cozy-ui/transpiled/react/Icons/Bottom';
-import CheckIcon from 'cozy-ui/transpiled/react/Icons/Check';
-import SelectBox, { components } from 'cozy-ui/transpiled/react/SelectBox';
+import React, { forwardRef, useRef, useState } from 'react';
+import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu';
+import { makeActions } from 'cozy-ui/transpiled/react/ActionsMenu/Actions';
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem';
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon';
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
+import Radios from 'cozy-ui/transpiled/react/Radios';
 import logger from '../logger';
-var styles = {
-  "share-modal-content": "share__share-modal-content___1iqEq",
-  "coz-form": "share__coz-form___1ICST",
-  "coz-form-group": "share__coz-form-group___VsQp7",
-  "coz-form-desc": "share__coz-form-desc___2mYN4",
-  "coz-form-label": "share__coz-form-label___bogBw",
-  "coz-form-label--error": "share__coz-form-label--error___3YPkf",
-  "coz-form-errors": "share__coz-form-errors___2xYRz",
-  "coz-form-controls": "share__coz-form-controls___H8kGc",
-  "coz-form-controls--full": "share__coz-form-controls--full___1oQXF",
-  "coz-form-controls--dispatch": "share__coz-form-controls--dispatch___1zIxt",
-  "error": "share__error___pwqPO",
-  "share-byemail-onlybylink": "share__share-byemail-onlybylink___29W-t",
-  "aligned-dropdown-button": "share__aligned-dropdown-button___3crgG",
-  "share-type-control": "share__share-type-control___1YoRr",
-  "select-wrapper": "share__select-wrapper___3XBKC",
-  "select-option": "share__select-option___3Jp8_",
-  "select-option-label": "share__select-option-label___1BWz_",
-  "select-option-desc": "share__select-option-desc___3jOnr",
-  "share-details-created": "share__share-details-created___z3nvO",
-  "share-details-perm": "share__share-details-perm___3HjxK",
-  "share-details-perm-desc": "share__share-details-perm-desc___3HyHu"
-};
 
-var DropdownIndicator = function DropdownIndicator(props) {
-  return /*#__PURE__*/React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement(Icon, {
-    icon: BottomIcon,
-    color: "var(--iconTextColor)"
-  }));
+var makeShareTypeAction = function makeShareTypeAction(_ref) {
+  var option = _ref.option,
+      isSelected = _ref.isSelected,
+      onSelect = _ref.onSelect;
+  var Component = /*#__PURE__*/forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(ActionsMenuItem, _extends({}, props, {
+      ref: ref,
+      onClick: function onClick() {
+        return onSelect(option.value);
+      },
+      disabled: option.disabled
+    }), /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Radios, {
+      checked: isSelected
+    })), /*#__PURE__*/React.createElement(ListItemText, {
+      primary: option.label
+    }));
+  });
+  Component.displayName = "ShareTypeAction-".concat(option.value);
+  return function () {
+    return {
+      name: "shareType-".concat(option.value),
+      label: option.label,
+      icon: null,
+      action: function action() {
+        return onSelect(option.value);
+      },
+      Component: Component
+    };
+  };
 };
 
-var Option = function Option(props) {
-  return /*#__PURE__*/React.createElement(components.Option, props, /*#__PURE__*/React.createElement("div", {
-    className: cx(styles['select-option'])
-  }, props.isSelected && /*#__PURE__*/React.createElement(Icon, {
-    icon: CheckIcon,
-    color: "var(--primaryColor)"
-  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: styles['select-option-label']
-  }, props.label), /*#__PURE__*/React.createElement("div", {
-    className: styles['select-option-desc']
-  }, props.data.desc))));
-};
+var ShareTypeSelect = function ShareTypeSelect(_ref2) {
+  var _options$find;
 
-var customStyles = {
-  option: function option(base, state) {
-    return _objectSpread(_objectSpread({}, base), {}, {
-      color: 'var(--primaryTextColor)',
-      backgroundColor: state.isFocused ? 'var(--actionColorHover)' : null,
-      padding: 0,
-      borderBottom: state.options.findIndex(function (o) {
-        return o.value === state.value;
-      }) === 0 ? '1px solid var(--borderMainColor)' : null
-    });
-  },
-  menu: function menu(base) {
-    return _objectSpread(_objectSpread({}, base), {}, {
-      backgroundColor: 'var(--paperBackgroundColor)',
-      width: '204%'
-    });
-  }
-};
+  var value = _ref2.value,
+      options = _ref2.options,
+      onChange = _ref2.onChange;
+  var buttonRef = useRef();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setOpen = _useState2[1];
+
+  var open = function open() {
+    return setOpen(true);
+  };
+
+  var close = function close() {
+    return setOpen(false);
+  };
 
-var ShareTypeSelect = function ShareTypeSelect(_ref) {
-  var options = _ref.options,
-      _onChange = _ref.onChange;
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles['select-wrapper']
-  }, /*#__PURE__*/React.createElement(SelectBox, {
-    name: "select",
-    classNamePrefix: "needsclick react-select",
-    components: {
-      DropdownIndicator: DropdownIndicator,
-      Option: Option
-    },
-    styles: customStyles,
-    defaultValue: options[0],
-    isSearchable: false,
-    onChange: function onChange(option) {
-      _onChange(option.value);
-    },
-    options: options,
-    menuPosition: "fixed"
+  var onSelect = function onSelect(nextValue) {
+    onChange(nextValue);
+    setOpen(false);
+  };
+
+  var selectedOption = (_options$find = options.find(function (option) {
+    return option.value === value;
+  })) !== null && _options$find !== void 0 ? _options$find : options[0];
+  var actions = makeActions(options.map(function (option) {
+    return makeShareTypeAction({
+      option: option,
+      isSelected: option.value === selectedOption.value,
+      onSelect: onSelect
+    });
+  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropdownButton, {
+    ref: buttonRef,
+    onClick: open,
+    textVariant: "body2",
+    size: "small"
+  }, selectedOption.label), /*#__PURE__*/React.createElement(ActionsMenu, {
+    ref: buttonRef,
+    open: isOpen,
+    actions: actions,
+    autoClose: true,
+    onClose: close
   }));
 };
 
 ShareTypeSelect.propTypes = {
+  value: PropTypes.string,
   onChange: PropTypes.func,
   options: PropTypes.array.isRequired
 };

package/dist/hooks/usePendingRecipients.js

@@ -0,0 +1,20 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState } from 'react';
+export var usePendingRecipients = function usePendingRecipients() {
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      pendingRecipients = _useState2[0],
+      setPendingRecipients = _useState2[1];
+
+  var _useState3 = useState('readWrite'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selectedOption = _useState4[0],
+      setSelectedOption = _useState4[1];
+
+  return {
+    pendingRecipients: pendingRecipients,
+    setPendingRecipients: setPendingRecipients,
+    selectedOption: selectedOption,
+    setSelectedOption: setSelectedOption
+  };
+};