next-helios-fe 1.4.2 → 1.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "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 } from "react";
+import React, { useState, useRef } from "react";
 import { Icon } from "@iconify/react";
 import { Window, type WindowProps } from "./window";
 
@@ -29,36 +29,73 @@ export const Wizard: WizardComponent = ({
   onPreviousClick,
   onNextClick,
 }) => {
+  const wizardNavigationRef = useRef<HTMLDivElement>(null);
   const childrenList = React.Children.toArray(children);
   const windowList = childrenList.filter((child) => {
     return (child as React.ReactElement).type === Wizard.Window;
   });
   const [activeTab, setActiveTab] = useState(0);
 
+  const handleOnPreviousClick = () => {
+    if (activeTab - 1 === 0) {
+      wizardNavigationRef.current?.scrollTo({
+        left: 0,
+        behavior: "smooth",
+      });
+    } else {
+      document.getElementById(`wizard-tab-${activeTab - 1}`)?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center",
+      });
+    }
+  };
+
+  const handleOnNextClick = () => {
+    if (activeTab + 1 === childrenList.length) {
+      wizardNavigationRef.current?.scrollTo({
+        left: wizardNavigationRef.current.scrollWidth,
+        behavior: "smooth",
+      });
+    } else {
+      document.getElementById(`wizard-tab-${activeTab + 1}`)?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center",
+      });
+    }
+  };
+
   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-4 before:-translate-y-px md: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 className="relative flex justify-between">
+      <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}
-                className={`group flex flex-col items-center gap-2 max-w-40 max-h-40 ${
+                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"
                 }`}
               >
-                <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:text-primary"
-                  }`}
-                  disabled={options?.disableNavigationClick}
-                  onClick={() => {
-                    setActiveTab(index);
-                  }}
-                >
-                  <Icon icon={tab.icon} className="text-2xl" />
-                </button>
+                <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}
@@ -84,6 +121,7 @@ export const Wizard: WizardComponent = ({
           disabled={activeTab === 0}
           onClick={() => {
             setActiveTab((prev) => prev - 1);
+            handleOnPreviousClick();
             onPreviousClick && onPreviousClick();
           }}
         >
@@ -96,6 +134,7 @@ export const Wizard: WizardComponent = ({
           disabled={activeTab === childrenList.length - 1}
           onClick={() => {
             setActiveTab((prev) => prev + 1);
+            handleOnNextClick();
             onNextClick && onNextClick();
           }}
         >