@bbl-digital/snorre 3.0.6 → 3.0.7

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

@@ -57,6 +57,11 @@ const useAutocomplete = props => {
     }
   };
 
+  const onFuzzyFocus = () => {
+    setValueChanged('');
+    if (props.values?.length) setShowValues(true);
+  };
+
   const renderedValues = useMemo(() => {
     if (!props.values?.length) return [];
 
@@ -226,6 +231,7 @@ const useAutocomplete = props => {
     handleCustomOnKeyDown,
     handleOnInputClick,
     onFuzzyBlur,
+    onFuzzyFocus,
     value,
     highlightedIndex,
     showValues,

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

@@ -0,0 +1,19 @@
+import { createRef, useEffect, useState } from 'react';
+
+const useHandleDimentions = () => {
+  const [height, setHeight] = useState(0);
+  const [width, setWidth] = useState(0);
+  const dimentionsRef = /*#__PURE__*/createRef();
+  useEffect(() => {
+    const rect = dimentionsRef.current?.getBoundingClientRect();
+    setHeight(rect?.height || 0);
+    setWidth(rect?.width || 0); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dimentionsRef.current]);
+  return {
+    height,
+    width,
+    dimentionsRef
+  };
+};
+
+export default useHandleDimentions;

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

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

package/esm/core/Autocomplete/index.js

@@ -4,7 +4,7 @@ import { styles, ErrorMessage, Clear } from './styles';
 import { useEffect } from 'react';
 import IconErrorOutline from '../../icons/General/IconErrorOutline';
 import Spinner from '../Spinner';
-import useHandleOptionsHeight from './utils/useHandleOptionsHeight';
+import useHandleDimentions from './hooks/useHandleDimentions';
 import Link from '../Link';
 import IconClose from '../../icons/General/IconClose';
 import useAutocomplete from './hooks/useAutocomplete';
@@ -18,9 +18,13 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   const valuesRef = /*#__PURE__*/createRef();
   const {
-    optionsHeight,
-    optionsRef
-  } = useHandleOptionsHeight();
+    height: optionsHeight,
+    dimentionsRef: optionsRef
+  } = useHandleDimentions();
+  const {
+    width: inputWrapperWidth,
+    dimentionsRef: inputWrapperRef
+  } = useHandleDimentions();
   const {
     value,
     highlightedIndex,
@@ -33,7 +37,8 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
     handleOnKeyDown,
     handleValueClick,
     onInputChange,
-    onFuzzyBlur
+    onFuzzyBlur,
+    onFuzzyFocus
   } = useAutocomplete(props);
   useEffect(() => {
     const handleClickOutside = e => {
@@ -54,6 +59,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
   }, [showValues, valuesRef]);
   return _jsxs(_Fragment, {
     children: [_jsxs("label", {
+      ref: inputWrapperRef,
       css: theme => [styles.default(theme), (props.invalid || props.invalidMessage) && styles.invalid(theme), props.validation && styles.validation, props.onLabelClick && styles.clickableLabel, height && styles.height(height), css && css],
       onClick: props.onLabelClick ? e => e.preventDefault() : undefined,
       children: [_jsxs("span", {
@@ -77,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,
@@ -113,7 +119,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
       })]
     }), (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)],
+      css: () => [!props.renderCustomValueInput && styles.listWrapper(inputWrapperWidth), props.dynamicallyPlaceInput && Boolean(optionsHeight) && styles.listWrapperTopPosition(optionsHeight), props.dynamicallyPlaceInput && Boolean(optionsHeight) && props.invalidMessage && styles.listWrapperTopPosition(optionsHeight + 30), props.inputValuesMaxWidth && styles.listWrapperMaxWidth(props.inputValuesMaxWidth)],
       children: [Boolean(renderedValues?.length) && _jsx("ul", {
         css: theme => [styles.list(theme)],
         children: renderedValues.map((item, index) => {