@rolster/react-components 19.1.12 → 19.1.13

package/dist/cjs/assets/{index-BamXLzHk.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));
@@ -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/cjs/index.js

@@ -584,7 +584,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] = require$$0.useState(valueInitial);
     const [focused, setFocused] = require$$0.useState(false);
     const changeIsInternal = require$$0.useRef(false);
@@ -595,7 +595,7 @@ function RlsInput({ children, decimals, disabled, formControl, identifier, onBlu
         }
         changeIsInternal.current = false;
     }, [formControl?.value]);
-    const _onChange = require$$0.useCallback((event) => {
+    const onChangeInput = require$$0.useCallback((event) => {
         const valueInput = event.target.value;
         const value = type === 'number'
             ? parseFloat((+valueInput).toFixed(decimals))
@@ -605,22 +605,22 @@ function RlsInput({ children, decimals, disabled, formControl, identifier, onBlu
         setValueInput(valueInput);
         formControl?.setValue(value);
     }, [formControl, onValue, type, decimals]);
-    const _onKeyDown = require$$0.useCallback((event) => {
-        onKeyDown && onKeyDown(event);
-        event.key === 'Enter' && onEnter && onEnter();
+    const onKeyDownInput = require$$0.useCallback((event) => {
+        onKeyDown?.(event);
+        event.key === 'Enter' && onEnter?.();
     }, [onKeyDown, onEnter]);
-    const _onKeyUp = require$$0.useCallback((event) => {
-        onKeyUp && onKeyUp(event);
+    const onKeyUpInput = require$$0.useCallback((event) => {
+        onKeyUp?.(event);
     }, [onKeyUp]);
-    const _onFocus = require$$0.useCallback(() => {
+    const onFocusInput = require$$0.useCallback(() => {
         formControl?.focus();
         setFocused(() => true);
-        onFocus && onFocus();
+        onFocus?.();
     }, [formControl, onFocus]);
-    const _onBlur = require$$0.useCallback(() => {
+    const onBlurInput = require$$0.useCallback(() => {
         formControl?.blur();
         setFocused(() => false);
-        onBlur && onBlur();
+        onBlur?.();
     }, [formControl, onBlur]);
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-input', {
@@ -628,7 +628,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) {
@@ -1574,13 +1574,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 = require$$0.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 = require$$0.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);
 }
 
@@ -1753,6 +1754,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 = require$$0.useMemo(() => {
+        return renderClassStatus('rls-dropdown', {
+            visible: controller.visible
+        });
+    }, [controller.visible]);
+    require$$0.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;
 }
@@ -2060,13 +2080,14 @@ function RlsFieldAutocomplete(props) {
     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 = require$$0.useMemo(() => {
-        return renderClassStatus('rls-modal', { visible }, className);
-    }, [className, visible]);
+        return renderClassStatus('rls-modal', { visible: controller?.visible ?? visible }, className);
+    }, [className, visible, controller?.visible]);
     const onClickBackdrop = require$$0.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);
 }
 
@@ -2729,10 +2750,10 @@ function RlsFieldSelect(props) {
     return jsxRuntimeExports.jsx(RlsFieldSelectTemplate, { ...props, render: render });
 }
 
-function RlsFormNavigation({ children, className, visible, rlsTheme }) {
+function RlsFormNavigation({ children, className, controller, visible, rlsTheme }) {
     const classNameForm = require$$0.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);
 }
 
@@ -3265,6 +3286,80 @@ function RlsApplication({ children }) {
         }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsConfirmation] }));
 }
 
+function useDropdownController() {
+    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%';
+        component.current.style.top = `${positionY}px`;
+        component.current.style.left = `${positionX}px`;
+        setVisible(true);
+    }, []);
+    const openWithEvent = require$$0.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 = require$$0.useCallback(() => {
+        setVisible(false);
+    }, []);
+    return {
+        close,
+        component,
+        open,
+        openWithEvent,
+        visible
+    };
+}
+
 function usePortalController() {
     const [visible, setVisible] = require$$0.useState(false);
     const open = require$$0.useCallback(() => {
@@ -3305,6 +3400,7 @@ exports.RlsDatatableRecord = RlsDatatableRecord;
 exports.RlsDatatableSubheader = RlsDatatableSubheader;
 exports.RlsDatatableTitle = RlsDatatableTitle;
 exports.RlsDatatableTotals = RlsDatatableTotals;
+exports.RlsDropdown = RlsDropdown;
 exports.RlsFieldAutocomplete = RlsFieldAutocomplete;
 exports.RlsFieldAutocompleteTemplate = RlsFieldAutocompleteTemplate;
 exports.RlsFieldClock = RlsFieldClock;
@@ -3370,6 +3466,7 @@ exports.renderClassStatus = renderClassStatus;
 exports.setErrorsI18n = setErrorsI18n;
 exports.useConfirmation = useConfirmation;
 exports.useDatatable = useDatatable;
+exports.useDropdownController = useDropdownController;
 exports.useFieldAutocomplete = useFieldAutocomplete;
 exports.useFieldSelect = useFieldSelect;
 exports.useFormSingleSelectionController = useFormSingleSelectionController;