@bbl-digital/snorre 3.0.6 → 3.0.9

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

@@ -38,8 +38,6 @@ const useAutocomplete = props => {
   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) {

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,
@@ -54,8 +58,9 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
   }, [showValues, valuesRef]);
   return _jsxs(_Fragment, {
     children: [_jsxs("label", {
-      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],
+      ref: inputWrapperRef,
       onClick: props.onLabelClick ? e => e.preventDefault() : undefined,
+      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],
       children: [_jsxs("span", {
         css: styles.label,
         children: [props.label && (props.onLabelClick ? _jsx(Link, {
@@ -113,7 +118,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) => {