add optional chaining to filter util and add FilterInput component

src/core/modules/components/FilterInput.jsx

@@ -18,13 +18,17 @@ export default memo(({ size, disabled, value, placeholder, loading, minLength =
    * to small by default.
    */
   switch (size) {
-    case 'small' || small:
+    case small:
+    case 'small':
       size = small; break;
-    case 'small' || medium:
+    case medium:
+    case 'medium':
       size = medium; break;
-    case 'small' || large:
+    case large:
+    case 'large':
       size = large; break;
-    default: size = small;
+    default:
+      size = small;
   }
 
   /**
@@ -36,13 +40,22 @@ export default memo(({ size, disabled, value, placeholder, loading, minLength =
   /**
    * 
    * @param {*} evt 
-   * @returns 
+   * @returns {void}
    */
   const handleOnChange = evt => {
-    evt.persist?.();
+    evt?.persist?.();
     return setQuery(evt?.currentTarget?.value);
   };
 
+  /**
+   * 
+   * @returns {void}
+   */
+  const handleClear = () => {
+    console.log('hi');
+    return setQuery('');
+  };
+
   useEffect(() => {
     if (typeof value !== 'undefined') {
       const evt = {
@@ -71,7 +84,7 @@ export default memo(({ size, disabled, value, placeholder, loading, minLength =
           placeholder={placeholder || Messages.SEARCH}
         />
         <div className={joinClassNames(iconLayout, size, { [pointer]: query?.length })} tabindex={query?.length ? '0' : '-1'} role='button'>
-          <div className={iconContainer}>
+          <div className={iconContainer} onClick={() => query?.length && handleClear()}>
             <Icon svgOnly name='Search' className={joinClassNames(icon, { [visible]: !query?.length })} />
             <Icon svgOnly name='Close' className={joinClassNames(clear, icon, { [visible]: query?.length })} />
           </div>

src/core/modules/components/index.js

@@ -172,6 +172,7 @@ getModuleByDisplayName('TabBar', true, true).then(TabBar => {
 
 getModuleByDisplayName('SearchBar', true, true).then(SearchBar => {
   this.SearchBar.Sizes = SearchBar.Sizes;
+  this.FilterInput.Sizes = SearchBar.Sizes;
 });
 
 getModuleByDisplayName('TextInput', true, true).then(TextInput => {

src/core/modules/components/settings/ButtonItem.jsx

@@ -2,7 +2,6 @@ import { getModule, getModuleByDisplayName } from '@vizality/webpack';
 import { joinClassNames } from '@vizality/util/dom';
 import { toKebabCase } from '@vizality/util/string';
 import { getCaller } from '@vizality/util/file';
-import { motion } from 'framer-motion';
 import React, { memo } from 'react';
 
 import { FormItem, FormText, Tooltip, Button, Divider } from '..';
@@ -27,14 +26,12 @@ export default memo(props => {
       >
         <div className='vz-settings-button-item-info'>
           <div className={labelRow}>
-            <motion.label layout='position' className={title}>
+            <label className={title}>
               {children}
-            </motion.label>
+            </label>
           </div>
           <FormText className={description}>
-            <motion.div layout='position'>
-              {note}
-            </motion.div>
+            {note}
           </FormText>
         </div>
         <Tooltip

src/core/modules/components/settings/SwitchItem.jsx

@@ -3,7 +3,6 @@ import { toKebabCase } from '@vizality/util/string';
 import { joinClassNames } from '@vizality/util/dom';
 import { getCaller } from '@vizality/util/file';
 import React, { memo } from 'react';
-import { motion } from 'framer-motion';
 
 import { Icon, AsyncComponent } from '..';
 
@@ -60,11 +59,10 @@ export default memo(({ separator = true, description, requiresRestart, info, swi
       onChange={requiresRestart ? handleRequiresRestart : onChange}
       className={joinClassNames('vz-settings-item', 'vz-settings-switch-item', className)}
       tooltipNote={switchTooltip}
-      note={<motion.div layout='position'>{description || other.note}</motion.div>} // props.note is only here for legacy reasons
+      note={description || other.note} // props.note is only here for legacy reasons
       {...other}
     >
-      <motion.div
-        layout='position'
+      <div
         className='vz-settings-switch-item-inner'
         id={id || `setting-switch-${toKebabCase(getCaller())}-${children.toString()}`}
       >
@@ -85,7 +83,7 @@ export default memo(({ separator = true, description, requiresRestart, info, swi
             className='vz-settings-item-restart-badge'
           />
         )}
-      </motion.div>
+      </div>
     </SwitchItem>
   );
 });

src/core/modules/util/Filter.js

@@ -53,7 +53,7 @@ export const createFilter = (term, keys, options = {}) => {
       return strings.some(value => {
         try {
           if (!caseSensitive) {
-            value = value.toLowerCase();
+            value = value?.toLowerCase();
           }
           if (exactMatch) {
             term = new RegExp(`^${term}$`, 'i');
@@ -75,31 +75,31 @@ export const createFilter = (term, keys, options = {}) => {
     if (term === '') { return true; }
 
     if (!options.caseSensitive) {
-      term = term.toLowerCase();
+      term = term?.toLowerCase();
     }
 
-    const terms = term.split(' ');
+    const terms = term?.split(' ');
 
     if (!keys) {
-      return terms.every(term => searchStrings([ item ], term, options));
+      return terms?.every(term => searchStrings([ item ], term, options));
     }
 
     if (typeof keys === 'string') {
-      keys = [ keys ]
+      keys = [ keys ];
     }
 
-    return terms.every(term => {
+    return terms?.every(term => {
       // allow search in specific fields with the syntax `field:search`
       let currentKeys;
-      if (term.indexOf(':') !== -1) {
-        const searchedField = term.split(':')[0];
-        [ , term ] = term.split(':');
-        currentKeys = keys.filter(key => key.toLowerCase().indexOf(searchedField) > -1);
+      if (term?.indexOf(':') !== -1) {
+        const searchedField = term?.split(':')[0];
+        [ , term ] = term?.split(':');
+        currentKeys = keys?.filter(key => key.toLowerCase()?.indexOf(searchedField) > -1);
       } else {
         currentKeys = keys;
       }
 
-      return currentKeys.some(key => {
+      return currentKeys?.some(key => {
         const values = getValuesForKey(key, item);
         return searchStrings(values, term, options);
       });