@bbl-digital/snorre 3.0.13 → 3.0.14

package/dist/bundle.js

@@ -31850,25 +31850,22 @@
     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 => {
       props.onSelectItem?.(value);
-
-      if (props.fuzzy) {
-        setValueChanged(value[props.labelFromValues ?? 'label']);
-      }
-
+      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) {
@@ -31880,23 +31877,18 @@
     };
 
     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 (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;
@@ -31914,7 +31906,7 @@
 
       if (props.fuzzy) {
         const fuzzyOptions = {
-          keys: [props.labelFromValues ?? 'label']
+          keys: [labelKey]
         };
         return matchSorter.matchSorter(props.values, value ?? '', fuzzyOptions);
       }
@@ -31944,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);
     };
@@ -31958,7 +31950,7 @@
       e.stopPropagation();
       if (!showValues) return;
 
-      if (highlightedIndex === null || !inputValues?.length) {
+      if (highlightedIndex === null || !renderedValues?.length) {
         return;
       }
 
@@ -31978,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;
@@ -32012,7 +32004,7 @@
         key
       } = e;
 
-      if (showValues && inputValues?.length) {
+      if (showValues && renderedValues?.length) {
         setHighlightedIndex(0);
       } else {
         setHighlightedIndex(null);

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

@@ -10,25 +10,22 @@ 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 => {
     props.onSelectItem?.(value);
-
-    if (props.fuzzy) {
-      setValueChanged(value[props.labelFromValues ?? 'label']);
-    }
-
+    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) {
@@ -40,23 +37,18 @@ const useAutocomplete = props => {
   };
 
   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 (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;
@@ -74,7 +66,7 @@ const useAutocomplete = props => {
 
     if (props.fuzzy) {
       const fuzzyOptions = {
-        keys: [props.labelFromValues ?? 'label']
+        keys: [labelKey]
       };
       return matchSorter(props.values, value ?? '', fuzzyOptions);
     }
@@ -104,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);
   };
@@ -118,7 +110,7 @@ const useAutocomplete = props => {
     e.stopPropagation();
     if (!showValues) return;
 
-    if (highlightedIndex === null || !inputValues?.length) {
+    if (highlightedIndex === null || !renderedValues?.length) {
       return;
     }
 
@@ -138,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;
@@ -172,7 +164,7 @@ const useAutocomplete = props => {
       key
     } = e;
 
-    if (showValues && inputValues?.length) {
+    if (showValues && renderedValues?.length) {
       setHighlightedIndex(0);
     } else {
       setHighlightedIndex(null);

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;;;;;;uBA4BV,MAAM,WAAW,CAAC,gBAAgB,CAAC;yBAqJjC,mBAAmB,CAAC,gBAAgB,CAAC;+BAZ/B,mBAAmB,CAAC,gBAAgB,CAAC;;qBArH/C,gBAAgB,CAAC,gBAAgB,EAAE,OAAO,CAAC;;;;;;CA+MpE,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,25 +10,22 @@ 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 => {
     props.onSelectItem?.(value);
-
-    if (props.fuzzy) {
-      setValueChanged(value[props.labelFromValues ?? 'label']);
-    }
-
+    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) {
@@ -40,23 +37,18 @@ const useAutocomplete = props => {
   };
 
   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 (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;
@@ -74,7 +66,7 @@ const useAutocomplete = props => {
 
     if (props.fuzzy) {
       const fuzzyOptions = {
-        keys: [props.labelFromValues ?? 'label']
+        keys: [labelKey]
       };
       return matchSorter(props.values, value ?? '', fuzzyOptions);
     }
@@ -104,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);
   };
@@ -118,7 +110,7 @@ const useAutocomplete = props => {
     e.stopPropagation();
     if (!showValues) return;
 
-    if (highlightedIndex === null || !inputValues?.length) {
+    if (highlightedIndex === null || !renderedValues?.length) {
       return;
     }
 
@@ -138,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;
@@ -172,7 +164,7 @@ const useAutocomplete = props => {
       key
     } = e;
 
-    if (showValues && inputValues?.length) {
+    if (showValues && renderedValues?.length) {
       setHighlightedIndex(0);
     } else {
       setHighlightedIndex(null);

package/package.json

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