funda-ui 4.7.108 → 4.7.115

package/lib/esm/Stepper/index.scss

@@ -1,5 +1,4 @@
 
-
 /* ======================================================
    <!-- Stepper -->
 /* ====================================================== */
@@ -18,9 +17,11 @@
     --stepper-line-default: #dfdfdf;
     --stepper-line-active: #2563eb;
     --stepper-line-complete: #22c55e;
-    --stepper-indicator-size: 0.875rem;
-    --stepper-indicator-offset: 100px;
+    --stepper-indicator-font-size: 0.875rem;
+    --stepper-indicator-offset: 60px;
     --stepper-title-size: 0.875rem;
+    --stepper-indicator-size: 32px;
+    
 
 
     position: relative;
@@ -31,25 +32,27 @@
         align-items: flex-start;
         flex-wrap: nowrap;
         position: relative;
+        max-width: calc(100% - var(--stepper-indicator-size));
 
         /* background line */
         &::before {
             content: '';
             position: absolute;
             top: 16px;  /* Subtract the height of the title */
-            left: 14px;
+            left: 0;
             right: 0;
             height: 2px;
             background-color: var(--stepper-line-default);
             z-index: 1;
-            width: calc(100% - 32px);
+            width: 100%;
+            
         }
 
         &::after {
             content: '';
             position: absolute;
             top: 16px; /* Subtract the height of the title */
-            left: 14px;
+            left: 0;
             height: 2px;
             background-color: var(--stepper-line-complete);
             z-index: 2;
@@ -59,7 +62,7 @@
 
         &::after {
             width: var(--stepper-progress-width, 0%);
-            max-width: calc(100% - 32px);
+            max-width: 100%;
         }
     }
 
@@ -69,7 +72,7 @@
         display: flex;
         flex-direction: column;
         align-items: center;
-        max-width: var(--stepper-indicator-offset);
+        max-width: 0;
         position: relative;
         z-index: 3;
 
@@ -123,15 +126,15 @@
 
     /* Indicator */
     .step-indicator {
-        width: 32px;
-        height: 32px;
+        width: var(--stepper-indicator-size);
+        height: var(--stepper-indicator-size);
         margin: 0 auto 0.25rem;
         border-radius: 9999px;
         display: flex;
         align-items: center;
         justify-content: center;
         border: 2px solid #ccc;
-        font-size: var(--stepper-indicator-size);
+        font-size: var(--stepper-indicator-font-size);
 
         /* default */
         background-color: var(--stepper-indicator-default);
@@ -155,13 +158,19 @@
 
     /* Title */
     .step-title {
+        white-space: nowrap;
         font-size: var(--stepper-title-size);
+        margin-left: calc(var(--stepper-indicator-offset) / 2);
 
         /* default */
         color: var(--stepper-color-default);
 
         &--active {
-            font-weight: bold;
+            color: var(--stepper-indicator-active);
+        }
+
+        &--complete {
+            color: var(--stepper-indicator-complete);
         }
     }
 
@@ -201,20 +210,20 @@
 /*------ Verticle ------*/
 .stepper-container.stepper-container--vertical {
 
-    --stepper-indicator-offset: 50px;
 
     display: flex;
     flex-direction: column;
-    gap: 1rem; /* line length */
+    gap: 2.5rem; /* line length */
+    max-height: calc(100% - var(--stepper-indicator-size));
 
     /* background line */
     &::before {
         content: '';
         position: absolute;
-        top: 20px;
-        left: 24px;
+        top: 0;
+        left: calc(var(--stepper-indicator-size) / 2);
         width: 2px;
-        height: calc(100% - 32px);
+        height: 100%;
         background-color: var(--stepper-line-default);
         z-index: 1;
     }
@@ -222,8 +231,8 @@
     &::after {
         content: '';
         position: absolute;
-        top: 20px;
-        left: 24px;
+        top: 0;
+        left: calc(var(--stepper-indicator-size) / 2);
         width: 2px;
         background-color: var(--stepper-line-complete);
         z-index: 2;
@@ -233,7 +242,7 @@
 
     &::after {
         height: var(--stepper-progress-height, 0%);
-        max-height: calc(100% - 32px);
+        max-height: 100%;
     }
 
 
@@ -244,12 +253,13 @@
     }
     .vertical-step-left {
         flex-shrink: 0;
-        width: var(--stepper-indicator-offset);
+        width: var(--stepper-indicator-size);
+        height: var(--stepper-indicator-size);
         position: relative;
         
         /* Main Navigation - Each step item (with circle + title) */
         .step-item {
-            margin-top: 20px;
+            margin-top: 0;
         }
 
         /* Line */
@@ -266,7 +276,7 @@
         left: 70px;
         width: calc(100% - 70px);
         position: absolute;
-        top: 1.5rem;
+        top: 0; /* required */
     }
 
     /* Title */

package/lib/esm/Stepper/index.tsx

@@ -131,7 +131,8 @@ const Stepper = forwardRef<StepperRef, StepperProps>((props, ref) => {
                                     className={combinedCls(
                                         'step-title',
                                         {
-                                            'step-title--active': isActive
+                                            'step-title--active': isActive,
+                                            'step-title--complete': isCompleted
                                         }
                                     )} 
                                 >
@@ -168,7 +169,16 @@ const Stepper = forwardRef<StepperRef, StepperProps>((props, ref) => {
                 const isCompleted = index < activeIndex || (index === panels.length - 1 && isLastStepComplete);
 
                 return (
-                    <div key={index} className="vertical-step-row">
+                    <div 
+                        key={index} 
+                        className={combinedCls(
+                            'vertical-step-row',
+                            {
+                                'vertical-step-row--active': isActive,
+                                'vertical-step-row--complete': isCompleted
+                            }
+                        )} 
+                    >
                         {/* Left */}
                         <div className="vertical-step-left">
                             <div
@@ -199,7 +209,8 @@ const Stepper = forwardRef<StepperRef, StepperProps>((props, ref) => {
                                     className={combinedCls(
                                         'step-title',
                                         {
-                                            'step-title--active': isActive
+                                            'step-title--active': isActive,
+                                            'step-title--complete': isCompleted
                                         }
                                     )} 
                                 >
@@ -246,6 +257,8 @@ const Stepper = forwardRef<StepperRef, StepperProps>((props, ref) => {
                 '--stepper-progress-height': `${progress}%`
             } as React.CSSProperties;
         } else {
+            
+            const defaultProgress = (activeIndex / (panels.length - 1)) * 100;
             const firstItem = stepItems[0] as HTMLDivElement;
             const lastItem = stepItems[stepItems.length - 1] as HTMLDivElement;
             if (!firstItem || !lastItem) return {};
@@ -258,10 +271,10 @@ const Stepper = forwardRef<StepperRef, StepperProps>((props, ref) => {
             if (!currentItem) return {};
 
             const currentCenter = currentItem.offsetLeft + (currentItem.clientWidth / 2);
-            const progress = ((currentCenter - firstCenter) / totalWidth) * 100;
+            const progress = defaultProgress !== 0 && activeIndex > 0 ? defaultProgress : ((currentCenter - firstCenter) / totalWidth) * 100;
 
             return {
-                '--stepper-progress-width': `${progress}%`
+                '--stepper-progress-width': `${isNaN(progress) ? 0 : progress}%`
             } as React.CSSProperties;
         }
     };

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.108",
+  "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;