cozy-ui 136.2.2 → 137.0.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [137.0.0](https://github.com/cozy/cozy-ui/compare/v136.3.0...v137.0.0) (2026-03-19)
+
+
+### Features
+
+* Pass appIcon and appTextIcon instead of slug to AppTitle ([8b5c6cf](https://github.com/cozy/cozy-ui/commit/8b5c6cf))
+* Remove app text icons ([abea61b](https://github.com/cozy/cozy-ui/commit/abea61b))
+
+
+### BREAKING CHANGES
+
+* All app text icons have been changed. If you imported them, copy the code from cozy-ui to your app.
+* Replace <AppTitle slug="drive" /> by <AppTitle appIcon={DriveIcon} appTextIcon={DriveTextIcon} />. tag and children prop are also removed but were unused.
+
+# [136.3.0](https://github.com/cozy/cozy-ui/compare/v136.2.2...v136.3.0) (2026-03-18)
+
+
+### Features
+
+* Add icon for assistant and add app title for assistant :sparkles: ([d6da355](https://github.com/cozy/cozy-ui/commit/d6da355))
+* Add visual indication for new items in virtualized tables ([1e5f638](https://github.com/cozy/cozy-ui/commit/1e5f638))
+
 ## [136.2.2](https://github.com/cozy/cozy-ui/compare/v136.2.1...v136.2.2) (2026-03-05)
 
 

package/package.json

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

package/react/AppTitle/Readme.md

@@ -1,21 +1,15 @@
-Display the app title of an app with icon, brand name and app name. Support Twake theme only.
-
-You can pass a child that will be used as default value is app is not supported.
+Display the app title of an app with app icon, brand icon and app text icon.
 
 ### Default
 
 ```jsx
 import AppTitle from 'cozy-ui/transpiled/react/AppTitle';
+import DriveIcon from 'cozy-ui/transpiled/react/Icons/Drive';
 
-const slugs = ["calendar", "chat", "contacts", "drive", "mail", "notes", "pass", "store", "photos", "home"];
+// This should be an a nice icon with "Drive" written with Twake font and gradient
+const DriveTextMock = () => <div>Drive</div>;
 
-<div class="u-flex u-flex-column">
-  {
-    slugs.map(slug => <AppTitle slug={slug} />)
-  }
-  <AppTitle slug="coachco2" />
-  <AppTitle slug="coachco2">CoachCO2</AppTitle>
-  <AppTitle>Drive</AppTitle>
+<div className="u-flex u-flex-column">
+  <AppTitle appIcon={DriveIcon} appTextIcon={DriveTextMock} />
 </div>
-
 ```

package/react/AppTitle/index.jsx

@@ -4,94 +4,20 @@ import React from 'react'
 
 import styles from './styles.styl'
 import Icon from '../Icon'
-import CalendarAppIcon from '../Icons/CalendarApp'
-import CalendarTextIcon from '../Icons/CalendarText'
-import ChatIcon from '../Icons/Chat'
-import ChatTextIcon from '../Icons/ChatText'
-import ContactsIcon from '../Icons/Contacts'
-import ContactsTextIcon from '../Icons/ContactsText'
-import DriveIcon from '../Icons/Drive'
-import DriveTextIcon from '../Icons/DriveText'
-import MailIcon from '../Icons/Mail'
-import MailTextIcon from '../Icons/MailText'
-import NotesIcon from '../Icons/Notes'
-import NotesTextIcon from '../Icons/NotesText'
-import PassIcon from '../Icons/Pass'
-import PassTextIcon from '../Icons/PassText'
-import PhotosIcon from '../Icons/Photos'
-import PhotosTextIcon from '../Icons/PhotosText'
-import StoreIcon from '../Icons/Store'
-import StoreTextIcon from '../Icons/StoreText'
 import TwakeTextIcon from '../Icons/TwakeText'
-import TwakeWorkplaceIcon from '../Icons/TwakeWorkplace'
-import WorkplaceTextIcon from '../Icons/WorkplaceText'
-import Typography from '../Typography'
 import { useCozyTheme } from '../providers/CozyTheme'
 
-const SLUG_TO_ICONS = {
-  calendar: {
-    icon: CalendarAppIcon,
-    text: CalendarTextIcon
-  },
-  chat: {
-    icon: ChatIcon,
-    text: ChatTextIcon
-  },
-  contacts: {
-    icon: ContactsIcon,
-    text: ContactsTextIcon
-  },
-  drive: {
-    icon: DriveIcon,
-    text: DriveTextIcon
-  },
-  mail: {
-    icon: MailIcon,
-    text: MailTextIcon
-  },
-  notes: {
-    icon: NotesIcon,
-    text: NotesTextIcon
-  },
-  passwords: {
-    icon: PassIcon,
-    text: PassTextIcon
-  },
-  store: {
-    icon: StoreIcon,
-    text: StoreTextIcon
-  },
-  photos: {
-    icon: PhotosIcon,
-    text: PhotosTextIcon
-  },
-  home: {
-    icon: TwakeWorkplaceIcon,
-    text: WorkplaceTextIcon
-  }
-}
-
-const AppTitle = ({ slug, tag, className, children, ...otherProps }) => {
+const AppTitle = ({ appIcon, appTextIcon }) => {
   const { isLight } = useCozyTheme()
 
-  const titleData = SLUG_TO_ICONS[slug]
-
-  if (!titleData)
-    return (
-      <Typography
-        component={tag}
-        variant="h4"
-        className={cx(styles['c-apptitle'], className)}
-        {...otherProps}
-      >
-        {children}
-      </Typography>
-    )
+  if (!appIcon || !appTextIcon) {
+    return null
+  }
 
   return (
     <div className="u-flex u-flex-items-center">
       <Icon
-        icon={titleData.icon}
+        icon={appIcon}
         size="32"
         className={styles['c-apptitle-app-icon']}
       />
@@ -105,27 +31,14 @@ const AppTitle = ({ slug, tag, className, children, ...otherProps }) => {
           isLight ? styles['c-apptitle-light'] : styles['c-apptitle-dark']
         )}
       />
-      <Icon
-        icon={titleData.text}
-        width="auto"
-        height="22"
-        className={cx(
-          'u-w-auto',
-          slug === 'home' ? styles['c-apptitle-home-icon'] : undefined
-        )}
-      />
+      <Icon icon={appTextIcon} width="auto" height="22" className="u-w-auto" />
     </div>
   )
 }
 
 AppTitle.propTypes = {
-  slug: PropTypes.string,
-  tag: PropTypes.string,
-  className: PropTypes.string
-}
-
-AppTitle.defaultProps = {
-  tag: 'h1'
+  appIcon: PropTypes.func,
+  appTextIcon: PropTypes.func
 }
 
 export default AppTitle

package/react/AppTitle/styles.styl

@@ -11,9 +11,3 @@
 
 .c-apptitle-app-icon
     margin-right: 4px
-
-// We need a custom height and positioning
-// because of the 'p' that decenter the svg
-.c-apptitle-home-icon
-    margin-top: 5px
-    height: 26px

package/react/Icon/Readme.md

@@ -1056,7 +1056,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 import Grid from 'cozy-ui/transpiled/react/Grid'
 import Sprite from 'cozy-ui/transpiled/react/Icon/Sprite'
 
-const availableIcons = ['account', 'assistant-color', 'bottom-select', 'check-white', 'cloud-broken', 'contacts', 'cozy-authentification', 'cozy-logo', 'cozy-upgrade', 'credit-card-large', 'dash-white', 'device-browser', 'device-laptop', 'device-phone', 'device-tablet', 'file-type-audio', 'file-type-banking-account' , 'file-type-bin', 'file-type-code', 'file-type-files', 'file-type-folder', 'file-type-server', 'file-type-shared-drive', 'file-type-shared-drive-grey', 'file-type-image', 'file-type-note', 'file-type-pdf', 'file-type-sheet', 'file-type-slide', 'file-type-text', 'file-type-video', 'file-type-zip', 'forbidden-sign', 'google', 'keychain', 'logout-large', 'papers', 'only-office', 'store', 'top-select', 'trash-duotone', 'cozy'];
+const availableIcons = ['account', 'ai-text', 'assistant-color', 'bottom-select', 'check-white', 'cloud-broken', 'contacts', 'cozy-authentification', 'cozy-logo', 'cozy-upgrade', 'credit-card-large', 'dash-white', 'device-browser', 'device-laptop', 'device-phone', 'device-tablet', 'file-type-audio', 'file-type-banking-account' , 'file-type-bin', 'file-type-code', 'file-type-files', 'file-type-folder', 'file-type-server', 'file-type-shared-drive', 'file-type-shared-drive-grey', 'file-type-image', 'file-type-note', 'file-type-pdf', 'file-type-sheet', 'file-type-slide', 'file-type-text', 'file-type-video', 'file-type-zip', 'forbidden-sign', 'google', 'keychain', 'logout-large', 'papers', 'only-office', 'store', 'top-select', 'trash-duotone', 'cozy'];
 
 <Grid container spacing={2}>
   <Sprite />

package/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -538,6 +538,9 @@ export const makeLightNormalOverrides = theme => ({
   },
   MuiTableRow: {
     root: {
+      '&.new': {
+        backgroundColor: theme.palette.action.hover
+      },
       '&.disabled': {
         cursor: 'pointer',
         pointerEvents: 'none',

package/react/Table/Virtualized/Dnd/TableRow.jsx

@@ -86,9 +86,10 @@ const TableRow = ({ item, context, componentsProps, ...props }) => {
     <TableRowClassic
       {...props}
       ref={node => dragRef(dropRef(node))}
-      selected={isSelected || dropCollect.isOver || isNew}
+      selected={isSelected || dropCollect.isOver}
       className={cx(
-        dragCollect.isDragging ? 'virtualized u-o-50' : 'virtualized'
+        dragCollect.isDragging ? 'virtualized u-o-50' : 'virtualized',
+        { new: isNew }
       )}
       disabled={isDisabled}
       hover

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

@@ -1,20 +1,12 @@
 export default AppTitle;
-declare function AppTitle({ slug, tag, className, children, ...otherProps }: {
-    [x: string]: any;
-    slug: any;
-    tag: any;
-    className: any;
-    children: any;
-}): JSX.Element;
+declare function AppTitle({ appIcon, appTextIcon }: {
+    appIcon: any;
+    appTextIcon: any;
+}): JSX.Element | null;
 declare namespace AppTitle {
     namespace propTypes {
-        const slug: PropTypes.Requireable<string>;
-        const tag: PropTypes.Requireable<string>;
-        const className: PropTypes.Requireable<string>;
-    }
-    namespace defaultProps {
-        const tag_1: string;
-        export { tag_1 as tag };
+        const appIcon: PropTypes.Requireable<(...args: any[]) => any>;
+        const appTextIcon: PropTypes.Requireable<(...args: any[]) => any>;
     }
 }
 import PropTypes from "prop-types";

package/transpiled/react/AppTitle/index.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["slug", "tag", "className", "children"];
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -8,96 +5,27 @@ var styles = {
   "c-apptitle": "styles__c-apptitle___eqV9l",
   "c-apptitle-light": "styles__c-apptitle-light___49VIZ",
   "c-apptitle-dark": "styles__c-apptitle-dark___13RM5",
-  "c-apptitle-app-icon": "styles__c-apptitle-app-icon___oQp8q",
-  "c-apptitle-home-icon": "styles__c-apptitle-home-icon___1xJsd"
+  "c-apptitle-app-icon": "styles__c-apptitle-app-icon___oQp8q"
 };
 import Icon from "cozy-ui/transpiled/react/Icon";
-import CalendarAppIcon from "cozy-ui/transpiled/react/Icons/CalendarApp";
-import CalendarTextIcon from "cozy-ui/transpiled/react/Icons/CalendarText";
-import ChatIcon from "cozy-ui/transpiled/react/Icons/Chat";
-import ChatTextIcon from "cozy-ui/transpiled/react/Icons/ChatText";
-import ContactsIcon from "cozy-ui/transpiled/react/Icons/Contacts";
-import ContactsTextIcon from "cozy-ui/transpiled/react/Icons/ContactsText";
-import DriveIcon from "cozy-ui/transpiled/react/Icons/Drive";
-import DriveTextIcon from "cozy-ui/transpiled/react/Icons/DriveText";
-import MailIcon from "cozy-ui/transpiled/react/Icons/Mail";
-import MailTextIcon from "cozy-ui/transpiled/react/Icons/MailText";
-import NotesIcon from "cozy-ui/transpiled/react/Icons/Notes";
-import NotesTextIcon from "cozy-ui/transpiled/react/Icons/NotesText";
-import PassIcon from "cozy-ui/transpiled/react/Icons/Pass";
-import PassTextIcon from "cozy-ui/transpiled/react/Icons/PassText";
-import PhotosIcon from "cozy-ui/transpiled/react/Icons/Photos";
-import PhotosTextIcon from "cozy-ui/transpiled/react/Icons/PhotosText";
-import StoreIcon from "cozy-ui/transpiled/react/Icons/Store";
-import StoreTextIcon from "cozy-ui/transpiled/react/Icons/StoreText";
 import TwakeTextIcon from "cozy-ui/transpiled/react/Icons/TwakeText";
-import TwakeWorkplaceIcon from "cozy-ui/transpiled/react/Icons/TwakeWorkplace";
-import WorkplaceTextIcon from "cozy-ui/transpiled/react/Icons/WorkplaceText";
-import Typography from "cozy-ui/transpiled/react/Typography";
 import { useCozyTheme } from "cozy-ui/transpiled/react/providers/CozyTheme";
-var SLUG_TO_ICONS = {
-  calendar: {
-    icon: CalendarAppIcon,
-    text: CalendarTextIcon
-  },
-  chat: {
-    icon: ChatIcon,
-    text: ChatTextIcon
-  },
-  contacts: {
-    icon: ContactsIcon,
-    text: ContactsTextIcon
-  },
-  drive: {
-    icon: DriveIcon,
-    text: DriveTextIcon
-  },
-  mail: {
-    icon: MailIcon,
-    text: MailTextIcon
-  },
-  notes: {
-    icon: NotesIcon,
-    text: NotesTextIcon
-  },
-  passwords: {
-    icon: PassIcon,
-    text: PassTextIcon
-  },
-  store: {
-    icon: StoreIcon,
-    text: StoreTextIcon
-  },
-  photos: {
-    icon: PhotosIcon,
-    text: PhotosTextIcon
-  },
-  home: {
-    icon: TwakeWorkplaceIcon,
-    text: WorkplaceTextIcon
-  }
-};
 
 var AppTitle = function AppTitle(_ref) {
-  var slug = _ref.slug,
-      tag = _ref.tag,
-      className = _ref.className,
-      children = _ref.children,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
+  var appIcon = _ref.appIcon,
+      appTextIcon = _ref.appTextIcon;
 
   var _useCozyTheme = useCozyTheme(),
       isLight = _useCozyTheme.isLight;
 
-  var titleData = SLUG_TO_ICONS[slug];
-  if (!titleData) return /*#__PURE__*/React.createElement(Typography, _extends({
-    component: tag,
-    variant: "h4",
-    className: cx(styles['c-apptitle'], className)
-  }, otherProps), children);
+  if (!appIcon || !appTextIcon) {
+    return null;
+  }
+
   return /*#__PURE__*/React.createElement("div", {
     className: "u-flex u-flex-items-center"
   }, /*#__PURE__*/React.createElement(Icon, {
-    icon: titleData.icon,
+    icon: appIcon,
     size: "32",
     className: styles['c-apptitle-app-icon']
   }), /*#__PURE__*/React.createElement(Icon, {
@@ -106,19 +34,15 @@ var AppTitle = function AppTitle(_ref) {
     height: "22",
     className: cx('u-mr-half', 'u-w-auto', isLight ? styles['c-apptitle-light'] : styles['c-apptitle-dark'])
   }), /*#__PURE__*/React.createElement(Icon, {
-    icon: titleData.text,
+    icon: appTextIcon,
     width: "auto",
     height: "22",
-    className: cx('u-w-auto', slug === 'home' ? styles['c-apptitle-home-icon'] : undefined)
+    className: "u-w-auto"
   }));
 };
 
 AppTitle.propTypes = {
-  slug: PropTypes.string,
-  tag: PropTypes.string,
-  className: PropTypes.string
-};
-AppTitle.defaultProps = {
-  tag: 'h1'
+  appIcon: PropTypes.func,
+  appTextIcon: PropTypes.func
 };
 export default AppTitle;