cozy-ui 124.2.0 → 125.1.0

package/package.json

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

package/react/AppTitle/index.jsx

@@ -16,10 +16,10 @@ import NotesIcon from '../Icons/Notes'
 import NotesTextIcon from '../Icons/NotesText'
 import PassIcon from '../Icons/Pass'
 import PassTextIcon from '../Icons/PassText'
-import StoreIcon from '../Icons/Store'
-import StoreTextIcon from '../Icons/StoreText'
 import PhotosIcon from '../Icons/Photos'
 import PhotosTextIcon from '../Icons/PhotosText'
+import StoreIcon from '../Icons/Store'
+import StoreTextIcon from '../Icons/StoreText'
 import TwakeTextIcon from '../Icons/TwakeText'
 import TwakeWorkplaceIcon from '../Icons/TwakeWorkplace'
 import WorkplaceTextIcon from '../Icons/WorkplaceText'

package/react/CozyDialogs/useCozyDialog.js

@@ -56,6 +56,13 @@ const useCozyDialog = props => {
       }`,
       scrollPaper: scrollPaperClassName
     },
+    BackdropProps: {
+      style: {
+        transitionDelay: 50,
+        ...otherProps?.BackdropProps?.style
+      },
+      ...otherProps.BackdropProps
+    },
     TransitionProps: {
       fullScreen,
       ...otherProps.TransitionProps

package/react/Layout/Layout.jsx

@@ -1,45 +1,108 @@
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React, { createContext, forwardRef, useContext, useMemo } from 'react'
 
 import styles from './styles.styl'
 
-export const Layout = ({
-  children,
-  className,
-  monoColumn,
-  withTopBar,
-  ...rest
-}) => {
+export const LayoutContext = createContext()
+
+export const useLayout = () => {
+  const context = useContext(LayoutContext)
+
+  if (!context) {
+    throw new Error('useLayout must be used within a LayoutContext')
+  }
+  return context
+}
+
+const LayoutProvider = React.memo(({ monoColumn, withTopBar, children }) => {
+  const value = useMemo(
+    () => ({
+      monoColumn,
+      withTopBar
+    }),
+    [monoColumn, withTopBar]
+  )
+
   return (
-    <div
+    <LayoutContext.Provider value={value}>{children}</LayoutContext.Provider>
+  )
+})
+
+LayoutProvider.displayName = 'LayoutProvider'
+
+export const Layout = forwardRef(
+  ({ children, className, monoColumn, withTopBar, ...props }, ref) => {
+    const variant = monoColumn ? 'monocolumn' : '2panes'
+
+    return (
+      <LayoutProvider monoColumn={monoColumn} withTopBar={withTopBar}>
+        <div
+          ref={ref}
+          className={cx(
+            className,
+            styles['o-layout'],
+            styles[`o-layout-${variant}`],
+            {
+              [styles[`o-layout-topbar`]]: withTopBar
+            }
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </LayoutProvider>
+    )
+  }
+)
+
+Layout.displayName = 'Layout'
+
+export const Main = forwardRef(({ className, children, ...props }, ref) => {
+  const { monoColumn, withTopBar } = useLayout()
+  const variant = monoColumn ? 'monocolumn' : '2panes'
+
+  return (
+    <main
+      ref={ref}
       className={cx(
-        monoColumn ? styles['o-layout'] : styles['o-layout-2panes'],
         className,
+        styles['o-layout-main'],
+        styles[`o-layout-main-${variant}`],
         {
-          [styles[`o-layout${monoColumn ? '' : '-2panes'}--withTopBar`]]:
-            withTopBar
+          [styles[`o-layout-main-${variant}--topbar`]]: withTopBar
         }
       )}
-      {...rest}
+      {...props}
     >
       {children}
-    </div>
+    </main>
   )
-}
+})
 
-export const Main = ({ children, ...rest }) => <main {...rest}>{children}</main>
+Main.displayName = 'Main'
 
-export class Content extends Component {
-  render() {
-    const { children, ...rest } = this.props
-    return (
-      <div role="main" {...rest}>
-        {children}
-      </div>
-    )
-  }
-}
+export const Content = forwardRef(({ className, children, ...props }, ref) => {
+  const { monoColumn } = useLayout()
+  const variant = monoColumn ? 'monocolumn' : '2panes'
+
+  return (
+    <div
+      role="main"
+      ref={ref}
+      className={cx(
+        className,
+        styles['o-layout-content'],
+        styles[`o-layout-content-${variant}`]
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+})
+
+Content.displayName = 'Content'
 
 Layout.propTypes = {
   children: PropTypes.node,

package/react/Layout/styles.styl

@@ -1,13 +1,10 @@
 @require '../../stylus/objects/layouts'
 
 .o-layout
-    @extend $app
+    @extend $app-layout
 
-.o-layout--withTopBar
-    @extend $app--withTopBar
+.o-layout-main
+    @extend $app-main
 
-.o-layout-2panes
-    @extend $app-2panes-sticky
-
-.o-layout-2panes--withTopBar
-    @extend $app-2panes--withTopBar
+.o-layout-content
+    @extend $app-content

package/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -586,8 +586,8 @@ export const makeLightNormalOverrides = theme => ({
   },
   MuiDialog: {
     paper: {
+      width: '100%',
       '&.small': {
-        width: '480px',
         maxWidth: '480px',
         [theme.breakpoints.down('md')]: {
           margin: '16px',
@@ -602,19 +602,12 @@ export const makeLightNormalOverrides = theme => ({
         }
       },
       '&.medium': {
-        [theme.breakpoints.up('md')]: {
-          width: '544px',
-          maxWidth: '544px'
-        }
+        maxWidth: '544px'
       },
       '&.large': {
-        [theme.breakpoints.up('md')]: {
-          width: '800px',
-          maxWidth: '800px'
-        }
+        maxWidth: '800px'
       },
       '&.full': {
-        width: '100%',
         maxWidth: '100%'
       }
     },
@@ -624,6 +617,15 @@ export const makeLightNormalOverrides = theme => ({
       }
     },
     paperFullScreen: {
+      '&.small': {
+        maxWidth: '100%'
+      },
+      '&.medium': {
+        maxWidth: '100%'
+      },
+      '&.large': {
+        maxWidth: '100%'
+      },
       '& .cozyDialogActions': {
         paddingBottom: `calc(env(safe-area-inset-bottom) + ${getFlagshipCssVar(
           'bottom'

package/react/Sidebar/Readme.md

@@ -29,11 +29,13 @@ const NavLink = genNavLink(
     <a className={cx(className, active ? activeClassName : null)}>{children}</a>
   )
 )
+
+const demoStyle = { position: "initial" }
 // -->
 
 ;
 
-<Sidebar id='sidebar'>
+<Sidebar id='sidebar' style={demoStyle}>
   <Nav>
     <NavItem id='nav-item'>
       <NavLink to="/warn" active>

package/react/Sidebar/index.jsx

@@ -25,11 +25,7 @@ const Sidebar = ({ children, className, ...restProps }) => {
   return (
     <aside
       id="sidebar"
-      className={cx(
-        styles['o-sidebar'],
-        [styles['o-sidebar--large']],
-        className
-      )}
+      className={cx(styles['o-sidebar'], className)}
       {...restProps}
     >
       {children}

package/react/helpers/breakpoints.js

@@ -16,12 +16,20 @@ const breakpoints = {
   isMobile: [0, small]
 }
 
-export const getBreakpointsStatus = breakpoints => {
-  const width = window.innerWidth
+export const getBreakpointsStatus = (breakpoints, innerWidth) => {
+  const width = innerWidth || window.innerWidth
   return mapValues(
     breakpoints,
     ([min, max]) => width >= min && (max === undefined || width <= max)
   )
 }
 
+export const isInsideIframe = () => {
+  try {
+    return window.self !== window.top
+  } catch (e) {
+    return true
+  }
+}
+
 export default breakpoints

package/react/providers/Breakpoints/Readme.md

@@ -15,6 +15,8 @@ completely change the content, the layout, or prune away complete
 subtrees (useful on mobile where space is at a premium). Here for
 example, the square contents changes on desktop or mobile.
 
+By default, using `useBreakpoints` inside an iframe will refere to the iframe inner width. If you use `parentBasedIframe=true` on the provider wrapping the iframe, the breakpoints returned inside the iframe will refere to the parent window inner width instead.
+
 ```jsx
 import useBreakpoints, { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 

package/react/providers/Breakpoints/index.jsx

@@ -1,20 +1,25 @@
 import throttle from 'lodash/throttle'
+import PropTypes from 'prop-types'
 import React, { createContext, useContext, useState, useEffect } from 'react'
 
-import breakpointDefs, {
-  getBreakpointsStatus as _getBreakpointsStatus
-} from '../../helpers/breakpoints'
-
-const getBreakpointsStatus = () => _getBreakpointsStatus(breakpointDefs)
+import { useIframeConnection } from './useIframeConnection'
+import { useIframeToSendWidth } from './useIframeToSendWidth'
+import { useParentBreakpoints } from './useParentBreakpoints'
+import breakpointDefs, { getBreakpointsStatus } from '../../helpers/breakpoints'
 
 const BreakpointsCtx = createContext(null)
 
-export const BreakpointsProvider = ({ children }) => {
-  const [breakpoints, setBreakpoints] = useState(getBreakpointsStatus())
+export const BreakpointsProvider = ({ parentBasedIframe, children }) => {
+  const [breakpoints, setBreakpoints] = useState(
+    getBreakpointsStatus(breakpointDefs)
+  )
+  const { hasIframe } = useIframeConnection({ parentBasedIframe })
+  useIframeToSendWidth({ hasIframe })
+  const { parentBreakpoints } = useParentBreakpoints({ parentBasedIframe })
 
   useEffect(() => {
     const handleResize = throttle(() => {
-      setBreakpoints(getBreakpointsStatus())
+      setBreakpoints(getBreakpointsStatus(breakpointDefs))
     }, 100)
 
     window.addEventListener('resize', handleResize)
@@ -25,12 +30,21 @@ export const BreakpointsProvider = ({ children }) => {
   }, [])
 
   return (
-    <BreakpointsCtx.Provider value={breakpoints}>
+    <BreakpointsCtx.Provider value={parentBreakpoints || breakpoints}>
       {children}
     </BreakpointsCtx.Provider>
   )
 }
 
+BreakpointsProvider.defaultProps = {
+  parentBasedIframe: false
+}
+
+BreakpointsProvider.propTypes = {
+  /** Iframes breakpoints are based on parent window inner width instead of iframe inner width  */
+  parentBasedIframe: PropTypes.bool
+}
+
 export const useBreakpoints = () => {
   const v = useContext(BreakpointsCtx)
   if (v === null) {

package/react/providers/Breakpoints/useIframeConnection.jsx

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react'
+
+import { isInsideIframe } from '../../helpers/breakpoints'
+
+export const useIframeConnection = ({ parentBasedIframe }) => {
+  const [hasIframe, setHasIframe] = useState(false)
+
+  const isIframe = parentBasedIframe && isInsideIframe()
+
+  // parent window receives from iframe to give breakpoints
+  useEffect(() => {
+    const handleMessage = ev => {
+      if (ev.data === 'UI-breakpoints-needParentBreakpoints') {
+        setHasIframe(true)
+      }
+    }
+
+    window.addEventListener('message', handleMessage)
+
+    return () => window.removeEventListener('message', handleMessage)
+  }, [])
+
+  // iframe send to parent window ask for its breakpoints
+  useEffect(() => {
+    if (isIframe) {
+      window.parent.postMessage('UI-breakpoints-needParentBreakpoints', '*')
+    }
+  }, [isIframe])
+
+  return { hasIframe }
+}

package/react/providers/Breakpoints/useIframeToSendWidth.jsx

@@ -0,0 +1,33 @@
+import throttle from 'lodash/throttle'
+import { useEffect } from 'react'
+
+/**
+ * To send window innerWidth to first iframe
+ * @returns
+ */
+const sendWidthToIframe = () =>
+  window.frames[1].postMessage(`UI-breakpoints-value:${window.innerWidth}`, '*')
+
+export const useIframeToSendWidth = ({ hasIframe }) => {
+  // parent window send its innerWidth
+  useEffect(() => {
+    if (hasIframe) {
+      sendWidthToIframe()
+    }
+  }, [hasIframe])
+
+  // parent window send its innerWidth on resize
+  useEffect(() => {
+    const handleResize = throttle(() => {
+      if (hasIframe) {
+        sendWidthToIframe()
+      }
+    }, 100)
+
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [hasIframe])
+}

package/react/providers/Breakpoints/useParentBreakpoints.jsx

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react'
+
+import breakpointDefs, {
+  getBreakpointsStatus,
+  isInsideIframe
+} from '../../helpers/breakpoints'
+
+export const useParentBreakpoints = ({ parentBasedIframe }) => {
+  const [parentBreakpoints, setParentBreakpoints] = useState()
+
+  const isIframe = parentBasedIframe && isInsideIframe()
+
+  // iframe receives breakpoints from parent window
+  useEffect(() => {
+    const handleMessage = ev => {
+      if (!isIframe) return
+
+      if (
+        typeof ev.data === 'string' &&
+        ev.data.includes?.('UI-breakpoints-value:')
+      ) {
+        const parentInnerWidth = ev.data.split(':')[1]
+
+        setParentBreakpoints(
+          getBreakpointsStatus(breakpointDefs, parentInnerWidth)
+        )
+      }
+    }
+
+    window.addEventListener('message', handleMessage)
+
+    return () => window.removeEventListener('message', handleMessage)
+  }, [isIframe])
+
+  return { parentBreakpoints }
+}

package/stylus/objects/layouts.styl

@@ -50,8 +50,7 @@ $elastic-content
 $elastic-bar
     flex 0 0 auto
 
-// One column layout
-$app
+$app-layout
     box-sizing border-box
     display flex
     max-width 100%
@@ -60,102 +59,90 @@ $app
     background-color var(--paperBackgroundColor)
     color var(--primaryTextColor)
 
-    main
-        display flex
-        flex-direction column
-        flex 0 0 auto
-
-    main,
-    main > [role=contentinfo], // Deprecated
-    main > [role=main]
-        position relative
-        display flex
-        flex-direction column
-        flex 1 1 auto
-        box-sizing border-box
-        height 100%
-        overflow-x hidden
-        overflow-y auto
-
     +medium-screen() // mobile + tablet
         display block
 
+    &-topbar
+        +medium-screen() // mobile + tablet
+            // this pseudo-element is "ghost" element replacing bar
+            &:before
+                content ''
+                display block
+                height barHeight
+
+    // When you want a sidebar
+    &-2panes
+        flex 0 0 100%
+        align-items stretch
+
+        +medium-screen() // mobile + tablet
+            // this pseudo-element is "ghost" element replacing nav
+            &:after
+                content ''
+                display block
+                height navHeight
+
+$app-main
+    display flex
+    flex-direction column
+    position relative
+    flex 1 1 auto
+    box-sizing border-box
+    overflow-x hidden
+    overflow-y auto
+
+    +medium-screen() // mobile + tablet
+        display block
+        overflow visible
         // iPhone X environment tweak
-        main
-            padding-left env(safe-area-inset-left)
-            padding-right env(safe-area-inset-right)
-            padding-bottom env(safe-area-inset-bottom)
-            min-height 100vh
+        padding-left env(safe-area-inset-left)
+        padding-right env(safe-area-inset-right)
+        padding-bottom env(safe-area-inset-bottom)
 
-        main,
-        main > [role=contentinfo], // Deprecated
-        main > [role=main]
-            display block
-            overflow visible
+    &-monocolumn
+        height 100%
 
-$app--withTopBar
-    +medium-screen() // mobile + tablet
-        main
-            min-height 'calc(100vh - %s)' % barHeight
-
-        // this pseudo-element is "ghost" element replacing bar
-        &:before
-            content ''
-            display block
-            height barHeight
-
-// STICKY layout
-// When you want a sidebar and you want it to act like a sticky footer on mobile
-$app-2panes-sticky
-    @extend $app
-    flex 0 0 100%
-    align-items stretch
+        +medium-screen() // mobile + tablet
+            min-height 100vh
 
-    & > aside
-        display flex
-        flex-direction column
-        flex 0 0 auto
+        &--topbar
+            +medium-screen() // mobile + tablet
+                min-height 'calc(100vh - %s)' % barHeight
 
-    main,
-    main > [role=contentinfo], // Deprecated
-    main > [role=main]
+    &-2panes
         height auto
+        background-color var(--defaultBackgroundColor)
 
-    // rounded effect
-    +medium-screen('min') // desktop only
-        main
-            background-color var(--defaultBackgroundColor)
+        +medium-screen() // mobile + tablet
+            min-height calc(100vh - var(--sidebarHeight))
+            background-color transparent
 
-            & > [role=main]
-                margin 1rem 1rem 1rem 0
-                border-radius 1rem
-                background-color var(--paperBackgroundColor)
+        &--topbar
+            +medium-screen() // mobile + tablet
+                min-height 'calc(100vh - var(--sidebarHeight) - %s)' % barHeight
 
-    +medium-screen() // mobile + tablet
-        main
-            min-height calc(100vh - var(--sidebarHeight))
+$app-content
+    position relative
+    display flex
+    flex-direction column
+    flex 1 1 auto
+    box-sizing border-box
+    overflow-x hidden
+    overflow-y auto
+    background-color var(--paperBackgroundColor)
 
-        // this pseudo-element is "ghost" element replacing nav
-        &:after
-            content ''
-            display block
-            height navHeight
-
-        > aside
-            position fixed
-            bottom 0
-            left 0
-            display block
-            z-index var(--zIndex-nav)
-            width 100%
-
-$app-2panes--withTopBar
     +medium-screen() // mobile + tablet
-        main
-            min-height 'calc(100vh - var(--sidebarHeight) - %s)' % barHeight
-
-        // this pseudo-element is "ghost" element replacing bar
-        &:before
-            content ''
-            display block
-            height barHeight
+        display block
+        overflow visible
+
+    &-monocolumn
+        height 100%
+
+    &-2panes
+        height auto
+        margin 1rem 1rem 1rem 0
+        border-radius 1rem
+
+        +medium-screen() // mobile + tablet
+            margin 0
+            border-radius 0

package/stylus/objects/sidebar.styl

@@ -9,22 +9,27 @@
     --sidebarHeight: rem(52)
 
 $sidebar
-    width rem(220)
+    width rem(236)
     background-color var(--defaultBackgroundColor)
     overflow-y auto
     overflow-x hidden
+    display flex
+    flex-direction column
+    flex 0 0 auto
 
     &--border
         border-right rem(1) solid var(--dividerColor)
 
-    &--large
-        width rem(236)
-
     +medium-screen()
         justify-content space-between
         border 0
         border-top rem(1) solid var(--dividerColor)
         height var(--sidebarHeight)
         width 100%
+        position fixed
+        bottom 0
+        left 0
+        display block
+        z-index var(--zIndex-nav)
         // iPhone X environment tweak
         padding-bottom env(safe-area-inset-bottom)