@x15ventures/x15-ui-library 3.11.4

package/dist/esm/components/navigation/menu/Menu.js

@@ -0,0 +1,82 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { SubMenuItems } from './subMenuItems/SubMenuItems';
+import { useOverflowScroll } from '../../../hooks/OverflowScroll';
+import './menu.css';
+export const Menu = ({
+  wrapper = {
+    customCssClass: ''
+  },
+  id = 'mainMenu',
+  activeRoute = '',
+  menuItems,
+  behaviour = 'hamburger',
+  layout = 'vertical'
+}) => {
+  const [menuItemsState, setMenuItemsState] = useState(menuItems);
+  const [recalcTrigger, setRecalcTrigger] = useState(false);
+  const [activeSubmenuRef, setActiveSubmenuRef] = useState(null);
+  const menuWrapperRef = React.useRef(null);
+  useOverflowScroll({
+    targetRef: activeSubmenuRef || {
+      current: null
+    },
+    direction: 'y',
+    edgeOffset: 20,
+    requiresRecalc: behaviour === 'popSubmenus' && activeSubmenuRef ? recalcTrigger : false
+  });
+  useOverflowScroll({
+    targetRef: menuWrapperRef,
+    direction: 'y',
+    edgeOffset: 10
+  });
+  const applyOpenAndActiveClasses = (menuItem, itemPath) => {
+    const newState = !menuItem.isOpen;
+    const adjustedMenuState = [...menuItemsState];
+    if (behaviour === 'popSubmenus') {
+      setRecalcTrigger(prev => !prev);
+
+      // Close all the menu items first
+      for (let m = 0; m < adjustedMenuState.length; m += 1) {
+        adjustedMenuState[m].isOpen = false;
+      }
+    }
+
+    // Break up the itemPath segments and make sure all the parents are open as well
+    for (let i = 0; i < itemPath.length; i += 1) {
+      if (adjustedMenuState[itemPath[i]]) {
+        adjustedMenuState[itemPath[i]].isOpen = newState;
+      }
+    }
+    setMenuItemsState(adjustedMenuState);
+  };
+  const handleMenuButtonClick = (event, menuItem, itemPath) => {
+    if (menuItem.onSelect) {
+      menuItem.onSelect(event);
+    }
+    applyOpenAndActiveClasses(menuItem, itemPath);
+  };
+  useEffect(() => {
+    setMenuItemsState(menuItems);
+  }, [menuItems]);
+  return /*#__PURE__*/React.createElement("nav", {
+    id: id,
+    className: `menuWrapper ${behaviour} ${layout} ${wrapper.customCssClass}`,
+    ref: menuWrapperRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `menu ${layout === 'horizontal' ? 'hoverBehaviours' : ''}`
+  }, menuItemsState.length && /*#__PURE__*/React.createElement(SubMenuItems, {
+    menuId: id,
+    activeRoute: activeRoute,
+    onMenuButtonClick: handleMenuButtonClick,
+    subMenuItems: menuItemsState,
+    subMenuId: `${id}_subMenu_1`,
+    level: 1,
+    isHoverTrigger: layout === 'horizontal',
+    behaviour: behaviour,
+    onSubmenuRefChange: behaviour === 'popSubmenus' ? setActiveSubmenuRef : undefined
+  })));
+};
+export default Menu;
+//# sourceMappingURL=Menu.js.map

package/dist/esm/components/navigation/menu/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","names":["React","useEffect","useState","SubMenuItems","useOverflowScroll","Menu","wrapper","customCssClass","id","activeRoute","menuItems","behaviour","layout","menuItemsState","setMenuItemsState","recalcTrigger","setRecalcTrigger","activeSubmenuRef","setActiveSubmenuRef","menuWrapperRef","useRef","targetRef","current","direction","edgeOffset","requiresRecalc","applyOpenAndActiveClasses","menuItem","itemPath","newState","isOpen","adjustedMenuState","prev","m","length","i","handleMenuButtonClick","event","onSelect","createElement","className","ref","menuId","onMenuButtonClick","subMenuItems","subMenuId","level","isHoverTrigger","onSubmenuRefChange","undefined"],"sources":["../../../../../src/components/navigation/menu/Menu.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useState } from 'react';\nimport { MenuButtonPropTypes, MenuItemPropTypes } from './Menu.interfaces';\nimport { SubMenuItems } from './subMenuItems/SubMenuItems';\nimport { useOverflowScroll } from '../../../hooks/OverflowScroll';\n\nimport './menu.scss';\n\nexport interface MenuProps {\n  wrapper?: {\n    customCssClass?: string\n  },\n  id?: string,\n  layout?: 'horizontal' | 'vertical',\n  behaviour?: 'hamburger' | 'floating' | 'popSubmenus',\n  activeRoute?: string,\n  menuItems: MenuButtonPropTypes[]\n}\n\nexport const Menu: React.FC<MenuProps> = (\n  {\n    wrapper = {\n      customCssClass: ''\n    },\n    id = 'mainMenu',\n    activeRoute = '',\n    menuItems,\n    behaviour = 'hamburger',\n    layout = 'vertical'\n  }\n) => {\n  const [menuItemsState, setMenuItemsState] = useState(menuItems);\n  const [recalcTrigger, setRecalcTrigger] = useState(false);\n  const [activeSubmenuRef, setActiveSubmenuRef] = useState<React.RefObject<HTMLUListElement> | null>(null);\n  const menuWrapperRef = React.useRef<HTMLElement>(null);\n\n  useOverflowScroll({\n    targetRef: activeSubmenuRef || { current: null },\n    direction: 'y',\n    edgeOffset: 20,\n    requiresRecalc: behaviour === 'popSubmenus' && activeSubmenuRef ? recalcTrigger : false\n  });\n\n  useOverflowScroll({\n    targetRef: menuWrapperRef,\n    direction: 'y',\n    edgeOffset: 10,\n  });\n\n  const applyOpenAndActiveClasses = (menuItem: MenuItemPropTypes, itemPath: number[]) => {\n    const newState = !menuItem.isOpen;\n\n    const adjustedMenuState = [...menuItemsState];\n    if (behaviour === 'popSubmenus') {\n      setRecalcTrigger((prev) => !prev);\n\n      // Close all the menu items first\n      for (let m = 0; m < adjustedMenuState.length; m += 1) {\n        adjustedMenuState[m].isOpen = false;\n      }\n    }\n\n    // Break up the itemPath segments and make sure all the parents are open as well\n    for (let i = 0; i < itemPath.length; i += 1) {\n      if (adjustedMenuState[itemPath[i]]) {\n        adjustedMenuState[itemPath[i]].isOpen = newState;\n      }\n    }\n    setMenuItemsState(adjustedMenuState);\n  };\n\n  const handleMenuButtonClick = (event: React.UIEvent, menuItem: MenuItemPropTypes, itemPath : number[]) => {\n    if (menuItem.onSelect) {\n      menuItem.onSelect(event);\n    }\n    applyOpenAndActiveClasses(menuItem, itemPath);\n  };\n\n  useEffect(() => {\n    setMenuItemsState(menuItems);\n  }, [menuItems]);\n\n  return (\n    <nav id={ id } className={ `menuWrapper ${ behaviour } ${ layout } ${ wrapper.customCssClass }` } ref={ menuWrapperRef }>\n      <div className={ `menu ${ layout === 'horizontal' ? 'hoverBehaviours' : '' }` }>\n        {\n          menuItemsState.length\n          && (\n            <SubMenuItems\n              menuId={ id }\n              activeRoute={ activeRoute }\n              onMenuButtonClick={ handleMenuButtonClick }\n              subMenuItems={ menuItemsState } \n              subMenuId={ `${ id }_subMenu_1` }\n              level={ 1 }\n              isHoverTrigger={ layout === 'horizontal' }\n              behaviour={ behaviour }\n              onSubmenuRefChange={ behaviour === 'popSubmenus' ? setActiveSubmenuRef : undefined }\n            />\n          )\n        }\n      </div>\n    </nav>\n  );\n};\n\nexport default Menu;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/navigation/menu/menu.css

@@ -0,0 +1,79 @@
+/* Popovers */
+/* BUTTONS */
+.menuWrapper.vertical .subMenuItems {
+  display: flex;
+  flex-direction: column;
+  row-gap: 0;
+  align-items: center;
+  justify-content: flex-start;
+  display: none;
+}
+.menuWrapper.vertical .subMenuItems.subMenuItems_level1, .menuWrapper.vertical .subMenuItems.isOpen {
+  display: flex;
+}
+.menuWrapper.vertical .subMenuItems .subMenu {
+  display: flex;
+  flex-direction: column;
+  row-gap: 0;
+  align-items: center;
+  justify-content: flex-start;
+  width: var(--menuWidth, 100%);
+}
+.menuWrapper.vertical .subMenuItems .subMenu > * {
+  width: var(--menuWidth, 100%);
+}
+.menuWrapper.vertical .subMenuItems .subMenu.level_2 .activeMenuItem,
+.menuWrapper.vertical .subMenuItems .subMenu.level_2 button {
+  padding-left: var(--menuLeftPaddingLvl2, 20px);
+}
+.menuWrapper.vertical .subMenuItems .subMenu.level_3 button {
+  padding-left: var(--menuLeftPaddingLvl3, 40px);
+}
+.menuWrapper.vertical.popSubmenus .menu {
+  width: var(--menuPopSubmenusWidth, 280px);
+}
+.menuWrapper.vertical.popSubmenus .menu .subMenu.level_1 {
+  position: relative;
+}
+.menuWrapper.vertical.popSubmenus .subMenuItems .subMenu.level_2 button, .menuWrapper.vertical.popSubmenus .subMenuItems .subMenu.level_2 .activeMenuItem, .menuWrapper.vertical.popSubmenus .subMenuItems .subMenu.level_3 button, .menuWrapper.vertical.popSubmenus .subMenuItems .subMenu.level_3 .activeMenuItem {
+  padding: var(--menuButtonPadding, 0 10px);
+}
+.menuWrapper.vertical.popSubmenus .subMenuItems_level2 {
+  position: absolute;
+  left: calc(var(--menuPopSubmenusWidth, 280px) + var(--menuPopSubmenusGap, 20px));
+  width: var(--menuPopSubmenusWidth, 280px);
+  top: 0;
+}
+.menuWrapper button,
+.menuWrapper .activeMenuItem {
+  background: none;
+  border: none;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  cursor: pointer;
+  font-weight: 500;
+  box-sizing: border-box;
+  column-gap: 10px;
+  row-gap: 10px;
+  min-width: 44px;
+  min-height: 44px;
+  border-radius: var(--buttonBorderRadius);
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 16px;
+  border-radius: var(--menuButtonBorderRadius, 0px);
+  width: var(--menuWidth, 100%);
+  text-align: left;
+  padding: var(--menuButtonPadding, 0 10px);
+}
+.menuWrapper button .labelText,
+.menuWrapper .activeMenuItem .labelText {
+  flex: 1;
+}
+.menuWrapper .activeMenuItem {
+  background: var(--menuActiveItemBg, #d3dee4);
+  border-radius: var(--menuActiveItemBorderRadius, 3px);
+}

package/dist/esm/components/navigation/menu/menuItemContent/MenuItemContent.js

@@ -0,0 +1,29 @@
+'use client';
+
+import React from 'react';
+import { MenuItemIcon } from './MenuItemIcon';
+export const MenuItemContent = ({
+  itemDefinition,
+  renderRightIcon = true,
+  isHoverTrigger
+}) => {
+  const {
+    icons,
+    isOpen,
+    label,
+    hideLabel
+  } = itemDefinition;
+  const hasIcons = typeof icons !== 'undefined';
+  return /*#__PURE__*/React.createElement(React.Fragment, null, hasIcons && icons.left && MenuItemIcon({
+    icon: icons.left,
+    isOpen,
+    isHoverTrigger
+  }), /*#__PURE__*/React.createElement("span", {
+    className: `${hideLabel ? 'sr-only' : 'labelText'}`
+  }, label), hasIcons && icons.right && renderRightIcon && MenuItemIcon({
+    icon: icons.right,
+    isOpen,
+    isHoverTrigger
+  }));
+};
+//# sourceMappingURL=MenuItemContent.js.map

package/dist/esm/components/navigation/menu/menuItemContent/MenuItemContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemContent.js","names":["React","MenuItemIcon","MenuItemContent","itemDefinition","renderRightIcon","isHoverTrigger","icons","isOpen","label","hideLabel","hasIcons","createElement","Fragment","left","icon","className","right"],"sources":["../../../../../../src/components/navigation/menu/menuItemContent/MenuItemContent.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { MenuButtonPropTypes } from '../Menu.interfaces';\nimport { MenuItemIcon } from './MenuItemIcon';\n\ninterface MenuItemContentProps {\n  itemDefinition: MenuButtonPropTypes,\n  renderRightIcon?: boolean,\n  isHoverTrigger?: boolean\n}\n\nexport const MenuItemContent: React.FC<MenuItemContentProps> = (\n  {\n    itemDefinition,\n    renderRightIcon = true,\n    isHoverTrigger\n  }\n) => {\n  const {\n    icons,\n    isOpen,\n    label,\n    hideLabel\n  } = itemDefinition;\n\n  const hasIcons = typeof icons !== 'undefined';\n\n  return (\n    <>\n      { hasIcons && icons.left && MenuItemIcon({ icon: icons.left, isOpen, isHoverTrigger }) }\n\n      <span className={ `${ hideLabel ? 'sr-only' : 'labelText' }` }>{ label }</span>\n\n      { hasIcons && icons.right && renderRightIcon && MenuItemIcon({ icon: icons.right, isOpen, isHoverTrigger }) }\n    </>\n  );\n};\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,QAAQ,gBAAgB;AAQ7C,OAAO,MAAMC,eAA+C,GAAGA,CAC7D;EACEC,cAAc;EACdC,eAAe,GAAG,IAAI;EACtBC;AACF,CAAC,KACE;EACH,MAAM;IACJC,KAAK;IACLC,MAAM;IACNC,KAAK;IACLC;EACF,CAAC,GAAGN,cAAc;EAElB,MAAMO,QAAQ,GAAG,OAAOJ,KAAK,KAAK,WAAW;EAE7C,oBACEN,KAAA,CAAAW,aAAA,CAAAX,KAAA,CAAAY,QAAA,QACIF,QAAQ,IAAIJ,KAAK,CAACO,IAAI,IAAIZ,YAAY,CAAC;IAAEa,IAAI,EAAER,KAAK,CAACO,IAAI;IAAEN,MAAM;IAAEF;EAAe,CAAC,CAAC,eAEtFL,KAAA,CAAAW,aAAA;IAAMI,SAAS,EAAG,GAAIN,SAAS,GAAG,SAAS,GAAG,WAAW;EAAK,GAAGD,KAAa,CAAC,EAE7EE,QAAQ,IAAIJ,KAAK,CAACU,KAAK,IAAIZ,eAAe,IAAIH,YAAY,CAAC;IAAEa,IAAI,EAAER,KAAK,CAACU,KAAK;IAAET,MAAM;IAAEF;EAAe,CAAC,CAC1G,CAAC;AAEP,CAAC","ignoreList":[]}

package/dist/esm/components/navigation/menu/menuItemContent/MenuItemIcon.js

@@ -0,0 +1,42 @@
+'use client';
+
+import React from 'react';
+import { Icon } from '../../../design/icons/basicIcon/Icon';
+export const MenuItemIcon = ({
+  icon,
+  isOpen = false,
+  isHoverTrigger
+}) => {
+  const RenderIcon = (icon, hoverState) => /*#__PURE__*/React.createElement(Icon, {
+    customCssClass: hoverState ? 'hover' : '',
+    icon: icon
+  });
+  if (typeof icon === 'string') {
+    return /*#__PURE__*/React.createElement(Icon, {
+      icon: icon
+    });
+  }
+  if (/*#__PURE__*/React.isValidElement(icon)) {
+    return icon;
+  }
+  const stateBasedIcons = typeof icon !== 'string';
+  if (stateBasedIcons) {
+    const {
+      open,
+      closed
+    } = icon;
+    if (isHoverTrigger) {
+      return /*#__PURE__*/React.createElement("span", {
+        className: "menuIconsHoverWrapper"
+      }, RenderIcon(open, true), RenderIcon(closed));
+    }
+    if (open && closed) {
+      if (isOpen) {
+        return RenderIcon(open, true);
+      }
+      return RenderIcon(closed);
+    }
+  }
+  return icon;
+};
+//# sourceMappingURL=MenuItemIcon.js.map

package/dist/esm/components/navigation/menu/menuItemContent/MenuItemIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemIcon.js","names":["React","Icon","MenuItemIcon","icon","isOpen","isHoverTrigger","RenderIcon","hoverState","createElement","customCssClass","isValidElement","stateBasedIcons","open","closed","className"],"sources":["../../../../../../src/components/navigation/menu/menuItemContent/MenuItemIcon.tsx"],"sourcesContent":["'use client';\n\nimport React, { ReactNode } from 'react';\nimport { MenuItemIconPropTypes, MenuItemIconStates } from '../Menu.interfaces';\nimport { Icon } from '../../../design/icons/basicIcon/Icon';\n\ninterface MenuItemIconProps {\n  icon: MenuItemIconPropTypes;\n  isOpen?: boolean;\n  isHoverTrigger?: boolean;\n}\n\nexport const MenuItemIcon: React.FC<MenuItemIconProps> = (\n  {\n    icon,\n    isOpen = false,\n    isHoverTrigger\n  }\n) => {\n  const RenderIcon = (icon: string, hoverState?: boolean) => (\n    <Icon customCssClass={ hoverState ? 'hover' : '' } icon={ icon } />\n  );\n\n  if (typeof icon === 'string') {\n    return <Icon icon={ icon } />;\n  }\n\n  if (React.isValidElement(icon)) {\n    return icon as ReactNode;\n  }\n\n  const stateBasedIcons = typeof icon !== 'string';\n  if (stateBasedIcons) {\n    const { open, closed } = icon as MenuItemIconStates;\n\n    if (isHoverTrigger) {\n      return (\n        <span className=\"menuIconsHoverWrapper\">\n          { RenderIcon(open, true) }\n          { RenderIcon(closed) }\n        </span>\n      );\n    }\n\n    if (open && closed) {\n      if (isOpen) {\n        return RenderIcon(open, true);\n      }\n      return RenderIcon(closed);\n    }\n  }\n\n  return icon as ReactNode;\n};\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,MAAqB,OAAO;AAExC,SAASC,IAAI,QAAQ,sCAAsC;AAQ3D,OAAO,MAAMC,YAAyC,GAAGA,CACvD;EACEC,IAAI;EACJC,MAAM,GAAG,KAAK;EACdC;AACF,CAAC,KACE;EACH,MAAMC,UAAU,GAAGA,CAACH,IAAY,EAAEI,UAAoB,kBACpDP,KAAA,CAAAQ,aAAA,CAACP,IAAI;IAACQ,cAAc,EAAGF,UAAU,GAAG,OAAO,GAAG,EAAI;IAACJ,IAAI,EAAGA;EAAM,CAAE,CACnE;EAED,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;IAC5B,oBAAOH,KAAA,CAAAQ,aAAA,CAACP,IAAI;MAACE,IAAI,EAAGA;IAAM,CAAE,CAAC;EAC/B;EAEA,iBAAIH,KAAK,CAACU,cAAc,CAACP,IAAI,CAAC,EAAE;IAC9B,OAAOA,IAAI;EACb;EAEA,MAAMQ,eAAe,GAAG,OAAOR,IAAI,KAAK,QAAQ;EAChD,IAAIQ,eAAe,EAAE;IACnB,MAAM;MAAEC,IAAI;MAAEC;IAAO,CAAC,GAAGV,IAA0B;IAEnD,IAAIE,cAAc,EAAE;MAClB,oBACEL,KAAA,CAAAQ,aAAA;QAAMM,SAAS,EAAC;MAAuB,GACnCR,UAAU,CAACM,IAAI,EAAE,IAAI,CAAC,EACtBN,UAAU,CAACO,MAAM,CACf,CAAC;IAEX;IAEA,IAAID,IAAI,IAAIC,MAAM,EAAE;MAClB,IAAIT,MAAM,EAAE;QACV,OAAOE,UAAU,CAACM,IAAI,EAAE,IAAI,CAAC;MAC/B;MACA,OAAON,UAAU,CAACO,MAAM,CAAC;IAC3B;EACF;EAEA,OAAOV,IAAI;AACb,CAAC","ignoreList":[]}

package/dist/esm/components/navigation/menu/menuUtilities.js

@@ -0,0 +1,24 @@
+export const GetSubMenuCssClass = ({
+  level,
+  subMenuItem
+}) => {
+  const {
+    isOpen,
+    menuItems,
+    customCssClass
+  } = subMenuItem;
+  const cssClasses = ['subMenu', `level_${level}`];
+  if (customCssClass) {
+    cssClasses.push(customCssClass);
+  }
+  if (menuItems && menuItems.length > 0) {
+    cssClasses.push('hasSubmenu');
+    if (isOpen) {
+      cssClasses.push('open');
+    } else {
+      cssClasses.push('closed');
+    }
+  }
+  return cssClasses.join(' ');
+};
+//# sourceMappingURL=menuUtilities.js.map

package/dist/esm/components/navigation/menu/menuUtilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menuUtilities.js","names":["GetSubMenuCssClass","level","subMenuItem","isOpen","menuItems","customCssClass","cssClasses","push","length","join"],"sources":["../../../../../src/components/navigation/menu/menuUtilities.ts"],"sourcesContent":["import { MenuItemPropTypes } from './Menu.interfaces';\n\nexport const GetSubMenuCssClass = (\n  {\n    level,\n    subMenuItem\n  } :\n  {\n    level: number,\n    subMenuItem: MenuItemPropTypes\n  }\n) => {\n  const { isOpen, menuItems, customCssClass } = subMenuItem;\n\n  const cssClasses = ['subMenu', `level_${ level }`];\n\n  if (customCssClass) {\n    cssClasses.push(customCssClass);\n  }\n\n  if (menuItems && menuItems.length > 0) {\n    cssClasses.push('hasSubmenu');\n    if (isOpen) {\n      cssClasses.push('open');\n    } else {\n      cssClasses.push('closed');\n    }\n  }\n  return cssClasses.join(' ');\n};\n"],"mappings":"AAEA,OAAO,MAAMA,kBAAkB,GAAGA,CAChC;EACEC,KAAK;EACLC;AAKF,CAAC,KACE;EACH,MAAM;IAAEC,MAAM;IAAEC,SAAS;IAAEC;EAAe,CAAC,GAAGH,WAAW;EAEzD,MAAMI,UAAU,GAAG,CAAC,SAAS,EAAE,SAAUL,KAAK,EAAG,CAAC;EAElD,IAAII,cAAc,EAAE;IAClBC,UAAU,CAACC,IAAI,CAACF,cAAc,CAAC;EACjC;EAEA,IAAID,SAAS,IAAIA,SAAS,CAACI,MAAM,GAAG,CAAC,EAAE;IACrCF,UAAU,CAACC,IAAI,CAAC,YAAY,CAAC;IAC7B,IAAIJ,MAAM,EAAE;MACVG,UAAU,CAACC,IAAI,CAAC,MAAM,CAAC;IACzB,CAAC,MAAM;MACLD,UAAU,CAACC,IAAI,CAAC,QAAQ,CAAC;IAC3B;EACF;EACA,OAAOD,UAAU,CAACG,IAAI,CAAC,GAAG,CAAC;AAC7B,CAAC","ignoreList":[]}

package/dist/esm/components/navigation/menu/subMenuItems/ActiveSubMenuItem.js

@@ -0,0 +1,18 @@
+'use client';
+
+import React from 'react';
+import { MenuItemContent } from '../menuItemContent/MenuItemContent';
+export const ActiveSubMenuItem = ({
+  subMenuItem,
+  icons
+}) => /*#__PURE__*/React.createElement("span", {
+  className: "activeMenuItem"
+}, /*#__PURE__*/React.createElement(MenuItemContent, {
+  itemDefinition: {
+    ...subMenuItem,
+    icons,
+    isOpen: subMenuItem.isOpen,
+    isActive: true
+  }
+}));
+//# sourceMappingURL=ActiveSubMenuItem.js.map

package/dist/esm/components/navigation/menu/subMenuItems/ActiveSubMenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveSubMenuItem.js","names":["React","MenuItemContent","ActiveSubMenuItem","subMenuItem","icons","createElement","className","itemDefinition","isOpen","isActive"],"sources":["../../../../../../src/components/navigation/menu/subMenuItems/ActiveSubMenuItem.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { MenuButtonPropTypes, MenuItemIconsPropTypes } from '../Menu.interfaces';\nimport { MenuItemContent } from '../menuItemContent/MenuItemContent';\n\ninterface ActiveSubMenuItemProps {\n  subMenuItem: MenuButtonPropTypes,\n  icons?: MenuItemIconsPropTypes\n}\n\nexport const ActiveSubMenuItem: React.FC<ActiveSubMenuItemProps> = (\n  {\n    subMenuItem,\n    icons\n  }\n) => (\n  <span className=\"activeMenuItem\">\n    <MenuItemContent\n      itemDefinition={\n        {\n          ...subMenuItem,\n          icons,\n          isOpen: subMenuItem.isOpen,\n          isActive: true\n        }\n      }\n    />\n  </span>\n);\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,eAAe,QAAQ,oCAAoC;AAOpE,OAAO,MAAMC,iBAAmD,GAAGA,CACjE;EACEC,WAAW;EACXC;AACF,CAAC,kBAEDJ,KAAA,CAAAK,aAAA;EAAMC,SAAS,EAAC;AAAgB,gBAC9BN,KAAA,CAAAK,aAAA,CAACJ,eAAe;EACdM,cAAc,EACZ;IACE,GAAGJ,WAAW;IACdC,KAAK;IACLI,MAAM,EAAEL,WAAW,CAACK,MAAM;IAC1BC,QAAQ,EAAE;EACZ;AACD,CACF,CACG,CACP","ignoreList":[]}

package/dist/esm/components/navigation/menu/subMenuItems/SubMenuButton.js

@@ -0,0 +1,60 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useRef } from 'react';
+import { ActiveSubMenuItem } from './ActiveSubMenuItem';
+import { MenuItemContent } from '../menuItemContent/MenuItemContent';
+export const SubMenuButton = ({
+  subMenuItem,
+  isHoverTrigger,
+  subMenuId,
+  hasSubmenu,
+  path,
+  activeRoute,
+  onMenuButtonClick
+}) => {
+  const {
+    url,
+    icons,
+    isActive,
+    isOpen,
+    id,
+    customCssClass,
+    route
+  } = subMenuItem;
+  const subMenuButton = useRef(null);
+  const hasRightIcon = icons && icons.right;
+  const hasLeftIcon = icons && icons.left;
+  if (isActive || route && activeRoute === route) {
+    return /*#__PURE__*/React.createElement(ActiveSubMenuItem, {
+      subMenuItem: subMenuItem,
+      icons: icons
+    });
+  }
+  const ariaProperties = hasSubmenu ? {
+    'aria-expanded': isOpen,
+    'aria-controls': subMenuId
+  } : {};
+  const triggerCssClass = `
+    menuTrigger 
+    ${url ? 'withLink' : ''} 
+    ${hasLeftIcon ? 'hasLeftIcon' : ''} 
+    ${hasRightIcon ? 'hasRightIcon' : ''}
+    ${customCssClass || ''}
+  `;
+  return /*#__PURE__*/React.createElement("button", _extends({
+    ref: subMenuButton
+  }, ariaProperties, {
+    id: id,
+    type: "button",
+    className: triggerCssClass,
+    onClick: e => onMenuButtonClick(e, subMenuItem, path),
+    "data-path": path
+  }), /*#__PURE__*/React.createElement(MenuItemContent, {
+    itemDefinition: {
+      ...subMenuItem
+    },
+    isHoverTrigger: isHoverTrigger
+  }));
+};
+//# sourceMappingURL=SubMenuButton.js.map

package/dist/esm/components/navigation/menu/subMenuItems/SubMenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenuButton.js","names":["_extends","React","useRef","ActiveSubMenuItem","MenuItemContent","SubMenuButton","subMenuItem","isHoverTrigger","subMenuId","hasSubmenu","path","activeRoute","onMenuButtonClick","url","icons","isActive","isOpen","id","customCssClass","route","subMenuButton","hasRightIcon","right","hasLeftIcon","left","createElement","ariaProperties","triggerCssClass","ref","type","className","onClick","e","itemDefinition"],"sources":["../../../../../../src/components/navigation/menu/subMenuItems/SubMenuButton.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef } from 'react';\nimport { MenuButtonPropTypes } from '../Menu.interfaces';\nimport { GenericFunction } from '../../../../interfaces';\nimport { ActiveSubMenuItem } from './ActiveSubMenuItem';\nimport { MenuItemContent } from '../menuItemContent/MenuItemContent';\n\ninterface SubMenuButtonProps {\n  subMenuItem: MenuButtonPropTypes;\n  activeRoute: string;\n  isHoverTrigger: boolean;\n  subMenuId: string\n  hasSubmenu?: boolean;\n  path: number[];\n  onMenuButtonClick: GenericFunction;\n}\n\nexport const SubMenuButton: React.FC<SubMenuButtonProps> = (\n  {\n    subMenuItem,\n    isHoverTrigger,\n    subMenuId,\n    hasSubmenu,\n    path,\n    activeRoute,\n    onMenuButtonClick\n  }\n) => {\n  const {\n    url, icons, isActive, isOpen, id, customCssClass, route\n  } = subMenuItem;\n\n  const subMenuButton = useRef(null);\n\n  const hasRightIcon = icons && icons.right;\n  const hasLeftIcon = icons && icons.left;\n\n  if (isActive || (route && activeRoute === route)) {\n    return (\n      <ActiveSubMenuItem\n        subMenuItem={ subMenuItem }\n        icons={ icons }\n      />\n    );\n  }\n\n  const ariaProperties = hasSubmenu ? {\n    'aria-expanded': isOpen,\n    'aria-controls': subMenuId\n  } : {};\n\n  const triggerCssClass = `\n    menuTrigger \n    ${ url ? 'withLink' : '' } \n    ${ hasLeftIcon ? 'hasLeftIcon' : '' } \n    ${ hasRightIcon ? 'hasRightIcon' : '' }\n    ${ customCssClass || '' }\n  `;\n\n  return (\n    <button\n      ref={ subMenuButton }\n      { ...ariaProperties }\n      id={ id }\n      type=\"button\"\n      className={ triggerCssClass }\n      onClick={ (e) => onMenuButtonClick(e, subMenuItem, path) }\n      data-path={ path }\n    >\n      <MenuItemContent\n        itemDefinition={\n          {\n            ...subMenuItem\n          }\n        }\n        isHoverTrigger={ isHoverTrigger }\n      />\n    </button>\n  );\n};\n"],"mappings":"AAAA,YAAY;;AAAC,OAAAA,QAAA;AAEb,OAAOC,KAAK,IAAIC,MAAM,QAAQ,OAAO;AAGrC,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,SAASC,eAAe,QAAQ,oCAAoC;AAYpE,OAAO,MAAMC,aAA2C,GAAGA,CACzD;EACEC,WAAW;EACXC,cAAc;EACdC,SAAS;EACTC,UAAU;EACVC,IAAI;EACJC,WAAW;EACXC;AACF,CAAC,KACE;EACH,MAAM;IACJC,GAAG;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,EAAE;IAAEC,cAAc;IAAEC;EACpD,CAAC,GAAGb,WAAW;EAEf,MAAMc,aAAa,GAAGlB,MAAM,CAAC,IAAI,CAAC;EAElC,MAAMmB,YAAY,GAAGP,KAAK,IAAIA,KAAK,CAACQ,KAAK;EACzC,MAAMC,WAAW,GAAGT,KAAK,IAAIA,KAAK,CAACU,IAAI;EAEvC,IAAIT,QAAQ,IAAKI,KAAK,IAAIR,WAAW,KAAKQ,KAAM,EAAE;IAChD,oBACElB,KAAA,CAAAwB,aAAA,CAACtB,iBAAiB;MAChBG,WAAW,EAAGA,WAAa;MAC3BQ,KAAK,EAAGA;IAAO,CAChB,CAAC;EAEN;EAEA,MAAMY,cAAc,GAAGjB,UAAU,GAAG;IAClC,eAAe,EAAEO,MAAM;IACvB,eAAe,EAAER;EACnB,CAAC,GAAG,CAAC,CAAC;EAEN,MAAMmB,eAAe,GAAG;AAC1B;AACA,MAAOd,GAAG,GAAG,UAAU,GAAG,EAAE;AAC5B,MAAOU,WAAW,GAAG,aAAa,GAAG,EAAE;AACvC,MAAOF,YAAY,GAAG,cAAc,GAAG,EAAE;AACzC,MAAOH,cAAc,IAAI,EAAE;AAC3B,GAAG;EAED,oBACEjB,KAAA,CAAAwB,aAAA,WAAAzB,QAAA;IACE4B,GAAG,EAAGR;EAAe,GAChBM,cAAc;IACnBT,EAAE,EAAGA,EAAI;IACTY,IAAI,EAAC,QAAQ;IACbC,SAAS,EAAGH,eAAiB;IAC7BI,OAAO,EAAIC,CAAC,IAAKpB,iBAAiB,CAACoB,CAAC,EAAE1B,WAAW,EAAEI,IAAI,CAAG;IAC1D,aAAYA;EAAM,iBAElBT,KAAA,CAAAwB,aAAA,CAACrB,eAAe;IACd6B,cAAc,EACZ;MACE,GAAG3B;IACL,CACD;IACDC,cAAc,EAAGA;EAAgB,CAClC,CACK,CAAC;AAEb,CAAC","ignoreList":[]}

package/dist/esm/components/navigation/menu/subMenuItems/SubMenuItems.js

@@ -0,0 +1,119 @@
+'use client';
+
+import React, { useRef, useEffect } from 'react';
+import { GetSubMenuCssClass } from '../menuUtilities';
+import { SubMenuButton } from './SubMenuButton';
+import { useOnClickOutside } from '../../../../hooks/ClickOutside';
+export const SubMenuItems = ({
+  menuId,
+  activeRoute,
+  subMenuItems,
+  subMenuIsOpen = false,
+  isHoverTrigger = true,
+  subMenuId,
+  level = 0,
+  path = [],
+  onMenuButtonClick = () => {},
+  behaviour,
+  onSubmenuRefChange
+}) => {
+  if (!subMenuItems || !subMenuItems.length) {
+    return '';
+  }
+  const menuRef = useRef(null);
+  useEffect(() => {
+    if (behaviour === 'popSubmenus' && level === 2 && subMenuIsOpen && onSubmenuRefChange) {
+      onSubmenuRefChange(menuRef);
+    } else if (behaviour === 'popSubmenus' && level === 2 && !subMenuIsOpen && onSubmenuRefChange) {
+      onSubmenuRefChange(null);
+    }
+  }, [subMenuIsOpen, level, behaviour, onSubmenuRefChange]);
+  useOnClickOutside(menuRef, behaviour === 'popSubmenus' && subMenuIsOpen && level > 1 ? event => {
+    const clickedElement = event.target;
+
+    // Check if the clicked element is a menu button within this menu component
+    const rootMenuElement = document.getElementById(menuId);
+
+    // Only consider clicks on menu elements that are part of this menu component
+    if (rootMenuElement && (clickedElement.closest(`#${menuId} .menuTrigger`) || clickedElement.closest(`#${menuId} .menuItem`))) {
+      // If we clicked on a menu button within this menu component, let normal click handling take over
+      return;
+    }
+
+    // Close submenu by simulating a click on its parent
+    if (path && path.length > 0) {
+      const syntheticEvent = {
+        type: 'click',
+        preventDefault: () => {},
+        stopPropagation: () => {}
+      };
+
+      // Get the parent path
+      const parentPath = path.length > 2 ? path.slice(0, -1) : path;
+      if (parentPath.length > 0) {
+        // Create a minimal menu item that's currently open (so it will be closed)
+        const menuItem = {
+          isOpen: true
+        };
+        onMenuButtonClick(syntheticEvent, menuItem, parentPath);
+      }
+    }
+  } : undefined);
+  const nextLevel = parseInt(String(level), 10) + 1;
+  const wrapperCssClass = `
+    noBullet 
+    subMenuItems 
+    subMenuItems_level${level} 
+    ${subMenuIsOpen ? 'isOpen' : ''}
+    ${isHoverTrigger ? 'hoverTrigger' : ''}
+    `;
+  return /*#__PURE__*/React.createElement("ul", {
+    className: wrapperCssClass,
+    id: subMenuId,
+    ref: menuRef
+  }, subMenuItems.map((subMenuItem, index) => {
+    const {
+      menuItems,
+      hideItem,
+      isOpen,
+      isActive
+    } = subMenuItem;
+    const hasSubmenu = menuItems && menuItems.length > 0;
+    const subMenuId = `${menuId}_subMenu_${nextLevel}_${index}`;
+    const subMenuCssClass = GetSubMenuCssClass({
+      level,
+      subMenuItem
+    });
+    const itemPath = [...path, index];
+    if (hideItem) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("li", {
+      key: subMenuId,
+      className: subMenuCssClass
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "menuItem"
+    }, /*#__PURE__*/React.createElement(SubMenuButton, {
+      subMenuItem,
+      subMenuId,
+      hasSubmenu,
+      activeRoute,
+      path: itemPath,
+      onMenuButtonClick,
+      isHoverTrigger
+    })), /*#__PURE__*/React.createElement(SubMenuItems, {
+      menuId,
+      subMenuId,
+      activeRoute,
+      subMenuItems: menuItems,
+      subMenuIsOpen: isOpen || isActive,
+      level: nextLevel,
+      path: itemPath,
+      onMenuButtonClick,
+      behaviour,
+      // Pass behaviour to child SubMenuItems
+      onSubmenuRefChange
+    }));
+  }));
+};
+//# sourceMappingURL=SubMenuItems.js.map

package/dist/esm/components/navigation/menu/subMenuItems/SubMenuItems.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenuItems.js","names":["React","useRef","useEffect","GetSubMenuCssClass","SubMenuButton","useOnClickOutside","SubMenuItems","menuId","activeRoute","subMenuItems","subMenuIsOpen","isHoverTrigger","subMenuId","level","path","onMenuButtonClick","behaviour","onSubmenuRefChange","length","menuRef","event","clickedElement","target","rootMenuElement","document","getElementById","closest","syntheticEvent","type","preventDefault","stopPropagation","parentPath","slice","menuItem","isOpen","undefined","nextLevel","parseInt","String","wrapperCssClass","createElement","className","id","ref","map","subMenuItem","index","menuItems","hideItem","isActive","hasSubmenu","subMenuCssClass","itemPath","key"],"sources":["../../../../../../src/components/navigation/menu/subMenuItems/SubMenuItems.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect } from 'react';\nimport { GenericFunction } from '../../../../interfaces';\nimport { MenuItemPropTypes } from '../Menu.interfaces';\nimport { GetSubMenuCssClass } from '../menuUtilities';\nimport { SubMenuButton } from './SubMenuButton';\nimport { useOnClickOutside } from '../../../../hooks/ClickOutside';\n\ninterface SubMenuItemsProps {\n  menuId: string;\n  activeRoute: string;\n  subMenuItems?: MenuItemPropTypes[];\n  subMenuIsOpen?: boolean;\n  isHoverTrigger?: boolean;\n  subMenuId: string;\n  level: number;\n  path?: number[];\n  onMenuButtonClick: GenericFunction;\n  behaviour?: 'hamburger' | 'floating' | 'popSubmenus';\n  //eslint-disable-next-line no-unused-vars\n  onSubmenuRefChange?: (ref: React.RefObject<HTMLUListElement> | null) => void;\n}\n\nexport const SubMenuItems: React.FC<SubMenuItemsProps> = (\n  {\n    menuId,\n    activeRoute,\n    subMenuItems,\n    subMenuIsOpen = false,\n    isHoverTrigger = true,\n    subMenuId,\n    level = 0,\n    path = [],\n    onMenuButtonClick = () => {},\n    behaviour,\n    onSubmenuRefChange\n  }\n) => {\n  if (!subMenuItems || !subMenuItems.length) {\n    return '';\n  }\n\n  const menuRef = useRef<HTMLUListElement>(null);\n\n  useEffect(() => {\n    if (behaviour === 'popSubmenus' && level === 2 && subMenuIsOpen && onSubmenuRefChange) {\n      onSubmenuRefChange(menuRef);\n    } else if (behaviour === 'popSubmenus' && level === 2 && !subMenuIsOpen && onSubmenuRefChange) {\n      onSubmenuRefChange(null);\n    }\n  }, [subMenuIsOpen, level, behaviour, onSubmenuRefChange]);\n\n  useOnClickOutside(\n    menuRef,\n    behaviour === 'popSubmenus' && subMenuIsOpen && level > 1\n      ? (event: MouseEvent | TouchEvent | FocusEvent) => {\n        const clickedElement = event.target as Element;\n          \n        // Check if the clicked element is a menu button within this menu component\n        const rootMenuElement = document.getElementById(menuId);\n          \n        // Only consider clicks on menu elements that are part of this menu component\n        if (rootMenuElement && \n              (clickedElement.closest(`#${ menuId } .menuTrigger`) || \n               clickedElement.closest(`#${ menuId } .menuItem`))) {\n          // If we clicked on a menu button within this menu component, let normal click handling take over\n          return;\n        }\n\n        // Close submenu by simulating a click on its parent\n        if (path && path.length > 0) {\n          const syntheticEvent = {\n            type: 'click',\n            preventDefault: () => {},\n            stopPropagation: () => {}\n          } as React.UIEvent;\n            \n          // Get the parent path\n          const parentPath = path.length > 2 ? path.slice(0, -1) : path;\n            \n          if (parentPath.length > 0) {\n            // Create a minimal menu item that's currently open (so it will be closed)\n            const menuItem = { isOpen: true } as MenuItemPropTypes;\n            onMenuButtonClick(syntheticEvent, menuItem, parentPath);\n          }\n        }\n      }\n      : undefined\n  );\n\n  const nextLevel = parseInt(String(level), 10) + 1;\n\n  const wrapperCssClass = `\n    noBullet \n    subMenuItems \n    subMenuItems_level${ level } \n    ${ subMenuIsOpen ? 'isOpen' : '' }\n    ${ isHoverTrigger ? 'hoverTrigger' : '' }\n    `;\n\n  return (\n    <ul className={ wrapperCssClass } id={ subMenuId } \n      ref={ menuRef }\n    >\n      {\n        subMenuItems.map((subMenuItem, index) => {\n          const {\n            menuItems, hideItem, isOpen, isActive\n          } = subMenuItem;\n          const hasSubmenu = menuItems && menuItems.length > 0;\n\n          const subMenuId = `${ menuId }_subMenu_${ nextLevel }_${ index }`;\n          const subMenuCssClass = GetSubMenuCssClass({ level, subMenuItem });\n          const itemPath = [...path, index];\n\n          if (hideItem) {\n            return null;\n          }\n\n          return (\n            <li key={ subMenuId } className={ subMenuCssClass }>\n              <span className=\"menuItem\">\n                <SubMenuButton\n                  {\n                    ...{\n                      subMenuItem,\n                      subMenuId,\n                      hasSubmenu,\n                      activeRoute,\n                      path: itemPath,\n                      onMenuButtonClick,\n                      isHoverTrigger\n                    }\n                  }\n                />\n              </span>\n\n              <SubMenuItems\n                {\n                  ...{\n                    menuId,\n                    subMenuId,\n                    activeRoute,\n                    subMenuItems: menuItems,\n                    subMenuIsOpen: isOpen || isActive,\n                    level: nextLevel,\n                    path: itemPath,\n                    onMenuButtonClick,\n                    behaviour, // Pass behaviour to child SubMenuItems\n                    onSubmenuRefChange\n                  }\n                }\n              />\n            </li>\n          );\n        })\n      }\n    </ul>\n  );\n};"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/navigation/popupMenu/PopupMenu.js

@@ -0,0 +1,48 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useRef, useState } from 'react';
+import { Menu } from '../menu/Menu';
+import { UserPicButton } from '../../form/buttons/userPicButton/UserPicButton';
+import { NotificationsButton } from '../../form/buttons/notificationsButton/NotificationsButton';
+import { SimpleButton } from '../../form/buttons/SimpleButton';
+import { useOnClickOutside, usePopupKeys } from '../../../hooks';
+import './popupMenu.css';
+export const PopupMenu = props => {
+  const [isMenuShowing, setIsMenuShowing] = useState(false);
+  const menuHolder = useRef(null);
+  useOnClickOutside(menuHolder, () => setIsMenuShowing(false));
+  usePopupKeys(menuHolder, () => setIsMenuShowing(false));
+  const {
+    triggerSettings,
+    id = 'popupMenu',
+    popDirection = {
+      x: 'right',
+      y: 'down'
+    },
+    ...rest
+  } = props;
+  const toggleMenuShowing = () => {
+    setIsMenuShowing(!isMenuShowing);
+  };
+  const cssClass = `
+    popupMenu 
+    ${isMenuShowing ? 'open' : ''}
+    popDirection_${popDirection.x || 'right'}_${popDirection.y || 'down'}
+  `;
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: cssClass,
+    ref: menuHolder
+  }, triggerSettings.userSettings && /*#__PURE__*/React.createElement(UserPicButton, _extends({}, triggerSettings.userSettings, {
+    onClickHandler: toggleMenuShowing
+  })), triggerSettings.notificationsSettings && /*#__PURE__*/React.createElement(NotificationsButton, _extends({}, triggerSettings.notificationsSettings, {
+    onClickHandler: toggleMenuShowing
+  })), triggerSettings.default && /*#__PURE__*/React.createElement(SimpleButton, _extends({}, triggerSettings.default, {
+    onClickHandler: toggleMenuShowing
+  })), /*#__PURE__*/React.createElement(Menu, _extends({}, rest, {
+    id: `${id}MenuItems`
+  })));
+};
+export default PopupMenu;
+//# sourceMappingURL=PopupMenu.js.map

package/dist/esm/components/navigation/popupMenu/PopupMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupMenu.js","names":["_extends","React","useRef","useState","Menu","UserPicButton","NotificationsButton","SimpleButton","useOnClickOutside","usePopupKeys","PopupMenu","props","isMenuShowing","setIsMenuShowing","menuHolder","triggerSettings","id","popDirection","x","y","rest","toggleMenuShowing","cssClass","createElement","className","ref","userSettings","onClickHandler","notificationsSettings","default"],"sources":["../../../../../src/components/navigation/popupMenu/PopupMenu.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useState } from 'react';\nimport { Menu, MenuProps } from '../menu/Menu';\nimport { ButtonProps } from '../../form/buttons/button.interface';\nimport { UserPicButton, UserPicButtonProps } from '../../form/buttons/userPicButton/UserPicButton';\nimport {\n  NotificationsButton,\n  NotificationsButtonProps\n} from '../../form/buttons/notificationsButton/NotificationsButton';\nimport { SimpleButton } from '../../form/buttons/SimpleButton';\nimport { useOnClickOutside, usePopupKeys } from '../../../hooks';\n\nimport './popupMenu.scss';\n\ntype DefaultPopupMenuTriggerProps = Omit<ButtonProps, 'onClickHandler'>\ntype UserPicPopupMenuTriggerProps = Omit<UserPicButtonProps, 'onClickHandler'>\ntype NotificationsPopupMenuTriggerProps = Omit<NotificationsButtonProps, 'onClickHandler'>\n\ninterface PopupMenuProps extends MenuProps {\n  activeRoute?: string;\n  triggerSettings: {\n    default?: DefaultPopupMenuTriggerProps,\n    userSettings?: UserPicPopupMenuTriggerProps,\n    notificationsSettings?: NotificationsPopupMenuTriggerProps\n  },\n  popDirection?: {\n    y?: 'up' | 'down',\n    x?: 'left' | 'right'\n  };\n  id: string;\n}\n\nexport const PopupMenu: React.FC<PopupMenuProps> = (\n  props\n) => {\n  const [isMenuShowing, setIsMenuShowing] = useState<boolean>(false);\n\n  const menuHolder = useRef<HTMLDivElement>(null);\n\n  useOnClickOutside(menuHolder, () => setIsMenuShowing(false));\n  usePopupKeys(menuHolder, () => setIsMenuShowing(false));\n\n  const {\n    triggerSettings,\n    id = 'popupMenu',\n    popDirection = { x: 'right', y: 'down' },\n    ...rest\n  } = props;\n\n  const toggleMenuShowing = () => {\n    setIsMenuShowing(!isMenuShowing);\n  };\n\n  const cssClass = `\n    popupMenu \n    ${ isMenuShowing ? 'open' : '' }\n    popDirection_${ popDirection.x || 'right' }_${ popDirection.y || 'down' }\n  `;\n\n  return (\n    <div id={ id } className={ cssClass } ref={ menuHolder }>\n      { triggerSettings.userSettings && <UserPicButton { ...triggerSettings.userSettings } onClickHandler={ toggleMenuShowing } /> }\n\n      { triggerSettings.notificationsSettings\n        && <NotificationsButton { ...triggerSettings.notificationsSettings } onClickHandler={ toggleMenuShowing } /> }\n\n      { triggerSettings.default && <SimpleButton { ...triggerSettings.default } onClickHandler={ toggleMenuShowing } /> }\n\n      <Menu { ...rest } id={ `${ id }MenuItems` } />\n    </div>\n  );\n};\n\nexport default PopupMenu;\n"],"mappings":"AAAA,YAAY;;AAAC,OAAAA,QAAA;AAEb,OAAOC,KAAK,IAAIC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC/C,SAASC,IAAI,QAAmB,cAAc;AAE9C,SAASC,aAAa,QAA4B,gDAAgD;AAClG,SACEC,mBAAmB,QAEd,4DAA4D;AACnE,SAASC,YAAY,QAAQ,iCAAiC;AAC9D,SAASC,iBAAiB,EAAEC,YAAY,QAAQ,gBAAgB;AAEhE,OAAO,kBAAkB;AAoBzB,OAAO,MAAMC,SAAmC,GAC9CC,KAAK,IACF;EACH,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGV,QAAQ,CAAU,KAAK,CAAC;EAElE,MAAMW,UAAU,GAAGZ,MAAM,CAAiB,IAAI,CAAC;EAE/CM,iBAAiB,CAACM,UAAU,EAAE,MAAMD,gBAAgB,CAAC,KAAK,CAAC,CAAC;EAC5DJ,YAAY,CAACK,UAAU,EAAE,MAAMD,gBAAgB,CAAC,KAAK,CAAC,CAAC;EAEvD,MAAM;IACJE,eAAe;IACfC,EAAE,GAAG,WAAW;IAChBC,YAAY,GAAG;MAAEC,CAAC,EAAE,OAAO;MAAEC,CAAC,EAAE;IAAO,CAAC;IACxC,GAAGC;EACL,CAAC,GAAGT,KAAK;EAET,MAAMU,iBAAiB,GAAGA,CAAA,KAAM;IAC9BR,gBAAgB,CAAC,CAACD,aAAa,CAAC;EAClC,CAAC;EAED,MAAMU,QAAQ,GAAG;AACnB;AACA,MAAOV,aAAa,GAAG,MAAM,GAAG,EAAE;AAClC,mBAAoBK,YAAY,CAACC,CAAC,IAAI,OAAO,IAAMD,YAAY,CAACE,CAAC,IAAI,MAAM;AAC3E,GAAG;EAED,oBACElB,KAAA,CAAAsB,aAAA;IAAKP,EAAE,EAAGA,EAAI;IAACQ,SAAS,EAAGF,QAAU;IAACG,GAAG,EAAGX;EAAY,GACpDC,eAAe,CAACW,YAAY,iBAAIzB,KAAA,CAAAsB,aAAA,CAAClB,aAAa,EAAAL,QAAA,KAAMe,eAAe,CAACW,YAAY;IAAGC,cAAc,EAAGN;EAAmB,EAAE,CAAC,EAE1HN,eAAe,CAACa,qBAAqB,iBAClC3B,KAAA,CAAAsB,aAAA,CAACjB,mBAAmB,EAAAN,QAAA,KAAMe,eAAe,CAACa,qBAAqB;IAAGD,cAAc,EAAGN;EAAmB,EAAE,CAAC,EAE5GN,eAAe,CAACc,OAAO,iBAAI5B,KAAA,CAAAsB,aAAA,CAAChB,YAAY,EAAAP,QAAA,KAAMe,eAAe,CAACc,OAAO;IAAGF,cAAc,EAAGN;EAAmB,EAAE,CAAC,eAEjHpB,KAAA,CAAAsB,aAAA,CAACnB,IAAI,EAAAJ,QAAA,KAAMoB,IAAI;IAAGJ,EAAE,EAAG,GAAIA,EAAE;EAAc,EAAE,CAC1C,CAAC;AAEV,CAAC;AAED,eAAeN,SAAS","ignoreList":[]}