cozy-ui 124.2.0 → 125.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "124.2.0",
+  "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,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/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,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)

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,32 +1,6 @@
-export function Layout({ children, className, monoColumn, withTopBar, ...rest }: {
-    [x: string]: any;
-    children: any;
-    className: any;
-    monoColumn: any;
-    withTopBar: any;
-}): JSX.Element;
-export namespace Layout {
-    namespace propTypes {
-        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        const className: PropTypes.Requireable<string>;
-        const withTopBar: PropTypes.Requireable<boolean>;
-        const monoColumn: PropTypes.Requireable<boolean>;
-    }
-    namespace defaultProps {
-        const withTopBar_1: boolean;
-        export { withTopBar_1 as withTopBar };
-        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";

package/transpiled/react/Layout/Layout.js

@@ -1,71 +1,99 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className", "monoColumn", "withTopBar"],
-    _excluded2 = ["children"],
-    _excluded3 = ["children"];
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
+    _excluded2 = ["className", "children"],
+    _excluded3 = ["className", "children"];
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { createContext, forwardRef, useContext, useMemo } from 'react';
 var styles = {
   "o-layout": "styles__o-layout___3TSz9",
+  "o-layout-topbar": "styles__o-layout-topbar___2SHWi",
   "o-layout-2panes": "styles__o-layout-2panes___1CDQw",
-  "o-layout--withTopBar": "styles__o-layout--withTopBar___36qd5",
-  "o-layout-2panes--withTopBar": "styles__o-layout-2panes--withTopBar___Ub1z2"
+  "o-layout-main": "styles__o-layout-main___3mPxz",
+  "o-layout-main-monocolumn": "styles__o-layout-main-monocolumn___2a7vz",
+  "o-layout-main-monocolumn--topbar": "styles__o-layout-main-monocolumn--topbar___9_4Xd",
+  "o-layout-main-2panes": "styles__o-layout-main-2panes___3ickD",
+  "o-layout-main-2panes--topbar": "styles__o-layout-main-2panes--topbar___cGi-H",
+  "o-layout-content": "styles__o-layout-content___3D5gN",
+  "o-layout-content-monocolumn": "styles__o-layout-content-monocolumn___1rpxp",
+  "o-layout-content-2panes": "styles__o-layout-content-2panes___2Hotr"
 };
-export var Layout = function Layout(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      monoColumn = _ref.monoColumn,
-      withTopBar = _ref.withTopBar,
-      rest = _objectWithoutProperties(_ref, _excluded);
+export var LayoutContext = /*#__PURE__*/createContext();
+export var useLayout = function useLayout() {
+  var context = useContext(LayoutContext);
 
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: cx(monoColumn ? styles['o-layout'] : styles['o-layout-2panes'], className, _defineProperty({}, styles["o-layout".concat(monoColumn ? '' : '-2panes', "--withTopBar")], withTopBar))
-  }, rest), children);
-};
-export var Main = function Main(_ref2) {
-  var children = _ref2.children,
-      rest = _objectWithoutProperties(_ref2, _excluded2);
+  if (!context) {
+    throw new Error('useLayout must be used within a LayoutContext');
+  }
 
-  return /*#__PURE__*/React.createElement("main", rest, children);
+  return context;
 };
-export var Content = /*#__PURE__*/function (_Component) {
-  _inherits(Content, _Component);
-
-  var _super = _createSuper(Content);
+var LayoutProvider = /*#__PURE__*/React.memo(function (_ref) {
+  var monoColumn = _ref.monoColumn,
+      withTopBar = _ref.withTopBar,
+      children = _ref.children;
+  var value = useMemo(function () {
+    return {
+      monoColumn: monoColumn,
+      withTopBar: withTopBar
+    };
+  }, [monoColumn, withTopBar]);
+  return /*#__PURE__*/React.createElement(LayoutContext.Provider, {
+    value: value
+  }, children);
+});
+LayoutProvider.displayName = 'LayoutProvider';
+export var Layout = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+      className = _ref2.className,
+      monoColumn = _ref2.monoColumn,
+      withTopBar = _ref2.withTopBar,
+      props = _objectWithoutProperties(_ref2, _excluded);
 
-  function Content() {
-    _classCallCheck(this, Content);
+  var variant = monoColumn ? 'monocolumn' : '2panes';
+  return /*#__PURE__*/React.createElement(LayoutProvider, {
+    monoColumn: monoColumn,
+    withTopBar: withTopBar
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: cx(className, styles['o-layout'], styles["o-layout-".concat(variant)], _defineProperty({}, styles["o-layout-topbar"], withTopBar))
+  }, props), children));
+});
+Layout.displayName = 'Layout';
+export var Main = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var className = _ref3.className,
+      children = _ref3.children,
+      props = _objectWithoutProperties(_ref3, _excluded2);
 
-    return _super.apply(this, arguments);
-  }
+  var _useLayout = useLayout(),
+      monoColumn = _useLayout.monoColumn,
+      withTopBar = _useLayout.withTopBar;
 
-  _createClass(Content, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          rest = _objectWithoutProperties(_this$props, _excluded3);
+  var variant = monoColumn ? 'monocolumn' : '2panes';
+  return /*#__PURE__*/React.createElement("main", _extends({
+    ref: ref,
+    className: cx(className, styles['o-layout-main'], styles["o-layout-main-".concat(variant)], _defineProperty({}, styles["o-layout-main-".concat(variant, "--topbar")], withTopBar))
+  }, props), children);
+});
+Main.displayName = 'Main';
+export var Content = /*#__PURE__*/forwardRef(function (_ref4, ref) {
+  var className = _ref4.className,
+      children = _ref4.children,
+      props = _objectWithoutProperties(_ref4, _excluded3);
 
-      return /*#__PURE__*/React.createElement("div", _extends({
-        role: "main"
-      }, rest), children);
-    }
-  }]);
+  var _useLayout2 = useLayout(),
+      monoColumn = _useLayout2.monoColumn;
 
-  return Content;
-}(Component);
+  var variant = monoColumn ? 'monocolumn' : '2panes';
+  return /*#__PURE__*/React.createElement("div", _extends({
+    role: "main",
+    ref: ref,
+    className: cx(className, styles['o-layout-content'], styles["o-layout-content-".concat(variant)])
+  }, props), children);
+});
+Content.displayName = 'Content';
 Layout.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,