add FilterInput component, rename Icon component rawSVG prop to svgOnly

src/core/builtins/commands/index.js

@@ -389,10 +389,10 @@ export default class Commands extends Builtin {
               )}
               {commandIcon && !commandImage && (
                 <Icon
-                  rawSVG={true}
                   className='vz-command-icon'
                   name={commandIcon}
                   size='32'
+                  svgOnly
                 />
               )}
             </div>

src/core/modules/components/FilterInput.jsx

@@ -0,0 +1,82 @@
+import React, { memo, useEffect, useState } from 'react';
+import { joinClassNames } from '@vizality/util/dom';
+import { getModule } from '@vizality/webpack';
+import { Messages } from '@vizality/i18n';
+
+import { Icon } from '.';
+
+/**
+ * @component
+ * @returns {}
+ */
+export default memo(({ size, disabled, value, loading, caseSensitive, sortResults, minLength = 4, debounce = 200, filterKeys, fuzzy, inputClassName, className, onChange, ...other }) => {
+  const [ query, setQuery ] = useState(value || '');
+  const { container, inner, disabled: _disabled, small, medium, large, input, clear, iconLayout, iconContainer, icon, visible, pointer } = getModule('container', 'inner', 'small', 'input', 'clear');
+
+  /**
+   * Check if size prop matches one of the available sizes, if it doesn't, set it
+   * to small by default.
+   */
+  switch (size) {
+    case 'small' || small:
+      size = small; break;
+    case 'small' || medium:
+      size = medium; break;
+    case 'small' || large:
+      size = large; break;
+    default: size = small;
+  }
+
+  /**
+   * Set up a debounce timeout to only perform the search query every x
+   * milliseconds. Especially useful for API calls.
+   */
+  const debounceTimeout = setTimeout(() => onChange(query), debounce);
+
+  /**
+   * 
+   * @param {*} evt 
+   * @returns 
+   */
+  const handleOnChange = evt => {
+    evt.persist?.();
+    return setQuery(evt?.currentTarget?.value);
+  };
+
+  useEffect(() => {
+    if (typeof value !== 'undefined') {
+      const evt = {
+        currentTarget: {
+          value
+        }
+      };
+      handleOnChange(evt);
+    }
+  }, [ value ]);
+
+  /**
+   * Clear the debounce timeout on dismount.
+   */
+  useEffect(() => {
+    return () => clearTimeout(debounceTimeout);
+  }, [ debounceTimeout ]);
+
+  return (
+    <div className={joinClassNames(container, size, className, { [_disabled]: disabled })} {...other}>
+      <div className={inner}>
+        <input
+          className={joinClassNames(input, inputClassName)}
+          onChange={handleOnChange}
+          value={query}
+          placeholder={Messages.SEARCH}
+        />
+        <div className={joinClassNames(iconLayout, size, { [pointer]: query?.length })} tabindex={query?.length ? '0' : '-1'} role='button'>
+          <div className={iconContainer}>
+            <Icon svgOnly name='Search' className={joinClassNames(icon, { [visible]: !query?.length })} />
+            <Icon svgOnly name='Close' className={joinClassNames(clear, icon, { [visible]: query?.length })} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});

src/core/modules/components/Icon.jsx

@@ -14,10 +14,10 @@ import { Messages } from '@vizality/i18n';
 
 import { Clickable, Flex, Tooltip as TooltipContainer } from '.';
 
-/** @private */
+/**
+ * @private
+ */
 const _labels = [ 'Component', 'Icon' ];
-const _log = (...message) => log({ labels: _labels, message });
-const _warn = (...message) => warn({ labels: _labels, message });
 const _error = (...message) => error({ labels: _labels, message });
 
 export const Icons = {};
@@ -192,7 +192,7 @@ export default memo(props => {
     tooltipPosition = 'top',
     onClick,
     onContextMenu,
-    rawSVG = false
+    svgOnly = false
   } = props;
 
   try {
@@ -211,14 +211,14 @@ export default memo(props => {
     }
 
     const isClickable = Boolean(onClick || onContextMenu);
-    const exposeProps = excludeProperties(props, 'name', 'icon', 'size', 'width', 'height', 'className', 'iconClassName', 'color', 'tooltip', 'tooltipColor', 'tooltipPosition', 'onClick', 'onContextMenu', 'rawSVG');
+    const exposeProps = excludeProperties(props, 'name', 'icon', 'size', 'width', 'height', 'className', 'iconClassName', 'color', 'tooltip', 'tooltipColor', 'tooltipPosition', 'onClick', 'onContextMenu', 'svgOnly');
 
     const renderIcon = () => {
-      // !rawSVG
-      if (!rawSVG) {
-        // !rawSVG and tooltip
+      // !svgOnly
+      if (!svgOnly) {
+        // !svgOnly and tooltip
         if (tooltip) {
-          // !rawSVG and tooltip and clickable
+          // !svgOnly and tooltip and clickable
           if (isClickable) {
             return (
               <TooltipContainer
@@ -243,7 +243,7 @@ export default memo(props => {
               </TooltipContainer>
             );
           }
-          // !rawSVG and tooltip and !clickable
+          // !svgOnly and tooltip and !clickable
           return (
             <TooltipContainer
               className={joinClassNames(className, 'vz-icon-wrapper')}
@@ -262,7 +262,7 @@ export default memo(props => {
             </TooltipContainer>
           );
         }
-        // !rawSVG and !tooltip and clickable
+        // !svgOnly and !tooltip and clickable
         if (isClickable) {
           return (
             <Clickable
@@ -281,7 +281,7 @@ export default memo(props => {
             </Clickable>
           );
         }
-        // !rawSVG and !tooltip and !clickable
+        // !svgOnly and !tooltip and !clickable
         return (
           <div className={joinClassNames(className, 'vz-icon-wrapper')}>
             <SVG
@@ -295,7 +295,7 @@ export default memo(props => {
           </div>
         );
       }
-      // rawSVG
+      // svgOnly
       return (
         <SVG
           vz-icon={name}

src/core/modules/components/index.js

@@ -77,6 +77,7 @@ export { default as OverflowTooltip } from './OverflowTooltip';
 export { default as StickyWrapper } from './StickyWrapper';
 export { default as ColorPicker } from './ColorPicker';
 export { default as PopupWindow } from './PopupWindow';
+export { default as FilterInput } from './FilterInput';
 export { default as ErrorState } from './ErrorState';
 export { default as CodeBlock } from './CodeBlock';
 export { default as Markdown } from './Markdown';