@stokr/components-library 2.3.74 → 2.3.76

package/dist/components/Modal/SideModal.js

@@ -13,6 +13,45 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function findScrolledElement() {
+  let best = null;
+  function walk(el) {
+    if (!el || el.nodeType !== 1) return;
+    const s = getComputedStyle(el);
+    const scrollable = (s.overflowY === 'auto' || s.overflowY === 'scroll' || s.overflow === 'auto' || s.overflow === 'scroll') && el.scrollHeight > el.clientHeight && el.scrollTop > 0;
+    if (scrollable && (!best || el.scrollTop > best.scrollTop)) best = {
+      el,
+      scrollTop: el.scrollTop
+    };
+    for (let i = 0; i < el.children.length; i++) walk(el.children[i]);
+  }
+  walk(document.body);
+  return best;
+}
+function restoreScroll(saved) {
+  if (!saved) return;
+  if (saved.type === 'window') {
+    window.scrollTo(0, saved.y);
+  } else if (saved.el && document.contains(saved.el)) {
+    saved.el.scrollTop = saved.scrollTop;
+  }
+}
+function clearBodyLock() {
+  const {
+    style
+  } = document.body;
+  const docEl = document.documentElement;
+  style.position = '';
+  style.top = '';
+  style.left = '';
+  style.right = '';
+  style.width = '';
+  style.height = '';
+  style.overflow = '';
+  style.paddingRight = '';
+  docEl.style.overflow = '';
+  docEl.style.setProperty('--scrollbar-compensation', '0px');
+}
 const SideModal = _ref => {
   let {
       children,
@@ -27,26 +66,56 @@ const SideModal = _ref => {
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const [isVisible, setIsVisible] = (0, _react.useState)(false);
+  const savedScroll = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
     if (isOpen) {
+      const found = findScrolledElement();
+      if (found) savedScroll.current = found;else if (window.scrollY > 0) savedScroll.current = {
+        type: 'window',
+        y: window.scrollY
+      };else savedScroll.current = null;
+      const saved = savedScroll.current;
       const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-      document.documentElement.style.overflow = 'hidden';
-      document.body.style.overflow = 'hidden';
-      document.body.style.paddingRight = "".concat(scrollbarWidth, "px");
-      document.documentElement.style.setProperty('--scrollbar-compensation', "".concat(scrollbarWidth, "px"));
+      const isWindowScroll = saved && saved.type === 'window';
+      if (isWindowScroll) {
+        // Position-fixed lock: avoids browser resetting scroll when overflow changes
+        const y = saved.y;
+        const docHeight = document.documentElement.scrollHeight;
+        document.documentElement.style.overflow = 'hidden';
+        document.documentElement.style.setProperty('--scrollbar-compensation', "".concat(scrollbarWidth, "px"));
+        document.body.style.position = 'fixed';
+        document.body.style.top = "-".concat(y, "px");
+        document.body.style.left = '0';
+        document.body.style.right = '0';
+        document.body.style.width = '100%';
+        document.body.style.height = "".concat(docHeight, "px");
+        document.body.style.paddingRight = "".concat(scrollbarWidth, "px");
+      } else {
+        // Overflow lock; for element scroll we restore after lock
+        document.documentElement.style.overflow = 'hidden';
+        document.body.style.overflow = 'hidden';
+        document.body.style.paddingRight = "".concat(scrollbarWidth, "px");
+        document.documentElement.style.setProperty('--scrollbar-compensation', "".concat(scrollbarWidth, "px"));
+        if (saved) {
+          requestAnimationFrame(() => {
+            restoreScroll(saved);
+            requestAnimationFrame(() => restoreScroll(saved));
+          });
+        }
+      }
       setTimeout(() => setIsVisible(true), 10);
     } else {
-      document.documentElement.style.overflow = '';
-      document.body.style.overflow = '';
-      document.body.style.paddingRight = '';
-      document.documentElement.style.setProperty('--scrollbar-compensation', '0px');
+      const saved = savedScroll.current;
+      savedScroll.current = null;
+      clearBodyLock();
       setIsVisible(false);
+      if (saved) requestAnimationFrame(() => restoreScroll(saved));
     }
     return () => {
-      document.documentElement.style.overflow = '';
-      document.body.style.overflow = '';
-      document.body.style.paddingRight = '';
-      document.documentElement.style.setProperty('--scrollbar-compensation', '0px');
+      const saved = savedScroll.current;
+      savedScroll.current = null;
+      clearBodyLock();
+      if (saved) requestAnimationFrame(() => restoreScroll(saved));
     };
   }, [isOpen]);
 

package/dist/hooks/useTransactionPolling.js

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTransactionPolling = exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Generic polling hook. Calls fetcher (with optional payload) until isSuccess(response)
+ * is true or maxAttempts is reached.
+ *
+ * @param {Object} options
+ * @param {function(payload?: any): Promise<any>} options.fetcher - Required. Async function called each poll. Receives options.payload if provided.
+ * @param {any} [options.payload] - Optional. Passed to fetcher each poll. Omit when fetcher needs no args. For objects, use a stable reference (e.g. useMemo) to avoid restarting every render.
+ * @param {boolean} [options.enabled=true] - When false, polling does not start. Use to gate on e.g. having an id.
+ * @param {function(any): boolean} [options.isSuccess] - Predicate to treat response as success. Default: truthy check.
+ * @param {number} [options.pollingInterval=5000] - Ms between polls.
+ * @param {number} [options.maxAttempts=360] - Max poll attempts (~30 min at 5s).
+ * @param {number} [options.delayBeforeStart=2000] - Ms before first poll.
+ * @param {function(any)} [options.onSuccess] - Called with response when isSuccess(response) is true.
+ * @param {function(Error)} [options.onError] - Called on fetcher error.
+ * @param {function()} [options.onMaxAttemptsReached] - Called when attempts reach maxAttempts.
+ * @returns {{ isLoading: boolean, error: Error|null, attempts: number, isPolling: boolean, maxAttempts: number }}
+ */
+const useTransactionPolling = function () {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    fetcher,
+    payload,
+    enabled = true,
+    isSuccess = response => Boolean(response),
+    pollingInterval = 5000,
+    maxAttempts = 360,
+    delayBeforeStart = 2000,
+    onSuccess,
+    onError,
+    onMaxAttemptsReached
+  } = options;
+  if (typeof fetcher !== 'function') {
+    throw new Error('useTransactionPolling: options.fetcher is required and must be a function');
+  }
+  const [isLoading, setIsLoading] = (0, _react.useState)(false);
+  const [error, setError] = (0, _react.useState)(null);
+  const [attempts, setAttempts] = (0, _react.useState)(0);
+  const [isPolling, setIsPolling] = (0, _react.useState)(false);
+  const intervalRef = (0, _react.useRef)(null);
+  const timeoutRef = (0, _react.useRef)(null);
+  const completedRef = (0, _react.useRef)(false);
+  const pollRef = (0, _react.useRef)(null);
+  const poll = (0, _react.useCallback)(async () => {
+    if (!enabled || attempts >= maxAttempts || completedRef.current) {
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await fetcher(payload);
+      if (isSuccess(response)) {
+        completedRef.current = true;
+        setIsPolling(false);
+        setIsLoading(false);
+        onSuccess === null || onSuccess === void 0 || onSuccess(response);
+        return;
+      }
+    } catch (err) {
+      console.error('Transaction polling error:', err);
+      setError(err);
+      onError === null || onError === void 0 || onError(err);
+    } finally {
+      setIsLoading(false);
+      setAttempts(prev => prev + 1);
+    }
+  }, [enabled, attempts, maxAttempts, fetcher, payload, isSuccess, onSuccess, onError]);
+  pollRef.current = poll;
+  (0, _react.useEffect)(() => {
+    if (!enabled) return;
+    setIsPolling(true);
+    setAttempts(0);
+    completedRef.current = false;
+    setError(null);
+    const runPoll = () => {
+      var _pollRef$current;
+      return (_pollRef$current = pollRef.current) === null || _pollRef$current === void 0 ? void 0 : _pollRef$current.call(pollRef);
+    };
+    timeoutRef.current = setTimeout(() => {
+      intervalRef.current = setInterval(runPoll, pollingInterval);
+      runPoll();
+    }, delayBeforeStart);
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      setIsPolling(false);
+    };
+  }, [enabled, payload, pollingInterval, delayBeforeStart, maxAttempts]);
+  (0, _react.useEffect)(() => {
+    if (attempts >= maxAttempts && isPolling) {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+      setIsPolling(false);
+      onMaxAttemptsReached === null || onMaxAttemptsReached === void 0 || onMaxAttemptsReached();
+    }
+  }, [attempts, maxAttempts, isPolling, onMaxAttemptsReached]);
+  return {
+    isLoading,
+    error,
+    attempts,
+    isPolling,
+    maxAttempts
+  };
+};
+exports.useTransactionPolling = useTransactionPolling;
+var _default = exports.default = useTransactionPolling;

package/dist/index.js

@@ -1466,6 +1466,17 @@ Object.keys(_useTimer).forEach(function (key) {
     }
   });
 });
+var _useTransactionPolling = require("./hooks/useTransactionPolling");
+Object.keys(_useTransactionPolling).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useTransactionPolling[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useTransactionPolling[key];
+    }
+  });
+});
 var _PaymentDisplay = require("./components/Payment/PaymentDisplay");
 Object.keys(_PaymentDisplay).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "2.3.74",
+  "version": "2.3.76",
   "description": "STOKR - Components Library",
   "main": "dist/index.js",
   "module": "dist/index.js",