cozy-ui 124.1.1 → 125.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "124.1.1",
+  "version": "125.0.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,43 +1,119 @@
 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, ...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 (
+    <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(
+        className,
+        styles['o-layout-main'],
+        styles[`o-layout-main-${variant}`],
+        {
+          [styles[`o-layout-main-${variant}--topbar`]]: withTopBar
+        }
+      )}
+      {...props}
+    >
+      {children}
+    </main>
+  )
+})
+
+Main.displayName = 'Main'
+
+export const Content = forwardRef(({ className, children, ...props }, ref) => {
+  const { monoColumn } = useLayout()
+  const variant = monoColumn ? 'monocolumn' : '2panes'
+
   return (
     <div
+      role="main"
+      ref={ref}
       className={cx(
-        monoColumn ? styles['o-layout'] : styles['o-layout-2panes'],
         className,
-        [styles['o-layout--rounded']]
+        styles['o-layout-content'],
+        styles[`o-layout-content-${variant}`]
       )}
-      {...rest}
+      {...props}
     >
       {children}
     </div>
   )
-}
-
-export const Main = ({ children, ...rest }) => <main {...rest}>{children}</main>
+})
 
-export class Content extends Component {
-  render() {
-    const { children, ...rest } = this.props
-    return (
-      <div role="main" {...rest}>
-        {children}
-      </div>
-    )
-  }
-}
+Content.displayName = 'Content'
 
 Layout.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  /** Used to add/remove top spacing when using with or without a topbar */
+  withTopBar: PropTypes.bool,
+  /** Should be true if no sidebar in the app */
   monoColumn: PropTypes.bool
 }
 
 Layout.defaultProps = {
+  withTopBar: true,
   monoColumn: false
 }

package/react/Layout/Layout.md

@@ -34,6 +34,7 @@ import CheckIcon from 'cozy-ui/transpiled/react/Icons/Check'
 import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
 import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import { makeStyles } from 'cozy-ui/transpiled/react/styles'
+import Variants from 'cozy-ui/docs/components/Variants'
 
 /**
  * In a normal app, ExampleRouterNavLink is from react-router
@@ -50,13 +51,6 @@ const ExampleRouterNavLink = ({ children, className, active, activeClassName, on
 const NavLink = genNavLink(ExampleRouterNavLink)
 
 // Not necessary in a normal app
-const styles = {
-  layout: {
-    position: 'relative',
-    transform: 'translateZ(0)'
-  }
-}
-
 const useStyles = makeStyles({
   layout: {
     position: 'relative',
@@ -67,12 +61,13 @@ const useStyles = makeStyles({
   }
 })
 
-;
+const initialVariants = [{ monoColumn: false, withTopBar: true }]
+const [active, setActive] = useState(['Section 1', 'Subsection 1'])
+const styles = useStyles()
 
-const Example = () => {
-  const [active, setActive] = useState(['Section 1', 'Subsection 1'])
-  const styles = useStyles()
+;
 
+const SideBar = ({ variant }) => {
   // makeProps is not necessary in a normal app since react-router sets active
   // and onClick by itself
   const makeProps = route => {
@@ -80,7 +75,7 @@ const Example = () => {
     return { onClick: () => setActive(route), active: routeIsMatching }
   }
 
-  return <Layout className={styles.layout}>
+  return (
     <Sidebar>
       <Nav>
         <NavItem>
@@ -114,53 +109,27 @@ const Example = () => {
         </NavItem>
       </Nav>
     </Sidebar>
-    <Main>
-      <Content className='u-p-1'>
-        <h2 className='u-mt-0'>{ active.join(' / ') }</h2>
-        { content.ada.short }
-      </Content>
-    </Main>
-  </Layout>
+  )
 }
 
-<DemoProvider>
-  <Example />
-</DemoProvider>
-```
-
-`monoColumn` option (without sidebar)
-
-```jsx
-import { Layout, Main, Content } from 'cozy-ui/transpiled/react/Layout'
-import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
-import { makeStyles } from 'cozy-ui/transpiled/react/styles'
-
-// Not necessary in a normal app
-const useStyles = makeStyles({
-  layout: {
-    '& > main': {
-      minHeight: 'unset'
-    }
-  }
-})
-
-const Example = () => {
-  const styles = useStyles()
-
-  return (
-    <Layout className={styles.layout} monoColumn>
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <DemoProvider>
+      <Layout
+        className={styles.layout}
+        withTopBar={variant.withTopBar}
+        monoColumn={variant.monoColumn}
+      >
+        {!variant.monoColumn && <SideBar variant={variant} />}
+        {variant.withTopBar && <div className="u-flex-m u-dn u-flex-items-center u-pos-absolute u-top-0 u-w-100" style={{ height: '48px', backgroundColor: 'var(--defaultBackgroundColor)' }}>Fake TopBar</div>}
         <Main>
           <Content className='u-p-1'>
+            <h2 className='u-mt-0'>{ active.join(' / ') }</h2>
             { content.ada.short }
           </Content>
         </Main>
-    </Layout>
-  )
-}
-
-;
-
-<DemoProvider>
-  <Example />
-</DemoProvider>
+      </Layout>
+    </DemoProvider>
+  )}
+</Variants>
 ```

package/react/Layout/styles.styl

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

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/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,83 +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
-
-    &--rounded
-        +medium-screen('min') // desktop only
-            main
-                background-color var(--defaultBackgroundColor)
+    +medium-screen() // mobile + tablet
+        display block
 
-                & > [role=main]
-                    margin 1rem 1rem 1rem 0
-                    border-radius 1rem
-                    background-color var(--paperBackgroundColor)
+    &-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 'calc(100vh - var(--sidebarHeight) - %s)' % barHeight
-
-        main,
-        main > [role=contentinfo], // Deprecated
-        main > [role=main]
-            display block
-            overflow visible
-
-        // These pseudo-element are "ghost" elements replacing bar and nav
-        &:before
-        &:after
-            content ''
-            display block
-
-        &:before
-            height barHeight
-
-        &:after
-            height navHeight
-
-// 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
+        padding-left env(safe-area-inset-left)
+        padding-right env(safe-area-inset-right)
+        padding-bottom env(safe-area-inset-bottom)
+
+    &-monocolumn
+        height 100%
+
+        +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)
+
+        +medium-screen() // mobile + tablet
+            min-height calc(100vh - var(--sidebarHeight))
+            background-color transparent
+
+        &--topbar
+            +medium-screen() // mobile + tablet
+                min-height 'calc(100vh - var(--sidebarHeight) - %s)' % barHeight
+
+$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)
 
     +medium-screen() // mobile + tablet
-        > aside
-            position fixed
-            bottom 0
-            left 0
-            display block
-            z-index var(--zIndex-nav)
-            width 100%
+        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)

package/transpiled/react/AppTitle/index.js

@@ -24,10 +24,10 @@ import NotesIcon from "cozy-ui/transpiled/react/Icons/Notes";
 import NotesTextIcon from "cozy-ui/transpiled/react/Icons/NotesText";
 import PassIcon from "cozy-ui/transpiled/react/Icons/Pass";
 import PassTextIcon from "cozy-ui/transpiled/react/Icons/PassText";
-import StoreIcon from "cozy-ui/transpiled/react/Icons/Store";
-import StoreTextIcon from "cozy-ui/transpiled/react/Icons/StoreText";
 import PhotosIcon from "cozy-ui/transpiled/react/Icons/Photos";
 import PhotosTextIcon from "cozy-ui/transpiled/react/Icons/PhotosText";
+import StoreIcon from "cozy-ui/transpiled/react/Icons/Store";
+import StoreTextIcon from "cozy-ui/transpiled/react/Icons/StoreText";
 import TwakeTextIcon from "cozy-ui/transpiled/react/Icons/TwakeText";
 import TwakeWorkplaceIcon from "cozy-ui/transpiled/react/Icons/TwakeWorkplace";
 import WorkplaceTextIcon from "cozy-ui/transpiled/react/Icons/WorkplaceText";

package/transpiled/react/CozyDialogs/useCozyDialog.js

@@ -24,7 +24,7 @@ var useStyles = makeStyles({
 });
 
 var useCozyDialog = function useCozyDialog(props) {
-  var _componentsProps$dial, _componentsProps$dial2, _componentsProps$dial3;
+  var _otherProps$BackdropP, _componentsProps$dial, _componentsProps$dial2, _componentsProps$dial3;
 
   var size = props.size,
       actions = props.actions,
@@ -70,6 +70,11 @@ var useCozyDialog = function useCozyDialog(props) {
       paper: "".concat(paperClassName, " ").concat(styles.paper, " ").concat(otherProps.classes ? otherProps.classes.paper : ''),
       scrollPaper: scrollPaperClassName
     }),
+    BackdropProps: _objectSpread({
+      style: _objectSpread({
+        transitionDelay: 50
+      }, otherProps === null || otherProps === void 0 ? void 0 : (_otherProps$BackdropP = otherProps.BackdropProps) === null || _otherProps$BackdropP === void 0 ? void 0 : _otherProps$BackdropP.style)
+    }, otherProps.BackdropProps),
     TransitionProps: _objectSpread({
       fullScreen: fullScreen
     }, otherProps.TransitionProps)

package/transpiled/react/Layout/Layout.d.ts

@@ -1,28 +1,6 @@
-export function Layout({ children, className, monoColumn, ...rest }: {
-    [x: string]: any;
-    children: any;
-    className: any;
-    monoColumn: any;
-}): JSX.Element;
-export namespace Layout {
-    namespace propTypes {
-        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        const className: PropTypes.Requireable<string>;
-        const monoColumn: PropTypes.Requireable<boolean>;
-    }
-    namespace defaultProps {
-        const monoColumn_1: boolean;
-        export { monoColumn_1 as monoColumn };
-    }
-}
-export function Main({ children, ...rest }: {
-    [x: string]: any;
-    children: any;
-}): JSX.Element;
-export class Content extends React.Component<any, any, any> {
-    constructor(props: Readonly<any>);
-    constructor(props: any, context?: any);
-    render(): JSX.Element;
-}
-import PropTypes from "prop-types";
+export const LayoutContext: React.Context<any>;
+export function useLayout(): any;
+export const Layout: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export const Main: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export const Content: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from "react";