@synerise/ds-app-menu 1.2.8 → 1.2.10

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-app-menu@1.2.9...@synerise/ds-app-menu@1.2.10) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-app-menu
+
+## [1.2.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-app-menu@1.2.8...@synerise/ds-app-menu@1.2.9) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-app-menu
+
 ## [1.2.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-app-menu@1.2.7...@synerise/ds-app-menu@1.2.8) (2026-03-09)
 
 **Note:** Version bump only for package @synerise/ds-app-menu

package/README.md

@@ -61,16 +61,17 @@ import Icon, { DashboardColorM, DashboardGreyM, SettingsColorM, AnalyticsColorM
 | activeItem | ID of active menu item            | string               | -       |
 | footer     | Footer of menu                    | React.ReactNode      | -       |
 | children   | Menu items                        | React.ReactNodeArray | -       |
-| top        | Distance from top of window in px | number               | -       |
+| top        | Distance from top of window in px | number               | 0       |
 
 ### AppMenu.Item
 
 | Property | Description                 | Type            | Default |
 | -------- | --------------------------- | --------------- | ------- |
-| subMenu  | Submenu component           | React.ReactNode | -       |
-| name     | Name visible in toolti      | string          | -       |
-| id       | ID of submenu               | string          | -       |
-| children | Menu item children ie. icon | React.ReactNode | -       |
+| subMenu   | Submenu component            | React.ReactNode | -       |
+| name      | Name visible in tooltip      | string          | -       |
+| id        | ID of menu item              | string          | -       |
+| children  | Menu item children ie. icon  | React.ReactNode | -       |
+| className | Custom CSS class             | string          | -       |
 
 ### AppMenu.Item.Icon
 
@@ -81,9 +82,11 @@ import Icon, { DashboardColorM, DashboardGreyM, SettingsColorM, AnalyticsColorM
 
 ### AppMenu.SubMenu
 
-| Property | Description      | Type                 | Default |
-| -------- | ---------------- | -------------------- | ------- |
-| children | Submenu elements | React.ReactNodeArray | -       |
+| Property  | Description      | Type            | Default |
+| --------- | ---------------- | --------------- | ------- |
+| children  | Submenu elements | React.ReactNode | -       |
+| className | Custom CSS class | string          | -       |
+| style     | Inline styles    | CSSProperties   | -       |
 
 ### AppMenu.SubMenu.Title
 

package/dist/AppMenu.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-import { type AppMenuProps } from './AppMenu.types';
+import { default as React } from 'react';
+import { AppMenuProps } from './AppMenu.types';
 declare const AppMenu: {
     ({ className, children, footer, activeItem: activeId, top, }: AppMenuProps): React.JSX.Element;
-    SubMenu: React.FC<import("./SubMenu/SubMenu.types").SubMenuProps> & import("./SubMenu/SubMenu.types").SubComponents;
+    SubMenu: React.FC<import('./SubMenu/SubMenu.types').SubMenuProps> & import('./SubMenu/SubMenu.types').SubComponents;
     Item: {
         ({ children, subMenu, id, name, className }: {
             subMenu?: React.ReactElement;

package/dist/AppMenu.js

@@ -1,45 +1,40 @@
-import React from 'react';
-import { useOnClickOutside } from '@synerise/ds-utils';
-import * as S from './AppMenu.styles';
-import Item from './Item/Item';
-import MenuContext from './MenuContext/MenuContext';
-import NavigableItems from './NavigableItems/NavigableItems';
-import SubMenu from './SubMenu/SubMenu';
-var AppMenu = function AppMenu(_ref) {
-  var className = _ref.className,
-    children = _ref.children,
-    footer = _ref.footer,
-    activeId = _ref.activeItem,
-    _ref$top = _ref.top,
-    top = _ref$top === void 0 ? 0 : _ref$top;
-  var _React$useState = React.useState(false),
-    isOpened = _React$useState[0],
-    setOpened = _React$useState[1];
-  var _React$useState2 = React.useState(activeId),
-    activeItem = _React$useState2[0],
-    setActiveItem = _React$useState2[1];
-  var ref = React.useRef(null);
-  useOnClickOutside(ref, function () {
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React from "react";
+import { useOnClickOutside } from "@synerise/ds-utils";
+import { MenuWrapper, ItemsWrapper, ItemsDivider } from "./AppMenu.styles.js";
+import Item from "./Item/Item.js";
+import MenuContext from "./MenuContext/MenuContext.js";
+import NavigableItems from "./NavigableItems/NavigableItems.js";
+import SubMenu from "./SubMenu/SubMenu.js";
+const AppMenu = ({
+  className,
+  children,
+  footer,
+  activeItem: activeId,
+  top = 0
+}) => {
+  const [isOpened, setOpened] = React.useState(false);
+  const [activeItem, setActiveItem] = React.useState(activeId);
+  const ref = React.useRef(null);
+  useOnClickOutside(ref, () => {
     setOpened(false);
     setActiveItem(activeId);
   });
-  return /*#__PURE__*/React.createElement(S.MenuWrapper, {
-    className: (className || '') + " menu " + (isOpened ? 'menu--opened' : '') + " ds-app-menu",
-    ref: ref,
-    top: top
-  }, /*#__PURE__*/React.createElement(S.ItemsWrapper, null, /*#__PURE__*/React.createElement(MenuContext.Provider, {
-    value: {
-      isOpened: isOpened,
-      setOpened: setOpened,
-      activeItem: activeItem,
-      setActiveItem: setActiveItem
-    }
-  }, /*#__PURE__*/React.createElement(NavigableItems, {
-    onHideMenu: function onHideMenu() {
-      return setOpened(false);
-    }
-  }, children), footer && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.ItemsDivider, null), footer))));
+  return /* @__PURE__ */ jsx(MenuWrapper, { className: `${className || ""} menu ${isOpened ? "menu--opened" : ""} ds-app-menu`, ref, top, children: /* @__PURE__ */ jsx(ItemsWrapper, { children: /* @__PURE__ */ jsxs(MenuContext.Provider, { value: {
+    isOpened,
+    setOpened,
+    activeItem,
+    setActiveItem
+  }, children: [
+    /* @__PURE__ */ jsx(NavigableItems, { onHideMenu: () => setOpened(false), children }),
+    footer && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ItemsDivider, {}),
+      footer
+    ] })
+  ] }) }) });
 };
 AppMenu.SubMenu = SubMenu;
 AppMenu.Item = Item;
-export default AppMenu;
+export {
+  AppMenu as default
+};

package/dist/AppMenu.styles.d.ts

@@ -1,5 +1,5 @@
-export declare const MenuWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const MenuWrapper: import('styled-components').StyledComponent<"div", any, {
     top: number;
 }, never>;
-export declare const ItemsWrapper: import("styled-components").StyledComponent<"ul", any, {}, never>;
-export declare const ItemsDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ItemsWrapper: import('styled-components').StyledComponent<"ul", any, {}, never>;
+export declare const ItemsDivider: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/AppMenu.styles.js

@@ -1,21 +1,18 @@
-import styled from 'styled-components';
-export var MenuWrapper = styled.div.withConfig({
+import styled from "styled-components";
+const MenuWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "AppMenustyles__MenuWrapper",
   componentId: "sc-3a0k9p-0"
-})(["background:", ";height:calc(100% - ", "px);position:fixed;left:0;top:", "px;width:60px;box-shadow:0 4px 12px 0 rgba(35,41,54,0.04);display:flex;flex-flow:column;align-items:center;padding-top:12px;transition:all 0.25s cubic-bezier(0.95,0.17,0.27,0.79);transition-delay:0.25s;overflow:hidden;&.menu--opened{transition-delay:0s;width:322px;}"], function (props) {
-  return props.theme.palette.white;
-}, function (props) {
-  return props.top;
-}, function (props) {
-  return props.top;
-});
-export var ItemsWrapper = styled.ul.withConfig({
+})(["background:", ";height:calc(100% - ", "px);position:fixed;left:0;top:", "px;width:60px;box-shadow:0 4px 12px 0 rgba(35,41,54,0.04);display:flex;flex-flow:column;align-items:center;padding-top:12px;transition:all 0.25s cubic-bezier(0.95,0.17,0.27,0.79);transition-delay:0.25s;overflow:hidden;&.menu--opened{transition-delay:0s;width:322px;}"], (props) => props.theme.palette.white, (props) => props.top, (props) => props.top);
+const ItemsWrapper = /* @__PURE__ */ styled.ul.withConfig({
   displayName: "AppMenustyles__ItemsWrapper",
   componentId: "sc-3a0k9p-1"
 })(["padding:12px 0 0;margin:0;height:100%;position:absolute;left:0;top:0;width:60px;display:flex;flex-flow:column;align-items:center;z-index:2;list-style:none;"]);
-export var ItemsDivider = styled.div.withConfig({
+const ItemsDivider = /* @__PURE__ */ styled.div.withConfig({
   displayName: "AppMenustyles__ItemsDivider",
   componentId: "sc-3a0k9p-2"
-})(["width:40px;border-bottom:1px solid ", ";flex:1 1 auto;"], function (props) {
-  return props.theme.palette['grey-100'];
-});
+})(["width:40px;border-bottom:1px solid ", ";flex:1 1 auto;"], (props) => props.theme.palette["grey-100"]);
+export {
+  ItemsDivider,
+  ItemsWrapper,
+  MenuWrapper
+};

package/dist/AppMenu.types.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode, type ReactNodeArray } from 'react';
+import { ReactNode, ReactNodeArray } from 'react';
 export type AppMenuProps = {
     className?: string;
     activeItem: string;

package/dist/AppMenu.types.js

@@ -1 +1 @@
-export {};
+

package/dist/Item/Icon/Icon.d.ts

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from 'react';
+import { default as React, ReactNode } from 'react';
 type AppMenuIconProps = {
     active: ReactNode;
     inActive: ReactNode;

package/dist/Item/Icon/Icon.js

@@ -1,15 +1,16 @@
-import React from 'react';
-import IconComponent from '@synerise/ds-icon';
-import * as S from './Icon.styles';
-export var AppMenuIcon = function AppMenuIcon(_ref) {
-  var active = _ref.active,
-    inActive = _ref.inActive;
-  return /*#__PURE__*/React.createElement(S.Wrapper, null, /*#__PURE__*/React.createElement(IconComponent, {
-    className: "item__icon item__icon--active",
-    component: active
-  }), /*#__PURE__*/React.createElement(IconComponent, {
-    className: "item__icon item__icon--in-active",
-    component: inActive
-  }));
+import { jsxs, jsx } from "react/jsx-runtime";
+import IconComponent from "@synerise/ds-icon";
+import { Wrapper } from "./Icon.styles.js";
+const AppMenuIcon = ({
+  active,
+  inActive
+}) => {
+  return /* @__PURE__ */ jsxs(Wrapper, { children: [
+    /* @__PURE__ */ jsx(IconComponent, { className: "item__icon item__icon--active", component: active }),
+    /* @__PURE__ */ jsx(IconComponent, { className: "item__icon item__icon--in-active", component: inActive })
+  ] });
+};
+export {
+  AppMenuIcon,
+  AppMenuIcon as default
 };
-export default AppMenuIcon;

package/dist/Item/Icon/Icon.styles.d.ts

@@ -1,2 +1,2 @@
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Wrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
 export default Wrapper;

package/dist/Item/Icon/Icon.styles.js

@@ -1,8 +1,9 @@
-import styled from 'styled-components';
-export var Wrapper = styled.div.withConfig({
+import styled from "styled-components";
+const Wrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Iconstyles__Wrapper",
   componentId: "sc-1gdlsp-0"
-})(["position:relative;height:24px;width:24px;color:", ";.item__icon{position:absolute;transition:opacity 0.3s ease-in-out;}"], function (props) {
-  return props.theme.palette['grey-600'];
-});
-export default Wrapper;
+})(["position:relative;height:24px;width:24px;color:", ";.item__icon{position:absolute;transition:opacity 0.3s ease-in-out;}"], (props) => props.theme.palette["grey-600"]);
+export {
+  Wrapper,
+  Wrapper as default
+};

package/dist/Item/Item.d.ts

@@ -1,4 +1,4 @@
-import React, { type PropsWithChildren, type ReactElement } from 'react';
+import { default as React, PropsWithChildren, ReactElement } from 'react';
 type ItemProps = PropsWithChildren<{
     subMenu?: ReactElement;
     id: string;

package/dist/Item/Item.js

@@ -1,19 +1,20 @@
-import React from 'react';
-import Tooltip from '@synerise/ds-tooltip';
-import SubMenuContext from '../SubMenu/SubMenuContext/SubMenuContext';
-import { useMenu } from '../hooks/useMenu';
-import Icon from './Icon/Icon';
-import * as S from './Item.styles';
-var Item = function Item(_ref) {
-  var children = _ref.children,
-    subMenu = _ref.subMenu,
-    id = _ref.id,
-    name = _ref.name,
-    className = _ref.className;
-  var menuContext = useMenu();
-  var isActive = menuContext.activeItem === id;
-  var isActiveSubMenu = isActive && menuContext.isOpened;
-  var handleOpen = function handleOpen() {
+import { jsxs, jsx } from "react/jsx-runtime";
+import Tooltip from "@synerise/ds-tooltip";
+import SubMenuContext from "../SubMenu/SubMenuContext/SubMenuContext.js";
+import { useMenu } from "../hooks/useMenu.js";
+import { AppMenuIcon } from "./Icon/Icon.js";
+import { ItemWrapper, ItemLink } from "./Item.styles.js";
+const Item = ({
+  children,
+  subMenu,
+  id,
+  name,
+  className
+}) => {
+  const menuContext = useMenu();
+  const isActive = menuContext.activeItem === id;
+  const isActiveSubMenu = isActive && menuContext.isOpened;
+  const handleOpen = () => {
     if (isActive) {
       menuContext.setOpened(!!subMenu && !menuContext.isOpened);
     } else {
@@ -21,21 +22,16 @@ var Item = function Item(_ref) {
       menuContext.setActiveItem(id);
     }
   };
-  return /*#__PURE__*/React.createElement(S.ItemWrapper, {
-    className: className
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    placement: "right",
-    title: isActive && menuContext.isOpened ? '' : name
-  }, /*#__PURE__*/React.createElement(S.ItemLink, {
-    className: "menu__item " + (isActive ? 'menu__item--active' : ''),
-    onClick: handleOpen
-  }, children)), subMenu && id && /*#__PURE__*/React.createElement(SubMenuContext.Provider, {
-    value: {
-      id: id,
+  return /* @__PURE__ */ jsxs(ItemWrapper, { className, children: [
+    /* @__PURE__ */ jsx(Tooltip, { placement: "right", title: isActive && menuContext.isOpened ? "" : name, children: /* @__PURE__ */ jsx(ItemLink, { className: `menu__item ${isActive ? "menu__item--active" : ""}`, onClick: handleOpen, children }) }),
+    subMenu && id && /* @__PURE__ */ jsx(SubMenuContext.Provider, { value: {
+      id,
       isActive: isActiveSubMenu,
       setOpened: menuContext.setOpened
-    }
-  }, subMenu));
+    }, children: subMenu })
+  ] });
+};
+Item.Icon = AppMenuIcon;
+export {
+  Item as default
 };
-Item.Icon = Icon;
-export default Item;

package/dist/Item/Item.styles.d.ts

@@ -1,3 +1,3 @@
-export declare const ItemLink: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ItemWrapper: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const ItemLink: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ItemWrapper: import('styled-components').StyledComponent<"li", any, {}, never>;
 export default ItemWrapper;

package/dist/Item/Item.styles.js

@@ -1,12 +1,14 @@
-import styled from 'styled-components';
-export var ItemLink = styled.div.withConfig({
+import styled from "styled-components";
+const ItemLink = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Itemstyles__ItemLink",
   componentId: "sc-1hq0xvl-0"
-})(["position:relative;display:flex;align-items:center;align-content:center;justify-content:center;height:40px;width:40px;padding:8px;margin:12px 0;cursor:pointer;border-radius:50%;transition:all 0.3s ease-in-out;.item__icon--active{opacity:0;}.item__icon--in-active{opacity:1;}&:hover,&.menu__item--active{.item__icon--active{opacity:1;}.item__icon--in-active{opacity:0;}}&:hover{background:", ";}> a{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;}"], function (props) {
-  return props.theme.palette['grey-050'];
-});
-export var ItemWrapper = styled.li.withConfig({
+})(["position:relative;display:flex;align-items:center;align-content:center;justify-content:center;height:40px;width:40px;padding:8px;margin:12px 0;cursor:pointer;border-radius:50%;transition:all 0.3s ease-in-out;.item__icon--active{opacity:0;}.item__icon--in-active{opacity:1;}&:hover,&.menu__item--active{.item__icon--active{opacity:1;}.item__icon--in-active{opacity:0;}}&:hover{background:", ";}> a{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;}"], (props) => props.theme.palette["grey-050"]);
+const ItemWrapper = /* @__PURE__ */ styled.li.withConfig({
   displayName: "Itemstyles__ItemWrapper",
   componentId: "sc-1hq0xvl-1"
 })(["display:flex;align-items:center;padding:0;margin:0;height:64px;&:first-child{", "{margin-top:8px;}}"], ItemLink);
-export default ItemWrapper;
+export {
+  ItemLink,
+  ItemWrapper,
+  ItemWrapper as default
+};

package/dist/MenuContext/MenuContext.d.ts

@@ -4,5 +4,5 @@ type MenuContextType = {
     setOpened: (opened: boolean) => void;
     setActiveItem: (subMenu: string) => void;
 } | undefined;
-declare const MenuContext: import("react").Context<MenuContextType>;
+declare const MenuContext: import('react').Context<MenuContextType>;
 export default MenuContext;

package/dist/MenuContext/MenuContext.js

@@ -1,3 +1,5 @@
-import { createContext } from 'react';
-var MenuContext = /*#__PURE__*/createContext(undefined);
-export default MenuContext;
+import { createContext } from "react";
+const MenuContext = createContext(void 0);
+export {
+  MenuContext as default
+};

package/dist/NavigableItems/NavigableItems.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 type NavigableItemsProps = {
     onHideMenu: () => void;
     children: React.ReactNodeArray;

package/dist/NavigableItems/NavigableItems.js

@@ -1,35 +1,30 @@
-import React from 'react';
-import Icon, { AngleDownS, AngleUpS } from '@synerise/ds-icon';
-import * as ItemStyles from '../Item/Item.styles';
-import * as S from './NavigableItems.styles';
-var itemHeight = 64;
-var animationTime = 100;
-var NavigableItems = function NavigableItems(_ref) {
-  var children = _ref.children,
-    onHideMenu = _ref.onHideMenu;
-  var ref = React.useRef(null);
-  var _React$useState = React.useState(Infinity),
-    itemsCapacity = _React$useState[0],
-    setItemsCapacity = _React$useState[1];
-  var _React$useState2 = React.useState(0),
-    currentIndex = _React$useState2[0],
-    setIndex = _React$useState2[1];
-  var isNavigateTopVisible = currentIndex > 0;
-  var isNavigateBottomVisible = currentIndex + itemsCapacity <= children.length;
-  var _React$useState3 = React.useState(''),
-    animationInProgress = _React$useState3[0],
-    setAnimationInProgress = _React$useState3[1];
-  var _React$useState4 = React.useState(0),
-    lastHeight = _React$useState4[0],
-    setLastHeight = _React$useState4[1];
-  var countCapacity = React.useCallback(function () {
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import IconComponent, { AngleUpS, AngleDownS } from "@synerise/ds-icon";
+import { ItemWrapper, ItemLink } from "../Item/Item.styles.js";
+import { Wrapper } from "./NavigableItems.styles.js";
+const itemHeight = 64;
+const animationTime = 100;
+const NavigableItems = ({
+  children,
+  onHideMenu
+}) => {
+  const ref = React.useRef(null);
+  const [itemsCapacity, setItemsCapacity] = React.useState(Infinity);
+  const [currentIndex, setIndex] = React.useState(0);
+  const isNavigateTopVisible = currentIndex > 0;
+  const isNavigateBottomVisible = currentIndex + itemsCapacity <= children.length;
+  const [animationInProgress, setAnimationInProgress] = React.useState("");
+  const [lastHeight, setLastHeight] = React.useState(0);
+  const countCapacity = React.useCallback(() => {
     if (ref.current) {
-      var _ref$current$getBound = ref.current.getBoundingClientRect(),
-        height = _ref$current$getBound.height;
+      const {
+        height
+      } = ref.current.getBoundingClientRect();
       if (height > 0) {
         setLastHeight(height);
       }
-      var itemsHeight = children.length * itemHeight;
+      const itemsHeight = children.length * itemHeight;
       setIndex(0);
       if (itemsHeight > height) {
         setItemsCapacity(Math.floor((height || lastHeight) / itemHeight));
@@ -38,49 +33,38 @@ var NavigableItems = function NavigableItems(_ref) {
       }
     }
   }, [children.length, ref, lastHeight, setLastHeight]);
-  React.useEffect(function () {
-    window.addEventListener('resize', countCapacity);
-    return function () {
-      return window.removeEventListener('resize', countCapacity);
-    };
+  React.useEffect(() => {
+    window.addEventListener("resize", countCapacity);
+    return () => window.removeEventListener("resize", countCapacity);
   }, [countCapacity]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     countCapacity();
   }, [countCapacity]);
-  var handelNavigateBottom = function handelNavigateBottom() {
-    setAnimationInProgress('bottom');
-    setTimeout(function () {
-      setAnimationInProgress('');
+  const handelNavigateBottom = () => {
+    setAnimationInProgress("bottom");
+    setTimeout(() => {
+      setAnimationInProgress("");
       setIndex(currentIndex ? currentIndex + 1 : currentIndex + 2);
       onHideMenu();
     }, animationTime);
   };
-  var handleNavigateTop = function handleNavigateTop() {
-    setAnimationInProgress('top');
-    setTimeout(function () {
-      setAnimationInProgress('');
+  const handleNavigateTop = () => {
+    setAnimationInProgress("top");
+    setTimeout(() => {
+      setAnimationInProgress("");
       setIndex(currentIndex === 2 ? 0 : currentIndex - 1);
       onHideMenu();
     }, animationTime);
   };
   if (itemsCapacity < children.length) {
-    return /*#__PURE__*/React.createElement(S.Wrapper, {
-      ref: ref,
-      className: "animation--" + animationInProgress
-    }, isNavigateTopVisible && /*#__PURE__*/React.createElement(ItemStyles.ItemWrapper, {
-      onClick: handleNavigateTop,
-      className: "nav-button nav-button--top"
-    }, /*#__PURE__*/React.createElement(ItemStyles.ItemLink, null, /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(AngleUpS, null)
-    }))), React.Children.toArray(children).splice(currentIndex, itemsCapacity - (isNavigateBottomVisible && isNavigateTopVisible ? 2 : 1)), isNavigateBottomVisible && /*#__PURE__*/React.createElement(ItemStyles.ItemWrapper, {
-      onClick: handelNavigateBottom,
-      className: "nav-button nav-button--bottom"
-    }, /*#__PURE__*/React.createElement(ItemStyles.ItemLink, null, /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(AngleDownS, null)
-    }))));
+    return /* @__PURE__ */ jsxs(Wrapper, { ref, className: `animation--${animationInProgress}`, children: [
+      isNavigateTopVisible && /* @__PURE__ */ jsx(ItemWrapper, { onClick: handleNavigateTop, className: "nav-button nav-button--top", children: /* @__PURE__ */ jsx(ItemLink, { children: /* @__PURE__ */ jsx(IconComponent, { component: /* @__PURE__ */ jsx(AngleUpS, {}) }) }) }),
+      React.Children.toArray(children).splice(currentIndex, itemsCapacity - (isNavigateBottomVisible && isNavigateTopVisible ? 2 : 1)),
+      isNavigateBottomVisible && /* @__PURE__ */ jsx(ItemWrapper, { onClick: handelNavigateBottom, className: "nav-button nav-button--bottom", children: /* @__PURE__ */ jsx(ItemLink, { children: /* @__PURE__ */ jsx(IconComponent, { component: /* @__PURE__ */ jsx(AngleDownS, {}) }) }) })
+    ] });
   }
-  return /*#__PURE__*/React.createElement(S.Wrapper, {
-    ref: ref
-  }, children);
+  return /* @__PURE__ */ jsx(Wrapper, { ref, children });
+};
+export {
+  NavigableItems as default
 };
-export default NavigableItems;

package/dist/NavigableItems/NavigableItems.styles.d.ts

@@ -1,2 +1,2 @@
-export declare const Wrapper: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const Wrapper: import('styled-components').StyledComponent<"ul", any, {}, never>;
 export default Wrapper;

package/dist/NavigableItems/NavigableItems.styles.js

@@ -1,8 +1,11 @@
-import styled, { keyframes } from 'styled-components';
-var bottom = keyframes(["from{top:0px;}to{top:-48px;}"]);
-var top = keyframes(["from{top:0px;}to{top:48px;}"]);
-export var Wrapper = styled.ul.withConfig({
+import styled, { keyframes } from "styled-components";
+const bottom = /* @__PURE__ */ keyframes(["from{top:0px;}to{top:-48px;}"]);
+const top = /* @__PURE__ */ keyframes(["from{top:0px;}to{top:48px;}"]);
+const Wrapper = /* @__PURE__ */ styled.ul.withConfig({
   displayName: "NavigableItemsstyles__Wrapper",
   componentId: "sc-1gjk7hm-0"
 })(["margin:0;padding:0;flex:1 1 auto;overflow:hidden;&.animation--bottom{> *:not(.nav-button){position:relative;animation:", " 0.1s ease-in-out forwards;}}&.animation--top{> *:not(.nav-button){position:relative;animation:", " 0.1s ease-in-out forwards;}}"], bottom, top);
-export default Wrapper;
+export {
+  Wrapper,
+  Wrapper as default
+};

package/dist/SubMenu/Item/Item.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { type ItemProps } from './Item.types';
+import { default as React } from 'react';
+import { ItemProps } from './Item.types';
 declare const Item: {
     ({ children, active }: ItemProps): React.JSX.Element;
-    Action: import("styled-components").StyledComponent<"span", any, {}, never>;
+    Action: import('styled-components').StyledComponent<"span", any, {}, never>;
 };
 export default Item;

package/dist/SubMenu/Item/Item.js

@@ -1,19 +1,18 @@
-import React from 'react';
-import SubMenuContext from '../SubMenuContext/SubMenuContext';
-import * as S from './Item.styles';
-var Item = function Item(_ref) {
-  var children = _ref.children,
-    active = _ref.active;
-  var subMenuContext = React.useContext(SubMenuContext);
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import SubMenuContext from "../SubMenuContext/SubMenuContext.js";
+import { Wrapper, ItemAction } from "./Item.styles.js";
+const Item = ({
+  children,
+  active
+}) => {
+  const subMenuContext = React.useContext(SubMenuContext);
   if (!subMenuContext) {
-    throw new Error('Cannot use SubMenu.Item outside SubMenuContext');
+    throw new Error("Cannot use SubMenu.Item outside SubMenuContext");
   }
-  return /*#__PURE__*/React.createElement(S.Wrapper, {
-    className: "sub-menu__item " + (active ? 'sub-menu__item--active' : ''),
-    onClick: function onClick() {
-      return subMenuContext.setOpened(false);
-    }
-  }, children);
+  return /* @__PURE__ */ jsx(Wrapper, { className: `sub-menu__item ${active ? "sub-menu__item--active" : ""}`, onClick: () => subMenuContext.setOpened(false), children });
+};
+Item.Action = ItemAction;
+export {
+  Item as default
 };
-Item.Action = S.ItemAction;
-export default Item;

package/dist/SubMenu/Item/Item.styles.d.ts

@@ -1,2 +1,2 @@
-export declare const ItemAction: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ItemAction: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const Wrapper: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/SubMenu/Item/Item.styles.js

@@ -1,14 +1,14 @@
-import styled from 'styled-components';
-import { macro } from '@synerise/ds-typography';
-export var ItemAction = styled.span.withConfig({
+import styled from "styled-components";
+import { macro } from "@synerise/ds-typography";
+const ItemAction = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Itemstyles__ItemAction",
   componentId: "sc-15s98w8-0"
 })(["margin-top:-4px;margin-right:-4px;float:right;opacity:0;transition:opacity 0.3s ease-in-out;"]);
-export var Wrapper = styled.div.withConfig({
+const Wrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Itemstyles__Wrapper",
   componentId: "sc-15s98w8-1"
-})(["", ";width:100%;padding:8px 12px;margin:0 0 1px;border-radius:3px;transition:all 0.3s ease-in-out;cursor:pointer;&:hover,&.sub-menu__item--active{background:", ";color:", ";opacity:1;", "{opacity:1;}}"], macro.h200, function (props) {
-  return props.theme.palette['grey-050'];
-}, function (props) {
-  return props.theme.palette['blue-600'];
-}, ItemAction);
+})(["", ";width:100%;padding:8px 12px;margin:0 0 1px;border-radius:3px;transition:all 0.3s ease-in-out;cursor:pointer;&:hover,&.sub-menu__item--active{background:", ";color:", ";opacity:1;", "{opacity:1;}}"], macro.h200, (props) => props.theme.palette["grey-050"], (props) => props.theme.palette["blue-600"], ItemAction);
+export {
+  ItemAction,
+  Wrapper
+};

package/dist/SubMenu/Item/Item.types.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { ReactNode } from 'react';
 import type * as S from './Item.styles';
 export type ItemProps = {
     active?: boolean;

package/dist/SubMenu/Item/Item.types.js

@@ -1 +1 @@
-export {};
+

package/dist/SubMenu/SubMenu.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type SubComponents, type SubMenuProps } from './SubMenu.types';
+import { default as React } from 'react';
+import { SubComponents, SubMenuProps } from './SubMenu.types';
 declare const SubMenu: React.FC<SubMenuProps> & SubComponents;
 export default SubMenu;

package/dist/SubMenu/SubMenu.js

@@ -1,18 +1,18 @@
-import React from 'react';
-import { useSubMenu } from '../hooks/useSubMenu';
-import Item from './Item/Item';
-import * as S from './SubMenu.styles';
-var SubMenu = function SubMenu(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    style = _ref.style;
-  var subMenuContext = useSubMenu();
-  return /*#__PURE__*/React.createElement(S.MenuGroupWrapper, {
-    className: "menu__sub-menu " + (className || '') + " " + (subMenuContext.isActive ? 'menu__sub-menu--active' : ''),
-    style: style
-  }, children);
+import { jsx } from "react/jsx-runtime";
+import { useSubMenu } from "../hooks/useSubMenu.js";
+import Item from "./Item/Item.js";
+import { MenuGroupWrapper, MenuGroupTitle, MenuGroupSubTitle } from "./SubMenu.styles.js";
+const SubMenu = ({
+  children,
+  className,
+  style
+}) => {
+  const subMenuContext = useSubMenu();
+  return /* @__PURE__ */ jsx(MenuGroupWrapper, { className: `menu__sub-menu ${className || ""} ${subMenuContext.isActive ? "menu__sub-menu--active" : ""}`, style, children });
 };
-SubMenu.Title = S.MenuGroupTitle;
-SubMenu.SubTitle = S.MenuGroupSubTitle;
+SubMenu.Title = MenuGroupTitle;
+SubMenu.SubTitle = MenuGroupSubTitle;
 SubMenu.Item = Item;
-export default SubMenu;
+export {
+  SubMenu as default
+};

package/dist/SubMenu/SubMenu.styles.d.ts

@@ -1,3 +1,3 @@
-export declare const MenuGroupWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MenuGroupTitle: import("styled-components").StyledComponent<"h3", any, {}, never>;
-export declare const MenuGroupSubTitle: import("styled-components").StyledComponent<"h4", any, {}, never>;
+export declare const MenuGroupWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const MenuGroupTitle: import('styled-components').StyledComponent<"h3", any, {}, never>;
+export declare const MenuGroupSubTitle: import('styled-components').StyledComponent<"h4", any, {}, never>;

package/dist/SubMenu/SubMenu.styles.js

@@ -1,24 +1,19 @@
-import styled, { css } from 'styled-components';
-import { macro } from '@synerise/ds-typography';
-export var MenuGroupWrapper = styled.div.withConfig({
+import styled, { css } from "styled-components";
+import { macro } from "@synerise/ds-typography";
+const MenuGroupWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "SubMenustyles__MenuGroupWrapper",
   componentId: "sc-dperxu-0"
-})(["background:", ";width:262px;position:absolute;left:61px;top:0px;height:100%;border-left:1px solid ", ";padding:12px;opacity:0;visibility:hidden;transition:opacity 0.2s ease-in-out;transition-delay:0.1s;overflow-y:auto;display:flex;flex-flow:column;&.menu__sub-menu--active{visibility:visible;opacity:1;> *{opacity:1;top:0px !important;}}a:hover{text-decoration:none;}> *{opacity:0;transition:all 0.3s ease-in-out;position:relative;top:-10px;}", " &:hover{> *{transition-delay:0s;}}"], function (props) {
-  return props.theme.palette.white;
-}, function (props) {
-  return props.theme.palette['grey-100'];
-}, [].concat(Array(100).keys()).map(function (k) {
-  return css(["> *:nth-child(", "){transition-delay:", "s;}"], k, 0.1 + k * 10 / 500);
-}));
-export var MenuGroupTitle = styled.h3.withConfig({
+})(["background:", ";width:262px;position:absolute;left:61px;top:0px;height:100%;border-left:1px solid ", ";padding:12px;opacity:0;visibility:hidden;transition:opacity 0.2s ease-in-out;transition-delay:0.1s;overflow-y:auto;display:flex;flex-flow:column;&.menu__sub-menu--active{visibility:visible;opacity:1;> *{opacity:1;top:0px !important;}}a:hover{text-decoration:none;}> *{opacity:0;transition:all 0.3s ease-in-out;position:relative;top:-10px;}", " &:hover{> *{transition-delay:0s;}}"], (props) => props.theme.palette.white, (props) => props.theme.palette["grey-100"], [...Array(100).keys()].map((k) => css(["> *:nth-child(", "){transition-delay:", "s;}"], k, 0.1 + k * 10 / 500)));
+const MenuGroupTitle = /* @__PURE__ */ styled.h3.withConfig({
   displayName: "SubMenustyles__MenuGroupTitle",
   componentId: "sc-dperxu-1"
 })(["", ";letter-spacing:-0.1px;padding:14px 12px 8px;"], macro.h600);
-export var MenuGroupSubTitle = styled.h4.withConfig({
+const MenuGroupSubTitle = /* @__PURE__ */ styled.h4.withConfig({
   displayName: "SubMenustyles__MenuGroupSubTitle",
   componentId: "sc-dperxu-2"
-})(["", ";letter-spacing:0.1px;color:", ";border-top:1px dashed ", ";margin:12px 12px 12px;padding-top:12px;text-transform:uppercase;"], macro.h100, function (props) {
-  return props.theme.palette['grey-500'];
-}, function (props) {
-  return props.theme.palette['grey-200'];
-});
+})(["", ";letter-spacing:0.1px;color:", ";border-top:1px dashed ", ";margin:12px 12px 12px;padding-top:12px;text-transform:uppercase;"], macro.h100, (props) => props.theme.palette["grey-500"], (props) => props.theme.palette["grey-200"]);
+export {
+  MenuGroupSubTitle,
+  MenuGroupTitle,
+  MenuGroupWrapper
+};

package/dist/SubMenu/SubMenu.types.d.ts

@@ -1,5 +1,5 @@
-import { type CSSProperties, type ReactNode } from 'react';
-import type Item from './Item/Item';
+import { CSSProperties, ReactNode } from 'react';
+import { default as Item } from './Item/Item';
 import type * as S from './SubMenu.styles';
 export type SubMenuProps = {
     className?: string;

package/dist/SubMenu/SubMenu.types.js

@@ -1 +1 @@
-export {};
+

package/dist/SubMenu/SubMenuContext/SubMenuContext.d.ts

@@ -1,3 +1,3 @@
-import { type SubMenuContextType } from './SubMenuContext.types';
-declare const SubMenuContext: import("react").Context<SubMenuContextType>;
+import { SubMenuContextType } from './SubMenuContext.types';
+declare const SubMenuContext: import('react').Context<SubMenuContextType>;
 export default SubMenuContext;

package/dist/SubMenu/SubMenuContext/SubMenuContext.js

@@ -1,3 +1,5 @@
-import { createContext } from 'react';
-var SubMenuContext = /*#__PURE__*/createContext(undefined);
-export default SubMenuContext;
+import { createContext } from "react";
+const SubMenuContext = createContext(void 0);
+export {
+  SubMenuContext as default
+};

package/dist/SubMenu/SubMenuContext/SubMenuContext.types.js

@@ -1 +1 @@
-export {};
+

package/dist/hooks/useMenu.js

@@ -1,9 +1,12 @@
-import { useContext } from 'react';
-import MenuContext from '../MenuContext/MenuContext';
-export var useMenu = function useMenu() {
-  var menuContext = useContext(MenuContext);
+import { useContext } from "react";
+import MenuContext from "../MenuContext/MenuContext.js";
+const useMenu = () => {
+  const menuContext = useContext(MenuContext);
   if (!menuContext) {
-    throw new Error('Cannot use useMenu hook outside MenuContext');
+    throw new Error("Cannot use useMenu hook outside MenuContext");
   }
   return menuContext;
-};
+};
+export {
+  useMenu
+};

package/dist/hooks/useSubMenu.js

@@ -1,9 +1,12 @@
-import { useContext } from 'react';
-import SubMenuContext from '../SubMenu/SubMenuContext/SubMenuContext';
-export var useSubMenu = function useSubMenu() {
-  var subMenuContext = useContext(SubMenuContext);
+import { useContext } from "react";
+import SubMenuContext from "../SubMenu/SubMenuContext/SubMenuContext.js";
+const useSubMenu = () => {
+  const subMenuContext = useContext(SubMenuContext);
   if (!subMenuContext) {
-    throw new Error('Cannot use useMenu hook outside MenuContext');
+    throw new Error("Cannot use useMenu hook outside MenuContext");
   }
   return subMenuContext;
-};
+};
+export {
+  useSubMenu
+};

package/dist/index.js

@@ -1,3 +1,8 @@
-export { default } from './AppMenu';
-export { useMenu } from './hooks/useMenu';
-export { useSubMenu } from './hooks/useSubMenu';
+import { default as default2 } from "./AppMenu.js";
+import { useMenu } from "./hooks/useMenu.js";
+import { useSubMenu } from "./hooks/useSubMenu.js";
+export {
+  default2 as default,
+  useMenu,
+  useSubMenu
+};

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-app-menu",
-  "version": "1.2.8",
+  "version": "1.2.10",
   "description": "AppMenu UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,15 +16,15 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
-    "test": "vitest",
-    "test:watch": "pnpm run test -- --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "types": "tsc --noEmit",
     "check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
     "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
@@ -35,10 +35,10 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^1.14.1",
-    "@synerise/ds-tooltip": "^1.4.8",
-    "@synerise/ds-typography": "^1.1.11",
-    "@synerise/ds-utils": "^1.6.0"
+    "@synerise/ds-icon": "^1.15.1",
+    "@synerise/ds-tooltip": "^1.4.10",
+    "@synerise/ds-typography": "^1.1.13",
+    "@synerise/ds-utils": "^1.7.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -46,5 +46,5 @@
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }