@algorithm-shift/design-system 1.3.125 → 1.3.127

package/dist/index.mjs

@@ -2282,6 +2282,7 @@ function LazySelectDropdown({
   const [searchTerm, setSearchTerm] = useState8("");
   const [highlightedIndex, setHighlightedIndex] = useState8(-1);
   const dropdownRef = useRef5(null);
+  const popupRef = useRef5(null);
   const observerTarget = useRef5(null);
   const {
     options: lazyOptions,
@@ -2313,15 +2314,20 @@ function LazySelectDropdown({
     }
   }, [isOpen, lazyOptions.length, highlightedIndex]);
   useEffect15(() => {
-    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);
+    };
   }, []);
   useEffect15(() => {
     if (!isOpen || !hasMore || loading) return;
@@ -2451,6 +2457,7 @@ function LazySelectDropdown({
     isOpen && !disabled && /* @__PURE__ */ jsx36(Portal_default, { children: /* @__PURE__ */ jsx36(
       "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: {
@@ -5761,7 +5768,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;
@@ -5805,7 +5811,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__ */ jsx61("div", { className, style, children: /* @__PURE__ */ jsxs38(
@@ -5857,7 +5863,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,