cozy-ui 146.2.2 → 146.3.0

package/react/MemberRow/MemberRoleMenuHeader.jsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import { useI18n, useExtendI18n } from 'twake-i18n'
 
-import MemberAvatar from './MemberAvatar'
-import MemberGroupAvatar from './MemberGroupAvatar'
+import MemberOrGroupAvatar from './MemberOrGroupAvatar'
 import { locales } from './locales'
 import { memberPropType } from './propTypes'
 import ActionsMenuMobileHeader from '../ActionsMenu/ActionsMenuMobileHeader'
@@ -12,16 +11,12 @@ import ListItemText from '../ListItemText'
 const MemberRoleMenuHeader = ({ member }) => {
   useExtendI18n(locales)
   const { t } = useI18n()
-  const { name, avatarUrl, initials, color, isGroup, isCurrentUser } = member
+  const { name, isCurrentUser } = member
 
   return (
     <ActionsMenuMobileHeader>
       <ListItemIcon>
-        {isGroup ? (
-          <MemberGroupAvatar size="m" color={color} />
-        ) : (
-          <MemberAvatar size="m" initials={initials} avatarUrl={avatarUrl} />
-        )}
+        <MemberOrGroupAvatar member={member} size="m" />
       </ListItemIcon>
       <ListItemText
         primary={

package/react/MemberRow/Readme.md

@@ -7,12 +7,13 @@ Displays a member of a sharing: avatar, name, subtitle, and on the right its rol
 * **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
+* **isOwner**: shows the "Owner" label and no action, whatever the other props
+* **role**: current role of the member, among its roles
+* **roles**: 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
+* **action**: `{ label, onClick }` button shown in place of the role and the remove button, so `canChangeRole`, `canRemove` and `isPending` are ignored
+* **isPending**: shows a spinner and the role as text, without the role menu and the remove button
 * **onClick**: makes the row clickable
 * **data**: anything the app needs back in its callbacks, not read by the row
 

package/react/MemberRow/index.jsx

@@ -2,8 +2,7 @@ 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 MemberOrGroupAvatar from './MemberOrGroupAvatar'
 import MemberRowActions from './MemberRowActions'
 import { locales } from './locales'
 import { memberPropType, rolesPropType } from './propTypes'
@@ -32,18 +31,7 @@ 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 { name, subtitle, isOwner, isCurrentUser, action, onClick } = member
 
   const ActionsWrapper = onClick ? ListItemSecondaryAction : Fragment
   const actionsWrapperProps = onClick
@@ -59,11 +47,7 @@ const MemberRow = ({ member, roles, isNew, onRoleChange, onRemove }) => {
         size="small"
       >
         <ListItemIcon>
-          {isGroup ? (
-            <MemberGroupAvatar size="m" color={color} />
-          ) : (
-            <MemberAvatar size="m" initials={initials} avatarUrl={avatarUrl} />
-          )}
+          <MemberOrGroupAvatar member={member} size="m" />
         </ListItemIcon>
         <ListItemText
           primary={

package/react/MemberRow/propTypes.js

@@ -11,6 +11,7 @@ export const memberPropType = PropTypes.shape({
   id: PropTypes.string.isRequired,
   name: PropTypes.string,
   subtitle: PropTypes.node,
+  email: PropTypes.string,
   avatarUrl: PropTypes.string,
   initials: PropTypes.string,
   color: PropTypes.string,

package/transpiled/react/DropdownText/index.js

@@ -20,7 +20,7 @@ var useStyles = makeStyles(function (theme) {
     typography: {
       color: function color(_ref2) {
         var disabled = _ref2.disabled;
-        return disabled ? theme.palette.text.disabled : undefined;
+        return disabled ? theme.palette.text.disabled : null;
       }
     },
     endIcon: {
@@ -28,11 +28,11 @@ var useStyles = makeStyles(function (theme) {
       marginLeft: '5px',
       marginTop: function marginTop(_ref3) {
         var variant = _ref3.variant;
-        return variant === 'body1' ? '3px' : undefined;
+        return variant === 'body1' ? '3px' : null;
       },
       color: function color(_ref4) {
         var disabled = _ref4.disabled;
-        return disabled ? theme.palette.text.disabled : undefined;
+        return disabled ? theme.palette.text.disabled : null;
       }
     }
   };

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

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

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

@@ -0,0 +1,25 @@
+export default MemberAutocompleteActions;
+declare function MemberAutocompleteActions({ roles, role, isLoading, disabled, onRoleChange, onRoleMenuOpen, onRoleMenuClose, onWidthChange }: {
+    roles: any;
+    role: any;
+    isLoading: any;
+    disabled: any;
+    onRoleChange: any;
+    onRoleMenuOpen: any;
+    onRoleMenuClose: any;
+    onWidthChange: any;
+}): JSX.Element | null;
+declare namespace MemberAutocompleteActions {
+    namespace propTypes {
+        export { rolesPropType as roles };
+        export const role: PropTypes.Requireable<string>;
+        export const isLoading: PropTypes.Validator<boolean>;
+        export const disabled: PropTypes.Validator<boolean>;
+        export const onRoleChange: PropTypes.Requireable<(...args: any[]) => any>;
+        export const onRoleMenuOpen: PropTypes.Validator<(...args: any[]) => any>;
+        export const onRoleMenuClose: PropTypes.Validator<(...args: any[]) => any>;
+        export const onWidthChange: PropTypes.Validator<(...args: any[]) => any>;
+    }
+}
+import { rolesPropType } from "../MemberRow/propTypes";
+import PropTypes from "prop-types";

package/transpiled/react/MemberAutocomplete/MemberAutocompleteActions.js

@@ -0,0 +1,69 @@
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useLayoutEffect, useRef } from 'react';
+import CircularProgress from "cozy-ui/transpiled/react/CircularProgress";
+import MemberRoleMenu from "cozy-ui/transpiled/react/MemberRow/MemberRoleMenu";
+import { rolesPropType } from "cozy-ui/transpiled/react/MemberRow/propTypes";
+import { makeStyles } from "cozy-ui/transpiled/react/styles";
+var useStyles = makeStyles({
+  root: {
+    top: '.375rem',
+    height: '2.375rem'
+  }
+});
+
+var MemberAutocompleteActions = function MemberAutocompleteActions(_ref) {
+  var roles = _ref.roles,
+      role = _ref.role,
+      isLoading = _ref.isLoading,
+      disabled = _ref.disabled,
+      onRoleChange = _ref.onRoleChange,
+      onRoleMenuOpen = _ref.onRoleMenuOpen,
+      onRoleMenuClose = _ref.onRoleMenuClose,
+      onWidthChange = _ref.onWidthChange;
+  var classes = useStyles();
+  var rootRef = useRef();
+  var isRoleMenuShown = roles !== undefined && role !== undefined;
+  var hasActions = isLoading || isRoleMenuShown;
+  useLayoutEffect(function () {
+    onWidthChange(rootRef.current ? rootRef.current.offsetWidth : 0);
+  }, [roles, role, isLoading, onWidthChange]);
+  if (!hasActions) return null;
+  return (
+    /*#__PURE__*/
+    // Clicks and keys in the role menu, portaled or not, bubble to the Autocomplete root,
+    // which would focus the input, remove the last member or pick a suggestion
+    React.createElement("div", {
+      ref: rootRef,
+      className: cx('u-pos-absolute u-right-m u-flex u-flex-items-center u-g-half', classes.root),
+      onClick: function onClick(event) {
+        return event.stopPropagation();
+      },
+      onKeyDown: function onKeyDown(event) {
+        return event.stopPropagation();
+      }
+    }, isLoading && /*#__PURE__*/React.createElement(CircularProgress, {
+      size: 16
+    }), isRoleMenuShown && /*#__PURE__*/React.createElement(MemberRoleMenu, {
+      value: role,
+      roles: roles,
+      size: "small",
+      disabled: disabled,
+      onChange: onRoleChange,
+      onOpen: onRoleMenuOpen,
+      onClose: onRoleMenuClose
+    }))
+  );
+};
+
+MemberAutocompleteActions.propTypes = {
+  roles: rolesPropType,
+  role: PropTypes.string,
+  isLoading: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool.isRequired,
+  onRoleChange: PropTypes.func,
+  onRoleMenuOpen: PropTypes.func.isRequired,
+  onRoleMenuClose: PropTypes.func.isRequired,
+  onWidthChange: PropTypes.func.isRequired
+};
+export default MemberAutocompleteActions;

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

@@ -0,0 +1,39 @@
+export default MemberChip;
+declare function MemberChip({ member, tagProps }: {
+    member: any;
+    tagProps: any;
+}): JSX.Element;
+declare namespace MemberChip {
+    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 tagProps: PropTypes.Validator<object>;
+    }
+}
+import PropTypes from "prop-types";

package/transpiled/react/MemberAutocomplete/MemberChip.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useI18n, useExtendI18n } from 'twake-i18n';
+import Chip from "cozy-ui/transpiled/react/Chips";
+import MemberOrGroupAvatar from "cozy-ui/transpiled/react/MemberRow/MemberOrGroupAvatar";
+import { locales } from "cozy-ui/transpiled/react/MemberRow/locales";
+import { memberPropType } from "cozy-ui/transpiled/react/MemberRow/propTypes";
+
+var MemberChip = function MemberChip(_ref) {
+  var member = _ref.member,
+      tagProps = _ref.tagProps;
+  useExtendI18n(locales);
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  return /*#__PURE__*/React.createElement(Chip, _extends({}, tagProps, {
+    label: member.name || t('MemberRow.defaultName'),
+    avatar: /*#__PURE__*/React.createElement(MemberOrGroupAvatar, {
+      member: member,
+      size: "xs"
+    })
+  }));
+};
+
+MemberChip.propTypes = {
+  member: memberPropType.isRequired,
+
+  /** Props given by the Autocomplete for each tag */
+  tagProps: PropTypes.object.isRequired
+};
+export default MemberChip;

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

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

package/transpiled/react/MemberAutocomplete/MemberSuggestion.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useI18n, useExtendI18n } from 'twake-i18n';
+import ListItem from "cozy-ui/transpiled/react/ListItem";
+import ListItemIcon from "cozy-ui/transpiled/react/ListItemIcon";
+import ListItemText from "cozy-ui/transpiled/react/ListItemText";
+import MemberOrGroupAvatar from "cozy-ui/transpiled/react/MemberRow/MemberOrGroupAvatar";
+import { locales } from "cozy-ui/transpiled/react/MemberRow/locales";
+import { memberPropType } from "cozy-ui/transpiled/react/MemberRow/propTypes";
+
+var MemberSuggestion = function MemberSuggestion(_ref) {
+  var suggestion = _ref.suggestion;
+  useExtendI18n(locales);
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  return /*#__PURE__*/React.createElement(ListItem, {
+    component: "div"
+  }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(MemberOrGroupAvatar, {
+    member: suggestion,
+    size: "m"
+  })), /*#__PURE__*/React.createElement(ListItemText, {
+    primary: suggestion.name || t('MemberRow.defaultName'),
+    secondary: suggestion.subtitle
+  }));
+};
+
+MemberSuggestion.propTypes = {
+  suggestion: memberPropType.isRequired
+};
+export default MemberSuggestion;

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

@@ -0,0 +1,7 @@
+export function isEmailLike(text: any): boolean;
+export function isSameMember(member: any, other: any): boolean;
+export function removeDuplicateMembers(members: any): any;
+export function getUnpickedMembers(members: any, pickedMembers: any): any;
+export function resolveKnownMembers(members: object[], knownMembers: object[]): object[];
+export function makeMembersFromValue(value: Array<object | string>, getMembersFromText: Function): object[];
+export function makeSuggestions(matchingSuggestions: object[], textSuggestions: object[]): object[];

package/transpiled/react/MemberAutocomplete/helpers.js

@@ -0,0 +1,73 @@
+var EMAIL_LIKE = /\S+@\S+/;
+var MAX_SUGGESTIONS = 20;
+export var isEmailLike = function isEmailLike(text) {
+  return EMAIL_LIKE.test(text);
+};
+
+var normalizeEmail = function normalizeEmail(email) {
+  return email.trim().toLowerCase();
+};
+/**
+ * Whether two members are the same person: same id, or same email whatever its case
+ */
+
+
+export var isSameMember = function isSameMember(member, other) {
+  return member.id === other.id || Boolean(member.email) && Boolean(other.email) && normalizeEmail(member.email) === normalizeEmail(other.email);
+};
+export var removeDuplicateMembers = function removeDuplicateMembers(members) {
+  return members.filter(function (member, index) {
+    return members.findIndex(function (other) {
+      return isSameMember(member, other);
+    }) === index;
+  });
+};
+export var getUnpickedMembers = function getUnpickedMembers(members, pickedMembers) {
+  return members.filter(function (member) {
+    return !pickedMembers.some(function (picked) {
+      return isSameMember(member, picked);
+    });
+  });
+};
+/**
+ * Replaces each member by the known one for the same person, so that a typed email
+ * gives the suggested contact rather than a second member
+ *
+ * @param {object[]} members - Members made from a text
+ * @param {object[]} knownMembers - Picked and suggested members
+ * @returns {object[]}
+ */
+
+export var resolveKnownMembers = function resolveKnownMembers(members, knownMembers) {
+  return removeDuplicateMembers(members.map(function (member) {
+    var _knownMembers$find;
+
+    return (_knownMembers$find = knownMembers.find(function (known) {
+      return isSameMember(member, known);
+    })) !== null && _knownMembers$find !== void 0 ? _knownMembers$find : member;
+  }));
+};
+/**
+ * Turns the value of the Autocomplete, where typed texts stay strings, into members without duplicates
+ *
+ * @param {Array<object|string>} value - Picked members and typed texts
+ * @param {Function} getMembersFromText - Turns a text into members
+ * @returns {object[]}
+ */
+
+export var makeMembersFromValue = function makeMembersFromValue(value, getMembersFromText) {
+  return removeDuplicateMembers(value.flatMap(function (item) {
+    return typeof item === 'string' ? getMembersFromText(item) : [item];
+  }));
+};
+/**
+ * Members to suggest: the matching ones without duplicates, else the ones made from the text
+ *
+ * @param {object[]} matchingSuggestions - Fetched then local members matching the text
+ * @param {object[]} textSuggestions - Members made from the text
+ * @returns {object[]}
+ */
+
+export var makeSuggestions = function makeSuggestions(matchingSuggestions, textSuggestions) {
+  return (matchingSuggestions.length > 0 ? removeDuplicateMembers(matchingSuggestions) : textSuggestions).slice(0, MAX_SUGGESTIONS);
+};

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

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

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

@@ -0,0 +1,71 @@
+export default MemberAutocomplete;
+/**
+ * Field to pick the members to invite among suggestions, shown as chips
+ */
+declare function MemberAutocomplete({ value, getSuggestions, fetchSuggestions, getMembersFromText, minQueryLength, debounceMs, roles, role, title, placeholder, loading, disabled, autoFocus, onChange, onRoleChange, onSubmit }: {
+    value: any;
+    getSuggestions?: (() => never[]) | undefined;
+    fetchSuggestions: any;
+    getMembersFromText?: (() => never[]) | undefined;
+    minQueryLength?: number | undefined;
+    debounceMs?: number | undefined;
+    roles: any;
+    role: any;
+    title: any;
+    placeholder: any;
+    loading?: boolean | undefined;
+    disabled?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    onChange: any;
+    onRoleChange: any;
+    onSubmit: any;
+}): JSX.Element;
+declare namespace MemberAutocomplete {
+    namespace propTypes {
+        export const value: 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>;
+        }> | null)[]>;
+        export const getSuggestions: PropTypes.Requireable<(...args: any[]) => any>;
+        export const fetchSuggestions: PropTypes.Requireable<(...args: any[]) => any>;
+        export const getMembersFromText: PropTypes.Requireable<(...args: any[]) => any>;
+        export const minQueryLength: PropTypes.Requireable<number>;
+        export const debounceMs: PropTypes.Requireable<number>;
+        export { rolesPropType as roles };
+        export const role: PropTypes.Requireable<string>;
+        export const title: PropTypes.Requireable<string>;
+        export const placeholder: PropTypes.Requireable<string>;
+        export const loading: PropTypes.Requireable<boolean>;
+        export const disabled: PropTypes.Requireable<boolean>;
+        export const autoFocus: PropTypes.Requireable<boolean>;
+        export const onChange: PropTypes.Validator<(...args: any[]) => any>;
+        export const onRoleChange: PropTypes.Requireable<(...args: any[]) => any>;
+        export const onSubmit: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from "prop-types";
+import { rolesPropType } from "../MemberRow/propTypes";