@rolster/react-components 18.26.14 → 18.26.16

package/dist/cjs/assets/{index-DyZvhIb0.css → index-BRZjdUv6.css}

@@ -3181,21 +3181,21 @@
 .rls-snackbar {
   position: fixed;
   display: flex;
-  column-gap: var(--rls-sizing-x6);
-  bottom: 0rem;
   left: var(--rlc-snackbar-left, 50%);
-  z-index: 32;
   width: auto;
-  height: auto;
   max-width: 240rem;
+  height: auto;
+  bottom: 0rem;
+  column-gap: var(--rls-sizing-x6);
   padding: var(--rls-sizing-x6);
   box-sizing: border-box;
   border-radius: var(--rls-sizing-x6);
   background: var(--rls-app-color-050);
   border-left: var(--rls-theme-border-4-400);
-  transform: translate(-50%, 100%);
+  transform: translate(-50%, calc(100% + var(--rls-sizing-x4)));
   transition: all 160ms 0ms var(--rls-standard-curve);
   box-shadow: var(--rls-app-shadow-center-8);
+  z-index: var(--rls-z-index-32);
 }
 .rls-snackbar--visible {
   transform: translate(-50%, calc(0% - var(--rls-sizing-x8)));

package/dist/cjs/index.js

@@ -3826,37 +3826,38 @@ function RlsSnackbar({ content, onClose, icon, rlsTheme, title, visible }) {
     return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-snackbar__avatar", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsxs("div", { className: "rls-snackbar__component", children: [jsxRuntimeExports.jsxs("div", { className: "rls-snackbar__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-snackbar__title", children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-snackbar__content", children: content })] })] }));
 }
 function useSnackbar() {
+    const timeoutId = require$$0.useRef();
+    const duration = require$$0.useRef(4000);
     const [state, setState] = require$$0.useState({
         config: {},
-        duration: 4000,
-        timeoutId: undefined,
         visible: false
     });
     const onClose = require$$0.useCallback(() => {
-        setState((state) => ({ ...state, timeoutId: undefined, visible: false }));
+        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 }));
     require$$0.useEffect(() => {
         if (state.visible) {
-            const timeoutId = setTimeout(() => {
-                setState((state) => ({
-                    ...state,
-                    timeoutId: undefined,
-                    visible: false
-                }));
-            }, state.duration);
-            setState((state) => ({ ...state, timeoutId }));
+            timeoutId.current = setTimeout(() => {
+                timeoutId.current = undefined;
+                setState((state) => ({ ...state, visible: false }));
+            }, duration.current);
         }
-        else if (state.timeoutId) {
-            clearTimeout(state.timeoutId);
-            setTimeout(() => snackbar(state.config), DURATION_ANIMATION);
+        else if (timeoutId.current) {
+            clearTimeout(timeoutId.current);
+            timeoutId.current = undefined;
+            setTimeout(() => {
+                snackbar(state.config);
+            }, DURATION_ANIMATION);
         }
     }, [state.visible]);
     const snackbar = require$$0.useCallback((config) => {
+        duration.current = calculateDuration(String(config.content));
         setState((state) => ({
             ...state,
             config,
-            duration: calculateDuration(String(config.content)),
             visible: !state.visible
         }));
     }, []);