cozy-ui 146.0.0 → 146.1.0

package/react/MemberRow/Readme.md

@@ -0,0 +1,57 @@
+Displays a member of a sharing: avatar, name, subtitle, and on the right its role and a button to remove them. `MemberList` renders one row per member.
+
+### Props of a member
+
+* **id**: unique key of the member
+* **name**: displayed name, replaced by "You" when `isCurrentUser`
+* **subtitle**: email, status… (any node)
+* **avatarUrl** and **initials**: picture of the member, initials when there is no picture or it fails to load
+* **isGroup** and **color**: shows a group avatar
+* **isOwner**: shows the "Owner" label and no action
+* **role** and **roles**: current role, and the roles of this member when they differ from the `roles` of the row
+* **canChangeRole**: shows the role in a menu, as text otherwise
+* **canRemove**, **removeIcon** and **removeLabel**: remove button, its icon and its accessible label
+* **action**: `{ label, onClick }` button shown in place of the role and the remove button
+* **isPending**: shows a spinner instead of the actions
+* **onClick**: makes the row clickable
+* **data**: anything the app needs back in its callbacks, not read by the row
+
+### Demo
+
+```jsx
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import List from 'cozy-ui/transpiled/react/List'
+import MemberRow from 'cozy-ui/transpiled/react/MemberRow'
+import { Unlink } from '@linagora/twake-icons'
+
+const roles = [
+  { value: 'viewer', label: 'Viewer' },
+  { value: 'editor', label: 'Editor' }
+]
+
+const rows = [
+  ['Owner', { id: 'alice', name: 'Alice', subtitle: 'alice@cozy.cc', initials: 'A', isOwner: true, isCurrentUser: true }],
+  ['Role and remove button', { id: 'bob', name: 'Bob', subtitle: 'bob@cozy.cc', initials: 'B', role: 'editor', canChangeRole: true, canRemove: true }],
+  ['Role as text', { id: 'carol', name: 'Carol', subtitle: 'carol@cozy.cc', initials: 'C', role: 'viewer' }],
+  ['Action', { id: 'dave', name: 'Dave', subtitle: 'dave@cozy.cc', initials: 'D', action: { label: 'Verify', onClick: () => {} } }],
+  ['Pending', { id: 'eve', name: 'Eve', subtitle: 'eve@cozy.cc', initials: 'E', role: 'editor', canChangeRole: true, canRemove: true, isPending: true }],
+  ['Clickable group with its only role', { id: 'family', name: 'Family', subtitle: '2 members', isGroup: true, role: 'editor', roles: [{ value: 'editor', label: 'Editor' }], canChangeRole: true, canRemove: true, onClick: () => {} }],
+  ['Clickable group, other remove icon', { id: 'team', name: 'Team', subtitle: '3 members', isGroup: true, color: '#FF7F1B', role: 'editor', canRemove: true, removeIcon: Unlink, removeLabel: 'Unlink Team', onClick: () => {} }]
+]
+
+;
+
+<DemoProvider>
+  <List>
+    {rows.map(([label, member]) => (
+      <MemberRow
+        key={member.id}
+        member={{ ...member, name: `${member.name} (${label})` }}
+        roles={roles}
+        onRoleChange={() => {}}
+        onRemove={() => {}}
+      />
+    ))}
+  </List>
+</DemoProvider>
+```

package/react/MemberRow/index.jsx

@@ -0,0 +1,112 @@
+import PropTypes from 'prop-types'
+import React, { Fragment } from 'react'
+import { useI18n, useExtendI18n } from 'twake-i18n'
+
+import MemberAvatar from './MemberAvatar'
+import MemberGroupAvatar from './MemberGroupAvatar'
+import MemberRowActions from './MemberRowActions'
+import { locales } from './locales'
+import { memberPropType, rolesPropType } from './propTypes'
+import Button from '../Buttons'
+import Fade from '../Fade'
+import ListItem from '../ListItem'
+import ListItemIcon from '../ListItemIcon'
+import ListItemSecondaryAction from '../ListItemSecondaryAction'
+import ListItemText from '../ListItemText'
+import Typography from '../Typography'
+import useBreakpoints from '../providers/Breakpoints'
+
+export const FADE_IN_DURATION = 600
+
+/**
+ * Displays a member of a sharing: avatar, name, subtitle, role and remove button
+ *
+ * @param {object} props
+ * @param {object} props.member - Member to display, see `memberPropType`
+ * @param {object[]} props.roles - Roles a member can get, as `{ value, label }`
+ * @param {boolean} [props.isNew] - Whether the row fades in
+ * @param {Function} props.onRoleChange - Called with the member and its new role
+ * @param {Function} props.onRemove - Called with the member to remove
+ */
+const MemberRow = ({ member, roles, isNew, onRoleChange, onRemove }) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
+  const {
+    name,
+    subtitle,
+    avatarUrl,
+    initials,
+    color,
+    isGroup,
+    isOwner,
+    isCurrentUser,
+    action,
+    onClick
+  } = member
+
+  const ActionsWrapper = onClick ? ListItemSecondaryAction : Fragment
+  const actionsWrapperProps = onClick
+    ? { className: isMobile ? 'u-mr-1' : 'u-mr-2' }
+    : undefined
+
+  return (
+    <Fade in timeout={isNew ? FADE_IN_DURATION : 0}>
+      <ListItem
+        button={Boolean(onClick)}
+        onClick={onClick}
+        gutters={isMobile ? 'default' : 'double'}
+        size="small"
+      >
+        <ListItemIcon>
+          {isGroup ? (
+            <MemberGroupAvatar size="m" color={color} />
+          ) : (
+            <MemberAvatar size="m" initials={initials} avatarUrl={avatarUrl} />
+          )}
+        </ListItemIcon>
+        <ListItemText
+          primary={
+            <Typography variant="body1">
+              {isCurrentUser
+                ? t('MemberRow.you')
+                : name || t('MemberRow.defaultName')}
+            </Typography>
+          }
+          secondary={subtitle}
+        />
+        <ActionsWrapper {...actionsWrapperProps}>
+          {isOwner && (
+            <Typography variant="body2">{t('MemberRow.owner')}</Typography>
+          )}
+          {action && (
+            <Button
+              style={{ position: 'initial' }} // fix z-index bug on iOS when under a BottomDrawer due to relative position
+              variant="text"
+              onClick={action.onClick}
+              label={action.label}
+            />
+          )}
+          {!isOwner && !action && (
+            <MemberRowActions
+              member={member}
+              roles={roles}
+              onRoleChange={onRoleChange}
+              onRemove={onRemove}
+            />
+          )}
+        </ActionsWrapper>
+      </ListItem>
+    </Fade>
+  )
+}
+
+MemberRow.propTypes = {
+  member: memberPropType.isRequired,
+  roles: rolesPropType.isRequired,
+  isNew: PropTypes.bool,
+  onRoleChange: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired
+}
+
+export default MemberRow

package/react/MemberRow/locales/de.json

@@ -0,0 +1,8 @@
+{
+  "MemberRow": {
+    "owner": "Eigentümer",
+    "you": "Du",
+    "remove": "Aus der Freigabe entfernen",
+    "defaultName": "Anonym"
+  }
+}

package/react/MemberRow/locales/en.json

@@ -0,0 +1,8 @@
+{
+  "MemberRow": {
+    "owner": "Owner",
+    "you": "You",
+    "remove": "Remove from sharing",
+    "defaultName": "Anonymous"
+  }
+}

package/react/MemberRow/locales/es.json

@@ -0,0 +1,8 @@
+{
+  "MemberRow": {
+    "owner": "Propietario",
+    "you": "Tú",
+    "remove": "Quitar del uso compartido",
+    "defaultName": "Anónimo"
+  }
+}

package/react/MemberRow/locales/fr.json

@@ -0,0 +1,8 @@
+{
+  "MemberRow": {
+    "owner": "Propriétaire",
+    "you": "Vous",
+    "remove": "Arrêter le partage",
+    "defaultName": "Anonyme"
+  }
+}

package/react/MemberRow/locales/index.js

@@ -0,0 +1,17 @@
+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'
+
+export const locales = {
+  de,
+  en,
+  es,
+  fr,
+  it,
+  ru,
+  vi
+}

package/react/MemberRow/locales/it.json

@@ -0,0 +1,8 @@
+{
+  "MemberRow": {
+    "owner": "Proprietario",
+    "you": "Tu",
+    "remove": "Rimuovi dalla condivisione",
+    "defaultName": "Anonimo"
+  }
+}

package/react/MemberRow/locales/ru.json

@@ -0,0 +1,8 @@
+{
+  "MemberRow": {
+    "owner": "Владелец",
+    "you": "Вы",
+    "remove": "Удалить из общего доступа",
+    "defaultName": "Аноним"
+  }
+}

package/react/MemberRow/locales/vi.json

@@ -0,0 +1,8 @@
+{
+  "MemberRow": {
+    "owner": "Chủ sở hữu",
+    "you": "Bạn",
+    "remove": "Xóa khỏi chia sẻ",
+    "defaultName": "Ẩn danh"
+  }
+}

package/react/MemberRow/propTypes.js

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types'
+
+const rolePropType = PropTypes.shape({
+  value: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired
+})
+
+export const rolesPropType = PropTypes.arrayOf(rolePropType)
+
+export const memberPropType = PropTypes.shape({
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  subtitle: PropTypes.node,
+  avatarUrl: PropTypes.string,
+  initials: PropTypes.string,
+  color: PropTypes.string,
+  isGroup: PropTypes.bool,
+  isOwner: PropTypes.bool,
+  isCurrentUser: PropTypes.bool,
+  role: PropTypes.string,
+  roles: rolesPropType,
+  canChangeRole: PropTypes.bool,
+  canRemove: PropTypes.bool,
+  removeIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  removeLabel: PropTypes.string,
+  action: PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired
+  }),
+  isPending: PropTypes.bool,
+  onClick: PropTypes.func,
+  data: PropTypes.any
+})

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

@@ -0,0 +1,2 @@
+export default EmptyMembers;
+declare function EmptyMembers(): JSX.Element;

package/transpiled/react/MemberList/EmptyMembers.js

@@ -0,0 +1,42 @@
+import { Icon, Team } from '@linagora/twake-icons';
+import cx from 'classnames';
+import React from 'react';
+import { useI18n, useExtendI18n } from 'twake-i18n';
+import { locales } from "cozy-ui/transpiled/react/MemberList/locales";
+import Typography from "cozy-ui/transpiled/react/Typography";
+import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
+import { alpha, makeStyles } from "cozy-ui/transpiled/react/styles";
+var useStyles = makeStyles(function (theme) {
+  return {
+    root: {
+      backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity)
+    }
+  };
+});
+
+var EmptyMembers = function EmptyMembers() {
+  useExtendI18n(locales);
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
+  var classes = useStyles();
+  return /*#__PURE__*/React.createElement("div", {
+    className: cx('u-flex u-flex-column u-flex-items-center u-pv-2 u-ph-1 u-bdrs-6', isMobile ? 'u-mh-1' : 'u-mh-2', classes.root)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: Team,
+    size: 48,
+    color: "var(--primaryColorLight)"
+  }), /*#__PURE__*/React.createElement(Typography, {
+    variant: "body2",
+    className: "u-mt-half"
+  }, t('MemberList.empty.title')), /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption",
+    color: "textSecondary"
+  }, t('MemberList.empty.subtitle')));
+};
+
+export default EmptyMembers;

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

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

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

@@ -0,0 +1,61 @@
+export default MemberList;
+/**
+ * Lists the members of a sharing, the owner first
+ *
+ * @param {object} props
+ * @param {object[]} props.members - Members to display, see `MemberRow`
+ * @param {object[]} props.roles - Roles a member can get, as `{ value, label }`
+ * @param {Function} props.onRoleChange - Called with the member and its new role
+ * @param {Function} props.onRemove - Called with the member to remove
+ * @param {boolean} [props.showEmptyState] - Whether to show a placeholder
+ * when there is no member but the owner
+ * @param {string} [props.className] - Class name of the list
+ */
+declare function MemberList({ members, roles, onRoleChange, onRemove, showEmptyState, className }: {
+    members: object[];
+    roles: object[];
+    onRoleChange: Function;
+    onRemove: Function;
+    showEmptyState?: boolean | undefined;
+    className?: string | undefined;
+}): JSX.Element;
+declare namespace MemberList {
+    namespace propTypes {
+        const members: PropTypes.Validator<(PropTypes.InferProps<{
+            id: PropTypes.Validator<string>;
+            name: PropTypes.Requireable<string>;
+            subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            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>;
+        }> | null)[]>;
+        const roles: PropTypes.Validator<(PropTypes.InferProps<{
+            value: PropTypes.Validator<string>;
+            label: PropTypes.Validator<string>;
+        }> | null)[]>;
+        const onRoleChange: PropTypes.Validator<(...args: any[]) => any>;
+        const onRemove: PropTypes.Validator<(...args: any[]) => any>;
+        const showEmptyState: PropTypes.Requireable<boolean>;
+        const className: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from "prop-types";

package/transpiled/react/MemberList/index.js

@@ -0,0 +1,63 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useGetIsMounted } from 'rooks';
+import EmptyMembers from "cozy-ui/transpiled/react/MemberList/EmptyMembers";
+import List from "cozy-ui/transpiled/react/List";
+import MemberRow from "cozy-ui/transpiled/react/MemberRow";
+import { memberPropType, rolesPropType } from "cozy-ui/transpiled/react/MemberRow/propTypes";
+/**
+ * Lists the members of a sharing, the owner first
+ *
+ * @param {object} props
+ * @param {object[]} props.members - Members to display, see `MemberRow`
+ * @param {object[]} props.roles - Roles a member can get, as `{ value, label }`
+ * @param {Function} props.onRoleChange - Called with the member and its new role
+ * @param {Function} props.onRemove - Called with the member to remove
+ * @param {boolean} [props.showEmptyState] - Whether to show a placeholder
+ * when there is no member but the owner
+ * @param {string} [props.className] - Class name of the list
+ */
+
+var MemberList = function MemberList(_ref) {
+  var members = _ref.members,
+      roles = _ref.roles,
+      onRoleChange = _ref.onRoleChange,
+      onRemove = _ref.onRemove,
+      _ref$showEmptyState = _ref.showEmptyState,
+      showEmptyState = _ref$showEmptyState === void 0 ? true : _ref$showEmptyState,
+      className = _ref.className;
+  var getIsMounted = useGetIsMounted();
+  var owner = members.find(function (member) {
+    return member.isOwner;
+  });
+  var otherMembers = members.filter(function (member) {
+    return !member.isOwner;
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List, {
+    className: className
+  }, owner && /*#__PURE__*/React.createElement(MemberRow, {
+    member: owner,
+    roles: roles,
+    onRoleChange: onRoleChange,
+    onRemove: onRemove
+  }), otherMembers.map(function (member) {
+    return /*#__PURE__*/React.createElement(MemberRow, {
+      key: member.id,
+      member: member,
+      roles: roles,
+      isNew: getIsMounted(),
+      onRoleChange: onRoleChange,
+      onRemove: onRemove
+    });
+  })), showEmptyState && otherMembers.length === 0 && /*#__PURE__*/React.createElement(EmptyMembers, null));
+};
+
+MemberList.propTypes = {
+  members: PropTypes.arrayOf(memberPropType).isRequired,
+  roles: rolesPropType.isRequired,
+  onRoleChange: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired,
+  showEmptyState: PropTypes.bool,
+  className: PropTypes.string
+};
+export default MemberList;

package/transpiled/react/MemberList/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/MemberList/locales/index.js

@@ -0,0 +1,65 @@
+var de = {
+  MemberList: {
+    empty: {
+      title: "Noch niemand hinzugef\xFCgt",
+      subtitle: "Eingeladene Personen werden hier angezeigt."
+    }
+  }
+};
+var en = {
+  MemberList: {
+    empty: {
+      title: "No one has been added yet",
+      subtitle: "People invited to join will be listed here."
+    }
+  }
+};
+var es = {
+  MemberList: {
+    empty: {
+      title: "Todav\xEDa no se ha a\xF1adido a nadie",
+      subtitle: "Las personas invitadas aparecer\xE1n aqu\xED."
+    }
+  }
+};
+var fr = {
+  MemberList: {
+    empty: {
+      title: "Personne n'a encore \xE9t\xE9 ajout\xE9",
+      subtitle: "Les personnes invit\xE9es appara\xEEtront ici."
+    }
+  }
+};
+var it = {
+  MemberList: {
+    empty: {
+      title: "Nessuno \xE8 stato ancora aggiunto",
+      subtitle: "Le persone invitate verranno elencate qui."
+    }
+  }
+};
+var ru = {
+  MemberList: {
+    empty: {
+      title: "\u041F\u043E\u043A\u0430 \u043D\u0438\u043A\u0442\u043E \u043D\u0435 \u0434\u043E\u0431\u0430\u0432\u043B\u0435\u043D",
+      subtitle: "\u0417\u0434\u0435\u0441\u044C \u043F\u043E\u044F\u0432\u044F\u0442\u0441\u044F \u043F\u0440\u0438\u0433\u043B\u0430\u0448\u0451\u043D\u043D\u044B\u0435 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u0438."
+    }
+  }
+};
+var vi = {
+  MemberList: {
+    empty: {
+      title: "Ch\u01B0a c\xF3 ai \u0111\u01B0\u1EE3c th\xEAm",
+      subtitle: "Nh\u1EEFng ng\u01B0\u1EDDi \u0111\u01B0\u1EE3c m\u1EDDi s\u1EBD hi\u1EC3n th\u1ECB t\u1EA1i \u0111\xE2y."
+    }
+  }
+};
+export var locales = {
+  de: de,
+  en: en,
+  es: es,
+  fr: fr,
+  it: it,
+  ru: ru,
+  vi: vi
+};

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

@@ -0,0 +1,6 @@
+export default MemberAvatar;
+declare function MemberAvatar({ initials, avatarUrl, ...rest }: {
+    [x: string]: any;
+    initials: any;
+    avatarUrl: any;
+}): JSX.Element;

package/transpiled/react/MemberRow/MemberAvatar.js

@@ -0,0 +1,34 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["initials", "avatarUrl"];
+import React, { useState } from 'react';
+import Avatar from "cozy-ui/transpiled/react/Avatar";
+
+var MemberAvatar = function MemberAvatar(_ref) {
+  var initials = _ref.initials,
+      avatarUrl = _ref.avatarUrl,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  // Remember which image url failed to load so we can fall back to the
+  // initials. Storing the url (instead of a boolean) means a new url is
+  // retried automatically, without an effect to reset the error state.
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      erroredSrc = _useState2[0],
+      setErroredSrc = _useState2[1]; // The avatar can become unreachable (eg. the related sharing is revoked
+  // while its members are still rendered), in which case the image request
+  // fails. Without a fallback the browser shows a broken-image icon, so we
+  // render the initials instead.
+
+
+  return /*#__PURE__*/React.createElement(Avatar, rest, avatarUrl && erroredSrc !== avatarUrl ? /*#__PURE__*/React.createElement("img", {
+    width: "100%",
+    height: "100%",
+    src: avatarUrl,
+    onError: function onError() {
+      return setErroredSrc(avatarUrl);
+    }
+  }) : initials);
+};
+
+export default MemberAvatar;

package/transpiled/react/MemberRow/MemberAvatar.spec.d.ts

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

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

@@ -0,0 +1,6 @@
+export default MemberGroupAvatar;
+declare function MemberGroupAvatar({ size, color, className }: {
+    size: any;
+    color?: string | undefined;
+    className: any;
+}): JSX.Element;

package/transpiled/react/MemberRow/MemberGroupAvatar.js

@@ -0,0 +1,21 @@
+import { Icon, Peoples } from '@linagora/twake-icons';
+import React from 'react';
+import Avatar, { colorToGradient } from "cozy-ui/transpiled/react/Avatar";
+import { COLORS } from "cozy-ui/transpiled/react/ColorList/helpers";
+var DEFAULT_COLOR = COLORS[4];
+
+var MemberGroupAvatar = function MemberGroupAvatar(_ref) {
+  var size = _ref.size,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? DEFAULT_COLOR : _ref$color,
+      className = _ref.className;
+  return /*#__PURE__*/React.createElement(Avatar, {
+    size: size,
+    color: colorToGradient(color),
+    className: className
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: Peoples
+  }));
+};
+
+export default MemberGroupAvatar;

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

@@ -0,0 +1,45 @@
+export default MemberRoleMenu;
+declare function MemberRoleMenu({ member, value, roles, onChange }: {
+    member: any;
+    value: any;
+    roles: any;
+    onChange: any;
+}): JSX.Element;
+declare namespace MemberRoleMenu {
+    namespace propTypes {
+        const member: PropTypes.Validator<PropTypes.InferProps<{
+            id: PropTypes.Validator<string>;
+            name: PropTypes.Requireable<string>;
+            subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            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 value: PropTypes.Validator<string>;
+        const roles: PropTypes.Validator<(PropTypes.InferProps<{
+            value: PropTypes.Validator<string>;
+            label: PropTypes.Validator<string>;
+        }> | null)[]>;
+        const onChange: PropTypes.Validator<(...args: any[]) => any>;
+    }
+}
+import PropTypes from "prop-types";