funda-ui 4.7.108 → 4.7.115

package/Stepper/index.css

@@ -14,9 +14,10 @@
   --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;
   /* Navigation Header (only horizontal) */
   /* Main Navigation - Each step item (with circle + title) */
@@ -32,24 +33,25 @@
   align-items: flex-start;
   flex-wrap: nowrap;
   position: relative;
+  max-width: calc(100% - var(--stepper-indicator-size));
   /* background line */
 }
 .stepper-container .stepper-header::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%;
 }
 .stepper-container .stepper-header::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;
@@ -58,14 +60,14 @@
 }
 .stepper-container .stepper-header::after {
   width: var(--stepper-progress-width, 0%);
-  max-width: calc(100% - 32px);
+  max-width: 100%;
 }
 .stepper-container .step-item {
   flex: none;
   display: flex;
   flex-direction: column;
   align-items: center;
-  max-width: var(--stepper-indicator-offset);
+  max-width: 0;
   position: relative;
   z-index: 3;
 }
@@ -105,15 +107,15 @@
   transform: scaleX(1);
 }
 .stepper-container .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);
   color: var(--stepper-color-default);
@@ -130,12 +132,17 @@
   border-color: var(--stepper-border-complete);
 }
 .stepper-container .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);
 }
 .stepper-container .step-title--active {
-  font-weight: bold;
+  color: var(--stepper-indicator-active);
+}
+.stepper-container .step-title--complete {
+  color: var(--stepper-indicator-complete);
 }
 .stepper-container .stepper-buttons {
   display: flex;
@@ -157,10 +164,10 @@
 
 /*------ 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 */
   /* Layout */
   /* Title */
@@ -170,18 +177,18 @@
 .stepper-container.stepper-container--vertical::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;
 }
 .stepper-container.stepper-container--vertical::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;
@@ -190,7 +197,7 @@
 }
 .stepper-container.stepper-container--vertical::after {
   height: var(--stepper-progress-height, 0%);
-  max-height: calc(100% - 32px);
+  max-height: 100%;
 }
 .stepper-container.stepper-container--vertical .vertical-step-row {
   display: flex;
@@ -198,13 +205,14 @@
 }
 .stepper-container.stepper-container--vertical .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) */
   /* Line */
 }
 .stepper-container.stepper-container--vertical .vertical-step-left .step-item {
-  margin-top: 20px;
+  margin-top: 0;
 }
 .stepper-container.stepper-container--vertical .vertical-step-left .step-line {
   position: absolute;
@@ -216,7 +224,7 @@
   left: 70px;
   width: calc(100% - 70px);
   position: absolute;
-  top: 1.5rem;
+  top: 0; /* required */
 }
 .stepper-container.stepper-container--vertical .step-title {
   display: none;

package/Stepper/index.js

@@ -448,7 +448,8 @@ var Stepper = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fun
         })
       }, isCompleted ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, disableCompleteIcon ? index + 1 : completeIcon) : index + 1), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
         className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_1__.combinedCls)('step-title', {
-          'step-title--active': isActive
+          'step-title--active': isActive,
+          'step-title--complete': isCompleted
         })
       }, header)), index < panels.length - 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
         className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_1__.combinedCls)('step-line', {
@@ -467,7 +468,10 @@ var Stepper = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fun
       var isCompleted = index < activeIndex || index === panels.length - 1 && isLastStepComplete;
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
         key: index,
-        className: "vertical-step-row"
+        className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_1__.combinedCls)('vertical-step-row', {
+          'vertical-step-row--active': isActive,
+          'vertical-step-row--complete': isCompleted
+        })
       }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
         className: "vertical-step-left"
       }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
@@ -486,7 +490,8 @@ var Stepper = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fun
         })
       }, isCompleted ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, disableCompleteIcon ? index + 1 : completeIcon) : index + 1), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
         className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_1__.combinedCls)('step-title', {
-          'step-title--active': isActive
+          'step-title--active': isActive,
+          'step-title--complete': isCompleted
         })
       }, header)), index < panels.length - 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
         className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_1__.combinedCls)('step-line', {
@@ -511,6 +516,7 @@ var Stepper = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fun
         '--stepper-progress-height': "".concat(progress, "%")
       };
     } else {
+      var defaultProgress = activeIndex / (panels.length - 1) * 100;
       var firstItem = stepItems[0];
       var lastItem = stepItems[stepItems.length - 1];
       if (!firstItem || !lastItem) return {};
@@ -520,9 +526,9 @@ var Stepper = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fun
       var currentItem = stepItems[activeIndex];
       if (!currentItem) return {};
       var currentCenter = currentItem.offsetLeft + currentItem.clientWidth / 2;
-      var _progress = (currentCenter - firstCenter) / totalWidth * 100;
+      var _progress = defaultProgress !== 0 && activeIndex > 0 ? defaultProgress : (currentCenter - firstCenter) / totalWidth * 100;
       return {
-        '--stepper-progress-width': "".concat(_progress, "%")
+        '--stepper-progress-width': "".concat(isNaN(_progress) ? 0 : _progress, "%")
       };
     }
   };

package/Utils/useHistoryTracker.d.ts

@@ -0,0 +1,26 @@
+export declare type UseHistoryTrackerChangeFnType = (args: {
+    isReady: boolean;
+    history: string[];
+    forwardHistory: string[];
+    currentUrl: string;
+    firstUrl: string;
+    canGoBack: boolean;
+    canGoForward: boolean;
+}) => void;
+export declare type UseHistoryTrackerProps = {
+    onChange?: UseHistoryTrackerChangeFnType | null;
+};
+declare const useHistoryTracker: (props: UseHistoryTrackerProps) => {
+    isReady: boolean;
+    history: string[];
+    forwardHistory: string[];
+    currentUrl: string;
+    firstUrl: string;
+    clearHistory: () => void;
+    goToHistory: (index: number) => void;
+    goBack: () => Promise<unknown>;
+    goForward: () => Promise<unknown>;
+    canGoBack: () => boolean;
+    canGoForward: () => boolean;
+};
+export default useHistoryTracker;