cozy-ui 93.5.0 → 94.1.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# [94.1.0](https://github.com/cozy/cozy-ui/compare/v94.0.0...v94.1.0) (2023-10-02)
+
+
+### Features
+
+* **NestedSelect:** Add NestedSelectResponsive and BottomSheet ([d1659fe](https://github.com/cozy/cozy-ui/commit/d1659fe))
+
+# [94.0.0](https://github.com/cozy/cozy-ui/compare/v93.5.0...v94.0.0) (2023-10-02)
+
+
+### Bug Fixes
+
+* **ContactsList:** Center the spinner when fetching data ([52791a1](https://github.com/cozy/cozy-ui/commit/52791a1))
+* **ContactsList:** Remove padding on cells ([bb6c237](https://github.com/cozy/cozy-ui/commit/bb6c237))
+
+
+### Features
+
+* **ContactsListModal:** Use default text on search, add button, result ([652d52f](https://github.com/cozy/cozy-ui/commit/652d52f))
+* **getRandomUUID:** Returns something even without crypto API ([be65396](https://github.com/cozy/cozy-ui/commit/be65396))
+
+
+### BREAKING CHANGES
+
+* **ContactsListModal:** If you don't want any text in `ContactsListModal` for search input, add button and empty result, use respectively these props : `placeholder={[secure]}, addContactLabel={[secure]}, emptyMessage={[secure]}` instead of `undefined` values
+
 # [93.5.0](https://github.com/cozy/cozy-ui/compare/v93.4.0...v93.5.0) (2023-09-29)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "93.5.0",
+  "version": "94.1.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/ContactsList/Contacts/ContactCozy.jsx

@@ -7,7 +7,7 @@ import styles from '../styles.styl'
 const ContactCozy = ({ cozyUrl }) => (
   <TableCell
     data-testid="ContactCozy" // used by a test in cozy-contacts
-    className={`${styles['contact-cozyurl']} u-ellipsis`}
+    className={`${styles['contact-cozyurl']} u-ellipsis u-p-0`}
   >
     {cozyUrl}
   </TableCell>

package/react/ContactsList/Contacts/ContactEmail.jsx

@@ -7,7 +7,7 @@ import styles from '../styles.styl'
 const ContactEmail = ({ email }) => (
   <TableCell
     data-testid="ContactEmail" // used by a test in cozy-contacts
-    className={`${styles['contact-email']} u-ellipsis`}
+    className={`${styles['contact-email']} u-ellipsis u-p-0`}
   >
     {email}
   </TableCell>

package/react/ContactsList/Contacts/ContactIdentity.jsx

@@ -23,7 +23,7 @@ const ContactIdentity = ({ contact }) => {
       data-testid="ContactIdentity" // used by a test in cozy-contacts
       className={`${
         styles['contact-identity']
-      } u-flex u-flex-items-center u-ellipsis`}
+      } u-flex u-flex-items-center u-ellipsis u-p-0`}
     >
       <Avatar text={getInitials(contact)} size="small" />
       <ContactName displayName={displayName} familyName={name.familyName} />

package/react/ContactsList/Contacts/ContactPhone.jsx

@@ -7,7 +7,7 @@ import styles from '../styles.styl'
 const ContactPhone = ({ phone }) => (
   <TableCell
     data-testid="ContactPhone" // used by a test in cozy-contacts
-    className={`${styles['contact-phone']} u-ellipsis`}
+    className={`${styles['contact-phone']} u-ellipsis u-p-0`}
   >
     {phone}
   </TableCell>

package/react/ContactsList/__snapshots__/ContactRow.spec.js.snap

@@ -9,7 +9,7 @@ exports[`ContactRow should match the contact snapshot 1`] = `
   size="medium"
 >
   <div
-    className="styles__TableCell___yJCq7 styles__contact-identity___mL3IJ u-flex u-flex-items-center u-ellipsis"
+    className="styles__TableCell___yJCq7 styles__contact-identity___mL3IJ u-flex u-flex-items-center u-ellipsis u-p-0"
     data-testid="ContactIdentity"
   >
     <div
@@ -48,19 +48,19 @@ exports[`ContactRow should match the contact snapshot 1`] = `
     </p>
   </div>
   <div
-    className="styles__TableCell___yJCq7 styles__contact-email___3n3q2 u-ellipsis"
+    className="styles__TableCell___yJCq7 styles__contact-email___3n3q2 u-ellipsis u-p-0"
     data-testid="ContactEmail"
   >
     johndoe@localhost
   </div>
   <div
-    className="styles__TableCell___yJCq7 styles__contact-phone___1sA_m u-ellipsis"
+    className="styles__TableCell___yJCq7 styles__contact-phone___1sA_m u-ellipsis u-p-0"
     data-testid="ContactPhone"
   >
     0123456789
   </div>
   <div
-    className="styles__TableCell___yJCq7 styles__contact-cozyurl___3kBp5 u-ellipsis"
+    className="styles__TableCell___yJCq7 styles__contact-cozyurl___3kBp5 u-ellipsis u-p-0"
     data-testid="ContactCozy"
   >
     http://johndoe.mycozy.cloud

package/react/ContactsList/styles.styl

@@ -11,15 +11,12 @@
 
 .contact-phone
     flex 0 0 12rem
-    padding 0
 
 .contact-cozyurl
     flex 0 0 12rem
-    padding 0
 
 .contact-email
     flex-basis 30%
-    padding 0
 
 .contact-myself
     color var(--secondaryTextColor)
@@ -27,7 +24,6 @@
 
 .contact-identity
     flex-basis 30%
-    padding 0
 
     +small-screen()
         flex 1 1 auto

package/react/ContactsListModal/ContactsListContent.jsx

@@ -5,7 +5,9 @@ const { getDisplayName } = models.contact
 
 import ContactsList from '../ContactsList'
 import Spinner from '../Spinner'
+import { useI18n } from '../providers/I18n'
 import EmptyMessage from './EmptyMessage'
+import { withContactsListLocales } from './withContactsListLocales'
 
 const mkFilter = filterStr => contacts => {
   if (!filterStr) {
@@ -33,6 +35,8 @@ const ContactsListContent = ({
   onItemClick,
   dismissAction
 }) => {
+  const { t } = useI18n()
+
   const loading =
     (contacts.fetchStatus === 'loading' ||
       contacts.fetchStatus === 'pending') &&
@@ -40,6 +44,7 @@ const ContactsListContent = ({
 
   const filterContacts = mkFilter(filter)
   const filteredContacts = filterContacts(contacts.data)
+  const selfEmptyMessage = emptyMessage ?? t('emptyContact')
 
   const handleItemClick = contact => {
     if (!onItemClick) {
@@ -52,14 +57,14 @@ const ContactsListContent = ({
 
   if (loading) {
     return (
-      <div className="u-mv-2">
+      <div className="u-mv-2 u-ta-center">
         <Spinner size="xxlarge" />
       </div>
     )
   }
 
   if (filteredContacts.length === 0) {
-    return <EmptyMessage>{emptyMessage}</EmptyMessage>
+    return <EmptyMessage>{selfEmptyMessage}</EmptyMessage>
   }
 
   return (
@@ -67,4 +72,4 @@ const ContactsListContent = ({
   )
 }
 
-export default ContactsListContent
+export default withContactsListLocales(ContactsListContent)

package/react/ContactsListModal/Readme.md

@@ -37,11 +37,8 @@ initialState = { opened: isTesting() }
   </button>
   {state.opened && (
     <ContactsListModal
-      placeholder="Search a contact"
       dismissAction={() => setState({ opened: false })}
       onItemClick={contact => alert(`Clicked on ${contact._id}`)}
-      addContactLabel="Add a contact"
-      emptyMessage="No contact"
     />
   )}
 </DemoProvider>

package/react/ContactsListModal/index.jsx

@@ -14,13 +14,15 @@ import {
 import useRealtime from '../hooks/useRealtime'
 import useEventListener from '../hooks/useEventListener'
 import useBreakpoints from '../providers/Breakpoints'
+import { useI18n } from '../providers/I18n'
 import Button from '../Buttons'
 import PlusIcon from '../Icons/Plus'
 import Icon from '../Icon'
+import TextField from '../TextField'
 import MobileHeader from './MobileHeader'
 import ContactsListContent from './ContactsListContent'
 import AddContactDialog from './AddContact/AddContactDialog'
-import TextField from '../TextField'
+import { withContactsListLocales } from './withContactsListLocales'
 
 import styles from './styles.styl'
 
@@ -45,6 +47,7 @@ const ContactsListModal = ({
   const [filter, setFilter] = useState('')
   const [showAddDialog, setShowAddDialog] = useState(false)
   const { isMobile } = useBreakpoints()
+  const { t } = useI18n()
   const { dialogProps, dialogTitleProps } = useCozyDialog({
     size: 'large',
     open: true,
@@ -68,6 +71,9 @@ const ContactsListModal = ({
     setFilter(e.target.value)
   }
 
+  const selfAddContactLabel = addContactLabel ?? t('addContact')
+  const selfPlaceholder = placeholder ?? t('searchContact')
+
   return (
     <TopAnchoredDialog {...dialogProps}>
       <CozyTheme variant={isMobile ? 'inverted' : 'normal'}>
@@ -82,7 +88,7 @@ const ContactsListModal = ({
         {isMobile ? (
           <MobileHeader
             filter={filter}
-            placeholder={placeholder}
+            placeholder={selfPlaceholder}
             onChange={handleFilterChange}
             onDismiss={dismissAction}
           />
@@ -90,8 +96,8 @@ const ContactsListModal = ({
           <TextField
             variant="outlined"
             type="text"
-            label={placeholder}
-            id={placeholder}
+            label={selfPlaceholder}
+            id="contactsListModal-search-id"
             fullWidth
             value={filter}
             onChange={handleFilterChange}
@@ -106,8 +112,10 @@ const ContactsListModal = ({
               className={isMobile && 'u-mt-1'}
               variant="secondary"
               theme="secondary"
-              label={addContactLabel}
-              startIcon={<Icon icon={PlusIcon} />}
+              label={selfAddContactLabel || <Icon icon={PlusIcon} />}
+              {...(selfAddContactLabel && {
+                startIcon: <Icon icon={PlusIcon} />
+              })}
               onClick={setShowAddDialog}
             />
           </div>
@@ -133,10 +141,13 @@ const ContactsListModal = ({
 
 ContactsListModal.propTypes = {
   onItemClick: PropTypes.func,
-  placeholder: PropTypes.string,
-  addContactLabel: PropTypes.string,
-  emptyMessage: PropTypes.string,
+  /** Label to show in the search input */
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  /** Label to show on the button to add a contact */
+  addContactLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  /** Message to show when no result */
+  emptyMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   dismissAction: PropTypes.func
 }
 
-export default ContactsListModal
+export default withContactsListLocales(ContactsListModal)

package/react/ContactsListModal/locales/en.json

@@ -4,5 +4,8 @@
   "newContact": "New contact",
   "coordinates": "Coordinates",
   "givenName": "Firstname",
-  "familyName": "Lastname"
+  "familyName": "Lastname",
+  "addContact": "Add a contact",
+  "searchContact": "Search a contact",
+  "emptyContact": "No contact"
 }

package/react/ContactsListModal/locales/fr.json

@@ -4,5 +4,8 @@
   "newContact": "Nouveau contact",
   "coordinates": "Coordonnées",
   "givenName": "Prénom",
-  "familyName": "Nom"
+  "familyName": "Nom",
+  "addContact": "Ajouter un contact",
+  "searchContact": "Rechercher un contact",
+  "emptyContact": "Aucun contact"
 }

package/react/Dialog/Readme.md

@@ -9,7 +9,7 @@ will make sure that even your custom Dialogs will behave as CozyDialogs.
 import Dialog, { DialogTitle, DialogActions } from 'cozy-ui/transpiled/react/Dialog'
 import { DialogBackButton, DialogCloseButton, useCozyDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
-import DemoProvider from 'cozy-ui/transpiled/react/providers/DemoProvider'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import Alerter from 'cozy-ui/transpiled/react/deprecated/Alerter'
 
 import Divider from 'cozy-ui/transpiled/react/Divider'

package/react/NestedSelect/BottomSheet.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import cx from 'classnames'
+
+import Icon from '../Icon'
+import IconButton from '../IconButton'
+import ArrowUpIcon from '../Icons/ArrowUp'
+import BottomSheet, { BottomSheetHeader, BottomSheetItem } from '../BottomSheet'
+import Typography from '../Typography'
+import Divider from '../Divider'
+
+import NestedSelect from './NestedSelect'
+
+const HeaderComponent = ({ title, showBack, onClickBack }) => {
+  return (
+    <>
+      <BottomSheetHeader
+        className={cx('u-h-3', { 'u-pl-half u-pr-3': showBack })}
+      >
+        {showBack && (
+          <IconButton onClick={onClickBack}>
+            <Icon icon={ArrowUpIcon} rotate={-90} />
+          </IconButton>
+        )}
+        <Typography className="u-w-100" variant="h6" align="center">
+          {title}
+        </Typography>
+      </BottomSheetHeader>
+      <Divider />
+    </>
+  )
+}
+
+const SelfBottomSheet = props => {
+  return (
+    <BottomSheet backdrop onClose={props.onClose}>
+      <BottomSheetItem disableGutters>
+        <NestedSelect HeaderComponent={HeaderComponent} {...props} />
+      </BottomSheetItem>
+    </BottomSheet>
+  )
+}
+
+export default SelfBottomSheet

package/react/NestedSelect/ItemRow.jsx

@@ -18,7 +18,8 @@ const ItemRow = ({
   isSelected,
   radioPosition,
   isLast,
-  ellipsis
+  ellipsis,
+  noDivider
 }) => {
   const { isDesktop } = useBreakpoints()
 
@@ -76,7 +77,7 @@ const ItemRow = ({
           ? item.action.Component({ item, ...item.action.props })
           : null}
       </ListItem>
-      {!isLast && <Divider />}
+      {noDivider ? null : !isLast && <Divider />}
     </>
   )
 }

package/react/NestedSelect/NestedSelect.jsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import omit from 'lodash/omit'
 
+import List from '../List'
 import Input from '../Input'
 import Typography from '../Typography'
 import ItemRow from './ItemRow'
@@ -81,7 +82,8 @@ class NestedSelect extends Component {
       title,
       transformParentItem,
       radioPosition,
-      ellipsis
+      ellipsis,
+      noDivider
     } = this.props
     const { history, searchValue, searchResult } = this.state
     const current = history[0]
@@ -119,6 +121,7 @@ class NestedSelect extends Component {
               onClick={this.handleClickItem}
               isSelected={isSelectedWithLevel(parentItem)}
               ellipsis={ellipsis}
+              noDivider={noDivider}
             />
           ) : null}
           {searchOptions && level === 0 && (
@@ -149,6 +152,7 @@ class NestedSelect extends Component {
                   isSelected={isSelectedWithLevel(item)}
                   isLast={index === searchResult.length - 1}
                   ellipsis={ellipsis}
+                  noDivider={noDivider}
                 />
               ))
             )
@@ -162,6 +166,7 @@ class NestedSelect extends Component {
                 isSelected={isSelectedWithLevel(item)}
                 isLast={index === children.length - 1}
                 ellipsis={ellipsis}
+                noDivider={noDivider}
               />
             ))
           )}
@@ -172,7 +177,7 @@ class NestedSelect extends Component {
 }
 
 NestedSelect.defaultProps = {
-  ContentComponent: 'div',
+  ContentComponent: List,
   HeaderComponent: null,
   transformParentItem: x => x,
   radioPosition: 'right'
@@ -191,25 +196,16 @@ const ItemPropType = PropTypes.shape({
 })
 
 NestedSelect.propTypes = {
-  /**
-   * Can be set to "right" or "left". Defaults to "right"
-   */
+  /** Can be set to "right" or "left". Defaults to "right" */
   radioPosition: PropTypes.oneOf(['left', 'right']),
 
-  /**
-   * The whole option item is passed to this function when selected
-   */
+  /** The whole option item is passed to this function when selected */
   onSelect: PropTypes.func.isRequired,
 
-  /**
-   * Determines if the row looks selected. The `option` is
-   * passed as an argument.
-   */
+  /** Determines if the row looks selected. The `option` is passed as an argument. */
   isSelected: PropTypes.func.isRequired,
 
-  /**
-   * Options that will be rendered as nested lists of choices
-   */
+  /** Options that will be rendered as nested lists of choices */
   options: PropTypes.shape({
     children: PropTypes.arrayOf(ItemPropType)
   }),
@@ -242,10 +238,11 @@ NestedSelect.propTypes = {
     onSearch: PropTypes.func.isRequired
   }),
 
-  /**
-   * To manage ellipsis on ItemRow
-   */
-  ellipsis: PropTypes.bool
+  /** To manage ellipsis on ItemRow */
+  ellipsis: PropTypes.bool,
+
+  /** Remove dividers after each row */
+  noDivider: PropTypes.bool
 }
 
 export default NestedSelect