cozy-ui 111.13.0 → 111.14.0

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+# [111.14.0](https://github.com/cozy/cozy-ui/compare/v111.13.0...v111.14.0) (2024-10-03)
+
+
+### Features
+
+* **BottomSheet:** Add `hasMinHeightOffset` prop ([0e1af92](https://github.com/cozy/cozy-ui/commit/0e1af92))
+* **CozyDialogs:** Add `full` size ([d141068](https://github.com/cozy/cozy-ui/commit/d141068))
+* **CozyDialogs:** We can now propagates props to inner components ([01d9d48](https://github.com/cozy/cozy-ui/commit/01d9d48))
+* **SearchBar:** Add `auto` size and possibility to control it in the app ([038555f](https://github.com/cozy/cozy-ui/commit/038555f))
+* **SearchBar:** Add multiple props to improve component management ([13f8450](https://github.com/cozy/cozy-ui/commit/13f8450))
+
 # [111.13.0](https://github.com/cozy/cozy-ui/compare/v111.12.0...v111.13.0) (2024-09-25)
 
 

package/package.json

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

package/react/BottomSheet/BottomSheet.jsx

@@ -129,6 +129,7 @@ export const defaultBottomSheetSpringConfig = {
 const defaultSettings = {
   mediumHeightRatio: 0.75,
   mediumHeight: null,
+  hasMinHeightOffset: false,
   isOpenMin: false
 }
 
@@ -142,7 +143,7 @@ const BottomSheet = memo(
     offset,
     children
   }) => {
-    const { mediumHeightRatio, mediumHeight, isOpenMin } = {
+    const { mediumHeightRatio, mediumHeight, isOpenMin, hasMinHeightOffset } = {
       ...defaultSettings,
       ...settings
     }
@@ -244,6 +245,7 @@ const BottomSheet = memo(
         isClosable,
         isOpenMin,
         headerRef,
+        offset: hasMinHeightOffset ? offset : 0,
         actionButtonsHeight,
         actionButtonsBottomMargin
       })
@@ -418,6 +420,8 @@ BottomSheet.propTypes = {
     mediumHeight: PropTypes.number,
     /** 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/react/BottomSheet/README.md

@@ -46,6 +46,8 @@ import BottomSheet, { BottomSheetItem, BottomSheetTitle } from  'cozy-ui/transp
 * **settings** : `<object>` – Settings that can be modified
   * **mediumHeight** : `<number>` – Height in pixel of the middle snap point
   * **mediumHeightRatio** : `<number>` – Height of the middle snap point, expressed as a percentage of the viewport height
+  * **isOpenMin** : `<boolean>` – To open the BottomSheet at the minimum height, if have an header
+  * **hasMinHeightOffset** : `<boolean>` – To include the offset in the min height value
 * **backdrop** : `<boolean>` – To add a backdrop
 * **skipAnimation** : `<boolean>` – To remove animations
 * **offset** : `<number>` – Add an offset at the bottom

package/react/BottomSheet/helpers.js

@@ -57,6 +57,7 @@ export const computeMinHeight = ({
   isClosable,
   isOpenMin,
   headerRef,
+  offset = 0,
   actionButtonsHeight,
   actionButtonsBottomMargin
 }) => {
@@ -64,6 +65,7 @@ export const computeMinHeight = ({
 
   return (
     headerRef.current.offsetHeight +
+    offset +
     actionButtonsHeight +
     actionButtonsBottomMargin +
     (getFlagshipMetadata().navbarHeight || 0) +

package/react/BottomSheet/helpers.spec.js

@@ -152,6 +152,18 @@ describe('computeMinHeight', () => {
 
     expect(res).toBe(85)
   })
+
+  it('should return correct value with offset', () => {
+    const res = computeMinHeight({
+      isClosable: false,
+      headerRef: { current: { offsetHeight: 10 } },
+      offset: 10,
+      actionButtonsHeight: 20,
+      actionButtonsBottomMargin: 30
+    })
+
+    expect(res).toBe(95)
+  })
 })
 
 describe('setTopPosition', () => {

package/react/CozyDialogs/Readme.md

@@ -33,7 +33,7 @@ import Button from  'cozy-ui/transpiled/react/Buttons'
 
 * **componentsProps** : `<object>` – overriden properties of specific components
   * **dialogTitle** : `<object>` – DialogTitle component properties
-* **size** : `<string>` – Can be "s", "m" (default) or "l"
+* **size** : `<string>` – Can be "small", "medium" (default), "large" or "full"
 * **open** : `<boolean>` (required) – To open/close the modal
 * **disableTitleAutoPadding** : `<boolean>` (optional) – Disable title padding calculation that would prevent overlapping with close and back buttons
   * if set to `true` then you should handle those CSS properties by yourself or title will take 100% of width
@@ -205,6 +205,7 @@ const initialVariants = [{
   showActions: true,
   disableGutters: false,
   hideTitle: false,
+  fullScreen: false,
   withBackground: false
 }]
 
@@ -264,6 +265,11 @@ const initialVariants = [{
               label="Large"
               control={<Radio />}
             />
+            <FormControlLabel
+              value="full"
+              label="Full"
+              control={<Radio />}
+            />
           </RadioGroup>
         </FormControl>
         <div className="u-mt-1">
@@ -283,6 +289,7 @@ const initialVariants = [{
         {state.modalOpened && (
           <DialogComponent
             open
+            {...(variant.fullScreen && { fullScreen: true })}
             size={DialogComponent !== ConfirmDialog ? state.size : undefined}
             onClose={variant.withCloseButton ? handleClose : undefined}
             onBack={variant.withBackButton ? handleBack : undefined}

package/react/CozyDialogs/dialogPropTypes.js

@@ -1,7 +1,7 @@
 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/react/CozyDialogs/useCozyDialog.js

@@ -6,7 +6,7 @@ import useBreakpoints from '../providers/Breakpoints'
 import { makeStyles } from '../styles'
 
 let globalId = 0
-const modalSizes = ['small', 'medium', 'large']
+const modalSizes = ['small', 'medium', 'large', 'full']
 
 const useStyles = makeStyles({
   paper: {
@@ -92,6 +92,7 @@ const useCozyDialog = props => {
 
   const dividerClassName = 'divider--dialog'
   const dividerProps = {
+    ...componentsProps?.divider,
     classes: {
       root: dividerClassName
     }
@@ -99,12 +100,14 @@ const useCozyDialog = props => {
 
   const dialogActionsClassName = 'cozyDialogActions'
   const dialogActionsProps = {
+    ...componentsProps?.dialogActions,
     classes: {
       root: dialogActionsClassName
     }
   }
 
   const dialogContentProps = {
+    ...componentsProps?.dialogContent,
     classes: {
       root: cx({
         disableGutters

package/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

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

package/react/SearchBar/Readme.md

@@ -3,8 +3,15 @@ import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import Variants from 'cozy-ui/docs/components/Variants'
 import SearchBar from 'cozy-ui/transpiled/react/SearchBar'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import CloudIcon from 'cozy-ui/transpiled/react/Icons/Cloud'
+import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel'
+import RadioGroup from 'cozy-ui/transpiled/react/RadioGroup'
+import Radio from 'cozy-ui/transpiled/react/Radios'
+import FormControl from 'cozy-ui/transpiled/react/FormControl'
+import FormLabel from 'cozy-ui/transpiled/react/FormLabel'
 
-const initialVariants = [{ elevation: true }]
+const initialVariants = [{ elevation: true, button: false, customIcon: false, disabledClear: false }]
+initialState = { size: 'small' }
 
 ;
 
@@ -12,10 +19,56 @@ const initialVariants = [{ elevation: true }]
   <Variants initialVariants={initialVariants} screenshotAllVariants>
     {variant => (
       <>
+         <FormControl component="fieldset">
+          <FormLabel component="legend">Size</FormLabel>
+          <RadioGroup
+            aria-label="radio"
+            name="size"
+            row
+            value={state.size}
+            onChange={event => { setState({ size: event.target.value }) }}
+          >
+            <FormControlLabel
+              value="small"
+              label="Small"
+              control={<Radio />}
+            />
+            <FormControlLabel
+              value="medium"
+              label="Medium"
+              control={<Radio />}
+            />
+            <FormControlLabel
+              value="large"
+              label="Large"
+              control={<Radio />}
+            />
+            <FormControlLabel
+              value="auto"
+              label="Auto"
+              control={<Radio />}
+            />
+          </RadioGroup>
+        </FormControl>
         <Typography className="u-mb-half">Normal</Typography>
-        <SearchBar className="u-mb-2" elevation={variant.elevation} />
+        <SearchBar className="u-mb-2"
+          elevation={variant.elevation}
+          size={state.size}
+          disabledClear={variant.disabledClear}
+          type={variant.button ? "button" : "search"}
+          icon={variant.customIcon ? CloudIcon : undefined}
+          label={variant.button ? <Typography color="primary">This is a label</Typography> : undefined}
+        />
         <Typography className="u-mb-half">Disabled</Typography>
-        <SearchBar elevation={variant.elevation} disabled />
+        <SearchBar
+          disabled
+          elevation={variant.elevation}
+          size={state.size}
+          disabledClear={variant.disabledClear}
+          type={variant.button ? "button" : "search"}
+          icon={variant.customIcon ? CloudIcon : undefined}
+          label={variant.button ? <Typography color="primary">This is a label</Typography> : undefined}
+        />
       </>
     )}
   </Variants>

package/react/SearchBar/index.jsx

@@ -3,25 +3,42 @@ import debounce from 'lodash/debounce'
 import PropTypes from 'prop-types'
 import React, { forwardRef, useState, useMemo } from 'react'
 
-import withOnlyLocales from './locales/withOnlyLocales'
+import { locales } from './locales/withOnlyLocales'
+import ButtonBase from '../ButtonBase'
 import Icon from '../Icon'
+import { iconPropType } from '../Icon'
 import IconButton from '../IconButton'
 import CrossCircleIcon from '../Icons/CrossCircle'
 import MagnifierIcon from '../Icons/Magnifier'
 import InputBase from '../InputBase'
 import Paper from '../Paper'
-import { useI18n } from '../providers/I18n'
+import Typography from '../Typography'
+import { useI18n, useExtendI18n } from '../providers/I18n'
 import { makeStyles } from '../styles'
 
+const sizeToPixel = {
+  small: 40,
+  medium: 48,
+  large: 56,
+  auto: 'auto'
+}
+
+const radiusBySize = {
+  small: 20,
+  medium: 24,
+  large: 28,
+  auto: 24
+}
+
 const useStyles = makeStyles(theme => ({
   root: {
     display: 'flex',
     boxSizing: 'border-box',
     position: 'relative',
     alignItems: 'center',
-    height: 40,
+    height: ({ size }) => sizeToPixel[size],
     flex: 1,
-    borderRadius: 99,
+    borderRadius: ({ size }) => radiusBySize[size],
     borderStyle: 'solid',
     borderWidth: 1,
     borderColor: 'transparent',
@@ -37,7 +54,19 @@ const useStyles = makeStyles(theme => ({
     backgroundColor: theme.palette.background.contrast
   },
   inputBase: {
-    flex: 1
+    flex: 1,
+    paddingLeft: ({ icon }) => !icon && '1rem'
+  },
+  buttonBase: {
+    flex: 1,
+    justifyContent: 'start',
+    height: '100%',
+    borderRadius: 99
+  },
+  typography: {
+    color: 'currentColor',
+    opacity: 0.42,
+    paddingLeft: ({ icon }) => !icon && '1rem'
   },
   icon: {
     color: theme.palette.text.secondary,
@@ -81,8 +110,15 @@ const SearchBar = forwardRef(
   (
     {
       placeholder: placeholderProp,
+      icon,
+      size,
+      type,
+      label: labelProp,
+      componentsProps,
+      disabledClear,
       className,
       defaultValue,
+      value,
       elevation,
       disabled,
       onChange,
@@ -93,23 +129,25 @@ const SearchBar = forwardRef(
     ref
   ) => {
     const { t } = useI18n()
-    const classes = useStyles()
+    const classes = useStyles({ size, type, icon })
     const [currentValue, setCurrentValue] = useState(defaultValue)
     const [isFocused, setIsFocused] = useState(false)
 
-    const placeholder = placeholderProp || t('search.placeholder')
+    const placeholder = placeholderProp || t('SearchBar.placeholder')
+    const label = labelProp || t('SearchBar.placeholder')
+    const spreadValue = value || currentValue
+    const isSelfControlledComp = typeof value === 'undefined'
 
-    const delayedOnChange = useMemo(
-      () => debounce(event => onChange(event), 375),
-      [onChange]
-    )
+    const delayedOnChange = useMemo(() => debounce(onChange, 375), [onChange])
 
     const handleChange = ev => {
-      const value = ev.target.value
+      if (!isSelfControlledComp) return onChange(ev)
 
-      if (value.length >= 1) {
+      const _value = ev.target.value
+
+      if (_value.length >= 1) {
         delayedOnChange(ev)
-        setCurrentValue(value)
+        setCurrentValue(_value)
       } else {
         handleClear(ev)
       }
@@ -143,18 +181,32 @@ const SearchBar = forwardRef(
         ref={ref}
         {...props}
       >
-        <Icon className={classes.icon} icon={MagnifierIcon} />
-        <InputBase
-          className={classes.inputBase}
-          placeholder={disabled ? null : placeholder}
-          value={disabled ? placeholder : currentValue}
-          disabled={disabled}
-          aria-label={placeholder}
-          onChange={handleChange}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-        />
-        {currentValue && (
+        {type === 'button' ? (
+          <ButtonBase className={classes.buttonBase}>
+            {icon && <Icon className={classes.icon} icon={icon} />}
+            {typeof label === 'string' ? (
+              <Typography className={classes.typography}>{label}</Typography>
+            ) : (
+              label
+            )}
+          </ButtonBase>
+        ) : (
+          <>
+            {icon && <Icon className={classes.icon} icon={icon} />}
+            <InputBase
+              {...componentsProps?.inputBase}
+              className={classes.inputBase}
+              placeholder={disabled ? null : placeholder}
+              value={disabled ? placeholder : spreadValue}
+              disabled={disabled}
+              aria-label={placeholder}
+              onChange={handleChange}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+            />
+          </>
+        )}
+        {spreadValue && !disabledClear && (
           <IconButton size="medium" onClick={handleClear}>
             <Icon icon={CrossCircleIcon} />
           </IconButton>
@@ -174,6 +226,10 @@ SearchBar.displayName = 'SearchBar'
 
 SearchBar.defaultProps = {
   elevation: true,
+  icon: MagnifierIcon,
+  size: 'small',
+  type: 'search',
+  disabledClear: false,
   defaultValue: '',
   onChange: () => {},
   onFocus: () => {},
@@ -182,13 +238,35 @@ 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)
+const SearchBarWithLocales = props => {
+  useExtendI18n(locales)
+
+  return <SearchBar {...props} />
+}
+
+export default SearchBarWithLocales

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/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;

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