cozy-ui 102.1.0 → 102.1.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [102.1.1](https://github.com/cozy/cozy-ui/compare/v102.1.0...v102.1.1) (2024-01-29)
+
+
+### Bug Fixes
+
+* **BottomSheet:** Default offset value wasn't good if flagship immersive [secure] ([b1551d2](https://github.com/cozy/cozy-ui/commit/b1551d2))
+
 # [102.1.0](https://github.com/cozy/cozy-ui/compare/v102.0.0...v102.1.0) (2024-01-25)
 
 

package/package.json

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

package/react/BottomSheet/BottomSheet.jsx

@@ -13,7 +13,7 @@ import { useMutationObserver, useTimeoutWhen } from 'rooks'
 import Fade from '@material-ui/core/Fade'
 import Portal from '@material-ui/core/Portal'
 
-import { getFlagshipMetadata } from 'cozy-device-helper'
+import { getFlagshipMetadata } from '../hooks/useSetFlagshipUi/helpers'
 
 import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
 import CozyTheme, { useCozyTheme } from '../providers/CozyTheme'
@@ -392,7 +392,7 @@ BottomSheet.defaultProps = {
   toolbarProps: {},
   backdrop: false,
   offset:
-    (getFlagshipMetadata().immersive && getFlagshipMetadata().navbarHeight) ?? 0
+    (getFlagshipMetadata().immersive && getFlagshipMetadata().navbarHeight) || 0
 }
 
 BottomSheet.propTypes = {

package/react/BottomSheet/README.md

@@ -94,7 +94,7 @@ const initialState = {
   isSecondBottomSheetDisplayed: false,
   mediumHeight: isTesting() ? 450 : undefined,
   mediumHeightRatio: undefined,
-  offset: 0
+  offset: undefined
 }
 const showBottomSheet = () => setState({ isBottomSheetDisplayed: true })
 const hideBottomSheet = () => setState({ isBottomSheetDisplayed: false })

package/react/BottomSheet/helpers.js

@@ -1,8 +1,8 @@
 import React from 'react'
-import { getFlagshipMetadata } from 'cozy-device-helper'
 
 import { ANIMATION_DURATION } from './constants'
 import { getSafeAreaValue } from '../helpers/getSafeArea'
+import { getFlagshipMetadata } from '../hooks/useSetFlagshipUi/helpers'
 
 export const computeToolbarHeight = (toolbarProps = {}) => {
   const { ref, height } = toolbarProps

package/react/BottomSheet/helpers.spec.js

@@ -12,7 +12,7 @@ import {
 jest.mock('../helpers/getSafeArea', () => ({
   getSafeAreaValue: jest.fn().mockReturnValue(15)
 }))
-jest.mock('cozy-device-helper', () => ({
+jest.mock('../hooks/useSetFlagshipUi/helpers', () => ({
   getFlagshipMetadata: jest.fn(() => ({ navbarHeight: 10 }))
 }))
 const windowSpy = jest.spyOn(window, 'window', 'get')

package/react/CozyDialogs/Readme.md

@@ -208,50 +208,9 @@ const initialVariants = [{
   withBackground: false
 }]
 
-// The goal of this method is to simulate the
-// immersive mode of the flagship app. So we
-// add the flagship-app class to the body and
-// we set 2 css variables:
-// flagship-top-height
-// flagship-bottom-height
-const setFlagshipVars = () => {
-  const root = document.getElementsByTagName('body')[0]
-  root.style.setProperty('--flagship-top-height',  "40px")
-  root.style.setProperty('--flagship-bottom-height',  "40px")
-  root.classList.add('flagship-app')
-
-  const statusBarDiv = document.createElement("div")
-  statusBarDiv.style.cssText = "position:fixed;top:0;height:40px;z-index:10000000;background-color:red;width:100%"
-  // and give it some content
-  const statusBarDivContent = document.createTextNode("Top Status Bar with clock")
-
-  // add the text node to the newly created div
-  statusBarDiv.appendChild(statusBarDivContent)
-
-
-  const bottomBarDiv = document.createElement("div")
-  bottomBarDiv.style.cssText = "position:fixed;bottom:0;height:40px;z-index:10000000;background-color:red;width:100%"
-  // and give it some content
-  const bottomBarDivContent = document.createTextNode("BottomBar")
-
-  // add the text node to the newly created div
-  bottomBarDiv.appendChild(bottomBarDivContent)
-
-  // add the newly created element and its content into the DOM
-  const currentDiv = document.getElementById("rsg-root")
-  document.body.insertBefore(statusBarDiv, currentDiv)
-  document.body.insertBefore(bottomBarDiv, currentDiv)
-}
-
 ;
 
 <DemoProvider>
-  <Button
-    className="u-mb-1"
-    variant="secondary"
-    label={'Simulate Immersive Flagship Mode'}
-    onClick={() => setFlagshipVars()}
-  />
   <Variants initialVariants={initialVariants}>
     {variant => (
       <>

package/react/Dialog/DialogEffects.spec.tsx

@@ -238,8 +238,11 @@ it('should provide the inversed UI when Cozybar is not black on white, but white
 })
 
 jest.mock('cozy-device-helper', () => ({
-  isFlagshipApp: (): boolean => true,
-  getFlagshipMetadata: (): Record<string, never> => ({})
+  isFlagshipApp: (): boolean => true
+}))
+jest.mock('../hooks/useSetFlagshipUi/helpers', () => ({
+  getFlagshipMetadata: (): Record<string, never> => ({}),
+  setRsgFlagshipElements: (): null => null
 }))
 
 const onOpenMountExpected = {

package/react/Dialog/DialogEffects.ts

@@ -1,7 +1,7 @@
 import { getLuminance, Theme, useTheme } from '@material-ui/core'
 import { useEffect } from 'react'
 
-import { getFlagshipMetadata, isFlagshipApp } from 'cozy-device-helper'
+import { isFlagshipApp } from 'cozy-device-helper'
 import { useWebviewIntent } from 'cozy-intent'
 
 import {
@@ -9,6 +9,8 @@ import {
   ThemeColor,
   parseArg
 } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
+import { getFlagshipMetadata } from '../hooks/useSetFlagshipUi/helpers'
+import { isRsg } from '../hooks/useSetFlagshipUi/helpers'
 
 interface DialogEffectsOptions {
   cozybar?: Element | null
@@ -192,7 +194,8 @@ export const useDialogSetFlagshipUI = (
   }, [open, webviewIntent]) // eslint-disable-line react-hooks/exhaustive-deps
 }
 
-export const useDialogEffects = isFlagshipApp()
-  ? useHook
-  : // eslint-disable-next-line @typescript-eslint/no-empty-function
-    (): void => {}
+export const useDialogEffects =
+  isFlagshipApp() || isRsg
+    ? useHook
+    : // eslint-disable-next-line @typescript-eslint/no-empty-function
+      (): void => {}

package/react/deprecated/ActionMenu/ActionMenuEffects.ts

@@ -7,6 +7,7 @@ import { Theme, useTheme } from '@material-ui/core'
 import { isFlagshipApp } from 'cozy-device-helper'
 
 import { useSetFlagshipUI } from '../../hooks/useSetFlagshipUi/useSetFlagshipUI'
+import { isRsg } from '../../hooks/useSetFlagshipUi/helpers'
 
 const getBottomBackground = (theme: Theme): string => {
   const sidebar = document.getElementById('sidebar')
@@ -40,7 +41,8 @@ const useHook = (): void => {
   )
 }
 
-export const useActionMenuEffects = isFlagshipApp()
-  ? useHook
-  : // eslint-disable-next-line @typescript-eslint/no-empty-function
-    (): void => {}
+export const useActionMenuEffects =
+  isFlagshipApp() || isRsg
+    ? useHook
+    : // eslint-disable-next-line @typescript-eslint/no-empty-function
+      (): void => {}

package/react/deprecated/Modal/ModalEffects.ts

@@ -4,9 +4,10 @@
 
 import { Theme, useTheme } from '@material-ui/core'
 
-import { getFlagshipMetadata, isFlagshipApp } from 'cozy-device-helper'
+import { isFlagshipApp } from 'cozy-device-helper'
 
 import { useSetFlagshipUI } from '../../hooks/useSetFlagshipUi/useSetFlagshipUI'
+import { getFlagshipMetadata } from '../../hooks/useSetFlagshipUi/helpers'
 
 const getTopBackground = (theme: Theme, cozyBar: Element | null): string =>
   (cozyBar && getComputedStyle(cozyBar).getPropertyValue('background-color')) ||

package/react/hooks/useSetFlagshipUi/helpers.js

@@ -0,0 +1,149 @@
+// eslint-disable-next-line no-unused-vars
+import { FlagshipUI } from './useSetFlagshipUI'
+import { getFlagshipMetadata as getFlagshipMetadataFromDeviceHelper } from 'cozy-device-helper'
+
+/**
+ * The goal of this method is to simulate the immersive mode of the flagship app.
+ * So we add the flagship-app class to the body and we set css variables:
+ * If the "contained" mode is activated, it simulates an classic app behavior
+ * If the "immersive" mode is activated, it simulates a fullscreen app like Home
+ */
+export const addFlagshipElements = () => {
+  const root = document.getElementsByTagName('body')[0]
+  root.style.setProperty('--flagship-top-height', '40px')
+  root.style.setProperty('--flagship-top-bgcolor', 'white') // used only for cozy-ui docs
+  root.style.setProperty('--flagship-top-overlay', 'transparent') // used only for cozy-ui docs
+  root.style.setProperty('--flagship-top-color', 'black') // used only for cozy-ui docs
+  root.style.setProperty('--flagship-bottom-height', '40px')
+  root.style.setProperty('--flagship-bottom-bgcolor', 'white') // used only for cozy-ui docs
+  root.style.setProperty('--flagship-bottom-overlay', 'transparent') // used only for cozy-ui docs
+  root.style.setProperty('--flagship-bottom-color', 'black') // used only for cozy-ui docs
+  root.classList.add('flagship-app')
+
+  // create status bar
+  const statusBarDiv = document.createElement('div')
+  statusBarDiv.setAttribute('id', 'flagshipStatusBar')
+  statusBarDiv.style.cssText =
+    'position:fixed;top:0;height:var(--flagship-top-height);z-index:10000000;color:var(--flagship-top-color);background-color:var(--flagship-top-bgcolor);width:100%;display:flex;align-items:center;justify-content:center'
+  // create status bar overlay
+  const statusBarOverlay = document.createElement('div')
+  statusBarOverlay.setAttribute('id', 'flagshipStatusBarOverlay')
+  statusBarOverlay.style.cssText =
+    'position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;background-color:var(--flagship-top-overlay)'
+  statusBarDiv.appendChild(statusBarOverlay)
+  // create status bar text
+  const statusBarText = document.createElement('div')
+  statusBarText.setAttribute('id', 'flagshipStatusBarText')
+  statusBarText.innerText = 'Flagship Top Status Bar with clock'
+  statusBarDiv.appendChild(statusBarText)
+
+  // create nav bar
+  const navBarDiv = document.createElement('div')
+  navBarDiv.setAttribute('id', 'flagshipNavBar')
+  navBarDiv.style.cssText =
+    'position:fixed;bottom:0;height:var(--flagship-bottom-height);z-index:10000000;color:var(--flagship-bottom-color);background-color:var(--flagship-bottom-bgcolor);width:100%;display:flex;align-items:center;justify-content:center'
+  // create nav bar overlay
+  const navBarOverlay = document.createElement('div')
+  navBarOverlay.setAttribute('id', 'flagshipNavBarOverlay')
+  navBarOverlay.style.cssText =
+    'position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;background-color:var(--flagship-bottom-overlay)'
+  navBarDiv.appendChild(navBarOverlay)
+  // create nav bar text
+  const navBarText = document.createElement('div')
+  navBarText.setAttribute('id', 'flagshipNavBarText')
+  navBarText.innerText = 'Flagship Nav Bar'
+  navBarDiv.appendChild(navBarText)
+
+  // add status and nav bar and its content into the DOM
+  const currentDiv = document.getElementById('rsg-root')
+  document.body.insertBefore(statusBarDiv, currentDiv)
+  document.body.insertBefore(navBarDiv, currentDiv)
+}
+
+/**
+ * Remove fake DOM element that simulates native Status and Nav bar
+ */
+export const removeFlagshipElements = () => {
+  const root = document.getElementsByTagName('body')[0]
+  root.style.removeProperty('--flagship-top-height')
+  root.style.removeProperty('--flagship-top-bgcolor')
+  root.style.removeProperty('--flagship-top-overlay')
+  root.style.removeProperty('--flagship-top-color')
+  root.style.removeProperty('--flagship-bottom-height')
+  root.style.removeProperty('--flagship-bottom-bgcolor')
+  root.style.removeProperty('--flagship-bottom-overlay')
+  root.style.removeProperty('--flagship-bottom-color')
+  root.classList.remove('flagship-app')
+
+  document.getElementById('flagshipStatusBar')?.remove()
+  document.getElementById('flagshipNavBar')?.remove()
+}
+
+/**
+ * Whether we are in cozy-ui documentation (Rsg is for ReactStyleGuide)
+ * @returns {boolean}
+ */
+export const isRsg = !!document.getElementById('rsg-root')
+
+/**
+ * Overrides flagship metadata
+ * See https://github.com/cozy/cozy-libs/blob/master/packages/cozy-device-helper/src/flagship.ts#L13
+ */
+export const getFlagshipMetadata = isRsg
+  ? () => ({
+      immersive:
+        JSON.parse(localStorage.getItem('flagship-app'))?.contained === 'off' ||
+        false,
+      statusBarHeight: 40,
+      navbarHeight: 40
+    })
+  : getFlagshipMetadataFromDeviceHelper
+
+/**
+ * Set the css values for Status and Nav bar inside cozy-ui documentation
+ * see https://github.com/cozy/cozy-libs/blob/master/packages/cozy-intent/src/api/models/applications.ts#L33
+ * @param {undefined | Partial<FlagshipUI>} param0
+ * @returns
+ */
+export const setRsgFlagshipElements = ({
+  topBackground,
+  topOverlay,
+  topTheme,
+  bottomBackground,
+  bottomOverlay,
+  bottomTheme
+} = {}) => {
+  if (!isRsg) return
+
+  const root = document.getElementsByTagName('body')[0]
+
+  if (topBackground) {
+    root.style.setProperty('--flagship-top-bgcolor', topBackground)
+  }
+
+  if (topOverlay) {
+    root.style.setProperty('--flagship-top-overlay', topOverlay)
+  }
+
+  if (topTheme) {
+    root.style.setProperty(
+      '--flagship-top-color',
+      topTheme === 'dark' ? 'black' : 'white'
+    )
+  }
+
+  if (bottomBackground) {
+    root.style.setProperty('--flagship-bottom-bgcolor', bottomBackground)
+  }
+
+  if (bottomOverlay) {
+    root.style.setProperty('--flagship-bottom-overlay', bottomOverlay)
+  }
+
+  if (bottomTheme) {
+    root.style.setProperty(
+      '--flagship-bottom-color',
+      bottomTheme === 'dark' ? 'black' : 'white'
+    )
+  }
+}

package/react/hooks/useSetFlagshipUi/useSetFlagshipUI.ts

@@ -8,6 +8,8 @@ import { useWebviewIntent } from 'cozy-intent'
 import { FlagshipUI as IntentInterface } from 'cozy-intent/dist/api/models/applications'
 import { WebviewService } from 'cozy-intent/dist/api/services/WebviewService'
 
+import { setRsgFlagshipElements } from './helpers'
+
 export enum ThemeColor {
   Dark = 'dark',
   Light = 'light'
@@ -23,11 +25,13 @@ export const parseArg = (
   arg?: FlagshipUI,
   caller?: string
 ): void => {
-  if (!webviewIntent) return
-
-  const sanitized = isObject(arg) && pickBy(arg, identity)
+  const sanitized = isObject(arg) ? pickBy(arg, identity) : undefined
   const validUI = !isEmpty(sanitized) && sanitized
 
+  setRsgFlagshipElements(sanitized)
+
+  if (!webviewIntent) return
+
   validUI && webviewIntent.call('setFlagshipUI', validUI, caller)
 }
 

package/transpiled/react/BottomSheet/BottomSheet.js

@@ -5,8 +5,6 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["portalProps"];
 
-var _ref4;
-
 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) { _defineProperty(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; }
@@ -17,7 +15,7 @@ import { BottomSheet as MuiBottomSheet } from 'mui-bottom-sheet';
 import { useMutationObserver, useTimeoutWhen } from 'rooks';
 import Fade from '@material-ui/core/Fade';
 import Portal from '@material-ui/core/Portal';
-import { getFlagshipMetadata } from 'cozy-device-helper';
+import { getFlagshipMetadata } from "cozy-ui/transpiled/react/hooks/useSetFlagshipUi/helpers";
 import { useSetFlagshipUI } from "cozy-ui/transpiled/react/hooks/useSetFlagshipUi/useSetFlagshipUI";
 import CozyTheme, { useCozyTheme } from "cozy-ui/transpiled/react/providers/CozyTheme";
 import Stack from "cozy-ui/transpiled/react/Stack";
@@ -384,7 +382,7 @@ BottomSheet.defaultProps = {
   classes: {},
   toolbarProps: {},
   backdrop: false,
-  offset: (_ref4 = getFlagshipMetadata().immersive && getFlagshipMetadata().navbarHeight) !== null && _ref4 !== void 0 ? _ref4 : 0
+  offset: getFlagshipMetadata().immersive && getFlagshipMetadata().navbarHeight || 0
 };
 BottomSheet.propTypes = {
   /** Toolbar properties */
@@ -417,9 +415,9 @@ BottomSheet.propTypes = {
   /** To totally close the BottomSheet by swaping it down */
   onClose: PropTypes.func
 };
-var BottomSheetPortal = /*#__PURE__*/forwardRef(function (_ref5, ref) {
-  var portalProps = _ref5.portalProps,
-      props = _objectWithoutProperties(_ref5, _excluded);
+var BottomSheetPortal = /*#__PURE__*/forwardRef(function (_ref4, ref) {
+  var portalProps = _ref4.portalProps,
+      props = _objectWithoutProperties(_ref4, _excluded);
 
   var _useCozyTheme = useCozyTheme(),
       variant = _useCozyTheme.variant;

package/transpiled/react/BottomSheet/helpers.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { getFlagshipMetadata } from 'cozy-device-helper';
 import { ANIMATION_DURATION } from "cozy-ui/transpiled/react/BottomSheet/constants";
 import { getSafeAreaValue } from "cozy-ui/transpiled/react/helpers/getSafeArea";
+import { getFlagshipMetadata } from "cozy-ui/transpiled/react/hooks/useSetFlagshipUi/helpers";
 export var computeToolbarHeight = function computeToolbarHeight() {
   var toolbarProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var ref = toolbarProps.ref,

package/transpiled/react/Dialog/DialogEffects.js

@@ -1,8 +1,10 @@
 import { getLuminance, useTheme } from '@material-ui/core';
 import { useEffect } from 'react';
-import { getFlagshipMetadata, isFlagshipApp } from 'cozy-device-helper';
+import { isFlagshipApp } from 'cozy-device-helper';
 import { useWebviewIntent } from 'cozy-intent';
 import { ThemeColor, parseArg } from "cozy-ui/transpiled/react/hooks/useSetFlagshipUi/useSetFlagshipUI";
+import { getFlagshipMetadata } from "cozy-ui/transpiled/react/hooks/useSetFlagshipUi/helpers";
+import { isRsg } from "cozy-ui/transpiled/react/hooks/useSetFlagshipUi/helpers";
 export var DOMStrings;
 
 (function (DOMStrings) {
@@ -131,5 +133,5 @@ export var useDialogSetFlagshipUI = function useDialogSetFlagshipUI(open, onMoun
      */
   }, [open, webviewIntent]); // eslint-disable-line react-hooks/exhaustive-deps
 };
-export var useDialogEffects = isFlagshipApp() ? useHook : // eslint-disable-next-line @typescript-eslint/no-empty-function
+export var useDialogEffects = isFlagshipApp() || isRsg ? useHook : // eslint-disable-next-line @typescript-eslint/no-empty-function
 function () {};

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

@@ -3,6 +3,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";
 
 var getBottomBackground = function getBottomBackground(theme) {
   var sidebar = document.getElementById('sidebar');
@@ -28,5 +29,5 @@ var useHook = function useHook() {
   }, 'cozy-ui/ActionMenu');
 };
 
-export var useActionMenuEffects = isFlagshipApp() ? useHook : // eslint-disable-next-line @typescript-eslint/no-empty-function
+export var useActionMenuEffects = isFlagshipApp() || isRsg ? useHook : // eslint-disable-next-line @typescript-eslint/no-empty-function
 function () {};

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

@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 // TODO: remove eslint-disable and @ts-ignore rules
 import { useTheme } from '@material-ui/core';
-import { getFlagshipMetadata, isFlagshipApp } from 'cozy-device-helper';
+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";
 
 var getTopBackground = function getTopBackground(theme, cozyBar) {
   return cozyBar && getComputedStyle(cozyBar).getPropertyValue('background-color') || theme.palette.background.paper;

package/transpiled/react/hooks/useSetFlagshipUi/helpers.d.ts

@@ -0,0 +1,18 @@
+export function addFlagshipElements(): void;
+export function removeFlagshipElements(): void;
+/**
+ * Whether we are in cozy-ui documentation (Rsg is for ReactStyleGuide)
+ * @returns {boolean}
+ */
+export const isRsg: boolean;
+/**
+ * Overrides flagship metadata
+ * See https://github.com/cozy/cozy-libs/blob/master/packages/cozy-device-helper/src/flagship.ts#L13
+ */
+export const getFlagshipMetadata: (() => {
+    immersive: boolean;
+    statusBarHeight: number;
+    navbarHeight: number;
+}) | (() => import("cozy-device-helper/dist/flagship").FlagshipMetadata);
+export function setRsgFlagshipElements({ topBackground, topOverlay, topTheme, bottomBackground, bottomOverlay, bottomTheme }?: undefined | Partial<FlagshipUI>): void;
+import { FlagshipUI } from "./useSetFlagshipUI";

package/transpiled/react/hooks/useSetFlagshipUi/helpers.js

@@ -0,0 +1,143 @@
+// eslint-disable-next-line no-unused-vars
+import { FlagshipUI } from "cozy-ui/transpiled/react/hooks/useSetFlagshipUi/useSetFlagshipUI";
+import { getFlagshipMetadata as getFlagshipMetadataFromDeviceHelper } from 'cozy-device-helper';
+/**
+ * The goal of this method is to simulate the immersive mode of the flagship app.
+ * So we add the flagship-app class to the body and we set css variables:
+ * If the "contained" mode is activated, it simulates an classic app behavior
+ * If the "immersive" mode is activated, it simulates a fullscreen app like Home
+ */
+
+export var addFlagshipElements = function addFlagshipElements() {
+  var root = document.getElementsByTagName('body')[0];
+  root.style.setProperty('--flagship-top-height', '40px');
+  root.style.setProperty('--flagship-top-bgcolor', 'white'); // used only for cozy-ui docs
+
+  root.style.setProperty('--flagship-top-overlay', 'transparent'); // used only for cozy-ui docs
+
+  root.style.setProperty('--flagship-top-color', 'black'); // used only for cozy-ui docs
+
+  root.style.setProperty('--flagship-bottom-height', '40px');
+  root.style.setProperty('--flagship-bottom-bgcolor', 'white'); // used only for cozy-ui docs
+
+  root.style.setProperty('--flagship-bottom-overlay', 'transparent'); // used only for cozy-ui docs
+
+  root.style.setProperty('--flagship-bottom-color', 'black'); // used only for cozy-ui docs
+
+  root.classList.add('flagship-app'); // create status bar
+
+  var statusBarDiv = document.createElement('div');
+  statusBarDiv.setAttribute('id', 'flagshipStatusBar');
+  statusBarDiv.style.cssText = 'position:fixed;top:0;height:var(--flagship-top-height);z-index:10000000;color:var(--flagship-top-color);background-color:var(--flagship-top-bgcolor);width:100%;display:flex;align-items:center;justify-content:center'; // create status bar overlay
+
+  var statusBarOverlay = document.createElement('div');
+  statusBarOverlay.setAttribute('id', 'flagshipStatusBarOverlay');
+  statusBarOverlay.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;background-color:var(--flagship-top-overlay)';
+  statusBarDiv.appendChild(statusBarOverlay); // create status bar text
+
+  var statusBarText = document.createElement('div');
+  statusBarText.setAttribute('id', 'flagshipStatusBarText');
+  statusBarText.innerText = 'Flagship Top Status Bar with clock';
+  statusBarDiv.appendChild(statusBarText); // create nav bar
+
+  var navBarDiv = document.createElement('div');
+  navBarDiv.setAttribute('id', 'flagshipNavBar');
+  navBarDiv.style.cssText = 'position:fixed;bottom:0;height:var(--flagship-bottom-height);z-index:10000000;color:var(--flagship-bottom-color);background-color:var(--flagship-bottom-bgcolor);width:100%;display:flex;align-items:center;justify-content:center'; // create nav bar overlay
+
+  var navBarOverlay = document.createElement('div');
+  navBarOverlay.setAttribute('id', 'flagshipNavBarOverlay');
+  navBarOverlay.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;background-color:var(--flagship-bottom-overlay)';
+  navBarDiv.appendChild(navBarOverlay); // create nav bar text
+
+  var navBarText = document.createElement('div');
+  navBarText.setAttribute('id', 'flagshipNavBarText');
+  navBarText.innerText = 'Flagship Nav Bar';
+  navBarDiv.appendChild(navBarText); // add status and nav bar and its content into the DOM
+
+  var currentDiv = document.getElementById('rsg-root');
+  document.body.insertBefore(statusBarDiv, currentDiv);
+  document.body.insertBefore(navBarDiv, currentDiv);
+};
+/**
+ * Remove fake DOM element that simulates native Status and Nav bar
+ */
+
+export var removeFlagshipElements = function removeFlagshipElements() {
+  var _document$getElementB, _document$getElementB2;
+
+  var root = document.getElementsByTagName('body')[0];
+  root.style.removeProperty('--flagship-top-height');
+  root.style.removeProperty('--flagship-top-bgcolor');
+  root.style.removeProperty('--flagship-top-overlay');
+  root.style.removeProperty('--flagship-top-color');
+  root.style.removeProperty('--flagship-bottom-height');
+  root.style.removeProperty('--flagship-bottom-bgcolor');
+  root.style.removeProperty('--flagship-bottom-overlay');
+  root.style.removeProperty('--flagship-bottom-color');
+  root.classList.remove('flagship-app');
+  (_document$getElementB = document.getElementById('flagshipStatusBar')) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.remove();
+  (_document$getElementB2 = document.getElementById('flagshipNavBar')) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.remove();
+};
+/**
+ * Whether we are in cozy-ui documentation (Rsg is for ReactStyleGuide)
+ * @returns {boolean}
+ */
+
+export var isRsg = !!document.getElementById('rsg-root');
+/**
+ * Overrides flagship metadata
+ * See https://github.com/cozy/cozy-libs/blob/master/packages/cozy-device-helper/src/flagship.ts#L13
+ */
+
+export var getFlagshipMetadata = isRsg ? function () {
+  var _JSON$parse;
+
+  return {
+    immersive: ((_JSON$parse = JSON.parse(localStorage.getItem('flagship-app'))) === null || _JSON$parse === void 0 ? void 0 : _JSON$parse.contained) === 'off' || false,
+    statusBarHeight: 40,
+    navbarHeight: 40
+  };
+} : getFlagshipMetadataFromDeviceHelper;
+/**
+ * Set the css values for Status and Nav bar inside cozy-ui documentation
+ * see https://github.com/cozy/cozy-libs/blob/master/packages/cozy-intent/src/api/models/applications.ts#L33
+ * @param {undefined | Partial<FlagshipUI>} param0
+ * @returns
+ */
+
+export var setRsgFlagshipElements = function setRsgFlagshipElements() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      topBackground = _ref.topBackground,
+      topOverlay = _ref.topOverlay,
+      topTheme = _ref.topTheme,
+      bottomBackground = _ref.bottomBackground,
+      bottomOverlay = _ref.bottomOverlay,
+      bottomTheme = _ref.bottomTheme;
+
+  if (!isRsg) return;
+  var root = document.getElementsByTagName('body')[0];
+
+  if (topBackground) {
+    root.style.setProperty('--flagship-top-bgcolor', topBackground);
+  }
+
+  if (topOverlay) {
+    root.style.setProperty('--flagship-top-overlay', topOverlay);
+  }
+
+  if (topTheme) {
+    root.style.setProperty('--flagship-top-color', topTheme === 'dark' ? 'black' : 'white');
+  }
+
+  if (bottomBackground) {
+    root.style.setProperty('--flagship-bottom-bgcolor', bottomBackground);
+  }
+
+  if (bottomOverlay) {
+    root.style.setProperty('--flagship-bottom-overlay', bottomOverlay);
+  }
+
+  if (bottomTheme) {
+    root.style.setProperty('--flagship-bottom-color', bottomTheme === 'dark' ? 'black' : 'white');
+  }
+};

package/transpiled/react/hooks/useSetFlagshipUi/useSetFlagshipUI.js

@@ -4,6 +4,7 @@ import identity from 'lodash/identity';
 import isEmpty from 'lodash/isEmpty';
 import isObject from 'lodash/isObject';
 import { useWebviewIntent } from 'cozy-intent';
+import { setRsgFlagshipElements } from "cozy-ui/transpiled/react/hooks/useSetFlagshipUi/helpers";
 export var ThemeColor;
 
 (function (ThemeColor) {
@@ -12,9 +13,10 @@ export var ThemeColor;
 })(ThemeColor || (ThemeColor = {}));
 
 export var parseArg = function parseArg(webviewIntent, arg, caller) {
-  if (!webviewIntent) return;
-  var sanitized = isObject(arg) && pickBy(arg, identity);
+  var sanitized = isObject(arg) ? pickBy(arg, identity) : undefined;
   var validUI = !isEmpty(sanitized) && sanitized;
+  setRsgFlagshipElements(sanitized);
+  if (!webviewIntent) return;
   validUI && webviewIntent.call('setFlagshipUI', validUI, caller);
 };
 export var useSetFlagshipUI = function useSetFlagshipUI(onMount, onUnmount, caller) {