@rolster/react-components 18.26.16 → 18.26.17

package/dist/cjs/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/cjs/index.js

@@ -3362,11 +3362,39 @@ function RlsFieldSelect(props) {
     return jsxRuntimeExports.jsx(RlsFieldSelectTemplate, { ...props, render: render });
 }
 
-function RlsFormNavigation({ children, visible, rlsTheme }) {
-    const className = require$$0.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 = require$$0.useMemo(() => {
+        return renderClassStatus('rls-form-navigation', { visible }, className);
+    }, [visible, className]);
+    const onClickBackdrop = require$$0.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] = require$$0.useState(component);
+    const [visible, setVisible] = require$$0.useState(false);
+    const open = require$$0.useCallback((children) => {
+        setVisible(true);
+        children && setChildren(children);
+    }, []);
+    const close = require$$0.useCallback(() => {
+        setVisible(false);
+    }, []);
+    return { children, close, open, visible };
+}
+
+function useFormNavigationController(component) {
+    const portal = usePortalController(component);
+    const FormNavigation = require$$0.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 }) {
@@ -4015,6 +4043,7 @@ exports.useConfirmation = useConfirmation;
 exports.useDatatable = useDatatable;
 exports.useFieldAutocomplete = useFieldAutocomplete;
 exports.useFieldSelect = useFieldSelect;
+exports.useFormNavigationController = useFormNavigationController;
 exports.useFormSingleSelectionController = useFormSingleSelectionController;
 exports.useFormToggleController = useFormToggleController;
 exports.useImageEditorController = useImageEditorController;