funda-ui 4.7.111 → 4.7.115

package/lib/esm/Utils/hooks/useHistoryTracker.tsx

@@ -0,0 +1,403 @@
+/**
+ * History Tracker
+ * 
+ * @usage:
+
+const App = () => {
+    const { 
+        history, 
+        forwardHistory,
+        currentUrl, 
+        firstUrl, 
+        clearHistory,
+        goBack
+    } = useHistoryTracker({
+        onChange: ({ 
+            isReady,
+            history, 
+            forwardHistory,
+            currentUrl, 
+            firstUrl, 
+            canGoBack,
+            canGoForward
+        } : { 
+            isReady: boolean;
+            history: string[];
+            forwardHistory: string[];
+            currentUrl: string;
+            firstUrl: string;
+            canGoBack: boolean;
+            canGoForward: boolean;
+        }) => {
+            console.log('--> onChange: ',
+                isReady,
+                history, 
+                forwardHistory,
+                currentUrl, 
+                firstUrl, 
+                canGoBack,
+                canGoForward
+            );
+        }
+    });
+
+    return (
+        <div>
+
+            <div>
+                <h3>First URL:</h3>
+                <p>{firstUrl}</p>
+            </div>
+
+            <div>
+                <h3>Current URL:</h3>
+                <p>{currentUrl}</p>
+            </div>
+
+            <div>
+                <h3>History ({history.length}):</h3>
+                <ul>
+                    {history.map((url, index) => (
+                        <li key={index}>{url}</li>
+                    ))}
+                </ul>
+            </div>
+
+            <div>
+                <h3>Forward History ({forwardHistory.length}):</h3>
+                <ul>
+                    {forwardHistory.map((url, index) => (
+                        <li key={index}>{url}</li>
+                    ))}
+                </ul>
+            </div>
+
+
+            
+            <button onClick={clearHistory}>
+                Clear History
+            </button>
+
+            <button onClick={async () => {
+                try {
+                    const { 
+                        isReady,
+                        history, 
+                        forwardHistory,
+                        canGoBack,
+                        canGoForward
+                    } : { 
+                        isReady: boolean;
+                        history: string[];
+                        forwardHistory: string[];
+                        canGoBack: boolean;
+                        canGoForward: boolean;
+                    } = await goBack();
+
+                    console.log('--> goBack: ', 
+                        isReady,
+                        history, 
+                        forwardHistory,
+                        currentUrl, 
+                        firstUrl, 
+                        canGoBack,
+                        canGoForward
+                    );
+                } catch (error) {
+                    console.error('Navigation failed', error);
+                }
+
+            }}>
+               Back
+            </button>
+
+        </div>
+    );
+};
+
+ */
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+
+export type UseHistoryTrackerChangeFnType = (args: {
+    isReady: boolean;
+    history: string[];
+    forwardHistory: string[],
+    currentUrl: string;
+    firstUrl: string;
+    canGoBack: boolean;
+    canGoForward: boolean;
+}) => void;
+
+
+export type UseHistoryTrackerProps = {
+    onChange?: UseHistoryTrackerChangeFnType | null;
+};
+
+// Create a secure version of useLayoutEffect that is downgraded to useEffect when SSR
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+const useHistoryTracker = (props: UseHistoryTrackerProps) => {
+    const {
+        onChange
+    } = props;
+
+    const [isReady, setIsReady] = useState<boolean>(false);
+    const historyRef = useRef<string[]>([]);
+    const forwardHistoryRef = useRef<string[]>([]);
+    const firstUrlRef = useRef<string>('');
+    const [currentUrl, setCurrentUrl] = useState<string>('');
+    
+    const initialize = useCallback(() => {
+        if (typeof window === 'undefined') return;
+        
+        const currentLocation = window.location.href as string;
+        
+        // If the history is empty, set the first record
+        if (historyRef.current.length === 0) {
+            firstUrlRef.current = currentLocation;
+            historyRef.current = [currentLocation];
+            setCurrentUrl(currentLocation);
+
+            onChange?.({
+                isReady: false,
+                history: [currentLocation],
+                forwardHistory: [],
+                currentUrl: currentLocation,
+                firstUrl: currentLocation,
+                canGoBack: false,
+                canGoForward: false
+            });
+
+        }
+        
+        setIsReady(true);
+    }, []);
+
+    useIsomorphicLayoutEffect(() => {
+        initialize();
+    }, [initialize]);
+
+
+    const clearHistory = useCallback(() => {
+        if (typeof window === 'undefined') return;
+    
+        historyRef.current = [];
+        forwardHistoryRef.current = [];
+        firstUrlRef.current = '';
+        setCurrentUrl('');
+        
+        onChange?.({
+            isReady: true,
+            history: [],
+            forwardHistory: [],
+            currentUrl: '',
+            firstUrl: '',
+            canGoBack: false,
+            canGoForward: false
+
+        });
+    }, [onChange]); // only "onChange"
+
+    const goToHistory = useCallback((index: number) => {
+        if (typeof window === 'undefined') return;
+        if (index < 0 || index >= historyRef.current.length) return;
+        
+        const targetUrl = historyRef.current[index];
+        if (targetUrl && targetUrl !== window.location.href) {
+            window.location.href = targetUrl;
+        }
+    }, []);
+
+    const goBack = useCallback(() => {
+        if (typeof window === 'undefined') return Promise.reject('Window is undefined');
+        if (historyRef.current.length <= 1) return Promise.reject('Cannot go back');
+        
+        return new Promise((resolve) => {
+            // Moves the current URL into the forward history
+            const removedUrl = historyRef.current.pop() as string;
+            forwardHistoryRef.current.push(removedUrl);
+            
+            const newCurrentUrl = historyRef.current[historyRef.current.length - 1];
+            setCurrentUrl(newCurrentUrl);
+    
+            // Create initial data object
+            const data = {
+                isReady: true,
+                history: [...historyRef.current],
+                forwardHistory: [...forwardHistoryRef.current],
+                currentUrl: newCurrentUrl,
+                firstUrl: firstUrlRef.current,
+                canGoBack: canGoBack(),
+                canGoForward: canGoForward()
+            };
+            
+            // Notify about the history change
+            onChange?.(data);
+            
+            // Create one-time listener for popstate
+            const handlePopState = () => {
+                // Remove the listener after it's called
+                window.removeEventListener('popstate', handlePopState);
+                
+                // Get the final data after URL has changed
+                const finalData = {
+                    isReady: true,
+                    history: [...historyRef.current],
+                    forwardHistory: [...forwardHistoryRef.current],
+                    currentUrl: window.location.href,
+                    firstUrl: firstUrlRef.current,
+                    canGoBack: canGoBack(),
+                    canGoForward: canGoForward()
+                };
+                
+                resolve(finalData);
+            };
+    
+            // Add the listener
+            window.addEventListener('popstate', handlePopState);
+            
+            // Trigger the navigation
+            window.history.go(-1);
+        });
+    }, [onChange]);
+    
+    const goForward = useCallback(() => {
+        if (typeof window === 'undefined') return Promise.reject('Window is undefined');
+        if (forwardHistoryRef.current.length === 0) return Promise.reject('Cannot go forward');
+        
+        return new Promise((resolve) => {
+            // Take the URL from the forward history and add it to the main history
+            const nextUrl = forwardHistoryRef.current.pop() as string;
+            historyRef.current.push(nextUrl);
+            setCurrentUrl(nextUrl);
+            
+            // Create initial data object
+            const data = {
+                isReady: true,
+                history: [...historyRef.current],
+                forwardHistory: [...forwardHistoryRef.current],
+                currentUrl: nextUrl,
+                firstUrl: firstUrlRef.current,
+                canGoBack: canGoBack(),
+                canGoForward: canGoForward()
+            };
+            
+            onChange?.(data);
+            
+            // Create one-time listener for popstate
+            const handlePopState = () => {
+                // Remove the listener after it's called
+                window.removeEventListener('popstate', handlePopState);
+                
+                // Get the final data after URL has changed
+                const finalData = {
+                    isReady: true,
+                    history: [...historyRef.current],
+                    forwardHistory: [...forwardHistoryRef.current],
+                    currentUrl: window.location.href,
+                    firstUrl: firstUrlRef.current,
+                    canGoBack: canGoBack(),
+                    canGoForward: canGoForward()
+                };
+                
+                resolve(finalData);
+            };
+    
+            // Add the listener
+            window.addEventListener('popstate', handlePopState);
+            
+            // Trigger the navigation
+            window.history.go(1);
+        });
+    }, [onChange]);
+
+    const canGoBack = useCallback(() => {
+        return historyRef.current.length > 1;
+    }, []);
+
+    const canGoForward = useCallback(() => {
+        return forwardHistoryRef.current.length > 0;
+    }, []);
+
+
+    const handleUrlChange = useCallback(() => {
+        if (typeof window === 'undefined') return;
+
+        const newUrl = window.location.href;
+        
+        // If the history is empty, set to the first URL
+        if (historyRef.current.length === 0) {
+            firstUrlRef.current = newUrl;
+        }
+        
+        // Avoid recording the same URL
+        if (historyRef.current[historyRef.current.length - 1] !== newUrl) {
+            historyRef.current.push(newUrl);
+            
+            // Clear the advance history, as new navigation invalidates the advance history
+            forwardHistoryRef.current = [];
+            setCurrentUrl(newUrl);
+            
+            onChange?.({
+                isReady: true,
+                history: [...historyRef.current],
+                forwardHistory: [...forwardHistoryRef.current],
+                currentUrl: newUrl,
+                firstUrl: firstUrlRef.current || newUrl, // Make sure there is always a value
+                canGoBack: canGoBack(),
+                canGoForward: canGoForward()
+            });
+        }
+    }, [onChange]); // only "onChange"
+
+
+    useEffect(() => {
+        if (typeof window === 'undefined') return;
+
+        // Listen for popstate events (browser forward/back)
+        window.addEventListener('popstate', handleUrlChange);
+        
+        // Listen for hashchange events
+        window.addEventListener('hashchange', handleUrlChange);
+
+        // Listen for DOM and property changes
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'childList' || mutation.type === 'attributes') {
+                    handleUrlChange();
+                }
+            });
+        });
+
+    
+        observer.observe(document.body, {
+            childList: true, // monitor the addition and deletion of child nodes
+            subtree: true, // monitor all descendant nodes
+            attributes: true, // monitor attribute changes
+            attributeFilter: ['href'] // only monitor changes in the href attribute
+        });
+
+        return () => {
+            window.removeEventListener('popstate', handleUrlChange);
+            window.removeEventListener('hashchange', handleUrlChange);
+            observer.disconnect();
+        };
+    }, [handleUrlChange]);
+
+
+    return {
+        isReady,
+        history: historyRef.current,
+        forwardHistory: forwardHistoryRef.current,
+        currentUrl,
+        firstUrl: firstUrlRef.current,
+        clearHistory,
+        goToHistory,
+        goBack,
+        goForward,
+        canGoBack,
+        canGoForward
+    };
+};
+
+export default useHistoryTracker;

package/package.json

@@ -2,7 +2,7 @@
   "author": "UIUX Lab",
   "email": "uiuxlab@gmail.com",
   "name": "funda-ui",
-  "version": "4.7.111",
+  "version": "4.7.115",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",

package/Utils/useGlobalUrlListener.d.ts

@@ -1,2 +0,0 @@
-declare const useGlobalUrlListener: () => string;
-export default useGlobalUrlListener;

package/Utils/useGlobalUrlListener.js

@@ -1,157 +0,0 @@
-(function webpackUniversalModuleDefinition(root, factory) {
-	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("react"));
-	else if(typeof define === 'function' && define.amd)
-		define(["react"], factory);
-	else if(typeof exports === 'object')
-		exports["RPB"] = factory(require("react"));
-	else
-		root["RPB"] = factory(root["React"]);
-})(this, (__WEBPACK_EXTERNAL_MODULE__787__) => {
-return /******/ (() => { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	var __webpack_modules__ = ({
-
-/***/ 787:
-/***/ ((module) => {
-
-module.exports = __WEBPACK_EXTERNAL_MODULE__787__;
-
-/***/ })
-
-/******/ 	});
-/************************************************************************/
-/******/ 	// The module cache
-/******/ 	var __webpack_module_cache__ = {};
-/******/ 	
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/ 		// Check if module is in cache
-/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
-/******/ 		if (cachedModule !== undefined) {
-/******/ 			return cachedModule.exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = __webpack_module_cache__[moduleId] = {
-/******/ 			// no module.id needed
-/******/ 			// no module.loaded needed
-/******/ 			exports: {}
-/******/ 		};
-/******/ 	
-/******/ 		// Execute the module function
-/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
-/******/ 	
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/ 	
-/************************************************************************/
-/******/ 	/* webpack/runtime/compat get default export */
-/******/ 	(() => {
-/******/ 		// getDefaultExport function for compatibility with non-harmony modules
-/******/ 		__webpack_require__.n = (module) => {
-/******/ 			var getter = module && module.__esModule ?
-/******/ 				() => (module['default']) :
-/******/ 				() => (module);
-/******/ 			__webpack_require__.d(getter, { a: getter });
-/******/ 			return getter;
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/define property getters */
-/******/ 	(() => {
-/******/ 		// define getter functions for harmony exports
-/******/ 		__webpack_require__.d = (exports, definition) => {
-/******/ 			for(var key in definition) {
-/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
-/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
-/******/ 				}
-/******/ 			}
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
-/******/ 	(() => {
-/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/make namespace object */
-/******/ 	(() => {
-/******/ 		// define __esModule on exports
-/******/ 		__webpack_require__.r = (exports) => {
-/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 			}
-/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/************************************************************************/
-var __webpack_exports__ = {};
-// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
-(() => {
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(787);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-/**
- * Global Url Listener (including micro frontends, frameworks, hashes, etc., applicable to multiple react app)
- * 
- * @usage:
-
-const App = () => {
-    const url = useGlobalUrlListener();
-
-    useEffect(() => {
-        console.log("URL changed:", url);
-    }, [url]);
-};
-
- */
-
-var useGlobalUrlListener = function useGlobalUrlListener() {
-  // Initialize state with empty string to avoid SSR issues
-  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    url = _useState2[0],
-    setUrl = _useState2[1];
-  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-    // Type guard for SSR
-    if (typeof window === 'undefined') return;
-
-    // Initialize the URL on the client side
-    setUrl(window.location.href);
-
-    // Create MutationObserver instance
-    var observer = new MutationObserver(function () {
-      setUrl(window.location.href);
-    });
-
-    // Start observing
-    observer.observe(document, {
-      subtree: true,
-      childList: true
-    });
-
-    // Cleanup function
-    return function () {
-      return observer.disconnect();
-    };
-  }, []);
-  return url;
-};
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (useGlobalUrlListener);
-})();
-
-/******/ 	return __webpack_exports__;
-/******/ })()
-;
-});

package/lib/cjs/Utils/useGlobalUrlListener.d.ts

@@ -1,2 +0,0 @@
-declare const useGlobalUrlListener: () => string;
-export default useGlobalUrlListener;