cozy-ui 146.2.1 → 146.3.0

package/react/MemberAutocomplete/index.jsx

@@ -0,0 +1,247 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import { useI18n, useExtendI18n } from 'twake-i18n'
+
+import MemberAutocompleteActions from './MemberAutocompleteActions'
+import MemberChip from './MemberChip'
+import MemberSuggestion from './MemberSuggestion'
+import { getUnpickedMembers, isEmailLike } from './helpers'
+import { locales } from './locales'
+import { useMemberInput } from './useMemberInput'
+import { useMemberSuggestions } from './useMemberSuggestions'
+import { useRoleMenuFocus } from './useRoleMenuFocus'
+import Autocomplete from '../Autocomplete'
+import Buttons from '../Buttons'
+import { memberPropType, rolesPropType } from '../MemberRow/propTypes'
+import TextField from '../TextField'
+import Typography from '../Typography'
+import { getRandomUUID } from '../helpers/getRandomUUID'
+import { makeStyles } from '../styles'
+
+const LIMIT_TAGS = 3
+
+const useStyles = makeStyles({
+  inputRoot: {
+    '&&': {
+      padding: '.375rem .5625rem',
+      paddingRight: ({ actionsWidth }) =>
+        actionsWidth > 0 ? `calc(${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
+ */
+const MemberAutocomplete = ({
+  value,
+  getSuggestions = () => [],
+  fetchSuggestions,
+  getMembersFromText = () => [],
+  minQueryLength = 3,
+  debounceMs = 300,
+  roles,
+  role,
+  title,
+  placeholder,
+  loading = false,
+  disabled = false,
+  autoFocus = false,
+  onChange,
+  onRoleChange,
+  onSubmit
+}) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const [inputId] = useState(getRandomUUID)
+  const [inputValue, setInputValue] = useState('')
+  const [actionsWidth, setActionsWidth] = useState(0)
+  const classes = useStyles({ actionsWidth })
+  const { suggestions, isFetching } = useMemberSuggestions({
+    inputValue,
+    getSuggestions,
+    fetchSuggestions,
+    getMembersFromText,
+    minQueryLength,
+    debounceMs
+  })
+  const {
+    handleChange,
+    handleInputChange,
+    handleKeyDown,
+    handlePaste,
+    handleBlur
+  } = useMemberInput({
+    inputValue,
+    value,
+    suggestions,
+    getMembersFromText,
+    onInputValueChange: setInputValue,
+    onChange
+  })
+  const {
+    isFocusKept,
+    handleRoleMenuOpen,
+    handleRoleMenuClose,
+    handleInputFocus
+  } = useRoleMenuFocus(inputId)
+
+  const titleId = `${inputId}-title`
+  const isTitleShown = title !== undefined
+  const isSubmitShown = onSubmit !== undefined
+  const hasMembersToSend = value.length > 0 || isEmailLike(inputValue)
+  const isLoading = loading || isFetching
+  const unpickedSuggestions = getUnpickedMembers(suggestions, value)
+  const fieldPlaceholder = value.length === 0 ? placeholder : undefined
+
+  return (
+    <div>
+      {isTitleShown && (
+        <Typography id={titleId} variant="h5" className="u-mb-half">
+          {title}
+        </Typography>
+      )}
+      <div className="u-flex u-flex-items-start">
+        <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
+          freeSolo
+          autoHighlight
+          disableClearable
+          limitTags={isFocusKept ? -1 : LIMIT_TAGS}
+          disabled={disabled}
+          options={unpickedSuggestions}
+          value={value}
+          inputValue={inputValue}
+          filterOptions={allOptions => allOptions}
+          getOptionLabel={option => option.name ?? option}
+          getOptionSelected={(option, picked) => option.id === picked.id}
+          renderOption={suggestion => (
+            <MemberSuggestion suggestion={suggestion} />
+          )}
+          renderTags={(members, getTagProps) =>
+            members.map((member, index) => (
+              <MemberChip
+                key={member.id}
+                member={member}
+                tagProps={getTagProps({ index })}
+              />
+            ))
+          }
+          renderInput={params => (
+            <TextField
+              {...params}
+              variant="outlined"
+              type="email"
+              placeholder={fieldPlaceholder}
+              autoFocus={autoFocus}
+              InputProps={{
+                ...params.InputProps,
+                endAdornment: (
+                  <MemberAutocompleteActions
+                    roles={roles}
+                    role={role}
+                    isLoading={isLoading}
+                    disabled={disabled}
+                    onRoleChange={onRoleChange}
+                    onRoleMenuOpen={handleRoleMenuOpen}
+                    onRoleMenuClose={handleRoleMenuClose}
+                    onWidthChange={setActionsWidth}
+                  />
+                )
+              }}
+              inputProps={{
+                ...params.inputProps,
+                'aria-labelledby': isTitleShown ? titleId : undefined,
+                onKeyDown: handleKeyDown,
+                onPaste: handlePaste
+              }}
+              focused={isFocusKept || undefined}
+              onFocus={handleInputFocus}
+              onBlur={handleBlur}
+            />
+          )}
+          onChange={handleChange}
+          onInputChange={handleInputChange}
+        />
+        {isSubmitShown && (
+          <Buttons
+            className={cx('u-ml-1', classes.submit)}
+            label={t('MemberAutocomplete.send')}
+            disabled={disabled || !hasMembersToSend}
+            onClick={onSubmit}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+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/react/MemberAutocomplete/locales/de.json

@@ -0,0 +1,5 @@
+{
+  "MemberAutocomplete": {
+    "send": "Senden"
+  }
+}

package/react/MemberAutocomplete/locales/en.json

@@ -0,0 +1,5 @@
+{
+  "MemberAutocomplete": {
+    "send": "Send"
+  }
+}

package/react/MemberAutocomplete/locales/es.json

@@ -0,0 +1,5 @@
+{
+  "MemberAutocomplete": {
+    "send": "Enviar"
+  }
+}

package/react/MemberAutocomplete/locales/fr.json

@@ -0,0 +1,5 @@
+{
+  "MemberAutocomplete": {
+    "send": "Envoyer"
+  }
+}

package/react/MemberAutocomplete/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/MemberAutocomplete/locales/it.json

@@ -0,0 +1,5 @@
+{
+  "MemberAutocomplete": {
+    "send": "Invia"
+  }
+}

package/react/MemberAutocomplete/locales/ru.json

@@ -0,0 +1,5 @@
+{
+  "MemberAutocomplete": {
+    "send": "Отправить"
+  }
+}

package/react/MemberAutocomplete/locales/vi.json

@@ -0,0 +1,5 @@
+{
+  "MemberAutocomplete": {
+    "send": "Gửi"
+  }
+}

package/react/MemberAutocomplete/useMemberInput.js

@@ -0,0 +1,80 @@
+import {
+  getUnpickedMembers,
+  isEmailLike,
+  makeMembersFromValue,
+  resolveKnownMembers
+} from './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 const useMemberInput = ({
+  inputValue,
+  value,
+  suggestions,
+  getMembersFromText,
+  onInputValueChange,
+  onChange
+}) => {
+  const getKnownMembersFromText = text =>
+    resolveKnownMembers(getMembersFromText(text), [...value, ...suggestions])
+
+  const addMembersFromText = text => {
+    const members = getKnownMembersFromText(text)
+    if (members.length === 0) return false
+
+    onChange([...value, ...getUnpickedMembers(members, value)])
+    return true
+  }
+
+  const handleChange = (event, newValue, reason) => {
+    const typedText = newValue.find(item => typeof item === 'string')
+    const 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
+  const handleInputChange = (event, newInputValue, reason) => {
+    if (reason !== 'reset') onInputValueChange(newInputValue)
+  }
+
+  const handleKeyDown = event => {
+    if (event.key === ' ' && addMembersFromText(inputValue)) {
+      event.preventDefault()
+      onInputValueChange('')
+    }
+  }
+
+  const handlePaste = event => {
+    if (addMembersFromText(event.clipboardData.getData('text'))) {
+      event.preventDefault()
+    }
+  }
+
+  const handleBlur = () => {
+    if (isEmailLike(inputValue) && addMembersFromText(inputValue)) {
+      onInputValueChange('')
+    }
+  }
+
+  return {
+    handleChange,
+    handleInputChange,
+    handleKeyDown,
+    handlePaste,
+    handleBlur
+  }
+}

package/react/MemberAutocomplete/useMemberSuggestions.js

@@ -0,0 +1,65 @@
+import { useEffect, useRef, useState } from 'react'
+
+import { makeSuggestions } from './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 const useMemberSuggestions = ({
+  inputValue,
+  getSuggestions,
+  fetchSuggestions,
+  getMembersFromText,
+  minQueryLength,
+  debounceMs
+}) => {
+  const [fetched, setFetched] = useState({ query: '', members: [] })
+  const fetchSuggestionsRef = useRef()
+  fetchSuggestionsRef.current = fetchSuggestions
+
+  const query = inputValue.trim()
+  const isRemoteQuery =
+    fetchSuggestions !== undefined && query.length >= minQueryLength
+  const isFetching = isRemoteQuery && fetched.query !== query
+
+  useEffect(() => {
+    if (!isRemoteQuery) return
+
+    let isOutdated = false
+    const timeout = setTimeout(async () => {
+      let members = []
+      try {
+        members = (await fetchSuggestionsRef.current(query)) ?? []
+      } catch {
+        members = []
+      }
+      if (!isOutdated) setFetched({ query, members })
+    }, debounceMs)
+
+    return () => {
+      isOutdated = true
+      clearTimeout(timeout)
+    }
+  }, [query, isRemoteQuery, debounceMs])
+
+  if (query.length === 0) return { suggestions: [], isFetching: false }
+
+  const fetchedSuggestions = fetched.query === query ? fetched.members : []
+  const suggestions = makeSuggestions(
+    [...fetchedSuggestions, ...getSuggestions(query)],
+    getMembersFromText(query)
+  )
+
+  return { suggestions, isFetching }
+}

package/react/MemberAutocomplete/useMemberSuggestions.spec.js

@@ -0,0 +1,97 @@
+import { act, renderHook } from '@testing-library/react-hooks'
+
+import { useMemberSuggestions } from './useMemberSuggestions'
+
+const alice = { id: 'alice', name: 'Alice' }
+const bob = { id: 'bob', name: 'Bob' }
+const email = { id: 'carol@cozy.cc', name: 'carol@cozy.cc' }
+
+describe('useMemberSuggestions', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  const setup = props =>
+    renderHook(
+      inputValue =>
+        useMemberSuggestions({
+          inputValue,
+          getSuggestions: () => [],
+          getMembersFromText: () => [],
+          minQueryLength: 3,
+          debounceMs: 300,
+          ...props
+        }),
+      { initialProps: 'al' }
+    )
+
+  it('shows the local suggestions at once below the minimum length', () => {
+    const fetchSuggestions = jest.fn()
+    const { result } = setup({
+      getSuggestions: () => [alice],
+      fetchSuggestions
+    })
+
+    expect(result.current.suggestions).toEqual([alice])
+    expect(fetchSuggestions).not.toHaveBeenCalled()
+  })
+
+  it('shows the local suggestions at once, then the fetched ones first', async () => {
+    const { result, rerender } = setup({
+      getSuggestions: () => [alice],
+      fetchSuggestions: async () => [bob, alice]
+    })
+
+    rerender('ali')
+    expect(result.current.suggestions).toEqual([alice])
+    expect(result.current.isFetching).toBe(true)
+    await act(async () => {
+      jest.advanceTimersByTime(300)
+    })
+
+    expect(result.current.suggestions).toEqual([bob, alice])
+    expect(result.current.isFetching).toBe(false)
+  })
+
+  it('stops suggesting the fetched members once the text changes', async () => {
+    const { result, rerender } = setup({
+      fetchSuggestions: async () => [bob],
+      getMembersFromText: () => [email]
+    })
+
+    rerender('bob')
+    await act(async () => {
+      jest.advanceTimersByTime(300)
+    })
+    rerender('carol@cozy.cc')
+
+    expect(result.current.suggestions).toEqual([email])
+  })
+
+  it('ignores the answer for an outdated text', async () => {
+    const fetchSuggestions = jest.fn(async query =>
+      query === 'ali' ? [bob] : []
+    )
+    const { result, rerender } = setup({ fetchSuggestions })
+
+    rerender('ali')
+    rerender('alic')
+    await act(async () => {
+      jest.advanceTimersByTime(300)
+    })
+
+    expect(fetchSuggestions).toHaveBeenCalledTimes(1)
+    expect(fetchSuggestions).toHaveBeenCalledWith('alic')
+    expect(result.current.suggestions).toEqual([])
+  })
+
+  it('suggests the members made from the text when nothing matches', () => {
+    const { result } = setup({ getMembersFromText: () => [email] })
+
+    expect(result.current.suggestions).toEqual([email])
+  })
+})

package/react/MemberAutocomplete/useRoleMenuFocus.js

@@ -0,0 +1,35 @@
+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 const useRoleMenuFocus = inputId => {
+  const [isFocusKept, setFocusKept] = useState(false)
+
+  const handleRoleMenuOpen = () => {
+    setFocusKept(document.activeElement.id === inputId)
+  }
+
+  // A menu shown as a bottom sheet on mobile leaves the focus on the input
+  const handleRoleMenuClose = () => {
+    if (!isFocusKept) return
+
+    const input = document.getElementById(inputId)
+    if (document.activeElement === input) setFocusKept(false)
+    else input.focus()
+  }
+
+  const handleInputFocus = () => {
+    setFocusKept(false)
+  }
+
+  return {
+    isFocusKept,
+    handleRoleMenuOpen,
+    handleRoleMenuClose,
+    handleInputFocus
+  }
+}

package/react/MemberRow/MemberOrGroupAvatar.jsx

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import MemberAvatar from './MemberAvatar'
+import MemberGroupAvatar from './MemberGroupAvatar'
+import { memberPropType } from './propTypes'
+
+const MemberOrGroupAvatar = ({ member, size }) => {
+  const { avatarUrl, initials, color, isGroup } = member
+
+  if (isGroup) return <MemberGroupAvatar size={size} color={color} />
+
+  return <MemberAvatar size={size} initials={initials} avatarUrl={avatarUrl} />
+}
+
+MemberOrGroupAvatar.propTypes = {
+  member: memberPropType.isRequired,
+  size: PropTypes.string.isRequired
+}
+
+export default MemberOrGroupAvatar

package/react/MemberRow/MemberRoleMenu.jsx

@@ -11,7 +11,16 @@ import ListItemText from '../ListItemText'
 import Radios from '../Radios'
 import useBreakpoints from '../providers/Breakpoints'
 
-const MemberRoleMenu = ({ member, value, roles, onChange }) => {
+const MemberRoleMenu = ({
+  member,
+  value,
+  roles,
+  size,
+  disabled = false,
+  onChange,
+  onOpen,
+  onClose
+}) => {
   const { isMobile } = useBreakpoints()
   const buttonRef = useRef()
   const [isMenuDisplayed, setMenuDisplayed] = useState(false)
@@ -19,6 +28,16 @@ const MemberRoleMenu = ({ member, value, roles, onChange }) => {
   const label = roles.find(role => role.value === value)?.label
   const isHeaderShown = isMobile && member !== undefined
 
+  const openMenu = () => {
+    setMenuDisplayed(true)
+    onOpen?.()
+  }
+
+  const closeMenu = () => {
+    setMenuDisplayed(false)
+    onClose?.()
+  }
+
   const handleRoleClick = role => {
     if (role.value !== value) onChange(role.value)
   }
@@ -29,8 +48,10 @@ const MemberRoleMenu = ({ member, value, roles, onChange }) => {
         ref={buttonRef}
         aria-controls="simple-menu"
         aria-haspopup="true"
-        onClick={() => setMenuDisplayed(true)}
+        onClick={openMenu}
         textVariant="body2"
+        size={size}
+        disabled={disabled}
       >
         {label}
       </DropdownButton>
@@ -42,7 +63,7 @@ const MemberRoleMenu = ({ member, value, roles, onChange }) => {
         transformOrigin={{ vertical: 'top', horizontal: 'left' }}
         keepMounted
         autoClose
-        onClose={() => setMenuDisplayed(false)}
+        onClose={closeMenu}
       >
         {/* The header renders nothing on desktop but would still take the initial focus of the menu */}
         {isHeaderShown && <MemberRoleMenuHeader member={member} />}
@@ -67,7 +88,11 @@ MemberRoleMenu.propTypes = {
   member: memberPropType,
   value: PropTypes.string.isRequired,
   roles: rolesPropType.isRequired,
-  onChange: PropTypes.func.isRequired
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  onOpen: PropTypes.func,
+  onClose: PropTypes.func
 }
 
 export default MemberRoleMenu