cozy-ui 99.0.3 → 99.0.4

package/.nvmrc

@@ -1 +1 @@
-16.13.0
+16.20.2

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [99.0.4](https://github.com/cozy/cozy-ui/compare/v99.0.3...v99.0.4) (2023-12-14)
+
+
+### Bug Fixes
+
+* **BottomSheet:** Did not rerender correctly after a change to children ([4d97075](https://github.com/cozy/cozy-ui/commit/4d97075))
+* **NestedSelect:** Remove useless hack to force rerender when in BottomSheet ([0cbe62f](https://github.com/cozy/cozy-ui/commit/0cbe62f))
+
 ## [99.0.3](https://github.com/cozy/cozy-ui/compare/v99.0.2...v99.0.3) (2023-12-13)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "99.0.3",
+  "version": "99.0.4",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -68,7 +68,7 @@
     "intersection-observer"
   ],
   "devDependencies": {
-    "@argos-ci/cli": "0.4.4",
+    "@argos-ci/cli": "1.0.4",
     "@babel/cli": "7.17.6",
     "@babel/core": "7.17.8",
     "@babel/helper-builder-react-jsx": "7.16.7",
@@ -129,7 +129,7 @@
     "postcss-loader": "2.1.6",
     "pretty": "2.0.0",
     "prop-types": "15.7.2",
-    "puppeteer": "18.2.0",
+    "puppeteer": "21.6.1",
     "react": "16.12.0",
     "react-dom": "16.12.0",
     "react-hot-loader": "^4.3.11",

package/react/BottomSheet/BottomSheet.jsx

@@ -9,7 +9,7 @@ import React, {
 } from 'react'
 import PropTypes from 'prop-types'
 import { BottomSheet as MuiBottomSheet } from 'mui-bottom-sheet'
-import { useTimeoutWhen } from 'rooks'
+import { useMutationObserver, useTimeoutWhen } from 'rooks'
 import Fade from '@material-ui/core/Fade'
 import Portal from '@material-ui/core/Portal'
 
@@ -159,6 +159,7 @@ const BottomSheet = memo(
     const [bottomSpacerHeight, setBottomSpacerHeight] = useState(0)
     const [initPos, setInitPos] = useState(0)
     const prevInitPos = useRef()
+    const [forceRender, setForceRender] = useState(0)
 
     const hasToolbarProps = !!Object.keys(toolbarProps).length
     const isClosable = !!onClose || backdrop
@@ -199,6 +200,12 @@ const BottomSheet = memo(
       setBottomPosition({ snapIndex, isBottomPosition, setIsBottomPosition })
     }
 
+    // forces a rendering when one of the children has changed,
+    // typically after content loading or using content changer such as NestedSelect
+    useMutationObserver(innerContentRef, () => {
+      setForceRender(v => v + 1)
+    })
+
     // hack to prevent pull-down-to-refresh behavior when dragging down the bottom sheet.
     // Needed for iOS Safari
     useEffect(() => {
@@ -286,7 +293,7 @@ const BottomSheet = memo(
       backdrop,
       isClosable,
       offset,
-      children // to recompute data if content changes
+      forceRender // to recompute data when content has changed
     ])
 
     useSetFlagshipUI(

package/react/NestedSelect/BottomSheet.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import cx from 'classnames'
 
 import Icon from '../Icon'
@@ -33,8 +33,6 @@ const HeaderComponent = ({ title, showBack, onClickBack }) => {
 }
 
 const SelfBottomSheet = props => {
-  const [, setInnerContentHeight] = useState(0) // tricks to rerender BottomSheet
-
   return (
     <BottomSheet
       {...props?.componentsProps?.bottomsheet}
@@ -42,11 +40,7 @@ const SelfBottomSheet = props => {
       onClose={props.onClose}
     >
       <BottomSheetItem disableGutters>
-        <NestedSelect
-          HeaderComponent={HeaderComponent}
-          setInnerContentHeight={setInnerContentHeight}
-          {...props}
-        />
+        <NestedSelect HeaderComponent={HeaderComponent} {...props} />
       </BottomSheetItem>
     </BottomSheet>
   )

package/react/NestedSelect/NestedSelect.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import PropTypes from 'prop-types'
 import omit from 'lodash/omit'
 
@@ -15,51 +15,56 @@ export { ItemRow }
  * will show the children of the chosen option instead of selecting
  * the option.
  */
-class NestedSelect extends Component {
-  constructor(props) {
-    super(props)
-    this.innerRef = React.createRef()
-    this.state = {
-      history: [props.options],
-      searchValue: '',
-      searchResult: []
-    }
-  }
-
-  componentWillUnmount() {
-    this.unmounted = true
-  }
+const NestedSelect = ({
+  onSelect,
+  ContentComponent,
+  HeaderComponent,
+  canSelectParent,
+  isSelected,
+  title,
+  transformParentItem,
+  radioPosition,
+  ellipsis,
+  options,
+  searchOptions,
+  noDivider
+}) => {
+  const innerRef = useRef()
+  const [state, setState] = useState({
+    history: [options],
+    searchValue: '',
+    searchResult: []
+  })
+  const [unmounted, setUnmounted] = useState(false)
 
-  componentDidUpdate() {
-    const { setInnerContentHeight } = this.props
-
-    setInnerContentHeight?.(this.innerRef?.current?.offsetHeight)
-  }
+  useEffect(() => {
+    return () => {
+      setUnmounted(true)
+    }
+  }, [])
 
-  resetHistory() {
-    if (this.unmounted) {
+  const resetHistory = () => {
+    if (unmounted) {
       return
     }
-    this.setState({ history: [this.props.options] })
+    setState(state => ({ ...state, history: [options] }))
   }
 
-  handleBack = () => {
-    const [item, ...newHistory] = this.state.history
-    this.setState({
-      history: newHistory
-    })
+  const handleBack = () => {
+    const [item, ...newHistory] = state.history
+
+    setState(state => ({ ...state, history: newHistory }))
+
     return item
   }
 
-  handleNavToChildren = item => {
-    const newHistory = [item, ...this.state.history]
-    this.setState({
-      history: newHistory
-    })
+  const handleNavToChildren = item => {
+    const newHistory = [item, ...state.history]
+    setState(state => ({ ...state, history: newHistory }))
   }
 
-  handleSelect = item => {
-    this.props.onSelect(item)
+  const handleSelect = item => {
+    onSelect(item)
     // It is important to reset history if the NestedSelected is used
     // multiple times in a row without being dismounted. For example
     // if it displayed in Carousel that slides in the NestedSelect
@@ -68,128 +73,112 @@ class NestedSelect extends Component {
     // while the animation is running.
     // There is probably a better way to do this.
     setTimeout(() => {
-      this.resetHistory()
+      resetHistory()
     }, 500)
   }
 
-  handleClickItem = item => {
+  const handleClickItem = item => {
     if (item.children && item.children.length > 0) {
-      this.handleNavToChildren(item)
+      handleNavToChildren(item)
     } else {
-      this.handleSelect(item)
+      handleSelect(item)
     }
   }
 
-  render() {
-    const {
-      ContentComponent,
-      HeaderComponent,
-      canSelectParent,
-      isSelected,
-      title,
-      transformParentItem,
-      radioPosition,
-      ellipsis,
-      options,
-      searchOptions,
-      noDivider
-    } = this.props
-    const { history, searchValue, searchResult } = this.state
+  const onChange = ev => {
+    const onSearch = searchOptions?.onSearch
 
-    const current = history[0]
-    const children = current.children || []
-    const level = history.length - 1
-    const isSelectedWithLevel = item => isSelected(item, level)
-    const parentItem = transformParentItem(omit(current, 'children'))
+    if (onSearch) {
+      const searchValue = ev.target.value
+      const searchResult = onSearch(searchValue)
+      setState(state => ({ ...state, searchValue, searchResult }))
+    }
+  }
 
-    const hasSearchResult = searchValue.length > 0
+  const current = state.history[0]
+  const children = current.children || []
+  const level = state.history.length - 1
+  const parentItem = transformParentItem(omit(current, 'children'))
 
-    const onChange = ev => {
-      const onSearch = searchOptions && searchOptions.onSearch
-      if (onSearch) {
-        const searchValue = ev.target.value
-        const searchResult = onSearch(searchValue)
-        this.setState({ searchValue, searchResult })
-      }
-    }
+  const hasSearchResult = state.searchValue?.length > 0
+  const isSelectedWithLevel = item => isSelected(item, level)
 
-    return (
-      <span ref={this.innerRef}>
-        {HeaderComponent ? (
-          <HeaderComponent
-            title={current.title || title}
-            showBack={history.length > 1}
-            onClickBack={this.handleBack}
+  return (
+    <span ref={innerRef}>
+      {HeaderComponent ? (
+        <HeaderComponent
+          title={current.title || title}
+          showBack={state.history.length > 1}
+          onClickBack={handleBack}
+        />
+      ) : null}
+      {level > 0
+        ? current.header
+          ? current.header
+          : typeof options.childrenHeader === 'function'
+          ? options.childrenHeader(level)
+          : options.childrenHeader
+        : options.header}
+      <ContentComponent>
+        {canSelectParent && level > 0 ? (
+          <ItemRow
+            radioPosition={radioPosition}
+            item={parentItem}
+            onClick={handleClickItem}
+            isSelected={isSelectedWithLevel(parentItem)}
+            ellipsis={ellipsis}
+            noDivider={noDivider}
           />
         ) : null}
-        {level > 0
-          ? current.header
-            ? current.header
-            : typeof options.childrenHeader === 'function'
-            ? options.childrenHeader(level)
-            : options.childrenHeader
-          : options.header}
-        <ContentComponent>
-          {canSelectParent && level > 0 ? (
-            <ItemRow
-              radioPosition={radioPosition}
-              item={parentItem}
-              onClick={this.handleClickItem}
-              isSelected={isSelectedWithLevel(parentItem)}
-              ellipsis={ellipsis}
-              noDivider={noDivider}
+        {searchOptions && level === 0 && (
+          <div className="u-mh-1 u-mb-half">
+            <Input
+              placeholder={searchOptions.placeholderSearch}
+              onChange={onChange}
+              value={state.searchValue}
             />
-          ) : null}
-          {searchOptions && level === 0 && (
-            <div className="u-mh-1 u-mb-half">
-              <Input
-                placeholder={searchOptions.placeholderSearch}
-                onChange={onChange}
-                value={searchValue}
-              />
-            </div>
-          )}
+          </div>
+        )}
 
-          {hasSearchResult ? (
-            searchResult.length === 0 ? (
-              <Typography
-                variant="body1"
-                className="u-flex u-flex-justify-center u-mb-1 "
-              >
-                {searchOptions.noDataLabel}
-              </Typography>
-            ) : (
-              searchResult.map((item, index) => (
-                <ItemRow
-                  radioPosition={radioPosition}
-                  key={item.key || item.title}
-                  item={item}
-                  onClick={this.handleClickItem}
-                  isSelected={isSelectedWithLevel(item)}
-                  isLast={index === searchResult.length - 1}
-                  ellipsis={ellipsis}
-                  noDivider={noDivider}
-                />
-              ))
-            )
+        {hasSearchResult ? (
+          state.searchResult.length === 0 ? (
+            <Typography
+              variant="body1"
+              className="u-flex u-flex-justify-center u-mb-1 "
+            >
+              {searchOptions.noDataLabel}
+            </Typography>
           ) : (
-            children.map((item, index) => (
+            state.searchResult.map((item, index) => (
               <ItemRow
                 radioPosition={radioPosition}
                 key={item.key || item.title}
                 item={item}
-                onClick={this.handleClickItem}
+                onClick={handleClickItem}
                 isSelected={isSelectedWithLevel(item)}
-                isLast={index === children.length - 1}
+                isLast={index === state.searchResult.length - 1}
                 ellipsis={ellipsis}
                 noDivider={noDivider}
               />
             ))
-          )}
-        </ContentComponent>
-      </span>
-    )
-  }
+          )
+        ) : (
+          children.map((item, index) => (
+            <ItemRow
+              radioPosition={radioPosition}
+              key={item.key || item.title}
+              item={item}
+              onClick={handleClickItem}
+              isSelected={isSelectedWithLevel(item)}
+              isLast={index === children.length - 1}
+              ellipsis={ellipsis}
+              noDivider={noDivider}
+            />
+          ))
+        )}
+      </ContentComponent>
+    </span>
+  )
 }
 
 NestedSelect.defaultProps = {

package/react/NestedSelect/NestedSelect.md

@@ -154,10 +154,11 @@ const InteractiveExample = () => {
     return false
   }
 
-  const searchOptions = {
+  const searchOptions = withHeaders => ({
     placeholderSearch: 'Placeholder Search',
     noDataLabel: 'No Data Found',
     onSearch: (value) => {
+      const options = makeOptions(withHeaders)
       return options.children.filter(o => o.description && o.description.toLowerCase().includes(value.toLowerCase()))
     },
     displaySearchResultItem: item =>
@@ -167,7 +168,7 @@ const InteractiveExample = () => {
         ellipsis
       />
     </ListItem>
-  }
+  })
 
   const handleSelect = item => {
     setSelected(item)
@@ -203,7 +204,7 @@ const InteractiveExample = () => {
               radioPosition={variant.leftRadio ? 'left' : 'right'}
               title={variant.noTitle ? undefined : "Please select letter"}
               transformParentItem={transformParentItem}
-              searchOptions={variant.withSearch ? searchOptions : undefined}
+              searchOptions={variant.withSearch ? searchOptions(variant.withHeaders) : undefined}
               ellipsis={variant.withEllipsis}
               componentsProps={{ bottomsheet: { skipAnimation: isTesting() } }}
               noDivider={variant.noDivider}

package/scripts/screenshots/prepares.js

@@ -33,7 +33,7 @@ const prepareFS = async options => {
  * Returns { browser, page }
  */
 const prepareBrowser = async (puppeteer, options) => {
-  const browser = await puppeteer.launch()
+  const browser = await puppeteer.launch({ headless: 'new' })
   const page = await browser.newPage()
   // Put Argos in user agent
   await page.setUserAgent(
@@ -44,7 +44,10 @@ const prepareBrowser = async (puppeteer, options) => {
   ])
   page.setViewport(options.viewport)
   await page.setDefaultNavigationTimeout(0)
-  console.log('Browser opened and set up')
+  await page.evaluateOnNewDocument(theme => {
+    localStorage.clear()
+    localStorage.setItem('theme', theme)
+  }, options.theme)
   return { browser, page }
 }
 

package/scripts/screenshots/screenshotComponent.js

@@ -19,13 +19,8 @@ const screenshotComponent = async (page, options) => {
   const { component, screenshotDir, viewport, theme } = options
   const { link, name } = component
 
-  // Need to use page.goto twice to set localStorage correctly
-  await page.goto(link, { waitUntil: 'load', timeout: 0 })
-  await page.evaluate(theme => {
-    localStorage.setItem('theme', theme)
-  }, theme)
-  await page.goto(link, { waitUntil: 'load', timeout: 0 })
-  await sleep(100)
+  await page.goto(link)
+  await sleep(100) // to be sure the page is entirely loaded
 
   const getScreenshotName =
     options.getScreenshotName || defaultGetScreenshotName

package/scripts/screenshots/screenshotReactStyleguide.js

@@ -1,6 +1,5 @@
 const fs = require('fs')
 
-const themes = require('../../theme/themes')
 const { parseViewportArgument } = require('./helpers')
 const fetchAllComponents = require('./fetchAllComponents')
 const screenshotComponent = require('./screenshotComponent')
@@ -32,7 +31,7 @@ const cacheToDisk = (fnToCache, options) =>
     return res
   }
 
-const screenshotReactStyleguide = async (page, args, config) => {
+const screenshotReactStyleguide = async (page, args, config, theme) => {
   const cachedFetchAllComponents = cacheToDisk(fetchAllComponents, {
     cacheFile: args.cacheFile,
     onLoadCache: () =>
@@ -47,7 +46,7 @@ const screenshotReactStyleguide = async (page, args, config) => {
     )
   }
 
-  console.log('Screenshotting components')
+  console.log('⌛ Screenshotting components...')
 
   for (const component of components) {
     const componentConfig = config[component.name] || {}
@@ -58,15 +57,13 @@ const screenshotReactStyleguide = async (page, args, config) => {
       ? parseViewportArgument(componentViewportSpec)
       : parseViewportArgument(args.viewport)
     await page.setViewport(componentViewport)
-    for (const theme of Object.keys(themes)) {
-      await screenshotComponent(page, {
-        component,
-        componentConfig,
-        screenshotDir: args.screenshotDir,
-        viewport: componentViewport,
-        theme
-      })
-    }
+    await screenshotComponent(page, {
+      component,
+      componentConfig,
+      screenshotDir: args.screenshotDir,
+      viewport: componentViewport,
+      theme
+    })
   }
 }
 

package/scripts/screenshots.js

@@ -5,6 +5,7 @@ const screenshotReactStyleguide = require('./screenshots/screenshotReactStylegui
 const screenshotKSSStyleguide = require('./screenshots/screenshotKSSStyleguide')
 const makeParser = require('./screenshots/parser')
 const { readConfig, parseViewportArgument } = require('./screenshots/helpers')
+const themes = require('../theme/themes')
 
 let puppeteer
 try {
@@ -27,21 +28,36 @@ const main = async () => {
 
   const parsedViewport = parseViewportArgument(args.viewport)
 
+  console.log('\n⌛ Preparing screenshot directory...')
   await prepareFS({
     screenshotDir: args.screenshotDir,
     emptyScreenshotDir: args.emptyScreenshotDir
   })
-  const { browser, page } = await prepareBrowser(puppeteer, {
-    viewport: parsedViewport
-  })
+  console.log('✅ Done. Screenshot directory prepared')
 
-  if (args.mode == 'react') {
-    await screenshotReactStyleguide(page, args, config)
-  } else if (args.mode == 'kss') {
-    await screenshotKSSStyleguide(page, args)
-  }
+  for (const theme of Object.keys(themes)) {
+    console.log(`\n✨ Running process for '${theme}' theme...`)
+    console.log('\n⌛ Preparing browser...')
+
+    const { browser, page } = await prepareBrowser(puppeteer, {
+      viewport: parsedViewport,
+      theme
+    })
+
+    console.log('✅ Done. Browser opened and set up')
+    console.log('\n⌛ Preparing screenshots...')
 
-  await browser.close()
+    if (args.mode == 'react') {
+      await screenshotReactStyleguide(page, args, config, theme)
+    } else if (args.mode == 'kss') {
+      await screenshotKSSStyleguide(page, args)
+    }
+
+    console.log(`✅ Done. Screenshots completed for '${theme}' theme.`)
+
+    await browser.close()
+    console.log('Browser closed')
+  }
 }
 
 if (require.main === module) {

package/transpiled/react/BottomSheet/BottomSheet.js

@@ -14,7 +14,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useState, useEffect, useRef, useCallback, forwardRef, memo, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { BottomSheet as MuiBottomSheet } from 'mui-bottom-sheet';
-import { useTimeoutWhen } from 'rooks';
+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';
@@ -188,6 +188,12 @@ var BottomSheet = /*#__PURE__*/memo(function (_ref3) {
       setInitPos = _useState16[1];
 
   var prevInitPos = useRef();
+
+  var _useState17 = useState(0),
+      _useState18 = _slicedToArray(_useState17, 2),
+      forceRender = _useState18[0],
+      setForceRender = _useState18[1];
+
   var hasToolbarProps = !!Object.keys(toolbarProps).length;
   var isClosable = !!onClose || backdrop;
   var renderSaferHeight = initPos < prevInitPos.current ? prevInitPos.current - 16 : 0; // 16 because border radius
@@ -225,10 +231,17 @@ var BottomSheet = /*#__PURE__*/memo(function (_ref3) {
       isBottomPosition: isBottomPosition,
       setIsBottomPosition: setIsBottomPosition
     });
-  }; // hack to prevent pull-down-to-refresh behavior when dragging down the bottom sheet.
-  // Needed for iOS Safari
+  }; // forces a rendering when one of the children has changed,
+  // typically after content loading or using content changer such as NestedSelect
 
 
+  useMutationObserver(innerContentRef, function () {
+    setForceRender(function (v) {
+      return v + 1;
+    });
+  }); // hack to prevent pull-down-to-refresh behavior when dragging down the bottom sheet.
+  // Needed for iOS Safari
+
   useEffect(function () {
     document.body.style.overflow = 'hidden';
     return function () {
@@ -286,7 +299,7 @@ var BottomSheet = /*#__PURE__*/memo(function (_ref3) {
 
     setBottomSpacerHeight(bottomSpacerHeight); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [// initPos is missing, because we need the previous value
-  innerContentRef, toolbarProps, mediumHeightRatio, mediumHeight, showBackdrop, backdrop, isClosable, offset, children // to recompute data if content changes
+  innerContentRef, toolbarProps, mediumHeightRatio, mediumHeight, showBackdrop, backdrop, isClosable, offset, forceRender // to recompute data when content has changed
   ]);
   useSetFlagshipUI({
     bottomTheme: 'dark'

package/transpiled/react/NestedSelect/BottomSheet.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useState } from 'react';
+import React from 'react';
 import cx from 'classnames';
 import Icon from "cozy-ui/transpiled/react/Icon";
 import IconButton from "cozy-ui/transpiled/react/IconButton";
@@ -34,19 +33,13 @@ var HeaderComponent = function HeaderComponent(_ref) {
 var SelfBottomSheet = function SelfBottomSheet(props) {
   var _props$componentsProp;
 
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      setInnerContentHeight = _useState2[1]; // tricks to rerender BottomSheet
-
-
   return /*#__PURE__*/React.createElement(BottomSheet, _extends({}, props === null || props === void 0 ? void 0 : (_props$componentsProp = props.componentsProps) === null || _props$componentsProp === void 0 ? void 0 : _props$componentsProp.bottomsheet, {
     backdrop: true,
     onClose: props.onClose
   }), /*#__PURE__*/React.createElement(BottomSheetItem, {
     disableGutters: true
   }, /*#__PURE__*/React.createElement(NestedSelect, _extends({
-    HeaderComponent: HeaderComponent,
-    setInnerContentHeight: setInnerContentHeight
+    HeaderComponent: HeaderComponent
   }, props))));
 };
 

package/transpiled/react/NestedSelect/NestedSelect.js

@@ -1,18 +1,13 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _toArray from "@babel/runtime/helpers/toArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
-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 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 _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; } }
+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; }
 
-import React, { Component } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
 import List from "cozy-ui/transpiled/react/List";
@@ -27,191 +22,170 @@ export { ItemRow };
  * the option.
  */
 
-var NestedSelect = /*#__PURE__*/function (_Component) {
-  _inherits(NestedSelect, _Component);
-
-  var _super = _createSuper(NestedSelect);
-
-  function NestedSelect(props) {
-    var _this;
-
-    _classCallCheck(this, NestedSelect);
-
-    _this = _super.call(this, props);
+var NestedSelect = function NestedSelect(_ref) {
+  var _state$searchValue;
+
+  var onSelect = _ref.onSelect,
+      ContentComponent = _ref.ContentComponent,
+      HeaderComponent = _ref.HeaderComponent,
+      canSelectParent = _ref.canSelectParent,
+      isSelected = _ref.isSelected,
+      title = _ref.title,
+      transformParentItem = _ref.transformParentItem,
+      radioPosition = _ref.radioPosition,
+      ellipsis = _ref.ellipsis,
+      options = _ref.options,
+      searchOptions = _ref.searchOptions,
+      noDivider = _ref.noDivider;
+  var innerRef = useRef();
+
+  var _useState = useState({
+    history: [options],
+    searchValue: '',
+    searchResult: []
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      unmounted = _useState4[0],
+      setUnmounted = _useState4[1];
+
+  useEffect(function () {
+    return function () {
+      setUnmounted(true);
+    };
+  }, []);
 
-    _defineProperty(_assertThisInitialized(_this), "handleBack", function () {
-      var _this$state$history = _toArray(_this.state.history),
-          item = _this$state$history[0],
-          newHistory = _this$state$history.slice(1);
+  var resetHistory = function resetHistory() {
+    if (unmounted) {
+      return;
+    }
 
-      _this.setState({
-        history: newHistory
+    setState(function (state) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        history: [options]
       });
-
-      return item;
     });
+  };
 
-    _defineProperty(_assertThisInitialized(_this), "handleNavToChildren", function (item) {
-      var newHistory = [item].concat(_toConsumableArray(_this.state.history));
+  var handleBack = function handleBack() {
+    var _state$history = _toArray(state.history),
+        item = _state$history[0],
+        newHistory = _state$history.slice(1);
 
-      _this.setState({
+    setState(function (state) {
+      return _objectSpread(_objectSpread({}, state), {}, {
         history: newHistory
       });
     });
+    return item;
+  };
 
-    _defineProperty(_assertThisInitialized(_this), "handleSelect", function (item) {
-      _this.props.onSelect(item); // It is important to reset history if the NestedSelected is used
-      // multiple times in a row without being dismounted. For example
-      // if it displayed in Carousel that slides in the NestedSelect
-      // and slides it out on selection.
-      // But, we want in this case that the resetting does not happen
-      // while the animation is running.
-      // There is probably a better way to do this.
-
-
-      setTimeout(function () {
-        _this.resetHistory();
-      }, 500);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleClickItem", function (item) {
-      if (item.children && item.children.length > 0) {
-        _this.handleNavToChildren(item);
-      } else {
-        _this.handleSelect(item);
-      }
-    });
-
-    _this.innerRef = /*#__PURE__*/React.createRef();
-    _this.state = {
-      history: [props.options],
-      searchValue: '',
-      searchResult: []
-    };
-    return _this;
-  }
-
-  _createClass(NestedSelect, [{
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.unmounted = true;
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      var _this$innerRef, _this$innerRef$curren;
-
-      var setInnerContentHeight = this.props.setInnerContentHeight;
-      setInnerContentHeight === null || setInnerContentHeight === void 0 ? void 0 : setInnerContentHeight((_this$innerRef = this.innerRef) === null || _this$innerRef === void 0 ? void 0 : (_this$innerRef$curren = _this$innerRef.current) === null || _this$innerRef$curren === void 0 ? void 0 : _this$innerRef$curren.offsetHeight);
-    }
-  }, {
-    key: "resetHistory",
-    value: function resetHistory() {
-      if (this.unmounted) {
-        return;
-      }
-
-      this.setState({
-        history: [this.props.options]
+  var handleNavToChildren = function handleNavToChildren(item) {
+    var newHistory = [item].concat(_toConsumableArray(state.history));
+    setState(function (state) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        history: newHistory
       });
+    });
+  };
+
+  var handleSelect = function handleSelect(item) {
+    onSelect(item); // It is important to reset history if the NestedSelected is used
+    // multiple times in a row without being dismounted. For example
+    // if it displayed in Carousel that slides in the NestedSelect
+    // and slides it out on selection.
+    // But, we want in this case that the resetting does not happen
+    // while the animation is running.
+    // There is probably a better way to do this.
+
+    setTimeout(function () {
+      resetHistory();
+    }, 500);
+  };
+
+  var handleClickItem = function handleClickItem(item) {
+    if (item.children && item.children.length > 0) {
+      handleNavToChildren(item);
+    } else {
+      handleSelect(item);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          ContentComponent = _this$props.ContentComponent,
-          HeaderComponent = _this$props.HeaderComponent,
-          canSelectParent = _this$props.canSelectParent,
-          isSelected = _this$props.isSelected,
-          title = _this$props.title,
-          transformParentItem = _this$props.transformParentItem,
-          radioPosition = _this$props.radioPosition,
-          ellipsis = _this$props.ellipsis,
-          options = _this$props.options,
-          searchOptions = _this$props.searchOptions,
-          noDivider = _this$props.noDivider;
-      var _this$state = this.state,
-          history = _this$state.history,
-          searchValue = _this$state.searchValue,
-          searchResult = _this$state.searchResult;
-      var current = history[0];
-      var children = current.children || [];
-      var level = history.length - 1;
-
-      var isSelectedWithLevel = function isSelectedWithLevel(item) {
-        return isSelected(item, level);
-      };
-
-      var parentItem = transformParentItem(omit(current, 'children'));
-      var hasSearchResult = searchValue.length > 0;
-
-      var onChange = function onChange(ev) {
-        var onSearch = searchOptions && searchOptions.onSearch;
-
-        if (onSearch) {
-          var _searchValue = ev.target.value;
-
-          var _searchResult = onSearch(_searchValue);
-
-          _this2.setState({
-            searchValue: _searchValue,
-            searchResult: _searchResult
-          });
-        }
-      };
-
-      return /*#__PURE__*/React.createElement("span", {
-        ref: this.innerRef
-      }, HeaderComponent ? /*#__PURE__*/React.createElement(HeaderComponent, {
-        title: current.title || title,
-        showBack: history.length > 1,
-        onClickBack: this.handleBack
-      }) : null, level > 0 ? current.header ? current.header : typeof options.childrenHeader === 'function' ? options.childrenHeader(level) : options.childrenHeader : options.header, /*#__PURE__*/React.createElement(ContentComponent, null, canSelectParent && level > 0 ? /*#__PURE__*/React.createElement(ItemRow, {
-        radioPosition: radioPosition,
-        item: parentItem,
-        onClick: this.handleClickItem,
-        isSelected: isSelectedWithLevel(parentItem),
-        ellipsis: ellipsis,
-        noDivider: noDivider
-      }) : null, searchOptions && level === 0 && /*#__PURE__*/React.createElement("div", {
-        className: "u-mh-1 u-mb-half"
-      }, /*#__PURE__*/React.createElement(Input, {
-        placeholder: searchOptions.placeholderSearch,
-        onChange: onChange,
-        value: searchValue
-      })), hasSearchResult ? searchResult.length === 0 ? /*#__PURE__*/React.createElement(Typography, {
-        variant: "body1",
-        className: "u-flex u-flex-justify-center u-mb-1 "
-      }, searchOptions.noDataLabel) : searchResult.map(function (item, index) {
-        return /*#__PURE__*/React.createElement(ItemRow, {
-          radioPosition: radioPosition,
-          key: item.key || item.title,
-          item: item,
-          onClick: _this2.handleClickItem,
-          isSelected: isSelectedWithLevel(item),
-          isLast: index === searchResult.length - 1,
-          ellipsis: ellipsis,
-          noDivider: noDivider
-        });
-      }) : children.map(function (item, index) {
-        return /*#__PURE__*/React.createElement(ItemRow, {
-          radioPosition: radioPosition,
-          key: item.key || item.title,
-          item: item,
-          onClick: _this2.handleClickItem,
-          isSelected: isSelectedWithLevel(item),
-          isLast: index === children.length - 1,
-          ellipsis: ellipsis,
-          noDivider: noDivider
+  };
+
+  var onChange = function onChange(ev) {
+    var onSearch = searchOptions === null || searchOptions === void 0 ? void 0 : searchOptions.onSearch;
+
+    if (onSearch) {
+      var searchValue = ev.target.value;
+      var searchResult = onSearch(searchValue);
+      setState(function (state) {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          searchValue: searchValue,
+          searchResult: searchResult
         });
-      })));
+      });
     }
-  }]);
-
-  return NestedSelect;
-}(Component);
+  };
+
+  var current = state.history[0];
+  var children = current.children || [];
+  var level = state.history.length - 1;
+  var parentItem = transformParentItem(omit(current, 'children'));
+  var hasSearchResult = ((_state$searchValue = state.searchValue) === null || _state$searchValue === void 0 ? void 0 : _state$searchValue.length) > 0;
+
+  var isSelectedWithLevel = function isSelectedWithLevel(item) {
+    return isSelected(item, level);
+  };
+
+  return /*#__PURE__*/React.createElement("span", {
+    ref: innerRef
+  }, HeaderComponent ? /*#__PURE__*/React.createElement(HeaderComponent, {
+    title: current.title || title,
+    showBack: state.history.length > 1,
+    onClickBack: handleBack
+  }) : null, level > 0 ? current.header ? current.header : typeof options.childrenHeader === 'function' ? options.childrenHeader(level) : options.childrenHeader : options.header, /*#__PURE__*/React.createElement(ContentComponent, null, canSelectParent && level > 0 ? /*#__PURE__*/React.createElement(ItemRow, {
+    radioPosition: radioPosition,
+    item: parentItem,
+    onClick: handleClickItem,
+    isSelected: isSelectedWithLevel(parentItem),
+    ellipsis: ellipsis,
+    noDivider: noDivider
+  }) : null, searchOptions && level === 0 && /*#__PURE__*/React.createElement("div", {
+    className: "u-mh-1 u-mb-half"
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: searchOptions.placeholderSearch,
+    onChange: onChange,
+    value: state.searchValue
+  })), hasSearchResult ? state.searchResult.length === 0 ? /*#__PURE__*/React.createElement(Typography, {
+    variant: "body1",
+    className: "u-flex u-flex-justify-center u-mb-1 "
+  }, searchOptions.noDataLabel) : state.searchResult.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(ItemRow, {
+      radioPosition: radioPosition,
+      key: item.key || item.title,
+      item: item,
+      onClick: handleClickItem,
+      isSelected: isSelectedWithLevel(item),
+      isLast: index === state.searchResult.length - 1,
+      ellipsis: ellipsis,
+      noDivider: noDivider
+    });
+  }) : children.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(ItemRow, {
+      radioPosition: radioPosition,
+      key: item.key || item.title,
+      item: item,
+      onClick: handleClickItem,
+      isSelected: isSelectedWithLevel(item),
+      isLast: index === children.length - 1,
+      ellipsis: ellipsis,
+      noDivider: noDivider
+    });
+  })));
+};
 
 NestedSelect.defaultProps = {
   ContentComponent: List,