cozy-ui 111.1.1 → 111.2.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [111.2.0](https://github.com/cozy/cozy-ui/compare/v111.1.1...v111.2.0) (2024-07-25)
+
+
+### Features
+
+* **CozyTheme:** Add `ignoreCozySettings` prop to bypass settings query ([e49a312](https://github.com/cozy/cozy-ui/commit/e49a312))
+
 ## [111.1.1](https://github.com/cozy/cozy-ui/compare/v111.1.0...v111.1.1) (2024-07-18)
 
 

package/package.json

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

package/react/providers/CozyTheme/CozyThemeWithQuery.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { useQuery, isQueryLoading, hasQueryBeenLoaded } from 'cozy-client'
 
 import { buildSettingsInstanceQuery } from './queries'
-import { DumbCozyTheme } from './index'
+import DumbCozyTheme from './DumbCozyTheme'
 
 const CozyThemeWithQuery = props => {
   const instanceQuery = buildSettingsInstanceQuery()

package/react/providers/CozyTheme/DumbCozyTheme.jsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import cx from 'classnames'
+
+import flag from 'cozy-flags'
+import useMediaQuery from '../../hooks/useMediaQuery'
+import MuiCozyTheme from '../../MuiCozyTheme'
+
+import { CozyThemeContext } from './index'
+
+const DumbCozyTheme = ({
+  variant,
+  className,
+  ignoreItself,
+  settingsThemeType,
+  children
+}) => {
+  const uiThemeType = localStorage.getItem('ui-theme-type') // use only for cozy-ui documentation and argos screenshots
+  const uiThemeVariant = localStorage.getItem('ui-theme-variant') // use only for cozy-ui documentation and argos screenshots
+
+  const isOnlyLight = !!flag('ui.darkmode.enabled') // should be remove when dark mode is validated on all apps
+  const deviceThemeType = useMediaQuery('(prefers-color-scheme: dark)')
+    ? isOnlyLight
+      ? 'dark'
+      : 'light'
+    : 'light'
+  const filteredSettingsThemeType = ['light', 'dark'].includes(
+    settingsThemeType
+  )
+    ? settingsThemeType
+    : undefined
+
+  const selfThemeType =
+    uiThemeType || filteredSettingsThemeType || deviceThemeType
+  const selfThemeVariant = uiThemeVariant || variant
+
+  return (
+    <CozyThemeContext.Provider
+      value={{
+        type: selfThemeType,
+        variant: selfThemeVariant,
+        isLight: selfThemeType === 'light'
+      }}
+    >
+      <MuiCozyTheme type={selfThemeType} variant={selfThemeVariant}>
+        <div
+          className={cx(className, {
+            [`CozyTheme--${selfThemeType}-${selfThemeVariant}`]: Boolean(
+              selfThemeVariant
+            ),
+            'u-dc': ignoreItself
+          })}
+        >
+          {children}
+        </div>
+      </MuiCozyTheme>
+    </CozyThemeContext.Provider>
+  )
+}
+
+DumbCozyTheme.propTypes = {
+  variant: PropTypes.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.bool,
+  className: PropTypes.string,
+  /** Theme type from io.cozy.settings.instance */
+  settingsThemeType: PropTypes.oneOf(['light', 'dark', 'auto']),
+  children: PropTypes.node
+}
+
+export default DumbCozyTheme

package/react/providers/CozyTheme/index.jsx

@@ -1,14 +1,11 @@
 import React, { createContext, useContext } from 'react'
 import PropTypes from 'prop-types'
-import cx from 'classnames'
 
-import flag from 'cozy-flags'
 import log from 'cozy-logger'
 
 import { isRsg } from '../../hooks/useSetFlagshipUi/helpers'
-import useMediaQuery from '../../hooks/useMediaQuery'
-import MuiCozyTheme from '../../MuiCozyTheme'
 import CozyThemeWithQuery from './CozyThemeWithQuery'
+import DumbCozyTheme from './DumbCozyTheme'
 
 export const CozyThemeContext = createContext()
 
@@ -30,81 +27,29 @@ export const useCozyTheme = () => {
   return context
 }
 
-const DumbCozyTheme = ({
-  variant,
-  className,
-  ignoreItself,
-  settingsThemeType,
-  children
-}) => {
-  const uiThemeType = localStorage.getItem('ui-theme-type') // use only for cozy-ui documentation and argos screenshots
-  const uiThemeVariant = localStorage.getItem('ui-theme-variant') // use only for cozy-ui documentation and argos screenshots
-
-  const isOnlyLight = !!flag('ui.darkmode.enabled') // should be remove when dark mode is validated on all apps
-  const deviceThemeType = useMediaQuery('(prefers-color-scheme: dark)')
-    ? isOnlyLight
-      ? 'dark'
-      : 'light'
-    : 'light'
-
-  const selfThemeType =
-    uiThemeType ||
-    (['light', 'dark'].includes(settingsThemeType)
-      ? settingsThemeType
-      : deviceThemeType)
-  const selfThemeVariant = uiThemeVariant || variant
-
-  return (
-    <CozyThemeContext.Provider
-      value={{
-        type: selfThemeType,
-        variant: selfThemeVariant,
-        isLight: selfThemeType === 'light'
-      }}
-    >
-      <MuiCozyTheme type={selfThemeType} variant={selfThemeVariant}>
-        <div
-          className={cx(className, {
-            [`CozyTheme--${selfThemeType}-${selfThemeVariant}`]: Boolean(
-              selfThemeVariant
-            ),
-            'u-dc': ignoreItself
-          })}
-        >
-          {children}
-        </div>
-      </MuiCozyTheme>
-    </CozyThemeContext.Provider>
-  )
-}
-DumbCozyTheme.propTypes = CozyThemeProptypes
-DumbCozyTheme.defaultProps = CozyThemeDefaultProps
-
-const CozyTheme = props => {
+const CozyTheme = ({ ignoreCozySettings, ...props }) => {
   const Comp =
-    process.env.NODE_ENV === 'test' || isRsg
+    ignoreCozySettings || process.env.NODE_ENV === 'test' || isRsg
       ? DumbCozyTheme
       : CozyThemeWithQuery
 
   return <Comp {...props} />
 }
 
-const CozyThemeProptypes = {
+CozyTheme.propTypes = {
   variant: PropTypes.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.bool,
+  /** Bypasses the request that retrieves the app's settings in order to define the theme type */
+  ignoreCozySettings: PropTypes.bool,
   className: PropTypes.string,
-  settingsThemeType: PropTypes.string,
   children: PropTypes.node
 }
 
-const CozyThemeDefaultProps = {
+CozyTheme.defaultProps = {
   variant: 'normal',
+  ignoreCozySettings: false,
   ignoreItself: true
 }
-CozyTheme.propTypes = CozyThemeProptypes
-CozyTheme.defaultProps = CozyThemeDefaultProps
 
-// export this way to help doc generates correct component and props
 export default CozyTheme
-export { DumbCozyTheme }

package/transpiled/react/providers/CozyTheme/CozyThemeWithQuery.js

@@ -4,7 +4,7 @@ var _excluded = ["data"];
 import React from 'react';
 import { useQuery, isQueryLoading, hasQueryBeenLoaded } from 'cozy-client';
 import { buildSettingsInstanceQuery } from "cozy-ui/transpiled/react/providers/CozyTheme/queries";
-import { DumbCozyTheme } from "cozy-ui/transpiled/react/providers/CozyTheme/index";
+import DumbCozyTheme from "cozy-ui/transpiled/react/providers/CozyTheme/DumbCozyTheme";
 
 var CozyThemeWithQuery = function CozyThemeWithQuery(props) {
   var instanceQuery = buildSettingsInstanceQuery();

package/transpiled/react/providers/CozyTheme/DumbCozyTheme.d.ts

@@ -0,0 +1,18 @@
+export default DumbCozyTheme;
+declare function DumbCozyTheme({ variant, className, ignoreItself, settingsThemeType, children }: {
+    variant: any;
+    className: any;
+    ignoreItself: any;
+    settingsThemeType: any;
+    children: any;
+}): JSX.Element;
+declare namespace DumbCozyTheme {
+    namespace propTypes {
+        const variant: PropTypes.Requireable<string>;
+        const ignoreItself: PropTypes.Requireable<boolean>;
+        const className: PropTypes.Requireable<string>;
+        const settingsThemeType: PropTypes.Requireable<string>;
+        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    }
+}
+import PropTypes from "prop-types";

package/transpiled/react/providers/CozyTheme/DumbCozyTheme.js

@@ -0,0 +1,53 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import flag from 'cozy-flags';
+import useMediaQuery from "cozy-ui/transpiled/react/hooks/useMediaQuery";
+import MuiCozyTheme from "cozy-ui/transpiled/react/MuiCozyTheme";
+import { CozyThemeContext } from "cozy-ui/transpiled/react/providers/CozyTheme/index";
+
+var DumbCozyTheme = function DumbCozyTheme(_ref) {
+  var _cx;
+
+  var variant = _ref.variant,
+      className = _ref.className,
+      ignoreItself = _ref.ignoreItself,
+      settingsThemeType = _ref.settingsThemeType,
+      children = _ref.children;
+  var uiThemeType = localStorage.getItem('ui-theme-type'); // use only for cozy-ui documentation and argos screenshots
+
+  var uiThemeVariant = localStorage.getItem('ui-theme-variant'); // use only for cozy-ui documentation and argos screenshots
+
+  var isOnlyLight = !!flag('ui.darkmode.enabled'); // should be remove when dark mode is validated on all apps
+
+  var deviceThemeType = useMediaQuery('(prefers-color-scheme: dark)') ? isOnlyLight ? 'dark' : 'light' : 'light';
+  var filteredSettingsThemeType = ['light', 'dark'].includes(settingsThemeType) ? settingsThemeType : undefined;
+  var selfThemeType = uiThemeType || filteredSettingsThemeType || deviceThemeType;
+  var selfThemeVariant = uiThemeVariant || variant;
+  return /*#__PURE__*/React.createElement(CozyThemeContext.Provider, {
+    value: {
+      type: selfThemeType,
+      variant: selfThemeVariant,
+      isLight: selfThemeType === 'light'
+    }
+  }, /*#__PURE__*/React.createElement(MuiCozyTheme, {
+    type: selfThemeType,
+    variant: selfThemeVariant
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cx(className, (_cx = {}, _defineProperty(_cx, "CozyTheme--".concat(selfThemeType, "-").concat(selfThemeVariant), Boolean(selfThemeVariant)), _defineProperty(_cx, 'u-dc', ignoreItself), _cx))
+  }, children)));
+};
+
+DumbCozyTheme.propTypes = {
+  variant: PropTypes.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.bool,
+  className: PropTypes.string,
+
+  /** Theme type from io.cozy.settings.instance */
+  settingsThemeType: PropTypes.oneOf(['light', 'dark', 'auto']),
+  children: PropTypes.node
+};
+export default DumbCozyTheme;

package/transpiled/react/providers/CozyTheme/index.d.ts

@@ -6,33 +6,25 @@ export function useCozyTheme(): {
 };
 export default CozyTheme;
 import React from "react";
-declare function CozyTheme(props: any): JSX.Element;
-declare namespace CozyTheme {
-    export { CozyThemeProptypes as propTypes };
-    export { CozyThemeDefaultProps as defaultProps };
-}
-export function DumbCozyTheme({ variant, className, ignoreItself, settingsThemeType, children }: {
-    variant: any;
-    className: any;
-    ignoreItself: any;
-    settingsThemeType: any;
-    children: any;
+declare function CozyTheme({ ignoreCozySettings, ...props }: {
+    [x: string]: any;
+    ignoreCozySettings: any;
 }): JSX.Element;
-export namespace DumbCozyTheme {
-    export { CozyThemeProptypes as propTypes };
-    export { CozyThemeDefaultProps as defaultProps };
-}
-declare namespace CozyThemeProptypes {
-    const variant: PropTypes.Requireable<string>;
-    const ignoreItself: PropTypes.Requireable<boolean>;
-    const className: PropTypes.Requireable<string>;
-    const settingsThemeType: PropTypes.Requireable<string>;
-    const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-}
-declare namespace CozyThemeDefaultProps {
-    const variant_1: string;
-    export { variant_1 as variant };
-    const ignoreItself_1: boolean;
-    export { ignoreItself_1 as ignoreItself };
+declare namespace CozyTheme {
+    namespace propTypes {
+        const variant: PropTypes.Requireable<string>;
+        const ignoreItself: PropTypes.Requireable<boolean>;
+        const ignoreCozySettings: PropTypes.Requireable<boolean>;
+        const className: PropTypes.Requireable<string>;
+        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    }
+    namespace defaultProps {
+        const variant_1: string;
+        export { variant_1 as variant };
+        const ignoreCozySettings_1: boolean;
+        export { ignoreCozySettings_1 as ignoreCozySettings };
+        const ignoreItself_1: boolean;
+        export { ignoreItself_1 as ignoreItself };
+    }
 }
 import PropTypes from "prop-types";

package/transpiled/react/providers/CozyTheme/index.js

@@ -1,13 +1,11 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["ignoreCozySettings"];
 import React, { createContext, useContext } from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
-import flag from 'cozy-flags';
 import log from 'cozy-logger';
 import { isRsg } from "cozy-ui/transpiled/react/hooks/useSetFlagshipUi/helpers";
-import useMediaQuery from "cozy-ui/transpiled/react/hooks/useMediaQuery";
-import MuiCozyTheme from "cozy-ui/transpiled/react/MuiCozyTheme";
 import CozyThemeWithQuery from "cozy-ui/transpiled/react/providers/CozyTheme/CozyThemeWithQuery";
+import DumbCozyTheme from "cozy-ui/transpiled/react/providers/CozyTheme/DumbCozyTheme";
 export var CozyThemeContext = /*#__PURE__*/createContext();
 /**
  * @returns {{ type: 'light'|'dark', variant: 'normal'|'inverted', isLight: boolean }}
@@ -28,60 +26,28 @@ export var useCozyTheme = function useCozyTheme() {
   return context;
 };
 
-var DumbCozyTheme = function DumbCozyTheme(_ref) {
-  var _cx;
+var CozyTheme = function CozyTheme(_ref) {
+  var ignoreCozySettings = _ref.ignoreCozySettings,
+      props = _objectWithoutProperties(_ref, _excluded);
 
-  var variant = _ref.variant,
-      className = _ref.className,
-      ignoreItself = _ref.ignoreItself,
-      settingsThemeType = _ref.settingsThemeType,
-      children = _ref.children;
-  var uiThemeType = localStorage.getItem('ui-theme-type'); // use only for cozy-ui documentation and argos screenshots
-
-  var uiThemeVariant = localStorage.getItem('ui-theme-variant'); // use only for cozy-ui documentation and argos screenshots
-
-  var isOnlyLight = !!flag('ui.darkmode.enabled'); // should be remove when dark mode is validated on all apps
-
-  var deviceThemeType = useMediaQuery('(prefers-color-scheme: dark)') ? isOnlyLight ? 'dark' : 'light' : 'light';
-  var selfThemeType = uiThemeType || (['light', 'dark'].includes(settingsThemeType) ? settingsThemeType : deviceThemeType);
-  var selfThemeVariant = uiThemeVariant || variant;
-  return /*#__PURE__*/React.createElement(CozyThemeContext.Provider, {
-    value: {
-      type: selfThemeType,
-      variant: selfThemeVariant,
-      isLight: selfThemeType === 'light'
-    }
-  }, /*#__PURE__*/React.createElement(MuiCozyTheme, {
-    type: selfThemeType,
-    variant: selfThemeVariant
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cx(className, (_cx = {}, _defineProperty(_cx, "CozyTheme--".concat(selfThemeType, "-").concat(selfThemeVariant), Boolean(selfThemeVariant)), _defineProperty(_cx, 'u-dc', ignoreItself), _cx))
-  }, children)));
-};
-
-DumbCozyTheme.propTypes = CozyThemeProptypes;
-DumbCozyTheme.defaultProps = CozyThemeDefaultProps;
-
-var CozyTheme = function CozyTheme(props) {
-  var Comp = process.env.NODE_ENV === 'test' || isRsg ? DumbCozyTheme : CozyThemeWithQuery;
+  var Comp = ignoreCozySettings || process.env.NODE_ENV === 'test' || isRsg ? DumbCozyTheme : CozyThemeWithQuery;
   return /*#__PURE__*/React.createElement(Comp, props);
 };
 
-var CozyThemeProptypes = {
+CozyTheme.propTypes = {
   variant: PropTypes.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.bool,
+
+  /** Bypasses the request that retrieves the app's settings in order to define the theme type */
+  ignoreCozySettings: PropTypes.bool,
   className: PropTypes.string,
-  settingsThemeType: PropTypes.string,
   children: PropTypes.node
 };
-var CozyThemeDefaultProps = {
+CozyTheme.defaultProps = {
   variant: 'normal',
+  ignoreCozySettings: false,
   ignoreItself: true
 };
-CozyTheme.propTypes = CozyThemeProptypes;
-CozyTheme.defaultProps = CozyThemeDefaultProps; // export this way to help doc generates correct component and props
-
-export default CozyTheme;
-export { DumbCozyTheme };
+export default CozyTheme;