cozy-ui-plus 5.3.0 → 6.0.0

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0](https://github.com/cozy/cozy-libs/compare/cozy-ui-plus@5.3.1...cozy-ui-plus@6.0.0) (2026-03-24)
+
+### Features
+
+- **cozy-ui-plus:** Upgrade cozy-ui ([b01d192](https://github.com/cozy/cozy-libs/commit/b01d1926f00a81ff2eb2c0b03378ea06fefd5fcc))
+
+### BREAKING CHANGES
+
+- **cozy-ui-plus:** You must have `cozy-ui >= 138.1.0`
+
+## [5.3.1](https://github.com/cozy/cozy-libs/compare/cozy-ui-plus@5.3.0...cozy-ui-plus@5.3.1) (2026-03-17)
+
+**Note:** Version bump only for package cozy-ui-plus
+
 # [5.3.0](https://github.com/cozy/cozy-libs/compare/cozy-ui-plus@5.2.3...cozy-ui-plus@5.3.0) (2026-03-17)
 
 ### Features

package/dist/CollectionField/index.js

@@ -21,7 +21,7 @@ var _CrossSmall = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons
 
 var _Plus = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Plus"));
 
-var _Label = _interopRequireDefault(require("cozy-ui/transpiled/react/Label"));
+var _InputLabel = _interopRequireDefault(require("cozy-ui/transpiled/react/InputLabel"));
 
 var _Stack = _interopRequireDefault(require("cozy-ui/transpiled/react/Stack"));
 
@@ -97,7 +97,7 @@ var CollectionField = function CollectionField(props) {
     }
   };
 
-  return /*#__PURE__*/_react.default.createElement(_Field.FieldContainer, rest, /*#__PURE__*/_react.default.createElement(_Label.default, null, label), /*#__PURE__*/_react.default.createElement(_Stack.default, null, values.length > 0 ? /*#__PURE__*/_react.default.createElement(_Stack.default, {
+  return /*#__PURE__*/_react.default.createElement(_Field.FieldContainer, rest, /*#__PURE__*/_react.default.createElement(_InputLabel.default, null, label), /*#__PURE__*/_react.default.createElement(_Stack.default, null, values.length > 0 ? /*#__PURE__*/_react.default.createElement(_Stack.default, {
     spacing: "s"
   }, values.map(function (value, index) {
     return /*#__PURE__*/_react.default.createElement("div", {

package/dist/ContactsListModal/ContactsListModal.js

@@ -45,8 +45,6 @@ var _ContactsListContent = _interopRequireDefault(require("./ContactsListContent
 
 var _MobileHeader = _interopRequireDefault(require("./MobileHeader"));
 
-var _CozyTheme = _interopRequireDefault(require("../providers/CozyTheme"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -102,11 +100,9 @@ var ContactsListModal = function ContactsListModal(_ref) {
 
   var selfAddContactLabel = addContactLabel !== null && addContactLabel !== void 0 ? addContactLabel : t('addContact');
   var selfPlaceholder = placeholder !== null && placeholder !== void 0 ? placeholder : t('searchContact');
-  return /*#__PURE__*/_react.default.createElement(_CozyDialogs.TopAnchoredDialog, dialogProps, /*#__PURE__*/_react.default.createElement(_CozyTheme.default, {
-    variant: isMobile ? 'inverted' : 'normal'
-  }, /*#__PURE__*/_react.default.createElement(_CozyDialogs.DialogCloseButton, {
+  return /*#__PURE__*/_react.default.createElement(_CozyDialogs.TopAnchoredDialog, dialogProps, /*#__PURE__*/_react.default.createElement(_CozyDialogs.DialogCloseButton, {
     onClick: dismissAction
-  })), /*#__PURE__*/_react.default.createElement(_Dialog.DialogTitle, (0, _extends2.default)({}, dialogTitleProps, {
+  }), /*#__PURE__*/_react.default.createElement(_Dialog.DialogTitle, (0, _extends2.default)({}, dialogTitleProps, {
     className: (0, _classnames.default)(dialogTitleProps.className, {
       'u-p-0 u-w-100': isMobile
     })

package/dist/ContactsListModal/MobileHeader.js

@@ -21,8 +21,6 @@ var _Input = _interopRequireDefault(require("cozy-ui/transpiled/react/Input"));
 
 var _Paper = _interopRequireDefault(require("cozy-ui/transpiled/react/Paper"));
 
-var _CozyTheme = _interopRequireDefault(require("../providers/CozyTheme"));
-
 var barStyle = {
   height: 48
 };
@@ -32,9 +30,7 @@ var MobileHeader = function MobileHeader(_ref) {
       placeholder = _ref.placeholder,
       onChange = _ref.onChange,
       onDismiss = _ref.onDismiss;
-  return /*#__PURE__*/_react.default.createElement(_CozyTheme.default, {
-    variant: "inverted"
-  }, /*#__PURE__*/_react.default.createElement(_Paper.default, {
+  return /*#__PURE__*/_react.default.createElement(_Paper.default, {
     square: true,
     elevation: 0,
     className: "u-flex u-flex-items-center u-pr-3 u-pl-half",
@@ -54,7 +50,7 @@ var MobileHeader = function MobileHeader(_ref) {
     autoFocus: true,
     fullWidth: true,
     disableUnderline: true
-  })));
+  }));
 };
 
 MobileHeader.propTypes = {

package/dist/Field/index.js

@@ -25,11 +25,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Label = _interopRequireDefault(require("cozy-ui/transpiled/react/Label"));
+var _InputLabel = _interopRequireDefault(require("cozy-ui/transpiled/react/InputLabel"));
 
 var _SelectBox = _interopRequireDefault(require("cozy-ui/transpiled/react/SelectBox"));
 
-var _Textarea = _interopRequireDefault(require("cozy-ui/transpiled/react/Textarea"));
+var _TextField = _interopRequireDefault(require("cozy-ui/transpiled/react/TextField"));
 
 var _Input = _interopRequireDefault(require("cozy-ui/transpiled/react/legacy/Input"));
 
@@ -167,7 +167,8 @@ var Field = function Field(props) {
         }));
 
       case 'textarea':
-        return /*#__PURE__*/_react.default.createElement(_Textarea.default, (0, _extends2.default)({
+        return /*#__PURE__*/_react.default.createElement(_TextField.default, (0, _extends2.default)({
+          multiline: true,
           autoCapitalize: autoCapitalize,
           disabled: disabled,
           id: id,
@@ -177,7 +178,9 @@ var Field = function Field(props) {
           onKeyUp: onKeyUp,
           onFocus: onFocus,
           onBlur: onBlur,
-          readOnly: readOnly
+          inputProps: {
+            readOnly: readOnly
+          }
         }, controlledProps));
 
       case 'password':
@@ -241,7 +244,7 @@ var Field = function Field(props) {
   return /*#__PURE__*/_react.default.createElement(FieldContainer, {
     className: className,
     variant: variant
-  }, /*#__PURE__*/_react.default.createElement(_Label.default, (0, _extends2.default)({
+  }, /*#__PURE__*/_react.default.createElement(_InputLabel.default, (0, _extends2.default)({
     htmlFor: id
   }, labelProps), label), side && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(styles['o-side'], labelStyles['c-label'], (0, _defineProperty2.default)({}, styles['o-side-fullwidth'], fullwidth))

package/dist/ListItem/ListItemFile/ItemIcon.js

@@ -23,8 +23,6 @@ var _FileTypeText = _interopRequireDefault(require("cozy-ui/transpiled/react/Ico
 
 var _Skeleton = _interopRequireDefault(require("cozy-ui/transpiled/react/Skeleton"));
 
-var _Thumbnail = _interopRequireDefault(require("cozy-ui/transpiled/react/Thumbnail"));
-
 var _FileImageLoader = _interopRequireDefault(require("../../FileImageLoader"));
 
 var ItemIcon = function ItemIcon(_ref) {
@@ -37,16 +35,25 @@ var ItemIcon = function ItemIcon(_ref) {
     file: file,
     linkType: "tiny",
     render: function render(src) {
-      return /*#__PURE__*/_react.default.createElement(_Thumbnail.default, null, src ? /*#__PURE__*/_react.default.createElement("img", {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "u-flex u-w-2 u-h-2 u-flex-items-center u-flex-justify-center"
+      }, src ? /*#__PURE__*/_react.default.createElement("img", {
+        className: "u-w-2 u-h-2",
+        style: {
+          objectFit: 'contain'
+        },
         src: src,
         alt: ""
       }) : /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
+        className: "u-w-100 u-h-100",
         variant: "rect",
         animation: "wave"
       }));
     },
     renderFallback: function renderFallback() {
-      return /*#__PURE__*/_react.default.createElement(_Thumbnail.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "u-flex u-w-2 u-h-2 u-flex-items-center u-flex-justify-center"
+      }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
         icon: (0, _file.isNote)(file) ? _FileTypeNote.default : _FileTypeText.default
       }));
     }

package/dist/Qualification/QualificationItem/index.js

@@ -19,8 +19,6 @@ var _ButtonBase = _interopRequireDefault(require("cozy-ui/transpiled/react/Butto
 
 var _Icon = _interopRequireWildcard(require("cozy-ui/transpiled/react/Icon"));
 
-var _IconStack = _interopRequireDefault(require("cozy-ui/transpiled/react/IconStack"));
-
 var _FileDuotone = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/FileDuotone"));
 
 var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
@@ -61,18 +59,16 @@ var QualificationItem = function QualificationItem(_ref2) {
   return /*#__PURE__*/_react.default.createElement(_ButtonBase.default, (0, _extends2.default)({}, props, {
     className: styles.item,
     onClick: onClick
-  }), /*#__PURE__*/_react.default.createElement(_IconStack.default, {
-    className: "u-mb-half",
-    foreground: icon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      icon: icon,
-      color: isSelected ? 'var(--primaryColor)' : 'var(--secondaryTextColor)'
-    }),
-    background: /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      icon: _FileDuotone.default,
-      size: "32",
-      color: isSelected ? 'var(--primaryColor)' : 'var(--secondaryTextColor)'
-    })
-  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "u-mb-half"
+  }, icon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: icon,
+    color: isSelected ? 'var(--primaryColor)' : 'var(--secondaryTextColor)'
+  }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _FileDuotone.default,
+    size: "32",
+    color: isSelected ? 'var(--primaryColor)' : 'var(--secondaryTextColor)'
+  })), /*#__PURE__*/_react.default.createElement(_Typography.default, {
     variant: "caption"
   }, label));
 };

package/dist/ShortcutTile/index.js

@@ -9,12 +9,12 @@ exports.ShortcutTile = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _helpers = require("cozy-ui/transpiled/react/Avatar/helpers");
+
 var _Tile = require("cozy-ui/transpiled/react/Tile");
 
 var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
 
-var _helpers = require("cozy-ui/transpiled/react/legacy/Avatar/helpers");
-
 var _styles = require("cozy-ui/transpiled/react/styles");
 
 var styles = {

package/dist/SquareAppIcon/index.js

@@ -21,6 +21,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _helpers = require("cozy-ui/transpiled/react/Avatar/helpers");
+
 var _Badge = _interopRequireDefault(require("cozy-ui/transpiled/react/Badge"));
 
 var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
@@ -35,21 +37,17 @@ var _Plus = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Plus"
 
 var _WarningCircle = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/WarningCircle"));
 
-var _InfosBadge = _interopRequireDefault(require("cozy-ui/transpiled/react/InfosBadge"));
-
 var _ListItemText = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemText"));
 
 var _Spinner = _interopRequireDefault(require("cozy-ui/transpiled/react/Spinner"));
 
 var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
 
-var _helpers = require("cozy-ui/transpiled/react/legacy/Avatar/helpers");
-
 var _styles = require("cozy-ui/transpiled/react/styles");
 
 var _AppIcon = _interopRequireDefault(require("../AppIcon"));
 
-var _CozyTheme = _interopRequireWildcard(require("../providers/CozyTheme"));
+var _CozyTheme = require("../providers/CozyTheme");
 
 var _excluded = ["display", "name", "variant", "IconContent", "description", "hideShortcutBadge"];
 
@@ -94,9 +92,6 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       margin: '0.25rem 0.25rem 0 0.25rem',
       height: '2rem'
     }),
-    nameInverted: {
-      textShadow: theme.textShadows[1]
-    },
     squareAppIconGhost: {
       backgroundColor: (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.ghostOpacity),
       border: "1px dashed ".concat((0, _styles.alpha)(theme.palette.primary.main, theme.palette.border.ghostOpacity))
@@ -157,7 +152,6 @@ var SquareAppIcon = function SquareAppIcon(_ref2) {
       appIconProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
 
   var _useCozyTheme = (0, _CozyTheme.useCozyTheme)(),
-      themeVariant = _useCozyTheme.variant,
       type = _useCozyTheme.type;
 
   var classes = useStyles();
@@ -179,25 +173,32 @@ var SquareAppIcon = function SquareAppIcon(_ref2) {
     var curr = prevVariant.current; // eslint-disable-next-line react-hooks/set-state-in-effect
 
     if (curr === 'loading' && variant === 'error') setAnimationState('failed');
-    if (curr === 'loading' && (variant === 'default' || variant === undefined)) // eslint-disable-next-line react-hooks/set-state-in-effect
-      setAnimationState('success');
+    if (curr === 'loading' && (variant === 'default' || variant === undefined)) setAnimationState('success');
     prevVariant.current = variant;
   }, [variant]);
   var exceptionVariant = ['ghost'];
-  var squareTheme = exceptionVariant.includes(variant) ? themeVariant : 'normal';
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": "square-app-icon",
     className: (0, _classnames.default)(classes.tileWrapper, (0, _defineProperty2.default)({}, classes.detailedTileWrapper, display === 'detailed'))
-  }, /*#__PURE__*/_react.default.createElement(_CozyTheme.default, {
-    variant: squareTheme
-  }, /*#__PURE__*/_react.default.createElement(_InfosBadge.default, {
-    badgeContent: variant === 'shortcut' && !hideShortcutBadge ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Badge.default, {
+    badgeContent: variant === 'shortcut' && !hideShortcutBadge ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "u-h-1-half u-miw-1-half u-bdrs-circle u-flex u-flex-items-center u-flex-justify-center",
+      style: {
+        backgroundColor: 'var(--paperBackgroundColor)',
+        color: 'var(--iconTextColor)',
+        boxShadow: 'var(--shadow3)'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
       size: "10",
       icon: _LinkOut.default
-    }) : null,
+    })) : null,
     className: (0, _classnames.default)((0, _defineProperty2.default)({}, 'u-mr-1', display === 'detailed')),
     overlap: "rectangular",
-    invisible: variant !== 'shortcut' || hideShortcutBadge
+    invisible: variant !== 'shortcut' || hideShortcutBadge,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'right'
+    }
   }, /*#__PURE__*/_react.default.createElement(SquareAppIconSpinner, {
     variant: variant,
     animationState: animationState
@@ -218,7 +219,7 @@ var SquareAppIcon = function SquareAppIcon(_ref2) {
     variant: "h2",
     align: "center"
   }, letter.toUpperCase()) : /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(styles['SquareAppIcon-icon-container'], (0, _defineProperty2.default)({}, styles['SquareAppIcon-icon-container-normal'], themeVariant === 'normal'))
+    className: (0, _classnames.default)(styles['SquareAppIcon-icon-container'], [styles['SquareAppIcon-icon-container-normal']])
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(styles['onEnd'], (0, _defineProperty2.default)({}, styles['isSuccess'], animationState === 'success'), (0, _defineProperty2.default)({}, styles['isFailed'], animationState === 'failed')),
     onAnimationEnd: handleAnimationEnd
@@ -230,11 +231,11 @@ var SquareAppIcon = function SquareAppIcon(_ref2) {
     color: "var(--primaryColor)"
   }) : IconContent ? IconContent : /*#__PURE__*/_react.default.createElement("div", {
     className: "u-w-2 u-h-2"
-  }, /*#__PURE__*/_react.default.createElement(_AppIcon.default, appIconProps)))))), display === 'detailed' ? /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+  }, /*#__PURE__*/_react.default.createElement(_AppIcon.default, appIconProps))))), display === 'detailed' ? /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
     primary: appName,
     secondary: description
   }) : /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    className: (0, _classnames.default)(classes.name, (0, _defineProperty2.default)({}, classes.nameInverted, themeVariant === 'inverted'), 'u-spacellipsis'),
+    className: (0, _classnames.default)(classes.name, 'u-spacellipsis'),
     variant: "h6",
     align: "center"
   }, appName));

package/dist/providers/CozyTheme/index.js

@@ -39,8 +39,6 @@ var CozyTheme = function CozyTheme(_ref) {
 };
 
 CozyTheme.propTypes = {
-  variant: _propTypes.default.oneOf(['normal', 'inverted']),
-
   /** Causes this element's children to appear as if they were direct children of the element's parent, ignoring the element itself. */
   ignoreItself: _propTypes.default.bool,
 
@@ -50,7 +48,6 @@ CozyTheme.propTypes = {
   children: _propTypes.default.node
 };
 CozyTheme.defaultProps = {
-  variant: 'normal',
   ignoreCozySettings: false,
   ignoreItself: true
 };

package/dist/src/providers/CozyTheme/index.d.ts

@@ -6,15 +6,12 @@ declare function CozyTheme({ ignoreCozySettings, ...props }: {
 }): JSX.Element;
 declare namespace CozyTheme {
     namespace propTypes {
-        let variant: PropTypes.Requireable<string>;
         let ignoreItself: PropTypes.Requireable<boolean>;
         let ignoreCozySettings: PropTypes.Requireable<boolean>;
         let className: PropTypes.Requireable<string>;
         let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     }
     namespace defaultProps {
-        let variant_1: string;
-        export { variant_1 as variant };
         let ignoreCozySettings_1: boolean;
         export { ignoreCozySettings_1 as ignoreCozySettings };
         let ignoreItself_1: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui-plus",
-  "version": "5.3.0",
+  "version": "6.0.0",
   "description": "Cozy-ui-plus is an extension of cozy-ui and provides components based on cozy-client",
   "main": "dist/index.js",
   "license": "MIT",
@@ -34,20 +34,20 @@
     "babel-preset-cozy-app": "^2.8.4",
     "cozy-client": "^60.21.3",
     "cozy-device-helper": "2.0.0",
-    "cozy-intent": "^2.31.0",
-    "cozy-logger": "^1.18.0",
+    "cozy-intent": "^2.31.1",
+    "cozy-logger": "^1.18.1",
     "cozy-stack-client": "^60.21.1",
-    "cozy-ui": "^135.0.0",
-    "jest": "28.1.3",
+    "cozy-ui": "^138.1.0",
+    "jest": "30.3.0",
     "jest-canvas-mock": "2.3.1",
-    "jest-environment-jsdom": "28.1.3",
+    "jest-environment-jsdom": "30.3.0",
     "node-polyglot": "^2.4.0",
     "prop-types": "15.8.1",
     "react": "16.12.0",
     "react-dom": "16.12.0",
     "react-test-renderer": "16.12.0",
     "stylus": "0.64.0",
-    "twake-i18n": "^0.4.0",
+    "twake-i18n": "^0.4.1",
     "typescript": "5.5.2"
   },
   "dependencies": {
@@ -68,10 +68,10 @@
     "cozy-device-helper": ">=2.0.0",
     "cozy-intent": ">=2.30.0",
     "cozy-logger": ">=1.17.0",
-    "cozy-ui": ">=135.0.0",
+    "cozy-ui": ">=138.1.0",
     "react": "^16 || ^17 || ^18",
     "react-dom": "^16 || ^17 || ^18",
     "twake-i18n": ">=0.3.0"
   },
-  "gitHead": "a2816d422234922d845a1b6c01fae4c45fe81fc8"
+  "gitHead": "4c152ef7f2acafb450df245f5ce58638cbdb6be3"
 }

package/src/AppLinker/__snapshots__/index.spec.jsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`app icon should render correctly 1`] = `
 <div>