cozy-ui 110.0.1 → 110.1.0

package/transpiled/react/MuiCozyTheme/theme.d.ts

@@ -0,0 +1,61 @@
+export const lightNormalTheme: {
+    overrides: any;
+    shape: import("@material-ui/core/styles/shape").Shape;
+    breakpoints: import("@material-ui/core/styles/createBreakpoints").Breakpoints;
+    direction: import("@material-ui/core").Direction;
+    mixins: import("@material-ui/core/styles/createMixins").Mixins;
+    palette: import("@material-ui/core/styles/createPalette").Palette;
+    props?: import("@material-ui/core/styles/props").ComponentsProps | undefined;
+    shadows: import("@material-ui/core/styles/shadows").Shadows;
+    spacing: import("@material-ui/core/styles/createSpacing").Spacing;
+    transitions: import("@material-ui/core").Transitions;
+    typography: import("@material-ui/core/styles/createTypography").Typography;
+    zIndex: import("@material-ui/core/styles/zIndex").ZIndex;
+    unstable_strictMode?: boolean | undefined;
+};
+export const lightInvertedTheme: {
+    overrides: any;
+    shape: import("@material-ui/core/styles/shape").Shape;
+    breakpoints: import("@material-ui/core/styles/createBreakpoints").Breakpoints;
+    direction: import("@material-ui/core").Direction;
+    mixins: import("@material-ui/core/styles/createMixins").Mixins;
+    palette: import("@material-ui/core/styles/createPalette").Palette;
+    props?: import("@material-ui/core/styles/props").ComponentsProps | undefined;
+    shadows: import("@material-ui/core/styles/shadows").Shadows;
+    spacing: import("@material-ui/core/styles/createSpacing").Spacing;
+    transitions: import("@material-ui/core").Transitions;
+    typography: import("@material-ui/core/styles/createTypography").Typography;
+    zIndex: import("@material-ui/core/styles/zIndex").ZIndex;
+    unstable_strictMode?: boolean | undefined;
+};
+export const darkNormalTheme: {
+    overrides: any;
+    shape: import("@material-ui/core/styles/shape").Shape;
+    breakpoints: import("@material-ui/core/styles/createBreakpoints").Breakpoints;
+    direction: import("@material-ui/core").Direction;
+    mixins: import("@material-ui/core/styles/createMixins").Mixins;
+    palette: import("@material-ui/core/styles/createPalette").Palette;
+    props?: import("@material-ui/core/styles/props").ComponentsProps | undefined;
+    shadows: import("@material-ui/core/styles/shadows").Shadows;
+    spacing: import("@material-ui/core/styles/createSpacing").Spacing;
+    transitions: import("@material-ui/core").Transitions;
+    typography: import("@material-ui/core/styles/createTypography").Typography;
+    zIndex: import("@material-ui/core/styles/zIndex").ZIndex;
+    unstable_strictMode?: boolean | undefined;
+};
+export const darkInvertedTheme: {
+    overrides: any;
+    shape: import("@material-ui/core/styles/shape").Shape;
+    breakpoints: import("@material-ui/core/styles/createBreakpoints").Breakpoints;
+    direction: import("@material-ui/core").Direction;
+    mixins: import("@material-ui/core/styles/createMixins").Mixins;
+    palette: import("@material-ui/core/styles/createPalette").Palette;
+    props?: import("@material-ui/core/styles/props").ComponentsProps | undefined;
+    shadows: import("@material-ui/core/styles/shadows").Shadows;
+    spacing: import("@material-ui/core/styles/createSpacing").Spacing;
+    transitions: import("@material-ui/core").Transitions;
+    typography: import("@material-ui/core/styles/createTypography").Typography;
+    zIndex: import("@material-ui/core/styles/zIndex").ZIndex;
+    unstable_strictMode?: boolean | undefined;
+};
+export function getTheme(type: any, variant: any): any;

package/transpiled/react/Sidebar/index.js

@@ -8,6 +8,7 @@ var styles = {
   "o-sidebar": "styles__o-sidebar___1295j"
 };
 import { useSetFlagshipUI } from "cozy-ui/transpiled/react/hooks/useSetFlagshipUi/useSetFlagshipUI";
+import { useCozyTheme } from "cozy-ui/transpiled/react/providers/CozyTheme";
 import { useTheme } from '@material-ui/core';
 
 var Sidebar = function Sidebar(_ref) {
@@ -16,9 +17,13 @@ var Sidebar = function Sidebar(_ref) {
       restProps = _objectWithoutProperties(_ref, _excluded);
 
   var theme = useTheme();
+
+  var _useCozyTheme = useCozyTheme(),
+      isLight = _useCozyTheme.isLight;
+
   useSetFlagshipUI({
     bottomBackground: theme.palette.background.default,
-    bottomTheme: 'dark'
+    bottomTheme: isLight ? 'dark' : 'light'
   }, {
     bottomBackground: theme.palette.background.paper
   }, 'cozy-ui/Sidebar');

package/transpiled/react/Viewer/ViewerInformationsWrapper.js

@@ -7,6 +7,7 @@ import Footer from "cozy-ui/transpiled/react/Viewer/components/Footer";
 import PanelContent from "cozy-ui/transpiled/react/Viewer/Panel/PanelContent";
 import FooterContent from "cozy-ui/transpiled/react/Viewer/Footer/FooterContent";
 import { useSetFlagshipUI } from "cozy-ui/transpiled/react/hooks/useSetFlagshipUi/useSetFlagshipUI";
+import { useCozyTheme } from "cozy-ui/transpiled/react/providers/CozyTheme";
 
 var ViewerInformationsWrapper = function ViewerInformationsWrapper(_ref) {
   var currentFile = _ref.currentFile,
@@ -16,10 +17,14 @@ var ViewerInformationsWrapper = function ViewerInformationsWrapper(_ref) {
       isPublic = _ref.isPublic,
       children = _ref.children;
   var theme = useTheme();
+
+  var _useCozyTheme = useCozyTheme(),
+      isLight = _useCozyTheme.isLight;
+
   var sidebar = document.querySelector('[class*="sidebar"]');
   useSetFlagshipUI({
     bottomBackground: theme.palette.background.paper,
-    bottomTheme: 'dark'
+    bottomTheme: isLight ? 'dark' : 'light'
   }, {
     bottomBackground: theme.palette.background[sidebar ? 'default' : 'paper']
   });

package/transpiled/react/deprecated/ActionMenu/ActionMenuEffects.js

@@ -4,6 +4,7 @@ import { useTheme } from '@material-ui/core';
 import { isFlagshipApp } from 'cozy-device-helper';
 import { useSetFlagshipUI } from "cozy-ui/transpiled/react/hooks/useSetFlagshipUi/useSetFlagshipUI";
 import { isRsg } from "cozy-ui/transpiled/react/hooks/useSetFlagshipUi/helpers";
+import { useCozyTheme } from "cozy-ui/transpiled/react/providers/CozyTheme";
 
 var getBottomBackground = function getBottomBackground(theme) {
   var sidebar = document.getElementById('sidebar');
@@ -12,20 +13,24 @@ var getBottomBackground = function getBottomBackground(theme) {
 
 var useHook = function useHook() {
   var theme = useTheme();
+
+  var _useCozyTheme = useCozyTheme(),
+      isLight = _useCozyTheme.isLight;
+
   useSetFlagshipUI({
     bottomBackground: theme.palette.background.paper,
     // @ts-ignore
-    bottomTheme: 'dark',
-    topOverlay: 'var(--overlay)',
+    bottomTheme: isLight ? 'dark' : 'light',
+    topOverlay: 'rgba(0, 0, 0, 0.5)',
     topBackground: theme.palette.background.paper,
     // @ts-ignore
     topTheme: 'light'
   }, {
     bottomBackground: getBottomBackground(theme),
-    bottomTheme: 'dark',
+    bottomTheme: isLight ? 'dark' : 'light',
     topOverlay: 'transparent',
     topBackground: theme.palette.background.paper,
-    topTheme: 'dark'
+    topTheme: isLight ? 'dark' : 'light'
   }, 'cozy-ui/ActionMenu');
 };
 

package/transpiled/react/deprecated/Modal/ModalEffects.js

@@ -4,33 +4,39 @@ import { useTheme } from '@material-ui/core';
 import { isFlagshipApp } from 'cozy-device-helper';
 import { useSetFlagshipUI } from "cozy-ui/transpiled/react/hooks/useSetFlagshipUi/useSetFlagshipUI";
 import { getFlagshipMetadata } from "cozy-ui/transpiled/react/hooks/useSetFlagshipUi/helpers";
+import { useCozyTheme } from "cozy-ui/transpiled/react/providers/CozyTheme";
 
 var getTopBackground = function getTopBackground(theme, cozyBar) {
   return cozyBar && getComputedStyle(cozyBar).getPropertyValue('background-color') || theme.palette.background.paper;
 };
 
-var getTopTheme = function getTopTheme(cozyBar) {
-  return getFlagshipMetadata().immersive || cozyBar && cozyBar.classList.contains('coz-theme-primary') ? 'light' : 'dark';
+var getTopTheme = function getTopTheme(cozyBar, isLight) {
+  return getFlagshipMetadata().immersive || cozyBar && cozyBar.classList.contains('coz-theme-primary') || // Needed for previous versions of cozy-bar like v7. Can be removed when all apps in v12.
+  !isLight ? 'light' : 'dark';
 };
 
 var useHook = function useHook() {
   var theme = useTheme();
+
+  var _useCozyTheme = useCozyTheme(),
+      isLight = _useCozyTheme.isLight;
+
   var cozyBar = document.querySelector('.coz-bar-wrapper');
   var sidebar = document.getElementById('sidebar');
   useSetFlagshipUI({
     bottomBackground: theme.palette.background.paper,
     // @ts-ignore
-    bottomTheme: 'dark',
+    bottomTheme: isLight ? 'dark' : 'light',
     topBackground: theme.palette.background.paper,
     // @ts-ignore
-    topTheme: 'dark'
+    topTheme: isLight ? 'dark' : 'light'
   }, {
     bottomBackground: theme.palette.background[sidebar ? 'default' : 'paper'],
-    bottomTheme: getFlagshipMetadata().immersive ? 'light' : 'dark',
+    bottomTheme: getFlagshipMetadata().immersive || !isLight ? 'light' : 'dark',
     bottomOverlay: 'transparent',
     topOverlay: 'transparent',
     topBackground: getTopBackground(theme, cozyBar),
-    topTheme: getTopTheme(cozyBar)
+    topTheme: getTopTheme(cozyBar, isLight)
   }, 'cozy-ui/Modal');
 };
 

package/transpiled/react/deprecated/Modal/index.js

@@ -68,6 +68,7 @@ import ModalButtons from "cozy-ui/transpiled/react/deprecated/Modal/ModalButtons
 import AnimatedContentHeader from "cozy-ui/transpiled/react/deprecated/Modal/AnimatedContentHeader";
 import ModalBackButton from "cozy-ui/transpiled/react/deprecated/Modal/ModalBackButton";
 import { ModalEffects } from "cozy-ui/transpiled/react/deprecated/Modal/ModalEffects";
+import { useCozyTheme } from "cozy-ui/transpiled/react/providers/CozyTheme";
 var ModalDescription = ModalContent;
 
 var ModalTitle = function ModalTitle(props) {
@@ -82,15 +83,15 @@ export var BODY_CLASS = 'has-modal';
  * @deprecated Please use [CozyDialogs](#/CozyDialogs) or [Dialog](#/Dialog).
  */
 
-var Modal = /*#__PURE__*/function (_Component) {
-  _inherits(Modal, _Component);
+var ModalWithoutTheme = /*#__PURE__*/function (_Component) {
+  _inherits(ModalWithoutTheme, _Component);
 
-  var _super = _createSuper(Modal);
+  var _super = _createSuper(ModalWithoutTheme);
 
-  function Modal(props) {
+  function ModalWithoutTheme(props) {
     var _this;
 
-    _classCallCheck(this, Modal);
+    _classCallCheck(this, ModalWithoutTheme);
 
     _this = _super.call(this, props);
 
@@ -102,7 +103,7 @@ var Modal = /*#__PURE__*/function (_Component) {
     return _this;
   }
 
-  _createClass(Modal, [{
+  _createClass(ModalWithoutTheme, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       if (!this.props.title && !this.props['aria-label']) {
@@ -196,10 +197,10 @@ var Modal = /*#__PURE__*/function (_Component) {
     }
   }]);
 
-  return Modal;
+  return ModalWithoutTheme;
 }(Component);
 
-Modal.propTypes = {
+ModalWithoutTheme.propTypes = {
   /** Modal title */
   title: PropTypes.node,
 
@@ -262,7 +263,7 @@ Modal.propTypes = {
   /** A function to be executed when the modal is dismissed */
   dismissAction: PropTypes.func
 };
-Modal.defaultProps = {
+ModalWithoutTheme.defaultProps = {
   primaryType: 'regular',
   secondaryType: 'secondary',
   closable: true,
@@ -288,6 +289,19 @@ ModalContent.propTypes = {
   iconDest: PropTypes.node,
   fixed: PropTypes.bool
 };
+
+var Modal = function Modal(props) {
+  var _useCozyTheme = useCozyTheme(),
+      type = _useCozyTheme.type,
+      variant = _useCozyTheme.variant;
+
+  return /*#__PURE__*/React.createElement(ModalWithoutTheme, _extends({}, props, {
+    containerClassName: cx(props.containerClassName, "CozyTheme--".concat(type, "-").concat(variant))
+  }));
+};
+
+Modal.propTypes = ModalWithoutTheme.propTypes;
+Modal.defaultProps = ModalWithoutTheme.defaultProps;
 var EnhancedModal = migrateProps([{
   src: 'withCross',
   dest: 'closable'

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

@@ -0,0 +1,2 @@
+declare function _exports(): boolean | "";
+export = _exports;

package/transpiled/react/hooks/useMediaQuery.d.ts

@@ -0,0 +1,2 @@
+export default useMediaQuery;
+declare function useMediaQuery(args: any, options: any): boolean;

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

@@ -0,0 +1,2 @@
+export default CozyThemeWithQuery;
+declare function CozyThemeWithQuery(props: any): JSX.Element | null;

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

@@ -0,0 +1,38 @@
+export const CozyThemeContext: React.Context<any>;
+export function useCozyTheme(): {
+    type: 'light' | 'dark';
+    variant: 'normal' | 'inverted';
+    isLight: boolean;
+};
+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;
+}): 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 };
+}
+import PropTypes from "prop-types";

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

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { createContext, useContext, useLayoutEffect } from 'react';
+import React, { createContext, useContext } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import flag from 'cozy-flags';
@@ -9,6 +9,10 @@ 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";
 export var CozyThemeContext = /*#__PURE__*/createContext();
+/**
+ * @returns {{ type: 'light'|'dark', variant: 'normal'|'inverted', isLight: boolean }}
+ */
+
 export var useCozyTheme = function useCozyTheme() {
   var context = useContext(CozyThemeContext);
 
@@ -16,7 +20,8 @@ export var useCozyTheme = function useCozyTheme() {
     log('error', '`CozyThemeContext` is missing. `useCozyTheme()` must be used within a `<CozyTheme>`. `light normal` is returned as fallback value.');
     return {
       type: 'light',
-      variant: 'normal'
+      variant: 'normal',
+      isLight: true
     };
   }
 
@@ -40,17 +45,11 @@ var DumbCozyTheme = function DumbCozyTheme(_ref) {
   var deviceThemeType = useMediaQuery('(prefers-color-scheme: dark)') ? isOnlyLight ? 'dark' : 'light' : 'light';
   var selfThemeType = uiThemeType || (['light', 'dark'].includes(settingsThemeType) ? settingsThemeType : deviceThemeType);
   var selfThemeVariant = uiThemeVariant || variant;
-  useLayoutEffect(function () {
-    var negativeThemeType = selfThemeType === 'light' ? 'dark' : 'light'; // remove "negative" value because can be changed without refresh
-
-    document.querySelector('body').classList.remove("CozyTheme--".concat(negativeThemeType, "-normal")); // add css var to body to be able to use them on it
-
-    document.querySelector('body').classList.add("CozyTheme--".concat(selfThemeType, "-normal")); // `add` omits if already present
-  }, [selfThemeType]);
   return /*#__PURE__*/React.createElement(CozyThemeContext.Provider, {
     value: {
       type: selfThemeType,
-      variant: selfThemeVariant
+      variant: selfThemeVariant,
+      isLight: selfThemeType === 'light'
     }
   }, /*#__PURE__*/React.createElement(MuiCozyTheme, {
     type: selfThemeType,

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

@@ -0,0 +1,8 @@
+export function buildSettingsInstanceQuery(): {
+    definition: import("cozy-client").QueryDefinition;
+    options: {
+        as: string;
+        fetchPolicy: Function;
+        singleDocData: boolean;
+    };
+};

package/transpiled/react/styles/index.d.ts

@@ -0,0 +1 @@
+export * from "@material-ui/core/styles";