cozy-ui-plus 12.2.1 → 12.3.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [12.3.0](https://github.com/cozy/cozy-libs/compare/cozy-ui-plus@12.2.1...cozy-ui-plus@12.3.0) (2026-07-28)
+
+### Features
+
+- **intent:** Support forced themes ([b207c1c](https://github.com/cozy/cozy-libs/commit/b207c1c488d26cfc60b1408ad356983a8aa2cd66))
+
 ## [12.2.1](https://github.com/cozy/cozy-libs/compare/cozy-ui-plus@12.2.0...cozy-ui-plus@12.2.1) (2026-07-28)
 
 **Note:** Version bump only for package cozy-ui-plus

package/dist/Intent/IntentDialogOpener/index.js

@@ -21,6 +21,8 @@ var _CozyDialogs = require("cozy-ui/transpiled/react/CozyDialogs");
 
 var _Dialog = _interopRequireDefault(require("cozy-ui/transpiled/react/Dialog"));
 
+var _CozyTheme = _interopRequireDefault(require("cozy-ui/transpiled/react/providers/CozyTheme"));
+
 var _IntentIframe = _interopRequireWildcard(require("../IntentIframe"));
 
 var _excluded = ["options", "action", "doctype", "children", "closable", "showCloseButton", "create", "tag", "onComplete", "onDismiss", "onReadyToUse", "waitForReadyToUse", "iframeProps", "Component"];
@@ -34,6 +36,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * for the specified intent.
  */
 var IntentDialogOpener = function IntentDialogOpener(props) {
+  var _options$theme;
+
   var options = props.options,
       action = props.action,
       doctype = props.doctype,
@@ -77,14 +81,18 @@ var IntentDialogOpener = function IntentDialogOpener(props) {
 
   var Tag = tag; // React needs uppercase element names
 
+  var themeType = options === null || options === void 0 ? void 0 : (_options$theme = options.theme) === null || _options$theme === void 0 ? void 0 : _options$theme.type;
+  var forcedTheme = ['light', 'dark'].includes(themeType) ? themeType : undefined;
   var elements = [/*#__PURE__*/_react.default.cloneElement(children, {
     key: 'opener',
     onClick: openModal
   })];
 
   if (modalOpened) {
-    elements.push( /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    elements.push( /*#__PURE__*/_react.default.createElement(_CozyTheme.default, {
       key: "intent-modal",
+      type: forcedTheme
+    }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
       open: modalOpened,
       onClose: closable && handleDismiss
     }, componentProps), closable && showCloseButton && /*#__PURE__*/_react.default.createElement(_CozyDialogs.DialogCloseButton, {
@@ -99,7 +107,7 @@ var IntentDialogOpener = function IntentDialogOpener(props) {
       onReadyToUse: onReadyToUse,
       waitForReadyToUse: waitForReadyToUse,
       iframeProps: iframeProps
-    })));
+    }))));
   }
 
   return /*#__PURE__*/_react.default.createElement(Tag, null, elements);
@@ -124,6 +132,13 @@ IntentDialogOpener.propTypes = {
   /** Action you want to execute */
   action: _propTypes.default.string.isRequired,
 
+  /** Options passed to the intent */
+  options: _propTypes.default.shape({
+    theme: _propTypes.default.shape({
+      type: _propTypes.default.oneOf(['light', 'dark'])
+    })
+  }),
+
   /** Doctype on which you want to execute the action */
   doctype: _propTypes.default.string.isRequired,
 

package/dist/Intent/IntentIframe/index.js

@@ -35,6 +35,8 @@ var _cozyInterapp = require("cozy-interapp");
 
 var _Spinner = _interopRequireDefault(require("cozy-ui/transpiled/react/Spinner"));
 
+var _CozyTheme = _interopRequireDefault(require("cozy-ui/transpiled/react/providers/CozyTheme"));
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -152,9 +154,11 @@ var IntentIframe = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
+      var _data$theme,
+          _this3 = this;
 
       var _this$props3 = this.props,
+          data = _this$props3.data,
           iframeProps = _this$props3.iframeProps,
           waitForReadyToUse = _this$props3.waitForReadyToUse;
       var _this$state = this.state,
@@ -162,7 +166,13 @@ var IntentIframe = /*#__PURE__*/function (_React$Component) {
           frameLoaded = _this$state.frameLoaded,
           readyToUse = _this$state.readyToUse;
       var loading = error === null && (!frameLoaded || waitForReadyToUse && !readyToUse);
-      return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+      var themeType = data === null || data === void 0 ? void 0 : (_data$theme = data.theme) === null || _data$theme === void 0 ? void 0 : _data$theme.type;
+      var forcedTheme = ['light', 'dark'].includes(themeType) ? themeType : null;
+      return /*#__PURE__*/_react.default.createElement(_CozyTheme.default, {
+        type: forcedTheme,
+        ignoreItself: false,
+        className: styles.intentContainer
+      }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
         ref: function ref(intentViewer) {
           return _this3.intentViewer = intentViewer;
         },
@@ -176,7 +186,7 @@ var IntentIframe = /*#__PURE__*/function (_React$Component) {
         size: "xxlarge"
       }, (0, _get.default)(iframeProps, 'spinnerProps')))), error && /*#__PURE__*/_react.default.createElement("div", {
         className: styles.intentContainer__error
-      }, error.message));
+      }, error.message)));
     }
   }]);
   return IntentIframe;

package/dist/src/Intent/IntentDialogOpener/index.d.ts

@@ -12,6 +12,11 @@ declare namespace IntentDialogOpener {
         export let onReadyToUse: PropTypes.Requireable<(...args: any[]) => any>;
         export let waitForReadyToUse: PropTypes.Requireable<boolean>;
         export let action: PropTypes.Validator<string>;
+        export let options: PropTypes.Requireable<PropTypes.InferProps<{
+            theme: PropTypes.Requireable<PropTypes.InferProps<{
+                type: PropTypes.Requireable<string>;
+            }>>;
+        }>>;
         export let doctype: PropTypes.Validator<string>;
         export let closable: PropTypes.Validator<boolean>;
         export let showCloseButton: PropTypes.Validator<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui-plus",
-  "version": "12.2.1",
+  "version": "12.3.0",
   "description": "Cozy-ui-plus is an extension of cozy-ui and provides components based on cozy-client",
   "main": "dist/index.js",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "cozy-intent": "^2.31.1",
     "cozy-interapp": "^0.18.2",
     "cozy-logger": "^1.18.1",
-    "cozy-sharing": "^37.2.5",
+    "cozy-sharing": "^37.2.6",
     "cozy-stack-client": "^60.21.1",
     "cozy-ui": "^138.1.0",
     "jest": "30.3.0",
@@ -78,5 +78,5 @@
     "react-dom": "^16 || ^17 || ^18",
     "twake-i18n": ">=0.3.0"
   },
-  "gitHead": "663ae9860187ebdc6d6a2cfa2e7919d8a39c824f"
+  "gitHead": "84d402f452f6acd67084d91bb58040ded4ca3254"
 }

package/src/Intent/IntentDialogOpener/Readme.md

@@ -16,6 +16,7 @@ import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
     fullWidth // extra props will be passed to the dialog
     maxWidth="md" // extra props will be passed to the dialog
     iframeProps={{ spinnerProps: { middle: true } }}
+    options={{ theme: { type: 'dark' } }}
     waitForReadyToUse
     onComplete={res => alert('intent has completed ! ' + JSON.stringify(res))}
     onDismiss={() => alert('intent has been dismissed !')}
@@ -28,3 +29,7 @@ import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 Set `waitForReadyToUse` to keep the intent hidden behind the loading spinner
 until its service sends the `readyToUse` signal. This option is disabled by
 default because older intent services do not send this signal.
+
+Set `options.theme.type` to `light` or `dark` to force that theme on the
+dialog, close button and loading surface as well as passing it to the intent
+service. Any other value or no value keeps the caller's theme.

package/src/Intent/IntentDialogOpener/index.jsx

@@ -3,6 +3,7 @@ import React, { useState } from 'react'
 
 import { DialogCloseButton } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Dialog from 'cozy-ui/transpiled/react/Dialog'
+import CozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'
 
 import IntentIframe, { iframeProps } from '../IntentIframe'
 
@@ -48,33 +49,38 @@ const IntentDialogOpener = props => {
   }
 
   const Tag = tag // React needs uppercase element names
+  const themeType = options?.theme?.type
+  const forcedTheme = ['light', 'dark'].includes(themeType)
+    ? themeType
+    : undefined
   const elements = [
     React.cloneElement(children, { key: 'opener', onClick: openModal })
   ]
 
   if (modalOpened) {
     elements.push(
-      <Component
-        key="intent-modal"
-        open={modalOpened}
-        onClose={closable && handleDismiss}
-        {...componentProps}
-      >
-        {closable && showCloseButton && (
-          <DialogCloseButton onClick={handleDismiss} />
-        )}
-        <IntentIframe
-          action={action}
-          type={doctype}
-          data={options}
-          create={create}
-          onCancel={handleDismiss}
-          onTerminate={handleComplete}
-          onReadyToUse={onReadyToUse}
-          waitForReadyToUse={waitForReadyToUse}
-          iframeProps={iframeProps}
-        />
-      </Component>
+      <CozyTheme key="intent-modal" type={forcedTheme}>
+        <Component
+          open={modalOpened}
+          onClose={closable && handleDismiss}
+          {...componentProps}
+        >
+          {closable && showCloseButton && (
+            <DialogCloseButton onClick={handleDismiss} />
+          )}
+          <IntentIframe
+            action={action}
+            type={doctype}
+            data={options}
+            create={create}
+            onCancel={handleDismiss}
+            onTerminate={handleComplete}
+            onReadyToUse={onReadyToUse}
+            waitForReadyToUse={waitForReadyToUse}
+            iframeProps={iframeProps}
+          />
+        </Component>
+      </CozyTheme>
     )
   }
 
@@ -94,6 +100,12 @@ IntentDialogOpener.propTypes = {
   waitForReadyToUse: PropTypes.bool,
   /** Action you want to execute */
   action: PropTypes.string.isRequired,
+  /** Options passed to the intent */
+  options: PropTypes.shape({
+    theme: PropTypes.shape({
+      type: PropTypes.oneOf(['light', 'dark'])
+    })
+  }),
   /** Doctype on which you want to execute the action */
   doctype: PropTypes.string.isRequired,
   /** Whether the dialog is closable by itself (not by the Intent) with a button or by clicking outside of it */

package/src/Intent/IntentIframe/Readme.md

@@ -14,7 +14,7 @@ import utils from '../../docs/utils'
 <IntentIframe
   action="PICK"
   create={utils.fakeIntentCreate}
-  data={{folder: '840af7e7be6c41bed3c5b76d03f66328'}}
+  data={{folder: '840af7e7be6c41bed3c5b76d03f66328', theme: { type: 'dark' }}}
   type="io.cozy.files"
   onCancel={() => alert('intent cancelled')}
   onError={(error) => alert('intent has failed with error: ' + error.message)}
@@ -27,6 +27,10 @@ Set `waitForReadyToUse` to keep the intent hidden behind the loading spinner
 until its service sends the `readyToUse` signal. This option is disabled by
 default because older intent services do not send this signal.
 
+Set `data.theme.type` to `light` or `dark` to force that theme on the
+loading surface and pass it to the intent service. Any other value or no value
+keeps the caller's theme.
+
 ### Within an application side controled Dialog
 
 Sometimes you have to render an Intent inside a modal, and handle the modal opening state on the application side. You can then use IntentIframe wrapped in a Dialog for that use case, instead of using IntentDialogOpener component (that is useful to start a new intent modal from a click on a button).

package/src/Intent/IntentIframe/index.jsx

@@ -7,6 +7,7 @@ import React from 'react'
 import { withClient } from 'cozy-client'
 import { Intents } from 'cozy-interapp'
 import Spinner from 'cozy-ui/transpiled/react/Spinner'
+import CozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'
 
 import styles from './styles.styl'
 
@@ -79,30 +80,37 @@ class IntentIframe extends React.Component {
   }
 
   render() {
-    const { iframeProps, waitForReadyToUse } = this.props
+    const { data, iframeProps, waitForReadyToUse } = this.props
     const { error, frameLoaded, readyToUse } = this.state
     const loading =
       error === null && (!frameLoaded || (waitForReadyToUse && !readyToUse))
-
+    const themeType = data?.theme?.type
+    const forcedTheme = ['light', 'dark'].includes(themeType) ? themeType : null
     return (
-      <div
-        ref={intentViewer => (this.intentViewer = intentViewer)}
+      <CozyTheme
+        type={forcedTheme}
+        ignoreItself={false}
         className={styles.intentContainer}
-        aria-busy={loading}
-        data-iframe-loaded={frameLoaded}
-        data-waiting-for-ready-to-use={waitForReadyToUse && !readyToUse}
-        {...get(iframeProps, 'wrapperProps')}
       >
-        {loading && (
-          <div className={styles.intentContainer__loader}>
-            <Spinner size="xxlarge" {...get(iframeProps, 'spinnerProps')} />
-          </div>
-        )}
-        {error && (
-          <div className={styles.intentContainer__error}>{error.message}</div>
-        )}
-        {/* intent iframe will be appended here */}
-      </div>
+        <div
+          ref={intentViewer => (this.intentViewer = intentViewer)}
+          className={styles.intentContainer}
+          aria-busy={loading}
+          data-iframe-loaded={frameLoaded}
+          data-waiting-for-ready-to-use={waitForReadyToUse && !readyToUse}
+          {...get(iframeProps, 'wrapperProps')}
+        >
+          {loading && (
+            <div className={styles.intentContainer__loader}>
+              <Spinner size="xxlarge" {...get(iframeProps, 'spinnerProps')} />
+            </div>
+          )}
+          {error && (
+            <div className={styles.intentContainer__error}>{error.message}</div>
+          )}
+          {/* intent iframe will be appended here */}
+        </div>
+      </CozyTheme>
     )
   }
 }

package/src/Intent/IntentIframe/index.spec.jsx

@@ -7,7 +7,7 @@ jest.mock('cozy-ui/transpiled/react/Spinner', () => () => (
   <div data-testid="intent-spinner" />
 ))
 
-function setup({ startError = null, waitForReadyToUse = false } = {}) {
+function setup({ data, startError = null, waitForReadyToUse = false } = {}) {
   let startOptions
   const start = jest.fn((element, options) => {
     startOptions = options
@@ -24,6 +24,7 @@ function setup({ startError = null, waitForReadyToUse = false } = {}) {
       action="PICK"
       client={{}}
       create={create}
+      data={data}
       iframeProps={{ setIsLoading }}
       onCancel={jest.fn()}
       onError={onError}