@rolster/react-components 19.4.7 → 19.5.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2022 Rolster Technology
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2022 Rolster Technology
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cjs/index.cjs

@@ -469,6 +469,72 @@ function RlsAmount({ value, className, decimals, rlsTheme, symbol }) {
     return (jsxRuntimeExports.jsxs("div", { className: classNameAmount, "rls-theme": rlsTheme, children: [symbol && jsxRuntimeExports.jsx("span", { className: "rls-amount__symbol", children: symbol }), jsxRuntimeExports.jsxs("div", { className: "rls-amount__content", children: [jsxRuntimeExports.jsx(RlsTabularText, { className: "rls-amount__integer", value: integer }), decimal && (jsxRuntimeExports.jsx(RlsTabularText, { className: "rls-amount__decimal", value: decimal }))] })] }));
 }
 
+function RlsAreaText({ autoComplete, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, resize, rows = 1, value }) {
+    const valueInitial = String(formControl?.value ?? value ?? '');
+    const [valueArea, setValueArea] = require$$0.useState(valueInitial);
+    const [focused, setFocused] = require$$0.useState(false);
+    const elementRef = require$$0.useRef(null);
+    const areaRef = formControl?.elementRef ?? elementRef;
+    const changeIsInternal = require$$0.useRef(false);
+    const refreshHeight = require$$0.useCallback(() => {
+        const element = areaRef.current;
+        if (element) {
+            element.style.height = 'auto';
+            element.style.height = `${element.scrollHeight}px`;
+        }
+    }, [areaRef]);
+    require$$0.useEffect(() => {
+        if (!changeIsInternal.current) {
+            const nextValue = String(formControl?.value ?? value ?? '');
+            valueArea !== nextValue && setValueArea(nextValue);
+        }
+        changeIsInternal.current = false;
+    }, [formControl?.value, value, valueArea]);
+    require$$0.useEffect(() => {
+        refreshHeight();
+    }, [refreshHeight, valueArea]);
+    const onChangeArea = require$$0.useCallback((event) => {
+        const nextValue = event.target.value;
+        changeIsInternal.current = true;
+        onValue?.(nextValue);
+        setValueArea(nextValue);
+        formControl?.setValue(nextValue);
+        event.target.style.height = 'auto';
+        event.target.style.height = `${event.target.scrollHeight}px`;
+    }, [formControl, onValue]);
+    const onKeyDownArea = require$$0.useCallback((event) => {
+        onKeyDown?.(event);
+        event.key === 'Enter' && onEnter?.();
+    }, [onKeyDown, onEnter]);
+    const onKeyUpArea = require$$0.useCallback((event) => {
+        onKeyUp?.(event);
+    }, [onKeyUp]);
+    const onFocusArea = require$$0.useCallback(() => {
+        formControl?.focus();
+        setFocused(() => true);
+        onFocus?.();
+    }, [formControl, onFocus]);
+    const onBlurArea = require$$0.useCallback(() => {
+        formControl?.blur();
+        setFocused(() => false);
+        onBlur?.();
+    }, [formControl, onBlur]);
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-area-text', {
+            disabled: formControl?.disabled || disabled,
+            focused: formControl?.focused ?? focused,
+            readonly: readOnly
+        });
+    }, [
+        formControl?.disabled,
+        formControl?.focused,
+        disabled,
+        focused,
+        readOnly
+    ]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, children: [jsxRuntimeExports.jsx("textarea", { ref: areaRef, className: "rls-area-text__component", autoComplete: autoComplete ?? 'off', placeholder: placeholder, disabled: formControl?.disabled || disabled, readOnly: readOnly, rows: rows, style: { resize }, onFocus: onFocusArea, onBlur: onBlurArea, onChange: onChangeArea, onKeyDown: onKeyDownArea, onKeyUp: onKeyUpArea, value: valueArea }), jsxRuntimeExports.jsx("span", { className: "rls-area-text__value", children: valueArea })] }));
+}
+
 function RlsAvatar({ children, contrasted, rounded, skeleton, rlsTheme }) {
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-avatar', { contrasted, rounded, skeleton });
@@ -517,7 +583,7 @@ function RlsButton({ type, children, disabled, identifier, onClick, prefixIcon,
 }
 
 function RlsButtonAction({ icon, disabled, identifier, onClick, tooltip }) {
-    return (jsxRuntimeExports.jsxs("button", { id: identifier, className: "rls-button-action", onClick: onClick, disabled: disabled, children: [jsxRuntimeExports.jsx("div", { className: "rls-button-action__content", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }), tooltip && (jsxRuntimeExports.jsx("div", { className: "rls-button-action__tooltip rls-overline-medium", children: jsxRuntimeExports.jsx("span", { children: tooltip }) }))] }));
+    return (jsxRuntimeExports.jsxs("button", { id: identifier, className: "rls-button-action", onClick: onClick, disabled: disabled, children: [jsxRuntimeExports.jsx("div", { className: "rls-button-action__content", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }), tooltip && (jsxRuntimeExports.jsx("div", { className: "rls-button-action__tooltip rls-overline-font-medium", children: jsxRuntimeExports.jsx("span", { children: tooltip }) }))] }));
 }
 
 function useFormSingleSelectionController({ disabled, formControl, onValue, value }) {
@@ -777,6 +843,60 @@ function RlsSwitchControl({ formControl, disabled, identifier, rlsTheme }) {
     return (jsxRuntimeExports.jsx(RlsSwitch, { identifier: identifier, checked: formControl.value, disabled: disabled, onClick: onClick, rlsTheme: rlsTheme }));
 }
 
+function RlsAccordion({ bordered, children, className, disabled, identifier, onToggle, opened, rlsTheme, title }) {
+    const [open, setOpen] = require$$0.useState(opened);
+    const [animating, setAnimating] = require$$0.useState(false);
+    const contentRef = require$$0.useRef(null);
+    const initializedRef = require$$0.useRef(false);
+    const classNameAccordion = require$$0.useMemo(() => {
+        return renderClassStatus('rls-accordion', { bordered, disabled, open, animating }, className);
+    }, [animating, bordered, className, disabled, open]);
+    const onClickHeader = require$$0.useCallback(() => {
+        if (!disabled) {
+            setOpen((current) => {
+                const next = !current;
+                onToggle?.(next);
+                return next;
+            });
+        }
+    }, [disabled, onToggle]);
+    require$$0.useEffect(() => {
+        const element = contentRef.current;
+        if (!element) {
+            return;
+        }
+        if (!initializedRef.current) {
+            initializedRef.current = true;
+            element.style.height = open ? 'auto' : '0px';
+            return;
+        }
+        setAnimating(true);
+        if (open) {
+            const target = element.scrollHeight;
+            element.style.height = '0px';
+            requestAnimationFrame(() => {
+                element.style.height = `${target}px`;
+            });
+        }
+        else {
+            element.style.height = `${element.scrollHeight}px`;
+            requestAnimationFrame(() => {
+                element.style.height = '0px';
+            });
+        }
+    }, [open]);
+    const onTransitionEnd = require$$0.useCallback((event) => {
+        if (event.propertyName === 'height') {
+            const element = contentRef.current;
+            if (element && open) {
+                element.style.height = 'auto';
+            }
+            setAnimating(false);
+        }
+    }, [open]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameAccordion, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("button", { type: "button", className: "rls-accordion__header", "aria-expanded": open, disabled: disabled, onClick: onClickHeader, children: [jsxRuntimeExports.jsx("span", { className: "rls-accordion__title", children: title }), jsxRuntimeExports.jsx("span", { className: "rls-accordion__indicator", children: jsxRuntimeExports.jsx(RlsIcon, { value: "chevron-down" }) })] }), jsxRuntimeExports.jsx("div", { ref: contentRef, className: "rls-accordion__body", "aria-hidden": !open, onTransitionEnd: onTransitionEnd, children: jsxRuntimeExports.jsx("div", { className: "rls-accordion__content", children: children }) })] }));
+}
+
 function RlsAlert({ bordered, children, icon, identifier, rlsTheme }) {
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-alert', { bordered });
@@ -791,6 +911,10 @@ function RlsBallot({ bordered, className, children, img, initials, skeleton, sub
     return (jsxRuntimeExports.jsxs("div", { className: classNameBallot, "rls-theme": rlsTheme, children: [(img || initials) && (jsxRuntimeExports.jsxs(RlsAvatar, { skeleton: skeleton, children: [img && jsxRuntimeExports.jsx("img", { src: img }), initials && jsxRuntimeExports.jsx("span", { children: initials })] })), jsxRuntimeExports.jsxs("div", { className: "rls-ballot__component", children: [jsxRuntimeExports.jsx("div", { className: "rls-ballot__title", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (jsxRuntimeExports.jsx("div", { className: "rls-ballot__subtitle", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: subtitle }) }))] })] }));
 }
 
+function RlsBody({ children, identifier, rlsTheme }) {
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-app__page__body", "rls-theme": rlsTheme, children: children }));
+}
+
 function RlsButtonProgress({ icon, disabled, onClick, progressing, rlsTheme }) {
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-button-progress', { progressing });
@@ -980,6 +1104,22 @@ function RlsFieldDecimal(props) {
     return (jsxRuntimeExports.jsxs("div", { id: identifier, 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.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputDecimal, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
+function RlsFieldArea(props) {
+    const { children, formControl, identifier, rlsTheme } = props;
+    const disabled = require$$0.useMemo(() => {
+        return formControl?.disabled || props.disabled;
+    }, [formControl?.disabled, props.disabled]);
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-field-box', {
+            disabled,
+            error: formControl?.wrong,
+            focused: formControl?.focused && !disabled,
+            readonly: props.readOnly
+        }, 'rls-field-area');
+    }, [formControl?.focused, formControl?.wrong, props.readOnly, disabled]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, 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.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsAreaText, { ...props }) }) }), !props.msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+}
+
 function RlsFieldFile({ accept, children, disabled: disabledProp, formControl, identifier, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value }) {
     const inputRef = require$$0.useRef(null);
     const disabled = require$$0.useMemo(() => formControl?.disabled || disabledProp, [formControl?.disabled, disabledProp]);
@@ -1053,7 +1193,7 @@ function RlsFieldListLi({ element, onClickElement, onKeydownElement, render }) {
     }, [element, onKeydownElement]);
     return (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: onClick, onKeyDown: onKeyDown, children: render(element) }));
 }
-function RlsFieldListSuggestions({ elements, disabled, higher, render, renderEmpty, searchControl, visible, onClickBackdrop, onClickElement, onKeydownElement, refList, rlsTheme }) {
+function RlsFieldListSuggestions({ elements, action, disabled, higher, render, renderEmpty, searchControl, visible, onClickBackdrop, onClickElement, onKeydownElement, refList, rlsTheme }) {
     const [labels, setLabels] = require$$0.useState({
         listEmptyDescription: reactI18n('listEmptyDescription'),
         listEmptyTitle: reactI18n('listEmptyTitle')
@@ -1076,8 +1216,14 @@ function RlsFieldListSuggestions({ elements, disabled, higher, render, renderEmp
     const onChangePattern = require$$0.useCallback((event) => {
         searchControl?.onChange(event.target.value);
     }, [searchControl?.onChange]);
+    const onClickAction = require$$0.useCallback((event) => {
+        action?.onClick();
+        if (!action?.keepOpen) {
+            onClickBackdrop(event);
+        }
+    }, [action?.onClick, action?.keepOpen, onClickBackdrop]);
     const searching = searchControl?.searching ?? false;
-    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: refList, className: "rls-field-list__ul", children: [searchControl && (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__ul__control", ref: searchControl.refInput, type: "text", placeholder: searchControl.placeholder, value: searchControl.pattern, onChange: onChangePattern, onFocus: searchControl.onFocus, onBlur: searchControl.onBlur, onKeyDown: searchControl.onKeyDown, disabled: disabled || searching }), searchControl.onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: searchControl.onSearch, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] })), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), elements.map((element, index) => (jsxRuntimeExports.jsx(RlsFieldListLi, { element: element, onClickElement: onClickElement, onKeydownElement: onKeydownElement, render: render }, index))), !elements.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: renderEmpty ? (renderEmpty()) : (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] })) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: onClickBackdrop })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__suggestions__body", children: [jsxRuntimeExports.jsxs("ul", { ref: refList, className: "rls-field-list__ul", children: [searchControl && (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { className: "rls-field-list__ul__control", ref: searchControl.refInput, type: "text", placeholder: searchControl.placeholder, value: searchControl.pattern, onChange: onChangePattern, onFocus: searchControl.onFocus, onBlur: searchControl.onBlur, onKeyDown: searchControl.onKeyDown, disabled: disabled || searching }), searchControl.onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: searchControl.onSearch, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] })), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), elements.map((element, index) => (jsxRuntimeExports.jsx(RlsFieldListLi, { element: element, onClickElement: onClickElement, onKeydownElement: onKeydownElement, render: render }, index))), !elements.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: renderEmpty ? (renderEmpty()) : (jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("span", { className: "rls-label-font-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-font-regular", children: labels.listEmptyDescription })] })) }))] }), action && (jsxRuntimeExports.jsx("div", { className: "rls-field-list__action", children: jsxRuntimeExports.jsxs("button", { type: "button", disabled: disabled || action.disabled, onClick: onClickAction, children: [action.icon && jsxRuntimeExports.jsx(RlsIcon, { value: action.icon }), jsxRuntimeExports.jsx("span", { className: "rls-field-list__action__description", children: action.description })] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: onClickBackdrop })] }));
 }
 
 function RlsFieldMoney(props) {
@@ -1230,10 +1376,39 @@ function RlsLabelSwitch({ capsule, children, disabled, extended, identifier, for
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-switch__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsSwitch, { checked: checked, capsule: capsule, disabled: disabled }) }), jsxRuntimeExports.jsx("div", { className: "rls-label-switch__text", children: children })] }));
 }
 
+function RlsMessageEmpty({ children, className, emoji, icon, identifier, image, rlsTheme, title }) {
+    const classNameMessageEmpty = require$$0.useMemo(() => {
+        return renderClassStatus('rls-message-empty', {}, className);
+    }, [className]);
+    const logo = require$$0.useMemo(() => {
+        if (icon) {
+            return (jsxRuntimeExports.jsx("div", { className: "rls-message-empty__logo", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }));
+        }
+        if (emoji) {
+            return (jsxRuntimeExports.jsx("div", { className: "rls-message-empty__logo", children: jsxRuntimeExports.jsx("span", { className: "rls-message-empty__logo--emoji", children: emoji }) }));
+        }
+        if (image) {
+            return (jsxRuntimeExports.jsx("div", { className: "rls-message-empty__logo", children: jsxRuntimeExports.jsx("img", { className: "rls-message-empty__logo--image", src: image }) }));
+        }
+        return null;
+    }, [icon, emoji, image]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameMessageEmpty, "rls-theme": rlsTheme, children: [logo, title && jsxRuntimeExports.jsx("div", { className: "rls-message-empty__title", children: title }), children && jsxRuntimeExports.jsx("div", { className: "rls-message-empty__content", children: children })] }));
+}
+
 function RlsNavbar({ children, identifier, rlsTheme }) {
     return (jsxRuntimeExports.jsxs("nav", { id: identifier, className: "rls-app__page__nav", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-app__page__nav__content", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-app__page__nav__backdrop" })] }));
 }
 
+function RlsNavbarMenuOption({ option, onOption }) {
+    const onClick = require$$0.useCallback(() => {
+        onOption?.(option);
+    }, [onOption]);
+    return (jsxRuntimeExports.jsxs("li", { className: "rls-app__page__nav__option", onClick: onClick, children: [jsxRuntimeExports.jsx(RlsIcon, { value: option.icon }), jsxRuntimeExports.jsx("span", { className: "rls-label-font", children: option.label })] }));
+}
+function RlsNavbarMenu({ options, onOption }) {
+    return (jsxRuntimeExports.jsx("ul", { className: "rls-app__page__nav__menu", children: options.map((option) => (jsxRuntimeExports.jsx(RlsNavbarMenuOption, { option: option, onOption: onOption }, option.id))) }));
+}
+
 function PageButton({ page, onSelect }) {
     const className = require$$0.useMemo(() => renderClassStatus('rls-pagination__page', { active: page.active }), [page.active]);
     const onClick = require$$0.useCallback(() => {
@@ -1835,11 +2010,34 @@ function RlsDropdown({ children, controller, rlsTheme }) {
     return (jsxRuntimeExports.jsx("div", { ref: controller.component, className: className, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-dropdown__content", children: children }) }));
 }
 
-function calculateMinHeightList(count, height) {
-    return count <= 0 ? 160 : (count < 6 ? count : 6) * height;
+const MAX_LIST_HEIGHT_REM = 90;
+const FALLBACK_REM_SIZE = 16;
+function getRemSize() {
+    if (typeof window === 'undefined') {
+        return FALLBACK_REM_SIZE;
+    }
+    const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    return fontSize > 0 ? fontSize : FALLBACK_REM_SIZE;
+}
+function shouldDisplayHigher(content, list) {
+    if (!content) {
+        return false;
+    }
+    const { top, bottom } = content.getBoundingClientRect();
+    const spaceAbove = top;
+    const spaceBelow = window.innerHeight - bottom;
+    const maxHeight = MAX_LIST_HEIGHT_REM * getRemSize();
+    const desiredHeight = Math.min(list?.scrollHeight || maxHeight, maxHeight);
+    if (spaceBelow >= desiredHeight) {
+        return false;
+    }
+    if (spaceAbove >= desiredHeight) {
+        return true;
+    }
+    return spaceAbove > spaceBelow;
 }
 function useListController(props) {
-    const { count, suggestions, automatic, formControl, lineHeight, reference } = props;
+    const { suggestions, automatic, formControl, reference } = props;
     const refContent = require$$0.useRef(null);
     const refList = require$$0.useRef(null);
     const refInput = require$$0.useRef(null);
@@ -1902,15 +2100,14 @@ function useListController(props) {
         changeValueInternal.current = false;
     }, [collection, formControl?.value]);
     const setState = require$$0.useCallback((state) => {
-        const minHeightList = calculateMinHeightList(count, lineHeight ?? 48);
         const _state = state.listIsVisible
             ? {
                 ...state,
-                higher: components.locationListCanTop(refContent.current, refList.current, minHeightList)
+                higher: shouldDisplayHigher(refContent.current, refList.current)
             }
             : state;
         refreshState((state) => ({ ...state, ..._state }));
-    }, [count]);
+    }, []);
     const setFormValue = require$$0.useCallback((element, valueIsDefault = false) => {
         refreshState((state) => ({
             ...state,
@@ -1955,11 +2152,7 @@ function useListController(props) {
 const DURATION_ANIMATION$1 = 240;
 const MAX_ELEMENTS = 6;
 function useFieldAutocomplete(props) {
-    const count = require$$0.useRef(props.suggestions.length);
-    const controller = useListController({
-        ...props,
-        count: count.current
-    });
+    const controller = useListController(props);
     const [coincidences, setCoincidences] = require$$0.useState([]);
     const [pattern, setPattern] = require$$0.useState('');
     const _store = require$$0.useRef({
@@ -1980,7 +2173,6 @@ function useFieldAutocomplete(props) {
         _store.current = store;
         const coincidences = collection.slice(0, MAX_ELEMENTS);
         setCoincidences(coincidences);
-        count.current = coincidences.length;
     }, []);
     require$$0.useEffect(() => {
         const reboot = rebootIsRequired.current || prevSuggestions.current !== props.suggestions;
@@ -2095,7 +2287,7 @@ function useFieldAutocomplete(props) {
 
 function RlsFieldAutocompleteTemplate(props) {
     const autocomplete = useFieldAutocomplete(props);
-    const { render, children, formControl, msgErrorDisabled, onSearch, placeholder, rlsTheme, searching } = props;
+    const { render, action, children, formControl, msgErrorDisabled, onSearch, placeholder, rlsTheme, searching } = props;
     const [listInputPlaceholder, setListInputPlaceholder] = require$$0.useState(reactI18n('listInputPlaceholder'));
     require$$0.useEffect(() => {
         return i18n.i18nSubscribe(() => {
@@ -2153,7 +2345,7 @@ function RlsFieldAutocompleteTemplate(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("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.jsx(RlsFieldListSuggestions, { elements: autocomplete.coincidences, visible: autocomplete.listIsVisible, 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 && (jsxRuntimeExports.jsx("button", { className: "rls-field-box__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.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 })] }));
 }
 function RlsFieldAutocomplete(props) {
     const render = require$$0.useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { className: "rls-field-list__ballot", subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
@@ -2424,7 +2616,7 @@ function RlsFieldClock({ children, disabled: disabledProps, formControl, identif
         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("button", { className: "rls-field-clock__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: status.icon }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-clock-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerClock, { formControl: formControl, time: time, disabled: disabled, onListener: onListener }) })] }));
+    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("button", { className: "rls-field-box__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: status.icon }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-clock-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerClock, { formControl: formControl, time: time, disabled: disabled, onListener: onListener }) })] }));
 }
 
 const DATE_FORMAT = '{dd}/{mx}/{yy}';
@@ -2561,7 +2753,7 @@ function RlsFieldDate({ children, date, disabled: disabledProps, formControl, fo
         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("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: status.icon }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
+    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("button", { className: "rls-field-box__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: status.icon }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
 }
 
 function rangeFormatTemplate({ maxDate, minDate }) {
@@ -2676,18 +2868,11 @@ function RlsFieldDateRange({ children, date, disabled: disabledProps, formContro
         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("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: status.icon }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-range-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
+    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("button", { className: "rls-field-box__action", onClick: onClickAction, disabled: disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: status.icon }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-range-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
 }
 
 function useFieldSelect(props) {
-    const count = require$$0.useRef(props.suggestions.length);
-    const controller = useListController({
-        ...props,
-        count: count.current
-    });
-    require$$0.useEffect(() => {
-        count.current = props.suggestions.length;
-    }, [props.suggestions]);
+    const controller = useListController(props);
     require$$0.useEffect(() => {
         props.disabled && controller.setState({ focused: false });
     }, [props.disabled]);
@@ -2783,7 +2968,7 @@ function useFieldSelect(props) {
 
 function RlsFieldSelectTemplate(props) {
     const select = useFieldSelect(props);
-    const { render, suggestions, children, formControl, msgErrorDisabled, placeholder, rlsTheme, unremovable } = props;
+    const { render, suggestions, action, children, formControl, msgErrorDisabled, placeholder, rlsTheme, unremovable } = props;
     const disabled = require$$0.useMemo(() => {
         return formControl?.disabled || props.disabled;
     }, [formControl?.disabled, props.disabled]);
@@ -2801,7 +2986,7 @@ function RlsFieldSelectTemplate(props) {
         props.readOnly,
         disabled
     ]);
-    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("button", { className: '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.jsx(RlsFieldListSuggestions, { elements: suggestions, visible: select.listIsVisible, 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 && (jsxRuntimeExports.jsx("button", { className: 'rls-field-box__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.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 })] }));
 }
 function RlsFieldSelect(props) {
     const render = require$$0.useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { className: "rls-field-list__ballot", subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
@@ -3344,15 +3529,16 @@ function RlsApplication({ children }) {
         }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsConfirmation] }));
 }
 
-function useDropdownController() {
+function useDropdownController(effect = '0% 0%') {
     const [visible, setVisible] = require$$0.useState(false);
     const component = require$$0.useRef(null);
     const open = require$$0.useCallback((positionX, positionY) => {
-        component.current.style.transformOrigin = '0% 0%';
+        const content = component.current.querySelector('.rls-dropdown__content');
+        content.style.transformOrigin = effect;
         component.current.style.top = `${positionY}px`;
         component.current.style.left = `${positionX}px`;
         setVisible(true);
-    }, []);
+    }, [effect]);
     const openWithEvent = require$$0.useCallback((event) => {
         const rectContent = component.current.getBoundingClientRect();
         const rectElement = event.target.getBoundingClientRect();
@@ -3400,7 +3586,8 @@ function useDropdownController() {
                 effect = '0% 0%';
                 break;
         }
-        component.current.style.transformOrigin = effect;
+        const content = component.current.querySelector('.rls-dropdown__content');
+        content.style.transformOrigin = effect;
         component.current.style.top = `${positionY}px`;
         component.current.style.left = `${positionX}px`;
         setVisible(true);
@@ -3430,12 +3617,15 @@ function usePortalController() {
 }
 
 exports.ConfirmationResult = ConfirmationResult;
+exports.RlsAccordion = RlsAccordion;
 exports.RlsAlert = RlsAlert;
 exports.RlsAmount = RlsAmount;
 exports.RlsApplication = RlsApplication;
+exports.RlsAreaText = RlsAreaText;
 exports.RlsAvatar = RlsAvatar;
 exports.RlsBadge = RlsBadge;
 exports.RlsBallot = RlsBallot;
+exports.RlsBody = RlsBody;
 exports.RlsBottomSheet = RlsBottomSheet;
 exports.RlsBreadcrumb = RlsBreadcrumb;
 exports.RlsButton = RlsButton;
@@ -3459,6 +3649,7 @@ exports.RlsDatatableSubheader = RlsDatatableSubheader;
 exports.RlsDatatableTitle = RlsDatatableTitle;
 exports.RlsDatatableTotals = RlsDatatableTotals;
 exports.RlsDropdown = RlsDropdown;
+exports.RlsFieldArea = RlsFieldArea;
 exports.RlsFieldAutocomplete = RlsFieldAutocomplete;
 exports.RlsFieldAutocompleteTemplate = RlsFieldAutocompleteTemplate;
 exports.RlsFieldClock = RlsFieldClock;
@@ -3492,11 +3683,13 @@ exports.RlsLabel = RlsLabel;
 exports.RlsLabelCheckBox = RlsLabelCheckBox;
 exports.RlsLabelRadioButton = RlsLabelRadioButton;
 exports.RlsLabelSwitch = RlsLabelSwitch;
+exports.RlsMessageEmpty = RlsMessageEmpty;
 exports.RlsMessageFormError = RlsMessageFormError;
 exports.RlsMessageIcon = RlsMessageIcon;
 exports.RlsModal = RlsModal;
 exports.RlsModalSheet = RlsModalSheet;
 exports.RlsNavbar = RlsNavbar;
+exports.RlsNavbarMenu = RlsNavbarMenu;
 exports.RlsPagination = RlsPagination;
 exports.RlsPickerClock = RlsPickerClock;
 exports.RlsPickerDate = RlsPickerDate;