cozy-ui 94.0.0 → 95.0.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# [95.0.0](https://github.com/cozy/cozy-ui/compare/v94.1.0...v95.0.0) (2023-10-03)
+
+
+### Features
+
+* **Modal:** Re-export Modal component ([1ad81f6](https://github.com/cozy/cozy-ui/commit/1ad81f6))
+* **Viewer:** Use Modal by default instead Overlay in app ([7510557](https://github.com/cozy/cozy-ui/commit/7510557))
+
+
+### BREAKING CHANGES
+
+* **Viewer:** The Viewer is now wrapped with
+a Modal by default.
+You can remove the deprecated `Overlay` component
+(which wraps the `Viewer` component) from your applications.
+Or if you want to keep your implementation,
+please use the `disableModal` props
+on your `Viewer` components.
+
+# [94.1.0](https://github.com/cozy/cozy-ui/compare/v94.0.0...v94.1.0) (2023-10-02)
+
+
+### Features
+
+* **NestedSelect:** Add NestedSelectResponsive and BottomSheet ([d1659fe](https://github.com/cozy/cozy-ui/commit/d1659fe))
+
 # [94.0.0](https://github.com/cozy/cozy-ui/compare/v93.5.0...v94.0.0) (2023-10-02)
 
 

package/package.json

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

package/react/Dialog/Readme.md

@@ -9,7 +9,7 @@ will make sure that even your custom Dialogs will behave as CozyDialogs.
 import Dialog, { DialogTitle, DialogActions } from 'cozy-ui/transpiled/react/Dialog'
 import { DialogBackButton, DialogCloseButton, useCozyDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
-import DemoProvider from 'cozy-ui/transpiled/react/providers/DemoProvider'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import Alerter from 'cozy-ui/transpiled/react/deprecated/Alerter'
 
 import Divider from 'cozy-ui/transpiled/react/Divider'

package/react/Modal/Readme.md

@@ -0,0 +1 @@
+Re-export of @material-ui. See [the official API](https://v4.mui.com/api/modal/).

package/react/Modal/index.js

@@ -0,0 +1,3 @@
+import Modal from '@material-ui/core/Modal'
+
+export default Modal

package/react/NestedSelect/BottomSheet.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import cx from 'classnames'
+
+import Icon from '../Icon'
+import IconButton from '../IconButton'
+import ArrowUpIcon from '../Icons/ArrowUp'
+import BottomSheet, { BottomSheetHeader, BottomSheetItem } from '../BottomSheet'
+import Typography from '../Typography'
+import Divider from '../Divider'
+
+import NestedSelect from './NestedSelect'
+
+const HeaderComponent = ({ title, showBack, onClickBack }) => {
+  return (
+    <>
+      <BottomSheetHeader
+        className={cx('u-h-3', { 'u-pl-half u-pr-3': showBack })}
+      >
+        {showBack && (
+          <IconButton onClick={onClickBack}>
+            <Icon icon={ArrowUpIcon} rotate={-90} />
+          </IconButton>
+        )}
+        <Typography className="u-w-100" variant="h6" align="center">
+          {title}
+        </Typography>
+      </BottomSheetHeader>
+      <Divider />
+    </>
+  )
+}
+
+const SelfBottomSheet = props => {
+  return (
+    <BottomSheet backdrop onClose={props.onClose}>
+      <BottomSheetItem disableGutters>
+        <NestedSelect HeaderComponent={HeaderComponent} {...props} />
+      </BottomSheetItem>
+    </BottomSheet>
+  )
+}
+
+export default SelfBottomSheet

package/react/NestedSelect/ItemRow.jsx

@@ -18,7 +18,8 @@ const ItemRow = ({
   isSelected,
   radioPosition,
   isLast,
-  ellipsis
+  ellipsis,
+  noDivider
 }) => {
   const { isDesktop } = useBreakpoints()
 
@@ -76,7 +77,7 @@ const ItemRow = ({
           ? item.action.Component({ item, ...item.action.props })
           : null}
       </ListItem>
-      {!isLast && <Divider />}
+      {noDivider ? null : !isLast && <Divider />}
     </>
   )
 }

package/react/NestedSelect/NestedSelect.jsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import omit from 'lodash/omit'
 
+import List from '../List'
 import Input from '../Input'
 import Typography from '../Typography'
 import ItemRow from './ItemRow'
@@ -81,7 +82,8 @@ class NestedSelect extends Component {
       title,
       transformParentItem,
       radioPosition,
-      ellipsis
+      ellipsis,
+      noDivider
     } = this.props
     const { history, searchValue, searchResult } = this.state
     const current = history[0]
@@ -119,6 +121,7 @@ class NestedSelect extends Component {
               onClick={this.handleClickItem}
               isSelected={isSelectedWithLevel(parentItem)}
               ellipsis={ellipsis}
+              noDivider={noDivider}
             />
           ) : null}
           {searchOptions && level === 0 && (
@@ -149,6 +152,7 @@ class NestedSelect extends Component {
                   isSelected={isSelectedWithLevel(item)}
                   isLast={index === searchResult.length - 1}
                   ellipsis={ellipsis}
+                  noDivider={noDivider}
                 />
               ))
             )
@@ -162,6 +166,7 @@ class NestedSelect extends Component {
                 isSelected={isSelectedWithLevel(item)}
                 isLast={index === children.length - 1}
                 ellipsis={ellipsis}
+                noDivider={noDivider}
               />
             ))
           )}
@@ -172,7 +177,7 @@ class NestedSelect extends Component {
 }
 
 NestedSelect.defaultProps = {
-  ContentComponent: 'div',
+  ContentComponent: List,
   HeaderComponent: null,
   transformParentItem: x => x,
   radioPosition: 'right'
@@ -191,25 +196,16 @@ const ItemPropType = PropTypes.shape({
 })
 
 NestedSelect.propTypes = {
-  /**
-   * Can be set to "right" or "left". Defaults to "right"
-   */
+  /** Can be set to "right" or "left". Defaults to "right" */
   radioPosition: PropTypes.oneOf(['left', 'right']),
 
-  /**
-   * The whole option item is passed to this function when selected
-   */
+  /** The whole option item is passed to this function when selected */
   onSelect: PropTypes.func.isRequired,
 
-  /**
-   * Determines if the row looks selected. The `option` is
-   * passed as an argument.
-   */
+  /** Determines if the row looks selected. The `option` is passed as an argument. */
   isSelected: PropTypes.func.isRequired,
 
-  /**
-   * Options that will be rendered as nested lists of choices
-   */
+  /** Options that will be rendered as nested lists of choices */
   options: PropTypes.shape({
     children: PropTypes.arrayOf(ItemPropType)
   }),
@@ -242,10 +238,11 @@ NestedSelect.propTypes = {
     onSearch: PropTypes.func.isRequired
   }),
 
-  /**
-   * To manage ellipsis on ItemRow
-   */
-  ellipsis: PropTypes.bool
+  /** To manage ellipsis on ItemRow */
+  ellipsis: PropTypes.bool,
+
+  /** Remove dividers after each row */
+  noDivider: PropTypes.bool
 }
 
 export default NestedSelect

package/react/NestedSelect/NestedSelect.md

@@ -1,18 +1,22 @@
+You can use `react/NestedSelect/NestedSelectResponsive` wich provides automaticaly a modal on desktop and bottomsheet on mobile, or directly `react/NestedSelect/Modal` and `react/NestedSelect/BottomSheet`.
+
 ```jsx
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import Variants from 'cozy-ui/docs/components/Variants'
 import { useState } from 'react'
-import Button from 'cozy-ui/transpiled/react/deprecated/Button'
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import Circle from 'cozy-ui/transpiled/react/Circle'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import SettingIcon from 'cozy-ui/transpiled/react/Icons/Setting'
-import NestedSelectModal from 'cozy-ui/transpiled/react/NestedSelect/Modal'
+import NestedSelectResponsive from 'cozy-ui/transpiled/react/NestedSelect/NestedSelectResponsive'
 import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
 import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
-import DemoProvider from 'cozy-ui/transpiled/react/providers/DemoProvider'
 import palette from 'cozy-ui/transpiled/react/palette'
+import Typography from 'cozy-ui/transpiled/react/Typography'
 
 const Image = ({ letter }) => (
   <Circle backgroundColor={palette.melon}>
@@ -83,8 +87,9 @@ const transformParentItem = item => ({
 
 const StaticExample = () => {
   const { isMobile } = useBreakpoints()
+
   return (
-    <NestedSelectModal
+    <NestedSelectResponsive
       radioPosition={isMobile ? 'left' : 'right'}
       canSelectParent={true}
       onSelect={x => x}
@@ -93,6 +98,7 @@ const StaticExample = () => {
       options={options}
       title="Please select letter"
       transformParentItem={transformParentItem}
+      onClose={() => {}}
     />
   )
 }
@@ -105,13 +111,12 @@ const isParent = (item, childItem) => {
 }
 
 const InteractiveExample = () => {
-  const [leftRadio, setLeftRadio] = useState(false)
-  const [searchOptions, setSearchOptions] = useState(null)
-  const [withEllipsis, setWithEllipsis] = useState(true)
   const [showingModal, setShowingModal] = useState(false)
   const [selectedItem, setSelected] = useState({ title: 'A' })
+
   const showModal = () => setShowingModal(true)
   const hideModal = () => setShowingModal(false)
+
   const isSelected = (item, level) => {
     if (!selectedItem) {
       return false
@@ -123,33 +128,19 @@ const InteractiveExample = () => {
     return false
   }
 
-  const handleClickLeftRadio = () => {
-    setLeftRadio(!leftRadio)
-  }
-  const handleClickWithEllipsis = () => {
-    setWithEllipsis(prev => !prev)
-  }
-
-  const handleClickWithSearch = e => {
-    if (e.target.checked) {
-      const searchOpts = {
-        placeholderSearch: 'Placeholder Search',
-        noDataLabel: 'No Data Found',
-        onSearch: (value) => {
-          return options.children.filter(o => o.description && o.description.toLowerCase().includes(value.toLowerCase()))
-        },
-        displaySearchResultItem: item =>
-        <ListItem key={item.id} dense button divider>
-          <ListItemText
-            primary={item.description}
-            ellipsis
-          />
-        </ListItem>
-      }
-      setSearchOptions(searchOpts)
-    } else {
-      setSearchOptions(null)
-    }
+  const searchOptions = {
+    placeholderSearch: 'Placeholder Search',
+    noDataLabel: 'No Data Found',
+    onSearch: (value) => {
+      return options.children.filter(o => o.description && o.description.toLowerCase().includes(value.toLowerCase()))
+    },
+    displaySearchResultItem: item =>
+    <ListItem key={item.id} dense button divider>
+      <ListItemText
+        primary={item.description}
+        ellipsis
+      />
+    </ListItem>
   }
 
   const handleSelect = item => {
@@ -159,62 +150,43 @@ const InteractiveExample = () => {
     }, RADIO_BUTTON_ANIM_DURATION)
   }
 
+  const initialVariants = [{ noDivider: false, leftRadio: false, withSearch: false, withEllipsis: true }]
+
   return (
-    <>
-      <Checkbox
-        label='radio to the left'
-        readOnly
-        name='leftRadio'
-        value={leftRadio}
-        checked={leftRadio}
-        onClick={handleClickLeftRadio}
-      />
-      <Checkbox
-        label='with search'
-        readOnly
-        name='withSearch'
-        value={!!searchOptions}
-        checked={!!searchOptions}
-        onClick={handleClickWithSearch}
-      />
-      <Checkbox
-        label='without ellipsis'
-        readOnly
-        name='withEllipsis'
-        value={!!withEllipsis}
-        checked={!!withEllipsis}
-        onClick={handleClickWithEllipsis}
-      />
-      { selectedItem && (
-        <>Selected: { selectedItem.title }<br/></>
-      )}
-      <Button className='u-ml-0' label='Select' onClick={showModal} />
-      { showingModal && (
-        <NestedSelectModal
-          canSelectParent={true}
-          onSelect={handleSelect}
-          onClose={hideModal}
-          isSelected={isSelected}
-          options={options}
-          radioPosition={leftRadio ? 'left' : 'right'}
-          title="Please select letter"
-          transformParentItem={transformParentItem}
-          searchOptions={searchOptions}
-          ellipsis={withEllipsis}
-        />
+    <Variants initialVariants={initialVariants} screenshotAllVariants>
+      {variant => (
+        <>
+          {selectedItem && (
+            <Typography paragraph>Selected item: { selectedItem.title }</Typography>
+          )}
+          <Button className='u-ml-0' label='Select' onClick={showModal} />
+          {showingModal && (
+            <NestedSelectResponsive
+              canSelectParent={true}
+              onSelect={handleSelect}
+              onClose={hideModal}
+              isSelected={isSelected}
+              options={options}
+              radioPosition={variant.leftRadio ? 'left' : 'right'}
+              title="Please select letter"
+              transformParentItem={transformParentItem}
+              searchOptions={variant.withSearch ? searchOpts : undefined}
+              ellipsis={variant.withEllipsis}
+              noDivider={variant.noDivider}
+            />
+          )}
+        </>
       )}
-    </>
+    </Variants>
   )
 }
 
 ;
 
-<>
-  <DemoProvider>
-    {isTesting()
-      ? <StaticExample />
-      : <InteractiveExample />
-    }
-  </DemoProvider>
-</>
+<DemoProvider>
+  {isTesting()
+    ? <StaticExample />
+    : <InteractiveExample />
+  }
+</DemoProvider>
 ```

package/react/NestedSelect/NestedSelectResponsive.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import useBreakpoints from '../providers/Breakpoints'
+import BottomSheet from './BottomSheet'
+import Modal from './Modal'
+
+const NestedSelectResponsive = props => {
+  const { isMobile } = useBreakpoints()
+
+  const Wrapper = isMobile ? BottomSheet : Modal
+
+  return <Wrapper {...props} />
+}
+
+export default NestedSelectResponsive

package/react/NestedSelect/index.jsx

@@ -1,2 +1,4 @@
 export { default } from './NestedSelect'
 export { default as NestedSelectModal } from './Modal'
+export { default as NestedSelectBottomSheet } from './BottomSheet'
+export { default as NestedSelectResponsive } from './NestedSelectResponsive'

package/react/SelectBox/Readme.md

@@ -293,7 +293,7 @@ the options to be displayed on top of all the layers.
 ```jsx
 import { useState, useEffect } from 'react'
 import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs'
-import DemoProvider from 'cozy-ui/transpiled/react/providers/DemoProvider'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 
 import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import Typography from 'cozy-ui/transpiled/react/Typography'

package/react/Viewer/Readme.md

@@ -1,6 +1,6 @@
 The `Viewer` component can be used to display the content of various file types.
 
-Once rendered, the `Viewer` will take up all the available space in it's container (using `position: absolute`). It can be paired with the `Overlay` component to take up the whole screen.
+Once rendered, the `Viewer` will take up all the available space in it's container (using `position: absolute`).
 
 The `Viewer` can display an **information panel** to show additional information about the current file (e.g. whether a file is certified).
 
@@ -21,12 +21,14 @@ The `Viewer` can display an **information panel** to show additional information
 * **renderFallbackExtraContent** : `<function>` – A render prop that is called when a file can't be displayed
 * **disablePanel** : `<boolean>` – Show/Hide the panel containing more information about the file only on Desktop
 * **disableFooter** : `<boolean>` – Show/Hide the panel containing more information about the file only on Phone & Tablet devices
+* **disableModal** : `<boolean>` – To avoid wrapping the Viewer with a Modal component (wrapper of Viewer)
 * **editPathByModelProps** : `<object>` – Edit path by model properties
   * **information** : `<string>` – URL used to edit the file when editing a `information` type metadata (text, date)
   * **page** : `<string>` – URL used to edit the file when editing a `page` type metadata (side of the document)
 * **onChangeRequest** : `<function>` - Called with (nextFile, nextIndex) when the user requests to navigate to another file
 * **onCloseRequest** : `<function>` - Called when the user wants to leave the Viewer
 * **componentsProps** : `<object>` – Props passed to components with the same name
+  * **modalProps** : `<object>` – Props passed to Modal component
   * **OnlyOfficeViewer** : `<object>` – Used to open an Only Office file
     * **isEnabled** : `<boolean>` – Whether Only Office is enabled on the server
     * **opener** : `<function>` – To open the Only Office file
@@ -54,7 +56,6 @@ import Icon from 'cozy-ui/transpiled/react/Icon'
 import CarbonCopyIcon from 'cozy-ui/transpiled/react/Icons/CarbonCopy'
 // The DemoProvider inserts a fake cozy-client in the React context.
 import DemoProvider from './docs/DemoProvider'
-import Overlay from 'cozy-ui/transpiled/react/deprecated/Overlay'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
 import ShareIcon from 'cozy-ui/transpiled/react/Icons/Share'
@@ -218,33 +219,31 @@ const editPathByModelProps = {
           )}
           <Button label="Open viewer" variant="ghost" size="small" onClick={toggleViewer} />
           {state.viewerOpened && (
-            <Overlay>
-              <Viewer
-                files={files}
-                currentIndex={state.currentIndex}
-                currentURL={state.currentURL}
-                showNavigation={variant.navigation}
-                editPathByModelProps={editPathByModelProps}
-                onCloseRequest={toggleViewer}
-                onChangeRequest={onFileChange}
-                componentsProps={{
-                  OnlyOfficeViewer: {
-                    isEnabled: variant.onlyOfficeEnabled,
-                    opener: () => alert('This is a demo, no Only Office opener here')
-                  },
-                  toolbarProps:{
-                    showToolbar: variant.toolbar,
-                    showClose: state.showToolbarCloseButton,
-                    showFilePath: state.showToolbarWithPath
-                  }
-                }}
-              >
-                <FooterActionButtons>
-                  <ShareButtonFake />
-                  <ForwardOrDownloadButton />
-                </FooterActionButtons>
-              </Viewer>
-            </Overlay>
+            <Viewer
+              files={files}
+              currentIndex={state.currentIndex}
+              currentURL={state.currentURL}
+              showNavigation={variant.navigation}
+              editPathByModelProps={editPathByModelProps}
+              onCloseRequest={toggleViewer}
+              onChangeRequest={onFileChange}
+              componentsProps={{
+                OnlyOfficeViewer: {
+                  isEnabled: variant.onlyOfficeEnabled,
+                  opener: () => alert('This is a demo, no Only Office opener here')
+                },
+                toolbarProps:{
+                  showToolbar: variant.toolbar,
+                  showClose: state.showToolbarCloseButton,
+                  showFilePath: state.showToolbarWithPath
+                }
+              }}
+            >
+              <FooterActionButtons>
+                <ShareButtonFake />
+                <ForwardOrDownloadButton />
+              </FooterActionButtons>
+            </Viewer>
           )}
         </>
       )

package/react/Viewer/ViewerContainer.jsx

@@ -5,6 +5,8 @@ import cx from 'classnames'
 import useBreakpoints from '../providers/Breakpoints'
 import { FileDoctype } from '../proptypes'
 
+import Modal from '../Modal'
+import { useCozyTheme } from '../providers/CozyTheme'
 import { toolbarPropsPropType } from './proptypes'
 import { isValidForPanel } from './helpers'
 import Viewer from './Viewer'
@@ -124,4 +126,39 @@ ViewerContainer.defaultProps = {
   showNavigation: true
 }
 
-export default ViewerContainer
+const ViewerContainerWrapper = ({ disableModal, ...props }) => {
+  const cozyTheme = useCozyTheme()
+  const { modalProps = { open: true } } = props.componentsProps || {}
+
+  if (disableModal) {
+    return <ViewerContainer {...props} />
+  }
+
+  return (
+    <Modal {...modalProps} className={`CozyTheme--${cozyTheme}`}>
+      {/* This div is needed for the Modal ref */}
+      <div>
+        <ViewerContainer {...props} />
+      </div>
+    </Modal>
+  )
+}
+
+ViewerContainerWrapper.defaultProps = {
+  componentsProps: {
+    modalProps: {
+      open: true
+    }
+  }
+}
+
+ViewerContainerWrapper.propTypes = {
+  /** To avoid wrapping the Viewer with a Modal component */
+  disableModal: PropTypes.bool,
+  /** Props passed to Modal component */
+  componentsProps: PropTypes.shape({
+    modalProps: PropTypes.object
+  })
+}
+
+export default ViewerContainerWrapper

package/react/index.js

@@ -132,3 +132,4 @@ export { default as TimelineItem } from './TimelineItem'
 export { default as TimelineOppositeContent } from './TimelineOppositeContent'
 export { default as TimelineSeparator } from './TimelineSeparator'
 export { default as AlertProvider, useAlert } from './Alert'
+export { default as Modal } from './Modal'

package/transpiled/react/Modal/index.js

@@ -0,0 +1,2 @@
+import Modal from '@material-ui/core/Modal';
+export default Modal;

package/transpiled/react/NestedSelect/BottomSheet.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import cx from 'classnames';
+import Icon from "cozy-ui/transpiled/react/Icon";
+import IconButton from "cozy-ui/transpiled/react/IconButton";
+import ArrowUpIcon from "cozy-ui/transpiled/react/Icons/ArrowUp";
+import BottomSheet, { BottomSheetHeader, BottomSheetItem } from "cozy-ui/transpiled/react/BottomSheet";
+import Typography from "cozy-ui/transpiled/react/Typography";
+import Divider from "cozy-ui/transpiled/react/Divider";
+import NestedSelect from "cozy-ui/transpiled/react/NestedSelect/NestedSelect";
+
+var HeaderComponent = function HeaderComponent(_ref) {
+  var title = _ref.title,
+      showBack = _ref.showBack,
+      onClickBack = _ref.onClickBack;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BottomSheetHeader, {
+    className: cx('u-h-3', {
+      'u-pl-half u-pr-3': showBack
+    })
+  }, showBack && /*#__PURE__*/React.createElement(IconButton, {
+    onClick: onClickBack
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: ArrowUpIcon,
+    rotate: -90
+  })), /*#__PURE__*/React.createElement(Typography, {
+    className: "u-w-100",
+    variant: "h6",
+    align: "center"
+  }, title)), /*#__PURE__*/React.createElement(Divider, null));
+};
+
+var SelfBottomSheet = function SelfBottomSheet(props) {
+  return /*#__PURE__*/React.createElement(BottomSheet, {
+    backdrop: true,
+    onClose: props.onClose
+  }, /*#__PURE__*/React.createElement(BottomSheetItem, {
+    disableGutters: true
+  }, /*#__PURE__*/React.createElement(NestedSelect, _extends({
+    HeaderComponent: HeaderComponent
+  }, props))));
+};
+
+export default SelfBottomSheet;

package/transpiled/react/NestedSelect/ItemRow.js

@@ -25,7 +25,8 @@ var ItemRow = function ItemRow(_ref) {
       isSelected = _ref.isSelected,
       radioPosition = _ref.radioPosition,
       isLast = _ref.isLast,
-      ellipsis = _ref.ellipsis;
+      ellipsis = _ref.ellipsis,
+      noDivider = _ref.noDivider;
 
   var _useBreakpoints = useBreakpoints(),
       isDesktop = _useBreakpoints.isDesktop;
@@ -66,7 +67,7 @@ var ItemRow = function ItemRow(_ref) {
     flexItem: true
   }), item.action ? item.action.Component(_objectSpread({
     item: item
-  }, item.action.props)) : null), !isLast && /*#__PURE__*/React.createElement(Divider, null));
+  }, item.action.props)) : null), noDivider ? null : !isLast && /*#__PURE__*/React.createElement(Divider, null));
 };
 
 export default ItemRow;

package/transpiled/react/NestedSelect/NestedSelect.js

@@ -15,6 +15,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
+import List from "cozy-ui/transpiled/react/List";
 import Input from "cozy-ui/transpiled/react/Input";
 import Typography from "cozy-ui/transpiled/react/Typography";
 import ItemRow from "cozy-ui/transpiled/react/NestedSelect/ItemRow";
@@ -118,7 +119,8 @@ var NestedSelect = /*#__PURE__*/function (_Component) {
           title = _this$props.title,
           transformParentItem = _this$props.transformParentItem,
           radioPosition = _this$props.radioPosition,
-          ellipsis = _this$props.ellipsis;
+          ellipsis = _this$props.ellipsis,
+          noDivider = _this$props.noDivider;
       var _this$state = this.state,
           history = _this$state.history,
           searchValue = _this$state.searchValue,
@@ -159,7 +161,8 @@ var NestedSelect = /*#__PURE__*/function (_Component) {
         item: parentItem,
         onClick: this.handleClickItem,
         isSelected: isSelectedWithLevel(parentItem),
-        ellipsis: ellipsis
+        ellipsis: ellipsis,
+        noDivider: noDivider
       }) : null, searchOptions && level === 0 && /*#__PURE__*/React.createElement("div", {
         className: "u-mh-1 u-mb-half"
       }, /*#__PURE__*/React.createElement(Input, {
@@ -177,7 +180,8 @@ var NestedSelect = /*#__PURE__*/function (_Component) {
           onClick: _this2.handleClickItem,
           isSelected: isSelectedWithLevel(item),
           isLast: index === searchResult.length - 1,
-          ellipsis: ellipsis
+          ellipsis: ellipsis,
+          noDivider: noDivider
         });
       }) : children.map(function (item, index) {
         return /*#__PURE__*/React.createElement(ItemRow, {
@@ -187,7 +191,8 @@ var NestedSelect = /*#__PURE__*/function (_Component) {
           onClick: _this2.handleClickItem,
           isSelected: isSelectedWithLevel(item),
           isLast: index === children.length - 1,
-          ellipsis: ellipsis
+          ellipsis: ellipsis,
+          noDivider: noDivider
         });
       })));
     }
@@ -197,7 +202,7 @@ var NestedSelect = /*#__PURE__*/function (_Component) {
 }(Component);
 
 NestedSelect.defaultProps = {
-  ContentComponent: 'div',
+  ContentComponent: List,
   HeaderComponent: null,
   transformParentItem: function transformParentItem(x) {
     return x;
@@ -220,25 +225,16 @@ var ItemPropType = PropTypes.shape({
   children: PropTypes.array
 });
 NestedSelect.propTypes = {
-  /**
-   * Can be set to "right" or "left". Defaults to "right"
-   */
+  /** Can be set to "right" or "left". Defaults to "right" */
   radioPosition: PropTypes.oneOf(['left', 'right']),
 
-  /**
-   * The whole option item is passed to this function when selected
-   */
+  /** The whole option item is passed to this function when selected */
   onSelect: PropTypes.func.isRequired,
 
-  /**
-   * Determines if the row looks selected. The `option` is
-   * passed as an argument.
-   */
+  /** Determines if the row looks selected. The `option` is passed as an argument. */
   isSelected: PropTypes.func.isRequired,
 
-  /**
-   * Options that will be rendered as nested lists of choices
-   */
+  /** Options that will be rendered as nested lists of choices */
   options: PropTypes.shape({
     children: PropTypes.arrayOf(ItemPropType)
   }),
@@ -271,9 +267,10 @@ NestedSelect.propTypes = {
     onSearch: PropTypes.func.isRequired
   }),
 
-  /**
-   * To manage ellipsis on ItemRow
-   */
-  ellipsis: PropTypes.bool
+  /** To manage ellipsis on ItemRow */
+  ellipsis: PropTypes.bool,
+
+  /** Remove dividers after each row */
+  noDivider: PropTypes.bool
 };
 export default NestedSelect;

package/transpiled/react/NestedSelect/NestedSelectResponsive.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
+import BottomSheet from "cozy-ui/transpiled/react/NestedSelect/BottomSheet";
+import Modal from "cozy-ui/transpiled/react/NestedSelect/Modal";
+
+var NestedSelectResponsive = function NestedSelectResponsive(props) {
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
+  var Wrapper = isMobile ? BottomSheet : Modal;
+  return /*#__PURE__*/React.createElement(Wrapper, props);
+};
+
+export default NestedSelectResponsive;

package/transpiled/react/NestedSelect/index.js

@@ -1,2 +1,4 @@
 export { default } from './NestedSelect';
-export { default as NestedSelectModal } from './Modal';
+export { default as NestedSelectModal } from './Modal';
+export { default as NestedSelectBottomSheet } from './BottomSheet';
+export { default as NestedSelectResponsive } from './NestedSelectResponsive';

package/transpiled/react/Viewer/ViewerContainer.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "disableFooter", "disablePanel", "editPathByModelProps", "children", "componentsProps"];
+var _excluded = ["className", "disableFooter", "disablePanel", "editPathByModelProps", "children", "componentsProps"],
+    _excluded2 = ["disableModal"];
 
 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; }
 
@@ -12,6 +13,8 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
 import { FileDoctype } from "cozy-ui/transpiled/react/proptypes";
+import Modal from "cozy-ui/transpiled/react/Modal";
+import { useCozyTheme } from "cozy-ui/transpiled/react/providers/CozyTheme";
 import { toolbarPropsPropType } from "cozy-ui/transpiled/react/Viewer/proptypes";
 import { isValidForPanel } from "cozy-ui/transpiled/react/Viewer/helpers";
 import Viewer from "cozy-ui/transpiled/react/Viewer/Viewer";
@@ -136,4 +139,42 @@ ViewerContainer.defaultProps = {
   currentIndex: 0,
   showNavigation: true
 };
-export default ViewerContainer;
+
+var ViewerContainerWrapper = function ViewerContainerWrapper(_ref) {
+  var disableModal = _ref.disableModal,
+      props = _objectWithoutProperties(_ref, _excluded2);
+
+  var cozyTheme = useCozyTheme();
+
+  var _ref2 = props.componentsProps || {},
+      _ref2$modalProps = _ref2.modalProps,
+      modalProps = _ref2$modalProps === void 0 ? {
+    open: true
+  } : _ref2$modalProps;
+
+  if (disableModal) {
+    return /*#__PURE__*/React.createElement(ViewerContainer, props);
+  }
+
+  return /*#__PURE__*/React.createElement(Modal, _extends({}, modalProps, {
+    className: "CozyTheme--".concat(cozyTheme)
+  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ViewerContainer, props)));
+};
+
+ViewerContainerWrapper.defaultProps = {
+  componentsProps: {
+    modalProps: {
+      open: true
+    }
+  }
+};
+ViewerContainerWrapper.propTypes = {
+  /** To avoid wrapping the Viewer with a Modal component */
+  disableModal: PropTypes.bool,
+
+  /** Props passed to Modal component */
+  componentsProps: PropTypes.shape({
+    modalProps: PropTypes.object
+  })
+};
+export default ViewerContainerWrapper;

package/transpiled/react/index.js

@@ -105,4 +105,5 @@ export { default as TimelineDot } from './TimelineDot';
 export { default as TimelineItem } from './TimelineItem';
 export { default as TimelineOppositeContent } from './TimelineOppositeContent';
 export { default as TimelineSeparator } from './TimelineSeparator';
-export { default as AlertProvider, useAlert } from './Alert';
+export { default as AlertProvider, useAlert } from './Alert';
+export { default as Modal } from './Modal';