@rolster/react-components 18.15.30 → 18.15.32

package/dist/es/index.js

@@ -2065,15 +2065,15 @@ function useDatatable() {
 
 function useListController(props) {
     const { suggestions, formControl, value } = props;
+    const listIsOpen = useRef(false);
     const contentRef = useRef(null);
     const listRef = useRef(null);
     const inputRef = useRef(null);
-    const listIsOpen = useRef(false);
     const [state, setState] = useState({
         focused: false,
         higher: false,
         value: '',
-        listIsVisible: false
+        modalIsVisible: false
     });
     const collection = useRef(new ListCollection([]));
     const position = useRef(0);
@@ -2081,7 +2081,7 @@ function useListController(props) {
     useEffect(() => {
         function onCloseSuggestions({ target }) {
             !contentRef?.current?.contains(target) &&
-                setState((state) => ({ ...state, listIsVisible: false }));
+                setState((state) => ({ ...state, modalIsVisible: false }));
         }
         document.addEventListener('click', onCloseSuggestions);
         return () => {
@@ -2089,17 +2089,17 @@ function useListController(props) {
         };
     }, []);
     useEffect(() => {
-        if (!listIsOpen.current && state.listIsVisible) {
+        if (!listIsOpen.current && state.modalIsVisible) {
             listIsOpen.current = true;
         }
-        if (listIsOpen.current && !state.listIsVisible) {
+        if (listIsOpen.current && !state.modalIsVisible) {
             formControl?.touch();
         }
         setState((state) => ({
             ...state,
             higher: locationListCanTop(contentRef.current, listRef.current)
         }));
-    }, [state.listIsVisible]);
+    }, [state.modalIsVisible]);
     useEffect(() => {
         collection.current = new ListCollection(suggestions);
         refresh(collection.current, formControl?.value);
@@ -2139,7 +2139,7 @@ function useListController(props) {
         formControl?.setValue(value);
     }
     function navigationInput(event) {
-        if (state.listIsVisible) {
+        if (state.modalIsVisible) {
             const newPosition = navigationListFromInput({
                 content: contentRef.current,
                 event: event,
@@ -2173,8 +2173,8 @@ const DURATION_ANIMATION$1 = 240;
 const MAX_ELEMENTS = 6;
 function useFieldAutocomplete(props) {
     const controller = useListController(props);
-    const [pattern, setPattern] = useState('');
     const [coincidences, setCoincidences] = useState([]);
+    const [pattern, setPattern] = useState('');
     const currentStore = useRef({
         coincidences: [],
         pattern: '',
@@ -2189,7 +2189,7 @@ function useFieldAutocomplete(props) {
     }, [pattern]);
     function onClickControl() {
         if (!disabled) {
-            controller.setState({ listIsVisible: true });
+            controller.setState({ modalIsVisible: true });
             setTimeout(() => {
                 controller.inputRef?.current?.focus();
             }, DURATION_ANIMATION$1);
@@ -2205,7 +2205,7 @@ function useFieldAutocomplete(props) {
         switch (event.code) {
             case 'Escape':
             case 'Tab':
-                controller.setState({ listIsVisible: false });
+                controller.setState({ modalIsVisible: false });
                 break;
             default:
                 controller.navigationInput(event);
@@ -2213,12 +2213,12 @@ function useFieldAutocomplete(props) {
         }
     }
     function onClickAction() {
-        controller.setState({ listIsVisible: false, value: '' });
+        controller.setState({ modalIsVisible: false, value: '' });
         controller.setFormValue(props.value);
         props.onValue && props.onValue(props.value);
     }
     function onClickBackdrop() {
-        controller.setState({ listIsVisible: false });
+        controller.setState({ modalIsVisible: false });
     }
     function onClickElement(element) {
         return () => {
@@ -2234,11 +2234,11 @@ function useFieldAutocomplete(props) {
     }
     function onChange({ description, value }) {
         if (props.onSelect) {
-            controller.setState({ listIsVisible: false });
+            controller.setState({ modalIsVisible: false });
             value && props.onSelect(value);
         }
         else {
-            controller.setState({ listIsVisible: false, value: description });
+            controller.setState({ modalIsVisible: false, value: description });
             controller.setFormValue(value);
         }
         props.onValue && props.onValue(value);
@@ -2281,9 +2281,9 @@ function RlsFieldAutocompleteTemplate(props) {
         selected: !!controller.value
     }, 'rls-field-list rls-field-autocomplete');
     return (jsxRuntimeExports.jsxs("div", { ref: controller.contentRef, className: className, "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: controller.value, onClick: autocomplete.onClickControl }), !hiddenIcon && controller.value && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: "trash-2" }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
-                    visible: controller.listIsVisible,
+                    visible: controller.modalIsVisible,
                     higher: controller.higher,
-                    hide: !controller.listIsVisible
+                    hide: !controller.modalIsVisible
                 }), children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: controller.listRef, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: controller.inputRef, className: "rls-field-list__ul__control", type: "text", placeholder: reactI18n('listInputPlaceholder'), value: autocomplete.pattern, onChange: ({ target: { value } }) => {
                                                 autocomplete.setPattern(value);
                                             }, disabled: disabled || searching, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: autocomplete.onKeydownInput }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: () => {
@@ -2491,17 +2491,17 @@ function useFieldSelect(props) {
         controller.setState({ focused: false });
     }
     function onClickInput() {
-        controller.setState({ listIsVisible: true });
+        controller.setState({ modalIsVisible: true });
     }
     function onKeydownInput(event) {
         switch (event.code) {
             case 'Space':
             case 'Enter':
-                controller.setState({ listIsVisible: true });
+                controller.setState({ modalIsVisible: true });
                 break;
             case 'Escape':
             case 'Tab':
-                controller.setState({ listIsVisible: false });
+                controller.setState({ modalIsVisible: false });
                 break;
             default:
                 controller.navigationInput(event);
@@ -2509,11 +2509,12 @@ function useFieldSelect(props) {
         }
     }
     function onClickAction() {
-        controller.setState({ listIsVisible: !controller.listIsVisible });
-        !controller.listIsVisible && controller.inputRef?.current?.focus();
+        const modalIsVisible = !controller.modalIsVisible;
+        controller.setState({ modalIsVisible });
+        modalIsVisible && controller.inputRef?.current?.focus();
     }
     function onClickBackdrop() {
-        controller.setState({ listIsVisible: false });
+        controller.setState({ modalIsVisible: false });
     }
     function onClickElement(element) {
         return () => {
@@ -2530,12 +2531,12 @@ function useFieldSelect(props) {
     function onChange({ description, value }) {
         controller.inputRef?.current?.focus();
         if (props.onSelect) {
-            controller.setState({ listIsVisible: false });
+            controller.setState({ modalIsVisible: false });
             value && props.onSelect(value);
         }
         else {
             controller.setFormValue(value);
-            controller.setState({ listIsVisible: false, value: description });
+            controller.setState({ modalIsVisible: false, value: description });
         }
         props.onValue && props.onValue(value);
     }
@@ -2563,11 +2564,11 @@ function RlsFieldSelectTemplate(props) {
         error: formControl?.wrong
     }, 'rls-field-list rls-field-select');
     return (jsxRuntimeExports.jsxs("div", { ref: controller.contentRef, className: className, "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: controller.inputRef, className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: controller.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput }), jsxRuntimeExports.jsx("button", { className: renderClassStatus('rls-field-list__action', {
-                                visible: controller.listIsVisible
+                                visible: controller.modalIsVisible
                             }), disabled: disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
-                    visible: controller.listIsVisible,
+                    visible: controller.modalIsVisible,
                     higher: controller.higher,
-                    hide: !controller.listIsVisible
+                    hide: !controller.modalIsVisible
                 }), children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: controller.listRef, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: select.onClickElement(element), onKeyDown: select.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold truncate", children: reactI18n('listEmptyTitle') }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: select.onClickBackdrop })] })] }));
 }
 function RlsFieldSelect(props) {