@ixo/ui 0.1.13 → 0.1.15

package/dist/{components-GC_64xlg.js → components-CSb7qSeQ.js}

@@ -823,8 +823,8 @@ function AccordionTable({
     }
   );
 }
-const Header$3 = lazy(() => import("./index-C4p0n2GU.js"));
-const Footer = lazy(() => import("./index-9ec-F2tJ.js"));
+const Header$3 = lazy(() => import("./index-Dg03DAzQ.js"));
+const Footer = lazy(() => import("./index-QRDAEcwI.js"));
 function ActionCard({ header, content, footer, useHoverMode = false }) {
   const hasContent = !!content || !!footer;
   const initialVisibility = footer?.startHidden !== true;
@@ -908,7 +908,7 @@ function Loader({ size, color = "primary" }) {
 }
 const CARD_WIDTH$1 = 350;
 const CARD_HEADER_HEIGHT = 158;
-const Header$2 = lazy(() => import("./index-CbIehUPm.js"));
+const Header$2 = lazy(() => import("./index-79BN9bQp.js"));
 function Card({ children, className, contentClassName, roundedBottom, noPadding = false, fullWidth = false, header, wrapperSx, onClick }) {
   const wrapperRef = useRef(null);
   const handleOnClick = useCallback(
@@ -1343,7 +1343,7 @@ function ModalSheet({ isOpen, children, hideHandler, zIndex, onRequestHide, onRe
     document.body
   );
 }
-const Badge = lazy(() => import("./index-mBNnN5WH.js"));
+const Badge = lazy(() => import("./index-Dc5K_Tpd.js"));
 function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
   const shadowScrollRef = useRef(null);
   const wrapperContentAreaRef = useRef(null);
@@ -1950,13 +1950,17 @@ function Item({ icon: icon2, label, disabled, onClick }) {
     }
   );
 }
-function MoreMenu({ items, controlColor = "primary", Icon }) {
+function MoreMenu({ items, controlColor = "primary", Icon, onOpenChange }) {
   const [opened, setOpened] = useState(false);
+  const handleOpenChange = (value) => {
+    setOpened(value);
+    onOpenChange?.(value);
+  };
   return /* @__PURE__ */ jsxs(
     Popover,
     {
       opened,
-      onChange: setOpened,
+      onChange: handleOpenChange,
       closeOnClickOutside: true,
       styles: {
         dropdown: {
@@ -1972,7 +1976,7 @@ function MoreMenu({ items, controlColor = "primary", Icon }) {
       position: "right-start",
       shadow: "md",
       children: [
-        /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(Center, { onClick: () => setOpened((o) => !o), children: Icon || /* @__PURE__ */ jsx(EllipsisVSolid, { size: 20, color: controlColor }) }) }),
+        /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(Center, { onClick: () => handleOpenChange(!opened), children: Icon || /* @__PURE__ */ jsx(EllipsisVSolid, { size: 20, color: controlColor }) }) }),
         /* @__PURE__ */ jsxs(Popover.Dropdown, { children: [
           /* @__PURE__ */ jsx(FocusTrap.InitialFocus, {}),
           /* @__PURE__ */ jsx(Text$1, { ml: 12, mb: 10, fz: 14, c: "neutralColor.7", children: "Actions" }),
@@ -1985,7 +1989,7 @@ function MoreMenu({ items, controlColor = "primary", Icon }) {
               active: item.active,
               onClick: () => {
                 item.onClick();
-                setOpened(false);
+                handleOpenChange(false);
               }
             },
             item.label
@@ -2208,12 +2212,14 @@ function AsideResizable({ children, navbarWidth, asideMaximized, asideCollapsed
     onWidthChange?.(constrainedWidth);
   };
   useEffect(() => {
+    if (isMobile) return;
     if (width === MIN_WIDTH && !asideCollapsed && onAsideToggle && !isShowingRef.current) {
       clearListeners();
       onAsideToggle();
     }
-  }, [width, asideCollapsed]);
+  }, [width, asideCollapsed, isMobile]);
   useEffect(() => {
+    if (isMobile) return;
     const maxWidth = Math.min(window.innerWidth - 600, MAX_WIDTH);
     if (width >= maxWidth && onMaxExpand && !hasFiredMaxExpand.current) {
       hasFiredMaxExpand.current = true;
@@ -2222,7 +2228,7 @@ function AsideResizable({ children, navbarWidth, asideMaximized, asideCollapsed
     } else if (width < maxWidth) {
       hasFiredMaxExpand.current = false;
     }
-  }, [width, onMaxExpand]);
+  }, [width, onMaxExpand, isMobile]);
   useEffect(() => {
     const handleWindowResize = () => {
       const newMaxWidth = Math.min(window.innerWidth - 600, MAX_WIDTH);
@@ -2326,6 +2332,8 @@ function NavigationItemSkeleton() {
 }
 function RoomItem({ room, navbarWidth }) {
   const { hovered, ref } = useHover();
+  const [menuOpened, setMenuOpened] = useState(false);
+  const showActions = hovered || menuOpened;
   const renderIcon = () => {
     if (!room.icon) return null;
     if (typeof room.icon === "string") {
@@ -2350,7 +2358,7 @@ function RoomItem({ room, navbarWidth }) {
       style: {
         cursor: "pointer",
         borderRadius: 6,
-        backgroundColor: room.isActive || hovered ? "var(--mantine-color-neutralColor-6)" : "transparent",
+        backgroundColor: room.isActive || showActions ? "var(--mantine-color-neutralColor-6)" : "transparent",
         transition: "all 0.15s ease"
       },
       onClick: () => room.onClick(room.id),
@@ -2359,7 +2367,7 @@ function RoomItem({ room, navbarWidth }) {
           renderIcon(),
           /* @__PURE__ */ jsx(Text$1, { c: room.isActive ? "neutralColor.8" : "neutralColor.7", fz: 14, truncate: true, style: { maxWidth: textMaxWidth }, children: room.name })
         ] }),
-        hovered && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, children: [
+        showActions && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, children: [
           room.onActionClick && /* @__PURE__ */ jsx(Tooltip$4, { label: room.onActionClick.label, children: /* @__PURE__ */ jsx(
             Center,
             {
@@ -2371,6 +2379,21 @@ function RoomItem({ room, navbarWidth }) {
               children: icon(room.onActionClick.icon, void 0, "var(--mantine-color-neutralColor-7)")
             }
           ) }),
+          room.actions && room.actions.length > 0 && /* @__PURE__ */ jsx(
+            Center,
+            {
+              onClick: (e) => e.stopPropagation(),
+              sx: {
+                cursor: "pointer",
+                borderRadius: 4,
+                transition: "transform 0.2s ease",
+                "&:hover": {
+                  background: "var(--mantine-color-neutralColor-5)"
+                }
+              },
+              children: /* @__PURE__ */ jsx(MoreMenu, { items: room.actions, controlColor: "secondary", onOpenChange: setMenuOpened })
+            }
+          ),
           room.tag && room.tagIcon && /* @__PURE__ */ jsx(Tooltip$4, { label: room.tag, children: icon(room.tagIcon, void 0, "var(--mantine-color-neutralColor-7)") })
         ] })
       ]
@@ -6094,13 +6117,13 @@ function ActionButton({ onClick, left, right }) {
     }
   );
 }
-const MainAction = lazy(() => import("./index-BZJenoN5.js"));
-const Header$1 = lazy(() => import("./index-IBMUjXjl.js"));
-const Content = lazy(() => import("./index-BpxUOj0_.js"));
+const MainAction = lazy(() => import("./index-Dg3Be72o.js"));
+const Header$1 = lazy(() => import("./index-DwUyDHTC.js"));
+const Content = lazy(() => import("./index-3BXIAJMs.js"));
 const Map = lazy(() => import("./index-D5Ufmf-s.js"));
 const CustomContent = lazy(() => import("./index-DsYjW_4y.js"));
-const Assets = lazy(() => import("./index-DhuIVvP-.js"));
-const Actions = lazy(() => import("./index-WKkZDhwm.js"));
+const Assets = lazy(() => import("./index-CG7ua6U5.js"));
+const Actions = lazy(() => import("./index-F_vabNrb.js"));
 const HOVER_BORDER_WIDTH = 1;
 function SodaCardCmp({ numSelected = 0, expanded = true, mainAction, header, content, map, customContent, customFooter, actions, assets, onClick }, ref) {
   const wrapperRef = useRef(null);
@@ -11399,4 +11422,4 @@ export {
   CardHero as y,
   CardSelector as z
 };
-//# sourceMappingURL=components-GC_64xlg.js.map
+//# sourceMappingURL=components-CSb7qSeQ.js.map