@rolster/react-components 18.26.15 → 18.26.17

package/dist/es/assets/{index-BRZjdUv6.css → index-Dzi7TziB.css}

@@ -2888,34 +2888,61 @@
 } /*# sourceMappingURL=FieldSelect.css.map */
 
 .rls-form-navigation {
+  --pvt-component-transform: translateX(100%);
+  --pvt-component-opacity: 0;
+  --pvt-component-visibility: hidden;
+  --pvt-component-transition: 160ms;
+  --pvt-backdrop-opacity: 0;
+  --pvt-backdrop-bottom: initial;
   position: fixed;
-  top: var(--rls-sizing-x8);
-  right: var(--rls-sizing-x8);
-  width: calc(100% - var(--rls-sizing-x16));
-  max-width: 160rem;
-  height: auto;
-  max-height: calc(var(--rls-html-max-height) - var(--rls-sizing-x16));
-  z-index: var(--rls-z-index-12);
-  padding: var(--rls-sizing-x8) var(--rls-sizing-x8) var(--rls-sizing-x12)
-    var(--rls-sizing-x8);
-  box-sizing: border-box;
-  background: var(--rls-app-color-050);
-  border-radius: var(--rls-sizing-x4);
-  box-shadow: var(--rls-dark-shadow-center-8);
-  transform: translateX(calc(100% + var(--rls-sizing-x16)));
-  transition: transform 240ms 0ms var(--rls-standard-curve);
+  display: flex;
+  top: 0rem;
+  left: 0rem;
+  width: 100%;
+  height: 100%;
+  z-index: var(--rls-z-index-24);
+  visibility: hidden;
+  justify-content: flex-end;
 }
 .rls-form-navigation--visible {
-  transform: translateX(0%);
+  --pvt-component-visibility: visible;
+  --pvt-component-opacity: 1;
+  --pvt-component-transform: translateX(0%);
+  --pvt-backdrop-bottom: 0rem;
+  --pvt-backdrop-opacity: 1;
+  visibility: visible;
 }
-.rls-form-navigation__header {
-  margin-bottom: var(--rls-sizing-x8);
+.rls-form-navigation__component {
+  position: absolute;
+  display: flex;
+  width: calc(100% - var(--rls-sizing-x16));
+  max-width: var(--rlc-form-navigation-max-width, 160rem);
+  height: 100%;
+  flex-direction: column;
+  opacity: var(--pvt-component-opacity);
+  visibility: var(--pvt-component-visibility);
+  z-index: var(--rls-z-index-2);
+  border-radius: var(--rls-sizing-x4) 0rem 0rem var(--rls-sizing-x4);
+  background: var(--rlc-form-navigation-background, var(--rls-app-color-050));
+  transform: var(--pvt-component-transform);
+  transition: opacity var(--pvt-component-transition) 0ms
+      var(--rls-deceleration-curve),
+    transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
+    visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
 }
-.rls-form-navigation__header .rls-button-action {
-  width: var(--rls-sizing-x12);
-  height: var(--rls-sizing-x12);
-  padding: 0rem;
-  float: right;
+.rls-form-navigation__backdrop {
+  position: absolute;
+  display: block;
+  top: 0rem;
+  left: 0rem;
+  right: 0rem;
+  bottom: var(--pvt-backdrop-bottom);
+  opacity: var(--pvt-backdrop-opacity);
+  z-index: 1;
+  background: var(--rls-theme-backdrop-900);
+  backdrop-filter: blur(2px);
+  transition: opacity 120ms 0ms var(--rls-deceleration-curve),
+    bottom 120ms 0ms var(--rls-deceleration-curve);
 } /*# sourceMappingURL=FormNavigation.css.map */
 
 .rls-image-editor {

package/dist/es/index.js

@@ -3360,11 +3360,39 @@ function RlsFieldSelect(props) {
     return jsxRuntimeExports.jsx(RlsFieldSelectTemplate, { ...props, render: render });
 }
 
-function RlsFormNavigation({ children, visible, rlsTheme }) {
-    const className = useMemo(() => {
-        return renderClassStatus('rls-form-navigation', { visible });
-    }, [visible]);
-    return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-form-navigation__body", children: children }) }));
+function RlsFormNavigation({ onAutoClose, children, className, visible, rlsTheme }) {
+    const classNameForm = useMemo(() => {
+        return renderClassStatus('rls-form-navigation', { visible }, className);
+    }, [visible, className]);
+    const onClickBackdrop = useCallback(() => {
+        onAutoClose && onAutoClose();
+    }, [onAutoClose]);
+    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameForm, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-form-navigation__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-form-navigation__backdrop", onClick: onClickBackdrop })] }), document.body);
+}
+
+function usePortalController(component) {
+    const [children, setChildren] = useState(component);
+    const [visible, setVisible] = useState(false);
+    const open = useCallback((children) => {
+        setVisible(true);
+        children && setChildren(children);
+    }, []);
+    const close = useCallback(() => {
+        setVisible(false);
+    }, []);
+    return { children, close, open, visible };
+}
+
+function useFormNavigationController(component) {
+    const portal = usePortalController(component);
+    const FormNavigation = useMemo(() => {
+        return (jsxRuntimeExports.jsx(RlsFormNavigation, { visible: portal.visible, children: portal.children }));
+    }, [portal.children, portal.visible]);
+    return {
+        close: portal.close,
+        FormNavigation,
+        open: portal.open
+    };
 }
 
 function useRelocationOnComponent({ container, element, onDrag }) {
@@ -3831,14 +3859,16 @@ function useSnackbar() {
         visible: false
     });
     const onClose = useCallback(() => {
+        timeoutId.current && clearTimeout(timeoutId.current);
+        timeoutId.current = undefined;
         setState((state) => ({ ...state, visible: false }));
     }, []);
     const rlsSnackbar = (jsxRuntimeExports.jsx(RlsSnackbar, { ...state.config, visible: state.visible, onClose: onClose }));
     useEffect(() => {
         if (state.visible) {
             timeoutId.current = setTimeout(() => {
-                setState((state) => ({ ...state, visible: false }));
                 timeoutId.current = undefined;
+                setState((state) => ({ ...state, visible: false }));
             }, duration.current);
         }
         else if (timeoutId.current) {
@@ -3917,5 +3947,5 @@ function useDatatable() {
     return { scrolleable, tableRef };
 }
 
-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, 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, 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, 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, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, 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, 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, useFormNavigationController, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, useRelocationOnComponent, useResize, useSnackbar };
 //# sourceMappingURL=index.js.map