@rolster/react-components 19.1.11 → 19.1.13

package/dist/es/assets/{index-CDqDWlee.css → index-Dvak5slE.css}

@@ -425,6 +425,7 @@
   color: var(--pvt-button-content-font-color);
   border: var(--pvt-button-content-border);
   background: var(--pvt-button-content-background);
+  pointer-events: none;
 }
 .rls-button__content::before {
   position: absolute;
@@ -592,6 +593,9 @@
   opacity: 0.5;
   pointer-events: none;
 }
+.rls-button-action__content {
+  pointer-events: none;
+}
 .rls-button-action__tooltip {
   position: absolute;
   top: calc(100% + var(--rls-sizing-x6));
@@ -769,6 +773,8 @@
   --pvt-value-font-color: var(--pvt-font-color);
   --pvt-value-opacity: 1;
   --pvt-component-font-color: transparent;
+  --rlc-amount-height: var(--pvt-height);
+  --rlc-amount-align-items: center;
   position: relative;
   width: var(--rlc-input-width, 100%);
 }
@@ -833,8 +839,6 @@
 } /*# sourceMappingURL=Input.css.map */
 
 .rls-input-decimal {
-  --rlc-amount-height: var(--rlc-input-height);
-  --rlc-amount-align-items: center;
   --rlc-tabular-text-font-size: var(--rls-input-font-size);
   --rlc-tabular-text-char-width: 5.25rem;
   position: relative;
@@ -843,8 +847,6 @@
 } /*# sourceMappingURL=InputDecimal.css.map */
 
 .rls-input-money {
-  --rlc-amount-height: var(--rlc-input-height);
-  --rlc-amount-align-items: center;
   --rlc-tabular-text-font-size: var(--rls-input-font-size);
   --rlc-tabular-text-char-width: 5.25rem;
   position: relative;
@@ -1277,8 +1279,8 @@
     --rlc-ballot-title-letter-spacing,
     var(--rls-label-letter-spacing)
   );
-  --pvt-title-height: var(
-    --rlc-ballot-title-height,
+  --pvt-title-line-height: var(
+    --rlc-ballot-title-line-height,
     var(--rls-label-line-height)
   );
   --pvt-subtitle-font-size: var(
@@ -1289,8 +1291,8 @@
     --rlc-ballot-subtitle-letter-spacing,
     var(--rls-smalltext-letter-spacing)
   );
-  --pvt-subtitle-height: var(
-    --rlc-ballot-subtitle-height,
+  --pvt-subtitle-line-height: var(
+    --rlc-ballot-subtitle-line-height,
     var(--rls-smalltext-line-height)
   );
   position: relative;
@@ -1334,6 +1336,7 @@
   );
   font-size: var(--pvt-title-font-size);
   letter-spacing: var(--pvt-title-letter-spacing);
+  line-height: var(--pvt-title-line-height);
 }
 .rls-ballot__subtitle {
   --rlc-skeleton-text-font-size: var(--pvt-subtitle-font-size);
@@ -1348,6 +1351,7 @@
   );
   font-size: var(--pvt-subtitle-font-size);
   letter-spacing: var(--pvt-subtitle-letter-spacing);
+  line-height: var(--pvt-subtitle-line-height);
   overflow: var(--rlc-ballot-subtitle-overflow, initial);
   text-overflow: var(--rlc-ballot-subtitle-text-overflow, initial);
   white-space: var(--rlc-ballot-subtitle-white-space, initial);
@@ -2546,6 +2550,38 @@
   }
 } /*# sourceMappingURL=Confirmation.css.map */
 
+.rls-dropdown {
+  --pvt-content-opacity: 0;
+  --pvt-content-transform: scale(0, 0);
+  position: var(--rlc-dropdown-position, absolute);
+  display: block;
+  opacity: 0;
+  width: auto;
+  z-index: -16;
+  transition: opacity 240ms 0ms var(--rls-standard-curve);
+}
+.rls-dropdown--visible {
+  --pvt-content-opacity: 1;
+  --pvt-content-transform: scale(1, 1);
+  opacity: 1;
+  z-index: var(--rlc-dropdown-z-index, var(--rls-z-index-4));
+}
+.rls-dropdown__content {
+  display: block;
+  width: auto;
+  max-width: var(--rlc-dropdown-max-width, 150rem);
+  border-radius: var(--rlc-dropdown-radius, var(--rls-sizing-x6));
+  padding: var(--rlc-dropdown-padding, var(--rls-sizing-x6));
+  box-sizing: border-box;
+  border: var(--rlc-dropdown-border, var(--rls-app-border-1-200));
+  background: var(--rlc-dropdown-background, var(--rls-app-color-050));
+  opacity: var(--pvt-content-opacity);
+  transform: var(--pvt-content-transform);
+  transition:
+    transform 240ms 0ms var(--rls-standard-curve),
+    opacity 240ms 0ms var(--rls-standard-curve);
+} /*# sourceMappingURL=Dropdown.css.map */
+
 .rls-field-autocomplete {
   --pvt-control-width: 100%;
   --pvt-control-opacity: 1;

package/dist/es/index.js

@@ -582,7 +582,7 @@ function RlsImage({ src, rlsTheme }) {
 }
 
 function RlsInput({ children, decimals, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type, value }) {
-    const valueInitial = formControl?.value ?? value ? String(value) : '';
+    const valueInitial = (formControl?.value ?? value) ? String(value) : '';
     const [valueInput, setValueInput] = useState(valueInitial);
     const [focused, setFocused] = useState(false);
     const changeIsInternal = useRef(false);
@@ -593,7 +593,7 @@ function RlsInput({ children, decimals, disabled, formControl, identifier, onBlu
         }
         changeIsInternal.current = false;
     }, [formControl?.value]);
-    const _onChange = useCallback((event) => {
+    const onChangeInput = useCallback((event) => {
         const valueInput = event.target.value;
         const value = type === 'number'
             ? parseFloat((+valueInput).toFixed(decimals))
@@ -603,22 +603,22 @@ function RlsInput({ children, decimals, disabled, formControl, identifier, onBlu
         setValueInput(valueInput);
         formControl?.setValue(value);
     }, [formControl, onValue, type, decimals]);
-    const _onKeyDown = useCallback((event) => {
-        onKeyDown && onKeyDown(event);
-        event.key === 'Enter' && onEnter && onEnter();
+    const onKeyDownInput = useCallback((event) => {
+        onKeyDown?.(event);
+        event.key === 'Enter' && onEnter?.();
     }, [onKeyDown, onEnter]);
-    const _onKeyUp = useCallback((event) => {
-        onKeyUp && onKeyUp(event);
+    const onKeyUpInput = useCallback((event) => {
+        onKeyUp?.(event);
     }, [onKeyUp]);
-    const _onFocus = useCallback(() => {
+    const onFocusInput = useCallback(() => {
         formControl?.focus();
         setFocused(() => true);
-        onFocus && onFocus();
+        onFocus?.();
     }, [formControl, onFocus]);
-    const _onBlur = useCallback(() => {
+    const onBlurInput = useCallback(() => {
         formControl?.blur();
         setFocused(() => false);
-        onBlur && onBlur();
+        onBlur?.();
     }, [formControl, onBlur]);
     const className = useMemo(() => {
         return renderClassStatus('rls-input', {
@@ -626,7 +626,7 @@ function RlsInput({ children, decimals, disabled, formControl, identifier, onBlu
             focused: formControl?.focused ?? focused
         });
     }, [formControl?.focused, formControl?.disabled, focused, disabled]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, children: [jsxRuntimeExports.jsx("input", { ref: formControl?.elementRef, className: "rls-input__component", autoComplete: "off", type: type ?? 'text', placeholder: placeholder, disabled: formControl?.disabled || disabled, readOnly: readOnly, onFocus: _onFocus, onBlur: _onBlur, onChange: _onChange, onKeyDown: _onKeyDown, onKeyUp: _onKeyUp, value: valueInput }), jsxRuntimeExports.jsx("span", { className: "rls-input__value", children: children })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, children: [jsxRuntimeExports.jsx("input", { ref: formControl?.elementRef, className: "rls-input__component", autoComplete: "off", type: type ?? 'text', placeholder: placeholder, disabled: formControl?.disabled || disabled, readOnly: readOnly, onFocus: onFocusInput, onBlur: onBlurInput, onChange: onChangeInput, onKeyDown: onKeyDownInput, onKeyUp: onKeyUpInput, value: valueInput }), jsxRuntimeExports.jsx("span", { className: "rls-input__value", children: children })] }));
 }
 
 function RlsInputDecimal(props) {
@@ -782,11 +782,11 @@ function RlsAlert({ bordered, children, icon, identifier, rlsTheme }) {
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-alert__icon", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsx("div", { className: "rls-alert__content", children: children })] }));
 }
 
-function RlsBallot({ bordered, children, img, initials, skeleton, subtitle, rlsTheme }) {
-    const className = useMemo(() => {
-        return renderClassStatus('rls-ballot', { bordered, skeleton });
-    }, [bordered, skeleton]);
-    return (jsxRuntimeExports.jsxs("div", { className: className, "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 RlsBallot({ bordered, className, children, img, initials, skeleton, subtitle, rlsTheme }) {
+    const classNameBallot = useMemo(() => {
+        return renderClassStatus('rls-ballot', { bordered, skeleton }, className);
+    }, [bordered, skeleton, className]);
+    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 RlsButtonProgress({ icon, disabled, onClick, progressing, rlsTheme }) {
@@ -1572,13 +1572,14 @@ function RlsToolbar({ actions, children, subtitle }) {
     return (jsxRuntimeExports.jsxs("div", { className: "rls-toolbar", children: [jsxRuntimeExports.jsxs("div", { className: "rls-toolbar__description", children: [children && jsxRuntimeExports.jsx("label", { className: "rls-toolbar__title", children: children }), subtitle && (jsxRuntimeExports.jsx("label", { className: "rls-toolbar__subtitle smalltext-semibold", children: subtitle }))] }), actions && (jsxRuntimeExports.jsx("div", { className: "rls-toolbar__actions", children: actions.map((action, index) => (jsxRuntimeExports.jsx("div", { children: action }, index))) }))] }));
 }
 
-function RlsBottomSheet({ children, className, onAutoClose, visible, rlsTheme }) {
+function RlsBottomSheet({ autoclose, children, className, controller, onBackdrop, visible, rlsTheme }) {
     const classNameSheet = useMemo(() => {
-        return renderClassStatus('rls-bottom-sheet', { visible }, className);
-    }, [className, visible]);
+        return renderClassStatus('rls-bottom-sheet', { visible: controller?.visible ?? visible }, className);
+    }, [className, visible, controller?.visible]);
     const onClickBackdrop = useCallback(() => {
-        onAutoClose && onAutoClose();
-    }, [onAutoClose]);
+        autoclose && controller?.close();
+        onBackdrop?.();
+    }, [autoclose, controller, onBackdrop]);
     return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameSheet, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-bottom-sheet__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-bottom-sheet__backdrop", onClick: onClickBackdrop })] }), document.body);
 }
 
@@ -1751,6 +1752,25 @@ function RlsDatatableFloating({ children, className, identifier, invested, rlsTh
     return (jsxRuntimeExports.jsx("td", { id: identifier, className: classNameFloating, "rls-theme": rlsTheme, children: children }));
 }
 
+function RlsDropdown({ children, controller, rlsTheme }) {
+    const className = useMemo(() => {
+        return renderClassStatus('rls-dropdown', {
+            visible: controller.visible
+        });
+    }, [controller.visible]);
+    useEffect(() => {
+        function onCloseDropdown({ target }) {
+            !controller.component.current.contains(target) &&
+                controller.close();
+        }
+        document.addEventListener('click', onCloseDropdown);
+        return () => {
+            document.removeEventListener('click', onCloseDropdown);
+        };
+    }, []);
+    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;
 }
@@ -2054,17 +2074,18 @@ function RlsFieldAutocompleteTemplate(props) {
     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.jsxs("div", { className: classNameSuggestions, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: autocomplete.refList, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: autocomplete.refInput, className: "rls-field-list__ul__control", type: "text", placeholder: labels.listInputPlaceholder, value: autocomplete.pattern, onChange: onChangePattern, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: onKeyDownPattern, disabled: disabled || searching }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: onClickPattern, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), autocomplete.coincidences.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: autocomplete.onClickElement(element), onKeyDown: autocomplete.onKeydownElement(element), children: render(element) }, index))), !autocomplete.coincidences.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 rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: autocomplete.onClickBackdrop })] })] }));
 }
 function RlsFieldAutocomplete(props) {
-    const render = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
+    const render = 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 }) })), []);
     return jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: render });
 }
 
-function RlsModal({ children, className, onAutoClose, visible, rlsTheme }) {
+function RlsModal({ autoclose, children, className, controller, onBackdrop, visible, rlsTheme }) {
     const classNameModal = useMemo(() => {
-        return renderClassStatus('rls-modal', { visible }, className);
-    }, [className, visible]);
+        return renderClassStatus('rls-modal', { visible: controller?.visible ?? visible }, className);
+    }, [className, visible, controller?.visible]);
     const onClickBackdrop = useCallback(() => {
-        onAutoClose && onAutoClose();
-    }, [onAutoClose]);
+        autoclose && controller?.close();
+        onBackdrop?.();
+    }, [autoclose, controller, onBackdrop]);
     return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameModal, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal__backdrop", onClick: onClickBackdrop })] }), document.body);
 }
 
@@ -2723,14 +2744,14 @@ function RlsFieldSelectTemplate(props) {
     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.jsxs("div", { className: classNameSuggestions, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: select.refList, 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 rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: select.onClickBackdrop })] })] }));
 }
 function RlsFieldSelect(props) {
-    const render = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
+    const render = 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 }) })), []);
     return jsxRuntimeExports.jsx(RlsFieldSelectTemplate, { ...props, render: render });
 }
 
-function RlsFormNavigation({ children, className, visible, rlsTheme }) {
+function RlsFormNavigation({ children, className, controller, visible, rlsTheme }) {
     const classNameForm = useMemo(() => {
-        return renderClassStatus('rls-form-navigation', { visible }, className);
-    }, [visible, className]);
+        return renderClassStatus('rls-form-navigation', { visible: controller?.visible ?? visible }, className);
+    }, [className, visible, controller?.visible]);
     return ReactDOM.createPortal(jsxRuntimeExports.jsx("div", { className: classNameForm, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-form-navigation__component", children: children }) }), document.body);
 }
 
@@ -3263,6 +3284,80 @@ function RlsApplication({ children }) {
         }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsConfirmation] }));
 }
 
+function useDropdownController() {
+    const [visible, setVisible] = useState(false);
+    const component = useRef(null);
+    const open = useCallback((positionX, positionY) => {
+        component.current.style.transformOrigin = '0% 0%';
+        component.current.style.top = `${positionY}px`;
+        component.current.style.left = `${positionX}px`;
+        setVisible(true);
+    }, []);
+    const openWithEvent = useCallback((event) => {
+        const rectContent = component.current.getBoundingClientRect();
+        const rectElement = event.target.getBoundingClientRect();
+        let positionX = 0;
+        let positionY = 0;
+        let effect = '0% 0%';
+        let transform = 0;
+        const elementX = rectElement.x + rectElement.width / 2;
+        const elementY = rectElement.y + rectElement.height / 2;
+        if (elementX + rectContent.width <= window.innerWidth) {
+            positionX = elementX;
+            transform += 1;
+        }
+        else if (elementX + rectElement.width - rectContent.width > 0) {
+            positionX = elementX + rectElement.width - rectContent.width;
+            transform += 3;
+        }
+        else {
+            positionX = window.innerWidth - rectContent.width;
+            transform += 1;
+        }
+        if (elementY + rectContent.height <= window.innerHeight) {
+            positionY = elementY;
+            transform += 4;
+        }
+        else if (elementY + rectElement.height - rectContent.height > 0) {
+            positionY = elementY + rectElement.height - rectContent.height;
+            transform += 7;
+        }
+        else {
+            positionY = window.innerHeight - rectContent.height;
+            transform += 4;
+        }
+        switch (transform) {
+            case 7:
+                effect = '100% 0%';
+                break;
+            case 8:
+                effect = '0% 100%';
+                break;
+            case 10:
+                effect = '100% 100%';
+                break;
+            default:
+                effect = '0% 0%';
+                break;
+        }
+        component.current.style.transformOrigin = effect;
+        component.current.style.top = `${positionY}px`;
+        component.current.style.left = `${positionX}px`;
+        setVisible(true);
+        event.stopPropagation();
+    }, []);
+    const close = useCallback(() => {
+        setVisible(false);
+    }, []);
+    return {
+        close,
+        component,
+        open,
+        openWithEvent,
+        visible
+    };
+}
+
 function usePortalController() {
     const [visible, setVisible] = useState(false);
     const open = useCallback(() => {
@@ -3274,5 +3369,5 @@ function usePortalController() {
     return { close, open, visible };
 }
 
-export { ConfirmationResult, RlsAlert, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonOption, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldClock, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalSheet, RlsNavbar, RlsPagination, RlsPickerClock, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, rangeFormatTemplate, renderClassStatus, setErrorsI18n, useConfirmation, useDatatable, useFieldAutocomplete, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, usePortalController, useRelocationOnComponent, useResize, useSnackbar };
+export { ConfirmationResult, RlsAlert, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonOption, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsDropdown, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldClock, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalSheet, RlsNavbar, RlsPagination, RlsPickerClock, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, rangeFormatTemplate, renderClassStatus, setErrorsI18n, useConfirmation, useDatatable, useDropdownController, useFieldAutocomplete, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, usePortalController, useRelocationOnComponent, useResize, useSnackbar };
 //# sourceMappingURL=index.js.map