@bbl-digital/snorre 3.0.10 → 3.0.14

package/dist/bundle.js

@@ -31850,41 +31850,45 @@
     const [inputDirty, setInputDirty] = React.useState(false);
     const debouncedValue = useDebounce(value, props.debounceDelay ?? 0);
     const [inputValues, setInputValues] = React.useState(props.values);
+    const labelKey = props.labelFromValues ?? 'label';
 
     const handleValueClick = value => {
-      setShowValues(false);
       props.onSelectItem?.(value);
+      if (props.fuzzy) setValueChanged(value[labelKey]);
+      setShowValues(false);
     };
 
     const clearSelectedItem = () => handleValueClick({
-      [props.labelFromValues ?? 'label']: '',
+      [labelKey]: '',
       [props.keyFromValues ?? 'key']: ''
     });
 
     const onInputChange = e => {
       setInputDirty(true);
-      if (inputValues) setHighlightedIndex(0);
+      if (renderedValues) setHighlightedIndex(0);
       setValueChanged(e.target.value); // Should not use onChange whenever we have fuzzy search on
 
-      if (props.fuzzy) return;
+      if (props.fuzzy) {
+        setShowValues(Boolean(value));
+        return;
+      }
+
       if (props.onChange) props.onChange(e);
     };
 
     const handleOnInputClick = () => {
-      if (inputValues?.length) setHighlightedIndex(0);
+      if (renderedValues?.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
       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());
+        const valueInInputValues = inputValues.find(item => item[labelKey].length && item[labelKey].toLowerCase() === e.target.value.toLowerCase());
 
         if (valueInInputValues) {
-          const val = valueInInputValues[props.labelFromValues ?? 'label'];
+          const val = valueInInputValues[labelKey];
           setValueChanged(val);
           handleValueClick(valueInInputValues);
           return;
@@ -31892,14 +31896,18 @@
       }
     };
 
+    const onFuzzyFocus = () => {
+      setValueChanged('');
+      if (props.values?.length) setShowValues(true);
+    };
+
     const renderedValues = React.useMemo(() => {
       if (!props.values?.length) return [];
 
       if (props.fuzzy) {
         const fuzzyOptions = {
-          keys: [props.labelFromValues ?? 'label']
+          keys: [labelKey]
         };
-        setShowValues(Boolean(value));
         return matchSorter.matchSorter(props.values, value ?? '', fuzzyOptions);
       }
 
@@ -31928,11 +31936,11 @@
         });
       }
 
-      if (highlightedIndex === null || !inputValues?.length) {
+      if (highlightedIndex === null || !renderedValues?.length) {
         return;
       }
 
-      const item = inputValues[highlightedIndex];
+      const item = renderedValues[highlightedIndex];
       handleValueClick(item);
       setShowValues(false);
     };
@@ -31942,7 +31950,7 @@
       e.stopPropagation();
       if (!showValues) return;
 
-      if (highlightedIndex === null || !inputValues?.length) {
+      if (highlightedIndex === null || !renderedValues?.length) {
         return;
       }
 
@@ -31962,13 +31970,13 @@
       e.preventDefault();
       e.stopPropagation();
 
-      if (highlightedIndex === null || !inputValues?.length) {
+      if (highlightedIndex === null || !renderedValues?.length) {
         return;
       }
 
       const newHighlightIndex = highlightedIndex + 1;
 
-      if (newHighlightIndex === inputValues.length) {
+      if (newHighlightIndex === renderedValues.length) {
         setHighlightedIndex(null);
         setShowValues(false);
         return;
@@ -31996,7 +32004,7 @@
         key
       } = e;
 
-      if (showValues && inputValues?.length) {
+      if (showValues && renderedValues?.length) {
         setHighlightedIndex(0);
       } else {
         setHighlightedIndex(null);
@@ -32058,6 +32066,7 @@
       handleCustomOnKeyDown,
       handleOnInputClick,
       onFuzzyBlur,
+      onFuzzyFocus,
       value,
       highlightedIndex,
       showValues,
@@ -32092,7 +32101,8 @@
       handleOnKeyDown,
       handleValueClick,
       onInputChange,
-      onFuzzyBlur
+      onFuzzyBlur,
+      onFuzzyFocus
     } = useAutocomplete(props);
     React.useEffect(() => {
       const handleClickOutside = e => {
@@ -32137,7 +32147,7 @@
               disabled: props.disabled,
               autoFocus: props.focus,
               onBlur: props.fuzzy ? onFuzzyBlur : props.onBlur,
-              onFocus: props.onFocus,
+              onFocus: props.fuzzy ? onFuzzyFocus : props.onFocus,
               onChange: onInputChange,
               onKeyDown: props.onKeyDown ? handleCustomOnKeyDown : handleOnKeyDown,
               onClick: handleOnInputClick,

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

@@ -10,41 +10,45 @@ const useAutocomplete = props => {
   const [inputDirty, setInputDirty] = useState(false);
   const debouncedValue = useDebounce(value, props.debounceDelay ?? 0);
   const [inputValues, setInputValues] = useState(props.values);
+  const labelKey = props.labelFromValues ?? 'label';
 
   const handleValueClick = value => {
-    setShowValues(false);
     props.onSelectItem?.(value);
+    if (props.fuzzy) setValueChanged(value[labelKey]);
+    setShowValues(false);
   };
 
   const clearSelectedItem = () => handleValueClick({
-    [props.labelFromValues ?? 'label']: '',
+    [labelKey]: '',
     [props.keyFromValues ?? 'key']: ''
   });
 
   const onInputChange = e => {
     setInputDirty(true);
-    if (inputValues) setHighlightedIndex(0);
+    if (renderedValues) setHighlightedIndex(0);
     setValueChanged(e.target.value); // Should not use onChange whenever we have fuzzy search on
 
-    if (props.fuzzy) return;
+    if (props.fuzzy) {
+      setShowValues(Boolean(value));
+      return;
+    }
+
     if (props.onChange) props.onChange(e);
   };
 
   const handleOnInputClick = () => {
-    if (inputValues?.length) setHighlightedIndex(0);
+    if (renderedValues?.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
     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());
+      const valueInInputValues = inputValues.find(item => item[labelKey].length && item[labelKey].toLowerCase() === e.target.value.toLowerCase());
 
       if (valueInInputValues) {
-        const val = valueInInputValues[props.labelFromValues ?? 'label'];
+        const val = valueInInputValues[labelKey];
         setValueChanged(val);
         handleValueClick(valueInInputValues);
         return;
@@ -52,14 +56,18 @@ const useAutocomplete = props => {
     }
   };
 
+  const onFuzzyFocus = () => {
+    setValueChanged('');
+    if (props.values?.length) setShowValues(true);
+  };
+
   const renderedValues = useMemo(() => {
     if (!props.values?.length) return [];
 
     if (props.fuzzy) {
       const fuzzyOptions = {
-        keys: [props.labelFromValues ?? 'label']
+        keys: [labelKey]
       };
-      setShowValues(Boolean(value));
       return matchSorter(props.values, value ?? '', fuzzyOptions);
     }
 
@@ -88,11 +96,11 @@ const useAutocomplete = props => {
       });
     }
 
-    if (highlightedIndex === null || !inputValues?.length) {
+    if (highlightedIndex === null || !renderedValues?.length) {
       return;
     }
 
-    const item = inputValues[highlightedIndex];
+    const item = renderedValues[highlightedIndex];
     handleValueClick(item);
     setShowValues(false);
   };
@@ -102,7 +110,7 @@ const useAutocomplete = props => {
     e.stopPropagation();
     if (!showValues) return;
 
-    if (highlightedIndex === null || !inputValues?.length) {
+    if (highlightedIndex === null || !renderedValues?.length) {
       return;
     }
 
@@ -122,13 +130,13 @@ const useAutocomplete = props => {
     e.preventDefault();
     e.stopPropagation();
 
-    if (highlightedIndex === null || !inputValues?.length) {
+    if (highlightedIndex === null || !renderedValues?.length) {
       return;
     }
 
     const newHighlightIndex = highlightedIndex + 1;
 
-    if (newHighlightIndex === inputValues.length) {
+    if (newHighlightIndex === renderedValues.length) {
       setHighlightedIndex(null);
       setShowValues(false);
       return;
@@ -156,7 +164,7 @@ const useAutocomplete = props => {
       key
     } = e;
 
-    if (showValues && inputValues?.length) {
+    if (showValues && renderedValues?.length) {
       setHighlightedIndex(0);
     } else {
       setHighlightedIndex(null);
@@ -221,6 +229,7 @@ const useAutocomplete = props => {
     handleCustomOnKeyDown,
     handleOnInputClick,
     onFuzzyBlur,
+    onFuzzyFocus,
     value,
     highlightedIndex,
     showValues,

package/esm/core/Autocomplete/index.js

@@ -37,7 +37,8 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
     handleOnKeyDown,
     handleValueClick,
     onInputChange,
-    onFuzzyBlur
+    onFuzzyBlur,
+    onFuzzyFocus
   } = useAutocomplete(props);
   useEffect(() => {
     const handleClickOutside = e => {
@@ -82,7 +83,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
             disabled: props.disabled,
             autoFocus: props.focus,
             onBlur: props.fuzzy ? onFuzzyBlur : props.onBlur,
-            onFocus: props.onFocus,
+            onFocus: props.fuzzy ? onFuzzyFocus : props.onFocus,
             onChange: onInputChange,
             onKeyDown: props.onKeyDown ? handleCustomOnKeyDown : handleOnKeyDown,
             onClick: handleOnInputClick,

package/lib/core/Autocomplete/hooks/useAutocomplete.d.ts

@@ -11,6 +11,7 @@ declare const useAutocomplete: (props: IProps) => {
     handleCustomOnKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     handleOnInputClick: () => void;
     onFuzzyBlur: (e: React.FocusEvent<HTMLInputElement, Element>) => void;
+    onFuzzyFocus: () => void;
     value: string;
     highlightedIndex: number | null;
     showValues: boolean;

package/lib/core/Autocomplete/hooks/useAutocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAutocomplete.d.ts","sourceRoot":"","sources":["../../../../src/packages/core/Autocomplete/hooks/useAutocomplete.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAE1D,QAAA,MAAM,eAAe,UAAW,MAAM;;;;;;uBAuBV,MAAM,WAAW,CAAC,gBAAgB,CAAC;yBA6IjC,mBAAmB,CAAC,gBAAgB,CAAC;+BAZ/B,mBAAmB,CAAC,gBAAgB,CAAC;;qBAhH/C,gBAAgB,CAAC,gBAAgB,EAAE,OAAO,CAAC;;;;;CAyMpE,CAAA;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"useAutocomplete.d.ts","sourceRoot":"","sources":["../../../../src/packages/core/Autocomplete/hooks/useAutocomplete.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAE1D,QAAA,MAAM,eAAe,UAAW,MAAM;;;;;;uBA2BV,MAAM,WAAW,CAAC,gBAAgB,CAAC;yBA6IjC,mBAAmB,CAAC,gBAAgB,CAAC;+BAZ/B,mBAAmB,CAAC,gBAAgB,CAAC;;qBA7G/C,gBAAgB,CAAC,gBAAgB,EAAE,OAAO,CAAC;;;;;;CAuMpE,CAAA;AAED,eAAe,eAAe,CAAA"}

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

@@ -10,41 +10,45 @@ const useAutocomplete = props => {
   const [inputDirty, setInputDirty] = useState(false);
   const debouncedValue = useDebounce(value, props.debounceDelay ?? 0);
   const [inputValues, setInputValues] = useState(props.values);
+  const labelKey = props.labelFromValues ?? 'label';
 
   const handleValueClick = value => {
-    setShowValues(false);
     props.onSelectItem?.(value);
+    if (props.fuzzy) setValueChanged(value[labelKey]);
+    setShowValues(false);
   };
 
   const clearSelectedItem = () => handleValueClick({
-    [props.labelFromValues ?? 'label']: '',
+    [labelKey]: '',
     [props.keyFromValues ?? 'key']: ''
   });
 
   const onInputChange = e => {
     setInputDirty(true);
-    if (inputValues) setHighlightedIndex(0);
+    if (renderedValues) setHighlightedIndex(0);
     setValueChanged(e.target.value); // Should not use onChange whenever we have fuzzy search on
 
-    if (props.fuzzy) return;
+    if (props.fuzzy) {
+      setShowValues(Boolean(value));
+      return;
+    }
+
     if (props.onChange) props.onChange(e);
   };
 
   const handleOnInputClick = () => {
-    if (inputValues?.length) setHighlightedIndex(0);
+    if (renderedValues?.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
     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());
+      const valueInInputValues = inputValues.find(item => item[labelKey].length && item[labelKey].toLowerCase() === e.target.value.toLowerCase());
 
       if (valueInInputValues) {
-        const val = valueInInputValues[props.labelFromValues ?? 'label'];
+        const val = valueInInputValues[labelKey];
         setValueChanged(val);
         handleValueClick(valueInInputValues);
         return;
@@ -52,14 +56,18 @@ const useAutocomplete = props => {
     }
   };
 
+  const onFuzzyFocus = () => {
+    setValueChanged('');
+    if (props.values?.length) setShowValues(true);
+  };
+
   const renderedValues = useMemo(() => {
     if (!props.values?.length) return [];
 
     if (props.fuzzy) {
       const fuzzyOptions = {
-        keys: [props.labelFromValues ?? 'label']
+        keys: [labelKey]
       };
-      setShowValues(Boolean(value));
       return matchSorter(props.values, value ?? '', fuzzyOptions);
     }
 
@@ -88,11 +96,11 @@ const useAutocomplete = props => {
       });
     }
 
-    if (highlightedIndex === null || !inputValues?.length) {
+    if (highlightedIndex === null || !renderedValues?.length) {
       return;
     }
 
-    const item = inputValues[highlightedIndex];
+    const item = renderedValues[highlightedIndex];
     handleValueClick(item);
     setShowValues(false);
   };
@@ -102,7 +110,7 @@ const useAutocomplete = props => {
     e.stopPropagation();
     if (!showValues) return;
 
-    if (highlightedIndex === null || !inputValues?.length) {
+    if (highlightedIndex === null || !renderedValues?.length) {
       return;
     }
 
@@ -122,13 +130,13 @@ const useAutocomplete = props => {
     e.preventDefault();
     e.stopPropagation();
 
-    if (highlightedIndex === null || !inputValues?.length) {
+    if (highlightedIndex === null || !renderedValues?.length) {
       return;
     }
 
     const newHighlightIndex = highlightedIndex + 1;
 
-    if (newHighlightIndex === inputValues.length) {
+    if (newHighlightIndex === renderedValues.length) {
       setHighlightedIndex(null);
       setShowValues(false);
       return;
@@ -156,7 +164,7 @@ const useAutocomplete = props => {
       key
     } = e;
 
-    if (showValues && inputValues?.length) {
+    if (showValues && renderedValues?.length) {
       setHighlightedIndex(0);
     } else {
       setHighlightedIndex(null);
@@ -221,6 +229,7 @@ const useAutocomplete = props => {
     handleCustomOnKeyDown,
     handleOnInputClick,
     onFuzzyBlur,
+    onFuzzyFocus,
     value,
     highlightedIndex,
     showValues,

package/lib/core/Autocomplete/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Autocomplete/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAa,YAAY,EAAE,MAAM,OAAO,CAAA;AAQtD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAG3C,oBAAY,GAAG,GAAG,YAAY,CAAC,gBAAgB,CAAC,CAAA;AAEhD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAoLjC,CAAA;AAEF,eAAe,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Autocomplete/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAa,YAAY,EAAE,MAAM,OAAO,CAAA;AAQtD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAG3C,oBAAY,GAAG,GAAG,YAAY,CAAC,gBAAgB,CAAC,CAAA;AAEhD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAqLjC,CAAA;AAEF,eAAe,YAAY,CAAA"}

package/lib/core/Autocomplete/index.js

@@ -37,7 +37,8 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
     handleOnKeyDown,
     handleValueClick,
     onInputChange,
-    onFuzzyBlur
+    onFuzzyBlur,
+    onFuzzyFocus
   } = useAutocomplete(props);
   useEffect(() => {
     const handleClickOutside = e => {
@@ -82,7 +83,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
             disabled: props.disabled,
             autoFocus: props.focus,
             onBlur: props.fuzzy ? onFuzzyBlur : props.onBlur,
-            onFocus: props.onFocus,
+            onFocus: props.fuzzy ? onFuzzyFocus : props.onFocus,
             onChange: onInputChange,
             onKeyDown: props.onKeyDown ? handleCustomOnKeyDown : handleOnKeyDown,
             onClick: handleOnInputClick,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbl-digital/snorre",
-  "version": "3.0.10",
+  "version": "3.0.14",
   "description": "Design library for BBL Digital",
   "license": "MIT",
   "main": "./lib/index.js",