@rolster/react-components 18.13.3 → 18.13.5

package/dist/cjs/assets/{index-APeAYULv.css → index-LjAadYQE.css}

@@ -575,6 +575,8 @@
   column-gap: var(--rls-sizing-x2);
 }
 .rls-message-icon span {
+  font-size: var(--rls-caption-font-size);
+  letter-spacing: var(--rls-caption-letter-spacing);
   color: var(--rls-app-color-300);
 }
 

package/dist/cjs/index.js

@@ -176,7 +176,7 @@ function RlsLabel({ children, rlsTheme }) {
 }
 
 function RlsMessageIcon({ icon, children, rlsTheme }) {
-    return (jsxRuntime.jsxs("div", { className: "rls-message-icon", "rls-theme": rlsTheme, children: [icon && jsxRuntime.jsx(RlsIcon, { value: icon }), jsxRuntime.jsx("span", { className: "caption-regular truncate", children: children })] }));
+    return (jsxRuntime.jsxs("div", { className: "rls-message-icon", "rls-theme": rlsTheme, children: [icon && jsxRuntime.jsx(RlsIcon, { value: icon }), jsxRuntime.jsx("span", { className: "truncate", children: children })] }));
 }
 
 function RlsPoster({ children, rlsTheme }) {
@@ -1371,41 +1371,63 @@ const MAX_ELEMENTS = 6;
 function useAutocompleteField({ disabled, formControl, onSelect, onValue, suggestions }) {
     const [pattern, setPattern] = react.useState('');
     const [coincidences, setCoincidences] = react.useState([]);
-    const [store, setStore] = react.useState({
+    const currentStore = react.useRef({
         pattern: '',
         coincidences: [],
         previous: null
     });
     const listControl = useListControl({ suggestions, formControl });
     const { collection, inputRef, navigationElement, navigationInput, setFocused, setValue, setVisible } = listControl;
+    const initializedState = react.useRef(false);
+    const initializedCollection = react.useRef(false);
     const changeInternal = react.useRef(false);
-    react.useEffect(() => filterSuggestions(pattern, true), [suggestions]);
-    react.useEffect(() => filterSuggestions(pattern), [pattern]);
     react.useEffect(() => {
+        refreshCoincidences(pattern, true);
+    }, [suggestions]);
+    react.useEffect(() => {
+        refreshCoincidences(pattern);
+    }, [pattern]);
+    react.useEffect(() => {
+        if (!initializedState.current || !initializedCollection.current) {
+            initializedState.current = true;
+            return;
+        }
         if (changeInternal.current) {
             changeInternal.current = false;
+            return;
         }
-        else {
-            resetState(formControl?.state);
-        }
+        refresh(collection, formControl?.state);
     }, [formControl?.state]);
-    react.useEffect(() => resetCollection(collection, formControl?.state), [collection]);
+    react.useEffect(() => {
+        if (!initializedCollection.current || !initializedState.current) {
+            initializedCollection.current = true;
+            return;
+        }
+        refresh(collection, formControl?.state);
+    }, [collection]);
+    function refresh(collection, state) {
+        if (!state) {
+            return setValue('');
+        }
+        const element = collection.find(state);
+        if (element) {
+            return setValue(element.description);
+        }
+        setValue('');
+        setFormState(undefined);
+    }
     function setFormState(value) {
         if (formControl) {
             changeInternal.current = true;
             formControl.setState(value);
         }
     }
-    function resetCollection(collection, state) {
-        setValue(state ? collection.find(state)?.description || '' : '');
-    }
-    function resetState(state) {
-        resetCollection(collection, state);
-    }
     function onClickControl() {
         if (!disabled) {
             setVisible(true);
-            setTimeout(() => inputRef?.current?.focus(), DURATION_ANIMATION$1);
+            setTimeout(() => {
+                inputRef?.current?.focus();
+            }, DURATION_ANIMATION$1);
         }
     }
     function onFocusInput() {
@@ -1459,15 +1481,15 @@ function useAutocompleteField({ disabled, formControl, onSelect, onValue, sugges
             onValue(value);
         }
     }
-    function filterSuggestions(pattern, reboot = false) {
-        const result = createStoreAutocomplete({
+    function refreshCoincidences(pattern, reboot = false) {
+        const { collection, store } = createStoreAutocomplete({
             pattern,
             suggestions,
             reboot,
-            store
+            store: currentStore.current
         });
-        setCoincidences(result.collection.slice(0, MAX_ELEMENTS));
-        setStore(result.store);
+        currentStore.current = store;
+        setCoincidences(collection.slice(0, MAX_ELEMENTS));
     }
     return {
         coincidences,
@@ -1807,7 +1829,7 @@ function RlsDateField({ children, date, disabled, formControl, maxDate, minDate,
             setModalIsVisible(true);
         }
     }
-    return (jsxRuntime.jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: renderClassStatus('rls-box-field', { disabled }), children: [children && jsxRuntime.jsx("label", { className: "rls-box-field__label", children: children }), jsxRuntime.jsx("div", { className: "rls-box-field__component", children: jsxRuntime.jsxs("div", { className: "rls-box-field__body", children: [jsxRuntime.jsx("input", { className: "rls-date-field__control", type: "text", value: value && helpersDate.dateFormatTemplate(value, DATE_RANGE_FORMAT), readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntime.jsx("button", { className: "rls-date-field__action", onClick: onClean, disabled: disabled, children: jsxRuntime.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), formControl?.touched && formControl?.error && (jsxRuntime.jsx("div", { className: "rls-box-field__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }), jsxRuntime.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntime.jsx(RlsDatePicker, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value, type }) => {
+    return (jsxRuntime.jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: renderClassStatus('rls-box-field', { disabled }), children: [children && jsxRuntime.jsx("label", { className: "rls-box-field__label", children: children }), jsxRuntime.jsx("div", { className: "rls-box-field__component", children: jsxRuntime.jsxs("div", { className: "rls-box-field__body", children: [jsxRuntime.jsx("input", { className: "rls-date-field__control", type: "text", value: value ? helpersDate.dateFormatTemplate(value, DATE_RANGE_FORMAT) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntime.jsx("button", { className: "rls-date-field__action", onClick: onClean, disabled: disabled, children: jsxRuntime.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), formControl?.touched && formControl?.error && (jsxRuntime.jsx("div", { className: "rls-box-field__error", children: jsxRuntime.jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }), jsxRuntime.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntime.jsx(RlsDatePicker, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value, type }) => {
                         if (type !== PickerListenerType.Cancel) {
                             onChange(value, true);
                         }
@@ -1893,7 +1915,7 @@ function RlsDateRangeField({ children, date: datePicker, disabled, formControl,
             setModalIsVisible(true);
         }
     }
-    return (jsxRuntime.jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: "rls-box-field", children: [children && jsxRuntime.jsx("label", { className: "rls-box-field__label", children: children }), jsxRuntime.jsx("div", { className: "rls-box-field__component", children: jsxRuntime.jsxs("div", { className: "rls-box-field__body", children: [jsxRuntime.jsx("input", { className: "rls-date-field__control", type: "text", value: value && rangeFormatTemplate(value), readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntime.jsx("button", { className: "rls-date-field__action", onClick: onClickAction, disabled: disabled, children: jsxRuntime.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) })] }), jsxRuntime.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntime.jsx(RlsDateRangePicker, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value }) => {
+    return (jsxRuntime.jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: renderClassStatus('rls-box-field', { disabled }), children: [children && jsxRuntime.jsx("label", { className: "rls-box-field__label", children: children }), jsxRuntime.jsx("div", { className: "rls-box-field__component", children: jsxRuntime.jsxs("div", { className: "rls-box-field__body", children: [jsxRuntime.jsx("input", { className: "rls-date-field__control", type: "text", value: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsxRuntime.jsx("button", { className: "rls-date-field__action", onClick: onClickAction, disabled: disabled, children: jsxRuntime.jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) })] }), jsxRuntime.jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntime.jsx(RlsDateRangePicker, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value }) => {
                         if (value) {
                             setValue(value);
                         }
@@ -1908,28 +1930,44 @@ function RlsFormNavigation({ children, visible, rlsTheme }) {
 function useSelectField({ suggestions, formControl, onSelect, onValue }) {
     const listControl = useListControl({ suggestions, formControl });
     const { collection, inputRef, visible, navigationElement, navigationInput, setFocused, setValue, setVisible } = listControl;
+    const initializedState = react.useRef(false);
+    const initializedCollection = react.useRef(false);
     const changeInternal = react.useRef(false);
     react.useEffect(() => {
+        if (!initializedState.current || !initializedCollection.current) {
+            initializedState.current = true;
+            return;
+        }
         if (changeInternal.current) {
             changeInternal.current = false;
+            return;
         }
-        else {
-            resetState(formControl?.state);
-        }
+        refresh(collection, formControl?.state);
     }, [formControl?.state]);
-    react.useEffect(() => resetCollection(collection, formControl?.state), [collection]);
+    react.useEffect(() => {
+        if (!initializedCollection.current || !initializedState.current) {
+            initializedCollection.current = true;
+            return;
+        }
+        refresh(collection, formControl?.state);
+    }, [collection]);
+    function refresh(collection, state) {
+        if (!state) {
+            return setValue('');
+        }
+        const element = collection.find(state);
+        if (element) {
+            return setValue(element.description);
+        }
+        setValue('');
+        setFormState(undefined);
+    }
     function setFormState(value) {
         if (formControl) {
             changeInternal.current = true;
             formControl.setState(value);
         }
     }
-    function resetCollection(collection, state) {
-        setValue(state ? collection.find(state)?.description || '' : '');
-    }
-    function resetState(state) {
-        resetCollection(collection, state);
-    }
     function onFocusInput() {
         setFocused(true);
     }
@@ -1955,9 +1993,8 @@ function useSelectField({ suggestions, formControl, onSelect, onValue }) {
         }
     }
     function onClickAction() {
-        const newVisible = !visible;
-        setVisible(newVisible);
-        if (newVisible) {
+        setVisible(!visible);
+        if (!visible) {
             inputRef?.current?.focus();
         }
     }