@ixo/ui 0.0.34 → 0.0.36

package/dist/{components-BpMWfEEt.cjs → components-DClyFU-M.cjs}

@@ -797,8 +797,8 @@ function AccordionTable({
     }
   );
 }
-const Header$3 = react$1.lazy(() => Promise.resolve().then(() => require("./index-C5RwHoR5.cjs")));
-const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-ChMy4OWq.cjs")));
+const Header$3 = react$1.lazy(() => Promise.resolve().then(() => require("./index-BnNEw5sb.cjs")));
+const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-CfGbTIXG.cjs")));
 function ActionCard({ header, content, footer, useHoverMode = false }) {
   const hasContent = !!content || !!footer;
   const initialVisibility = footer?.startHidden !== true;
@@ -882,7 +882,7 @@ function Loader({ size, color = "primary" }) {
 }
 const CARD_WIDTH$1 = 350;
 const CARD_HEADER_HEIGHT = 158;
-const Header$2 = react$1.lazy(() => Promise.resolve().then(() => require("./index-BYkENVo6.cjs")));
+const Header$2 = react$1.lazy(() => Promise.resolve().then(() => require("./index-BSG0zFC9.cjs")));
 function Card({ children, className, contentClassName, roundedBottom, noPadding = false, fullWidth = false, header, wrapperSx, onClick }) {
   const wrapperRef = react$1.useRef(null);
   const handleOnClick = react$1.useCallback(
@@ -1317,7 +1317,7 @@ function ModalSheet({ isOpen, children, hideHandler, zIndex, onRequestHide, onRe
     document.body
   );
 }
-const Badge = react$1.lazy(() => Promise.resolve().then(() => require("./index-CrKmiIcJ.cjs")));
+const Badge = react$1.lazy(() => Promise.resolve().then(() => require("./index-eldkvceu.cjs")));
 function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
   const shadowScrollRef = react$1.useRef(null);
   const wrapperContentAreaRef = react$1.useRef(null);
@@ -2430,19 +2430,70 @@ function RoomCategory({ category }) {
     !value && /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { gap: 1, children: category.rooms.map((room) => /* @__PURE__ */ jsxRuntime.jsx(RoomItem, { room }, room.id)) })
   ] });
 }
+function hasActiveDescendant(children) {
+  if (!children || children.length === 0) return false;
+  return children.some((child) => child.isActive === true || hasActiveDescendant(child.children));
+}
 function MenuItem({ item, onMenuItemClick, depth = 0 }) {
   const { hovered, ref } = hooks.useHover();
   const theme = useUITheme.useUITheme();
-  const { value: isExpanded, toggle } = useToggle(false);
   const hasChildren = item.children && item.children.length > 0;
+  const hasActiveChild = react$1.useMemo(() => hasActiveDescendant(item.children), [item.children]);
+  const initialExpanded = item?.isActive === true || hasActiveChild;
+  const { value: isExpanded, toggle, set: setIsExpanded } = useToggle(initialExpanded);
+  const prevHasActiveChildRef = react$1.useRef(hasActiveChild);
+  const manuallyToggledRef = react$1.useRef(false);
+  react$1.useEffect(() => {
+    if (item?.isActive !== void 0) {
+      setIsExpanded(item.isActive);
+      manuallyToggledRef.current = false;
+    }
+  }, [item?.isActive, setIsExpanded]);
+  react$1.useEffect(() => {
+    if (hasActiveChild && !prevHasActiveChildRef.current) {
+      if (!manuallyToggledRef.current || isExpanded) {
+        setIsExpanded(true);
+      }
+    }
+    prevHasActiveChildRef.current = hasActiveChild;
+  }, [hasActiveChild, isExpanded, setIsExpanded]);
   const handleItemClick = () => {
     if (!!item?.disabled) return;
     onMenuItemClick(item);
   };
   const handleToggleClick = (e) => {
     e.stopPropagation();
+    manuallyToggledRef.current = true;
     toggle();
   };
+  const shouldShowActiveStyle = item.isActive === true && !hasActiveChild;
+  const renderIcon = () => {
+    if (hasChildren && hovered) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        core.Center,
+        {
+          onClick: handleToggleClick,
+          p: 4,
+          sx: {
+            cursor: "pointer",
+            borderRadius: 4,
+            transform: isExpanded ? "rotate(-90deg)" : "rotate(0deg)",
+            transition: "transform 0.2s ease",
+            "&:hover": {
+              backgroundColor: theme.neutral.transparent10
+            }
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.AngleLeftSolid, { size: 12, color: "secondary" })
+        }
+      );
+    } else {
+      if (typeof item.icon === "string") {
+        return /* @__PURE__ */ jsxRuntime.jsx(core.Image, { w: 20, h: 20, src: item.icon, radius: "50%" });
+      } else {
+        return /* @__PURE__ */ jsxRuntime.jsx(item.icon, { size: 20, color: shouldShowActiveStyle ? "overPicture" : "secondary" });
+      }
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { gap: 1, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       Flex,
@@ -2457,50 +2508,31 @@ function MenuItem({ item, onMenuItemClick, depth = 0 }) {
         style: {
           cursor: "pointer",
           borderRadius: 8,
-          backgroundColor: item.isActive ? theme.neutral.transparent10 : hovered ? theme.neutral.transparent10 : "transparent",
+          backgroundColor: shouldShowActiveStyle ? theme.neutral.transparent10 : hovered ? theme.neutral.transparent10 : "transparent",
           transform: hovered ? "translateX(4px)" : "translateX(0px)",
           transition: "all 0.2s ease"
         },
         onClick: handleItemClick,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", gap: 8, children: [
-            typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(core.Image, { w: 20, h: 20, src: item.icon, radius: "50%" }) : /* @__PURE__ */ jsxRuntime.jsx(item.icon, { size: 20, color: item.isActive ? "overPicture" : "secondary" }),
-            /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 14, fw: 500, c: item.isActive ? theme.neutral.lightGray : theme.text.secondary, style: { flex: 1 }, children: item.name }),
+            renderIcon(),
+            /* @__PURE__ */ jsxRuntime.jsx(core.Text, { fz: 14, fw: 500, c: shouldShowActiveStyle ? theme.neutral.lightGray : theme.text.secondary, style: { flex: 1 }, children: item.name }),
             item.badgeCount ? /* @__PURE__ */ jsxRuntime.jsx(core.Badge, { size: "xs", variant: "filled", ml: 4, style: { minWidth: "16px", height: "15px", padding: "0 4px", fontSize: "8px" }, children: item.badgeCount }) : null
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Flex, { children: [
-            hasChildren && /* @__PURE__ */ jsxRuntime.jsx(
-              core.Center,
-              {
-                onClick: handleToggleClick,
-                p: 4,
-                sx: {
-                  cursor: "pointer",
-                  borderRadius: 4,
-                  transform: isExpanded ? "rotate(-90deg)" : "rotate(0deg)",
-                  transition: "transform 0.2s ease",
-                  "&:hover": {
-                    backgroundColor: theme.neutral.transparent10
-                  }
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.AngleLeftSolid, { size: 12, color: "secondary" })
-              }
-            ),
-            item?.actions && item.actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-              core.Center,
-              {
-                sx: {
-                  cursor: "pointer",
-                  borderRadius: 4,
-                  transition: "transform 0.2s ease",
-                  "&:hover": {
-                    backgroundColor: theme.neutral.transparent10
-                  }
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx(MoreMenu, { items: item.actions, controlColor: "secondary" })
-              }
-            )
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsx(Flex, { children: item?.actions && item.actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            core.Center,
+            {
+              sx: {
+                cursor: "pointer",
+                borderRadius: 4,
+                transition: "transform 0.2s ease",
+                "&:hover": {
+                  backgroundColor: theme.neutral.transparent10
+                }
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(MoreMenu, { items: item.actions, controlColor: "secondary" })
+            }
+          ) })
         ]
       }
     ),
@@ -2618,7 +2650,6 @@ function AppShellNavigation({
       document.body.style.cursor = "col-resize";
       document.body.style.userSelect = "none";
     } else {
-      console.count("2");
       clearNavbarListeners();
     }
     return () => clearNavbarListeners();
@@ -2704,23 +2735,20 @@ function AppShellNavigation({
                   /* @__PURE__ */ jsxRuntime.jsx(core.Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  core.Stack,
+                  core.ScrollArea,
                   {
-                    align: "center",
-                    gap: 8,
+                    scrollbarSize: 0,
                     style: {
                       flex: 1,
-                      overflowY: "auto",
-                      maxHeight: "calc(100vh - 300px)",
-                      scrollbarWidth: "none",
-                      msOverflowStyle: "none"
+                      maxHeight: "calc(100vh - 360px)"
                     },
-                    sx: {
-                      "&::-webkit-scrollbar": {
-                        display: "none"
+                    viewportProps: {
+                      style: {
+                        paddingLeft: 8,
+                        paddingRight: 8
                       }
                     },
-                    children: spaces.map(({ icon, id, name, onClick }) => /* @__PURE__ */ jsxRuntime.jsx(SpaceItem, { selectedSpace, icon, name, id, onClick }, id))
+                    children: /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { align: "center", gap: 8, children: spaces.map(({ icon, id, name, onClick }) => /* @__PURE__ */ jsxRuntime.jsx(SpaceItem, { selectedSpace, icon, name, id, onClick }, id)) })
                   }
                 )
               ] }),
@@ -5786,13 +5814,13 @@ function ActionButton({ onClick, left, right }) {
     }
   );
 }
-const MainAction = react$1.lazy(() => Promise.resolve().then(() => require("./index-DmZxf_3K.cjs")));
-const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-T_N7l0dY.cjs")));
-const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-CJEzVPBB.cjs")));
+const MainAction = react$1.lazy(() => Promise.resolve().then(() => require("./index-DIjbP65y.cjs")));
+const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-DAeeijml.cjs")));
+const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-BPMwSQiu.cjs")));
 const Map = react$1.lazy(() => Promise.resolve().then(() => require("./index-D4PsPquZ.cjs")));
 const CustomContent = react$1.lazy(() => Promise.resolve().then(() => require("./index-ByrCNpS2.cjs")));
-const Assets = react$1.lazy(() => Promise.resolve().then(() => require("./index-DYyekNVE.cjs")));
-const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-YrKDHLOm.cjs")));
+const Assets = react$1.lazy(() => Promise.resolve().then(() => require("./index-BCq1MsXT.cjs")));
+const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-B9pVBHoG.cjs")));
 const HOVER_BORDER_WIDTH = 1;
 function SodaCardCmp({ numSelected = 0, expanded = true, mainAction, header, content, map, customContent, customFooter, actions, assets, onClick }, ref) {
   const wrapperRef = react$1.useRef(null);
@@ -11105,4 +11133,4 @@ exports.UserMessage = UserMessage;
 exports.WorkspaceModal = WorkspaceModal;
 exports.cutText = cutText;
 exports.isValidClick = isValidClick;
-//# sourceMappingURL=components-BpMWfEEt.cjs.map
+//# sourceMappingURL=components-DClyFU-M.cjs.map