cozy-ui 85.3.1 → 85.5.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [85.5.0](https://github.com/cozy/cozy-ui/compare/v85.4.0...v85.5.0) (2023-05-30)
+
+
+### Features
+
+* Add InputBase component ([aef4a77](https://github.com/cozy/cozy-ui/commit/aef4a77))
+* Add SearchBar component ([a46e3ee](https://github.com/cozy/cozy-ui/commit/a46e3ee))
+
+# [85.4.0](https://github.com/cozy/cozy-ui/compare/v85.3.1...v85.4.0) (2023-05-30)
+
+
+### Features
+
+* **Viewer:** To be consistent with recent wording changes ([36d7d78](https://github.com/cozy/cozy-ui/commit/36d7d78))
+
 ## [85.3.1](https://github.com/cozy/cozy-ui/compare/v85.3.0...v85.3.1) (2023-05-24)
 
 

package/package.json

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

package/react/InputBase/Readme.md

@@ -0,0 +1 @@
+Re-export of @material-ui. See [the official API](https://v4.mui.com/api/input-base/).

package/react/InputBase/index.js

@@ -0,0 +1,3 @@
+import InputBase from '@material-ui/core/InputBase'
+
+export default InputBase

package/react/SearchBar/Readme.md

@@ -0,0 +1,23 @@
+```jsx
+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'
+
+const initialVariants = [{ elevation: true }]
+
+;
+
+<DemoProvider>
+  <Variants initialVariants={initialVariants} screenshotAllVariants>
+    {variant => (
+      <>
+        <Typography className="u-mb-half">Normal</Typography>
+        <SearchBar className="u-mb-2" elevation={variant.elevation} />
+        <Typography className="u-mb-half">Disabled</Typography>
+        <SearchBar elevation={variant.elevation} disabled />
+      </>
+    )}
+  </Variants>
+</DemoProvider>
+```

package/react/SearchBar/index.jsx

@@ -0,0 +1,193 @@
+import React, { forwardRef, useState, useMemo } from 'react'
+import PropTypes from 'prop-types'
+import cx from 'classnames'
+import debounce from 'lodash/debounce'
+
+import withLocales from './locales/withLocales'
+import { makeStyles } from '../styles'
+import Paper from '../Paper'
+import InputBase from '../InputBase'
+import IconButton from '../IconButton'
+import Icon from '../Icon'
+import MagnifierIcon from '../Icons/Magnifier'
+import CrossCircleIcon from '../Icons/CrossCircle'
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    boxSizing: 'border-box',
+    position: 'relative',
+    alignItems: 'center',
+    height: 40,
+    flex: 1,
+    borderRadius: 99,
+    borderStyle: 'solid',
+    borderWidth: 1,
+    borderColor: 'transparent',
+    '&:hover': {
+      '&:not($disabled):not($focused)': {
+        '& $focusHighlight': {
+          opacity: 1
+        }
+      }
+    }
+  },
+  flat: {
+    backgroundColor: theme.palette.background.contrast
+  },
+  inputBase: {
+    flex: 1
+  },
+  icon: {
+    color: theme.palette.text.secondary,
+    padding: '0 1rem'
+  },
+  commonHighlight: {
+    overflow: 'hidden',
+    position: 'absolute',
+    top: -1,
+    right: -1,
+    bottom: -1,
+    left: -1,
+    borderRadius: 'inherit',
+    opacity: 0,
+    transition: theme.transitions.create('opacity', {
+      duration: theme.transitions.duration.short
+    })
+  },
+  focusHighlight: {
+    pointerEvents: 'none',
+    backgroundColor: theme.palette.action.hover
+  },
+  disableHighlight: {
+    backgroundColor: theme.palette.action.disabled
+  },
+  focused: {
+    borderColor: theme.palette.primary.main,
+    backgroundColor: theme.palette.background.paper
+  },
+  disabled: {
+    '& $icon': {
+      color: theme.palette.text.disabled
+    },
+    '& $disableHighlight': {
+      opacity: 1
+    }
+  }
+}))
+
+const SearchBar = forwardRef(
+  (
+    {
+      t,
+      placeholder: placeholderProp,
+      className,
+      defaultValue,
+      elevation,
+      disabled,
+      onChange,
+      onFocus,
+      onBlur,
+      ...props
+    },
+    ref
+  ) => {
+    const classes = useStyles()
+    const [currentValue, setCurrentValue] = useState(defaultValue)
+    const [isFocused, setIsFocused] = useState(false)
+
+    const placeholder = placeholderProp || t('search.placeholder')
+
+    const delayedOnChange = useMemo(
+      () => debounce(event => onChange(event), 375),
+      [onChange]
+    )
+
+    const handleChange = ev => {
+      const value = ev.target.value
+
+      if (value.length >= 1) {
+        delayedOnChange(ev)
+        setCurrentValue(value)
+      } else {
+        handleClear(ev)
+      }
+    }
+
+    const handleClear = ev => {
+      onChange({ ...ev, target: { ...ev.target, value: '' } })
+      setCurrentValue('')
+    }
+
+    const handleFocus = ev => {
+      onFocus(ev)
+      setIsFocused(true)
+    }
+
+    const handleBlur = ev => {
+      onBlur(ev)
+      setIsFocused(false)
+    }
+
+    return (
+      <Paper
+        component="form"
+        elevation={elevation ? 1 : 0}
+        className={cx(className, classes.root, {
+          [classes.flat]: !elevation,
+          [classes.elevation]: elevation,
+          [classes.focused]: isFocused,
+          [classes.disabled]: disabled
+        })}
+        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 && (
+          <IconButton size="medium" onClick={handleClear}>
+            <Icon icon={CrossCircleIcon} />
+          </IconButton>
+        )}
+        <span className={cx(classes.commonHighlight, classes.focusHighlight)} />
+        {disabled && (
+          <span
+            className={cx(classes.commonHighlight, classes.disableHighlight)}
+          />
+        )}
+      </Paper>
+    )
+  }
+)
+
+SearchBar.displayName = 'SearchBar'
+
+SearchBar.defaultProps = {
+  elevation: true,
+  defaultValue: '',
+  onChange: () => {},
+  onFocus: () => {},
+  onBlur: () => {}
+}
+
+SearchBar.propTypes = {
+  className: PropTypes.string,
+  defaultValue: PropTypes.string,
+  elevation: PropTypes.bool,
+  placeholder: PropTypes.string,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func
+}
+
+export default withLocales(SearchBar)

package/react/SearchBar/locales/en.json

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

package/react/SearchBar/locales/fr.json

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

package/react/SearchBar/locales/withLocales.jsx

@@ -0,0 +1,11 @@
+import withLocales from '../../I18n/withLocales'
+
+import en from './en.json'
+import fr from './fr.json'
+
+export const locales = {
+  en,
+  fr
+}
+
+export default withLocales(locales)

package/react/Viewer/locales/en.json

@@ -2,7 +2,7 @@
   "Viewer": {
     "actions": {
       "download": "Download",
-      "forward": "Forward"
+      "forward": "Send"
     },
     "alert": {
       "preparing": "Preparing your files…"

package/react/Viewer/locales/fr.json

@@ -2,7 +2,7 @@
   "Viewer": {
     "actions": {
       "download": "Télécharger",
-      "forward": "Transférer"
+      "forward": "Envoyer"
     },
     "alert": {
       "preparing": "Preparation de vos fichiers…"

package/react/index.js

@@ -118,3 +118,5 @@ export { default as Tab } from './Tab'
 export { default as CircularChart } from './CircularChart'
 export { default as Skeleton } from './Skeleton'
 export { default as InputAdornment } from './InputAdornment'
+export { default as InputBase } from './InputBase'
+export { default as SearchBar } from './SearchBar'

package/transpiled/react/InputBase/index.js

@@ -0,0 +1,2 @@
+import InputBase from '@material-ui/core/InputBase';
+export default InputBase;

package/transpiled/react/SearchBar/index.js

@@ -0,0 +1,197 @@
+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 = ["t", "placeholder", "className", "defaultValue", "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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React, { forwardRef, useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import debounce from 'lodash/debounce';
+import withLocales from "cozy-ui/transpiled/react/SearchBar/locales/withLocales";
+import { makeStyles } from "cozy-ui/transpiled/react/styles";
+import Paper from "cozy-ui/transpiled/react/Paper";
+import InputBase from "cozy-ui/transpiled/react/InputBase";
+import IconButton from "cozy-ui/transpiled/react/IconButton";
+import Icon from "cozy-ui/transpiled/react/Icon";
+import MagnifierIcon from "cozy-ui/transpiled/react/Icons/Magnifier";
+import CrossCircleIcon from "cozy-ui/transpiled/react/Icons/CrossCircle";
+var useStyles = makeStyles(function (theme) {
+  return {
+    root: {
+      display: 'flex',
+      boxSizing: 'border-box',
+      position: 'relative',
+      alignItems: 'center',
+      height: 40,
+      flex: 1,
+      borderRadius: 99,
+      borderStyle: 'solid',
+      borderWidth: 1,
+      borderColor: 'transparent',
+      '&:hover': {
+        '&:not($disabled):not($focused)': {
+          '& $focusHighlight': {
+            opacity: 1
+          }
+        }
+      }
+    },
+    flat: {
+      backgroundColor: theme.palette.background.contrast
+    },
+    inputBase: {
+      flex: 1
+    },
+    icon: {
+      color: theme.palette.text.secondary,
+      padding: '0 1rem'
+    },
+    commonHighlight: {
+      overflow: 'hidden',
+      position: 'absolute',
+      top: -1,
+      right: -1,
+      bottom: -1,
+      left: -1,
+      borderRadius: 'inherit',
+      opacity: 0,
+      transition: theme.transitions.create('opacity', {
+        duration: theme.transitions.duration.short
+      })
+    },
+    focusHighlight: {
+      pointerEvents: 'none',
+      backgroundColor: theme.palette.action.hover
+    },
+    disableHighlight: {
+      backgroundColor: theme.palette.action.disabled
+    },
+    focused: {
+      borderColor: theme.palette.primary.main,
+      backgroundColor: theme.palette.background.paper
+    },
+    disabled: {
+      '& $icon': {
+        color: theme.palette.text.disabled
+      },
+      '& $disableHighlight': {
+        opacity: 1
+      }
+    }
+  };
+});
+var SearchBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _cx;
+
+  var t = _ref.t,
+      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 classes = useStyles();
+
+  var _useState = useState(defaultValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentValue = _useState2[0],
+      setCurrentValue = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isFocused = _useState4[0],
+      setIsFocused = _useState4[1];
+
+  var placeholder = placeholderProp || t('search.placeholder');
+  var delayedOnChange = useMemo(function () {
+    return debounce(function (event) {
+      return onChange(event);
+    }, 375);
+  }, [onChange]);
+
+  var handleChange = function handleChange(ev) {
+    var value = ev.target.value;
+
+    if (value.length >= 1) {
+      delayedOnChange(ev);
+      setCurrentValue(value);
+    } else {
+      handleClear(ev);
+    }
+  };
+
+  var handleClear = function handleClear(ev) {
+    onChange(_objectSpread(_objectSpread({}, ev), {}, {
+      target: _objectSpread(_objectSpread({}, ev.target), {}, {
+        value: ''
+      })
+    }));
+    setCurrentValue('');
+  };
+
+  var handleFocus = function handleFocus(ev) {
+    onFocus(ev);
+    setIsFocused(true);
+  };
+
+  var handleBlur = function handleBlur(ev) {
+    onBlur(ev);
+    setIsFocused(false);
+  };
+
+  return /*#__PURE__*/React.createElement(Paper, _extends({
+    component: "form",
+    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, {
+    className: classes.icon,
+    icon: MagnifierIcon
+  }), /*#__PURE__*/React.createElement(InputBase, {
+    className: classes.inputBase,
+    placeholder: disabled ? null : placeholder,
+    value: disabled ? placeholder : currentValue,
+    disabled: disabled,
+    "aria-label": placeholder,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  }), currentValue && /*#__PURE__*/React.createElement(IconButton, {
+    size: "medium",
+    onClick: handleClear
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: CrossCircleIcon
+  })), /*#__PURE__*/React.createElement("span", {
+    className: cx(classes.commonHighlight, classes.focusHighlight)
+  }), disabled && /*#__PURE__*/React.createElement("span", {
+    className: cx(classes.commonHighlight, classes.disableHighlight)
+  }));
+});
+SearchBar.displayName = 'SearchBar';
+SearchBar.defaultProps = {
+  elevation: true,
+  defaultValue: '',
+  onChange: function onChange() {},
+  onFocus: function onFocus() {},
+  onBlur: function onBlur() {}
+};
+SearchBar.propTypes = {
+  className: PropTypes.string,
+  defaultValue: PropTypes.string,
+  elevation: PropTypes.bool,
+  placeholder: PropTypes.string,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func
+};
+export default withLocales(SearchBar);

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

@@ -0,0 +1,16 @@
+import withLocales from "cozy-ui/transpiled/react/I18n/withLocales";
+var en = {
+  search: {
+    placeholder: "Search"
+  }
+};
+var fr = {
+  search: {
+    placeholder: "Rechercher"
+  }
+};
+export var locales = {
+  en: en,
+  fr: fr
+};
+export default withLocales(locales);

package/transpiled/react/Viewer/hoc/withViewerLocales.js

@@ -3,7 +3,7 @@ var en = {
   Viewer: {
     actions: {
       download: "Download",
-      forward: "Forward"
+      forward: "Send"
     },
     alert: {
       preparing: "Preparing your files\u2026"
@@ -132,7 +132,7 @@ var fr = {
   Viewer: {
     actions: {
       download: "T\xE9l\xE9charger",
-      forward: "Transf\xE9rer"
+      forward: "Envoyer"
     },
     alert: {
       preparing: "Preparation de vos fichiers\u2026"

package/transpiled/react/index.js

@@ -91,4 +91,6 @@ export { default as Tabs } from './Tabs';
 export { default as Tab } from './Tab';
 export { default as CircularChart } from './CircularChart';
 export { default as Skeleton } from './Skeleton';
-export { default as InputAdornment } from './InputAdornment';
+export { default as InputAdornment } from './InputAdornment';
+export { default as InputBase } from './InputBase';
+export { default as SearchBar } from './SearchBar';