cozy-ui 111.13.0 → 111.15.0

package/transpiled/react/Icons/Stop.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/stop.svg` to regenerate;
+import React from 'react';
+
+function SvgStop(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 12 12"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M.75 1.5A.75.75 0 011.5.75h9a.75.75 0 01.75.75v9a.75.75 0 01-.75.75h-9a.75.75 0 01-.75-.75v-9z"
+  }));
+}
+
+export default SvgStop;

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;

package/transpiled/react/SearchBar/locales/withOnlyLocales.js

@@ -1,10 +1,10 @@
 var en = {
-  search: {
+  SearchBar: {
     placeholder: "Search"
   }
 };
 var fr = {
-  search: {
+  SearchBar: {
     placeholder: "Rechercher"
   }
 };

package/transpiled/react/providers/DemoProvider.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { CozyProvider } from 'cozy-client';
 import { BreakpointsProvider } from "cozy-ui/transpiled/react/providers/Breakpoints";
 import CozyTheme from "cozy-ui/transpiled/react/providers/CozyTheme";
-import { I18nContext } from "cozy-ui/transpiled/react/providers/I18n";
+import I18n from "cozy-ui/transpiled/react/providers/I18n";
 var defaultClient = {
   plugins: {
     realtime: {
@@ -30,15 +30,10 @@ var DemoProvider = function DemoProvider(_ref) {
   var lang = localStorage.getItem('lang') || 'en';
   return /*#__PURE__*/React.createElement(CozyProvider, {
     client: client || defaultClient
-  }, /*#__PURE__*/React.createElement(BreakpointsProvider, null, /*#__PURE__*/React.createElement(I18nContext.Provider, {
-    value: {
-      t: function t(x) {
-        return x;
-      },
-      f: function f() {
-        return '01 Jan. 2022';
-      },
-      lang: lang
+  }, /*#__PURE__*/React.createElement(BreakpointsProvider, null, /*#__PURE__*/React.createElement(I18n, {
+    lang: lang,
+    dictRequire: function dictRequire() {
+      return {};
     }
   }, /*#__PURE__*/React.createElement(CozyTheme, {
     variant: variant