@ixo/ui 0.0.14 → 0.0.16

package/dist/{components-BiD0_7V_.js → components-Cil160oB.js}

@@ -774,8 +774,8 @@ function AccordionTable({
     }
   );
 }
-const Header$3 = lazy(() => import("./index-Dva9zr6w.js"));
-const Footer = lazy(() => import("./index-BvFDLUUX.js"));
+const Header$3 = lazy(() => import("./index-n-U_gY17.js"));
+const Footer = lazy(() => import("./index-244kPbim.js"));
 function ActionCard({ header, content, footer, useHoverMode = false }) {
   const hasContent = !!content || !!footer;
   const initialVisibility = footer?.startHidden !== true;
@@ -859,7 +859,7 @@ function Loader({ size, color = "primary" }) {
 }
 const CARD_WIDTH$1 = 350;
 const CARD_HEADER_HEIGHT = 158;
-const Header$2 = lazy(() => import("./index-CsIW1_OQ.js"));
+const Header$2 = lazy(() => import("./index-eX99B1CW.js"));
 function Card({ children, className, contentClassName, roundedBottom, noPadding = false, fullWidth = false, header, wrapperSx, onClick }) {
   const wrapperRef = useRef(null);
   const handleOnClick = useCallback(
@@ -1294,7 +1294,7 @@ function ModalSheet({ isOpen, children, hideHandler, zIndex, onRequestHide, onRe
     document.body
   );
 }
-const Badge = lazy(() => import("./index-CF2PVnSW.js"));
+const Badge = lazy(() => import("./index-CzbZW1t8.js"));
 function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
   const shadowScrollRef = useRef(null);
   const wrapperContentAreaRef = useRef(null);
@@ -2137,16 +2137,16 @@ function Avatar({ src, rounded = true, size = 62, did }) {
   return /* @__PURE__ */ jsx(User, { css: ({ text }) => ({ ...css2, backgroundColor: text.secondary }) });
 }
 const MIN_WIDTH = 200;
-const MAX_WIDTH = 600;
-function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width = 300, onWidthChange }) {
+function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width = 450, onWidthChange, onMaxExpand }) {
   const [isResizing, setIsResizing] = useState(false);
   const [ref] = useResizeObserver();
   const isShowingRef = useRef(false);
+  const hasFiredMaxExpand = useRef(false);
   const theme = useUITheme();
   useEffect(() => {
     if (!asideCollapsed && width <= MIN_WIDTH) {
       isShowingRef.current = true;
-      onWidthChange?.(300);
+      onWidthChange?.(width);
       setTimeout(() => {
         isShowingRef.current = false;
       }, 200);
@@ -2172,7 +2172,9 @@ function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width
   const handleMouseMove = (e) => {
     if (!isResizing) return;
     const newWidth = window.innerWidth - e.clientX;
-    onWidthChange?.(Math.min(Math.max(newWidth, MIN_WIDTH), MAX_WIDTH));
+    const maxWidth = window.innerWidth - 600;
+    const constrainedWidth = Math.min(Math.max(newWidth, MIN_WIDTH), maxWidth);
+    onWidthChange?.(constrainedWidth);
   };
   useEffect(() => {
     if (width === MIN_WIDTH && !asideCollapsed && onAsideToggle && !isShowingRef.current) {
@@ -2180,13 +2182,36 @@ function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width
       onAsideToggle();
     }
   }, [width, asideCollapsed, onAsideToggle]);
+  useEffect(() => {
+    const maxWidth = window.innerWidth - 600;
+    if (width >= maxWidth && onMaxExpand && !hasFiredMaxExpand.current) {
+      hasFiredMaxExpand.current = true;
+      clearListeners();
+      onMaxExpand();
+    } else if (width < maxWidth) {
+      hasFiredMaxExpand.current = false;
+    }
+  }, [width, onMaxExpand]);
+  useEffect(() => {
+    const handleWindowResize = () => {
+      const newMaxWidth = window.innerWidth - 600;
+      const newMinWidth = MIN_WIDTH;
+      if (width > newMaxWidth) {
+        onWidthChange?.(newMaxWidth);
+      } else if (width < newMinWidth) {
+        onWidthChange?.(newMinWidth);
+      }
+    };
+    window.addEventListener("resize", handleWindowResize);
+    return () => window.removeEventListener("resize", handleWindowResize);
+  }, [width, onWidthChange]);
   const handleMouseUp = () => setIsResizing(false);
   const handleMouseDown = (e) => {
     e.preventDefault();
     setIsResizing(true);
   };
   if (asideCollapsed) return null;
-  return /* @__PURE__ */ jsxs(AppShell.Aside, { w: width, miw: 200, maw: 600, ref, children: [
+  return /* @__PURE__ */ jsxs(AppShell.Aside, { w: width, miw: 200, maw: window.innerWidth - 340, ref, children: [
     /* @__PURE__ */ jsx(
       Box,
       {
@@ -2252,6 +2277,7 @@ function MenuItem({ item, onMenuItemClick, depth = 0 }) {
   const { value: isExpanded, toggle: toggle2 } = useToggle(false);
   const hasChildren = item.children && item.children.length > 0;
   const handleItemClick = () => {
+    if (!!item?.disabled) return;
     onMenuItemClick(item);
   };
   const handleToggleClick = (e) => {
@@ -2406,10 +2432,11 @@ function AppShellNavigation({
   right,
   asideCollapsed = true,
   onAsideToggle,
+  onMaxExpand,
   children
 }) {
   const [navbarCollapsed, { toggle: toggleNavbar }] = useDisclosure(true);
-  const [asideWidth, setAsideWidth] = useState(300);
+  const [asideWidth, setAsideWidth] = useState(450);
   const theme = useUITheme();
   return /* @__PURE__ */ jsxs(
     AppShell,
@@ -2504,7 +2531,7 @@ function AppShellNavigation({
           ] })
         ] }) }),
         /* @__PURE__ */ jsx(AppShell.Main, { children }),
-        /* @__PURE__ */ jsx(AsideResizable, { asideCollapsed, onAsideToggle, width: asideWidth, onWidthChange: setAsideWidth, children: right })
+        /* @__PURE__ */ jsx(AsideResizable, { asideCollapsed, onAsideToggle, onMaxExpand, width: asideWidth, onWidthChange: setAsideWidth, children: right })
       ]
     }
   );
@@ -5482,13 +5509,13 @@ function ActionButton({ onClick, left, right }) {
     }
   );
 }
-const MainAction = lazy(() => import("./index-CXrrJ_Le.js"));
-const Header$1 = lazy(() => import("./index-By0FBgRQ.js"));
-const Content = lazy(() => import("./index-DVcSKgbJ.js"));
+const MainAction = lazy(() => import("./index-jy143QcI.js"));
+const Header$1 = lazy(() => import("./index-asyXfp7h.js"));
+const Content = lazy(() => import("./index-DoHKF47N.js"));
 const Map = lazy(() => import("./index-D5Ufmf-s.js"));
 const CustomContent = lazy(() => import("./index-DsYjW_4y.js"));
-const Assets = lazy(() => import("./index-c39fFlNp.js"));
-const Actions = lazy(() => import("./index-DqcjuULv.js"));
+const Assets = lazy(() => import("./index-C_8ZG5p0.js"));
+const Actions = lazy(() => import("./index-CLayt7ii.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);
@@ -10802,4 +10829,4 @@ export {
   CardSelector as y,
   CardOutput as z
 };
-//# sourceMappingURL=components-BiD0_7V_.js.map
+//# sourceMappingURL=components-Cil160oB.js.map