cozy-ui 130.11.0 → 131.0.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [131.0.0](https://github.com/cozy/cozy-ui/compare/v130.11.1...v131.0.0) (2025-10-22)
+
+
+### Features
+
+* Add `Input` and `InputLabel` from Mui ([ee37ba9](https://github.com/cozy/cozy-ui/commit/ee37ba9))
+* **Input:** Move it in `legacy` folder ([2995365](https://github.com/cozy/cozy-ui/commit/2995365))
+* **TextField:** Add multiple select ([8629645](https://github.com/cozy/cozy-ui/commit/8629645))
+
+
+### BREAKING CHANGES
+
+* **Input:** Input component has been moved. You must replace `cozy-ui/transpiled/react/Input` by `cozy-ui/transpiled/react/legacy/Input`
+
+## [130.11.1](https://github.com/cozy/cozy-ui/compare/v130.11.0...v130.11.1) (2025-10-21)
+
+
+### Bug Fixes
+
+* **ShortcutDialog:** Change "edit button" wording ([247ef1a](https://github.com/cozy/cozy-ui/commit/247ef1a))
+
 # [130.11.0](https://github.com/cozy/cozy-ui/compare/v130.10.0...v130.11.0) (2025-10-21)
 
 

package/package.json

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

package/react/Contacts/GroupsSelect/GroupCreation.jsx

@@ -4,7 +4,7 @@ import React, { Component } from 'react'
 import styles from './styles.styl'
 import Icon from '../../Icon'
 import PlusIcon from '../../Icons/Plus'
-import Input from '../../Input'
+import Input from '../../legacy/Input'
 import { translate } from '../../providers/I18n'
 
 const normalizeGroupData = name => {

package/react/Contacts/GroupsSelect/SelectBox/EditGroupName.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React, { useRef } from 'react'
 
-import Input from '../../../Input'
+import Input from '../../../legacy/Input'
 
 const EditGroupName = ({
   groupId,

package/react/CozyDialogs/SpecificDialogs/locales/en.json

@@ -31,7 +31,7 @@
     "url": "URL",
     "cancel": "Cancel",
     "create": "Create",
-    "edit": "Edit",
+    "edit": "Save",
     "created": "The shortcut has been created",
     "edited": "The shortcut has been modified",
     "errored": "An error occurred",

package/react/CozyDialogs/SpecificDialogs/locales/fr.json

@@ -31,7 +31,7 @@
     "url": "URL",
     "cancel": "Annuler",
     "create": "Créer",
-    "edit": "Modifier",
+    "edit": "Sauvegarder",
     "created": "Le raccourci a été créé",
     "edited": "Le raccourci a été modifié",
     "errored": "Une erreur s'est produite",

package/react/CozyDialogs/SpecificDialogs/locales/ru.json

@@ -31,7 +31,7 @@
     "url": "URL",
     "cancel": "Отменить",
     "create": "Создать",
-    "edit": "Изменить",
+    "edit": "Сохранить",
     "created": "Ярлык был создан",
     "edited": "Ярлык был изменен",
     "errored": "Произошла ошибка",

package/react/CozyDialogs/SpecificDialogs/locales/vi.json

@@ -31,7 +31,7 @@
     "url": "URL",
     "cancel": "Hủy",
     "create": "Tạo",
-    "edit": "Chỉnh sửa",
+    "edit": "Lưu",
     "created": "Lối tắt đã được tạo",
     "edited": "Lối tắt đã được chỉnh sửa",
     "errored": "Đã xảy ra lỗi",

package/react/Field/index.jsx

@@ -5,7 +5,7 @@ import React, { useState } from 'react'
 
 import styles from './styles.styl'
 import ContactPicker from '../ContactPicker'
-import Input from '../Input'
+import Input from '../legacy/Input'
 import Label from '../Label'
 import labelStyles from '../Label/styles.styl'
 import SelectBox from '../SelectBox'

package/react/Input/index.js

@@ -0,0 +1,3 @@
+import Input from '@material-ui/core/Input'
+
+export default Input

package/react/InputGroup/Readme.md

@@ -2,7 +2,7 @@
 
 ```jsx
 import InputGroup from 'cozy-ui/transpiled/react/InputGroup';
-import Input from 'cozy-ui/transpiled/react/Input';
+import Input from 'cozy-ui/transpiled/react/legacy/Input';
 <form>
   <div>
     <InputGroup append={<InputGroup.Unit>€</InputGroup.Unit>}>
@@ -16,7 +16,7 @@ import Input from 'cozy-ui/transpiled/react/Input';
 
 ```jsx
 import InputGroup from 'cozy-ui/transpiled/react/InputGroup';
-import Input from 'cozy-ui/transpiled/react/Input';
+import Input from 'cozy-ui/transpiled/react/legacy/Input';
 import Typography from "cozy-ui/transpiled/react/Typography";
 <form>
   <div>
@@ -33,7 +33,7 @@ You will need to set a width to the side component, with a utility class for exa
 
 ```jsx
 import InputGroup from 'cozy-ui/transpiled/react/InputGroup';
-import Input from 'cozy-ui/transpiled/react/Input';
+import Input from 'cozy-ui/transpiled/react/legacy/Input';
 <form>
   <div>
     <InputGroup append={<Input placeholder="@domain.tld" className="u-w-4"/>}>
@@ -49,7 +49,7 @@ You will need to set a width to the side component, with a utility class for exa
 
 ```jsx
 import InputGroup from 'cozy-ui/transpiled/react/InputGroup';
-import Input from 'cozy-ui/transpiled/react/Input';
+import Input from 'cozy-ui/transpiled/react/legacy/Input';
 import SelectBox from 'cozy-ui/transpiled/react/SelectBox';
 const options = [
   { value: 'cozy.io', label: '.cozy.io' },
@@ -68,7 +68,7 @@ const options = [
 
 ```jsx
 import InputGroup from 'cozy-ui/transpiled/react/InputGroup';
-import Input from 'cozy-ui/transpiled/react/Input';
+import Input from 'cozy-ui/transpiled/react/legacy/Input';
 import Typography from "cozy-ui/transpiled/react/Typography";
 <form>
   <div>
@@ -83,7 +83,7 @@ import Typography from "cozy-ui/transpiled/react/Typography";
 
 ```jsx
 import InputGroup from 'cozy-ui/transpiled/react/InputGroup';
-import Input from 'cozy-ui/transpiled/react/Input';
+import Input from 'cozy-ui/transpiled/react/legacy/Input';
 import Typography from "cozy-ui/transpiled/react/Typography";
 <form>
   <div>
@@ -98,7 +98,7 @@ import Typography from "cozy-ui/transpiled/react/Typography";
 
 ```jsx
 import InputGroup from 'cozy-ui/transpiled/react/InputGroup';
-import Input from 'cozy-ui/transpiled/react/Input';
+import Input from 'cozy-ui/transpiled/react/legacy/Input';
 import Typography from "cozy-ui/transpiled/react/Typography";
 <form>
   <div>

package/react/InputLabel/index.js

@@ -0,0 +1,3 @@
+import InputLabel from '@material-ui/core/InputLabel'
+
+export default InputLabel

package/react/Label/Readme.md

@@ -2,7 +2,7 @@
 
 ```jsx
 import Label from 'cozy-ui/transpiled/react/Label';
-import Input from 'cozy-ui/transpiled/react/Input';
+import Input from 'cozy-ui/transpiled/react/legacy/Input';
 <form>
   <div>
     <Label htmlFor="idInput">This is a label</Label>
@@ -15,7 +15,7 @@ import Input from 'cozy-ui/transpiled/react/Input';
 
 ```jsx
 import Label from 'cozy-ui/transpiled/react/Label';
-import Input from 'cozy-ui/transpiled/react/Input';
+import Input from 'cozy-ui/transpiled/react/legacy/Input';
 <form>
   <div>
     <Label htmlFor="idInput2" block={false}>This is an inline label</Label>
@@ -28,7 +28,7 @@ import Input from 'cozy-ui/transpiled/react/Input';
 
 ```jsx
 import Label from 'cozy-ui/transpiled/react/Label';
-import Input from 'cozy-ui/transpiled/react/Input';
+import Input from 'cozy-ui/transpiled/react/legacy/Input';
 <form>
   <div>
     <Label htmlFor="idInput2" error>This is an error label</Label>

package/react/Labs/PasswordInput/index.jsx

@@ -7,7 +7,7 @@ import styles from './styles.styl'
 import Icon from '../../Icon'
 import EyeIcon from '../../Icons/Eye'
 import EyeClosedIcon from '../../Icons/EyeClosed'
-import Input from '../../Input'
+import Input from '../../legacy/Input'
 import InputGroup from '../../InputGroup'
 
 const HideShowButton = props => {

package/react/ListItem/ListItemBase/Renaming/RenameInput.jsx

@@ -6,7 +6,7 @@ import { splitFilename } from 'cozy-client/dist/models/file'
 
 import RenameDialog from './RenameDialog'
 import { renameFile } from './helpers'
-import Input from '../../../Input'
+import Input from '../../../legacy/Input'
 import InputGroup from '../../../InputGroup'
 import Spinner from '../../../Spinner'
 import { makeStyles } from '../../../styles'

package/react/TextField/MobileSelect.jsx

@@ -3,8 +3,10 @@ import merge from 'lodash/merge'
 import PropTypes from 'prop-types'
 import React, { forwardRef, useEffect, useState } from 'react'
 
+import { getLabelByValue, toggleInArray } from './helpers'
 import ActionsMenuItem from '../ActionsMenu/ActionsMenuItem'
 import ActionsMenuWrapper from '../ActionsMenu/ActionsMenuWrapper'
+import Checkbox from '../Checkbox'
 import Icon from '../Icon'
 import BottomIcon from '../Icons/Bottom'
 import InputAdornment from '../InputAdornment'
@@ -14,17 +16,32 @@ import Radio from '../Radios'
 
 const MobileSelect = forwardRef(
   (
-    { name, options, disabled, value, children, onClick, onChange, ...props },
+    {
+      id,
+      name,
+      options,
+      disabled,
+      value,
+      children,
+      onClick,
+      onChange,
+      ...props
+    },
     ref
   ) => {
+    const isMultiple = Array.isArray(value)
+
     // As they are controlled input, we have to set empty string as default
     // because values can't be undefined and then defined
-    const [state, setState] = useState({ label: '', value: '' })
+    const [state, setState] = useState({
+      label: '',
+      value: isMultiple ? [] : ''
+    })
     const [showDrawer, setShowDrawer] = useState(false)
 
-    const initialLabel = options.find(option => {
-      return option.value === value
-    })?.label
+    const initialLabel = isMultiple
+      ? value.map(v => getLabelByValue(options, v)).join(', ')
+      : getLabelByValue(options, value)
 
     const handleClick = () => {
       setShowDrawer(true)
@@ -34,9 +51,11 @@ const MobileSelect = forwardRef(
     const handleItemClick =
       ({ value, children, onClick }) =>
       ev => {
-        onClick?.(merge({}, ev, { target: { value } }))
-        setState({ label: children, value })
-        onChange?.({ target: { value } })
+        const _value = isMultiple ? toggleInArray(state.value, value) : value
+
+        onClick?.(merge({}, ev, { target: { value: _value } }))
+        setState({ label: children, value: _value })
+        onChange?.({ target: { value: _value } })
       }
 
     const handleClose = () => {
@@ -44,12 +63,16 @@ const MobileSelect = forwardRef(
     }
 
     useEffect(() => {
-      setState({ label: initialLabel || '', value: value || '' })
-    }, [initialLabel, value])
+      setState({
+        label: initialLabel || '',
+        value: value || (isMultiple ? [] : '')
+      })
+    }, [initialLabel, value, isMultiple])
 
     return (
       <>
         <MuiTextField
+          id={id}
           style={{ display: 'none' }}
           type="hidden"
           name={name}
@@ -70,6 +93,7 @@ const MobileSelect = forwardRef(
               <InputAdornment position="end">
                 <Icon
                   icon={BottomIcon}
+                  rotate={showDrawer ? 180 : 0}
                   color={
                     disabled
                       ? 'var(--disabledTextColor)'
@@ -83,21 +107,37 @@ const MobileSelect = forwardRef(
         />
 
         {showDrawer && (
-          <ActionsMenuWrapper open autoClose onClose={handleClose}>
+          <ActionsMenuWrapper
+            open
+            autoClose={!isMultiple}
+            onClose={handleClose}
+          >
             {React.Children.map(children, child => {
               return React.isValidElement(child) ? (
                 <ActionsMenuItem
                   {...child.props}
                   size="small"
-                  autoFocus={child.props.value === value}
+                  autoFocus={
+                    isMultiple
+                      ? child.props.value === value[0]
+                      : child.props.value === value
+                  }
                   onClick={handleItemClick(child.props)}
                 >
                   <ListItemIcon>
-                    <Radio
-                      aria-hidden="true"
-                      tabIndex="-1"
-                      checked={child.props.value === state.value}
-                    />
+                    {isMultiple ? (
+                      <Checkbox
+                        aria-hidden="true"
+                        tabIndex="-1"
+                        checked={state.value.includes(child.props.value)}
+                      />
+                    ) : (
+                      <Radio
+                        aria-hidden="true"
+                        tabIndex="-1"
+                        checked={child.props.value === state.value}
+                      />
+                    )}
                   </ListItemIcon>
                   <ListItemText primary={child.props.children} />
                 </ActionsMenuItem>
@@ -110,11 +150,13 @@ const MobileSelect = forwardRef(
   }
 )
 
+MobileSelect.displayName = 'MobileSelect'
+
 MobileSelect.propTypes = {
   name: PropTypes.string,
   options: PropTypes.array,
   disabled: PropTypes.bool,
-  value: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   children: PropTypes.oneOfType([
     PropTypes.node,
     PropTypes.arrayOf(PropTypes.node)

package/react/TextField/Readme.md

@@ -2,14 +2,14 @@ Cozy themed MUI TextField. See [the official API](https://v4.mui.com/api/text-fi
 
 ```jsx
 import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
-import TextField, {StyledTextField} from 'cozy-ui/transpiled/react/TextField'
+import TextField from 'cozy-ui/transpiled/react/TextField'
 import Variants from 'cozy-ui/docs/components/Variants'
 import FileIcon from 'cozy-ui/transpiled/react/Icons/File'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import InputAdornment from 'cozy-ui/transpiled/react/InputAdornment'
 import MenuItem from 'cozy-ui/transpiled/react/MenuItem'
 
-initialState = { option: 'value2' }
+initialState = { option: 'value2', options: ['value2','value3'] }
 
 const initialVariants = [{
   required: false,
@@ -44,8 +44,13 @@ const options = [
     label: 'Item 3',
   },
 ]
+
 const handleChange = (event) => {
-  setState({ option: event.target.value })
+  setState(v => ({ ...v, option: event.target.value }))
+}
+
+const handleMultipleChange = event => {
+  setState(v => ({ ...v, options: event.target.value }))
 }
 
 ;
@@ -210,6 +215,48 @@ const handleChange = (event) => {
             </MenuItem>
           ))}
         </TextField>
+
+        <div className="u-mb-1 u-mt-2">Multiple Select</div>
+        <TextField
+          select
+          SelectProps={{ multiple: true }}
+          options={options}
+          value={state.options}
+          error={variant.error}
+          size={variant.small ? 'small' : 'medium'}
+          helperText={variant.helperText ? 'This is an helper text' : undefined}
+          required={variant.required}
+          label="Label"
+          variant="outlined"
+          onChange={handleMultipleChange}
+        >
+          {options.map((option) => (
+            <MenuItem key={option.value} value={option.value}>
+              {option.label}
+            </MenuItem>
+          ))}
+        </TextField>
+        <TextField
+          className="u-ml-1"
+          select
+          SelectProps={{ multiple: true }}
+          options={options}
+          value={state.options}
+          disabled
+          error={variant.error}
+          size={variant.small ? 'small' : 'medium'}
+          helperText={variant.helperText ? 'This is an helper text' : undefined}
+          required={variant.required}
+          label="Label"
+          variant="outlined"
+          onChange={handleMultipleChange}
+        >
+          {options.map((option) => (
+            <MenuItem key={option.value} value={option.value}>
+              {option.label}
+            </MenuItem>
+          ))}
+        </TextField>
       </>
     )}
   </Variants>

package/react/TextField/helpers.js

@@ -0,0 +1,23 @@
+/**
+ * Add or Remove a value inside an array
+ * @param {array} arr
+ * @param {string} value
+ * @returns
+ */
+export const toggleInArray = (arr, value) => {
+  const s = new Set(arr)
+  if (s.has(value)) {
+    s.delete(value)
+  } else {
+    s.add(value)
+  }
+  return Array.from(s)
+}
+
+/**
+ * @param {array} options
+ * @param {string} value
+ * @returns
+ */
+export const getLabelByValue = (options, value) =>
+  options.find(option => option.value === value)?.label

package/react/TextField/index.jsx

@@ -7,44 +7,47 @@ import BottomIcon from '../Icons/Bottom'
 import { getRandomUUID } from '../helpers/getRandomUUID'
 import { useBreakpoints } from '../providers/Breakpoints'
 
-const TextField = forwardRef(({ select, options, children, ...props }, ref) => {
-  // A11Y, https://v4.mui.com/api/text-field/#props
-  const uuid = getRandomUUID()
-  const { isMobile } = useBreakpoints()
+const TextField = forwardRef(
+  ({ select, SelectProps, options, children, ...props }, ref) => {
+    // A11Y, https://v4.mui.com/api/text-field/#props
+    const uuid = getRandomUUID()
+    const { isMobile } = useBreakpoints()
+
+    // options is not required to avoid breaking change but needed to have the mobile behavior
+    if (isMobile && select && options) {
+      return (
+        <MobileSelect ref={ref} id={uuid} options={options} {...props}>
+          {children}
+        </MobileSelect>
+      )
+    }
 
-  // options is not required to avoid breaking change but needed to have the mobile behavior
-  if (isMobile && select && options) {
     return (
-      <MobileSelect ref={ref} id={uuid} options={options} {...props}>
+      <MuiTextField
+        ref={ref}
+        id={uuid}
+        select={select}
+        SelectProps={{
+          ...SelectProps,
+          IconComponent: iconProps => (
+            <Icon
+              {...iconProps}
+              icon={BottomIcon}
+              color={
+                props.disabled
+                  ? 'var(--disabledTextColor)'
+                  : 'var(--iconTextColor)'
+              }
+            />
+          )
+        }}
+        {...props}
+      >
         {children}
-      </MobileSelect>
+      </MuiTextField>
     )
   }
-
-  return (
-    <MuiTextField
-      ref={ref}
-      id={uuid}
-      select={select}
-      SelectProps={{
-        IconComponent: iconProps => (
-          <Icon
-            {...iconProps}
-            icon={BottomIcon}
-            color={
-              props.disabled
-                ? 'var(--disabledTextColor)'
-                : 'var(--iconTextColor)'
-            }
-          />
-        )
-      }}
-      {...props}
-    >
-      {children}
-    </MuiTextField>
-  )
-})
+)
 
 TextField.displayName = 'TextField'
 

package/react/Wizard/index.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import styles from './styles.styl'
 import Icon from '../Icon'
 import CloudIcon from '../Icons/Cloud'
-import Input from '../Input'
+import Input from '../legacy/Input'
 import Typography from '../Typography'
 import Button from '../deprecated/Button'
 

package/react/index.js

@@ -44,7 +44,6 @@ export {
 export { default as ActionsMenu } from './ActionsMenu'
 export { default as Overlay } from './deprecated/Overlay'
 export { default as Label } from './Label'
-export { default as Input } from './Input'
 export { default as Checkbox } from './Checkbox'
 export { default as Radio } from './deprecated/Radio'
 export { default as Textarea } from './Textarea'

package/react/{Input → legacy/Input}/Readme.md

@@ -1,7 +1,7 @@
 ### Input's available types (text, password, email, url)
 
 ```jsx
-import Input from 'cozy-ui/transpiled/react/Input';
+import Input from 'cozy-ui/transpiled/react/legacy/Input';
 <form>
   <p><Input placeholder="This is a input[type=text]" /></p>
   <p><Input type="password" placeholder="This is a input[type=password]" /></p>
@@ -14,7 +14,7 @@ import Input from 'cozy-ui/transpiled/react/Input';
 ### Disabled Input
 
 ```jsx
-import Input from 'cozy-ui/transpiled/react/Input';
+import Input from 'cozy-ui/transpiled/react/legacy/Input';
 <form>
   <Input disabled value="I'm disabled" />
 </form>
@@ -23,7 +23,7 @@ import Input from 'cozy-ui/transpiled/react/Input';
 ### Input when there's an error
 
 ```jsx
-import Input from 'cozy-ui/transpiled/react/Input';
+import Input from 'cozy-ui/transpiled/react/legacy/Input';
 <Input error placeholder="This is a input[type=text] with error" />
 ```
 
@@ -32,7 +32,7 @@ import Input from 'cozy-ui/transpiled/react/Input';
 By default, the size is `large`.
 
 ```jsx
-import Input from 'cozy-ui/transpiled/react/Input';
+import Input from 'cozy-ui/transpiled/react/legacy/Input';
 <div>
   <p>
     <Input placeholder="I have a tiny size" size="tiny" />
@@ -46,7 +46,7 @@ import Input from 'cozy-ui/transpiled/react/Input';
 ### Full width inputs
 
 ```jsx
-import Input from 'cozy-ui/transpiled/react/Input';
+import Input from 'cozy-ui/transpiled/react/legacy/Input';
 <Input placeholder="I'm full width" fullwidth />
 ```
 
@@ -55,7 +55,7 @@ import Input from 'cozy-ui/transpiled/react/Input';
 If you need to programmatically access the underlying `<input />` for example to give focus or move the caret, you can use the `inputRef` prop, that is passed to the `ref` property of the `<input />`.
 
 ```jsx
-import Input from 'cozy-ui/transpiled/react/Input';
+import Input from 'cozy-ui/transpiled/react/legacy/Input';
 import Button from 'cozy-ui/transpiled/react/deprecated/Button';
 class InputComponent extends React.Component {
   constructor() {
@@ -83,7 +83,7 @@ class InputComponent extends React.Component {
 `Input` forwards unknown props to the underlying `<input />` element.
 
 ```jsx
-import Input from 'cozy-ui/transpiled/react/Input';
+import Input from 'cozy-ui/transpiled/react/legacy/Input';
 <div>
   <Input placeholder='Type to see changes' value={state.value} onChange={ev => setState({value: ev.target.value})} />&nbsp;&nbsp;
   Value: { state.value }

package/react/{Input → legacy/Input}/styles.styl

@@ -1,4 +1,4 @@
-@require '../../stylus/components/forms'
+@require '../../../stylus/components/forms'
 
 .c-input-text
     @extend $input-text

package/stylus/cozy-ui/build.styl

@@ -320,7 +320,7 @@
 
  Styleguide Components.form.input-text
 */
-@require '../../react/Input/styles.styl'
+@require '../../react/legacy/Input/styles.styl'
 
 /*
  Input Checkbox