@rolster/react-components 18.15.12 → 18.15.14

package/dist/es/index.js

@@ -2073,7 +2073,6 @@ function useListControl({ suggestions, formControl }) {
     });
     const collection = useRef(new ListCollection([]));
     const position = useRef(0);
-    const changeInternal = useRef(false);
     const protectedValue = useRef();
     useEffect(() => {
         function onCloseSuggestions({ target }) {
@@ -2086,17 +2085,12 @@ function useListControl({ suggestions, formControl }) {
         };
     }, []);
     useEffect(() => {
-        formControl?.touch();
         setState((state) => ({
             ...state,
             higher: locationListCanTop(contentRef.current, listRef.current)
         }));
     }, [state.visible]);
     useEffect(() => {
-        if (changeInternal.current) {
-            changeInternal.current = false;
-            return;
-        }
         collection.current = new ListCollection(suggestions);
         refresh(collection.current, formControl?.value);
     }, [suggestions, formControl?.value]);
@@ -2106,12 +2100,13 @@ function useListControl({ suggestions, formControl }) {
         }
         const element = collection.find(state);
         if (element) {
+            protectedValue.current = undefined;
             return setValue(element.description);
         }
         if (!refreshProtected(collection)) {
             protectedValue.current = state;
             setValue('');
-            setFormState(undefined);
+            setFormValue(undefined);
         }
     }
     function refreshProtected(collection) {
@@ -2131,14 +2126,12 @@ function useListControl({ suggestions, formControl }) {
     function setValue(value) {
         setState((state) => ({ ...state, value }));
     }
-    function setFormState(value) {
-        if (formControl) {
-            changeInternal.current = true;
-            formControl.setValue(value);
-        }
+    function setFormValue(value) {
+        formControl?.setValue(value);
     }
     function setVisible(visible) {
         setState((state) => ({ ...state, visible }));
+        !visible && formControl?.touch();
     }
     function navigationInput(event) {
         if (state.visible) {
@@ -2167,7 +2160,7 @@ function useListControl({ suggestions, formControl }) {
         navigationElement,
         navigationInput,
         setFocused,
-        setFormState,
+        setFormValue,
         setValue,
         setVisible
     };
@@ -2184,7 +2177,7 @@ function useFieldAutocomplete({ disabled, formControl, onSelect, onValue, sugges
         previous: null
     });
     const listControl = useListControl({ suggestions, formControl });
-    const { inputRef, navigationElement, navigationInput, setFocused, setFormState, setValue, setVisible } = listControl;
+    const { inputRef, navigationElement, navigationInput, setFocused, setFormValue, setValue, setVisible } = listControl;
     useEffect(() => {
         refreshCoincidences(pattern, true);
     }, [suggestions]);
@@ -2219,7 +2212,7 @@ function useFieldAutocomplete({ disabled, formControl, onSelect, onValue, sugges
     function onClickAction() {
         setVisible(false);
         setValue('');
-        setFormState(undefined);
+        setFormValue(undefined);
         onValue && onValue(undefined);
     }
     function onClickBackdrop() {
@@ -2241,7 +2234,7 @@ function useFieldAutocomplete({ disabled, formControl, onSelect, onValue, sugges
             onSelect(value);
         }
         else {
-            setFormState(value);
+            setFormValue(value);
             setValue(description);
         }
         onValue && onValue(value);
@@ -2272,17 +2265,13 @@ function useFieldAutocomplete({ disabled, formControl, onSelect, onValue, sugges
     };
 }
 
-function RlsFieldAutocompleteTemplate({ render, suggestions, children, disabled, formControl, hiddenIcon, onSearch, onSelect, onValue, placeholder, rlsTheme, searching }) {
-    const fieldAutocomplete = useFieldAutocomplete({
-        suggestions,
-        disabled,
-        formControl,
-        onSelect,
-        onValue
-    });
+function RlsFieldAutocompleteTemplate(props) {
+    const fieldAutocomplete = useFieldAutocomplete(props);
+    const { render, children, disabled, formControl, hiddenIcon, onSearch, placeholder, rlsTheme, searching } = props;
     return (jsxRuntimeExports.jsxs("div", { ref: fieldAutocomplete.listControl.contentRef, className: renderClassStatus('rls-field-box', {
             disabled,
             focused: fieldAutocomplete.listControl.focused,
+            error: formControl?.wrong,
             selected: !!fieldAutocomplete.listControl.value
         }, 'rls-field-list rls-field-autocomplete'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: fieldAutocomplete.listControl.value, onClick: fieldAutocomplete.onClickControl }), !hiddenIcon && fieldAutocomplete.listControl.value && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: fieldAutocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: "trash-2" }) }))] }) }), jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
                     visible: fieldAutocomplete.listControl.visible,
@@ -2488,7 +2477,7 @@ function RlsFieldDateRange({ children, date: datePicker, disabled, formControl,
 
 function useFieldSelect({ suggestions, formControl, onSelect, onValue }) {
     const listControl = useListControl({ suggestions, formControl });
-    const { inputRef, visible, navigationElement, navigationInput, setFocused, setFormState, setValue, setVisible } = listControl;
+    const { inputRef, visible, navigationElement, navigationInput, setFocused, setFormValue, setValue, setVisible } = listControl;
     function onFocusInput() {
         setFocused(true);
     }
@@ -2537,7 +2526,7 @@ function useFieldSelect({ suggestions, formControl, onSelect, onValue }) {
             onSelect(value);
         }
         else {
-            setFormState(value);
+            setFormValue(value);
             setValue(description);
         }
         onValue && onValue(value);
@@ -2555,15 +2544,14 @@ function useFieldSelect({ suggestions, formControl, onSelect, onValue }) {
     };
 }
 
-function RlsFieldSelectTemplate({ render, suggestions, children, disabled, formControl, onSelect, onValue, placeholder, rlsTheme }) {
-    const fieldSelect = useFieldSelect({
-        suggestions,
-        disabled,
-        formControl,
-        onSelect,
-        onValue
-    });
-    return (jsxRuntimeExports.jsxs("div", { ref: fieldSelect.listControl.contentRef, className: renderClassStatus('rls-field-box', { focused: fieldSelect.listControl.focused, disabled }, 'rls-field-list rls-field-select'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { ref: fieldSelect.listControl.inputRef, className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: fieldSelect.listControl.value, onFocus: fieldSelect.onFocusInput, onBlur: fieldSelect.onBlurInput, onClick: fieldSelect.onClickInput, onKeyDown: fieldSelect.onKeydownInput }), jsxRuntimeExports.jsx("button", { className: renderClassStatus('rls-field-list__action', {
+function RlsFieldSelectTemplate(props) {
+    const fieldSelect = useFieldSelect(props);
+    const { render, suggestions, children, disabled, formControl, placeholder, rlsTheme } = props;
+    return (jsxRuntimeExports.jsxs("div", { ref: fieldSelect.listControl.contentRef, className: renderClassStatus('rls-field-box', {
+            focused: fieldSelect.listControl.focused,
+            error: formControl?.wrong,
+            disabled
+        }, 'rls-field-list rls-field-select'), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx("input", { ref: fieldSelect.listControl.inputRef, className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: fieldSelect.listControl.value, onFocus: fieldSelect.onFocusInput, onBlur: fieldSelect.onBlurInput, onClick: fieldSelect.onClickInput, onKeyDown: fieldSelect.onKeydownInput }), jsxRuntimeExports.jsx("button", { className: renderClassStatus('rls-field-list__action', {
                                 visible: fieldSelect.listControl.visible
                             }), disabled: disabled, onClick: fieldSelect.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
                     visible: fieldSelect.listControl.visible,