@rolster/react-components 19.1.12 → 19.1.13

package/dist/es/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/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) {
@@ -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;
 }
@@ -2058,13 +2078,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 = 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);
 }
 
@@ -2727,10 +2748,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 = 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