next-helios-fe 1.7.24 → 1.7.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.7.24",
+  "version": "1.7.26",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/content-container/wizard/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useState, useRef } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { Icon } from "@iconify/react";
 import { Window, type WindowProps } from "./window";
 
@@ -13,9 +13,11 @@ interface WizardProps {
   options?: {
     border?: boolean;
     disableNavigationClick?: boolean;
+    hideNavigationOnFirstWindow?: boolean;
   };
   onPreviousClick?: () => void;
   onNextClick?: () => void;
+  onChangeWindow?: (window: any) => void;
 }
 
 interface WizardComponent extends React.FC<WizardProps> {
@@ -28,6 +30,7 @@ export const Wizard: WizardComponent = ({
   options,
   onPreviousClick,
   onNextClick,
+  onChangeWindow,
 }) => {
   const wizardNavigationRef = useRef<HTMLDivElement>(null);
   const childrenList = React.Children.toArray(children);
@@ -36,6 +39,12 @@ export const Wizard: WizardComponent = ({
   });
   const [activeTab, setActiveTab] = useState(0);
 
+  useEffect(() => {
+    if (onChangeWindow) {
+      onChangeWindow(activeTab);
+    }
+  }, [activeTab]);
+
   const handleOnPreviousClick = () => {
     if (activeTab - 1 === 0) {
       wizardNavigationRef.current?.scrollTo({
@@ -68,45 +77,51 @@ export const Wizard: WizardComponent = ({
 
   return (
     <div className="flex flex-col gap-8 h-full overflow-hidden">
-      <div className="space-x-8 relative before:absolute before:inset-0 before:mt-6 md:before:translate-y-0 before:w-full before:h-0.5 before:bg-gradient-to-r before:from-transparent before:via-primary before:to-transparent">
-        <div
-          ref={wizardNavigationRef}
-          className="relative flex justify-between overflow-auto [&::-webkit-scrollbar]:hidden"
-        >
-          {tabs?.slice(0, childrenList.length)?.map((tab, index) => {
-            return (
-              <div
-                key={index}
-                id={`wizard-tab-${index}`}
-                className={`group flex flex-col items-center gap-2 min-w-32 max-w-40 px-2 ${
-                  activeTab >= index && "is-active"
-                }`}
-              >
-                <div className="rounded-full bg-secondary-bg">
-                  <button
-                    className={`flex justify-center items-center w-12 h-12 shadow border border-white rounded-full bg-secondary-light duration-300 group-[.is-active]:bg-primary group-[.is-active]:text-white ${
-                      !options?.disableNavigationClick &&
-                      "hover:border-primary hover:bg-primary-transparent hover:text-primary"
-                    }`}
-                    disabled={options?.disableNavigationClick}
-                    onClick={() => {
-                      setActiveTab(index);
-                    }}
-                  >
-                    <Icon icon={tab.icon} className="text-2xl" />
-                  </button>
-                </div>
-                <div className="flex flex-col items-center text-center">
-                  <h1 className="text-sm font-medium group-[.is-active]:text-primary">
-                    {tab.title}
-                  </h1>
-                  <p className="text-xs">{tab.subTitle}</p>
-                </div>
-              </div>
-            );
-          })}
+      {(!options?.hideNavigationOnFirstWindow || activeTab !== 0) && (
+        <div className="space-x-8 relative before:absolute before:inset-0 before:mt-6 md:before:translate-y-0 before:w-full before:h-0.5 before:bg-gradient-to-r before:from-transparent before:via-primary before:to-transparent">
+          <div
+            ref={wizardNavigationRef}
+            className="relative flex justify-between overflow-auto [&::-webkit-scrollbar]:hidden"
+          >
+            {tabs?.map((tab, index) => {
+              {
+                if (!options?.hideNavigationOnFirstWindow || index !== 0) {
+                  return (
+                    <div
+                      key={index}
+                      id={`wizard-tab-${index}`}
+                      className={`group flex flex-col items-center gap-2 min-w-32 max-w-40 px-2 ${
+                        activeTab >= index && "is-active"
+                      }`}
+                    >
+                      <div className="rounded-full bg-secondary-bg">
+                        <button
+                          className={`flex justify-center items-center w-12 h-12 shadow border border-white rounded-full bg-secondary-light duration-300 group-[.is-active]:bg-primary group-[.is-active]:text-white ${
+                            !options?.disableNavigationClick &&
+                            "hover:border-primary hover:bg-primary-transparent hover:text-primary"
+                          }`}
+                          disabled={options?.disableNavigationClick}
+                          onClick={() => {
+                            setActiveTab(index);
+                          }}
+                        >
+                          <Icon icon={tab.icon} className="text-2xl" />
+                        </button>
+                      </div>
+                      <div className="flex flex-col items-center text-center">
+                        <h1 className="text-sm font-medium group-[.is-active]:text-primary">
+                          {tab.title}
+                        </h1>
+                        <p className="text-xs">{tab.subTitle}</p>
+                      </div>
+                    </div>
+                  );
+                }
+              }
+            })}
+          </div>
         </div>
-      </div>
+      )}
       <div
         className={`flex-1 overflow-auto ${
           options?.border && "border rounded-md px-4 py-6"