cozy-ui 117.1.0 → 117.2.1

package/package.json

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

package/react/NestedSelect/NestedSelect.jsx

@@ -1,13 +1,14 @@
 import cx from 'classnames'
+import debounce from 'lodash/debounce'
 import omit from 'lodash/omit'
 import PropTypes from 'prop-types'
-import React, { useState, useRef } from 'react'
+import React, { useState, useRef, useMemo } from 'react'
 
 import ItemRow from './ItemRow'
 import { makeHistory } from './helpers'
 import styles from './styles.styl'
-import Input from '../Input'
 import List from '../List'
+import SearchBar from '../SearchBar'
 import Typography from '../Typography'
 
 export { ItemRow }
@@ -35,9 +36,13 @@ const NestedSelect = ({
   const innerRef = useRef()
   const [state, setState] = useState({
     history: makeHistory(options, canSelectParent),
-    searchValue: '',
-    searchResult: []
+    searchValue: ''
   })
+  const [searchResult, setSearchResult] = useState(null)
+  const delayedSetSearchResult = useMemo(
+    () => debounce(setSearchResult, 250),
+    [setSearchResult]
+  )
 
   const handleBack = () => {
     const [item, ...newHistory] = state.history
@@ -70,16 +75,21 @@ const NestedSelect = ({
     if (onSearch) {
       const searchValue = ev.target.value
       const searchResult = onSearch(searchValue)
-      setState(state => ({ ...state, searchValue, searchResult }))
+      setState(state => ({ ...state, searchValue }))
+      delayedSetSearchResult(searchResult)
     }
   }
 
+  const onClear = () => {
+    setState(state => ({ ...state, searchValue: '' }))
+    delayedSetSearchResult(null)
+  }
+
   const current = state.history[0]
   const children = current.children || []
   const level = state.history.length - 1
   const parentItem = transformParentItem(omit(current, 'children'))
 
-  const hasSearchResult = state.searchValue?.length > 0
   const isSelectedWithLevel = item => isSelected(item, level)
   const currentTitle = current.title || title
 
@@ -117,16 +127,17 @@ const NestedSelect = ({
               [styles['search-container--without-title']]: !currentTitle
             })}
           >
-            <Input
+            <SearchBar
               placeholder={searchOptions.placeholderSearch}
-              onChange={onChange}
               value={state.searchValue}
+              onChange={onChange}
+              onClear={onClear}
             />
           </div>
         )}
 
-        {hasSearchResult ? (
-          state.searchResult.length === 0 ? (
+        {searchResult ? (
+          searchResult.length === 0 ? (
             <Typography
               variant="body1"
               className="u-flex u-flex-justify-center u-mb-1 "
@@ -134,14 +145,14 @@ const NestedSelect = ({
               {searchOptions.noDataLabel}
             </Typography>
           ) : (
-            state.searchResult.map((item, index) => (
+            searchResult.map((item, index) => (
               <ItemRow
                 radioPosition={radioPosition}
                 key={item.key || item.title}
                 item={item}
                 onClick={handleClickItem}
                 isSelected={isSelectedWithLevel(item)}
-                isLast={index === state.searchResult.length - 1}
+                isLast={index === searchResult.length - 1}
                 ellipsis={ellipsis}
                 noDivider={noDivider}
               />

package/react/NestedSelect/NestedSelect.md

@@ -155,14 +155,7 @@ const InteractiveExample = () => {
     onSearch: (value) => {
       const options = makeOptions({ withHeaders })
       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 => {

package/react/NestedSelect/NestedSelect.spec.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import '@testing-library/jest-dom'
-import { render, fireEvent } from '@testing-library/react'
+import { render, fireEvent, waitFor } from '@testing-library/react'
 
 import NestedSelect from './NestedSelect'
-import { BreakpointsProvider } from '../providers/Breakpoints'
+import DemoProvider from '../providers/DemoProvider'
 
 describe('NestedSelect', () => {
   const makeOption = text => ({
@@ -40,7 +40,7 @@ describe('NestedSelect', () => {
     const options = makeOptions(itemSelected)
 
     return render(
-      <BreakpointsProvider>
+      <DemoProvider>
         <NestedSelect
           canSelectParent={canSelectParent}
           options={options}
@@ -49,7 +49,7 @@ describe('NestedSelect', () => {
           onCancel={onCancel}
           searchOptions={searchOptions}
         />
-      </BreakpointsProvider>
+      </DemoProvider>
     )
   }
 
@@ -159,9 +159,11 @@ describe('NestedSelect', () => {
       const searchInput = getByPlaceholderText('Placeholder Search')
       expect(searchInput).toBeTruthy()
 
-      fireEvent.change(searchInput, { target: { value: 'cozy' } })
-      const noData = getByText('No Data Found')
-      expect(noData).toBeTruthy()
+      waitFor(() => {
+        fireEvent.change(searchInput, { target: { value: 'cozy' } })
+        const noData = getByText('No Data Found')
+        expect(noData).toBeTruthy()
+      })
     })
 
     it('should show search results', () => {
@@ -186,11 +188,12 @@ describe('NestedSelect', () => {
       const searchInput = getByPlaceholderText('Placeholder Search')
       expect(searchInput).toBeTruthy()
 
-      fireEvent.change(searchInput, { target: { value: 'cozy' } })
-
-      expect(queryByText('cozy 1')).toBeTruthy()
-      expect(queryByText('cozy 1')).toBeTruthy()
-      expect(queryByText('anything')).toBeFalsy()
+      waitFor(() => {
+        fireEvent.change(searchInput, { target: { value: 'cozy' } })
+        expect(queryByText('cozy 1')).toBeTruthy()
+        expect(queryByText('cozy 1')).toBeTruthy()
+        expect(queryByText('anything')).toBeFalsy()
+      })
     })
   })
 })

package/react/NestedSelect/styles.styl

@@ -13,5 +13,5 @@
     top -0.5rem
 
 .search-container--without-title
-    margin-right 5rem
+    margin-right 1rem
     margin-top 0.5rem

package/react/QualificationModal/helpers.js

@@ -0,0 +1,61 @@
+import React from 'react'
+
+import { themesList } from 'cozy-client/dist/models/document/documentTypeData'
+import { isQualificationNote } from 'cozy-client/dist/models/document/documentTypeDataHelpers'
+import { getBoundT } from 'cozy-client/dist/models/document/locales'
+
+import Icon from '../Icon'
+import FileTypeNoteIcon from '../Icons/FileTypeNote'
+import QualificationIconStack from '../QualificationIconStack'
+
+export const makeOptions = lang => {
+  const qualifT = getBoundT(lang)
+
+  return {
+    children: [
+      {
+        id: 'none',
+        title: qualifT('Scan.themes.none'),
+        icon: <QualificationIconStack />
+      },
+      ...themesList.map(theme => ({
+        id: theme.id,
+        title: qualifT(`Scan.themes.${theme.label}`),
+        icon: <QualificationIconStack theme={theme.label} />,
+        children: theme.items.map(item => ({
+          id: item.label,
+          item,
+          title: qualifT(`Scan.items.${item.label}`),
+          icon: isQualificationNote(item) ? (
+            <Icon icon={FileTypeNoteIcon} size={64} />
+          ) : (
+            <QualificationIconStack qualification={item.label} />
+          )
+        }))
+      }))
+    ]
+  }
+}
+
+export const searchOptionsFn = (options, value) => {
+  const deepOptions = options.children
+    .flatMap(child => child.children)
+    .reduce((acc, curr) => {
+      if (!!curr && !acc.some(el => el.id === curr.id)) {
+        acc.push(curr)
+      }
+      return acc
+    }, [])
+
+  return deepOptions.filter(deepOption =>
+    deepOption.title.toLowerCase().includes(value.toLowerCase())
+  )
+}
+
+export const makeSearchOptions = ({ options, title, noDataLabel, t }) => {
+  return {
+    placeholderSearch: title || t('QualificationModal.title'),
+    noDataLabel: noDataLabel || t('QualificationModal.noDataLabel'),
+    onSearch: value => searchOptionsFn(options, value)
+  }
+}

package/react/QualificationModal/helpers.spec.js

@@ -0,0 +1,32 @@
+import { searchOptionsFn } from './helpers'
+
+describe('searchOptionsFn', () => {
+  it('should return only the uniq good result', () => {
+    const options = {
+      children: [
+        { id: 'none', title: 'None' },
+        {
+          id: 'theme1',
+          title: 'Identity',
+          children: [
+            { id: '01', title: 'Identity Photo' },
+            { id: '02', title: 'ID card' }
+          ]
+        },
+        {
+          id: 'theme2',
+          title: 'Family',
+          children: [
+            { id: '03', title: 'Family record book' },
+            { id: '04', title: 'Birth certificate' },
+            { id: '01', title: 'Identity Photo' }
+          ]
+        }
+      ]
+    }
+
+    const res = searchOptionsFn(options, 'photo')
+
+    expect(res).toStrictEqual([{ id: '01', title: 'Identity Photo' }])
+  })
+})

package/react/QualificationModal/index.jsx

@@ -2,54 +2,30 @@ import PropTypes from 'prop-types'
 import React, { useMemo } from 'react'
 
 import { useClient } from 'cozy-client'
-import { themesList } from 'cozy-client/dist/models/document/documentTypeData'
-import { isQualificationNote } from 'cozy-client/dist/models/document/documentTypeDataHelpers'
-import { getBoundT } from 'cozy-client/dist/models/document/locales'
 import { isSupportedQualification } from 'cozy-client/dist/models/document/qualification'
 
+import { makeOptions, makeSearchOptions } from './helpers'
 import { locales } from './locales'
-import Icon from '../Icon'
-import FileTypeNoteIcon from '../Icons/FileTypeNote'
 import NestedSelectResponsive from '../NestedSelect/NestedSelectResponsive'
-import QualificationIconStack from '../QualificationIconStack'
 import { useI18n, useExtendI18n } from '../providers/I18n'
 
-const makeOptions = lang => {
-  const qualifT = getBoundT(lang)
-
-  return {
-    children: [
-      {
-        id: 'none',
-        title: qualifT('Scan.themes.none'),
-        icon: <QualificationIconStack />
-      },
-      ...themesList.map(theme => ({
-        id: theme.id,
-        title: qualifT(`Scan.themes.${theme.label}`),
-        icon: <QualificationIconStack theme={theme.label} />,
-        children: theme.items.map(item => ({
-          id: item.label,
-          item,
-          title: qualifT(`Scan.items.${item.label}`),
-          icon: isQualificationNote(item) ? (
-            <Icon icon={FileTypeNoteIcon} size={64} />
-          ) : (
-            <QualificationIconStack qualification={item.label} />
-          )
-        }))
-      }))
-    ]
-  }
-}
-
-const QualificationModal = ({ file, title, onClose }) => {
+const QualificationModal = ({ file, title, noDataLabel, onClose }) => {
   useExtendI18n(locales)
   const client = useClient()
   const { t, lang } = useI18n()
 
   const qualificationLabel = file.metadata?.qualification?.label
   const options = useMemo(() => makeOptions(lang), [lang])
+  const searchOptions = useMemo(
+    () =>
+      makeSearchOptions({
+        options,
+        title,
+        noDataLabel,
+        t
+      }),
+    [options, title, noDataLabel, t]
+  )
 
   const isSelected = ({ id, item }) => {
     return isSupportedQualification(qualificationLabel)
@@ -74,11 +50,11 @@ const QualificationModal = ({ file, title, onClose }) => {
 
   return (
     <NestedSelectResponsive
-      title={title || t('QualificationModal.title')}
       options={options}
       noDivider
       document={file}
       isSelected={isSelected}
+      searchOptions={searchOptions}
       onSelect={handleClick}
       onClose={onClose}
     />
@@ -88,6 +64,7 @@ const QualificationModal = ({ file, title, onClose }) => {
 QualificationModal.propTypes = {
   file: PropTypes.object,
   title: PropTypes.string,
+  noDataLabel: PropTypes.string,
   onClose: PropTypes.func
 }
 

package/react/QualificationModal/locales/en.json

@@ -1,5 +1,6 @@
 {
   "QualificationModal": {
-    "title": "Document type"
+    "title": "Document type",
+    "noDataLabel": "No result"
   }
 }

package/react/QualificationModal/locales/fr.json

@@ -1,5 +1,6 @@
 {
   "QualificationModal": {
-    "title": "Type de document"
+    "title": "Type de document",
+    "noDataLabel": "Aucun résultat"
   }
 }

package/stylus/components/table.styl

@@ -61,7 +61,7 @@ $table-row-head
 $table-row-selected
     &
     &:hover
-        background-color var(--zircon)
+        background-color var(--actionColorSelected)
 
 $table-cell
     box-sizing border-box

package/transpiled/react/NestedSelect/NestedSelect.js

@@ -8,17 +8,18 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 cx from 'classnames';
+import debounce from 'lodash/debounce';
 import omit from 'lodash/omit';
 import PropTypes from 'prop-types';
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useMemo } from 'react';
 import ItemRow from "cozy-ui/transpiled/react/NestedSelect/ItemRow";
 import { makeHistory } from "cozy-ui/transpiled/react/NestedSelect/helpers";
 var styles = {
   "Modal__back": "styles__Modal__back___qxUn_",
   "search-container--without-title": "styles__search-container--without-title___3P2fe"
 };
-import Input from "cozy-ui/transpiled/react/Input";
 import List from "cozy-ui/transpiled/react/List";
+import SearchBar from "cozy-ui/transpiled/react/SearchBar";
 import Typography from "cozy-ui/transpiled/react/Typography";
 export { ItemRow };
 /**
@@ -29,8 +30,6 @@ export { ItemRow };
  */
 
 var NestedSelect = function NestedSelect(_ref) {
-  var _state$searchValue;
-
   var onSelect = _ref.onSelect,
       ContentComponent = _ref.ContentComponent,
       HeaderComponent = _ref.HeaderComponent,
@@ -47,13 +46,21 @@ var NestedSelect = function NestedSelect(_ref) {
 
   var _useState = useState({
     history: makeHistory(options, canSelectParent),
-    searchValue: '',
-    searchResult: []
+    searchValue: ''
   }),
       _useState2 = _slicedToArray(_useState, 2),
       state = _useState2[0],
       setState = _useState2[1];
 
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      searchResult = _useState4[0],
+      setSearchResult = _useState4[1];
+
+  var delayedSetSearchResult = useMemo(function () {
+    return debounce(setSearchResult, 250);
+  }, [setSearchResult]);
+
   var handleBack = function handleBack() {
     var _state$history = _toArray(state.history),
         item = _state$history[0],
@@ -93,21 +100,31 @@ var NestedSelect = function NestedSelect(_ref) {
 
     if (onSearch) {
       var searchValue = ev.target.value;
-      var searchResult = onSearch(searchValue);
+
+      var _searchResult = onSearch(searchValue);
+
       setState(function (state) {
         return _objectSpread(_objectSpread({}, state), {}, {
-          searchValue: searchValue,
-          searchResult: searchResult
+          searchValue: searchValue
         });
       });
+      delayedSetSearchResult(_searchResult);
     }
   };
 
+  var onClear = function onClear() {
+    setState(function (state) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        searchValue: ''
+      });
+    });
+    delayedSetSearchResult(null);
+  };
+
   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);
@@ -131,21 +148,22 @@ var NestedSelect = function NestedSelect(_ref) {
     className: cx('u-ml-1 u-mb-half', _defineProperty({
       'u-mr-1': currentTitle
     }, styles['search-container--without-title'], !currentTitle))
-  }, /*#__PURE__*/React.createElement(Input, {
+  }, /*#__PURE__*/React.createElement(SearchBar, {
     placeholder: searchOptions.placeholderSearch,
+    value: state.searchValue,
     onChange: onChange,
-    value: state.searchValue
-  })), hasSearchResult ? state.searchResult.length === 0 ? /*#__PURE__*/React.createElement(Typography, {
+    onClear: onClear
+  })), searchResult ? 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) {
+  }, searchOptions.noDataLabel) : 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,
+      isLast: index === searchResult.length - 1,
       ellipsis: ellipsis,
       noDivider: noDivider
     });

package/transpiled/react/QualificationModal/helpers.js

@@ -0,0 +1,68 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import React from 'react';
+import { themesList } from 'cozy-client/dist/models/document/documentTypeData';
+import { isQualificationNote } from 'cozy-client/dist/models/document/documentTypeDataHelpers';
+import { getBoundT } from 'cozy-client/dist/models/document/locales';
+import Icon from "cozy-ui/transpiled/react/Icon";
+import FileTypeNoteIcon from "cozy-ui/transpiled/react/Icons/FileTypeNote";
+import QualificationIconStack from "cozy-ui/transpiled/react/QualificationIconStack";
+export var makeOptions = function makeOptions(lang) {
+  var qualifT = getBoundT(lang);
+  return {
+    children: [{
+      id: 'none',
+      title: qualifT('Scan.themes.none'),
+      icon: /*#__PURE__*/React.createElement(QualificationIconStack, null)
+    }].concat(_toConsumableArray(themesList.map(function (theme) {
+      return {
+        id: theme.id,
+        title: qualifT("Scan.themes.".concat(theme.label)),
+        icon: /*#__PURE__*/React.createElement(QualificationIconStack, {
+          theme: theme.label
+        }),
+        children: theme.items.map(function (item) {
+          return {
+            id: item.label,
+            item: item,
+            title: qualifT("Scan.items.".concat(item.label)),
+            icon: isQualificationNote(item) ? /*#__PURE__*/React.createElement(Icon, {
+              icon: FileTypeNoteIcon,
+              size: 64
+            }) : /*#__PURE__*/React.createElement(QualificationIconStack, {
+              qualification: item.label
+            })
+          };
+        })
+      };
+    })))
+  };
+};
+export var searchOptionsFn = function searchOptionsFn(options, value) {
+  var deepOptions = options.children.flatMap(function (child) {
+    return child.children;
+  }).reduce(function (acc, curr) {
+    if (!!curr && !acc.some(function (el) {
+      return el.id === curr.id;
+    })) {
+      acc.push(curr);
+    }
+
+    return acc;
+  }, []);
+  return deepOptions.filter(function (deepOption) {
+    return deepOption.title.toLowerCase().includes(value.toLowerCase());
+  });
+};
+export var makeSearchOptions = function makeSearchOptions(_ref) {
+  var options = _ref.options,
+      title = _ref.title,
+      noDataLabel = _ref.noDataLabel,
+      t = _ref.t;
+  return {
+    placeholderSearch: title || t('QualificationModal.title'),
+    noDataLabel: noDataLabel || t('QualificationModal.noDataLabel'),
+    onSearch: function onSearch(value) {
+      return searchOptionsFn(options, value);
+    }
+  };
+};

package/transpiled/react/QualificationModal/index.js

@@ -1,57 +1,20 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import PropTypes from 'prop-types';
 import React, { useMemo } from 'react';
 import { useClient } from 'cozy-client';
-import { themesList } from 'cozy-client/dist/models/document/documentTypeData';
-import { isQualificationNote } from 'cozy-client/dist/models/document/documentTypeDataHelpers';
-import { getBoundT } from 'cozy-client/dist/models/document/locales';
 import { isSupportedQualification } from 'cozy-client/dist/models/document/qualification';
+import { makeOptions, makeSearchOptions } from "cozy-ui/transpiled/react/QualificationModal/helpers";
 import { locales } from "cozy-ui/transpiled/react/QualificationModal/locales";
-import Icon from "cozy-ui/transpiled/react/Icon";
-import FileTypeNoteIcon from "cozy-ui/transpiled/react/Icons/FileTypeNote";
 import NestedSelectResponsive from "cozy-ui/transpiled/react/NestedSelect/NestedSelectResponsive";
-import QualificationIconStack from "cozy-ui/transpiled/react/QualificationIconStack";
 import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n";
 
-var makeOptions = function makeOptions(lang) {
-  var qualifT = getBoundT(lang);
-  return {
-    children: [{
-      id: 'none',
-      title: qualifT('Scan.themes.none'),
-      icon: /*#__PURE__*/React.createElement(QualificationIconStack, null)
-    }].concat(_toConsumableArray(themesList.map(function (theme) {
-      return {
-        id: theme.id,
-        title: qualifT("Scan.themes.".concat(theme.label)),
-        icon: /*#__PURE__*/React.createElement(QualificationIconStack, {
-          theme: theme.label
-        }),
-        children: theme.items.map(function (item) {
-          return {
-            id: item.label,
-            item: item,
-            title: qualifT("Scan.items.".concat(item.label)),
-            icon: isQualificationNote(item) ? /*#__PURE__*/React.createElement(Icon, {
-              icon: FileTypeNoteIcon,
-              size: 64
-            }) : /*#__PURE__*/React.createElement(QualificationIconStack, {
-              qualification: item.label
-            })
-          };
-        })
-      };
-    })))
-  };
-};
-
 var QualificationModal = function QualificationModal(_ref) {
   var _file$metadata, _file$metadata$qualif;
 
   var file = _ref.file,
       title = _ref.title,
+      noDataLabel = _ref.noDataLabel,
       onClose = _ref.onClose;
   useExtendI18n(locales);
   var client = useClient();
@@ -64,6 +27,14 @@ var QualificationModal = function QualificationModal(_ref) {
   var options = useMemo(function () {
     return makeOptions(lang);
   }, [lang]);
+  var searchOptions = useMemo(function () {
+    return makeSearchOptions({
+      options: options,
+      title: title,
+      noDataLabel: noDataLabel,
+      t: t
+    });
+  }, [options, title, noDataLabel, t]);
 
   var isSelected = function isSelected(_ref2) {
     var id = _ref2.id,
@@ -108,11 +79,11 @@ var QualificationModal = function QualificationModal(_ref) {
   }();
 
   return /*#__PURE__*/React.createElement(NestedSelectResponsive, {
-    title: title || t('QualificationModal.title'),
     options: options,
     noDivider: true,
     document: file,
     isSelected: isSelected,
+    searchOptions: searchOptions,
     onSelect: handleClick,
     onClose: onClose
   });
@@ -121,6 +92,7 @@ var QualificationModal = function QualificationModal(_ref) {
 QualificationModal.propTypes = {
   file: PropTypes.object,
   title: PropTypes.string,
+  noDataLabel: PropTypes.string,
   onClose: PropTypes.func
 };
 export default QualificationModal;