refactor!: update ChipInput usages

BREAKING CHANGE: bump @zextras/carbonio-design-system dep to 4.0.0
Refs: SHELL-180

package.json

@@ -103,7 +103,7 @@
 		"@reduxjs/toolkit": "^1 >=1.9",
 		"@sentry/browser": "^7.66.0",
 		"@tinymce/tinymce-react": "^4.3.0",
-		"@zextras/carbonio-design-system": "^3.0.2",
+		"@zextras/carbonio-design-system": "^4.0.0",
 		"@zextras/carbonio-ui-preview": "^1.2.2",
 		"darkreader": "^4.9.58",
 		"history": "^5.3.0",
@@ -124,7 +124,7 @@
 	},
 	"peerDependencies": {
 		"@reduxjs/toolkit": "^1 >=1.9",
-		"@zextras/carbonio-design-system": "^3",
+		"@zextras/carbonio-design-system": "^4",
 		"@zextras/carbonio-ui-preview": "^1",
 		"core-js": "^3.31.1",
 		"lodash": "^4.17.21",

src/search/search-bar.tsx

@@ -37,6 +37,8 @@ const OutlinedIconButton = styled(IconButton)`
 `;
 
 const StyledChipInput = styled(ChipInput)`
+	cursor: pointer;
+	overflow-x: hidden;
 	padding: 0 1rem;
 	&:hover {
 		outline: none;
@@ -388,12 +390,12 @@ export const SearchBar = (): React.JSX.Element => {
 									options={options}
 									placeholder={placeholder}
 									confirmChipOnBlur={false}
-									separators={['Enter', 'NumpadEnter', 'Comma', 'Space']}
+									separators={[
+										{ key: 'Enter', ctrlKey: false },
+										{ key: ',', ctrlKey: false },
+										{ key: ' ', ctrlKey: false }
+									]}
 									background={searchDisabled ? 'gray5' : 'gray6'}
-									style={{
-										cursor: 'pointer',
-										overflowX: 'hidden'
-									}}
 									onChange={onQueryChange}
 									onInputType={onInputType}
 									onInputTypeDebounce={0}