cozy-ui 140.0.0 → 140.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [140.1.0](https://github.com/cozy/cozy-ui/compare/v140.0.0...v140.1.0) (2026-06-23)
+
+
+### Features
+
+* Re-export of [@material-ui](https://github.com/material-ui) Autocomplete ([73c077a](https://github.com/cozy/cozy-ui/commit/73c077a))
+
 # [140.0.0](https://github.com/cozy/cozy-ui/compare/v139.2.0...v140.0.0) (2026-06-23)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "140.0.0",
+  "version": "140.1.0",
   "description": "Cozy apps UI SDK",
   "engines": {
     "node": "24.x"

package/react/Autocomplete/Readme.md

@@ -0,0 +1,17 @@
+Re-export of @material-ui. See [the official API](https://v4.mui.com/components/autocomplete/).
+
+```jsx
+import Autocomplete from 'cozy-ui/transpiled/react/Autocomplete'
+import TextField from 'cozy-ui/transpiled/react/TextField'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+
+const options = ['one', 'two', 'three']
+
+;
+<DemoProvider>
+  <Autocomplete
+    options={options}
+    renderInput={params => <TextField {...params} label="Basic" />}
+  />
+</DemoProvider>
+```

package/react/Autocomplete/index.js

@@ -0,0 +1,3 @@
+import Autocomplete from '@material-ui/lab/Autocomplete'
+
+export default Autocomplete

package/react/index.js

@@ -16,6 +16,7 @@ export { default as Spinner } from './Spinner'
 export { default as Accordion } from './Accordion'
 export { default as AccordionSummary } from './AccordionSummary'
 export { default as AccordionDetails } from './AccordionDetails'
+export { default as Autocomplete } from './Autocomplete'
 export { default as Breadcrumbs } from './Breadcrumbs'
 export { default as withBreakpoints } from './helpers/withBreakpoints'
 export { default as useBreakpoints } from './providers/Breakpoints'

package/skills/cozy-ui-reference/references/components.md

@@ -16,8 +16,8 @@ Generated reference for React components available in cozy-ui. Use this file to
 - **Dialogs**: [ActionsBar](#actionsbar), [ActionsMenu](#actionsmenu), [CozyDialogs](#cozydialogs), [Dialog](#dialog), [Menu](#menu), [SpecificDialogs (CozyDialogs/SpecificDialogs)](#specificdialogs-cozydialogs-specificdialogs)
 - **Utils**: [DropdownText](#dropdowntext), [MuiCozyTheme](#muicozytheme)
 - **Hooks & Providers**: [Breakpoints (providers/Breakpoints)](#breakpoints-providers-breakpoints), [ConfirmDialog (providers/ConfirmDialog)](#confirmdialog-providers-confirmdialog), [CozyTheme (providers/CozyTheme)](#cozytheme-providers-cozytheme), [Selection (providers/Selection)](#selection-providers-selection), [useConfirmExit (hooks/useConfirmExit)](#useconfirmexit-hooks-useconfirmexit)
-- **Labs**: [Labs](#labs), [PasswordInput (Labs/PasswordInput)](#passwordinput-labs-passwordinput)
-- **Other**: [BottomSheet](#bottomsheet), [providers](#providers)
+- **Labs**: [IconGrid (Labs/IconGrid)](#icongrid-labs-icongrid), [Labs](#labs), [PasswordInput (Labs/PasswordInput)](#passwordinput-labs-passwordinput)
+- **Other**: [Autocomplete](#autocomplete), [BottomSheet](#bottomsheet), [providers](#providers)
 
 ## Buttons
 
@@ -253,6 +253,7 @@ import SearchBar from 'cozy-ui/transpiled/react/SearchBar'
 |------|------|---------|-------------|
 | `className` | string | - | - |
 | `type` | `button` \| `search` | `'search'` | - |
+| `icon` | string \| object \| function | `Magnifier` | - |
 | `size` | `small` \| `medium` \| `large` \| `auto` | `'small'` | - |
 | `componentsProps` | object | - | - |
 | `value` | string | - | Used to control the component outside of it |
@@ -409,8 +410,8 @@ import Empty from 'cozy-ui/transpiled/react/Empty'
 **Example:**
 
 ```jsx
+import { Icon, Cozy } from '@linagora/twake-icons'
 import Empty from 'cozy-ui/transpiled/react/Empty'
-import { Cozy, Icon } from '@linagora/twake-icons'
 
 <>
   <Empty
@@ -442,6 +443,7 @@ import { Cozy, Icon } from '@linagora/twake-icons'
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
+| `icon` | string \| object \| function | - | - |
 | `iconSize` | `normal` \| `medium` \| `large` | `'normal'` | - |
 | `title` | React.node | - | - |
 | `text` | React.node | - | - |
@@ -903,8 +905,8 @@ import Badge from 'cozy-ui/transpiled/react/Badge'
 
 ```jsx
 import Badge from 'cozy-ui/transpiled/react/Badge'
-import { Icon, Link } from '@linagora/twake-icons'
 import Avatar from 'cozy-ui/transpiled/react/Avatar'
+import { Icon, Link } from '@linagora/twake-icons'
 
 <Badge
   anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
@@ -999,6 +1001,7 @@ import Filename from 'cozy-ui/transpiled/react/Filename'
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
+| `icon` | string \| object \| function | - | Filename icon |
 | `filename` | string | - | folder or file name |
 | `extension` | string | - | If a file name, you can specify the extension |
 | `midEllipsis` | boolean | `false` | To replace the end ellipsis by a middle on in the filename |
@@ -1097,7 +1100,7 @@ const HistoryRow = ({
         <div className={styles.HistoryRowCircleWrapper}>
           <div className={styles.HistoryRowMediaImg}>
             <Avatar size={tag ? 's' : 'xs'} className={styles.HistoryRowCircle}>
-              {tag && <Icon icon={FileIcon} color="var(--primaryTextColor)" />}
+              {tag && <Icon icon={File} color="var(--primaryTextColor)" />}
             </Avatar>
           </div>
         </div>
@@ -1117,7 +1120,7 @@ const HistoryRow = ({
             <Icon
               className="u-c-pointer"
               color="var(--secondaryTextColor)"
-              icon={DownloadIcon}
+              icon={Download}
               onClick={() => downloadLink()}
             />
           </div>
@@ -1753,6 +1756,29 @@ const Example = () => {
 
 ## Labs
 
+### IconGrid (Labs/IconGrid)
+
+A component to display a grid of 4 icons. This component is not considered stable and may be replaced by a more generic grid component in the future.
+
+```jsx
+import IconGrid from 'cozy-ui/transpiled/react/Labs/IconGrid'
+```
+
+**Example:**
+
+```jsx
+import IconGrid from 'cozy-ui/transpiled/react/Labs/IconGrid'
+import { Cloud, CloudHappy, File, Icon, Online } from '@linagora/twake-icons'
+
+<IconGrid>
+  <Icon icon={File} />
+  <Icon icon={Cloud} />
+  <Icon icon={CloudHappy} />
+  <Icon icon={Online} />
+</IconGrid>
+```
+
+
 ### Labs
 
 In this directory, components you will find are experimental and subject to API change without creating any breaking change.
@@ -1780,6 +1806,15 @@ import PasswordInput from 'cozy-ui/transpiled/react/Labs/PasswordInput'
 
 ## Other
 
+### Autocomplete
+
+Re-export of @material-ui. See the official API.
+
+```jsx
+import Autocomplete from 'cozy-ui/transpiled/react/Autocomplete'
+```
+
+
 ### BottomSheet
 
 Display content coming up from the bottom of the screen. The pane can be swiped to the top of the screen. Based on cozy / mui-bottom-sheet: API documentation is here. It uses Portal to have the same behavior as Dialogs / Modals (can be disabled with the disablePortal prop).

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

@@ -0,0 +1,2 @@
+export default Autocomplete;
+import Autocomplete from "@material-ui/lab/Autocomplete";

package/transpiled/react/Autocomplete/index.js

@@ -0,0 +1,2 @@
+import Autocomplete from '@material-ui/lab/Autocomplete';
+export default Autocomplete;

package/transpiled/react/index.d.ts

@@ -5,6 +5,7 @@ export { default as Spinner } from "./Spinner";
 export { default as Accordion } from "./Accordion";
 export { default as AccordionSummary } from "./AccordionSummary";
 export { default as AccordionDetails } from "./AccordionDetails";
+export { default as Autocomplete } from "./Autocomplete";
 export { default as Breadcrumbs } from "./Breadcrumbs";
 export { default as withBreakpoints } from "./helpers/withBreakpoints";
 export { default as useBreakpoints } from "./providers/Breakpoints";

package/transpiled/react/index.js

@@ -8,6 +8,7 @@ export { default as Spinner } from './Spinner';
 export { default as Accordion } from './Accordion';
 export { default as AccordionSummary } from './AccordionSummary';
 export { default as AccordionDetails } from './AccordionDetails';
+export { default as Autocomplete } from './Autocomplete';
 export { default as Breadcrumbs } from './Breadcrumbs';
 export { default as withBreakpoints } from './helpers/withBreakpoints';
 export { default as useBreakpoints } from './providers/Breakpoints';