@geneui/components 3.0.0-next-e06ec94-05082025 → 3.0.0-next-67f77e7-11082025

package/Menu.js

@@ -1,4 +1,4 @@
-import React__default, { createContext, useState, useRef, useContext, useEffect, useMemo, Children, cloneElement } from 'react';
+import React__default, { createContext, useState, useRef, useContext, useEffect, useMemo, Children, cloneElement, isValidElement } from 'react';
 import { c as classNames } from './index-ce02421b.js';
 import Loader from './Loader.js';
 import { P as Popover, a as PopoverBody } from './PopoverBody-7437f3ac.js';
@@ -60,12 +60,12 @@ const findPathOfSelected = (menu, path = []) => {
 const MENU_GAP_FROM_TARGET = 4;
 const cloneChildrenRecursive = (children, paths, props = {}, pathID = "") => {
     return Children.map(children, (child, i) => {
-        var _a, _b, _c;
+        var _a, _b;
         const generatedId = pathID ? `${pathID}_${i}` : `${i}`;
         return cloneElement(child, Object.assign(Object.assign({}, props), { generatedId,
-            paths }), Array.isArray((_a = child.props) === null || _a === void 0 ? void 0 : _a.children)
-            ? cloneChildrenRecursive((_b = child.props) === null || _b === void 0 ? void 0 : _b.children, paths, props, generatedId)
-            : (_c = child.props) === null || _c === void 0 ? void 0 : _c.children);
+            paths }), child.props.children && typeof child.props.children !== "string"
+            ? cloneChildrenRecursive((_a = child.props) === null || _a === void 0 ? void 0 : _a.children, paths, props, generatedId)
+            : (_b = child.props) === null || _b === void 0 ? void 0 : _b.children);
     });
 };
 const MenuContext = createContext({});
@@ -127,7 +127,7 @@ const Menu = ({ onChange, children, loading, loadingText, swappable, setPropsFor
         if (onOpenChange) {
             onOpenChange(isOpenState);
         }
-    }, [isOpenState]);
+    }, [isOpenState, onOpenChange]);
     const onChangeHandler = ({ generatedId, isBack, closeMenu, item }) => {
         if (swappable || isMobileBreakpoint)
             setOpenSelectedPathState(false);
@@ -142,7 +142,7 @@ const Menu = ({ onChange, children, loading, loadingText, swappable, setPropsFor
         else {
             setPaths(currentPath);
         }
-        if (closeMenu) {
+        if (closeMenu && onChange) {
             onChange(Object.assign(Object.assign({}, item), { title: typeof (item === null || item === void 0 ? void 0 : item.children) === "string" ? item === null || item === void 0 ? void 0 : item.children : item === null || item === void 0 ? void 0 : item.title }));
         }
     };
@@ -157,7 +157,7 @@ const Menu = ({ onChange, children, loading, loadingText, swappable, setPropsFor
         relativeRefsSetter,
         openSelectedPath: openSelectedPathState,
         size: size
-    }), [onChangeHandler, swappable, size, isMobileBreakpoint, relativeRefsSetter, openSelectedPath]);
+    }), [onChangeHandler, swappable, size, isMobileBreakpoint, relativeRefsSetter, openSelectedPathState]);
     const clonedChildren = cloneChildrenRecursive(children, paths);
     const onScrollHandler = () => {
         if (isMobileBreakpoint)
@@ -242,7 +242,7 @@ const MenuItemButton = ({ type, onItemClickHandler, disabled, children, danger,
 };
 
 const MenuItem = (props) => {
-    const { children, title, activeElement, selected, IconBefore, IconAfter, danger, disabled, id, divider, ComponentRender, emptyText = "No data to show", paths, generatedId, loading, loadingText } = props;
+    const { children, title, activeElement, selected, IconBefore, IconAfter, danger, disabled, id, divider, ComponentRender, emptyText = "No data to show", paths, generatedId, loading, loadingText, render } = props;
     const [propsForPopover, setPropsForPopover] = useState({});
     const parentRef = useRef(null);
     const { onChangeHandler, swappable, relativeRefsSetter, size, openSelectedPath } = useContext(MenuContext);
@@ -267,7 +267,14 @@ const MenuItem = (props) => {
     });
     const onItemClickHandler = (isBack) => {
         if (onChangeHandler && generatedId) {
-            onChangeHandler({ generatedId, id, isBack, closeMenu: typeof children === "string", item: props });
+            const shouldCloseMenu = !!render || typeof children === "string";
+            onChangeHandler({
+                generatedId,
+                id,
+                isBack,
+                closeMenu: shouldCloseMenu,
+                item: props
+            });
         }
     };
     useEffect(() => {
@@ -314,28 +321,51 @@ const MenuItem = (props) => {
         }
         return React__default.createElement("div", { className: "menu__content" }, children);
     }, [children, emptyText, loading, loadingText, swappable, isActiveSwappableContent]);
+    const renderMenuItem = (type) => {
+        if (render && type === "simple") {
+            const renderedElement = render({ id, title: children });
+            if (isValidElement(renderedElement)) {
+                const originalOnClick = renderedElement.props
+                    .onClick;
+                const propsToApply = {
+                    className: classNames("menu__item", renderedElement.props.className, {
+                        menu__item_danger: danger,
+                        menu__item_disabled: disabled,
+                        menu__item_selected: selected,
+                        menu__item_icon_after: !!IconAfter,
+                        menu__item_icon_before: !!IconBefore
+                    }),
+                    onClick: (event) => {
+                        originalOnClick === null || originalOnClick === void 0 ? void 0 : originalOnClick(event);
+                        onItemClickHandler(false);
+                    },
+                    disabled
+                };
+                return cloneElement(renderedElement, propsToApply, children);
+            }
+        }
+        if (type === "custom" && CustomElement) {
+            return CustomElement;
+        }
+        return (React__default.createElement(MenuItemButton, { type: type, onItemClickHandler: onItemClickHandler, title: title, IconBefore: IconBefore, IconAfter: IconAfter, disabled: disabled, danger: danger, propsForPopover: propsForPopover, active: popoverOpenState, divider: divider, selected: selected }, children));
+    };
     return swappable ? (React__default.createElement(React__default.Fragment, null, typeof children !== "string" ? (React__default.createElement(React__default.Fragment, null,
-        isActiveSwappableContent && !popoverOpenState && (React__default.createElement(MenuItemButton, { type: "parent", onItemClickHandler: onItemClickHandler, title: title, IconBefore: IconBefore, IconAfter: IconAfter, disabled: disabled, danger: danger, propsForPopover: propsForPopover, active: popoverOpenState, divider: divider })),
+        isActiveSwappableContent && !popoverOpenState && renderMenuItem("parent"),
         React__default.createElement("div", { className: classNames("menu__list", {
                 menu__list_current: popoverOpenState,
                 menu__list_hidden: !popoverOpenState
             }) },
             isActiveSwappableContent && (React__default.createElement("div", { className: "menu__header" },
                 React__default.createElement(MenuItemButton, { type: "header", onItemClickHandler: onItemClickHandler, title: title }))),
-            menuContent))) : (
-    // Simple menu item
-    isActiveSwappableContent &&
-        (CustomElement || (React__default.createElement(MenuItemButton, { type: "simple", onItemClickHandler: onItemClickHandler, danger: danger, selected: selected, disabled: disabled, IconBefore: IconBefore, IconAfter: IconAfter, divider: divider }, children)))))) : (React__default.createElement(React__default.Fragment, null, typeof children !== "string" ? (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(MenuItemButton, { type: "parent", onItemClickHandler: onItemClickHandler, title: title, IconBefore: IconBefore, IconAfter: IconAfter, disabled: disabled, danger: danger, propsForPopover: propsForPopover, active: popoverOpenState, divider: divider }),
+            menuContent))) : (isActiveSwappableContent && renderMenuItem(ComponentRender ? "custom" : "simple")))) : (React__default.createElement(React__default.Fragment, null, typeof children !== "string" ? (React__default.createElement(React__default.Fragment, null,
+        renderMenuItem("parent"),
         React__default.createElement(Popover, { setProps: setPropsForPopover, size: popoverSizeMapping[size], position: isRTLMode ? "left-top" : "right-top", withArrow: false, margin: 10, open: popoverOpenState, ref: popoverFloatingRef },
             React__default.createElement(PopoverBody, { withPadding: false, className: `menu__body menu__body_size menu__body_size_${size}`, withScrollbar: false },
                 React__default.createElement("div", { ref: parentRef, className: classNames("menu__list", {
                         menu__list_current: activeElement,
                         menu__item_disabled: disabled
                     }) },
-                    React__default.createElement(Scrollbar, { className: "menu__scrollbar", onScroll: onScrollHandler, scrollToTop: activeElementPosition, scrollBehaviorSmooth: false }, menuContent)))))) : (
-    // Simple menu item
-    CustomElement || (React__default.createElement(MenuItemButton, { type: "simple", onItemClickHandler: onItemClickHandler, danger: danger, selected: selected, disabled: disabled, IconBefore: IconBefore, IconAfter: IconAfter, divider: divider }, children)))));
+                    React__default.createElement(Scrollbar, { className: "menu__scrollbar", onScroll: onScrollHandler, scrollToTop: activeElementPosition, scrollBehaviorSmooth: false }, menuContent)))))) : (renderMenuItem(ComponentRender ? "custom" : "simple"))));
 };
 
 export { Menu, MenuItem };

package/Navigation.js

@@ -1,4 +1,4 @@
-import React__default, { useRef, useEffect, useState, useContext, Fragment } from 'react';
+import React__default, { useState, useRef, useEffect, isValidElement, cloneElement, useContext, Fragment } from 'react';
 import { c as classNames } from './index-ce02421b.js';
 import { _ as _objectWithoutProperties, a as _extends } from './ActivityRecent-b88e2ba8.js';
 import { S as SvgThreeDotsHorizontal } from './ThreeDotsHorizontal-479c2b4b.js';
@@ -77,8 +77,8 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-const NavigationItem = ({ title, children, onClick, disabled, selected, depth, Icon, path }) => {
-    const [isNavItemOpen, setIsNavItemOpen] = React__default.useState(false);
+const NavigationItem = ({ title, children, onClick, disabled, selected, depth, Icon, path, render }) => {
+    const [isNavItemOpen, setIsNavItemOpen] = useState(false);
     const textRef = useRef(null);
     const isTruncated = useEllipsisDetection(textRef, [title]);
     const onClickHandler = () => {
@@ -92,23 +92,41 @@ const NavigationItem = ({ title, children, onClick, disabled, selected, depth, I
             return;
         setIsNavItemOpen(selected);
     }, [title, selected]);
+    const itemContent = (React__default.createElement(React__default.Fragment, null,
+        Icon && React__default.createElement(Icon, { className: "navigationItem__icon", size: 20 }),
+        React__default.createElement(Tooltip, { text: title, isVisible: isTruncated },
+            React__default.createElement(Text, { as: "span", variant: "labelMediumMedium", className: "menu__title ellipsis-text", ref: textRef }, title)),
+        children && (React__default.createElement(SvgChevronRight, { className: classNames("navigationItem__chevron", {
+                navigationItem__chevron_open: isNavItemOpen
+            }), size: 20 }))));
+    const propsToApply = {
+        "aria-expanded": children ? isNavItemOpen : undefined,
+        disabled,
+        className: classNames("navigationItem__button", `navigationItem__button_shift_${depth}`, {
+            navigationItem__button_disabled: disabled,
+            navigationItem__button_selected: selected,
+            navigationItem__button_pointer_none: selected && !children,
+            navigationItem__button_selected_noChildren: !children && selected,
+            navigationItem__button_render: render && path
+        }),
+        onClick: onClickHandler
+    };
+    const linkData = { path, title, isActive: selected, hasChildren: !!children, isDisabled: disabled };
+    const interactiveElement = (() => {
+        if (render && path) {
+            const renderedElement = render(linkData);
+            if (isValidElement(renderedElement)) {
+                return cloneElement(renderedElement, Object.assign({}, propsToApply), itemContent);
+            }
+        }
+        return (React__default.createElement("button", Object.assign({ type: "button" }, propsToApply), itemContent));
+    })();
     return (React__default.createElement("div", { className: "navigationItem" },
-        React__default.createElement("button", { disabled: disabled, type: "button", className: classNames("navigationItem__button", `navigationItem__button_shift_${depth}`, {
-                navigationItem__button_disabled: disabled,
-                navigationItem__button_selected: selected,
-                navigationItem__button_pointer_none: selected && !children,
-                navigationItem__button_selected_noChildren: !children && selected
-            }), onClick: onClickHandler },
-            Icon && React__default.createElement(Icon, { className: "navigationItem__icon", size: 20 }),
-            React__default.createElement(Tooltip, { text: title, isVisible: isTruncated },
-                React__default.createElement(Text, { as: "span", variant: "labelMediumMedium", className: "menu__title ellipsis-text", ref: textRef }, title)),
-            children && (React__default.createElement(SvgChevronRight, { className: classNames("navigationItem__chevron", {
-                    navigationItem__chevron_open: isNavItemOpen
-                }), size: 20 }))),
+        interactiveElement,
         isNavItemOpen && children));
 };
 
-const NavigationColItem = ({ Icon, selected, disabled, title, onClick, index, onMouseEnter, propsForPopover = {}, opened, path, isVisible, hasChildren, currentSelected }) => {
+const NavigationColItem = ({ Icon, selected, disabled, title, onClick, index, onMouseEnter, propsForPopover = {}, opened, path, isVisible, hasChildren, currentSelected, render }) => {
     const textRef = useRef(null);
     const isTruncated = useEllipsisDetection(textRef, [title]);
     const onClickHandler = (activeIndex) => {
@@ -121,20 +139,39 @@ const NavigationColItem = ({ Icon, selected, disabled, title, onClick, index, on
             onMouseEnter(activeIndex);
         }
     };
+    const propsToApply = Object.assign(Object.assign({}, propsForPopover), { "aria-label": title, disabled: disabled || !isVisible, className: classNames("navigation__iconButton", {
+            navigation__iconButton_selected: selected,
+            navigation__iconButton_currentSelected: currentSelected && !selected && opened,
+            navigation__iconButton_pointer_none: selected && !hasChildren,
+            navigation__iconButton_disabled: disabled
+        }), onClick: () => onClickHandler(index || 0), onMouseEnter: () => onMouseEnterHandler(index || 0) });
+    const linkData = {
+        path,
+        title,
+        Icon,
+        isActive: selected,
+        hasChildren,
+        isDisabled: disabled
+    };
+    const interactiveElement = (() => {
+        if (render && path) {
+            const renderedElement = render(linkData);
+            if (isValidElement(renderedElement)) {
+                return cloneElement(renderedElement, Object.assign({}, propsToApply), Icon && React__default.createElement(Icon, null));
+            }
+        }
+        return (React__default.createElement("button", Object.assign({ type: "button" }, propsToApply), Icon && React__default.createElement(Icon, null)));
+    })();
     return (React__default.createElement("div", { className: "navigation__listItem" },
-        React__default.createElement("button", Object.assign({ type: "button", disabled: disabled || !isVisible, className: classNames("navigation__iconButton", {
-                navigation__iconButton_selected: selected,
-                navigation__iconButton_currentSelected: currentSelected && !selected && opened,
-                navigation__iconButton_pointer_none: selected && !hasChildren,
-                navigation__iconButton_disabled: disabled
-            }), onClick: () => onClickHandler(index), onMouseEnter: () => onMouseEnterHandler(index) }, propsForPopover), Icon && React__default.createElement(Icon, null)),
+        interactiveElement,
         title && (React__default.createElement(Tooltip, { text: title, isVisible: isTruncated },
             React__default.createElement(Text, { as: "p", variant: "captionMediumMedium", className: "navigation__listItemText ellipsis-text", ref: textRef }, title)))));
 };
 
-var css_248z = ".navigation{display:flex;height:100%;width:100%}.navigation__list{display:flex;height:100%;width:var(--guit-sem-dimension-width-3xlarge)}.navigation__listWrapper{align-items:center;border-inline-end:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);display:flex;flex-direction:column;overflow:hidden;padding:var(--guit-ref-spacing-xsmall) var(--guit-ref-spacing-xsmall) var(--guit-ref-spacing-2xlarge) var(--guit-ref-spacing-xsmall);width:100%}.navigation__listWrapper>.navigation__listItem{margin-block:var(--guit-ref-spacing-xsmall)}.navigation__listItems{display:flex;flex-flow:column wrap;gap:var(--guit-ref-spacing-xsmall);max-width:var(--guit-sem-dimension-height-xlarge);min-height:0}.navigation__listItem{align-items:center;display:flex;flex-direction:column;width:100%}.navigation__addButton{align-items:center;display:flex;flex:0 0 auto;flex-direction:column;height:var(--guit-sem-dimension-height-large);margin-top:auto;width:var(--guit-sem-dimension-width-large)}.navigation__listItemText{color:var(--guit-sem-color-foreground-neutral-1);max-width:100%;-webkit-user-select:none;user-select:none}.navigation__iconButton{border-radius:var(--guit-ref-radius-3xsmall);height:var(--guit-sem-dimension-height-large);padding:var(--guit-ref-spacing-xsmall);width:var(--guit-sem-dimension-width-large)}.navigation__iconButton_selected{background-color:var(--guit-sem-color-background-selected-2);color:var(--guit-sem-color-foreground-inverse)}.navigation__iconButton_currentSelected{background-color:var(--guit-sem-color-background-neutral-1-pressed)}.navigation__iconButton_disabled{background-color:var(--guit-sem-color-background-neutral-1);pointer-events:none}.navigation__iconButton_disabled,.navigation__iconButton_disabled+.navigation__listItemText{color:var(--guit-sem-color-foreground-disabled)}.navigation__iconButton_pointer_none{pointer-events:none}.navigation__iconButton:not(.navigation__iconButton_selected,.navigation__iconButton_disabled){color:var(--guit-sem-color-foreground-neutral-2)}.navigation__iconButton:not(.navigation__iconButton_selected,.navigation__iconButton_disabled):hover{background-color:var(--guit-sem-color-background-neutral-1-hover)}.navigation__iconButton:not(.navigation__iconButton_selected,.navigation__iconButton_disabled):active{background-color:var(--guit-sem-color-background-neutral-1-pressed)}.navigation__divider{flex:0 0 auto}.navigation__menu{border-inline-end:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);display:flex;height:100%;width:20rem}.navigation__menu_wrapper{height:100%;padding:var(--guit-ref-spacing-3xsmall) var(--guit-ref-spacing-xsmall)}.navigationItem,.navigation__menu_wrapper{display:flex;flex-direction:column;gap:var(--guit-ref-spacing-3xsmall);width:100%}.navigationItem__button{border-radius:var(--guit-ref-radius-3xsmall);display:flex;gap:var(--guit-ref-spacing-xsmall);padding:var(--guit-ref-spacing-xsmall) var(--guit-ref-spacing-xsmall) var(--guit-ref-spacing-xsmall) var(--guit-ref-spacing-medium);width:100%}.navigationItem__button:hover{background-color:var(--guit-sem-color-background-neutral-1-hover)}.navigationItem__button:active{background-color:var(--guit-sem-color-background-neutral-1-pressed)}.navigationItem__button_selected{color:var(--guit-sem-color-foreground-selected)}.navigationItem__button_selected_noChildren{background:var(--guit-sem-color-background-neutral-3);color:var(--guit-sem-color-foreground-accent-blue)}.navigationItem__button_pointer_none{pointer-events:none}.navigationItem__button_disabled{background-color:var(--guit-sem-color-background-neutral-1);color:var(--guit-sem-color-foreground-disabled);pointer-events:none}.navigationItem__button_shift_1{padding-inline-start:var(--guit-ref-spacing-5xlarge)}.navigationItem__button_shift_2{padding-inline-start:var(--guit-ref-spacing-8xlarge)}.navigationItem__button_shift_3{padding-inline-start:var(--guit-ref-spacing-9xlarge)}.navigationItem__button_shift_4{padding-inline-start:var(--guit-ref-spacing-10xlarge)}.navigationItem__chevron{margin-left:auto}.navigationItem__chevron_open{transform:rotate(90deg)}";
+var css_248z = ".navigation{display:flex;height:100%;width:100%}.navigation__list{display:flex;height:100%;width:var(--guit-sem-dimension-width-3xlarge)}.navigation__listWrapper{align-items:center;border-inline-end:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);display:flex;flex-direction:column;overflow:hidden;padding:var(--guit-ref-spacing-xsmall) var(--guit-ref-spacing-xsmall) var(--guit-ref-spacing-2xlarge) var(--guit-ref-spacing-xsmall);width:100%}.navigation__listWrapper>.navigation__listItem{margin-block:var(--guit-ref-spacing-xsmall)}.navigation__listItems{display:flex;flex-flow:column wrap;gap:var(--guit-ref-spacing-xsmall);max-width:var(--guit-sem-dimension-height-xlarge);min-height:0}.navigation__listItem{align-items:center;display:flex;flex-direction:column;width:100%}.navigation__addButton{align-items:center;display:flex;flex:0 0 auto;flex-direction:column;height:var(--guit-sem-dimension-height-large);margin-top:auto;width:var(--guit-sem-dimension-width-large)}.navigation__listItemText{color:var(--guit-sem-color-foreground-neutral-1);max-width:100%;-webkit-user-select:none;user-select:none}.navigation__iconButton{border-radius:var(--guit-ref-radius-3xsmall);height:var(--guit-sem-dimension-height-large);padding:var(--guit-ref-spacing-xsmall);width:var(--guit-sem-dimension-width-large)}.navigation__iconButton_selected{background-color:var(--guit-sem-color-background-selected-2);color:var(--guit-sem-color-foreground-inverse)}.navigation__iconButton_currentSelected{background-color:var(--guit-sem-color-background-neutral-1-pressed)}.navigation__iconButton_disabled{background-color:var(--guit-sem-color-background-neutral-1);pointer-events:none}.navigation__iconButton_disabled,.navigation__iconButton_disabled+.navigation__listItemText{color:var(--guit-sem-color-foreground-disabled)}.navigation__iconButton_pointer_none{pointer-events:none}.navigation__iconButton:not(.navigation__iconButton_selected,.navigation__iconButton_disabled){color:var(--guit-sem-color-foreground-neutral-2)}.navigation__iconButton:not(.navigation__iconButton_selected,.navigation__iconButton_disabled):hover{background-color:var(--guit-sem-color-background-neutral-1-hover)}.navigation__iconButton:not(.navigation__iconButton_selected,.navigation__iconButton_disabled):active{background-color:var(--guit-sem-color-background-neutral-1-pressed)}.navigation__divider{flex:0 0 auto}.navigation__menu{border-inline-end:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);display:flex;height:100%;width:20rem}.navigation__menu_wrapper{height:100%;padding:var(--guit-ref-spacing-3xsmall) var(--guit-ref-spacing-xsmall)}.navigationItem,.navigation__menu_wrapper{display:flex;flex-direction:column;gap:var(--guit-ref-spacing-3xsmall);width:100%}.navigationItem__button{border-radius:var(--guit-ref-radius-3xsmall);display:flex;gap:var(--guit-ref-spacing-xsmall);padding:var(--guit-ref-spacing-xsmall) var(--guit-ref-spacing-xsmall) var(--guit-ref-spacing-xsmall) var(--guit-ref-spacing-medium);width:100%}.navigationItem__button_render{color:inherit}.navigationItem__button:hover{background-color:var(--guit-sem-color-background-neutral-1-hover)}.navigationItem__button:active{background-color:var(--guit-sem-color-background-neutral-1-pressed)}.navigationItem__button_selected{color:var(--guit-sem-color-foreground-selected)}.navigationItem__button_selected_noChildren{background:var(--guit-sem-color-background-neutral-3);color:var(--guit-sem-color-foreground-accent-blue)}.navigationItem__button_pointer_none{pointer-events:none}.navigationItem__button_disabled{background-color:var(--guit-sem-color-background-neutral-1);color:var(--guit-sem-color-foreground-disabled);pointer-events:none}.navigationItem__button_shift_1{padding-inline-start:var(--guit-ref-spacing-5xlarge)}.navigationItem__button_shift_2{padding-inline-start:var(--guit-ref-spacing-8xlarge)}.navigationItem__button_shift_3{padding-inline-start:var(--guit-ref-spacing-9xlarge)}.navigationItem__button_shift_4{padding-inline-start:var(--guit-ref-spacing-10xlarge)}.navigationItem__chevron{margin-left:auto}.navigationItem__chevron_open{transform:rotate(90deg)}";
 styleInject(css_248z);
 
+const ELEMENT_HEIGHT = 62;
 const findPath = (navigationData, targetPath, currentPath = []) => {
     for (let i = 0; i < navigationData.length; i++) {
         const item = navigationData[i];
@@ -154,26 +191,25 @@ const hasDataAndChildren = (data, index) => {
     var _a, _b;
     return !!(data && index !== null && ((_a = data[index]) === null || _a === void 0 ? void 0 : _a.children) && ((_b = data[index].children) === null || _b === void 0 ? void 0 : _b.length) > 0);
 };
-const NavMenuContent = ({ data, depth = 0, onClick, activePathIndex }) => {
+const NavMenuContent = ({ data, depth = 0, onClick, activePathIndex, render }) => {
     var _a;
     if (!data)
         return null;
     return (_a = data.children) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
         const itemKey = `${item.title}-${item.path}`;
         return (React__default.createElement(Fragment, { key: itemKey },
-            React__default.createElement(NavigationItem, { title: item.title, path: item.path, depth: depth, Icon: item.Icon, onClick: onClick, disabled: item.disabled, selected: index === (activePathIndex === null || activePathIndex === void 0 ? void 0 : activePathIndex[0]) }, item.children && (React__default.createElement(NavMenuContent, { data: item, depth: depth + 1, onClick: onClick, activePathIndex: activePathIndex === null || activePathIndex === void 0 ? void 0 : activePathIndex.slice(1) })))));
+            React__default.createElement(NavigationItem, { title: item.title, path: item.path, depth: depth, Icon: item.Icon, onClick: onClick, disabled: item.disabled, selected: index === (activePathIndex === null || activePathIndex === void 0 ? void 0 : activePathIndex[0]), render: render }, item.children && (React__default.createElement(NavMenuContent, { data: item, depth: depth + 1, onClick: onClick, activePathIndex: activePathIndex === null || activePathIndex === void 0 ? void 0 : activePathIndex.slice(1), render: render })))));
     });
 };
 /**
  * Navigation is a vertical component that appears on the left side of a user interface. It provides users with quick access to key features.
  */
-const Navigation = ({ className, open, navigationData = [], activePath, onClick, navigationCreateData, onNavigationCreateDataClick, moreMenuTitle = "More" }) => {
+const Navigation = ({ className, open, navigationData = [], activePath, onClick, navigationCreateData, onNavigationCreateDataClick, moreMenuTitle = "More", render }) => {
     const [currentDataIndex, setCurrentDataIndex] = useState(null);
     const [hoverDataIndex, setHoverDataIndex] = useState(null);
     const [forceOpen, setForceOpen] = useState(false);
     const [maxVisibleItems, setMaxVisibleItems] = useState(0);
     const [activePathIndex, setActivePathIndex] = useState(null);
-    const [moreMenuDataActiveIndex, setMoreMenuDataActiveIndex] = useState(-1);
     const [clonedNavigationData, setClonedNavigationData] = useState([]);
     const navColRef = useRef(null);
     const [propsForPopover, setPropsForPopover] = useState({});
@@ -213,11 +249,11 @@ const Navigation = ({ className, open, navigationData = [], activePath, onClick,
         setMenuData(menuSliceData);
     }, [maxVisibleItems, clonedNavigationData]);
     useEffect(() => {
-        if (navColRef.current) {
-            const { scrollWidth, offsetWidth } = navColRef.current;
+        const navColRefCurrent = navColRef.current;
+        if (navColRefCurrent) {
+            const { scrollWidth, offsetWidth } = navColRefCurrent;
             if (scrollWidth > offsetWidth) {
-                const containerHeight = navColRef.current.offsetHeight;
-                const ELEMENT_HEIGHT = 62;
+                const containerHeight = navColRefCurrent.offsetHeight;
                 const maxVisibleItemsWithGap = Math.floor(containerHeight / ELEMENT_HEIGHT);
                 setMaxVisibleItems(maxVisibleItemsWithGap);
             }
@@ -225,7 +261,7 @@ const Navigation = ({ className, open, navigationData = [], activePath, onClick,
                 setMaxVisibleItems(clonedNavigationData.length);
             }
         }
-    }, [navColRef.current, clonedNavigationData, height]);
+    }, [navColRef, clonedNavigationData, height]);
     useEffect(() => {
         const lastVisibleItemIndex = maxVisibleItems - 1;
         if (lastVisibleItemIndex === -1)
@@ -277,54 +313,49 @@ const Navigation = ({ className, open, navigationData = [], activePath, onClick,
             }
         }
     };
-    const onMoreMenuItemsClickHandler = (item) => {
-        const foundedItem = navigationData.find((data) => {
-            return !Array.isArray(item.children) && item.children === data.title;
-        });
-        const index = maxVisibleItems + +item.id;
-        setCurrentDataIndex(index);
-        setForceOpen(hasDataAndChildren(clonedNavigationData, index));
+    const onMoreMenuItemsClickHandler = (menuItemProps) => {
+        const indexInMenuData = Number(menuItemProps.id);
+        const originalIndex = maxVisibleItems + indexInMenuData;
+        const clickedItem = clonedNavigationData[originalIndex];
+        if (!clickedItem)
+            return;
+        setCurrentDataIndex(originalIndex);
+        setForceOpen(hasDataAndChildren(clonedNavigationData, originalIndex));
         setHoverDataIndex(null);
-        if ((foundedItem === null || foundedItem === void 0 ? void 0 : foundedItem.path) && onClick) {
-            onClick(foundedItem.path);
+        if (clickedItem.path && onClick) {
+            onClick(clickedItem.path);
         }
-        setActivePathIndex([maxVisibleItems - 1]);
     };
     const onNavigationCreateDataClickHandler = (item) => onNavigationCreateDataClick === null || onNavigationCreateDataClick === void 0 ? void 0 : onNavigationCreateDataClick(item);
-    useEffect(() => {
-        if (!(clonedNavigationData.length > maxVisibleItems))
-            return;
-        const index = activePathIndex === null || activePathIndex === void 0 ? void 0 : activePathIndex[0];
-        if (typeof index === "number" && index >= maxVisibleItems) {
-            setMoreMenuDataActiveIndex(maxVisibleItems - index);
-        }
-        else {
-            setMoreMenuDataActiveIndex(-1);
-        }
-    }, [maxVisibleItems, activePathIndex]);
     const onCreateMenuClickHandler = (isOpen) => {
         setIsCreateMenuOpen(isOpen);
     };
-    return (React__default.createElement("div", { className: classNames("navigation", className), role: "navigation" }, isMobileBreakpoint ? (
-    // todo create navigation mobile
-    React__default.createElement("div", null, "Mobile Navigation")) : (React__default.createElement(React__default.Fragment, null,
+    return (React__default.createElement("div", { className: classNames("navigation", className), role: "navigation" }, isMobileBreakpoint ? (React__default.createElement("div", null, "Mobile Navigation")) : (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("nav", { className: "navigation__list" },
             React__default.createElement("div", { className: "navigation__listWrapper" },
-                React__default.createElement("div", { className: "navigation__listItems", ref: navColRef }, clonedNavigationData === null || clonedNavigationData === void 0 ? void 0 : clonedNavigationData.map((item, index) => {
-                    return (React__default.createElement(Fragment, { key: `${item.title}-${item.path}` },
-                        React__default.createElement(NavigationColItem, { isVisible: index < maxVisibleItems, Icon: item.Icon, title: item.title, onClick: onNavigationColItemClick, index: index, path: item.path, opened: forceOpen, currentSelected: currentDataIndex === index, selected: index === (activePathIndex === null || activePathIndex === void 0 ? void 0 : activePathIndex[0]), onMouseEnter: onMouseEnterHandler, disabled: item.disabled, propsForPopover: hoverDataIndex === index ? propsForPopover : {}, hasChildren: item.children && item.children.length > 0 }),
-                        hoverDataIndex !== null && item.children && item.children.length > 0 && (React__default.createElement(Popover, { setProps: setPropsForPopover, size: "small", position: "right-top", withArrow: true, trigger: "hover", margin: 20, disableReposition: false, ref: popoverRef },
-                            React__default.createElement(PopoverBody, { withPadding: false },
-                                React__default.createElement("div", { className: "navigation__menu_wrapper" },
-                                    React__default.createElement(NavMenuContent, { data: clonedNavigationData[hoverDataIndex], onClick: onItemClickHandler, activePathIndex: activePathIndex &&
-                                            hoverDataIndex === activePathIndex[0]
-                                            ? activePathIndex.slice(1)
-                                            : null })))))));
-                })),
+                React__default.createElement("div", { className: "navigation__listItems", ref: navColRef }, clonedNavigationData === null || clonedNavigationData === void 0 ? void 0 : clonedNavigationData.map((item, index) => (React__default.createElement(Fragment, { key: `${item.title}-${item.path}` },
+                    React__default.createElement(NavigationColItem, { isVisible: index < maxVisibleItems, Icon: item.Icon, title: item.title, onClick: onNavigationColItemClick, index: index, path: item.path, opened: forceOpen, currentSelected: currentDataIndex === index, selected: index === (activePathIndex === null || activePathIndex === void 0 ? void 0 : activePathIndex[0]), onMouseEnter: onMouseEnterHandler, disabled: item.disabled, propsForPopover: hoverDataIndex === index ? propsForPopover : {}, hasChildren: item.children && item.children.length > 0, render: render }),
+                    hoverDataIndex !== null && item.children && item.children.length > 0 && (React__default.createElement(Popover, { setProps: setPropsForPopover, size: "small", position: "right-top", withArrow: true, trigger: "hover", margin: 20, disableReposition: false, ref: popoverRef },
+                        React__default.createElement(PopoverBody, { withPadding: false },
+                            React__default.createElement("div", { className: "navigation__menu_wrapper" },
+                                React__default.createElement(NavMenuContent, { data: clonedNavigationData[hoverDataIndex], onClick: onItemClickHandler, activePathIndex: activePathIndex && hoverDataIndex === activePathIndex[0]
+                                        ? activePathIndex.slice(1)
+                                        : null, render: render }))))))))),
                 clonedNavigationData.length > maxVisibleItems && (React__default.createElement(React__default.Fragment, null,
                     React__default.createElement(NavigationColItem, { Icon: SvgThreeDotsHorizontal, title: moreMenuTitle, isVisible: true, propsForPopover: menuPropsForPopover }),
-                    React__default.createElement(Menu, { position: "right-bottom", onChange: onMoreMenuItemsClickHandler, setPropsForPopover: setMenuPropsForPopover }, menuData.map(({ Icon, title, disabled }, index) => {
-                        return (React__default.createElement(MenuItem, { key: `menuitem-${title}-${(Icon === null || Icon === void 0 ? void 0 : Icon.displayName) || (Icon === null || Icon === void 0 ? void 0 : Icon.name) || index}`, id: index, IconBefore: Icon, selected: index === moreMenuDataActiveIndex, disabled: disabled }, title));
+                    React__default.createElement(Menu, { position: "right-bottom", onChange: onMoreMenuItemsClickHandler, setPropsForPopover: setMenuPropsForPopover }, menuData.map((item, index) => {
+                        const isParentItem = !!item.children && item.children.length > 0;
+                        const menuItemRender = render && item.path && !isParentItem
+                            ? (menuLinkData) => render({
+                                path: item.path,
+                                title: menuLinkData.title,
+                                isActive: activePath === item.path,
+                                hasChildren: isParentItem,
+                                isDisabled: item.disabled,
+                                Icon: item.Icon
+                            })
+                            : undefined;
+                        return (React__default.createElement(MenuItem, { key: `menuitem-${item.title}-${item.path || index}`, id: index, IconBefore: item.Icon, selected: activePath === item.path, disabled: item.disabled, render: menuItemRender }, item.title));
                     })))),
                 navigationCreateData && (React__default.createElement(React__default.Fragment, null,
                     React__default.createElement(Button, Object.assign({ onClick: () => { }, Icon: isCreateMenuOpen ? SvgX : SvgPlus, size: "large", appearance: "secondary", className: "navigation__addButton" }, propsForCreatePopover)),
@@ -339,7 +370,7 @@ const Navigation = ({ className, open, navigationData = [], activePath, onClick,
                 React__default.createElement("div", { className: "navigation__menu_wrapper" },
                     React__default.createElement(NavMenuContent, { data: clonedNavigationData[currentDataIndex], onClick: onItemClickHandler, activePathIndex: activePathIndex && currentDataIndex === activePathIndex[0]
                             ? activePathIndex.slice(1)
-                            : null })))))))));
+                            : null, render: render })))))))));
 };
 
 export { Navigation as default };

package/components/molecules/Menu/Menu.d.ts

@@ -28,7 +28,7 @@ interface IMenuProps {
      */
     children: ReactElement | ReactElement[];
     /**
-     *  Indicates whether the menu is in a loading state. If true, a loading indicator is displayed instead of the menu items.
+     * Indicates whether the menu is in a loading state. If true, a loading indicator is displayed instead of the menu items.
      */
     loading?: boolean;
     /**
@@ -38,9 +38,9 @@ interface IMenuProps {
     /**
      * Callback function hat returns all provided menu item props when a menu item is selected.
      */
-    onChange: (item: IMenuItemProps) => void;
+    onChange?: (item: IMenuItemProps) => void;
     /**
-     *  If true, enables swapping behavior, modifying the appearance and behavior of the menu.
+     * If true, enables swapping behavior, modifying the appearance and behavior of the menu.
      */
     swappable?: boolean;
     /**
@@ -54,8 +54,8 @@ interface IMenuProps {
      */
     size?: SizeType;
     /**
-     * Position of the Menu first popover, relative to the reference (trigger, anchor) element.<br>
-     * Possible values: `bottom-center | bottom-left | bottom-right | left-bottom | left-center` <br> `left-top | right-bottom | right-center | right-top | top-center | top-left | top-right | auto`
+     * Position of the Menu first popover, relative to the reference (trigger, anchor) element.<br/>
+     * Possible values: `bottom-center | bottom-left | bottom-right | left-bottom | left-center` <br/> `left-top | right-bottom | right-center | right-top | top-center | top-left | top-right | auto`
      */
     position?: IPopoverProps["position"];
     /**

package/components/molecules/Menu/MenuItem.d.ts

@@ -54,7 +54,7 @@ interface IMenuItemProps {
      */
     paths?: string[];
     /**
-     *  Indicates whether the menu is in a loading state. If true, a loading indicator is displayed instead of the menu items.
+     * Indicates whether the menu is in a loading state. If true, a loading indicator is displayed instead of the menu items.
      */
     loading?: boolean;
     /**
@@ -62,6 +62,13 @@ interface IMenuItemProps {
      */
     loadingText?: string;
     generatedId?: string;
+    /**
+     * Custom render function for the menu item.
+     */
+    render?: (linkData: {
+        id: number | string;
+        title?: string;
+    }) => ReactNode;
 }
 declare const MenuItem: FC<IMenuItemProps>;
 export { IMenuItemProps, MenuItem as default };

package/components/molecules/Navigation/Navigation.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, ReactNode } from "react";
 import { IMenuItemProps } from "@components/molecules/Menu";
 import "./Navigation.scss";
 export interface INavigationData {
@@ -43,6 +43,17 @@ interface INavigationProps {
      * Optional custom title for the "More" menu.
      */
     moreMenuTitle?: string;
+    /**
+     * Custom render function for navigation links.
+     */
+    render?: (linkData: {
+        path?: string;
+        title?: string;
+        isActive?: boolean;
+        hasChildren?: boolean;
+        isDisabled?: boolean;
+        Icon?: FC;
+    }) => ReactNode;
 }
 export declare const findPath: (navigationData: INavigationData[], targetPath: string, currentPath?: number[]) => number[] | null;
 /**

package/components/molecules/Navigation/NavigationItem.d.ts

@@ -1,14 +1,16 @@
-import React, { FC } from "react";
+import { FC, ReactNode } from "react";
 import { IconProps } from "@geneui/icons";
+import { INavigationProps } from "../Navigation";
 interface INavigationItemProps {
     title: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     onClick?: (path: string) => void;
     disabled?: boolean;
     selected?: boolean;
     depth: number;
     Icon?: FC<IconProps>;
     path?: string;
+    render?: INavigationProps["render"];
 }
 declare const NavigationItem: FC<INavigationItemProps>;
 export { INavigationItemProps, NavigationItem as default };

package/components/molecules/Navigation/NavigattionColItem.d.ts

@@ -1,5 +1,6 @@
 import { FC } from "react";
 import { IconProps } from "@geneui/icons";
+import { INavigationProps } from "../Navigation";
 interface INavigationColItemProps {
     Icon?: FC<IconProps>;
     selected?: boolean;
@@ -14,6 +15,7 @@ interface INavigationColItemProps {
     isVisible?: boolean;
     hasChildren?: boolean;
     currentSelected?: boolean;
+    render?: INavigationProps["render"];
 }
 declare const NavigationColItem: FC<INavigationColItemProps>;
 export { INavigationColItemProps, NavigationColItem as default };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@geneui/components",
     "description": "The Gene UI components library designed for BI tools",
-    "version": "3.0.0-next-e06ec94-05082025",
+    "version": "3.0.0-next-67f77e7-11082025",
     "author": "SoftConstruct",
     "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
     "repository": {