cozy-ui 111.18.1 → 111.20.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [111.20.0](https://github.com/cozy/cozy-ui/compare/v111.19.0...v111.20.0) (2024-10-17)
+
+
+### Features
+
+* Add tab icon ([4431b22](https://github.com/cozy/cozy-ui/commit/4431b22))
+
+# [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/assets/icons/ui/tab.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13 12v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1V3a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-1Zm1-9H5v1h6a2 2 0 0 1 2 2v4h1V3ZM2 6h9v7H2V6Z"/></svg>

package/package.json

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

package/react/Icon/Readme.md

@@ -294,6 +294,7 @@ import Support from 'cozy-ui/transpiled/react/Icons/Support'
 import Swap from 'cozy-ui/transpiled/react/Icons/Swap'
 import Sync from 'cozy-ui/transpiled/react/Icons/Sync'
 import SyncCozy from 'cozy-ui/transpiled/react/Icons/SyncCozy'
+import Tab from 'cozy-ui/transpiled/react/Icons/Tab'
 import Tag from 'cozy-ui/transpiled/react/Icons/Tag'
 import Target from 'cozy-ui/transpiled/react/Icons/Target'
 import Task from 'cozy-ui/transpiled/react/Icons/Task'
@@ -557,6 +558,7 @@ const icons = [
   Swap,
   Sync,
   SyncCozy,
+  Tab,
   Tag,
   Target,
   Task,
@@ -925,7 +927,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 
 const colors = ['#297EF2', '#08b442', '#B449E7', '#F52D2D', '#FF962F']
 let i = 0
-const availableIcons = ['album-add','album-remove','album','answer','apple','archive','arrowUp','attachment','attention','bank-check','bank','banking-add','banking','bell','benefit','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','carpooling','categories','certified','check-circle','check-list','check-square','check','checkbox','chess','child','circle-filled','clock','clock-outline','cloud-happy','cloud','collect','cocktail','comment','company','compare','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh', 'cozy-lock', 'cozy-text', 'cozy-release', 'credit-card-add','credit-card','credit','crop','cross-circle-outline','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','electric-bike','electric-car','electric-scooter','email-notification','email','eu','euro','exchange','eye-closed','eye','face-id','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder','forbidden','from-user','gear','globe','gouv','graph-circle','grid','group-list','groups','growth','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','justice','key','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','merge','moped','mosaic-min','motorcycle','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus', 'pop-inside', 'previous','printer','qualify','radio-checked','radio-unchecked','refresh','relationship','remboursement','rename','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','scooter','select-all','setting','share-circle','share','shield','shop','sound','spinner','sport-bag','stack','star','star-outline','stats','stop', 'subway', 'support', 'swap', 'sync-cozy','sync','tag','target','task','team','telecom','telephone','text-info','to-the-cloud','top','train','tram','trash','trophy', 'uncloud', 'unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','water','wrench-circle','work']
+const availableIcons = ['album-add','album-remove','album','answer','apple','archive','arrowUp','attachment','attention','bank-check','bank','banking-add','banking','bell','benefit','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','carpooling','categories','certified','check-circle','check-list','check-square','check','checkbox','chess','child','circle-filled','clock','clock-outline','cloud-happy','cloud','collect','cocktail','comment','company','compare','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh', 'cozy-lock', 'cozy-text', 'cozy-release', 'credit-card-add','credit-card','credit','crop','cross-circle-outline','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','electric-bike','electric-car','electric-scooter','email-notification','email','eu','euro','exchange','eye-closed','eye','face-id','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder','forbidden','from-user','gear','globe','gouv','graph-circle','grid','group-list','groups','growth','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','justice','key','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','merge','moped','mosaic-min','motorcycle','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus', 'pop-inside', 'previous','printer','qualify','radio-checked','radio-unchecked','refresh','relationship','remboursement','rename','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','scooter','select-all','setting','share-circle','share','shield','shop','sound','spinner','sport-bag','stack','star','star-outline','stats','stop', 'subway', 'support', 'swap', 'sync-cozy','sync','tab','tag','target','task','team','telecom','telephone','text-info','to-the-cloud','top','train','tram','trash','trophy', 'uncloud', 'unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','water','wrench-circle','work']
 ;
 <div style={{ fontSize: '2rem', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)' }}>
   <Sprite />

package/react/Icons/Tab.jsx

@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/tab.svg` to regenerate;
+import React from 'react'
+
+function SvgTab(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13 12v1a2 2 0 01-2 2H2a2 2 0 01-2-2V6a2 2 0 012-2h1V3a2 2 0 012-2h9a2 2 0 012 2v7a2 2 0 01-2 2h-1zm1-9H5v1h6a2 2 0 012 2v4h1V3zM2 6h9v7H2V6z"
+      />
+    </svg>
+  )
+}
+
+export default SvgTab

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