cozy-ui 111.18.1 → 111.19.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [111.19.0](https://github.com/cozy/cozy-ui/compare/v111.18.1...v111.19.0) (2024-10-16)
+
+
+### Bug Fixes
+
+* **SearchBar:** Ref wasn't spread correctly ([15fc5fe](https://github.com/cozy/cozy-ui/commit/15fc5fe))
+
+
+### Features
+
+* **SearchBar:** Add `onClear` and `disabledFocus` props ([6c8cabf](https://github.com/cozy/cozy-ui/commit/6c8cabf))
+
 ## [111.18.1](https://github.com/cozy/cozy-ui/compare/v111.18.0...v111.18.1) (2024-10-14)
 
 

package/package.json

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

package/react/SearchBar/index.jsx

@@ -116,12 +116,14 @@ const SearchBar = forwardRef(
       label: labelProp,
       componentsProps,
       disabledClear,
+      disabledFocus,
       className,
       defaultValue,
       value,
       elevation,
       disabled,
       onChange,
+      onClear,
       onFocus,
       onBlur,
       ...props
@@ -155,6 +157,7 @@ const SearchBar = forwardRef(
 
     const handleClear = ev => {
       onChange({ ...ev, target: { ...ev.target, value: '' } })
+      onClear(ev)
       setCurrentValue('')
     }
 
@@ -175,7 +178,7 @@ const SearchBar = forwardRef(
         className={cx(className, classes.root, {
           [classes.flat]: !elevation,
           [classes.elevation]: elevation,
-          [classes.focused]: isFocused,
+          [classes.focused]: isFocused && !disabledFocus,
           [classes.disabled]: disabled
         })}
         ref={ref}
@@ -233,9 +236,11 @@ SearchBar.defaultProps = {
   size: 'small',
   type: 'search',
   disabledClear: false,
+  disabledFocus: false,
   defaultValue: '',
   onChange: () => {},
   onFocus: () => {},
+  onClear: () => {},
   onBlur: () => {}
 }
 
@@ -253,6 +258,7 @@ SearchBar.propTypes = {
   /** Used only with self-controlled component */
   defaultValue: PropTypes.string,
   disabledClear: PropTypes.bool,
+  disabledFocus: PropTypes.bool,
   elevation: PropTypes.bool,
   placeholder: PropTypes.string,
   label: PropTypes.oneOfType([
@@ -263,13 +269,14 @@ SearchBar.propTypes = {
   disabled: PropTypes.bool,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
+  onClear: PropTypes.func,
   onBlur: PropTypes.func
 }
 
-const SearchBarWithLocales = props => {
+const SearchBarWithLocales = forwardRef((props, ref) => {
   useExtendI18n(locales)
 
-  return <SearchBar {...props} />
-}
+  return <SearchBar {...props} ref={ref} />
+})
 
 export default SearchBarWithLocales

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", "icon", "size", "type", "label", "componentsProps", "disabledClear", "className", "defaultValue", "value", "elevation", "disabled", "onChange", "onFocus", "onBlur"];
+var _excluded = ["placeholder", "icon", "size", "type", "label", "componentsProps", "disabledClear", "disabledFocus", "className", "defaultValue", "value", "elevation", "disabled", "onChange", "onClear", "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; }
 
@@ -135,12 +135,14 @@ var SearchBar = /*#__PURE__*/forwardRef(function (_ref5, ref) {
       labelProp = _ref5.label,
       componentsProps = _ref5.componentsProps,
       disabledClear = _ref5.disabledClear,
+      disabledFocus = _ref5.disabledFocus,
       className = _ref5.className,
       defaultValue = _ref5.defaultValue,
       value = _ref5.value,
       elevation = _ref5.elevation,
       disabled = _ref5.disabled,
       onChange = _ref5.onChange,
+      onClear = _ref5.onClear,
       onFocus = _ref5.onFocus,
       onBlur = _ref5.onBlur,
       props = _objectWithoutProperties(_ref5, _excluded);
@@ -190,6 +192,7 @@ var SearchBar = /*#__PURE__*/forwardRef(function (_ref5, ref) {
         value: ''
       })
     }));
+    onClear(ev);
     setCurrentValue('');
   };
 
@@ -206,7 +209,7 @@ var SearchBar = /*#__PURE__*/forwardRef(function (_ref5, ref) {
   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)),
+    className: cx(className, classes.root, (_cx = {}, _defineProperty(_cx, classes.flat, !elevation), _defineProperty(_cx, classes.elevation, elevation), _defineProperty(_cx, classes.focused, isFocused && !disabledFocus), _defineProperty(_cx, classes.disabled, disabled), _cx)),
     ref: ref
   }, props), type === 'button' ? /*#__PURE__*/React.createElement(ButtonBase, {
     className: classes.buttonBase
@@ -245,9 +248,11 @@ SearchBar.defaultProps = {
   size: 'small',
   type: 'search',
   disabledClear: false,
+  disabledFocus: false,
   defaultValue: '',
   onChange: function onChange() {},
   onFocus: function onFocus() {},
+  onClear: function onClear() {},
   onBlur: function onBlur() {}
 };
 SearchBar.propTypes = {
@@ -266,18 +271,20 @@ SearchBar.propTypes = {
   /** Used only with self-controlled component */
   defaultValue: PropTypes.string,
   disabledClear: PropTypes.bool,
+  disabledFocus: 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,
+  onClear: PropTypes.func,
   onBlur: PropTypes.func
 };
-
-var SearchBarWithLocales = function SearchBarWithLocales(props) {
+var SearchBarWithLocales = /*#__PURE__*/forwardRef(function (props, ref) {
   useExtendI18n(locales);
-  return /*#__PURE__*/React.createElement(SearchBar, props);
-};
-
+  return /*#__PURE__*/React.createElement(SearchBar, _extends({}, props, {
+    ref: ref
+  }));
+});
 export default SearchBarWithLocales;