cozy-ui 131.1.0 → 132.0.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# [132.0.0](https://github.com/cozy/cozy-ui/compare/v131.2.0...v132.0.0) (2025-10-27)
+
+
+### Features
+
+* **AppSections:** Replace cozy-flags by `config` prop ([6ecdad0](https://github.com/cozy/cozy-ui/commit/6ecdad0))
+* **Paywall:** Replace cozy-flags by `isIapEnabled` prop ([953f28a](https://github.com/cozy/cozy-ui/commit/953f28a))
+* **QualificationGrid:** Replace cozy-flags by `noHealth` prop ([68f14dc](https://github.com/cozy/cozy-ui/commit/68f14dc))
+* Remove cozy-flags from peerDeps ([5131237](https://github.com/cozy/cozy-ui/commit/5131237))
+
+
+### BREAKING CHANGES
+
+* **AppSections:** You must use `config={flag('store.alternative-source')}` prop
+* **QualificationGrid:** You must use `noHealth={flag('hide.healthTheme.enabled')}` prop
+* **Paywall:** You must use `isIapEnabled={flag('flagship.iap.enabled')}` prop
+* You no longer need to install `cozy-flags` package
+
+# [131.2.0](https://github.com/cozy/cozy-ui/compare/v131.1.0...v131.2.0) (2025-10-27)
+
+
+### Features
+
+* Change peerDep config for `react` and `react-dom` ([a923bfc](https://github.com/cozy/cozy-ui/commit/a923bfc))
+
 # [131.1.0](https://github.com/cozy/cozy-ui/compare/v131.0.1...v131.1.0) (2025-10-22)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "131.1.0",
+  "version": "132.0.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -194,12 +194,11 @@
   "peerDependencies": {
     "cozy-client": ">=60.5.0",
     "cozy-device-helper": ">=2.0.0",
-    "cozy-flags": ">=2.10.1",
     "cozy-intent": ">=2.29.1",
-    "react": "^16.14.0",
+    "react": "^16 || ^17 || ^18",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^16.14.0"
+    "react-dom": "^16 || ^17 || ^18"
   },
   "eslintConfig": {
     "extends": [

package/react/AppSections/Sections.jsx

@@ -2,8 +2,6 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
-import flag from 'cozy-flags'
-
 import styles from './Sections.styl'
 import * as catUtils from './categories'
 import AppsSection from './components/AppsSection'
@@ -228,8 +226,7 @@ export class Sections extends Component {
   }
 }
 
-const SectionsWrapper = props => {
-  const config = flag('store.alternative-source')
+const SectionsWrapper = ({ config, ...props }) => {
   const i18nConfig = generateI18nConfig(config?.categories)
   useExtendI18n(i18nConfig)
 
@@ -246,6 +243,7 @@ Sections.propTypes = {
   apps: PropTypes.array.isRequired,
   error: PropTypes.object,
 
+  config: PropTypes.object,
   onAppClick: PropTypes.func.isRequired,
 
   /** Whether to display the category selector */

package/react/Paywall/Paywall.jsx

@@ -4,7 +4,6 @@ import React, { useEffect, useState } from 'react'
 import { useInstanceInfo } from 'cozy-client'
 import { buildPremiumLink } from 'cozy-client/dist/models/instance'
 import { isFlagshipApp } from 'cozy-device-helper'
-import flag from 'cozy-flags'
 import { useWebviewIntent } from 'cozy-intent'
 
 import { makeType } from './helpers'
@@ -21,7 +20,13 @@ import { useI18n } from '../providers/I18n'
 /**
  * Component with the core logic of the paywall, which is then declined in several variants to adapt to the user case
  */
-const Paywall = ({ variant, onClose, isPublic, contentInterpolation }) => {
+const Paywall = ({
+  variant,
+  onClose,
+  isPublic,
+  isIapEnabled,
+  contentInterpolation
+}) => {
   const instanceInfo = useInstanceInfo()
   const { t } = useI18n()
 
@@ -54,9 +59,7 @@ const Paywall = ({ variant, onClose, isPublic, contentInterpolation }) => {
 
   const canOpenPremiumLink =
     !isFlagshipApp() ||
-    (isFlagshipApp() &&
-      !!flag('flagship.iap.enabled') &&
-      isFlagshipAppIapAvailable)
+    (isFlagshipApp() && isIapEnabled && isFlagshipAppIapAvailable)
 
   const link = buildPremiumLink(instanceInfo)
   const type = makeType(instanceInfo, isPublic, link)
@@ -112,12 +115,15 @@ Paywall.propTypes = {
   onClose: PropTypes.func.isRequired,
   /** Whether paywall is display in a public context */
   isPublic: PropTypes.bool,
+  /** Whether the IAP is enabled */
+  isIapEnabled: PropTypes.bool,
   /** Translation interpolation for the content of the paywall */
   contentInterpolation: PropTypes.object
 }
 
 Paywall.defaultProps = {
   isPublic: false,
+  isIapEnabled: false,
   contentInterpolation: {}
 }
 

package/react/Paywall/Paywall.spec.jsx

@@ -3,7 +3,6 @@ import React from 'react'
 
 import { createMockClient, useInstanceInfo } from 'cozy-client'
 import { isFlagshipApp } from 'cozy-device-helper'
-import flag from 'cozy-flags'
 import { useWebviewIntent } from 'cozy-intent'
 
 import Paywall from './Paywall'
@@ -21,7 +20,6 @@ jest.mock('cozy-intent', () => ({
   ...jest.requireActual('cozy-intent'),
   useWebviewIntent: jest.fn()
 }))
-jest.mock('cozy-flags')
 
 describe('Paywall', () => {
   const onCloseSpy = jest.fn()
@@ -36,7 +34,7 @@ describe('Paywall', () => {
     enablePremiumLinks = false,
     hasUuid = false,
     isFlagshipApp: isFlagshipAppReturnValue = false,
-    isIapEnabled = null,
+    isIapEnabled = false,
     isIapAvailable = false
   } = {}) => {
     useInstanceInfo.mockReturnValue({
@@ -55,7 +53,6 @@ describe('Paywall', () => {
     })
 
     isFlagshipApp.mockReturnValue(isFlagshipAppReturnValue)
-    flag.mockReturnValue(isIapEnabled)
     const mockCall = jest.fn().mockResolvedValue(isIapAvailable)
     useWebviewIntent.mockReturnValue({
       call: mockCall
@@ -68,6 +65,7 @@ describe('Paywall', () => {
           variant="onlyOffice"
           onClose={onCloseSpy}
           isPublic={isPublic}
+          isIapEnabled={isIapEnabled}
         />
       </DemoProvider>
     )

package/react/Paywall/Readme.md

@@ -31,6 +31,7 @@ import Button from 'cozy-ui/transpiled/react/Buttons'
 const initialVariants = [
   {
     isPublic: false,
+    isIapEnabled: false,
     premiumLink: false
   }
 ]
@@ -124,6 +125,7 @@ const makeClient = premiumLink => ({
         {state.modalOpened && (
           <PaywallComponent
             isPublic={variant.isPublic}
+            isIapEnabled={variant.isIapEnabled}
             max={4}
             days={30}
             konnectorName="EDF"

package/react/QualificationGrid/Readme.md

@@ -3,7 +3,7 @@ import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import QualificationGrid from 'cozy-ui/transpiled/react/QualificationGrid'
 import Variants from 'cozy-ui/docs/components/Variants'
 
-const initialVariants = [{ noUndefined: false, noOthers: false }]
+const initialVariants = [{ noUndefined: false, noOthers: false, noHealth: false }]
 initialState = { selectedQualification: undefined }
 
 ;
@@ -16,6 +16,7 @@ initialState = { selectedQualification: undefined }
         <QualificationGrid
           noUndefined={variant.noUndefined}
           noOthers={variant.noOthers}
+          noHealth={variant.noHealth}
           onClick={qualification => setState({ selectedQualification: qualification })}
         />
       </>

package/react/QualificationGrid/helpers.js

@@ -1,7 +1,4 @@
 import { themesList } from 'cozy-client/dist/models/document/documentTypeData'
-import flag from 'cozy-flags'
 
-export const getThemesList = () =>
-  flag('hide.healthTheme.enabled')
-    ? themesList.filter(theme => theme.label !== 'health')
-    : themesList
+export const getThemesList = noHealth =>
+  noHealth ? themesList.filter(theme => theme.label !== 'health') : themesList

package/react/QualificationGrid/index.jsx

@@ -10,10 +10,10 @@ import CarIcon from '../Icons/Car'
 import ChessIcon from '../Icons/Chess'
 import DotsIcon from '../Icons/Dots'
 import HeartIcon from '../Icons/Heart'
+import HomeIcon from '../Icons/Home'
 import PeopleIcon from '../Icons/People'
 import TeamIcon from '../Icons/Team'
 import WorkIcon from '../Icons/Work'
-import HomeIcon from '../Icons/Home'
 import QualificationItem from '../QualificationItem'
 import { useI18n } from '../providers/I18n'
 
@@ -30,8 +30,8 @@ const IconByName = {
   dots: DotsIcon
 }
 
-const QualificationGrid = ({ noUndefined, noOthers, onClick }) => {
-  const themesList = getThemesList()
+const QualificationGrid = ({ noUndefined, noOthers, noHealth, onClick }) => {
+  const themesList = getThemesList(noHealth)
   const { t } = useI18n()
   const [selectedQualification, setSelectedQualification] = useState()
 
@@ -72,6 +72,7 @@ const QualificationGrid = ({ noUndefined, noOthers, onClick }) => {
 QualificationGrid.defaultProps = {
   noUndefined: false,
   noOthers: false,
+  noHealth: false,
   onClick: () => {}
 }
 
@@ -80,6 +81,8 @@ QualificationGrid.propTypes = {
   noUndefined: PropTypes.bool,
   /** Remove `others` theme */
   noOthers: PropTypes.bool,
+  /** Remove `health` theme */
+  noHealth: PropTypes.bool,
   /** Triggered when an item is clicked */
   onClick: PropTypes.func
 }

package/transpiled/react/AppSections/Sections.d.ts

@@ -19,6 +19,7 @@ export namespace Sections {
         const t: PropTypes.Validator<(...args: any[]) => any>;
         const apps: PropTypes.Validator<any[]>;
         const error: PropTypes.Requireable<object>;
+        const config: PropTypes.Requireable<object>;
         const onAppClick: PropTypes.Validator<(...args: any[]) => any>;
         const hasNav: PropTypes.Requireable<boolean>;
         const initialSearch: PropTypes.Requireable<object>;

package/transpiled/react/AppSections/Sections.js

@@ -1,3 +1,4 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -5,6 +6,7 @@ import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+var _excluded = ["config"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -13,7 +15,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import flag from 'cozy-flags';
 var styles = {
   "Sections__section": "Sections__Sections__section___2onYy"
 };
@@ -362,8 +363,10 @@ export var Sections = /*#__PURE__*/function (_Component) {
   return Sections;
 }(Component);
 
-var SectionsWrapper = function SectionsWrapper(props) {
-  var config = flag('store.alternative-source');
+var SectionsWrapper = function SectionsWrapper(_ref5) {
+  var config = _ref5.config,
+      props = _objectWithoutProperties(_ref5, _excluded);
+
   var i18nConfig = generateI18nConfig(config === null || config === void 0 ? void 0 : config.categories);
   useExtendI18n(i18nConfig);
 
@@ -383,6 +386,7 @@ Sections.propTypes = {
   /** List of apps that will be displayed into categories */
   apps: PropTypes.array.isRequired,
   error: PropTypes.object,
+  config: PropTypes.object,
   onAppClick: PropTypes.func.isRequired,
 
   /** Whether to display the category selector */

package/transpiled/react/Paywall/Paywall.js

@@ -12,7 +12,6 @@ import React, { useEffect, useState } from 'react';
 import { useInstanceInfo } from 'cozy-client';
 import { buildPremiumLink } from 'cozy-client/dist/models/instance';
 import { isFlagshipApp } from 'cozy-device-helper';
-import flag from 'cozy-flags';
 import { useWebviewIntent } from 'cozy-intent';
 import { makeType } from "cozy-ui/transpiled/react/Paywall/helpers";
 import withPaywallLocales from "cozy-ui/transpiled/react/Paywall/locales/withPaywallLocales";
@@ -32,6 +31,7 @@ var Paywall = function Paywall(_ref) {
   var variant = _ref.variant,
       onClose = _ref.onClose,
       isPublic = _ref.isPublic,
+      isIapEnabled = _ref.isIapEnabled,
       contentInterpolation = _ref.contentInterpolation;
   var instanceInfo = useInstanceInfo();
 
@@ -113,7 +113,7 @@ var Paywall = function Paywall(_ref) {
     })),
     onClose: onClose
   });
-  var canOpenPremiumLink = !isFlagshipApp() || isFlagshipApp() && !!flag('flagship.iap.enabled') && isFlagshipAppIapAvailable;
+  var canOpenPremiumLink = !isFlagshipApp() || isFlagshipApp() && isIapEnabled && isFlagshipAppIapAvailable;
   var link = buildPremiumLink(instanceInfo);
   var type = makeType(instanceInfo, isPublic, link);
 
@@ -157,11 +157,15 @@ Paywall.propTypes = {
   /** Whether paywall is display in a public context */
   isPublic: PropTypes.bool,
 
+  /** Whether the IAP is enabled */
+  isIapEnabled: PropTypes.bool,
+
   /** Translation interpolation for the content of the paywall */
   contentInterpolation: PropTypes.object
 };
 Paywall.defaultProps = {
   isPublic: false,
+  isIapEnabled: false,
   contentInterpolation: {}
 };
 export default withPaywallLocales(Paywall);

package/transpiled/react/QualificationGrid/helpers.d.ts

@@ -1 +1 @@
-export function getThemesList(): any;
+export function getThemesList(noHealth: any): any;

package/transpiled/react/QualificationGrid/helpers.js

@@ -1,7 +1,6 @@
 import { themesList } from 'cozy-client/dist/models/document/documentTypeData';
-import flag from 'cozy-flags';
-export var getThemesList = function getThemesList() {
-  return flag('hide.healthTheme.enabled') ? themesList.filter(function (theme) {
+export var getThemesList = function getThemesList(noHealth) {
+  return noHealth ? themesList.filter(function (theme) {
     return theme.label !== 'health';
   }) : themesList;
 };

package/transpiled/react/QualificationGrid/index.js

@@ -10,10 +10,10 @@ import CarIcon from "cozy-ui/transpiled/react/Icons/Car";
 import ChessIcon from "cozy-ui/transpiled/react/Icons/Chess";
 import DotsIcon from "cozy-ui/transpiled/react/Icons/Dots";
 import HeartIcon from "cozy-ui/transpiled/react/Icons/Heart";
+import HomeIcon from "cozy-ui/transpiled/react/Icons/Home";
 import PeopleIcon from "cozy-ui/transpiled/react/Icons/People";
 import TeamIcon from "cozy-ui/transpiled/react/Icons/Team";
 import WorkIcon from "cozy-ui/transpiled/react/Icons/Work";
-import HomeIcon from "cozy-ui/transpiled/react/Icons/Home";
 import QualificationItem from "cozy-ui/transpiled/react/QualificationItem";
 import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
 var IconByName = {
@@ -32,8 +32,9 @@ var IconByName = {
 var QualificationGrid = function QualificationGrid(_ref) {
   var noUndefined = _ref.noUndefined,
       noOthers = _ref.noOthers,
+      noHealth = _ref.noHealth,
       onClick = _ref.onClick;
-  var themesList = getThemesList();
+  var themesList = getThemesList(noHealth);
 
   var _useI18n = useI18n(),
       t = _useI18n.t;
@@ -82,6 +83,7 @@ var QualificationGrid = function QualificationGrid(_ref) {
 QualificationGrid.defaultProps = {
   noUndefined: false,
   noOthers: false,
+  noHealth: false,
   onClick: function onClick() {}
 };
 QualificationGrid.propTypes = {
@@ -91,6 +93,9 @@ QualificationGrid.propTypes = {
   /** Remove `others` theme */
   noOthers: PropTypes.bool,
 
+  /** Remove `health` theme */
+  noHealth: PropTypes.bool,
+
   /** Triggered when an item is clicked */
   onClick: PropTypes.func
 };