cozy-ui 111.12.0 → 111.14.0

package/react/SearchBar/locales/en.json

@@ -1,5 +1,5 @@
 {
-  "search": {
+  "SearchBar": {
     "placeholder": "Search"
   }
 }

package/react/SearchBar/locales/fr.json

@@ -1,5 +1,5 @@
 {
-  "search": {
+  "SearchBar": {
     "placeholder": "Rechercher"
   }
 }

package/react/providers/DemoProvider.jsx

@@ -4,7 +4,7 @@ import { CozyProvider } from 'cozy-client'
 
 import { BreakpointsProvider } from './Breakpoints'
 import CozyTheme from './CozyTheme'
-import { I18nContext } from '../providers/I18n'
+import I18n from '../providers/I18n'
 
 const defaultClient = {
   plugins: {
@@ -28,15 +28,9 @@ const DemoProvider = ({ client, variant, children }) => {
   return (
     <CozyProvider client={client || defaultClient}>
       <BreakpointsProvider>
-        <I18nContext.Provider
-          value={{
-            t: x => x,
-            f: () => '01 Jan. 2022',
-            lang
-          }}
-        >
+        <I18n lang={lang} dictRequire={() => ({})}>
           <CozyTheme variant={variant}>{children}</CozyTheme>
-        </I18nContext.Provider>
+        </I18n>
       </BreakpointsProvider>
     </CozyProvider>
   )

package/react/providers/I18n/index.jsx

@@ -89,8 +89,9 @@ I18n.childContextTypes = {
   lang: PropTypes.string
 }
 
-export { initTranslation, extend, useExtendI18n } from './translation'
+export { initTranslation, extend } from './translation'
 export { default as translate } from './translate'
 export { default as createUseI18n } from './createUseI18n'
+export { default as useExtendI18n } from './useExtendI18n'
 
 export default I18n

package/react/providers/I18n/translation.jsx

@@ -1,6 +1,6 @@
 import Polyglot from 'node-polyglot'
 
-import { DEFAULT_LANG, useI18n } from '.'
+import { DEFAULT_LANG } from '.'
 
 export let _polyglot
 
@@ -40,34 +40,3 @@ export const initTranslation = (
 }
 
 export const extend = (dict, polyglot) => (polyglot || _polyglot)?.extend(dict)
-
-// Use to determine if we need to merge locales again, and to avoid useless calls
-let useExtendI18nLang = ''
-
-/**
- * Hook to merge app locales with cozy-ui locales
- * @param {object} locales - Locales sorted by lang `{ fr: {...}, en: {...} }`
- * @returns {void}
- */
-export const useExtendI18n = locales => {
-  const { lang, polyglot } = useI18n()
-
-  if (!locales || !lang || !polyglot) return
-
-  // To simplify code we use Polyglot.extend to merge
-  // locales from object and from polyglot.phrases
-  // rather than native JS or lodash. this is why we have two extend.
-  if (useExtendI18nLang !== lang) {
-    const _polyglot = new Polyglot({
-      phrases: locales[lang],
-      locale: lang
-    })
-
-    // merge locales from app and cozy-ui, without replacing existing one in app
-    extend(polyglot.phrases, _polyglot)
-    // use merged locales in app
-    extend(_polyglot.phrases, polyglot)
-    // set the sitch to avoid useless merge
-    useExtendI18nLang = lang
-  }
-}

package/react/providers/I18n/useExtendI18n.jsx

@@ -0,0 +1,37 @@
+import Polyglot from 'node-polyglot'
+import { useState } from 'react'
+
+import { useI18n } from '.'
+import { extend } from './translation'
+
+/**
+ * Hook to merge app locales with cozy-ui locales
+ * @param {object} locales - Locales sorted by lang `{ fr: {...}, en: {...} }`
+ * @returns {void}
+ */
+const useExtendI18n = locales => {
+  const { lang, polyglot } = useI18n()
+  // Use to determine if we need to merge locales again, and to avoid useless calls
+  const [useExtendI18nLang, setUseExtendI18nLang] = useState('')
+
+  if (!locales || !lang || !polyglot) return
+
+  // To simplify code we use Polyglot.extend to merge
+  // locales from object and from polyglot.phrases
+  // rather than native JS or lodash. this is why we have two extend.
+  if (useExtendI18nLang !== lang) {
+    const _polyglot = new Polyglot({
+      phrases: locales[lang],
+      locale: lang
+    })
+
+    // merge locales from app and cozy-ui, without replacing existing one in app
+    extend(polyglot.phrases, _polyglot)
+    // use merged locales in app
+    extend(_polyglot.phrases, polyglot)
+    // set the switch to avoid useless merge
+    setUseExtendI18nLang(lang)
+  }
+}
+
+export default useExtendI18n

package/transpiled/react/AppSections/Sections.js

@@ -14,7 +14,6 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import flag from 'cozy-flags';
-import { useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 var styles = {
   "Sections__section": "Sections__Sections__section___2onYy"
 };
@@ -53,12 +52,12 @@ var en = {
     telecom: "Telecom",
     transport: "Transportation",
     pro: "Work",
-    shortcuts: "Shortcuts"
+    shortcuts: "Additional apps"
   },
   sections: {
     applications: "Applications",
     konnectors: "Services",
-    shortcuts: "Shortcuts"
+    shortcuts: "Additional apps"
   }
 };
 var fr = {
@@ -90,19 +89,19 @@ var fr = {
     telecom: "Mobile",
     transport: "Voyage et transport",
     pro: "Travail",
-    shortcuts: "Raccourcis"
+    shortcuts: "App suppl\xE9mentaires"
   },
   sections: {
     applications: "Applications",
     konnectors: "Services",
-    shortcuts: "Raccourcis"
+    shortcuts: "App suppl\xE9mentaires"
   }
 };
 import * as searchUtils from "cozy-ui/transpiled/react/AppSections/search";
 import Typography from "cozy-ui/transpiled/react/Typography";
-import withBreakpoints from "cozy-ui/transpiled/react/helpers/withBreakpoints";
-import { translate } from "cozy-ui/transpiled/react/providers/I18n";
-import withLocales from "cozy-ui/transpiled/react/providers/I18n/withLocales";
+import { useBreakpoints } from "cozy-ui/transpiled/react/providers/Breakpoints";
+import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import withOnlyLocales from "cozy-ui/transpiled/react/providers/I18n/withOnlyLocales";
 var locales = {
   en: en,
   fr: fr
@@ -291,7 +290,15 @@ var SectionsWrapper = function SectionsWrapper(props) {
   var config = flag('store.alternative-source');
   var i18nConfig = generateI18nConfig(config === null || config === void 0 ? void 0 : config.categories);
   useExtendI18n(i18nConfig);
-  return /*#__PURE__*/React.createElement(Sections, props);
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var breakpoints = useBreakpoints();
+  return /*#__PURE__*/React.createElement(Sections, _extends({}, props, {
+    breakpoints: breakpoints,
+    t: t
+  }));
 };
 
 Sections.propTypes = {
@@ -334,5 +341,4 @@ Sections.defaultProps = {
     })
   })
 };
-export var Untranslated = withBreakpoints()(SectionsWrapper);
-export default withLocales(locales)(translate()(Untranslated));
+export default withOnlyLocales(locales)(SectionsWrapper);

package/transpiled/react/AppTile/index.js

@@ -19,7 +19,7 @@ var fr = {
     installed: "Install\xE9e",
     maintenance: "En maintenance",
     update: "Mise \xE0 jour dispo.",
-    favorite: "Ajout\xE9 sur la page d'accueil"
+    favorite: "Ajout\xE9 sur l'accueil"
   }
 };
 var styles = {
@@ -36,7 +36,6 @@ import { ShortcutTile } from "cozy-ui/transpiled/react/ShortcutTile";
 import Tile, { TileTitle, TileSubtitle, TileFooter, TileIcon, TileDescription } from "cozy-ui/transpiled/react/Tile";
 import palette from "cozy-ui/transpiled/react/palette";
 import { AppDoctype } from "cozy-ui/transpiled/react/proptypes";
-import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
 import { createUseI18n } from "cozy-ui/transpiled/react/providers/I18n";
 var locales = {
   en: en,
@@ -60,8 +59,6 @@ var getAppIconProps = function getAppIconProps() {
 
 var useI18n = createUseI18n(locales);
 export var AppTile = function AppTile(_ref) {
-  var _app$metadata;
-
   var app = _ref.app,
       nameProp = _ref.name,
       namePrefix = _ref.namePrefix,
@@ -76,17 +73,12 @@ export var AppTile = function AppTile(_ref) {
 
   var _app$developer = app.developer,
       developer = _app$developer === void 0 ? {} : _app$developer;
-
-  var _useBreakpoints = useBreakpoints(),
-      isMobile = _useBreakpoints.isMobile;
-
   var name = nameProp || app.name;
   var statusLabel = getCurrentStatusLabel(app);
   var isStatusArray = Array.isArray(showStatus);
-  var statusToDisplay = isShortcutFile(app) && statusLabel === APP_STATUS.installed && isMobile ? 'favorite' : isStatusArray ? showStatus.indexOf(statusLabel) > -1 && statusLabel : showStatus && statusLabel;
+  var statusToDisplay = isShortcutFile(app) && statusLabel === APP_STATUS.installed ? 'favorite' : isStatusArray ? showStatus.indexOf(statusLabel) > -1 && statusLabel : showStatus && statusLabel;
   var IconComponent = IconComponentProp || AppIcon;
   var isInMaintenanceWithSpecificDisplay = displaySpecificMaintenanceStyle && statusLabel === APP_STATUS.maintenance;
-  var tileSubtitle = isShortcutFile(app) ? (_app$metadata = app.metadata) === null || _app$metadata === void 0 ? void 0 : _app$metadata.source : developer.name;
   return /*#__PURE__*/React.createElement(Tile, {
     tag: "button",
     type: "button",
@@ -107,7 +99,7 @@ export var AppTile = function AppTile(_ref) {
     className: styles["AppTile-description"]
   }, /*#__PURE__*/React.createElement(TileTitle, {
     isMultiline: !statusLabel
-  }, namePrefix ? "".concat(namePrefix, " ").concat(name) : name), showDeveloper && /*#__PURE__*/React.createElement(TileSubtitle, null, "".concat(t('app_item.by'), " ").concat(tileSubtitle)), statusToDisplay && /*#__PURE__*/React.createElement(TileFooter, {
+  }, namePrefix ? "".concat(namePrefix, " ").concat(name) : name), developer.name && showDeveloper && /*#__PURE__*/React.createElement(TileSubtitle, null, "".concat(t('app_item.by'), " ").concat(developer.name)), statusToDisplay && /*#__PURE__*/React.createElement(TileFooter, {
     isAccent: statusLabel === APP_STATUS.update
   }, t("app_item.".concat(statusToDisplay)))));
 };

package/transpiled/react/BottomSheet/BottomSheet.js

@@ -126,6 +126,7 @@ export var defaultBottomSheetSpringConfig = {
 var defaultSettings = {
   mediumHeightRatio: 0.75,
   mediumHeight: null,
+  hasMinHeightOffset: false,
   isOpenMin: false
 };
 var BottomSheet = /*#__PURE__*/memo(function (_ref3) {
@@ -140,7 +141,8 @@ var BottomSheet = /*#__PURE__*/memo(function (_ref3) {
   var _defaultSettings$sett = _objectSpread(_objectSpread({}, defaultSettings), settings),
       mediumHeightRatio = _defaultSettings$sett.mediumHeightRatio,
       mediumHeight = _defaultSettings$sett.mediumHeight,
-      isOpenMin = _defaultSettings$sett.isOpenMin;
+      isOpenMin = _defaultSettings$sett.isOpenMin,
+      hasMinHeightOffset = _defaultSettings$sett.hasMinHeightOffset;
 
   var innerContentRef = useRef();
   var headerRef = useRef();
@@ -269,6 +271,7 @@ var BottomSheet = /*#__PURE__*/memo(function (_ref3) {
       isClosable: isClosable,
       isOpenMin: isOpenMin,
       headerRef: headerRef,
+      offset: hasMinHeightOffset ? offset : 0,
       actionButtonsHeight: actionButtonsHeight,
       actionButtonsBottomMargin: actionButtonsBottomMargin
     });
@@ -409,6 +412,9 @@ BottomSheet.propTypes = {
     /** Height of the middle snap point, expressed as a percentage of the viewport height */
     mediumHeightRatio: PropTypes.number,
 
+    /** To include the offset in the min height value */
+    hasMinHeightOffset: PropTypes.bool,
+
     /** To open the BottomSheet at the minimum height, if have an header */
     isOpenMin: PropTypes.bool
   }),

package/transpiled/react/BottomSheet/helpers.js

@@ -45,10 +45,12 @@ export var computeMinHeight = function computeMinHeight(_ref2) {
   var isClosable = _ref2.isClosable,
       isOpenMin = _ref2.isOpenMin,
       headerRef = _ref2.headerRef,
+      _ref2$offset = _ref2.offset,
+      offset = _ref2$offset === void 0 ? 0 : _ref2$offset,
       actionButtonsHeight = _ref2.actionButtonsHeight,
       actionButtonsBottomMargin = _ref2.actionButtonsBottomMargin;
   if (isClosable && !isOpenMin) return 0;
-  return headerRef.current.offsetHeight + actionButtonsHeight + actionButtonsBottomMargin + (getFlagshipMetadata().navbarHeight || 0) + getSafeAreaValue('bottom');
+  return headerRef.current.offsetHeight + offset + actionButtonsHeight + actionButtonsBottomMargin + (getFlagshipMetadata().navbarHeight || 0) + getSafeAreaValue('bottom');
 };
 export var makeOverridenChildren = function makeOverridenChildren(children, headerContentRef) {
   return React.Children.map(children, function (child) {

package/transpiled/react/CozyDialogs/dialogPropTypes.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 export default {
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'full']),
   open: PropTypes.bool.isRequired,
   disableTitleAutoPadding: PropTypes.bool,
   background: PropTypes.string,

package/transpiled/react/CozyDialogs/useCozyDialog.js

@@ -13,7 +13,7 @@ import DialogTransition from "cozy-ui/transpiled/react/CozyDialogs/DialogTransit
 import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
 import { makeStyles } from "cozy-ui/transpiled/react/styles";
 var globalId = 0;
-var modalSizes = ['small', 'medium', 'large'];
+var modalSizes = ['small', 'medium', 'large', 'full'];
 var useStyles = makeStyles({
   paper: {
     background: function background(_ref) {
@@ -97,25 +97,30 @@ var useCozyDialog = function useCozyDialog(props) {
     }
   };
   var dividerClassName = 'divider--dialog';
-  var dividerProps = {
+
+  var dividerProps = _objectSpread(_objectSpread({}, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.divider), {}, {
     classes: {
       root: dividerClassName
     }
-  };
+  });
+
   var dialogActionsClassName = 'cozyDialogActions';
-  var dialogActionsProps = {
+
+  var dialogActionsProps = _objectSpread(_objectSpread({}, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.dialogActions), {}, {
     classes: {
       root: dialogActionsClassName
     }
-  };
-  var dialogContentProps = {
+  });
+
+  var dialogContentProps = _objectSpread(_objectSpread({}, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.dialogContent), {}, {
     classes: {
       root: cx({
         disableGutters: disableGutters
       })
     },
     className: 'cozyDialogContent'
-  };
+  });
+
   return {
     dialogProps: dialogProps,
     dialogTitleProps: dialogTitleProps,

package/transpiled/react/MuiCozyTheme/overrides/makeDarkInvertedOverrides.d.ts

@@ -527,6 +527,10 @@ export function makeDarkInvertedOverrides(theme: any): {
                     maxWidth: string;
                 };
             };
+            '&.full': {
+                width: string;
+                maxWidth: string;
+            };
             '&.overflow': {
                 overflowY: string;
                 '& .cozyDialogContent': {

package/transpiled/react/MuiCozyTheme/overrides/makeDarkNormalOverrides.d.ts

@@ -527,6 +527,10 @@ export function makeDarkNormalOverrides(theme: any): {
                     maxWidth: string;
                 };
             };
+            '&.full': {
+                width: string;
+                maxWidth: string;
+            };
             '&.overflow': {
                 overflowY: string;
                 '& .cozyDialogContent': {

package/transpiled/react/MuiCozyTheme/overrides/makeLightInvertedOverrides.d.ts

@@ -527,6 +527,10 @@ export function makeLightInvertedOverrides(theme: any): {
                     maxWidth: string;
                 };
             };
+            '&.full': {
+                width: string;
+                maxWidth: string;
+            };
             '&.overflow': {
                 overflowY: string;
                 '& .cozyDialogContent': {

package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.d.ts

@@ -527,6 +527,10 @@ export function makeLightNormalOverrides(theme: any): {
                     maxWidth: string;
                 };
             };
+            '&.full': {
+                width: string;
+                maxWidth: string;
+            };
             '&.overflow': {
                 overflowY: string;
                 '& .cozyDialogContent': {

package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -425,6 +425,10 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
           width: '800px',
           maxWidth: '800px'
         }),
+        '&.full': {
+          width: '100%',
+          maxWidth: '100%'
+        },
         '&.overflow': {
           overflowY: 'visible !important',
           // Allow the icon to overflow the dialog, otherwise it will be cut off,

package/transpiled/react/SearchBar/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["placeholder", "className", "defaultValue", "elevation", "disabled", "onChange", "onFocus", "onBlur"];
+var _excluded = ["placeholder", "icon", "size", "type", "label", "componentsProps", "disabledClear", "className", "defaultValue", "value", "elevation", "disabled", "onChange", "onFocus", "onBlur"];
 
 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,15 +12,30 @@ import cx from 'classnames';
 import debounce from 'lodash/debounce';
 import PropTypes from 'prop-types';
 import React, { forwardRef, useState, useMemo } from 'react';
-import withOnlyLocales from "cozy-ui/transpiled/react/SearchBar/locales/withOnlyLocales";
+import { locales } from "cozy-ui/transpiled/react/SearchBar/locales/withOnlyLocales";
+import ButtonBase from "cozy-ui/transpiled/react/ButtonBase";
 import Icon from "cozy-ui/transpiled/react/Icon";
+import { iconPropType } from "cozy-ui/transpiled/react/Icon";
 import IconButton from "cozy-ui/transpiled/react/IconButton";
 import CrossCircleIcon from "cozy-ui/transpiled/react/Icons/CrossCircle";
 import MagnifierIcon from "cozy-ui/transpiled/react/Icons/Magnifier";
 import InputBase from "cozy-ui/transpiled/react/InputBase";
 import Paper from "cozy-ui/transpiled/react/Paper";
-import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import Typography from "cozy-ui/transpiled/react/Typography";
+import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n";
 import { makeStyles } from "cozy-ui/transpiled/react/styles";
+var sizeToPixel = {
+  small: 40,
+  medium: 48,
+  large: 56,
+  auto: 'auto'
+};
+var radiusBySize = {
+  small: 20,
+  medium: 24,
+  large: 28,
+  auto: 24
+};
 var useStyles = makeStyles(function (theme) {
   return {
     root: {
@@ -28,9 +43,15 @@ var useStyles = makeStyles(function (theme) {
       boxSizing: 'border-box',
       position: 'relative',
       alignItems: 'center',
-      height: 40,
+      height: function height(_ref) {
+        var size = _ref.size;
+        return sizeToPixel[size];
+      },
       flex: 1,
-      borderRadius: 99,
+      borderRadius: function borderRadius(_ref2) {
+        var size = _ref2.size;
+        return radiusBySize[size];
+      },
       borderStyle: 'solid',
       borderWidth: 1,
       borderColor: 'transparent',
@@ -46,7 +67,25 @@ var useStyles = makeStyles(function (theme) {
       backgroundColor: theme.palette.background.contrast
     },
     inputBase: {
-      flex: 1
+      flex: 1,
+      paddingLeft: function paddingLeft(_ref3) {
+        var icon = _ref3.icon;
+        return !icon && '1rem';
+      }
+    },
+    buttonBase: {
+      flex: 1,
+      justifyContent: 'start',
+      height: '100%',
+      borderRadius: 99
+    },
+    typography: {
+      color: 'currentColor',
+      opacity: 0.42,
+      paddingLeft: function paddingLeft(_ref4) {
+        var icon = _ref4.icon;
+        return !icon && '1rem';
+      }
     },
     icon: {
       color: theme.palette.text.secondary,
@@ -86,23 +125,34 @@ var useStyles = makeStyles(function (theme) {
     }
   };
 });
-var SearchBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var SearchBar = /*#__PURE__*/forwardRef(function (_ref5, ref) {
   var _cx;
 
-  var placeholderProp = _ref.placeholder,
-      className = _ref.className,
-      defaultValue = _ref.defaultValue,
-      elevation = _ref.elevation,
-      disabled = _ref.disabled,
-      onChange = _ref.onChange,
-      onFocus = _ref.onFocus,
-      onBlur = _ref.onBlur,
-      props = _objectWithoutProperties(_ref, _excluded);
+  var placeholderProp = _ref5.placeholder,
+      icon = _ref5.icon,
+      size = _ref5.size,
+      type = _ref5.type,
+      labelProp = _ref5.label,
+      componentsProps = _ref5.componentsProps,
+      disabledClear = _ref5.disabledClear,
+      className = _ref5.className,
+      defaultValue = _ref5.defaultValue,
+      value = _ref5.value,
+      elevation = _ref5.elevation,
+      disabled = _ref5.disabled,
+      onChange = _ref5.onChange,
+      onFocus = _ref5.onFocus,
+      onBlur = _ref5.onBlur,
+      props = _objectWithoutProperties(_ref5, _excluded);
 
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
-  var classes = useStyles();
+  var classes = useStyles({
+    size: size,
+    type: type,
+    icon: icon
+  });
 
   var _useState = useState(defaultValue),
       _useState2 = _slicedToArray(_useState, 2),
@@ -114,19 +164,21 @@ var SearchBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
       isFocused = _useState4[0],
       setIsFocused = _useState4[1];
 
-  var placeholder = placeholderProp || t('search.placeholder');
+  var placeholder = placeholderProp || t('SearchBar.placeholder');
+  var label = labelProp || t('SearchBar.placeholder');
+  var spreadValue = value || currentValue;
+  var isSelfControlledComp = typeof value === 'undefined';
   var delayedOnChange = useMemo(function () {
-    return debounce(function (event) {
-      return onChange(event);
-    }, 375);
+    return debounce(onChange, 375);
   }, [onChange]);
 
   var handleChange = function handleChange(ev) {
-    var value = ev.target.value;
+    if (!isSelfControlledComp) return onChange(ev);
+    var _value = ev.target.value;
 
-    if (value.length >= 1) {
+    if (_value.length >= 1) {
       delayedOnChange(ev);
-      setCurrentValue(value);
+      setCurrentValue(_value);
     } else {
       handleClear(ev);
     }
@@ -156,19 +208,26 @@ var SearchBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
     elevation: elevation ? 1 : 0,
     className: cx(className, classes.root, (_cx = {}, _defineProperty(_cx, classes.flat, !elevation), _defineProperty(_cx, classes.elevation, elevation), _defineProperty(_cx, classes.focused, isFocused), _defineProperty(_cx, classes.disabled, disabled), _cx)),
     ref: ref
-  }, props), /*#__PURE__*/React.createElement(Icon, {
+  }, props), type === 'button' ? /*#__PURE__*/React.createElement(ButtonBase, {
+    className: classes.buttonBase
+  }, icon && /*#__PURE__*/React.createElement(Icon, {
     className: classes.icon,
-    icon: MagnifierIcon
-  }), /*#__PURE__*/React.createElement(InputBase, {
+    icon: icon
+  }), typeof label === 'string' ? /*#__PURE__*/React.createElement(Typography, {
+    className: classes.typography
+  }, label) : label) : /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement(Icon, {
+    className: classes.icon,
+    icon: icon
+  }), /*#__PURE__*/React.createElement(InputBase, _extends({}, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.inputBase, {
     className: classes.inputBase,
     placeholder: disabled ? null : placeholder,
-    value: disabled ? placeholder : currentValue,
+    value: disabled ? placeholder : spreadValue,
     disabled: disabled,
     "aria-label": placeholder,
     onChange: handleChange,
     onFocus: handleFocus,
     onBlur: handleBlur
-  }), currentValue && /*#__PURE__*/React.createElement(IconButton, {
+  }))), spreadValue && !disabledClear && /*#__PURE__*/React.createElement(IconButton, {
     size: "medium",
     onClick: handleClear
   }, /*#__PURE__*/React.createElement(Icon, {
@@ -182,6 +241,10 @@ var SearchBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
 SearchBar.displayName = 'SearchBar';
 SearchBar.defaultProps = {
   elevation: true,
+  icon: MagnifierIcon,
+  size: 'small',
+  type: 'search',
+  disabledClear: false,
   defaultValue: '',
   onChange: function onChange() {},
   onFocus: function onFocus() {},
@@ -189,12 +252,32 @@ SearchBar.defaultProps = {
 };
 SearchBar.propTypes = {
   className: PropTypes.string,
+  type: PropTypes.oneOf(['button', 'search']),
+  icon: iconPropType,
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'auto']),
+  componentsProps: PropTypes.shape({
+    /** Props spread to InputBase component */
+    inputBase: PropTypes.object
+  }),
+
+  /** Used to control the component outside of it */
+  value: PropTypes.string,
+
+  /** Used only with self-controlled component */
   defaultValue: PropTypes.string,
+  disabledClear: PropTypes.bool,
   elevation: PropTypes.bool,
   placeholder: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
   disabled: PropTypes.bool,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func
 };
-export default withOnlyLocales(SearchBar);
+
+var SearchBarWithLocales = function SearchBarWithLocales(props) {
+  useExtendI18n(locales);
+  return /*#__PURE__*/React.createElement(SearchBar, props);
+};
+
+export default SearchBarWithLocales;