@rolster/react-components 18.15.13 → 18.15.14

package/dist/es/index.js

@@ -2085,7 +2085,6 @@ function useListControl({ suggestions, formControl }) {
         };
     }, []);
     useEffect(() => {
-        state.visible && formControl?.touch();
         setState((state) => ({
             ...state,
             higher: locationListCanTop(contentRef.current, listRef.current)
@@ -2132,6 +2131,7 @@ function useListControl({ suggestions, formControl }) {
     }
     function setVisible(visible) {
         setState((state) => ({ ...state, visible }));
+        !visible && formControl?.touch();
     }
     function navigationInput(event) {
         if (state.visible) {
@@ -2265,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,
@@ -2548,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,