cozy-ui 128.7.0 → 128.9.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [128.9.0](https://github.com/cozy/cozy-ui/compare/v128.8.0...v128.9.0) (2025-09-16)
+
+
+### Bug Fixes
+
+* **ContactForm:** Remove button position wasn't correct on mobile ([d96647f](https://github.com/cozy/cozy-ui/commit/d96647f))
+
+
+### Features
+
+* **ContactForm/FieldInput:** Add className prop ([38d48f5](https://github.com/cozy/cozy-ui/commit/38d48f5))
+* **ContactForm:** Add `isSecondary` attribute ([ff1bf5f](https://github.com/cozy/cozy-ui/commit/ff1bf5f))
+* **ContactForm:** Add FieldInputAccordion component ([f285990](https://github.com/cozy/cozy-ui/commit/f285990))
+
+# [128.8.0](https://github.com/cozy/cozy-ui/compare/v128.7.0...v128.8.0) (2025-09-09)
+
+
+### Features
+
+* **NavDesktopDropdown:** introduce NavDesktopDropdown component for enhanced navigation item management ([3cb8a44](https://github.com/cozy/cozy-ui/commit/3cb8a44))
+
 # [128.7.0](https://github.com/cozy/cozy-ui/compare/v128.6.0...v128.7.0) (2025-09-09)
 
 

package/package.json

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

package/react/Contacts/AddModal/ContactForm/FieldInput.jsx

@@ -16,6 +16,7 @@ import { fieldInputAttributesTypes, labelPropTypes } from '../types'
 const FieldInput = ({
   name,
   labelProps,
+  className,
   attributes: { subFields, ...restAttributes },
   contacts,
   error,
@@ -48,6 +49,7 @@ const FieldInput = ({
   return (
     <div
       className={cx(
+        className,
         styles['contact-form-field__wrapper'],
         'u-flex',
         'u-flex-column-s'
@@ -98,6 +100,7 @@ const FieldInput = ({
 
 FieldInput.propTypes = {
   name: PropTypes.string.isRequired,
+  className: PropTypes.string,
   labelProps: labelPropTypes,
   attributes: fieldInputAttributesTypes,
   contacts: PropTypes.shape({

package/react/Contacts/AddModal/ContactForm/FieldInputAccordion.jsx

@@ -0,0 +1,57 @@
+import cx from 'classnames'
+import React, { useState } from 'react'
+
+import FieldInput from './FieldInput'
+import { locales } from './locales'
+import Icon from '../../../Icon'
+import IconButton from '../../../IconButton'
+import DropdownIcon from '../../../Icons/Dropdown'
+import DropupIcon from '../../../Icons/Dropup'
+import { useI18n, useExtendI18n } from '../../../providers/I18n'
+
+const FieldInputAccordion = ({
+  attributes: { name, label, subFields, ...restAttributes },
+  contacts,
+  error,
+  helperText
+}) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const [showExtended, setShowExtended] = useState(false)
+
+  return (
+    <>
+      <div className="u-flex u-flex-items-baseline">
+        <FieldInput
+          attributes={restAttributes}
+          contacts={contacts}
+          error={error}
+          helperText={helperText}
+          name={name}
+          label={t(`Contacts.AddModal.ContactForm.fields.${name}`)}
+          labelProps={label}
+        />
+        <IconButton
+          className="u-ml-half"
+          size="medium"
+          onClick={() => setShowExtended(v => !v)}
+        >
+          <Icon icon={showExtended ? DropupIcon : DropdownIcon} />
+        </IconButton>
+      </div>
+      {subFields.map(({ name, ...attributes }, index) => {
+        return (
+          <FieldInput
+            key={index}
+            className={cx('u-mt-1', { 'u-dn': !showExtended })}
+            attributes={attributes}
+            name={name}
+            label={t(`Contacts.AddModal.ContactForm.fields.${name}`)}
+          />
+        )
+      })}
+    </>
+  )
+}
+
+export default FieldInputAccordion

package/react/Contacts/AddModal/ContactForm/FieldInputArray.jsx

@@ -36,7 +36,7 @@ const FieldInputArray = ({
               return (
                 <div
                   key={key}
-                  className={cx('u-flex u-flex-items-center', {
+                  className={cx('u-flex u-flex-items-baseline', {
                     'u-mt-1': index !== 0
                   })}
                 >

package/react/Contacts/AddModal/ContactForm/FieldInputLayout.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import FieldInput from './FieldInput'
+import FieldInputAccordion from './FieldInputAccordion'
 import FieldInputArray from './FieldInputArray'
 import { fieldsRequired } from './helpers'
 import { locales } from './locales'
@@ -10,8 +11,9 @@ import Icon from '../../../Icon'
 import { useI18n, useExtendI18n } from '../../../providers/I18n'
 
 const FieldInputLayout = ({
-  attributes: { isArray, icon, ...attributes }, // ⚠️ isArray and icon here are removed from attributes to avoid DOM propagration
+  attributes: { layout, icon, isSecondary, ...attributes }, // ⚠️ `layout` `icon` `isSecondary` here are removed from attributes to avoid DOM propagration
   contacts,
+  showSecondaryFields,
   formProps
 }) => {
   useExtendI18n(locales)
@@ -24,20 +26,28 @@ const FieldInputLayout = ({
   return (
     <div
       className={cx('u-flex u-mt-1', {
-        'u-flex-items-center': !isArray,
-        'u-flex-items-baseline': isArray
+        'u-flex-items-center': !layout,
+        'u-flex-items-baseline': !!layout,
+        'u-dn': isSecondary && !showSecondaryFields
       })}
     >
       <div className="u-w-2-half">
         {icon && <Icon icon={icon} color="var(--iconTextColor)" />}
       </div>
       <div className="u-w-100">
-        {isArray ? (
+        {layout === 'array' ? (
           <FieldInputArray
             attributes={attributes}
             contacts={contacts}
             formProps={formProps}
           />
+        ) : layout === 'accordion' ? (
+          <FieldInputAccordion
+            attributes={attributes}
+            contacts={contacts}
+            error={isError}
+            helperText={isError ? errors[name] : null}
+          />
         ) : (
           <FieldInput
             attributes={restAttributes}

package/react/Contacts/AddModal/ContactForm/contactToFormValues.js

@@ -8,8 +8,8 @@ import { makeItemLabel, makeRelatedContact, movePrimaryToHead } from './helpers'
 const contactToFormValues = (contact, t) => {
   // initialize the form values, required so that array fields start with at least one editable field
   const initialFieldValues = fields.reduce(
-    (initialValues, { name, isArray }) => {
-      initialValues[name] = isArray ? [undefined] : undefined
+    (initialValues, { name, layout }) => {
+      initialValues[name] = layout === 'array' ? [undefined] : undefined
       return initialValues
     },
     {}

package/react/Contacts/AddModal/ContactForm/fieldsConfig.jsx

@@ -35,37 +35,44 @@ export const fields = [
   {
     name: 'givenName',
     icon: null,
-    type: 'text'
-  },
-  {
-    name: 'additionalName',
-    icon: null,
-    type: 'text'
+    type: 'text',
+    layout: 'accordion',
+    subFields: [
+      {
+        name: 'additionalName',
+        icon: null,
+        type: 'text'
+      },
+      {
+        name: 'surname',
+        icon: null,
+        type: 'text'
+      }
+    ]
   },
   {
     name: 'familyName',
     icon: null,
     type: 'text'
   },
-  {
-    name: 'surname',
-    icon: null,
-    type: 'text'
-  },
   {
     name: 'company',
     icon: CompanyIcon,
-    type: 'text'
-  },
-  {
-    name: 'jobTitle',
-    icon: null,
-    type: 'text'
+    type: 'text',
+    layout: 'accordion',
+    subFields: [
+      {
+        name: 'jobTitle',
+        icon: null,
+        type: 'text'
+      }
+    ]
   },
   {
     name: 'phone',
     icon: TelephoneIcon,
     type: 'tel',
+    layout: 'array',
     label: {
       name: 'phoneLabel',
       select: true,
@@ -103,13 +110,13 @@ export const fields = [
           label: 'Contacts.AddModal.ContactForm.label.phone.fax-work'
         }
       ]
-    },
-    isArray: true
+    }
   },
   {
     name: 'email',
     icon: EmailIcon,
     type: 'email',
+    layout: 'array',
     label: {
       name: 'emailLabel',
       select: true,
@@ -131,13 +138,13 @@ export const fields = [
           label: 'Contacts.AddModal.ContactForm.label.work'
         }
       ]
-    },
-    isArray: true
+    }
   },
   {
     name: 'address',
     icon: LocationIcon,
     type: 'text',
+    layout: 'array',
     InputProps: {
       readOnly: true
     },
@@ -224,13 +231,19 @@ export const fields = [
           label: 'Contacts.AddModal.ContactForm.label.address.work'
         }
       ]
-    },
-    isArray: true
+    }
+  },
+  {
+    name: 'note',
+    icon: CommentIcon,
+    type: 'text',
+    multiline: true
   },
   {
     name: 'cozy',
     icon: CloudIcon,
     type: 'url',
+    isSecondary: true,
     label: {
       name: 'cozyLabel',
       select: true,
@@ -258,16 +271,20 @@ export const fields = [
     name: 'birthday',
     icon: CalendarIcon,
     type: 'date',
+    isSecondary: true,
     InputLabelProps: { shrink: true }
   },
   {
     name: 'birthplace',
     icon: null,
-    type: 'text'
+    type: 'text',
+    isSecondary: true
   },
   {
     name: 'relatedContact',
     icon: RelationshipIcon,
+    layout: 'array',
+    isSecondary: true,
     InputProps: {
       readOnly: true,
       endAdornment: (
@@ -329,13 +346,6 @@ export const fields = [
           label: 'Contacts.AddModal.ContactForm.label.relationship.recipient'
         }
       ]
-    },
-    isArray: true
-  },
-  {
-    name: 'note',
-    icon: CommentIcon,
-    type: 'text',
-    multiline: true
+    }
   }
 ]

package/react/Contacts/AddModal/ContactForm/index.jsx

@@ -1,5 +1,5 @@
 import arrayMutators from 'final-form-arrays'
-import React from 'react'
+import React, { useState } from 'react'
 import { Form } from 'react-final-form'
 
 import { getHasManyItems } from 'cozy-client/dist/associations/HasMany'
@@ -10,6 +10,7 @@ import { fields } from './fieldsConfig'
 import formValuesToContact from './formValuesToContact'
 import { validateFields } from './helpers'
 import { locales } from './locales'
+import Button from '../../../Buttons'
 import { useI18n, useExtendI18n } from '../../../providers/I18n'
 // import { fullContactPropTypes } from '../../ContactPropTypes' // !!
 
@@ -36,6 +37,7 @@ export function getSubmitContactForm() {
  * @returns
  */
 const ContactForm = ({ contact, onSubmit, contacts }) => {
+  const [showSecondaryFields, setShowSecondaryFields] = useState(false)
   useExtendI18n(locales)
   const { t } = useI18n()
 
@@ -60,6 +62,7 @@ const ContactForm = ({ contact, onSubmit, contacts }) => {
                 key={index}
                 attributes={attributes}
                 contacts={contacts}
+                showSecondaryFields={showSecondaryFields}
                 formProps={{
                   valid,
                   submitFailed,
@@ -67,6 +70,16 @@ const ContactForm = ({ contact, onSubmit, contacts }) => {
                 }}
               />
             ))}
+            {!showSecondaryFields && (
+              <div>
+                <Button
+                  className="u-db u-ml-2 u-mt-1"
+                  variant="text"
+                  label={t('Contacts.AddModal.ContactForm.other-fields')}
+                  onClick={() => setShowSecondaryFields(true)}
+                />
+              </div>
+            )}
           </form>
         )
       }}

package/react/Contacts/AddModal/ContactForm/locales/en.json

@@ -6,6 +6,7 @@
           "man": "Man",
           "woman": "Woman"
         },
+        "other-fields": "Other fields",
         "fields": {
           "gender": "Civility",
           "givenName": "Firstname",

package/react/Contacts/AddModal/ContactForm/locales/fr.json

@@ -6,6 +6,7 @@
           "man": "Homme",
           "woman": "Femme"
         },
+        "other-fields": "Autres champs",
         "fields": {
           "gender": "Civilité",
           "givenName": "Prénom",

package/react/Contacts/AddModal/types.js

@@ -22,7 +22,7 @@ export const fieldInputAttributesTypes = PropTypes.shape({
   icon: iconPropType,
   type: PropTypes.string,
   label: labelPropTypes,
-  isArray: PropTypes.bool,
+  layout: PropTypes.string,
   subFields: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string.isRequired,

package/react/Layout/Layout.md

@@ -4,6 +4,7 @@ The Layout component brings a strong context for apps with any screen resolution
 * `<Content />` is the main content or your app.
 * ⚠️ Secondary `<NavItem />` are not visible on mobile and tablets
 * `<NavDesktopLimiter />` is a component that allows you to limit the number of visible items in a list and toggle between showing a limited view and displaying all items.
+* `<NavDesktopDropdown />` is a component that allows you to show / hide the items in a list when the number of items exceeds a defined limit
 
 ### NavDesktopLimiter
 
@@ -16,17 +17,24 @@ It can be used to wrap any list of React elements, automatically providing funct
 * **children**: React.ReactNode (required) - The list items or elements that **NavDesktopLimiter** will manage.
 * **max**: number (optional) - The maximum number of items to display initially. Default is **5**.
 
-**Features**:
+### NavDesktopDropdown
 
-* **Toggle Visibility**: Allows users to toggle between seeing the limited view and the full list of items.
-* **Customizable Limit**: Users can specify how many items should be shown in the limited view.
-* **Ease of Use**: Seamlessly integrates with existing list components from cozy-ui or standard JSX elements.
+The **NavDesktopDropdown** component is designed to manage the display of nav items efficiently, allowing users to toggle between showing a collapsed view and displaying all items. This component enhances the UI/UX by providing a clean and intuitive way to handle dropdowns with many items.
+
+It can be used to wrap any list of React elements, automatically providing functionality to limit the number of displayed elements based on the `limit` prop (defaulting to **5**). Users can toggle the dropdown to show or hide the items as needed.
+
+**Props**:
+
+* **label**: string (required) - The label for the dropdown.
+* **children**: React.ReactNode (required) - The list items or elements that **NavDesktopDropdown** will manage.
+* **defaultOpen**: boolean (optional) - Determines whether the dropdown is open by default. Default is **true**.
+* **limit**: number (optional) - The maximum number of items to display before enabling collapsing. Default is **5**.
 
 ```jsx
 import { useState } from 'react'
 import { Layout, Main, Content } from 'cozy-ui/transpiled/react/Layout'
 import Sidebar from 'cozy-ui/transpiled/react/Sidebar'
-import Nav, { NavItem, NavIcon, NavText, genNavLink, NavDesktopLimiter } from 'cozy-ui/transpiled/react/Nav'
+import Nav, { NavItem, NavIcon, NavText, genNavLink, NavDesktopLimiter, NavDesktopDropdown } from 'cozy-ui/transpiled/react/Nav'
 import cx from 'classnames'
 import isEqual from 'lodash/isEqual'
 import Icon from 'cozy-ui/transpiled/react/Icon'
@@ -83,7 +91,7 @@ const useStyles = makeStyles(theme => ({
   }
 }))
 
-const initialVariants = [{ monoColumn: false, withTopBar: true, longContent: true }]
+const initialVariants = [{ monoColumn: false, withTopBar: true, longContent: true, moreThanMax: true }]
 const [active, setActive] = useState(['Section 1', 'Subsection 1'])
 const [showDialog, setShowDialog] = useState(isTesting() ? true : false)
 const styles = useStyles()
@@ -130,6 +138,17 @@ const SideBar = ({ variant }) => {
             <NavText>Section 3</NavText>
           </NavLink>
         </NavItem>
+        <NavDesktopDropdown label="Section 4" max={5}>
+        {
+          Array.from(Array(variant.moreThanMax ? 6 : 3).keys()).map(i => (
+            <NavItem secondary key={i}>
+              <NavLink>
+                <NavText>Subsection {i}</NavText>
+              </NavLink>
+            </NavItem>
+          ))
+        }
+        </NavDesktopDropdown>
       </Nav>
     </Sidebar>
   )

package/react/Nav/index.jsx

@@ -3,9 +3,11 @@ import React, { Children, isValidElement, useState, forwardRef } from 'react'
 
 import withNavLocales from './locales/withNavLocales'
 import styles from './styles.styl'
+import DropdownText from '../DropdownText'
 import Icon from '../Icon'
 import BottomIcon from '../Icons/Bottom'
 import TopIcon from '../Icons/Top'
+import ListItem from '../ListItem'
 import useBreakpoints from '../providers/Breakpoints'
 import { useI18n } from '../providers/I18n'
 
@@ -116,5 +118,46 @@ const _NavDesktopLimiter = ({ children, max = 5 }) => {
 
 export const NavDesktopLimiter = withNavLocales(_NavDesktopLimiter)
 
+export const NavDesktopDropdown = ({
+  label,
+  children,
+  defaultOpen = true,
+  limit = 5
+}) => {
+  const { isDesktop } = useBreakpoints()
+  const [open, setOpen] = useState(defaultOpen)
+  const isActivated =
+    Children.toArray(children).filter(isValidElement).length > limit
+
+  const innerIconProps = {
+    rotate: open ? 0 : -90,
+    ...(!isActivated && { className: 'u-dn' })
+  }
+
+  if (!isDesktop) return null
+
+  return (
+    <>
+      <ListItem size="small" className={isActivated ? 'u-c-pointer' : ''}>
+        <DropdownText
+          variant="subtitle2"
+          color="textSecondary"
+          innerIconProps={innerIconProps}
+          onClick={() => {
+            if (!isActivated) {
+              return
+            }
+            setOpen(!open)
+          }}
+        >
+          {label}
+        </DropdownText>
+      </ListItem>
+
+      {open && <>{children}</>}
+    </>
+  )
+}
+
 export default Nav
 Nav.NavItem = NavItem

package/transpiled/react/Contacts/AddModal/ContactAddressDialog/index.d.ts

@@ -24,7 +24,7 @@ declare namespace ContactAddressModal {
                     defaultLabel: PropTypes.Requireable<string>;
                 }>>;
             }>>;
-            isArray: PropTypes.Requireable<boolean>;
+            layout: PropTypes.Requireable<string>;
             subFields: PropTypes.Requireable<(PropTypes.InferProps<{
                 name: PropTypes.Validator<string>;
                 icon: PropTypes.Requireable<string>;

package/transpiled/react/Contacts/AddModal/ContactForm/FieldInput.d.ts

@@ -1,7 +1,8 @@
 export default FieldInput;
-declare function FieldInput({ name, labelProps, attributes: { subFields, ...restAttributes }, contacts, error, helperText, label, required }: {
+declare function FieldInput({ name, labelProps, className, attributes: { subFields, ...restAttributes }, contacts, error, helperText, label, required }: {
     name: any;
     labelProps: any;
+    className: any;
     attributes: {
         [x: string]: any;
         subFields: any;
@@ -15,6 +16,7 @@ declare function FieldInput({ name, labelProps, attributes: { subFields, ...rest
 declare namespace FieldInput {
     namespace propTypes {
         export const name: PropTypes.Validator<string>;
+        export const className: PropTypes.Requireable<string>;
         export { labelPropTypes as labelProps };
         export { fieldInputAttributesTypes as attributes };
         export const contacts: PropTypes.Requireable<PropTypes.InferProps<{

package/transpiled/react/Contacts/AddModal/ContactForm/FieldInput.js

@@ -20,6 +20,7 @@ import { fieldInputAttributesTypes, labelPropTypes } from "cozy-ui/transpiled/re
 var FieldInput = function FieldInput(_ref) {
   var name = _ref.name,
       labelProps = _ref.labelProps,
+      className = _ref.className,
       _ref$attributes = _ref.attributes,
       subFields = _ref$attributes.subFields,
       restAttributes = _objectWithoutProperties(_ref$attributes, _excluded),
@@ -69,7 +70,7 @@ var FieldInput = function FieldInput(_ref) {
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: cx(styles['contact-form-field__wrapper'], 'u-flex', 'u-flex-column-s')
+    className: cx(className, styles['contact-form-field__wrapper'], 'u-flex', 'u-flex-column-s')
   }, /*#__PURE__*/React.createElement(Field, {
     required: required,
     error: error,
@@ -109,6 +110,7 @@ var FieldInput = function FieldInput(_ref) {
 
 FieldInput.propTypes = {
   name: PropTypes.string.isRequired,
+  className: PropTypes.string,
   labelProps: labelPropTypes,
   attributes: fieldInputAttributesTypes,
   contacts: PropTypes.shape({

package/transpiled/react/Contacts/AddModal/ContactForm/FieldInputAccordion.d.ts

@@ -0,0 +1,12 @@
+export default FieldInputAccordion;
+declare function FieldInputAccordion({ attributes: { name, label, subFields, ...restAttributes }, contacts, error, helperText }: {
+    attributes: {
+        [x: string]: any;
+        name: any;
+        label: any;
+        subFields: any;
+    };
+    contacts: any;
+    error: any;
+    helperText: any;
+}): JSX.Element;

package/transpiled/react/Contacts/AddModal/ContactForm/FieldInputAccordion.js

@@ -0,0 +1,71 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["name", "label", "subFields"],
+    _excluded2 = ["name"];
+import cx from 'classnames';
+import React, { useState } from 'react';
+import FieldInput from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/FieldInput";
+import { locales } from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/locales";
+import Icon from "cozy-ui/transpiled/react/Icon";
+import IconButton from "cozy-ui/transpiled/react/IconButton";
+import DropdownIcon from "cozy-ui/transpiled/react/Icons/Dropdown";
+import DropupIcon from "cozy-ui/transpiled/react/Icons/Dropup";
+import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n";
+
+var FieldInputAccordion = function FieldInputAccordion(_ref) {
+  var _ref$attributes = _ref.attributes,
+      name = _ref$attributes.name,
+      label = _ref$attributes.label,
+      subFields = _ref$attributes.subFields,
+      restAttributes = _objectWithoutProperties(_ref$attributes, _excluded),
+      contacts = _ref.contacts,
+      error = _ref.error,
+      helperText = _ref.helperText;
+
+  useExtendI18n(locales);
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showExtended = _useState2[0],
+      setShowExtended = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "u-flex u-flex-items-baseline"
+  }, /*#__PURE__*/React.createElement(FieldInput, {
+    attributes: restAttributes,
+    contacts: contacts,
+    error: error,
+    helperText: helperText,
+    name: name,
+    label: t("Contacts.AddModal.ContactForm.fields.".concat(name)),
+    labelProps: label
+  }), /*#__PURE__*/React.createElement(IconButton, {
+    className: "u-ml-half",
+    size: "medium",
+    onClick: function onClick() {
+      return setShowExtended(function (v) {
+        return !v;
+      });
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: showExtended ? DropupIcon : DropdownIcon
+  }))), subFields.map(function (_ref2, index) {
+    var name = _ref2.name,
+        attributes = _objectWithoutProperties(_ref2, _excluded2);
+
+    return /*#__PURE__*/React.createElement(FieldInput, {
+      key: index,
+      className: cx('u-mt-1', {
+        'u-dn': !showExtended
+      }),
+      attributes: attributes,
+      name: name,
+      label: t("Contacts.AddModal.ContactForm.fields.".concat(name))
+    });
+  }));
+};
+
+export default FieldInputAccordion;

package/transpiled/react/Contacts/AddModal/ContactForm/FieldInputArray.js

@@ -43,7 +43,7 @@ var FieldInputArray = function FieldInputArray(_ref) {
       var isError = fieldsRequired.includes(inputName) && !valid && submitFailed;
       return /*#__PURE__*/React.createElement("div", {
         key: key,
-        className: cx('u-flex u-flex-items-center', {
+        className: cx('u-flex u-flex-items-baseline', {
           'u-mt-1': index !== 0
         })
       }, /*#__PURE__*/React.createElement(FieldInput, {

package/transpiled/react/Contacts/AddModal/ContactForm/FieldInputLayout.d.ts

@@ -1,11 +1,13 @@
 export default FieldInputLayout;
-declare function FieldInputLayout({ attributes: { isArray, icon, ...attributes }, contacts, formProps }: {
+declare function FieldInputLayout({ attributes: { layout, icon, isSecondary, ...attributes }, contacts, showSecondaryFields, formProps }: {
     attributes: {
         [x: string]: any;
-        isArray: any;
+        layout: any;
         icon: any;
+        isSecondary: any;
     };
     contacts: any;
+    showSecondaryFields: any;
     formProps: any;
 }): JSX.Element;
 declare namespace FieldInputLayout {

package/transpiled/react/Contacts/AddModal/ContactForm/FieldInputLayout.js

@@ -1,10 +1,11 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isArray", "icon"],
+var _excluded = ["layout", "icon", "isSecondary"],
     _excluded2 = ["name", "label"];
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import FieldInput from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/FieldInput";
+import FieldInputAccordion from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/FieldInputAccordion";
 import FieldInputArray from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/FieldInputArray";
 import { fieldsRequired } from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/helpers";
 import { locales } from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/locales";
@@ -13,10 +14,12 @@ import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n"
 
 var FieldInputLayout = function FieldInputLayout(_ref) {
   var _ref$attributes = _ref.attributes,
-      isArray = _ref$attributes.isArray,
+      layout = _ref$attributes.layout,
       icon = _ref$attributes.icon,
+      isSecondary = _ref$attributes.isSecondary,
       attributes = _objectWithoutProperties(_ref$attributes, _excluded),
       contacts = _ref.contacts,
+      showSecondaryFields = _ref.showSecondaryFields,
       formProps = _ref.formProps;
 
   useExtendI18n(locales);
@@ -35,8 +38,9 @@ var FieldInputLayout = function FieldInputLayout(_ref) {
   var isError = fieldsRequired.includes(name) && !valid && submitFailed;
   return /*#__PURE__*/React.createElement("div", {
     className: cx('u-flex u-mt-1', {
-      'u-flex-items-center': !isArray,
-      'u-flex-items-baseline': isArray
+      'u-flex-items-center': !layout,
+      'u-flex-items-baseline': !!layout,
+      'u-dn': isSecondary && !showSecondaryFields
     })
   }, /*#__PURE__*/React.createElement("div", {
     className: "u-w-2-half"
@@ -45,10 +49,15 @@ var FieldInputLayout = function FieldInputLayout(_ref) {
     color: "var(--iconTextColor)"
   })), /*#__PURE__*/React.createElement("div", {
     className: "u-w-100"
-  }, isArray ? /*#__PURE__*/React.createElement(FieldInputArray, {
+  }, layout === 'array' ? /*#__PURE__*/React.createElement(FieldInputArray, {
     attributes: attributes,
     contacts: contacts,
     formProps: formProps
+  }) : layout === 'accordion' ? /*#__PURE__*/React.createElement(FieldInputAccordion, {
+    attributes: attributes,
+    contacts: contacts,
+    error: isError,
+    helperText: isError ? errors[name] : null
   }) : /*#__PURE__*/React.createElement(FieldInput, {
     attributes: restAttributes,
     contacts: contacts,

package/transpiled/react/Contacts/AddModal/ContactForm/contactToFormValues.js

@@ -7,8 +7,8 @@ var contactToFormValues = function contactToFormValues(contact, t) {
   // initialize the form values, required so that array fields start with at least one editable field
   var initialFieldValues = fields.reduce(function (initialValues, _ref) {
     var name = _ref.name,
-        isArray = _ref.isArray;
-    initialValues[name] = isArray ? [undefined] : undefined;
+        layout = _ref.layout;
+    initialValues[name] = layout === 'array' ? [undefined] : undefined;
     return initialValues;
   }, {});
 

package/transpiled/react/Contacts/AddModal/ContactForm/fieldsConfig.js

@@ -29,31 +29,36 @@ export var fields = [{
 }, {
   name: 'givenName',
   icon: null,
-  type: 'text'
-}, {
-  name: 'additionalName',
-  icon: null,
-  type: 'text'
+  type: 'text',
+  layout: 'accordion',
+  subFields: [{
+    name: 'additionalName',
+    icon: null,
+    type: 'text'
+  }, {
+    name: 'surname',
+    icon: null,
+    type: 'text'
+  }]
 }, {
   name: 'familyName',
   icon: null,
   type: 'text'
-}, {
-  name: 'surname',
-  icon: null,
-  type: 'text'
 }, {
   name: 'company',
   icon: CompanyIcon,
-  type: 'text'
-}, {
-  name: 'jobTitle',
-  icon: null,
-  type: 'text'
+  type: 'text',
+  layout: 'accordion',
+  subFields: [{
+    name: 'jobTitle',
+    icon: null,
+    type: 'text'
+  }]
 }, {
   name: 'phone',
   icon: TelephoneIcon,
   type: 'tel',
+  layout: 'array',
   label: {
     name: 'phoneLabel',
     select: true,
@@ -83,12 +88,12 @@ export var fields = [{
       value: '{"type":"fax","label":"work"}',
       label: 'Contacts.AddModal.ContactForm.label.phone.fax-work'
     }]
-  },
-  isArray: true
+  }
 }, {
   name: 'email',
   icon: EmailIcon,
   type: 'email',
+  layout: 'array',
   label: {
     name: 'emailLabel',
     select: true,
@@ -106,12 +111,12 @@ export var fields = [{
       value: '{"label":"work"}',
       label: 'Contacts.AddModal.ContactForm.label.work'
     }]
-  },
-  isArray: true
+  }
 }, {
   name: 'address',
   icon: LocationIcon,
   type: 'text',
+  layout: 'array',
   InputProps: {
     readOnly: true
   },
@@ -181,12 +186,17 @@ export var fields = [{
       value: '{"label":"work"}',
       label: 'Contacts.AddModal.ContactForm.label.address.work'
     }]
-  },
-  isArray: true
+  }
+}, {
+  name: 'note',
+  icon: CommentIcon,
+  type: 'text',
+  multiline: true
 }, {
   name: 'cozy',
   icon: CloudIcon,
   type: 'url',
+  isSecondary: true,
   label: {
     name: 'cozyLabel',
     select: true,
@@ -209,16 +219,20 @@ export var fields = [{
   name: 'birthday',
   icon: CalendarIcon,
   type: 'date',
+  isSecondary: true,
   InputLabelProps: {
     shrink: true
   }
 }, {
   name: 'birthplace',
   icon: null,
-  type: 'text'
+  type: 'text',
+  isSecondary: true
 }, {
   name: 'relatedContact',
   icon: RelationshipIcon,
+  layout: 'array',
+  isSecondary: true,
   InputProps: {
     readOnly: true,
     endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
@@ -268,11 +282,5 @@ export var fields = [{
       value: '{"type":"recipient"}',
       label: 'Contacts.AddModal.ContactForm.label.relationship.recipient'
     }]
-  },
-  isArray: true
-}, {
-  name: 'note',
-  icon: CommentIcon,
-  type: 'text',
-  multiline: true
+  }
 }];

package/transpiled/react/Contacts/AddModal/ContactForm/index.js

@@ -1,11 +1,12 @@
 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 arrayMutators from 'final-form-arrays';
-import React from 'react';
+import React, { useState } from 'react';
 import { Form } from 'react-final-form';
 import { getHasManyItems } from 'cozy-client/dist/associations/HasMany';
 import FieldInputLayout from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/FieldInputLayout";
@@ -14,6 +15,7 @@ import { fields } from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/f
 import formValuesToContact from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/formValuesToContact";
 import { validateFields } from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/helpers";
 import { locales } from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/locales";
+import Button from "cozy-ui/transpiled/react/Buttons";
 import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n"; // import { fullContactPropTypes } from '../../ContactPropTypes' // !!
 // this variable will be set in the form's render prop
 // and used by the submit button in ContactFormModal
@@ -42,6 +44,12 @@ var ContactForm = function ContactForm(_ref) {
   var contact = _ref.contact,
       _onSubmit = _ref.onSubmit,
       contacts = _ref.contacts;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showSecondaryFields = _useState2[0],
+      setShowSecondaryFields = _useState2[1];
+
   useExtendI18n(locales);
 
   var _useI18n = useI18n(),
@@ -75,13 +83,21 @@ var ContactForm = function ContactForm(_ref) {
           key: index,
           attributes: attributes,
           contacts: contacts,
+          showSecondaryFields: showSecondaryFields,
           formProps: {
             valid: valid,
             submitFailed: submitFailed,
             errors: errors
           }
         });
-      }));
+      }), !showSecondaryFields && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+        className: "u-db u-ml-2 u-mt-1",
+        variant: "text",
+        label: t('Contacts.AddModal.ContactForm.other-fields'),
+        onClick: function onClick() {
+          return setShowSecondaryFields(true);
+        }
+      })));
     }
   });
 }; // Used to avoid unnecessary multiple rendering of ContactForm when creating a new contact in another way.

package/transpiled/react/Contacts/AddModal/ContactForm/locales/index.js

@@ -6,6 +6,7 @@ var en = {
           man: "Man",
           woman: "Woman"
         },
+        "other-fields": "Other fields",
         fields: {
           gender: "Civility",
           givenName: "Firstname",
@@ -79,6 +80,7 @@ var fr = {
           man: "Homme",
           woman: "Femme"
         },
+        "other-fields": "Autres champs",
         fields: {
           gender: "Civilit\xE9",
           givenName: "Pr\xE9nom",

package/transpiled/react/Contacts/AddModal/types.d.ts

@@ -26,7 +26,7 @@ export const fieldInputAttributesTypes: PropTypes.Requireable<PropTypes.InferPro
             defaultLabel: PropTypes.Requireable<string>;
         }>>;
     }>>;
-    isArray: PropTypes.Requireable<boolean>;
+    layout: PropTypes.Requireable<string>;
     subFields: PropTypes.Requireable<(PropTypes.InferProps<{
         name: PropTypes.Validator<string>;
         icon: PropTypes.Requireable<string>;

package/transpiled/react/Contacts/AddModal/types.js

@@ -17,7 +17,7 @@ export var fieldInputAttributesTypes = PropTypes.shape({
   icon: iconPropType,
   type: PropTypes.string,
   label: labelPropTypes,
-  isArray: PropTypes.bool,
+  layout: PropTypes.string,
   subFields: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string.isRequired,
     icon: PropTypes.string,

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

@@ -23,6 +23,12 @@ export function NavIcon({ className, icon }: {
     icon: any;
 }): JSX.Element;
 export const NavDesktopLimiter: any;
+export function NavDesktopDropdown({ label, children, defaultOpen, limit }: {
+    label: any;
+    children: any;
+    defaultOpen?: boolean | undefined;
+    limit?: number | undefined;
+}): JSX.Element | null;
 export default Nav;
 import React from "react";
 declare function Nav({ className, children }: {

package/transpiled/react/Nav/index.js

@@ -1,8 +1,14 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "children", "secondary"],
     _excluded2 = ["to", "children"];
+
+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 React, { Children, isValidElement, useState, forwardRef } from 'react';
 import withNavLocales from "cozy-ui/transpiled/react/Nav/locales/withNavLocales";
@@ -16,9 +22,11 @@ var styles = {
   "c-nav-item-secondary": "styles__c-nav-item-secondary___k14rf",
   "c-nav-limiter": "styles__c-nav-limiter___3oxQU"
 };
+import DropdownText from "cozy-ui/transpiled/react/DropdownText";
 import Icon from "cozy-ui/transpiled/react/Icon";
 import BottomIcon from "cozy-ui/transpiled/react/Icons/Bottom";
 import TopIcon from "cozy-ui/transpiled/react/Icons/Top";
+import ListItem from "cozy-ui/transpiled/react/ListItem";
 import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
 import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
 export var NavItem = function NavItem(_ref) {
@@ -136,5 +144,46 @@ var _NavDesktopLimiter = function _NavDesktopLimiter(_ref7) {
 };
 
 export var NavDesktopLimiter = withNavLocales(_NavDesktopLimiter);
+export var NavDesktopDropdown = function NavDesktopDropdown(_ref8) {
+  var label = _ref8.label,
+      children = _ref8.children,
+      _ref8$defaultOpen = _ref8.defaultOpen,
+      defaultOpen = _ref8$defaultOpen === void 0 ? true : _ref8$defaultOpen,
+      _ref8$limit = _ref8.limit,
+      limit = _ref8$limit === void 0 ? 5 : _ref8$limit;
+
+  var _useBreakpoints2 = useBreakpoints(),
+      isDesktop = _useBreakpoints2.isDesktop;
+
+  var _useState3 = useState(defaultOpen),
+      _useState4 = _slicedToArray(_useState3, 2),
+      open = _useState4[0],
+      setOpen = _useState4[1];
+
+  var isActivated = Children.toArray(children).filter(isValidElement).length > limit;
+
+  var innerIconProps = _objectSpread({
+    rotate: open ? 0 : -90
+  }, !isActivated && {
+    className: 'u-dn'
+  });
+
+  if (!isDesktop) return null;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, {
+    size: "small",
+    className: isActivated ? 'u-c-pointer' : ''
+  }, /*#__PURE__*/React.createElement(DropdownText, {
+    variant: "subtitle2",
+    color: "textSecondary",
+    innerIconProps: innerIconProps,
+    onClick: function onClick() {
+      if (!isActivated) {
+        return;
+      }
+
+      setOpen(!open);
+    }
+  }, label)), open && /*#__PURE__*/React.createElement(React.Fragment, null, children));
+};
 export default Nav;
 Nav.NavItem = NavItem;

package/transpiled/react/deprecated/Menus/index.d.ts

@@ -12,11 +12,11 @@ declare var _default: React.ComponentType<Pick<Pick<PropTypes.InferProps<{
     component: PropTypes.Requireable<PropTypes.ReactElementLike>;
     /** placement for the popover */
     placement: PropTypes.Requireable<string>;
-}>, "disabled" | "placement" | "component">> & Partial<Pick<{
+}>, "disabled" | "component" | "placement">> & Partial<Pick<{
     disabled: boolean;
     component: null;
     placement: string;
-}, never>>, "disabled" | "placement" | "component"> & import("@material-ui/styles/withStyles/withStyles").StyledComponentProps<"root" | "paper">>;
+}, never>>, "disabled" | "component" | "placement"> & import("@material-ui/styles/withStyles/withStyles").StyledComponentProps<"root" | "paper">>;
 export default _default;
 export { MenuButton };
 import PropTypes from "prop-types";