@algorithm-shift/design-system 1.3.125 → 1.3.127

package/dist/index.js

@@ -2380,6 +2380,7 @@ function LazySelectDropdown({
   const [searchTerm, setSearchTerm] = (0, import_react22.useState)("");
   const [highlightedIndex, setHighlightedIndex] = (0, import_react22.useState)(-1);
   const dropdownRef = (0, import_react22.useRef)(null);
+  const popupRef = (0, import_react22.useRef)(null);
   const observerTarget = (0, import_react22.useRef)(null);
   const {
     options: lazyOptions,
@@ -2411,15 +2412,20 @@ function LazySelectDropdown({
     }
   }, [isOpen, lazyOptions.length, highlightedIndex]);
   (0, import_react22.useEffect)(() => {
-    const handleClickOutside = (e) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+    const handleOutside = (e) => {
+      const target = e.target;
+      if (dropdownRef.current && !dropdownRef.current.contains(target) && (!popupRef.current || !popupRef.current.contains(target))) {
         setIsOpen(false);
         setSearchTerm("");
         setHighlightedIndex(-1);
       }
     };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
+    document.addEventListener("mousedown", handleOutside);
+    document.addEventListener("focusin", handleOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleOutside);
+      document.removeEventListener("focusin", handleOutside);
+    };
   }, []);
   (0, import_react22.useEffect)(() => {
     if (!isOpen || !hasMore || loading) return;
@@ -2549,6 +2555,7 @@ function LazySelectDropdown({
     isOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "div",
       {
+        ref: popupRef,
         onMouseDown: (e) => e.stopPropagation(),
         className: "absolute z-[900] w-fit mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto",
         style: {
@@ -5845,7 +5852,6 @@ var StagesComponent = ({
       return;
     }
   };
-  const lastStage = stages && stages.length > 0 ? stages[stages.length - 1][dataKey] : null;
   const isMobile = canvasMode === "mobile";
   const onStageClick = (stageKey) => {
     if (!stageKey || stageKey === activeStage) return;
@@ -5889,7 +5895,7 @@ var StagesComponent = ({
     setActiveRootStage(activeRoot);
     setActiveChildStage(activeChild);
   }, [currentStage, stages]);
-  const isAllStagesCompleted = isCompleted || activeRootStage?.[dataKey] === lastStage;
+  const isAllStagesCompleted = isCompleted;
   const disabled = isAllStagesCompleted || loading || saving;
   const primaryColor = props.primaryColor || "#12715b";
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
@@ -5941,7 +5947,8 @@ var StagesComponent = ({
                 const isCurrentRootStage = activeRootStage?.[dataKey] === stage[dataKey];
                 const stageHasChildren = Array.isArray(stage?.children) && stage.children.length > 0;
                 const isCurrentChildStage = activeChildStage?.[dataKey] === activeStage;
-                const showOutcomeForCurrentStage = showAsActive && hasOutcome && stageHasChildren && isCurrentRootStage && isCurrentChildStage;
+                const isNotParentSelected = activeChildStage?.[dataKey] !== activeRootStage?.[dataKey];
+                const showOutcomeForCurrentStage = showAsActive && hasOutcome && stageHasChildren && isCurrentRootStage && isCurrentChildStage && isNotParentSelected;
                 let stageColor = `text-[${primaryColor}] border-2 border-[${primaryColor}]`;
                 let stageStyle = {
                   borderColor: primaryColor,