@rolster/react-components 19.7.5 → 19.7.11

package/dist/cjs/index.cjs

@@ -2380,10 +2380,19 @@ function RlsConfirmationComponent({ approved, className, content, reject, rlsThe
     return (jsxRuntimeExports.jsxs("div", { className: classConfirmation, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__component", children: [jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__header", children: [title && jsxRuntimeExports.jsx("div", { className: "rls-confirmation__title", children: title }), subtitle && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__subtitle", children: subtitle }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__body", children: content && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__content", children: content })) }), (approved || reject) && (jsxRuntimeExports.jsx("div", { className: "rls-confirmation__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-confirmation__actions", children: [approved && (jsxRuntimeExports.jsx(RlsButton, { identifier: approved.identifier, type: approved.type, onClick: approved.onClick, disabled: approved.disabled, rlsTheme: approved.rlsTheme, children: approved.label })), reject && (jsxRuntimeExports.jsx(RlsButton, { identifier: reject.identifier, type: reject.type, onClick: reject.onClick, disabled: reject.disabled, rlsTheme: reject.rlsTheme, children: reject.label }))] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-confirmation__backdrop" })] }));
 }
 const RlsConfirmation = require$$0.memo(RlsConfirmationComponent);
+const RlsConfirmationBase = RlsConfirmation;
 function useConfirmation() {
     const [config, setConfig] = require$$0.useState({});
     const [visible, setVisible] = require$$0.useState(false);
-    const component = ReactDOM.createPortal(jsxRuntimeExports.jsx(RlsConfirmation, { ...config, visible: visible }), document.body);
+    const configRef = require$$0.useRef(config);
+    configRef.current = config;
+    const visibleRef = require$$0.useRef(visible);
+    visibleRef.current = visible;
+    const RlsConfirmation = require$$0.useMemo(() => {
+        return function RlsConfirmation(props) {
+            return ReactDOM.createPortal(jsxRuntimeExports.jsx(RlsConfirmationBase, { ...props, ...configRef.current, visible: visibleRef.current }), document.body);
+        };
+    }, []);
     const confirmation = require$$0.useCallback((options) => {
         return new Promise((resolve) => {
             setConfig({
@@ -2417,8 +2426,8 @@ function useConfirmation() {
         });
     }, []);
     return {
-        RlsConfirmation: component,
-        confirmation
+        confirmation,
+        RlsConfirmation
     };
 }
 
@@ -2556,7 +2565,7 @@ function useListController({ suggestions, automatic, formControl, reference }) {
     const refInput = require$$0.useRef(null);
     const listIsOpen = require$$0.useRef(false);
     const stableSuggestions = useStableSuggestions(suggestions);
-    const collection = require$$0.useMemo(() => new components.ListCollection(stableSuggestions, reference), [stableSuggestions]);
+    const collection = require$$0.useMemo(() => new components.ListCollection(stableSuggestions, reference), [stableSuggestions, reference]);
     const [state, refreshState] = require$$0.useState({
         focused: false,
         higher: false,
@@ -2665,7 +2674,7 @@ function useListController({ suggestions, automatic, formControl, reference }) {
             position: position.current
         });
     }, [state.higher]);
-    return {
+    return require$$0.useMemo(() => ({
         ...state,
         navigationElement,
         navigationInput,
@@ -2674,7 +2683,7 @@ function useListController({ suggestions, automatic, formControl, reference }) {
         refList,
         setFormValue,
         setState
-    };
+    }), [state, navigationElement, navigationInput, setFormValue, setState]);
 }
 
 const DURATION_ANIMATION$2 = 240;
@@ -2804,7 +2813,7 @@ function useFieldAutocomplete(props) {
             }
         };
     }, [onChange, controller.navigationElement]);
-    return {
+    return require$$0.useMemo(() => ({
         ...controller,
         coincidences,
         onBlurInput,
@@ -2817,7 +2826,20 @@ function useFieldAutocomplete(props) {
         onKeydownInput,
         pattern,
         setPattern
-    };
+    }), [
+        controller,
+        coincidences,
+        onBlurInput,
+        onClickAction,
+        onClickBackdrop,
+        onClickControl,
+        onClickElement,
+        onFocusInput,
+        onKeydownElement,
+        onKeydownInput,
+        pattern,
+        setPattern
+    ]);
 }
 
 function RlsFieldAutocompleteTemplateComponent(props) {
@@ -2873,7 +2895,7 @@ function RlsFieldAutocompleteTemplateComponent(props) {
         onClickPattern,
         onSearch
     ]);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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 }), !props.readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: autocomplete.value ? 'trash-2' : 'arrow-ios-down', onClick: autocomplete.onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: autocomplete.coincidences, visible: autocomplete.listIsVisible, action: action, disabled: disabled, higher: autocomplete.higher, render: render, refList: autocomplete.refList, searchControl: searchControl, onClickElement: autocomplete.onClickElement, onKeydownElement: autocomplete.onKeydownElement, onClickBackdrop: autocomplete.onClickBackdrop })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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 }), !props.readOnly && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: autocomplete.value ? 'trash-2' : 'arrow-ios-down', onClick: autocomplete.onClickAction }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: autocomplete.coincidences, visible: autocomplete.listIsVisible, action: action, disabled: disabled, higher: autocomplete.higher, render: render, refList: autocomplete.refList, searchControl: searchControl, onClickElement: autocomplete.onClickElement, onKeydownElement: autocomplete.onKeydownElement, onClickBackdrop: autocomplete.onClickBackdrop })] }));
 }
 const RlsFieldAutocompleteTemplate = require$$0.memo(RlsFieldAutocompleteTemplateComponent);
 function RlsFieldAutocompleteComponent(props) {
@@ -3161,7 +3183,7 @@ function RlsFieldClockComponent({ children, disabled: disabledProps, formControl
         formControl?.touch();
         setModalIsVisible(false);
     }, [formControl, onChange]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-clock", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { 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-clock__control", type: "text", value: status.valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModalClock, { visible: modalIsVisible, formControl: formControl, time: time, disabled: disabled, onClose: onCloseModal, rlsTheme: rlsTheme })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-clock", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { 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-clock__control", type: "text", value: status.valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModalClock, { visible: modalIsVisible, formControl: formControl, time: time, disabled: disabled, onClose: onCloseModal, rlsTheme: rlsTheme })] }));
 }
 const RlsFieldClock = require$$0.memo(RlsFieldClockComponent);
 
@@ -3390,9 +3412,9 @@ function RlsFieldColorComponent({ children, color, disabled: disabledProps, form
         disabled,
         readonly: readOnly
     });
-    const displayHex = require$$0.useMemo(() => {
-        const hex = colorValue && hexIsValid(colorValue) ? colorValue : '';
-        return normalizeHex(hex);
+    const colorDisplay = require$$0.useMemo(() => {
+        const color = colorValue && hexIsValid(colorValue) ? colorValue : '';
+        return normalizeHex(color);
     }, [colorValue]);
     const onClickInput = require$$0.useCallback(() => {
         if (!readOnly) {
@@ -3420,7 +3442,7 @@ function RlsFieldColorComponent({ children, color, disabled: disabledProps, form
         formControl?.touch();
         setModalIsVisible(false);
     }, [formControl, onChange]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-color", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { 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: [displayHex && (jsxRuntimeExports.jsx("div", { className: "rls-field-color__swatch", style: { backgroundColor: displayHex } })), jsxRuntimeExports.jsx("input", { className: "rls-field-color__control", type: "text", value: displayHex, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: colorValue ? 'trash-2' : 'color-palette', onClick: onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-modal-color", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerColor, { formControl: formControl, color: color, disabled: disabled, onListener: onListener }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-color", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { 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: [colorDisplay && (jsxRuntimeExports.jsx("div", { className: "rls-field-color__swatch", style: { backgroundColor: colorDisplay } })), jsxRuntimeExports.jsx("input", { className: "rls-field-color__control", type: "text", value: colorDisplay, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: colorValue ? 'trash-2' : 'color-palette', onClick: onClickAction }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-modal-color", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerColor, { formControl: formControl, color: color, disabled: disabled, onListener: onListener }) })] }));
 }
 const RlsFieldColor = require$$0.memo(RlsFieldColorComponent);
 
@@ -3573,7 +3595,7 @@ function RlsFieldDateComponent({ children, date, disabled: disabledProps, formCo
         formControl?.touch();
         setModalIsVisible(false);
     }, [formControl, onChange]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { 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-date__control", type: "text", value: status.label, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModalDate, { visible: modalIsVisible, formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onClose: onCloseModal, rlsTheme: rlsTheme })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { 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-date__control", type: "text", value: status.label, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModalDate, { visible: modalIsVisible, formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onClose: onCloseModal, rlsTheme: rlsTheme })] }));
 }
 const RlsFieldDate = require$$0.memo(RlsFieldDateComponent);
 
@@ -3704,7 +3726,7 @@ function RlsFieldDateRangeComponent({ children, date, disabled: disabledProps, f
         formControl?.touch();
         setModalIsVisible(false);
     }, [formControl, onChange]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { 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-date-range__control", type: "text", value: status.valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModalDateRange, { visible: modalIsVisible, formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onClose: onCloseModal, rlsTheme: rlsTheme })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children && jsxRuntimeExports.jsx("span", { 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-date-range__control", type: "text", value: status.valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), !readOnly && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: status.icon, onClick: onClickAction }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModalDateRange, { visible: modalIsVisible, formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onClose: onCloseModal, rlsTheme: rlsTheme })] }));
 }
 const RlsFieldDateRange = require$$0.memo(RlsFieldDateRangeComponent);
 
@@ -3827,7 +3849,7 @@ function useFieldList(props) {
             }
         };
     }, [toggleElement]);
-    return {
+    return require$$0.useMemo(() => ({
         ...state,
         selected,
         refContent,
@@ -3839,7 +3861,17 @@ function useFieldList(props) {
         onClickInput,
         onKeydownElement,
         onRemoveElement
-    };
+    }), [
+        state,
+        selected,
+        isSelected,
+        onClickAction,
+        onClickBackdrop,
+        onClickElement,
+        onClickInput,
+        onKeydownElement,
+        onRemoveElement
+    ]);
 }
 
 function RlsFieldListInner({ render, suggestions, action, children, formControl, fieldList, msgErrorDisabled, placeholder, rlsTheme, ...props }) {
@@ -3853,7 +3885,7 @@ function RlsFieldListInner({ render, suggestions, action, children, formControl,
         readonly: props.readOnly
     }, `rls-field-list rls-field-list__multi ${props.className ?? ''}`);
     const renderWithCheckbox = require$$0.useCallback((element) => (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__multi__element", children: [jsxRuntimeExports.jsx(RlsCheckBox, { checked: fieldList.isSelected(element) }), render(element)] })), [fieldList.isSelected, render]);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: fieldList.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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("div", { className: "rls-field-list__multi__chips", onClick: disabled ? undefined : fieldList.onClickInput, children: !fieldList.selected.length && placeholder ? (jsxRuntimeExports.jsx("span", { className: "rls-field-list__multi__placeholder", children: placeholder })) : (fieldList.selected.map((item, index) => (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__multi__chip", children: [jsxRuntimeExports.jsx("span", { className: "rls-field-list__multi__chip__description", children: item.description }), !props.readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__multi__chip__remove", onClick: fieldList.onRemoveElement(item), disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) }))] }, index)))) }), !props.readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-down", onClick: fieldList.onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: suggestions, visible: fieldList.listIsVisible, action: action, disabled: disabled, higher: fieldList.higher, render: renderWithCheckbox, refList: fieldList.refList, onClickElement: fieldList.onClickElement, onKeydownElement: fieldList.onKeydownElement, onClickBackdrop: fieldList.onClickBackdrop })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: fieldList.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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("div", { className: "rls-field-list__multi__chips", onClick: disabled ? undefined : fieldList.onClickInput, children: !fieldList.selected.length && placeholder ? (jsxRuntimeExports.jsx("span", { className: "rls-field-list__multi__placeholder", children: placeholder })) : (fieldList.selected.map((item, index) => (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__multi__chip", children: [jsxRuntimeExports.jsx("span", { className: "rls-field-list__multi__chip__description", children: item.description }), !props.readOnly && !disabled && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__multi__chip__remove", onClick: fieldList.onRemoveElement(item), children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) }))] }, index)))) }), !props.readOnly && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: "arrow-ios-down", onClick: fieldList.onClickAction }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: suggestions, visible: fieldList.listIsVisible, action: action, disabled: disabled, higher: fieldList.higher, render: renderWithCheckbox, refList: fieldList.refList, onClickElement: fieldList.onClickElement, onKeydownElement: fieldList.onKeydownElement, onClickBackdrop: fieldList.onClickBackdrop })] }));
 }
 function RlsFieldListTemplateComponent(props) {
     const fieldList = useFieldList(props);
@@ -3962,7 +3994,7 @@ function useFieldSelect(props) {
             }
         };
     }, [onChange, controller.navigationElement]);
-    return {
+    return require$$0.useMemo(() => ({
         ...controller,
         onBlurInput,
         onClickAction,
@@ -3972,7 +4004,17 @@ function useFieldSelect(props) {
         onFocusInput,
         onKeydownElement,
         onKeydownInput
-    };
+    }), [
+        controller,
+        onBlurInput,
+        onClickAction,
+        onClickBackdrop,
+        onClickInput,
+        onClickElement,
+        onFocusInput,
+        onKeydownElement,
+        onKeydownInput
+    ]);
 }
 
 function RlsFieldSelectTemplateComponent(props) {
@@ -3987,7 +4029,7 @@ function RlsFieldSelectTemplateComponent(props) {
         disabled: disabled,
         readonly: props.readOnly
     }, `rls-field-list rls-field-select ${props.className ?? ''}`);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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.refInput, className: "rls-field-list__control", readOnly: true, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput, disabled: disabled }), !props.readOnly && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: !unremovable && !!select.value ? 'close' : 'arrow-ios-down', onClick: select.onClickAction, disabled: disabled }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: suggestions, visible: select.listIsVisible, action: action, disabled: disabled, higher: select.higher, render: render, refList: select.refList, onClickElement: select.onClickElement, onKeydownElement: select.onKeydownElement, onClickBackdrop: select.onClickBackdrop })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.refContent, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { 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.refInput, className: "rls-field-list__control", readOnly: true, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput, disabled: disabled }), !props.readOnly && !disabled && (jsxRuntimeExports.jsx(RlsButtonIcon, { icon: !unremovable && !!select.value ? 'close' : 'arrow-ios-down', onClick: select.onClickAction }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsx(RlsFieldListSuggestions, { elements: suggestions, visible: select.listIsVisible, action: action, disabled: disabled, higher: select.higher, render: render, refList: select.refList, onClickElement: select.onClickElement, onKeydownElement: select.onKeydownElement, onClickBackdrop: select.onClickBackdrop })] }));
 }
 const RlsFieldSelectTemplate = require$$0.memo(RlsFieldSelectTemplateComponent);
 function RlsFieldSelectComponent(props) {
@@ -4469,6 +4511,8 @@ function RlsNotification({ content, icon, onClose, rlsTheme, title, visible }) {
 function useNotifications() {
     const [notifications, setNotifications] = require$$0.useState([]);
     const timersRef = require$$0.useRef(new Map());
+    const notificationsRef = require$$0.useRef(notifications);
+    notificationsRef.current = notifications;
     require$$0.useEffect(() => {
         const timers = timersRef.current;
         return () => {
@@ -4489,6 +4533,14 @@ function useNotifications() {
             setNotifications((notifications) => notifications.filter((notification) => notification.id !== id));
         }, DURATION_ANIMATION$1);
     }, []);
+    const RlsNotifications = require$$0.useMemo(() => {
+        return function RlsNotifications(props) {
+            const className = renderClassStatus('rls-notifications', {
+                visible: notificationsRef.current.length > 0
+            });
+            return ReactDOM.createPortal(jsxRuntimeExports.jsx("div", { className: className, ...props, children: notificationsRef.current.map((notification) => (jsxRuntimeExports.jsx(RlsNotification, { ...notification.config, visible: notification.visible, onClose: () => remove(notification.id) }, notification.id))) }), document.body);
+        };
+    }, [remove]);
     const notify = require$$0.useCallback((config) => {
         const id = generateId();
         const duration = config.duration ?? DURATION_DEFAULT;
@@ -4508,10 +4560,6 @@ function useNotifications() {
         }, duration);
         timersRef.current.set(id, timer);
     }, [remove]);
-    const className = renderClassStatus('rls-notifications', {
-        visible: notifications.length > 0
-    });
-    const RlsNotifications = ReactDOM.createPortal(jsxRuntimeExports.jsx("div", { className: className, children: notifications.map((notification) => (jsxRuntimeExports.jsx(RlsNotification, { ...notification.config, visible: notification.visible, onClose: () => remove(notification.id) }, notification.id))) }), document.body);
     return {
         RlsNotifications,
         notify
@@ -4538,6 +4586,7 @@ function RlsSnackbarComponent({ content, onClose, icon, rlsTheme, title, visible
     return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-snackbar__avatar", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsxs("div", { className: "rls-snackbar__component", children: [jsxRuntimeExports.jsxs("div", { className: "rls-snackbar__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-snackbar__title", children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-snackbar__content", children: content })] })] }));
 }
 const RlsSnackbar = require$$0.memo(RlsSnackbarComponent);
+const RlsSnackbarNode = RlsSnackbar;
 function useSnackbar() {
     const timeoutId = require$$0.useRef(undefined);
     const duration = require$$0.useRef(4000);
@@ -4545,6 +4594,8 @@ function useSnackbar() {
         config: {},
         visible: false
     });
+    const stateRef = require$$0.useRef(state);
+    stateRef.current = state;
     const onClose = require$$0.useCallback(() => {
         if (timeoutId.current) {
             clearTimeout(timeoutId.current);
@@ -4552,7 +4603,13 @@ function useSnackbar() {
         timeoutId.current = undefined;
         setState((state) => ({ ...state, visible: false }));
     }, []);
-    const rlsSnackbar = (jsxRuntimeExports.jsx(RlsSnackbar, { ...state.config, visible: state.visible, onClose: onClose }));
+    const onCloseRef = require$$0.useRef(onClose);
+    onCloseRef.current = onClose;
+    const RlsSnackbar = require$$0.useMemo(() => {
+        return function RlsSnackbar(props) {
+            return (jsxRuntimeExports.jsx(RlsSnackbarNode, { ...props, ...stateRef.current.config, visible: stateRef.current.visible, onClose: onCloseRef.current }));
+        };
+    }, []);
     require$$0.useEffect(() => {
         if (state.visible) {
             timeoutId.current = setTimeout(() => {
@@ -4576,10 +4633,7 @@ function useSnackbar() {
             visible: !state.visible
         }));
     }, []);
-    return {
-        RlsSnackbar: rlsSnackbar,
-        snackbar
-    };
+    return { RlsSnackbar, snackbar };
 }
 
 const RlsContext = require$$0.createContext(null);
@@ -4592,8 +4646,8 @@ function useRlsContext() {
 }
 function RlsApplication({ children }) {
     const { RlsConfirmation, confirmation } = useConfirmation();
-    const { RlsNotifications, notify } = useNotifications();
     const { RlsSnackbar, snackbar } = useSnackbar();
+    const { RlsNotifications, notify } = useNotifications();
     const [navbarInApp, setNavbarInApp] = require$$0.useState(false);
     const [navbarIsCondense, setNavbarIsCondense] = require$$0.useState(false);
     const [appIsMobile, setIsMobile] = require$$0.useState(false);
@@ -4610,7 +4664,7 @@ function RlsApplication({ children }) {
         setNavbarIsCondense,
         snackbar
     }), [confirmation, notify, snackbar]);
-    return (jsxRuntimeExports.jsxs(RlsContext, { value: state, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsNotifications, RlsConfirmation] }));
+    return (jsxRuntimeExports.jsxs(RlsContext, { value: state, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, jsxRuntimeExports.jsx(RlsSnackbar, {})] }), jsxRuntimeExports.jsx(RlsConfirmation, {}), jsxRuntimeExports.jsx(RlsNotifications, {})] }));
 }
 
 const DEFAULT_DESIGN_SYSTEM = 'bordered';
@@ -4716,13 +4770,7 @@ function useDropdownController(effect = '0% 0%') {
     const close = require$$0.useCallback(() => {
         setVisible(false);
     }, []);
-    return {
-        close,
-        component,
-        open,
-        openWithEvent,
-        visible
-    };
+    return require$$0.useMemo(() => ({ close, component, open, openWithEvent, visible }), [close, open, openWithEvent, visible]);
 }
 
 function usePortalController() {
@@ -4733,15 +4781,23 @@ function usePortalController() {
     const close = require$$0.useCallback(() => {
         setVisible(false);
     }, []);
-    return { close, open, visible };
+    return require$$0.useMemo(() => ({ close, open, visible }), [close, open, visible]);
 }
 
 function useTabsController(options) {
     const formControl = reactForms.useFormControl(options.value);
+    const tabsRef = require$$0.useRef(options.tabs);
+    tabsRef.current = options.tabs;
+    const onValueRef = require$$0.useRef(options.onValue);
+    onValueRef.current = options.onValue;
+    const formControlRef = require$$0.useRef(formControl);
+    formControlRef.current = formControl;
     const Tabs = require$$0.useMemo(() => {
-        return (jsxRuntimeExports.jsx(RlsTabs, { tabs: options.tabs, formControl: formControl, onValue: options.onValue }));
-    }, [options.tabs, options.onValue, formControl]);
-    return { Tabs, formControl };
+        return function Tabs(props) {
+            return (jsxRuntimeExports.jsx(RlsTabs, { ...props, tabs: tabsRef.current, formControl: formControlRef.current, onValue: onValueRef.current }));
+        };
+    }, []);
+    return require$$0.useMemo(() => ({ Tabs, formControl }), [Tabs, formControl]);
 }
 
 const APP_THEME_ATTRIBUTE = 'app-theme';