@bbl-digital/snorre 3.0.2 → 3.0.6

package/esm/core/Autocomplete/hooks/useAutocomplete.js

@@ -0,0 +1,236 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { matchSorter } from 'match-sorter';
+import { useEffect, useMemo, useState } from 'react';
+import { useDebounce } from '../../utils/debounce';
+
+const useAutocomplete = props => {
+  const [showValues, setShowValues] = useState(!!props.isOpen);
+  const [highlightedIndex, setHighlightedIndex] = useState(null);
+  const [value, setValueChanged] = useState(props.value ?? '');
+  const [inputDirty, setInputDirty] = useState(false);
+  const debouncedValue = useDebounce(value, props.debounceDelay ?? 0);
+  const [inputValues, setInputValues] = useState(props.values);
+
+  const handleValueClick = value => {
+    props.onSelectItem?.(value);
+    setShowValues(false);
+  };
+
+  const clearSelectedItem = () => handleValueClick({
+    [props.labelFromValues ?? 'label']: '',
+    [props.keyFromValues ?? 'key']: ''
+  });
+
+  const onInputChange = e => {
+    setInputDirty(true);
+    if (inputValues) setHighlightedIndex(0);
+    setValueChanged(e.target.value); // Should not use onChange whenever we have fuzzy search on
+
+    if (props.fuzzy) return;
+    if (props.onChange) props.onChange(e);
+  };
+
+  const handleOnInputClick = () => {
+    if (inputValues?.length) setHighlightedIndex(0);
+    setShowValues(true);
+  };
+
+  const onFuzzyBlur = e => {
+    // If the value of the input is changed, and does not match the value of the values array,
+    // we should revert back the input value to the original value
+    //What
+    // if (!e.target.value.length) clearSelectedItem()
+    if (e.target.value === props.value) return; // If target value is the same as a value from the values array, we should set the value for the user
+
+    if (inputValues?.length) {
+      const valueInInputValues = inputValues.find(item => item[props.labelFromValues ?? 'label'].length && item[props.labelFromValues ?? 'label'].toLowerCase() === e.target.value.toLowerCase());
+
+      if (valueInInputValues) {
+        const val = valueInInputValues[props.labelFromValues ?? 'label'];
+        setValueChanged(val);
+        handleValueClick(valueInInputValues);
+        return;
+      } // Otherwise we should return to the original input value
+
+
+      setValueChanged(props.value ?? '');
+    }
+  };
+
+  const renderedValues = useMemo(() => {
+    if (!props.values?.length) return [];
+
+    if (props.fuzzy) {
+      const fuzzyOptions = {
+        keys: [props.labelFromValues ?? 'label']
+      };
+      setShowValues(Boolean(value));
+      return matchSorter(props.values, value ?? '', fuzzyOptions);
+    }
+
+    return props.values;
+  }, [value]);
+
+  const handleEscape = () => {
+    setShowValues(false);
+    setHighlightedIndex(null);
+  };
+
+  const handleClear = () => {
+    clearSelectedItem();
+    handleEscape();
+  };
+
+  const handleEnter = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!showValues) return;
+
+    if (!inputValues?.length) {
+      // If there is no autocomplete value in the list, send object with just { value }
+      handleValueClick({
+        value
+      });
+    }
+
+    if (highlightedIndex === null || !inputValues?.length) {
+      return;
+    }
+
+    const item = inputValues[highlightedIndex];
+    handleValueClick(item);
+    setShowValues(false);
+  };
+
+  const handleUp = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!showValues) return;
+
+    if (highlightedIndex === null || !inputValues?.length) {
+      return;
+    }
+
+    const newHighlightIndex = highlightedIndex - 1;
+
+    if (newHighlightIndex < 0) {
+      setHighlightedIndex(null);
+      setShowValues(false);
+      return;
+    }
+
+    setHighlightedIndex(newHighlightIndex);
+  };
+
+  const handleDown = e => {
+    if (!showValues) return;
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (highlightedIndex === null || !inputValues?.length) {
+      return;
+    }
+
+    const newHighlightIndex = highlightedIndex + 1;
+
+    if (newHighlightIndex === inputValues.length) {
+      setHighlightedIndex(null);
+      setShowValues(false);
+      return;
+    }
+
+    setHighlightedIndex(newHighlightIndex);
+  };
+
+  const handleCustomOnKeyDown = e => {
+    const {
+      key
+    } = e;
+
+    if (key === 'Escape') {
+      handleEscape();
+      return;
+    }
+
+    props.onKeyDown?.(e);
+  }; // Makes it possible to navigate using keyboard shortcuts
+
+
+  const handleOnKeyDown = e => {
+    const {
+      key
+    } = e;
+
+    if (showValues && inputValues?.length) {
+      setHighlightedIndex(0);
+    } else {
+      setHighlightedIndex(null);
+    }
+
+    switch (key) {
+      case 'Enter':
+        handleEnter(e);
+        break;
+
+      case 'ArrowUp':
+        handleUp(e);
+        break;
+
+      case 'ArrowDown':
+      case 'Tab':
+        handleDown(e);
+        break;
+
+      case 'Escape':
+        handleEscape();
+        break;
+
+      default:
+        break;
+    }
+  }; // Handle debounce
+
+
+  useEffect(() => {
+    const handleDebounceChange = value => {
+      if (props.onDebounceChange && inputDirty) {
+        props.onDebounceChange(value);
+      }
+    };
+
+    handleDebounceChange(debouncedValue);
+  }, [debouncedValue]); // Change local open state if props.isOpen changes
+
+  useEffect(() => {
+    setShowValues(!!props.isOpen);
+  }, [props.isOpen]); // Update local values state if props.values changes
+
+  useEffect(() => {
+    setInputValues(props.values);
+  }, [props.values]); // Update local value if props.value changes
+
+  useEffect(() => {
+    const value = props.value ?? '';
+    setValueChanged(value);
+  }, [props.value]);
+  useEffect(() => {
+    if (!props.openCustomValueInputOnKeyPress) return;
+    if (value.length) setShowValues(true);
+  }, [value]);
+  return {
+    setShowValues,
+    handleClear,
+    handleValueClick,
+    onInputChange,
+    handleOnKeyDown,
+    handleCustomOnKeyDown,
+    handleOnInputClick,
+    onFuzzyBlur,
+    value,
+    highlightedIndex,
+    showValues,
+    renderedValues
+  };
+};
+
+export default useAutocomplete;

package/esm/core/Autocomplete/index.d.js

@@ -0,0 +1 @@
+export {};

package/esm/core/Autocomplete/index.js

@@ -1,192 +1,44 @@
 /** @jsxImportSource @emotion/react */
-import React, { createRef, useState } from 'react';
-import { styles, ErrorMessage } from './styles';
+import React, { createRef } from 'react';
+import { styles, ErrorMessage, Clear } from './styles';
 import { useEffect } from 'react';
-import { useDebounce } from '../utils/debounce';
 import IconErrorOutline from '../../icons/General/IconErrorOutline';
 import Spinner from '../Spinner';
 import useHandleOptionsHeight from './utils/useHandleOptionsHeight';
 import Link from '../Link';
+import IconClose from '../../icons/General/IconClose';
+import useAutocomplete from './hooks/useAutocomplete';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 const Autocomplete = /*#__PURE__*/React.forwardRef(({
-  onDebounceChange,
-  debounceDelay,
   height,
   css,
   ...props
 }, ref) => {
+  const valuesRef = /*#__PURE__*/createRef();
   const {
     optionsHeight,
     optionsRef
   } = useHandleOptionsHeight();
-  const valuesRef = /*#__PURE__*/createRef();
-  const [showValues, setShowValues] = useState(!!props.isOpen);
-  const [highlightedIndex, setHighlightedIndex] = useState(null);
-  const [value, setValueChanged] = useState(props.value ? props.value : '');
-  const [inputDirty, setInputDirty] = useState(false);
-  const debouncedValue = useDebounce(value, debounceDelay ? debounceDelay : 0);
-
-  const onInputChange = e => {
-    setInputDirty(true);
-    setValueChanged(e.target.value);
-    if (props.values) setHighlightedIndex(0);
-    if (props.onChange) props.onChange(e);
-  };
-
-  const handleOnInputClick = () => {
-    if (props.values?.length) setHighlightedIndex(0);
-    setShowValues(true);
-  };
-
-  const handleValueClick = value => {
-    setShowValues(false);
-    props.onSelectItem?.(value);
-  };
-
-  const handleEnter = e => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!showValues) return;
-
-    if (!props.values?.length) {
-      // If there is no autocomplete value in the list, send object with just { value }
-      props.onSelectItem?.({
-        value
-      });
-    }
-
-    if (highlightedIndex === null || !props.values?.length) {
-      return;
-    }
-
-    const item = props.values[highlightedIndex];
-    props.onSelectItem?.(item);
-    setShowValues(false);
-  };
-
-  const handleUp = e => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!showValues) return;
-
-    if (highlightedIndex === null || !props.values?.length) {
-      return;
-    }
-
-    const newHighlightIndex = highlightedIndex - 1;
-
-    if (newHighlightIndex < 0) {
-      setHighlightedIndex(null);
-      setShowValues(false);
-      return;
-    }
-
-    setHighlightedIndex(newHighlightIndex);
-  };
-
-  const handleDown = e => {
-    if (!showValues) return;
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (highlightedIndex === null || !props.values?.length) {
-      return;
-    }
-
-    const newHighlightIndex = highlightedIndex + 1;
-
-    if (newHighlightIndex === props.values.length) {
-      setHighlightedIndex(null);
-      setShowValues(false);
-      return;
-    }
-
-    setHighlightedIndex(newHighlightIndex);
-  };
-
-  const handleEscape = () => {
-    setShowValues(false);
-    setHighlightedIndex(null);
-  };
-
-  const handleCustomOnKeyDown = e => {
-    const {
-      key
-    } = e;
-
-    if (key === 'Escape') {
-      handleEscape();
-      return;
-    }
-
-    props.onKeyDown?.(e);
-  };
-
-  const handleOnKeyDown = e => {
-    const {
-      key
-    } = e;
-
-    if (showValues && props.values?.length) {
-      setHighlightedIndex(0);
-    } else {
-      setHighlightedIndex(null);
-    }
-
-    switch (key) {
-      case 'Enter':
-        handleEnter(e);
-        break;
-
-      case 'ArrowUp':
-        handleUp(e);
-        break;
-
-      case 'ArrowDown':
-      case 'Tab':
-        handleDown(e);
-        break;
-
-      case 'Escape':
-        handleEscape();
-        break;
-
-      default:
-        break;
-    }
-  }; // Handle debounce
-
-
-  useEffect(() => {
-    const handleDebounceChange = value => {
-      if (onDebounceChange && inputDirty) {
-        onDebounceChange(value);
-      }
-    };
-
-    handleDebounceChange(debouncedValue); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debouncedValue]);
-  useEffect(() => {
-    setShowValues(!!props.isOpen);
-  }, [props.isOpen]);
-  useEffect(() => {
-    const value = props.value ? props.value : '';
-    setValueChanged(value);
-  }, [props.value]);
-  useEffect(() => {
-    if (!props.openCustomValueInputOnKeyPress) return;
-    if (value.length) setShowValues(true); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value]);
+  const {
+    value,
+    highlightedIndex,
+    showValues,
+    renderedValues,
+    setShowValues,
+    handleClear,
+    handleOnInputClick,
+    handleCustomOnKeyDown,
+    handleOnKeyDown,
+    handleValueClick,
+    onInputChange,
+    onFuzzyBlur
+  } = useAutocomplete(props);
   useEffect(() => {
     const handleClickOutside = e => {
       const node = valuesRef.current;
-
-      if (node && node.contains(e.target)) {
-        return;
-      }
-
+      if (node && node.contains(e.target)) return;
       setShowValues(false);
     };
 
@@ -198,7 +50,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
 
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
-    };
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showValues, valuesRef]);
   return _jsxs(_Fragment, {
     children: [_jsxs("label", {
@@ -224,7 +76,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
             value: value,
             disabled: props.disabled,
             autoFocus: props.focus,
-            onBlur: props.onBlur,
+            onBlur: props.fuzzy ? onFuzzyBlur : props.onBlur,
             onFocus: props.onFocus,
             onChange: onInputChange,
             onKeyDown: props.onKeyDown ? handleCustomOnKeyDown : handleOnKeyDown,
@@ -234,6 +86,12 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
             autoComplete: "off",
             css: theme => [props.disabled && styles.disabled(theme)],
             children: React.Children.map(props.children, child => child || null)
+          }), props.clear && _jsx(Clear, {
+            nostyle: true,
+            onClick: handleClear,
+            children: _jsx(IconClose, {
+              size: 14
+            })
           }), props.loading && _jsx(Spinner, {
             size: 14
           }), props.actions && _jsx("div", {
@@ -253,17 +111,19 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
           children: props.invalidMessage
         })]
       })]
-    }), (props.values?.length || props.renderCustomValueInput) && !props.loading && showValues && _jsxs("div", {
+    }), (Boolean(props.values?.length) || props.renderCustomValueInput) && !props.loading && showValues && _jsxs("div", {
       ref: valuesRef,
       css: () => [!props.renderCustomValueInput && styles.listWrapper, props.dynamicallyPlaceInput && Boolean(optionsHeight) && styles.listWrapperTopPosition(optionsHeight), props.dynamicallyPlaceInput && Boolean(optionsHeight) && props.invalidMessage && styles.listWrapperTopPosition(optionsHeight + 30), props.inputValuesMaxWidth && styles.listWrapperMaxWidth(props.inputValuesMaxWidth)],
-      children: [props.values?.length && _jsx("ul", {
+      children: [Boolean(renderedValues?.length) && _jsx("ul", {
         css: theme => [styles.list(theme)],
-        children: props.values.map((item, index) => _jsx("li", {
-          tabIndex: 0,
-          css: index === highlightedIndex ? styles.highlightedItem : null,
-          onClick: () => handleValueClick(item),
-          children: props.labelFromValues ? item[props.labelFromValues] : item.label
-        }, props.keyFromValues ? item[props.keyFromValues] : item.key))
+        children: renderedValues.map((item, index) => {
+          return _jsx("li", {
+            tabIndex: 0,
+            css: index === highlightedIndex ? styles.highlightedItem : null,
+            onClick: () => handleValueClick(item),
+            children: props.labelFromValues ? item[props.labelFromValues] : item.label
+          }, props.keyFromValues ? item[props.keyFromValues] : item.key);
+        })
       }), props.renderCustomValueInput && _jsx("div", {
         children: props.renderCustomValueInput
       })]