cozy-ui 146.2.2 → 146.3.1

package/transpiled/react/MemberAutocomplete/index.js

@@ -0,0 +1,296 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+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 PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { useI18n, useExtendI18n } from 'twake-i18n';
+import MemberAutocompleteActions from "cozy-ui/transpiled/react/MemberAutocomplete/MemberAutocompleteActions";
+import MemberChip from "cozy-ui/transpiled/react/MemberAutocomplete/MemberChip";
+import MemberSuggestion from "cozy-ui/transpiled/react/MemberAutocomplete/MemberSuggestion";
+import { getUnpickedMembers } from "cozy-ui/transpiled/react/MemberAutocomplete/helpers";
+import { locales } from "cozy-ui/transpiled/react/MemberAutocomplete/locales";
+import { useMemberInput } from "cozy-ui/transpiled/react/MemberAutocomplete/useMemberInput";
+import { useMemberSuggestions } from "cozy-ui/transpiled/react/MemberAutocomplete/useMemberSuggestions";
+import { useRoleMenuFocus } from "cozy-ui/transpiled/react/MemberAutocomplete/useRoleMenuFocus";
+import Autocomplete from "cozy-ui/transpiled/react/Autocomplete";
+import Buttons from "cozy-ui/transpiled/react/Buttons";
+import { memberPropType, rolesPropType } from "cozy-ui/transpiled/react/MemberRow/propTypes";
+import TextField from "cozy-ui/transpiled/react/TextField";
+import Typography from "cozy-ui/transpiled/react/Typography";
+import { getRandomUUID } from "cozy-ui/transpiled/react/helpers/getRandomUUID";
+import { makeStyles } from "cozy-ui/transpiled/react/styles";
+var LIMIT_TAGS = 3;
+var useStyles = makeStyles({
+  inputRoot: {
+    '&&': {
+      padding: '.375rem .5625rem',
+      paddingRight: function paddingRight(_ref) {
+        var actionsWidth = _ref.actionsWidth;
+        return actionsWidth > 0 ? "calc(".concat(actionsWidth, "px + 1.5rem)") : null;
+      }
+    }
+  },
+  input: {
+    '&&': {
+      padding: '.59375rem .25rem'
+    },
+    '&&:first-child': {
+      paddingLeft: '.4375rem'
+    }
+  },
+  submit: {
+    marginTop: '.3125rem'
+  },
+  listbox: {
+    maxHeight: '9rem'
+  },
+  option: {
+    '&[aria-selected="true"]': {
+      backgroundColor: 'transparent'
+    },
+    '&[data-focus="true"], &:active': {
+      backgroundColor: 'var(--actionColorSelected)'
+    }
+  }
+});
+/**
+ * Field to pick the members to invite among suggestions, shown as chips
+ */
+
+var MemberAutocomplete = function MemberAutocomplete(_ref2) {
+  var value = _ref2.value,
+      _ref2$getSuggestions = _ref2.getSuggestions,
+      getSuggestions = _ref2$getSuggestions === void 0 ? function () {
+    return [];
+  } : _ref2$getSuggestions,
+      fetchSuggestions = _ref2.fetchSuggestions,
+      _ref2$getMembersFromT = _ref2.getMembersFromText,
+      getMembersFromText = _ref2$getMembersFromT === void 0 ? function () {
+    return [];
+  } : _ref2$getMembersFromT,
+      _ref2$minQueryLength = _ref2.minQueryLength,
+      minQueryLength = _ref2$minQueryLength === void 0 ? 3 : _ref2$minQueryLength,
+      _ref2$debounceMs = _ref2.debounceMs,
+      debounceMs = _ref2$debounceMs === void 0 ? 300 : _ref2$debounceMs,
+      roles = _ref2.roles,
+      role = _ref2.role,
+      title = _ref2.title,
+      placeholder = _ref2.placeholder,
+      _ref2$loading = _ref2.loading,
+      loading = _ref2$loading === void 0 ? false : _ref2$loading,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      _ref2$autoFocus = _ref2.autoFocus,
+      autoFocus = _ref2$autoFocus === void 0 ? false : _ref2$autoFocus,
+      onChange = _ref2.onChange,
+      onRoleChange = _ref2.onRoleChange,
+      onSubmit = _ref2.onSubmit;
+  useExtendI18n(locales);
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var _useState = useState(getRandomUUID),
+      _useState2 = _slicedToArray(_useState, 1),
+      inputId = _useState2[0];
+
+  var _useState3 = useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      inputValue = _useState4[0],
+      setInputValue = _useState4[1];
+
+  var _useState5 = useState(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      actionsWidth = _useState6[0],
+      setActionsWidth = _useState6[1];
+
+  var classes = useStyles({
+    actionsWidth: actionsWidth
+  });
+
+  var _useMemberSuggestions = useMemberSuggestions({
+    inputValue: inputValue,
+    getSuggestions: getSuggestions,
+    fetchSuggestions: fetchSuggestions,
+    getMembersFromText: getMembersFromText,
+    minQueryLength: minQueryLength,
+    debounceMs: debounceMs
+  }),
+      suggestions = _useMemberSuggestions.suggestions,
+      isFetching = _useMemberSuggestions.isFetching;
+
+  var _useMemberInput = useMemberInput({
+    inputValue: inputValue,
+    value: value,
+    suggestions: suggestions,
+    getMembersFromText: getMembersFromText,
+    onInputValueChange: setInputValue,
+    onChange: onChange
+  }),
+      isTextAddedOnBlur = _useMemberInput.isTextAddedOnBlur,
+      handleChange = _useMemberInput.handleChange,
+      handleInputChange = _useMemberInput.handleInputChange,
+      handleKeyDown = _useMemberInput.handleKeyDown,
+      handlePaste = _useMemberInput.handlePaste,
+      handleBlur = _useMemberInput.handleBlur;
+
+  var _useRoleMenuFocus = useRoleMenuFocus(inputId),
+      isFocusKept = _useRoleMenuFocus.isFocusKept,
+      handleRoleMenuOpen = _useRoleMenuFocus.handleRoleMenuOpen,
+      handleRoleMenuClose = _useRoleMenuFocus.handleRoleMenuClose,
+      handleInputFocus = _useRoleMenuFocus.handleInputFocus;
+
+  var titleId = "".concat(inputId, "-title");
+  var isTitleShown = title !== undefined;
+  var isSubmitShown = onSubmit !== undefined;
+  var hasMembersToSend = value.length > 0 || isTextAddedOnBlur;
+  var isLoading = loading || isFetching;
+  var unpickedSuggestions = getUnpickedMembers(suggestions, value);
+  var fieldPlaceholder = value.length === 0 ? placeholder : undefined;
+  return /*#__PURE__*/React.createElement("div", null, isTitleShown && /*#__PURE__*/React.createElement(Typography, {
+    id: titleId,
+    variant: "h5",
+    className: "u-mb-half"
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: "u-flex u-flex-items-start"
+  }, /*#__PURE__*/React.createElement(Autocomplete, {
+    className: "u-flex-grow-1",
+    classes: {
+      inputRoot: classes.inputRoot,
+      input: classes.input,
+      paper: 'u-mv-half u-bdrs-4',
+      listbox: cx('u-pv-half', classes.listbox),
+      option: cx('u-p-0 u-mih-auto', classes.option)
+    },
+    id: inputId,
+    multiple: true,
+    freeSolo: true,
+    autoHighlight: true,
+    disableClearable: true,
+    limitTags: isFocusKept ? -1 : LIMIT_TAGS,
+    disabled: disabled,
+    options: unpickedSuggestions,
+    value: value,
+    inputValue: inputValue,
+    filterOptions: function filterOptions(allOptions) {
+      return allOptions;
+    },
+    getOptionLabel: function getOptionLabel(option) {
+      var _option$name;
+
+      return (_option$name = option.name) !== null && _option$name !== void 0 ? _option$name : option;
+    },
+    getOptionSelected: function getOptionSelected(option, picked) {
+      return option.id === picked.id;
+    },
+    renderOption: function renderOption(suggestion) {
+      return /*#__PURE__*/React.createElement(MemberSuggestion, {
+        suggestion: suggestion
+      });
+    },
+    renderTags: function renderTags(members, getTagProps) {
+      return members.map(function (member, index) {
+        return /*#__PURE__*/React.createElement(MemberChip, {
+          key: member.id,
+          member: member,
+          tagProps: getTagProps({
+            index: index
+          })
+        });
+      });
+    },
+    renderInput: function renderInput(params) {
+      return /*#__PURE__*/React.createElement(TextField, _extends({}, params, {
+        variant: "outlined",
+        type: "email",
+        placeholder: fieldPlaceholder,
+        autoFocus: autoFocus,
+        InputProps: _objectSpread(_objectSpread({}, params.InputProps), {}, {
+          endAdornment: /*#__PURE__*/React.createElement(MemberAutocompleteActions, {
+            roles: roles,
+            role: role,
+            isLoading: isLoading,
+            disabled: disabled,
+            onRoleChange: onRoleChange,
+            onRoleMenuOpen: handleRoleMenuOpen,
+            onRoleMenuClose: handleRoleMenuClose,
+            onWidthChange: setActionsWidth
+          })
+        }),
+        inputProps: _objectSpread(_objectSpread({}, params.inputProps), {}, {
+          'aria-labelledby': isTitleShown ? titleId : undefined,
+          onKeyDown: handleKeyDown,
+          onPaste: handlePaste
+        }),
+        focused: isFocusKept || undefined,
+        onFocus: handleInputFocus,
+        onBlur: handleBlur
+      }));
+    },
+    onChange: handleChange,
+    onInputChange: handleInputChange
+  }), isSubmitShown && /*#__PURE__*/React.createElement(Buttons, {
+    className: cx('u-ml-1', classes.submit),
+    label: t('MemberAutocomplete.send'),
+    disabled: disabled || !hasMembersToSend,
+    onClick: onSubmit
+  })));
+};
+
+MemberAutocomplete.propTypes = {
+  /** Picked members, see `MemberRow` */
+  value: PropTypes.arrayOf(memberPropType).isRequired,
+
+  /** Returns the local members matching a text */
+  getSuggestions: PropTypes.func,
+
+  /** Resolves with the remote members matching a text, shown before the local ones */
+  fetchSuggestions: PropTypes.func,
+
+  /** Turns a typed or pasted text (e.g. emails) into members, suggested when nothing matches.
+   * Give them the `email` of the person, so that a suggested or picked one replaces them */
+  getMembersFromText: PropTypes.func,
+
+  /** Text length from which `fetchSuggestions` is called */
+  minQueryLength: PropTypes.number,
+
+  /** Delay before calling `fetchSuggestions` */
+  debounceMs: PropTypes.number,
+
+  /** Roles the members can get, as `{ value, label }` */
+  roles: rolesPropType,
+
+  /** Role given to the picked members */
+  role: PropTypes.string,
+
+  /** Title shown above the field */
+  title: PropTypes.string,
+
+  /** Placeholder of the field, shown while no member is picked */
+  placeholder: PropTypes.string,
+
+  /** Whether the suggestions are loading */
+  loading: PropTypes.bool,
+
+  /** Whether the field is disabled */
+  disabled: PropTypes.bool,
+
+  /** Whether the field takes the focus */
+  autoFocus: PropTypes.bool,
+
+  /** Called with the picked members */
+  onChange: PropTypes.func.isRequired,
+
+  /** Called with the new role */
+  onRoleChange: PropTypes.func,
+
+  /** Shows a send button calling it */
+  onSubmit: PropTypes.func
+};
+export default MemberAutocomplete;

package/transpiled/react/MemberAutocomplete/locales/index.d.ts

@@ -0,0 +1,16 @@
+export namespace locales {
+    export { de };
+    export { en };
+    export { es };
+    export { fr };
+    export { it };
+    export { ru };
+    export { vi };
+}
+import de from "./de.json";
+import en from "./en.json";
+import es from "./es.json";
+import fr from "./fr.json";
+import it from "./it.json";
+import ru from "./ru.json";
+import vi from "./vi.json";

package/transpiled/react/MemberAutocomplete/locales/index.js

@@ -0,0 +1,44 @@
+var de = {
+  MemberAutocomplete: {
+    send: "Senden"
+  }
+};
+var en = {
+  MemberAutocomplete: {
+    send: "Send"
+  }
+};
+var es = {
+  MemberAutocomplete: {
+    send: "Enviar"
+  }
+};
+var fr = {
+  MemberAutocomplete: {
+    send: "Envoyer"
+  }
+};
+var it = {
+  MemberAutocomplete: {
+    send: "Invia"
+  }
+};
+var ru = {
+  MemberAutocomplete: {
+    send: "\u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C"
+  }
+};
+var vi = {
+  MemberAutocomplete: {
+    send: "G\u1EEDi"
+  }
+};
+export var locales = {
+  de: de,
+  en: en,
+  es: es,
+  fr: fr,
+  it: it,
+  ru: ru,
+  vi: vi
+};

package/transpiled/react/MemberAutocomplete/useMemberInput.d.ts

@@ -0,0 +1,15 @@
+export function useMemberInput({ inputValue, value, suggestions, getMembersFromText, onInputValueChange, onChange }: {
+    inputValue: string;
+    value: object[];
+    suggestions: object[];
+    getMembersFromText: Function;
+    onInputValueChange: Function;
+    onChange: Function;
+}): {
+    isTextAddedOnBlur: boolean;
+    handleChange: (event: any, newValue: any, reason: any) => void;
+    handleInputChange: (event: any, newInputValue: any, reason: any) => void;
+    handleKeyDown: (event: any) => void;
+    handlePaste: (event: any) => void;
+    handleBlur: () => void;
+};

package/transpiled/react/MemberAutocomplete/useMemberInput.js

@@ -0,0 +1,79 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { getUnpickedMembers, isEmailLike, makeMembersFromValue, resolveKnownMembers } from "cozy-ui/transpiled/react/MemberAutocomplete/helpers";
+/**
+ * Turns the typed text into members on Enter, Space, paste and blur. A text giving no member
+ * stays typed, and a member for a suggested or picked person is replaced by it.
+ *
+ * @param {object} params
+ * @param {string} params.inputValue - Typed text
+ * @param {object[]} params.value - Picked members
+ * @param {object[]} params.suggestions - Suggested members
+ * @param {Function} params.getMembersFromText - Turns a text into members
+ * @param {Function} params.onInputValueChange - Called with the typed text
+ * @param {Function} params.onChange - Called with the picked members
+ */
+
+export var useMemberInput = function useMemberInput(_ref) {
+  var inputValue = _ref.inputValue,
+      value = _ref.value,
+      suggestions = _ref.suggestions,
+      getMembersFromText = _ref.getMembersFromText,
+      onInputValueChange = _ref.onInputValueChange,
+      onChange = _ref.onChange;
+
+  var getKnownMembersFromText = function getKnownMembersFromText(text) {
+    return resolveKnownMembers(getMembersFromText(text), [].concat(_toConsumableArray(value), _toConsumableArray(suggestions)));
+  };
+
+  var addMembersFromText = function addMembersFromText(text) {
+    var members = getKnownMembersFromText(text);
+    if (members.length === 0) return false;
+    onChange([].concat(_toConsumableArray(value), _toConsumableArray(getUnpickedMembers(members, value))));
+    return true;
+  };
+
+  var handleChange = function handleChange(event, newValue, reason) {
+    var typedText = newValue.find(function (item) {
+      return typeof item === 'string';
+    });
+    var isUnknownText = typedText !== undefined && getKnownMembersFromText(typedText).length === 0;
+    if (isUnknownText) return;
+    onChange(makeMembersFromValue(newValue, getKnownMembersFromText));
+    if (reason !== 'remove-option') onInputValueChange('');
+  }; // The Autocomplete resets the text whenever `value` is a new array, even with the same members
+
+
+  var handleInputChange = function handleInputChange(event, newInputValue, reason) {
+    if (reason !== 'reset') onInputValueChange(newInputValue);
+  };
+
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key === ' ' && addMembersFromText(inputValue)) {
+      event.preventDefault();
+      onInputValueChange('');
+    }
+  };
+
+  var handlePaste = function handlePaste(event) {
+    if (addMembersFromText(event.clipboardData.getData('text'))) {
+      event.preventDefault();
+    }
+  };
+
+  var isTextAddedOnBlur = isEmailLike(inputValue) && getKnownMembersFromText(inputValue).length > 0;
+
+  var handleBlur = function handleBlur() {
+    if (isTextAddedOnBlur && addMembersFromText(inputValue)) {
+      onInputValueChange('');
+    }
+  };
+
+  return {
+    isTextAddedOnBlur: isTextAddedOnBlur,
+    handleChange: handleChange,
+    handleInputChange: handleInputChange,
+    handleKeyDown: handleKeyDown,
+    handlePaste: handlePaste,
+    handleBlur: handleBlur
+  };
+};

package/transpiled/react/MemberAutocomplete/useMemberSuggestions.d.ts

@@ -0,0 +1,11 @@
+export function useMemberSuggestions({ inputValue, getSuggestions, fetchSuggestions, getMembersFromText, minQueryLength, debounceMs }: {
+    inputValue: string;
+    getSuggestions: Function;
+    fetchSuggestions?: Function | undefined;
+    getMembersFromText: Function;
+    minQueryLength: number;
+    debounceMs: number;
+}): {
+    suggestions: object[];
+    isFetching: boolean;
+};

package/transpiled/react/MemberAutocomplete/useMemberSuggestions.js

@@ -0,0 +1,120 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { useEffect, useRef, useState } from 'react';
+import { makeSuggestions } from "cozy-ui/transpiled/react/MemberAutocomplete/helpers";
+/**
+ * Computes the members to suggest for the typed text. The local ones and the ones made
+ * from the text are always up to date. The fetched ones come first once `fetchSuggestions`
+ * answers for the current text.
+ *
+ * @param {object} params
+ * @param {string} params.inputValue - Typed text
+ * @param {Function} params.getSuggestions - Returns the local members matching a text
+ * @param {Function} [params.fetchSuggestions] - Resolves with the remote members matching a text
+ * @param {Function} params.getMembersFromText - Turns a text into members, suggested when nothing matches
+ * @param {number} params.minQueryLength - Text length from which `fetchSuggestions` is called
+ * @param {number} params.debounceMs - Delay before calling `fetchSuggestions`
+ * @returns {{ suggestions: object[], isFetching: boolean }}
+ */
+
+export var useMemberSuggestions = function useMemberSuggestions(_ref) {
+  var inputValue = _ref.inputValue,
+      getSuggestions = _ref.getSuggestions,
+      fetchSuggestions = _ref.fetchSuggestions,
+      getMembersFromText = _ref.getMembersFromText,
+      minQueryLength = _ref.minQueryLength,
+      debounceMs = _ref.debounceMs;
+
+  var _useState = useState({
+    query: '',
+    members: []
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      fetched = _useState2[0],
+      setFetched = _useState2[1];
+
+  var fetchSuggestionsRef = useRef();
+  fetchSuggestionsRef.current = fetchSuggestions;
+  var query = inputValue.trim();
+  var isRemoteQuery = fetchSuggestions !== undefined && query.length >= minQueryLength;
+  var isFetching = isRemoteQuery && fetched.query !== query;
+  useEffect(function () {
+    if (!isRemoteQuery) return;
+    var isOutdated = false;
+    var timeout = setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var members, _yield$fetchSuggestio;
+
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              members = [];
+              _context.prev = 1;
+              _context.next = 4;
+              return fetchSuggestionsRef.current(query);
+
+            case 4:
+              _context.t1 = _yield$fetchSuggestio = _context.sent;
+              _context.t0 = _context.t1 !== null;
+
+              if (!_context.t0) {
+                _context.next = 8;
+                break;
+              }
+
+              _context.t0 = _yield$fetchSuggestio !== void 0;
+
+            case 8:
+              if (!_context.t0) {
+                _context.next = 12;
+                break;
+              }
+
+              _context.t2 = _yield$fetchSuggestio;
+              _context.next = 13;
+              break;
+
+            case 12:
+              _context.t2 = [];
+
+            case 13:
+              members = _context.t2;
+              _context.next = 19;
+              break;
+
+            case 16:
+              _context.prev = 16;
+              _context.t3 = _context["catch"](1);
+              members = [];
+
+            case 19:
+              if (!isOutdated) setFetched({
+                query: query,
+                members: members
+              });
+
+            case 20:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[1, 16]]);
+    })), debounceMs);
+    return function () {
+      isOutdated = true;
+      clearTimeout(timeout);
+    };
+  }, [query, isRemoteQuery, debounceMs]);
+  if (query.length === 0) return {
+    suggestions: [],
+    isFetching: false
+  };
+  var fetchedSuggestions = fetched.query === query ? fetched.members : [];
+  var suggestions = makeSuggestions([].concat(_toConsumableArray(fetchedSuggestions), _toConsumableArray(getSuggestions(query))), getMembersFromText(query));
+  return {
+    suggestions: suggestions,
+    isFetching: isFetching
+  };
+};

package/transpiled/react/MemberAutocomplete/useMemberSuggestions.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/transpiled/react/MemberAutocomplete/useRoleMenuFocus.d.ts

@@ -0,0 +1,6 @@
+export function useRoleMenuFocus(inputId: string): {
+    isFocusKept: boolean;
+    handleRoleMenuOpen: () => void;
+    handleRoleMenuClose: () => void;
+    handleInputFocus: () => void;
+};

package/transpiled/react/MemberAutocomplete/useRoleMenuFocus.js

@@ -0,0 +1,37 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState } from 'react';
+/**
+ * Keeps the field shown as focused while the role menu, opened from the focused input,
+ * is open. On close, the input gets the focus back if the menu took it.
+ *
+ * @param {string} inputId - Id of the input
+ */
+
+export var useRoleMenuFocus = function useRoleMenuFocus(inputId) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isFocusKept = _useState2[0],
+      setFocusKept = _useState2[1];
+
+  var handleRoleMenuOpen = function handleRoleMenuOpen() {
+    setFocusKept(document.activeElement.id === inputId);
+  }; // A menu shown as a bottom sheet on mobile leaves the focus on the input
+
+
+  var handleRoleMenuClose = function handleRoleMenuClose() {
+    if (!isFocusKept) return;
+    var input = document.getElementById(inputId);
+    if (document.activeElement === input) setFocusKept(false);else input.focus();
+  };
+
+  var handleInputFocus = function handleInputFocus() {
+    setFocusKept(false);
+  };
+
+  return {
+    isFocusKept: isFocusKept,
+    handleRoleMenuOpen: handleRoleMenuOpen,
+    handleRoleMenuClose: handleRoleMenuClose,
+    handleInputFocus: handleInputFocus
+  };
+};

package/transpiled/react/MemberList/index.d.ts

@@ -25,6 +25,7 @@ declare namespace MemberList {
             id: PropTypes.Validator<string>;
             name: PropTypes.Requireable<string>;
             subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            email: PropTypes.Requireable<string>;
             avatarUrl: PropTypes.Requireable<string>;
             initials: PropTypes.Requireable<string>;
             color: PropTypes.Requireable<string>;

package/transpiled/react/MemberRow/MemberOrGroupAvatar.d.ts

@@ -0,0 +1,39 @@
+export default MemberOrGroupAvatar;
+declare function MemberOrGroupAvatar({ member, size }: {
+    member: any;
+    size: any;
+}): JSX.Element;
+declare namespace MemberOrGroupAvatar {
+    namespace propTypes {
+        const member: PropTypes.Validator<PropTypes.InferProps<{
+            id: PropTypes.Validator<string>;
+            name: PropTypes.Requireable<string>;
+            subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            email: PropTypes.Requireable<string>;
+            avatarUrl: PropTypes.Requireable<string>;
+            initials: PropTypes.Requireable<string>;
+            color: PropTypes.Requireable<string>;
+            isGroup: PropTypes.Requireable<boolean>;
+            isOwner: PropTypes.Requireable<boolean>;
+            isCurrentUser: PropTypes.Requireable<boolean>;
+            role: PropTypes.Requireable<string>;
+            roles: PropTypes.Requireable<(PropTypes.InferProps<{
+                value: PropTypes.Validator<string>;
+                label: PropTypes.Validator<string>;
+            }> | null)[]>;
+            canChangeRole: PropTypes.Requireable<boolean>;
+            canRemove: PropTypes.Requireable<boolean>;
+            removeIcon: PropTypes.Requireable<object>;
+            removeLabel: PropTypes.Requireable<string>;
+            action: PropTypes.Requireable<PropTypes.InferProps<{
+                label: PropTypes.Validator<string>;
+                onClick: PropTypes.Validator<(...args: any[]) => any>;
+            }>>;
+            isPending: PropTypes.Requireable<boolean>;
+            onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            data: PropTypes.Requireable<any>;
+        }>>;
+        const size: PropTypes.Validator<string>;
+    }
+}
+import PropTypes from "prop-types";