@rolster/react-components 18.15.30 → 18.15.32

package/dist/cjs/index.js

@@ -2067,15 +2067,15 @@ function useDatatable() {
 
 function useListController(props) {
     const { suggestions, formControl, value } = props;
+    const listIsOpen = require$$0.useRef(false);
     const contentRef = require$$0.useRef(null);
     const listRef = require$$0.useRef(null);
     const inputRef = require$$0.useRef(null);
-    const listIsOpen = require$$0.useRef(false);
     const [state, setState] = require$$0.useState({
         focused: false,
         higher: false,
         value: '',
-        listIsVisible: false
+        modalIsVisible: false
     });
     const collection = require$$0.useRef(new components.ListCollection([]));
     const position = require$$0.useRef(0);
@@ -2083,7 +2083,7 @@ function useListController(props) {
     require$$0.useEffect(() => {
         function onCloseSuggestions({ target }) {
             !contentRef?.current?.contains(target) &&
-                setState((state) => ({ ...state, listIsVisible: false }));
+                setState((state) => ({ ...state, modalIsVisible: false }));
         }
         document.addEventListener('click', onCloseSuggestions);
         return () => {
@@ -2091,17 +2091,17 @@ function useListController(props) {
         };
     }, []);
     require$$0.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: components.locationListCanTop(contentRef.current, listRef.current)
         }));
-    }, [state.listIsVisible]);
+    }, [state.modalIsVisible]);
     require$$0.useEffect(() => {
         collection.current = new components.ListCollection(suggestions);
         refresh(collection.current, formControl?.value);
@@ -2141,7 +2141,7 @@ function useListController(props) {
         formControl?.setValue(value);
     }
     function navigationInput(event) {
-        if (state.listIsVisible) {
+        if (state.modalIsVisible) {
             const newPosition = components.navigationListFromInput({
                 content: contentRef.current,
                 event: event,
@@ -2175,8 +2175,8 @@ const DURATION_ANIMATION$1 = 240;
 const MAX_ELEMENTS = 6;
 function useFieldAutocomplete(props) {
     const controller = useListController(props);
-    const [pattern, setPattern] = require$$0.useState('');
     const [coincidences, setCoincidences] = require$$0.useState([]);
+    const [pattern, setPattern] = require$$0.useState('');
     const currentStore = require$$0.useRef({
         coincidences: [],
         pattern: '',
@@ -2191,7 +2191,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);
@@ -2207,7 +2207,7 @@ function useFieldAutocomplete(props) {
         switch (event.code) {
             case 'Escape':
             case 'Tab':
-                controller.setState({ listIsVisible: false });
+                controller.setState({ modalIsVisible: false });
                 break;
             default:
                 controller.navigationInput(event);
@@ -2215,12 +2215,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 () => {
@@ -2236,11 +2236,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);
@@ -2283,9 +2283,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: () => {
@@ -2493,17 +2493,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);
@@ -2511,11 +2511,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 () => {
@@ -2532,12 +2533,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);
     }
@@ -2565,11 +2566,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) {