@rolster/react-components 18.10.5 → 18.10.7

package/dist/cjs/index.js

@@ -1127,7 +1127,7 @@ const ELEMENT_SIZE_REM = 4;
 const BASE_SIZE_PX = 16;
 const ELEMENT_SIZE_PX = BASE_SIZE_PX * ELEMENT_SIZE_REM;
 const MAZ_LIST_SIZE_PX = BASE_SIZE_PX * LIST_SIZE_REM;
-function useListControl({ suggestions, formControl, withHigher = false }) {
+function useListControl({ suggestions, formControl, higher: withHigher = false }) {
     const boxContentRef = react.useRef(null);
     const listRef = react.useRef(null);
     const inputRef = react.useRef(null);
@@ -1219,10 +1219,7 @@ function useListControl({ suggestions, formControl, withHigher = false }) {
             setPositionElement(0);
             elements.item(0).focus();
             setTimeout(() => {
-                listRef?.current?.scroll({
-                    top: 0,
-                    behavior: 'smooth'
-                });
+                listRef?.current?.scroll({ top: 0, behavior: 'smooth' });
             }, 100);
         }
     }
@@ -1254,19 +1251,19 @@ function useListControl({ suggestions, formControl, withHigher = false }) {
         higher,
         inputRef,
         listRef,
-        value,
-        visible,
         navigationElement,
         navigationInput,
         setFocused,
         setValue,
-        setVisible
+        setVisible,
+        value,
+        visible
     };
 }
 
 const DURATION_ANIMATION$1 = 240;
 const MAX_ELEMENTS = 6;
-function useAutocompleteField({ suggestions, disabled, formControl, onSelect, onValue }) {
+function useAutocompleteField({ disabled, formControl, onSelect, onValue, suggestions }) {
     const [pattern, setPattern] = react.useState('');
     const [coincidences, setCoincidences] = react.useState([]);
     const [store, setStore] = react.useState({
@@ -1277,26 +1274,37 @@ function useAutocompleteField({ suggestions, disabled, formControl, onSelect, on
     const listControl = useListControl({
         suggestions,
         formControl,
-        withHigher: true
+        higher: true
     });
-    const { collection, inputRef, setFocused, setValue, setVisible, navigationElement, navigationInput } = listControl;
+    const { collection, inputRef, navigationElement, navigationInput, setFocused, setValue, setVisible } = listControl;
     const [changeInternal, setChangeInternal] = react.useState(false);
     react.useEffect(() => filterSuggestions(pattern, true), [suggestions]);
     react.useEffect(() => filterSuggestions(pattern), [pattern]);
     react.useEffect(() => {
-        changeInternal ? setChangeInternal(false) : resetState();
+        changeInternal ? setChangeInternal(false) : resetState(formControl?.state);
     }, [formControl?.state]);
-    react.useEffect(() => resetState(), [collection]);
-    function requestCurrentElement() {
-        return formControl?.state && collection.find(formControl.state);
-    }
-    function resetState() {
-        const element = requestCurrentElement();
-        setValue(element?.description || '');
-        if (!element) {
-            setChangeInternal(true);
-            formControl?.setState(undefined);
+    react.useEffect(() => resetCollection(collection, formControl?.state), [collection]);
+    function setFormState(value) {
+        setChangeInternal(true);
+        formControl?.setState(value);
+    }
+    function resetCollection(collection, state) {
+        if (state) {
+            const element = collection.find(state);
+            if (element) {
+                setValue(element.description);
+            }
+            else {
+                setValue('');
+                setFormState(undefined);
+            }
         }
+        else {
+            setValue('');
+        }
+    }
+    function resetState(state) {
+        setValue(state ? collection.find(state)?.description || '' : '');
     }
     function onClickControl() {
         if (!disabled) {
@@ -1327,8 +1335,7 @@ function useAutocompleteField({ suggestions, disabled, formControl, onSelect, on
         setVisible(false);
         setValue('');
         if (formControl) {
-            setChangeInternal(true);
-            formControl.setState(undefined);
+            setFormState(undefined);
         }
         if (onValue) {
             onValue(undefined);
@@ -1361,8 +1368,7 @@ function useAutocompleteField({ suggestions, disabled, formControl, onSelect, on
         }
         else {
             if (formControl) {
-                setChangeInternal(true);
-                formControl.setState(value);
+                setFormState(value);
             }
             setValue(description);
         }
@@ -1416,7 +1422,6 @@ function useAutocompleteField({ suggestions, disabled, formControl, onSelect, on
     return {
         coincidences,
         listControl,
-        pattern,
         onBlurInput,
         onClickAction,
         onClickBackdrop,
@@ -1425,6 +1430,7 @@ function useAutocompleteField({ suggestions, disabled, formControl, onSelect, on
         onFocusInput,
         onKeydownElement,
         onKeydownInput,
+        pattern,
         setPattern
     };
 }
@@ -1888,22 +1894,33 @@ function RlsFormNavigation({ children, visible, rlsTheme }) {
 
 function useSelectField({ suggestions, formControl, onSelect, onValue }) {
     const listControl = useListControl({ suggestions, formControl });
-    const { collection, inputRef, visible, setFocused, setValue, setVisible, navigationElement, navigationInput } = listControl;
+    const { collection, inputRef, visible, navigationElement, navigationInput, setFocused, setValue, setVisible } = listControl;
     const [changeInternal, setChangeInternal] = react.useState(false);
     react.useEffect(() => {
-        changeInternal ? setChangeInternal(false) : resetState();
+        changeInternal ? setChangeInternal(false) : resetState(formControl?.state);
     }, [formControl?.state]);
-    react.useEffect(() => resetState(), [collection]);
-    function requestCurrentElement() {
-        return formControl?.state && collection.find(formControl.state);
-    }
-    function resetState() {
-        const element = requestCurrentElement();
-        setValue(element?.description || '');
-        if (!element) {
-            setChangeInternal(true);
-            formControl?.setState(undefined);
+    react.useEffect(() => resetCollection(collection, formControl?.state), [collection]);
+    function setFormState(value) {
+        setChangeInternal(true);
+        formControl?.setState(value);
+    }
+    function resetCollection(collection, state) {
+        if (state) {
+            const element = collection.find(state);
+            if (element) {
+                setValue(element.description);
+            }
+            else {
+                setValue('');
+                setFormState(undefined);
+            }
         }
+        else {
+            setValue('');
+        }
+    }
+    function resetState(state) {
+        setValue(state ? collection.find(state)?.description || '' : '');
     }
     function onFocusInput() {
         setFocused(true);
@@ -1968,8 +1985,7 @@ function useSelectField({ suggestions, formControl, onSelect, onValue }) {
         }
         else {
             if (formControl) {
-                setChangeInternal(true);
-                formControl.setState(value);
+                setFormState(value);
             }
             setValue(description);
         }