@algorithm-shift/design-system 1.2.985 → 1.2.987

package/dist/index.mjs

@@ -22,6 +22,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function Modal({
   isOpen,
   onModalClose,
+  onModalOpen,
   title,
   children,
   size = "md",
@@ -29,6 +30,11 @@ function Modal({
   className = "",
   style = {}
 }) {
+  useEffect(() => {
+    if (isOpen && onModalOpen) {
+      onModalOpen();
+    }
+  }, [isOpen]);
   useEffect(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -550,6 +556,7 @@ var Breadcrumb_default = Breadcrumb;
 
 // src/components/Basic/ButtonGroup/ButtonGroup.tsx
 import { ChevronDown } from "lucide-react";
+import Link2 from "next/link";
 
 // src/components/ui/dropdown-menu.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
@@ -668,9 +675,9 @@ function DropdownMenuSubContent({
 }
 
 // src/components/Basic/ButtonGroup/ButtonGroup.tsx
-import Link2 from "next/link";
 import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
-function SplitButton({ style, textContent, className, list = [] }) {
+function ButtonGroup({ style, textContent, className, list = [], onGroupItemClick, onClick }) {
+  const data = Array.isArray(list) ? list : [];
   const bgColor = style?.backgroundColor || "";
   return /* @__PURE__ */ jsxs7("div", { className: "inline-flex rounded-md overflow-hidden border border-teal-200 bg-teal-700 items-center focus:ring-0", style: { backgroundColor: bgColor }, children: [
     /* @__PURE__ */ jsx17(
@@ -678,6 +685,7 @@ function SplitButton({ style, textContent, className, list = [] }) {
       {
         className: `rounded-none border-r px-4 py-2 text-whit focus:ring-0 ${className || ""}`,
         style: { backgroundColor: bgColor },
+        onClick: (e) => onClick?.(e),
         children: textContent || "Button"
       }
     ),
@@ -691,7 +699,24 @@ function SplitButton({ style, textContent, className, list = [] }) {
           children: /* @__PURE__ */ jsx17(ChevronDown, { className: "w-4 h-4" })
         }
       ) }),
-      /* @__PURE__ */ jsx17(DropdownMenuContent, { align: "end", className: "bg-white min-w-[120px]", children: list.map((item) => /* @__PURE__ */ jsx17(DropdownMenuItem, { className: "text-black", children: /* @__PURE__ */ jsx17(Link2, { href: item.url || "#", children: item.header }) }, item.id)) })
+      /* @__PURE__ */ jsx17(
+        DropdownMenuContent,
+        {
+          align: "end",
+          className: "bg-white min-w-[120px]",
+          children: data.map((item) => /* @__PURE__ */ jsx17(
+            DropdownMenuItem,
+            {
+              className: "text-black",
+              onSelect: () => onGroupItemClick?.({
+                item
+              }),
+              children: /* @__PURE__ */ jsx17(Link2, { href: item.url || "#", children: item.header })
+            },
+            item.id
+          ))
+        }
+      )
     ] })
   ] });
 }
@@ -1468,6 +1493,7 @@ function MultiCheckbox({
               {
                 id: props.name ? `${props.name}-${opt.value}` : opt.value,
                 className: cn(hasError && "text-red-600"),
+                htmlFor: props.name ? `${props.name}-${opt.value}` : opt.value,
                 children: opt.label
               }
             )
@@ -2083,7 +2109,8 @@ function LazySelectDropdown({
         onFocus: handleFocus,
         onChange: handleSearchChange,
         readOnly: !isOpen || readOnly,
-        disabled
+        disabled,
+        autoComplete: "off"
       }
     ),
     selectedOption && !disabled && !readOnly && /* @__PURE__ */ jsx36(
@@ -3275,7 +3302,8 @@ function LazyMultiSelectDropdown({
               value: isOpen ? searchTerm : "",
               onChange: handleSearch,
               readOnly,
-              disabled
+              disabled,
+              autoComplete: "off"
             }
           )
         ]
@@ -3849,13 +3877,13 @@ function DataTable({
     const shouldShowLeftDots = leftSiblingIndex > 2;
     const shouldShowRightDots = rightSiblingIndex < totalPages - 1;
     if (!shouldShowLeftDots && shouldShowRightDots) {
-      return [1, 2, 3, "...", totalPages];
+      return [1, 2, 3, "..."];
     }
     if (shouldShowLeftDots && !shouldShowRightDots) {
       return [1, "...", totalPages - 2, totalPages - 1, totalPages];
     }
     if (shouldShowLeftDots && shouldShowRightDots) {
-      return [1, "...", currentPage - 1, currentPage, currentPage + 1, "...", totalPages];
+      return [1, "...", currentPage - 1, currentPage, currentPage + 1, "..."];
     }
     return [];
   };
@@ -4061,7 +4089,7 @@ function DataTable({
         return /* @__PURE__ */ jsxs30(
           TableCell,
           {
-            className: `${meta?.cellClass ?? ""} ${isClickable ? "cursor-pointer hover:bg-gray-100 underline text-blue-500" : ""} relative py-2`,
+            className: `break-words whitespace-normal align-top ${meta?.cellClass ?? ""} ${isClickable ? "cursor-pointer hover:bg-gray-100 underline text-blue-500" : ""} relative py-2`,
             style: {
               width: cell.column.getSize(),
               minWidth: cell.column.columnDef.minSize,
@@ -5025,7 +5053,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
 var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
-import React11, { useState as useState13 } from "react";
+import React11, { useEffect as useEffect26, useState as useState13 } from "react";
 import { jsx as jsx60, jsxs as jsxs37 } from "react/jsx-runtime";
 var StagesComponent = ({
   stages,
@@ -5042,8 +5070,15 @@ var StagesComponent = ({
   triggerOnClick = false,
   canvasMode = "desktop"
 }) => {
-  const [activeStage, setActiveStage] = useState13(currentStage || (stages && stages.length > 0 ? stages[0][dataKey] : null));
+  const [activeStage, setActiveStage] = useState13("");
   const [isCompleted, setIsCompleted] = useState13(false);
+  useEffect26(() => {
+    if (currentStage) {
+      setActiveStage(currentStage);
+    } else {
+      setActiveStage(stages && stages.length > 0 ? stages[0][dataKey] : null);
+    }
+  }, [currentStage]);
   const updateStage = (stageKey) => {
     setActiveStage(stageKey);
     onStageChange?.(stageKey);
@@ -5058,7 +5093,7 @@ var StagesComponent = ({
       return;
     }
     if (currentIndex < stages.length - 1) {
-      const nextStageObj = stages[currentIndex + 1];
+      const nextStageObj = stages[currentIndex];
       updateStage(nextStageObj[dataKey]);
       return;
     }
@@ -5179,7 +5214,7 @@ import { jsx as jsx63, jsxs as jsxs39 } from "react/jsx-runtime";
 import { jsx as jsx64 } from "react/jsx-runtime";
 
 // src/components/Navigation/Navbar/Navbar.tsx
-import { useCallback as useCallback4, useMemo as useMemo9, useState as useState14, useEffect as useEffect26 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo9, useState as useState14, useEffect as useEffect27 } from "react";
 import { Bell, Search as Search2, Menu as Menu2 } from "lucide-react";
 import Image3 from "next/image";
 import Link4 from "next/link";
@@ -5248,7 +5283,7 @@ function Navbar({
   const [screenMode, setScreenMode] = useState14(
     canvasMode
   );
-  useEffect26(() => {
+  useEffect27(() => {
     const detectMode = () => {
       if (window.innerWidth < 640) setScreenMode("mobile");
       else if (window.innerWidth < 1024) setScreenMode("tablet");
@@ -5355,7 +5390,7 @@ function Navbar({
 }
 
 // src/components/Chart/BarChart.tsx
-import React13, { useEffect as useEffect27, useMemo as useMemo10, useState as useState15, useCallback as useCallback5 } from "react";
+import React13, { useEffect as useEffect28, useMemo as useMemo10, useState as useState15, useCallback as useCallback5 } from "react";
 import axios3 from "axios";
 import {
   BarChart,
@@ -5433,7 +5468,7 @@ var ChartComponent = ({
   const [currentPage, setCurrentPage] = useState15(1);
   const effectiveData = apiUrl ? rawData : props.data || [];
   const effectiveLoading = apiUrl ? localLoading : externalLoading;
-  useEffect27(() => {
+  useEffect28(() => {
     if (apiUrl) {
       setCurrentPage(1);
     }
@@ -5475,7 +5510,7 @@ var ChartComponent = ({
       if (!cancelled) setLocalLoading(false);
     }
   }, [apiUrl, limit]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (!apiUrl) return;
     fetchData(currentPage);
   }, [apiUrl, currentPage, fetchData]);
@@ -5674,7 +5709,7 @@ var ChartComponent = ({
 var BarChart_default = React13.memo(ChartComponent);
 
 // src/components/Chart/PieChart.tsx
-import React14, { useEffect as useEffect28, useMemo as useMemo11, useState as useState16 } from "react";
+import React14, { useEffect as useEffect29, useMemo as useMemo11, useState as useState16 } from "react";
 import axios4 from "axios";
 import {
   PieChart,
@@ -5764,7 +5799,7 @@ var DonutChart = ({
   const [localLoading, setLocalLoading] = useState16(false);
   const effectiveData = apiUrl ? rawData : props.data || [];
   const effectiveLoading = apiUrl ? localLoading : externalLoading;
-  useEffect28(() => {
+  useEffect29(() => {
     if (!apiUrl) return;
     let cancelled = false;
     const fetchData = async () => {
@@ -5846,7 +5881,7 @@ var DonutChart = ({
     return { inner: 70, outer: 130 };
   };
   const [mounted, setMounted] = useState16(false);
-  useEffect28(() => {
+  useEffect29(() => {
     const timeout = setTimeout(() => setMounted(true), 100);
     return () => clearTimeout(timeout);
   }, []);
@@ -6087,7 +6122,7 @@ export {
   BarChart_default as BarChart,
   Breadcrumb_default as Breadcrumb,
   Button_default as Button,
-  SplitButton as ButtonGroup,
+  ButtonGroup,
   Checkbox_default as Checkbox,
   Container_default as Container,
   DateTimePicker as DatePicker,