@bbl-digital/snorre 3.0.11 → 3.0.15

package/dist/bundle.js

@@ -30324,6 +30324,7 @@
     css,
     validation,
     invalidMessage,
+    autoFocus,
     onChange,
     onBlur
   }) => {
@@ -30421,6 +30422,7 @@
         type: "text",
         value: inputStateValue,
         disabled: disabled,
+        autoFocus: autoFocus,
         css: theme => [disabled && styles$7.disabled(theme), css && css],
         onChange: event => onInputChange(event, v => onChange && onChange(v)),
         onBlur: onBlur,
@@ -31850,41 +31852,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 => {
       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;
@@ -31902,9 +31908,8 @@
 
       if (props.fuzzy) {
         const fuzzyOptions = {
-          keys: [props.labelFromValues ?? 'label']
+          keys: [labelKey]
         };
-        setShowValues(Boolean(value));
         return matchSorter.matchSorter(props.values, value ?? '', fuzzyOptions);
       }
 
@@ -31933,11 +31938,11 @@
         });
       }
 
-      if (highlightedIndex === null || !inputValues?.length) {
+      if (highlightedIndex === null || !renderedValues?.length) {
         return;
       }
 
-      const item = inputValues[highlightedIndex];
+      const item = renderedValues[highlightedIndex];
       handleValueClick(item);
       setShowValues(false);
     };
@@ -31947,7 +31952,7 @@
       e.stopPropagation();
       if (!showValues) return;
 
-      if (highlightedIndex === null || !inputValues?.length) {
+      if (highlightedIndex === null || !renderedValues?.length) {
         return;
       }
 
@@ -31967,13 +31972,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;
@@ -32001,7 +32006,7 @@
         key
       } = e;
 
-      if (showValues && inputValues?.length) {
+      if (showValues && renderedValues?.length) {
         setHighlightedIndex(0);
       } else {
         setHighlightedIndex(null);

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 => {
     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;
@@ -62,9 +66,8 @@ const useAutocomplete = props => {
 
     if (props.fuzzy) {
       const fuzzyOptions = {
-        keys: [props.labelFromValues ?? 'label']
+        keys: [labelKey]
       };
-      setShowValues(Boolean(value));
       return matchSorter(props.values, value ?? '', fuzzyOptions);
     }
 
@@ -93,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);
   };
@@ -107,7 +110,7 @@ const useAutocomplete = props => {
     e.stopPropagation();
     if (!showValues) return;
 
-    if (highlightedIndex === null || !inputValues?.length) {
+    if (highlightedIndex === null || !renderedValues?.length) {
       return;
     }
 
@@ -127,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;
@@ -161,7 +164,7 @@ const useAutocomplete = props => {
       key
     } = e;
 
-    if (showValues && inputValues?.length) {
+    if (showValues && renderedValues?.length) {
       setHighlightedIndex(0);
     } else {
       setHighlightedIndex(null);

package/esm/core/Timepicker/index.js

@@ -18,6 +18,7 @@ const TimePicker = ({
   css,
   validation,
   invalidMessage,
+  autoFocus,
   onChange,
   onBlur
 }) => {
@@ -115,6 +116,7 @@ const TimePicker = ({
       type: "text",
       value: inputStateValue,
       disabled: disabled,
+      autoFocus: autoFocus,
       css: theme => [disabled && styles.disabled(theme), css && css],
       onChange: event => onInputChange(event, v => onChange && onChange(v)),
       onBlur: onBlur,

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;yBAkJjC,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,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 => {
     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;
@@ -62,9 +66,8 @@ const useAutocomplete = props => {
 
     if (props.fuzzy) {
       const fuzzyOptions = {
-        keys: [props.labelFromValues ?? 'label']
+        keys: [labelKey]
       };
-      setShowValues(Boolean(value));
       return matchSorter(props.values, value ?? '', fuzzyOptions);
     }
 
@@ -93,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);
   };
@@ -107,7 +110,7 @@ const useAutocomplete = props => {
     e.stopPropagation();
     if (!showValues) return;
 
-    if (highlightedIndex === null || !inputValues?.length) {
+    if (highlightedIndex === null || !renderedValues?.length) {
       return;
     }
 
@@ -127,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;
@@ -161,7 +164,7 @@ const useAutocomplete = props => {
       key
     } = e;
 
-    if (showValues && inputValues?.length) {
+    if (showValues && renderedValues?.length) {
       setHighlightedIndex(0);
     } else {
       setHighlightedIndex(null);

package/lib/core/Timepicker/index.d.ts

@@ -29,6 +29,8 @@ interface IProps {
     validation?: boolean;
     /** Invalid message */
     invalidMessage?: string;
+    /** If input field should have auto focus */
+    autoFocus?: boolean;
 }
 declare const TimePicker: React.FC<IProps>;
 export default TimePicker;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Timepicker/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAO,KAAgC,MAAM,OAAO,CAAA;AAapD,aAAK,YAAY,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;AAElD,UAAU,MAAM;IACd,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qBAAqB;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,6CAA6C;IAC7C,QAAQ,EAAE,YAAY,CAAA;IACtB,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IACxB,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,+FAA+F;IAC/F,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gBAAgB;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+BAA+B;IAC/B,GAAG,CAAC,EAAE,gBAAgB,CAAA;IACtB,0BAA0B;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,sBAAsB;IACtB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAwLhC,CAAA;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Timepicker/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAO,KAAgC,MAAM,OAAO,CAAA;AAapD,aAAK,YAAY,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;AAElD,UAAU,MAAM;IACd,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qBAAqB;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,6CAA6C;IAC7C,QAAQ,EAAE,YAAY,CAAA;IACtB,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IACxB,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,+FAA+F;IAC/F,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gBAAgB;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+BAA+B;IAC/B,GAAG,CAAC,EAAE,gBAAgB,CAAA;IACtB,0BAA0B;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,sBAAsB;IACtB,cAAc,CAAC,EAAE,MAAM,CAAA;IAEvB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CA0LhC,CAAA;AAED,eAAe,UAAU,CAAA"}

package/lib/core/Timepicker/index.js

@@ -18,6 +18,7 @@ const TimePicker = ({
   css,
   validation,
   invalidMessage,
+  autoFocus,
   onChange,
   onBlur
 }) => {
@@ -115,6 +116,7 @@ const TimePicker = ({
       type: "text",
       value: inputStateValue,
       disabled: disabled,
+      autoFocus: autoFocus,
       css: theme => [disabled && styles.disabled(theme), css && css],
       onChange: event => onInputChange(event, v => onChange && onChange(v)),
       onBlur: onBlur,

package/package.json

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