@rolster/react-components 18.18.2 → 18.19.0

package/dist/es/index.js

@@ -25,8 +25,8 @@ var hasRequiredReactJsxRuntime_production_min;
 function requireReactJsxRuntime_production_min () {
 	if (hasRequiredReactJsxRuntime_production_min) return reactJsxRuntime_production_min;
 	hasRequiredReactJsxRuntime_production_min = 1;
-var f=require$$0,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};
-	function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return {$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}reactJsxRuntime_production_min.Fragment=l;reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q;
+var f=require$$0,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:true,ref:true,__self:true,__source:true};
+	function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a) void 0===d[b]&&(d[b]=a[b]);return {$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}reactJsxRuntime_production_min.Fragment=l;reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q;
 	return reactJsxRuntime_production_min;
 }
 
@@ -756,11 +756,6 @@ function requireReactJsxRuntime_development () {
 	};
 	var specialPropKeyWarningShown;
 	var specialPropRefWarningShown;
-	var didWarnAboutStringRefs;
-
-	{
-	  didWarnAboutStringRefs = {};
-	}
 
 	function hasValidRef(config) {
 	  {
@@ -792,15 +787,7 @@ function requireReactJsxRuntime_development () {
 
 	function warnIfStringRefCannotBeAutoConverted(config, self) {
 	  {
-	    if (typeof config.ref === 'string' && ReactCurrentOwner.current && self && ReactCurrentOwner.current.stateNode !== self) {
-	      var componentName = getComponentNameFromType(ReactCurrentOwner.current.type);
-
-	      if (!didWarnAboutStringRefs[componentName]) {
-	        error('Component "%s" contains the string ref "%s". ' + 'Support for string refs will be removed in a future major release. ' + 'This case cannot be automatically converted to an arrow function. ' + 'We ask you to manually fix this case by using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-string-ref', getComponentNameFromType(ReactCurrentOwner.current.type), config.ref);
-
-	        didWarnAboutStringRefs[componentName] = true;
-	      }
-	    }
+	    if (typeof config.ref === 'string' && ReactCurrentOwner.current && self) ;
 	  }
 	}
 
@@ -2086,12 +2073,12 @@ function useDatatable() {
 }
 
 function useListController(props) {
-    const { suggestions, automatic, formControl, value } = props;
+    const { suggestions, automatic, formControl, reference } = props;
     const listIsOpen = useRef(false);
     const contentRef = useRef(null);
     const listRef = useRef(null);
     const inputRef = useRef(null);
-    const [state, setState] = useState({
+    const [state, refreshState] = useState({
         focused: false,
         higher: false,
         value: '',
@@ -2099,11 +2086,12 @@ function useListController(props) {
     });
     const collection = useRef(new ListCollection([]));
     const position = useRef(0);
-    const _protected = useRef();
+    const valueProtected = useRef();
+    const changeValueInternal = useRef(false);
     useEffect(() => {
         function onCloseSuggestions({ target }) {
             !contentRef?.current?.contains(target) &&
-                setState((state) => ({ ...state, modalIsVisible: false }));
+                refreshState((state) => ({ ...state, modalIsVisible: false }));
         }
         document.addEventListener('click', onCloseSuggestions);
         return () => {
@@ -2117,67 +2105,74 @@ function useListController(props) {
         if (listIsOpen.current && !state.modalIsVisible) {
             formControl?.touch();
         }
-        setState((state) => ({
+        refreshState((state) => ({
             ...state,
             higher: locationListCanTop(contentRef.current, listRef.current)
         }));
     }, [state.modalIsVisible]);
     useEffect(() => {
-        collection.current = new ListCollection(suggestions);
-        refresh(collection.current, formControl?.value, automatic);
-    }, [suggestions]);
-    useEffect(() => {
-        refresh(collection.current, formControl?.value);
-    }, [formControl?.value]);
-    function refresh(collection, state, automatic) {
-        if (!state) {
-            !refreshWithProtected(collection, automatic) &&
-                refreshState({ value: '' });
-            return undefined;
-        }
-        const element = collection.find(state);
-        if (element) {
-            _protected.current = undefined;
-            return refreshState({ value: element.description });
+        collection.current = new ListCollection(suggestions, reference);
+        if (formControl?.value) {
+            const element = collection.current.find(formControl.value);
+            if (!element) {
+                valueProtected.current = formControl.value;
+                automatic
+                    ? setFormValue(collection.current.value[0], true)
+                    : setFormValue(undefined);
+            }
         }
-        if (!refreshWithProtected(collection, automatic)) {
-            _protected.current = state;
-            setFormValue(value);
-            refreshState({ value: '' });
+        else if (valueProtected.current) {
+            const element = collection.current.find(valueProtected.current);
+            element && setFormValue(element);
         }
-    }
-    function refreshWithProtected(collection, automatic) {
-        if (automatic && collection.value[0]) {
-            formControl?.setInitialValue(collection.value[0].value);
-            return true;
+        else {
+            automatic && setFormValue(collection.current.value[0], true);
         }
-        if (_protected.current) {
-            const element = collection.find(_protected.current);
-            if (element) {
-                formControl?.setValue(_protected.current);
-                _protected.current = undefined;
-                return true;
+    }, [suggestions]);
+    useEffect(() => {
+        if (!changeValueInternal.current) {
+            if (formControl?.value) {
+                const element = collection.current.find(formControl.value);
+                if (!element) {
+                    valueProtected.current = formControl.value;
+                    automatic
+                        ? setFormValue(collection.current.value[0], true)
+                        : setFormValue(undefined);
+                }
+                else {
+                    setFormValue(element);
+                }
+            }
+            else {
+                automatic && setFormValue(collection.current.value[0], true);
             }
         }
-        return false;
-    }
-    function refreshState(state) {
-        setState((currentState) => ({ ...currentState, ...state }));
-    }
-    const setFormValue = useCallback((value) => {
-        formControl?.setValue(value);
+        changeValueInternal.current = false;
+    }, [formControl?.value]);
+    const setState = useCallback((state) => {
+        refreshState((_state) => ({ ..._state, ...state }));
+    }, []);
+    const setFormValue = useCallback((element, initialValue = false) => {
+        refreshState((_state) => ({
+            ..._state,
+            value: element?.description ?? ''
+        }));
+        changeValueInternal.current = true;
+        initialValue
+            ? formControl?.setInitialValue(element?.value)
+            : formControl?.setValue(element?.value);
     }, [formControl]);
-    function navigationInput(event) {
+    const navigationInput = useCallback((event) => {
         if (state.modalIsVisible) {
-            const newPosition = navigationListFromInput({
+            const _position = navigationListFromInput({
                 content: contentRef.current,
                 event: event,
                 list: listRef.current
             });
-            position.current = newPosition ?? 0;
+            position.current = _position ?? 0;
         }
-    }
-    function navigationElement(event) {
+    }, [state.modalIsVisible]);
+    const navigationElement = useCallback((event) => {
         position.current = navigationListFromElement({
             content: contentRef.current,
             event: event,
@@ -2185,7 +2180,7 @@ function useListController(props) {
             list: listRef.current,
             position: position.current
         });
-    }
+    }, [state.modalIsVisible]);
     return {
         ...state,
         contentRef,
@@ -2194,7 +2189,7 @@ function useListController(props) {
         navigationElement,
         navigationInput,
         setFormValue,
-        setState: refreshState
+        setState
     };
 }
 
@@ -2240,8 +2235,8 @@ function useFieldAutocomplete(props) {
     }
     function onClickAction() {
         if (controller.value) {
-            controller.setState({ modalIsVisible: false, value: '' });
-            controller.setFormValue(props.value);
+            controller.setState({ modalIsVisible: false });
+            controller.setFormValue(undefined);
             props.onValue && props.onValue(props.value);
         }
         else {
@@ -2263,17 +2258,17 @@ function useFieldAutocomplete(props) {
                 : controller.navigationElement(event);
         };
     }
-    function onChange({ description, value }) {
+    function onChange(element) {
         const { onSelect, onValue } = props;
         if (onSelect) {
             controller.setState({ modalIsVisible: false });
-            value && onSelect(value);
+            element.value && onSelect(element.value);
         }
         else {
-            controller.setState({ modalIsVisible: false, value: description });
-            controller.setFormValue(value);
+            controller.setState({ modalIsVisible: false });
+            controller.setFormValue(element);
         }
-        onValue && onValue(value);
+        onValue && onValue(element.value);
     }
     function refreshCoincidences(pattern, reboot = false) {
         const { collection, store } = createAutocompleteStore({
@@ -2286,8 +2281,8 @@ function useFieldAutocomplete(props) {
         setCoincidences(collection.slice(0, MAX_ELEMENTS));
     }
     return {
+        ...controller,
         coincidences,
-        controller,
         onBlurInput,
         onClickAction,
         onClickBackdrop,
@@ -2303,20 +2298,19 @@ function useFieldAutocomplete(props) {
 
 function RlsFieldAutocompleteTemplate(props) {
     const autocomplete = useFieldAutocomplete(props);
-    const { controller } = autocomplete;
     const { render, children, formControl, msgErrorDisabled, onSearch, placeholder, rlsTheme, searching } = props;
     const _disabled = formControl?.disabled || props.disabled;
     const className = renderClassStatus('rls-field-box', {
-        focused: controller.focused && !_disabled,
+        focused: autocomplete.focused && !_disabled,
         error: formControl?.wrong,
         disabled: _disabled,
-        selected: !!controller.value
+        selected: !!autocomplete.value
     }, 'rls-field-list rls-field-autocomplete');
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, 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 }), jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: _disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: controller.value ? 'trash-2' : '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.modalIsVisible,
-                    higher: controller.higher,
-                    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: (event) => {
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.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: autocomplete.value, onClick: autocomplete.onClickControl }), jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: _disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: autocomplete.value ? 'trash-2' : 'arrow-ios-down' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
+                    visible: autocomplete.modalIsVisible,
+                    higher: autocomplete.higher,
+                    hide: !autocomplete.modalIsVisible
+                }), children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: autocomplete.listRef, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: autocomplete.inputRef, className: "rls-field-list__ul__control", type: "text", placeholder: reactI18n('listInputPlaceholder'), value: autocomplete.pattern, onChange: (event) => {
                                                 autocomplete.setPattern(event.target.value);
                                             }, disabled: _disabled || searching, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: autocomplete.onKeydownInput }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: _disabled || searching, onClick: () => {
                                                 onSearch(autocomplete.pattern);
@@ -2542,8 +2536,8 @@ function useFieldSelect(props) {
     function onClickAction() {
         const removable = !props.unremovable && !!controller.value;
         if (removable) {
-            controller.setState({ modalIsVisible: false, value: '' });
-            controller.setFormValue(props.value);
+            controller.setState({ modalIsVisible: false });
+            controller.setFormValue(undefined);
             props.onValue && props.onValue(props.value);
         }
         else {
@@ -2567,21 +2561,21 @@ function useFieldSelect(props) {
                 : controller.navigationElement(event);
         };
     }
-    function onChange({ description, value }) {
+    function onChange(element) {
         const { onSelect, onValue } = props;
         controller.inputRef?.current?.focus();
         if (onSelect) {
             controller.setState({ modalIsVisible: false });
-            value && onSelect(value);
+            element.value && onSelect(element.value);
         }
         else {
-            controller.setFormValue(value);
-            controller.setState({ modalIsVisible: false, value: description });
+            controller.setFormValue(element);
+            controller.setState({ modalIsVisible: false });
         }
-        onValue && onValue(value);
+        onValue && onValue(element.value);
     }
     return {
-        controller,
+        ...controller,
         onBlurInput,
         onClickAction,
         onClickBackdrop,
@@ -2595,23 +2589,18 @@ function useFieldSelect(props) {
 
 function RlsFieldSelectTemplate(props) {
     const select = useFieldSelect(props);
-    const { controller } = select;
     const { render, suggestions, children, formControl, msgErrorDisabled, placeholder, rlsTheme, unremovable } = props;
     const _disabled = formControl?.disabled || props.disabled;
     const className = renderClassStatus('rls-field-box', {
-        focused: controller.focused && !_disabled,
+        focused: select.focused && !_disabled,
         error: formControl?.wrong,
         disabled: _disabled
     }, 'rls-field-list rls-field-select');
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, 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.modalIsVisible
-                            }), disabled: _disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: !unremovable && !!controller.value
-                                    ? 'trash-2'
-                                    : '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.modalIsVisible,
-                    higher: controller.higher,
-                    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 })] })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.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: select.inputRef, className: "rls-field-list__control", readOnly: true, disabled: _disabled, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput }), jsxRuntimeExports.jsx("button", { className: renderClassStatus('rls-field-list__action'), disabled: _disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: !unremovable && !!select.value ? 'close' : 'arrow-ios-down' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
+                    visible: select.modalIsVisible,
+                    higher: select.higher,
+                    hide: !select.modalIsVisible
+                }), children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: select.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) {
     return (jsxRuntimeExports.jsx(RlsFieldSelectTemplate, { ...props, render: (element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })) }));