cozy-ui 138.11.0 → 138.13.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [138.13.0](https://github.com/cozy/cozy-ui/compare/v138.12.0...v138.13.0) (2026-05-28)
+
+
+### Features
+
+* Add hook to submit with a loader ([ff36c73](https://github.com/cozy/cozy-ui/commit/ff36c73))
+
+# [138.12.0](https://github.com/cozy/cozy-ui/compare/v138.11.0...v138.12.0) (2026-05-13)
+
+
+### Features
+
+* Allow to customize background color of ProgressionBanner component ([91b5cee](https://github.com/cozy/cozy-ui/commit/91b5cee))
+
 # [138.11.0](https://github.com/cozy/cozy-ui/compare/v138.10.0...v138.11.0) (2026-05-07)
 
 

package/package.json

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

package/react/ProgressionBanner/Readme.md

@@ -12,7 +12,7 @@ import { BreakpointsProvider } from "cozy-ui/transpiled/react/providers/Breakpoi
 const { progression } = useProgression();
 
 const initialVariants = [
-  { withValue: true, progressBar: true, withButton: false },
+  { withValue: true, progressBar: true, withButton: false, customColor: false },
 ];
 
 <BreakpointsProvider>
@@ -21,6 +21,7 @@ const initialVariants = [
       <ProgressionBanner
         progressBar={variant.progressBar}
         value={variant.withValue && progression}
+        color={variant.customColor ? 'var(--errorColorLight)': undefined}
         text={
           variant.withButton
             ? "Storage limit nearly reached"

package/react/ProgressionBanner/index.jsx

@@ -19,7 +19,7 @@ const styles = () => ({
 })
 
 const ProgressionBanner = withStyles(styles)(
-  ({ classes, value, text, icon, button, progressBar }) => {
+  ({ classes, value, text, icon, button, progressBar, color }) => {
     const variant = value ? 'determinate' : undefined
     const { isMobile } = useBreakpoints()
 
@@ -32,7 +32,7 @@ const ProgressionBanner = withStyles(styles)(
       <>
         <Alert
           icon={_icon}
-          color="var(--contrastBackgroundColor)"
+          color={color}
           square
           block={isMobile}
           action={button}
@@ -63,11 +63,14 @@ ProgressionBanner.propTypes = {
   /** Button to use in the banner */
   button: PropTypes.node,
   /** Progression bar is hidden if set to false (defaults to true) */
-  progressBar: PropTypes.bool
+  progressBar: PropTypes.bool,
+  /** Background color of the banner, css color */
+  color: PropTypes.string
 }
 
 ProgressionBanner.defaultProps = {
-  progressBar: true
+  progressBar: true,
+  color: 'var(--contrastBackgroundColor)'
 }
 
 export default ProgressionBanner

package/react/hooks/useSubmitWithLoader/index.jsx

@@ -0,0 +1,36 @@
+import { useState } from 'react'
+import { useI18n } from 'twake-i18n'
+
+import { useAlert } from '../../providers/Alert'
+
+export const useSubmitWithLoader = () => {
+  const [isLoading, setIsLoading] = useState(false)
+  const { showAlert } = useAlert()
+  const { t } = useI18n()
+
+  const onSubmit = async ({ submit, success, error }) => {
+    setIsLoading(true)
+
+    try {
+      await submit()
+
+      showAlert({
+        severity: 'success',
+        message: success?.message || t('useSubmitWithLoader.success')
+      })
+
+      success?.action()
+    } catch (e) {
+      showAlert({
+        severity: 'error',
+        message: error?.message(e) || t('useSubmitWithLoader.error', { error })
+      })
+
+      error?.action()
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return { onSubmit, isLoading }
+}

package/react/hooks/useSubmitWithLoader/locales/en.json

@@ -0,0 +1,6 @@
+{
+  "useSubmitWithLoader": {
+    "success": "Success!",
+    "error": "An error occured %{error}"
+  }
+}

package/react/hooks/useSubmitWithLoader/locales/fr.json

@@ -0,0 +1,6 @@
+{
+  "useSubmitWithLoader": {
+    "success": "Succès !",
+    "error": "Une erreur est survenue %{error}"
+  }
+}

package/react/hooks/useSubmitWithLoader/locales/ru.json

@@ -0,0 +1,6 @@
+{
+  "useSubmitWithLoader": {
+    "success": "Успешно!",
+    "error": "Произошла ошибка %{error}"
+  }
+}

package/react/hooks/useSubmitWithLoader/locales/vi.json

@@ -0,0 +1,6 @@
+{
+  "useSubmitWithLoader": {
+    "success": "Thành công!",
+    "error": "Đã xảy ra lỗi %{error}"
+  }
+}

package/transpiled/react/ProgressionBanner/index.js

@@ -30,7 +30,8 @@ var ProgressionBanner = withStyles(styles)(function (_ref) {
       text = _ref.text,
       icon = _ref.icon,
       button = _ref.button,
-      progressBar = _ref.progressBar;
+      progressBar = _ref.progressBar,
+      color = _ref.color;
   var variant = value ? 'determinate' : undefined;
 
   var _useBreakpoints = useBreakpoints(),
@@ -46,7 +47,7 @@ var ProgressionBanner = withStyles(styles)(function (_ref) {
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Alert, {
     icon: _icon,
-    color: "var(--contrastBackgroundColor)",
+    color: color,
     square: true,
     block: isMobile,
     action: button
@@ -73,9 +74,13 @@ ProgressionBanner.propTypes = {
   button: PropTypes.node,
 
   /** Progression bar is hidden if set to false (defaults to true) */
-  progressBar: PropTypes.bool
+  progressBar: PropTypes.bool,
+
+  /** Background color of the banner, css color */
+  color: PropTypes.string
 };
 ProgressionBanner.defaultProps = {
-  progressBar: true
+  progressBar: true,
+  color: 'var(--contrastBackgroundColor)'
 };
 export default ProgressionBanner;

package/transpiled/react/hooks/useSubmitWithLoader/index.d.ts

@@ -0,0 +1,8 @@
+export function useSubmitWithLoader(): {
+    onSubmit: ({ submit, success, error }: {
+        submit: any;
+        success: any;
+        error: any;
+    }) => Promise<void>;
+    isLoading: boolean;
+};

package/transpiled/react/hooks/useSubmitWithLoader/index.js

@@ -0,0 +1,74 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { useState } from 'react';
+import { useI18n } from 'twake-i18n';
+import { useAlert } from "cozy-ui/transpiled/react/providers/Alert";
+export var useSubmitWithLoader = function useSubmitWithLoader() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isLoading = _useState2[0],
+      setIsLoading = _useState2[1];
+
+  var _useAlert = useAlert(),
+      showAlert = _useAlert.showAlert;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var onSubmit = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
+      var submit, success, error;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              submit = _ref.submit, success = _ref.success, error = _ref.error;
+              setIsLoading(true);
+              _context.prev = 2;
+              _context.next = 5;
+              return submit();
+
+            case 5:
+              showAlert({
+                severity: 'success',
+                message: (success === null || success === void 0 ? void 0 : success.message) || t('useSubmitWithLoader.success')
+              });
+              success === null || success === void 0 ? void 0 : success.action();
+              _context.next = 13;
+              break;
+
+            case 9:
+              _context.prev = 9;
+              _context.t0 = _context["catch"](2);
+              showAlert({
+                severity: 'error',
+                message: (error === null || error === void 0 ? void 0 : error.message(_context.t0)) || t('useSubmitWithLoader.error', {
+                  error: error
+                })
+              });
+              error === null || error === void 0 ? void 0 : error.action();
+
+            case 13:
+              _context.prev = 13;
+              setIsLoading(false);
+              return _context.finish(13);
+
+            case 16:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[2, 9, 13, 16]]);
+    }));
+
+    return function onSubmit(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  return {
+    onSubmit: onSubmit,
+    isLoading: isLoading
+  };
+};